@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ==============================================
* SWELL カスタムCSS - 最適化版 v5.50 + 追加CSS統合版
* 2025年8月24日 反映
* v5.50: 投稿ページ末尾CTAの見栄え整え + 固定LP機能追加
* 変更点: 追加CSSを統合、固定LP用スタイル追加
* ============================================== */

/*
----------------------------------------------
* 基本設定
*
----------------------------------------------
*/

/* フォント設定 */
body {
    font-family: fot-tsukuardgothic-std, sans-serif;
    font-weight: 400;
    font-style: normal;
}

/* サブタイトルを非表示 */
.c-pageTitle__subTitle {
    display: none;
}

/* 画像の右クリック・ドラッグ防止 */
img {
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/*
----------------------------------------------
* ヘッダー設定
*
----------------------------------------------
*/

/* 下層ページのヘッダー幅をトップに合わせる */
.l-header .l-container {
    max-width: 100% !important;
}

/* ヘッダーメニューを非表示 */
#gnav {
    display: none !important;
}

/* PCでハンバーガーボタンを表示 */
.l-header__menuBtn.sp_ {
    display: block !important;
}

.-series .l-header__inner {
    align-items: center;
}

.p-spMenu {
    display: block;
}

/*
----------------------------------------------
* ハンバーガーボタンの色設定（実サイト対応版）
*
----------------------------------------------
*/

/*
* 実際のサイト構造に基づく解決策:
* - SWELLのクラス: -transparent, -t-fff を活用
* - アイコンフォント: icon-menu-thin の色制御
* - 動的変化: スクロール時のクラス変更に対応
*/

/* 既存の強制設定を削除（アイコンフォント対応） */
.l-header .c-iconBtn.-menuBtn,
.l-header .c-iconBtn.-menuBtn .c-iconBtn__icon,
.l-header .c-iconBtn.-menuBtn .icon-menu-thin {
    color: inherit !important;
}

/* SVG用の設定も削除（念のため） */
.l-header .c-iconBtn.-menuBtn svg {
    fill: inherit !important;
    stroke: inherit !important;
}

/* ハンバーガーライン用（もし存在する場合） */
.l-header .c-iconBtn.-menuBtn span {
    background-color: inherit !important;
}

/* SWELLの動的クラスに完全委任 */
.l-header.-transparent .c-iconBtn.-menuBtn,
.l-header.-t-fff .c-iconBtn.-menuBtn {
    color: inherit !important;
}

/* ホバー効果のみ維持 */
.l-header .c-iconBtn.-menuBtn:hover {
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

/*
----------------------------------------------
* フルスクリーンメニュー設定
*
----------------------------------------------
*/

:root {
    --menu-text-color: #6C6059;
    --menu-bg-color: rgba(255, 254, 249, 0.85);
    --menu-blur: 5px;
}

.p-spMenu__inner {
    --color_menu_text: var(--menu-text-color);
    --color_menu_bg: var(--menu-bg-color);
    width: 100%;
    height: 100%;
}

.p-spMenu__overlay {
    background: transparent;
}

.-right .p-spMenu__inner {
    transform: translateX(0);
    opacity: 0;
    transition: opacity 0.45s ease;
}

[data-spmenu="opened"] .p-spMenu__inner {
    transform: translateX(0);
    opacity: 1;
}

.p-spMenu__inner::before {
    background: var(--menu-bg-color);
    opacity: 1;
    backdrop-filter: blur(var(--menu-blur));
    -webkit-backdrop-filter: blur(var(--menu-blur));
}

/*
----------------------------------------------
* メニューコンテンツ設定
*
----------------------------------------------
*/

.p-spMenu__body {
    display: block;
    padding: 40px 20px;
    font-size: 18px;
    line-height: 2;
    color: var(--menu-text-color);
    overflow-y: auto;
    max-height: 100vh;
    text-align: left;
}

/* メニュータイトルを非表示 */
.c-widget__title.-spmenu {
    display: none;
}

/* メニューリンクの基本設定 */
.c-spnav a {
    border-bottom: none;
}

.c-gnav .sub-menu a:before,
.c-listMenu a:before {
    content: none;
}

/* メニューリンクのスタイル */
.p-spMenu__inner a {
    display: inline-block;
    padding: 0.5em 0;
    text-align: start;
    font-size: 18px;
    line-height: 2.2;
    transform-origin: left center;
    transition: transform 0.3s ease;
}

.p-spMenu__inner a:hover {
    transform: scale(1.05);
    text-decoration: underline;
}

/*
----------------------------------------------
* v5.41 修正：親カテゴリー・アコーディオン設定
*
----------------------------------------------
*/

/* 1. 親カテゴリーのホバーエフェクト完全削除（事実ベース対応） */
/* 実際のCSS構造: .p-spMenu__inner a:hover に基づく対策 */
.p-spMenu__body > ul > li > a {
    font-weight: bold;
}

/* 親カテゴリーの全ホバーエフェクト無効化 */
.p-spMenu__body > ul > li > a:hover {
    transform: none !important; /* scale(1.05) を無効化 */
    text-decoration: none !important; /* underline を無効化 */
    transition: none !important; /* アニメーション無効化 */
}

/* より具体的なセレクター設定（.menu-item-has-children対応） */
.p-spMenu__body .menu-item-has-children > a:hover {
    transform: none !important;
    text-decoration: none !important;
    background-color: transparent !important;
}

/* SWELLの元のルール（.p-spMenu__inner a:hover）を上書き */
.p-spMenu__inner .menu-item-has-children > a:hover {
    transform: none !important;
    text-decoration: none !important;
}

/* 2. アコーディオン「▼」アイコンの変更 */
/* SWELLの実際の構造に基づく解決策（c-submenuToggleBtn対応） */
/* icomoonアイコンフォントを通常フォントに変更 */
.p-spMenu .c-submenuToggleBtn::before,
.p-spMenu .c-submenuToggleBtn::after {
    font-family: fot-tsukuardgothic-std, sans-serif !important; /* icomoonを無効化 */
}

/* 閉じた状態：「+」アイコン表示 */
.p-spMenu .c-submenuToggleBtn::before {
    content: "+" !important;
    font-size: 18px !important;
    font-weight: bold !important;
    color: var(--menu-text-color) !important;
    line-height: 28px !important; /* ボタンの高さに合わせる */
    text-align: center !important;
}

/* 開いた状態：「−」アイコン表示 */
.p-spMenu .c-submenuToggleBtn.is-opened::before {
    content: "−" !important;
}

/* ::afterは使用しないため非表示 */
.p-spMenu .c-submenuToggleBtn::after {
    content: "" !important;
    display: none !important;
}

/* アニメーション効果 */
.p-spMenu .c-submenuToggleBtn::before {
    transition: all 0.25s ease !important;
}

/*
----------------------------------------------
* 既存の子メニュー設定（維持）
*
----------------------------------------------
*/

/* 子メニューのスタイル */
.p-spMenu__body ul ul a {
    padding-left: 1em;
    font-weight: normal;
    font-size: 17px;
}

/* メニューを開いた時の×ボタンの色設定 */
.p-spMenu .c-iconBtn,
.p-spMenu__closeBtn .c-iconBtn,
.p-spMenu__closeBtn {
    color: #6C6059 !important;
}

/* ×ボタン内のSVGアイコンの色 */
.p-spMenu .c-iconBtn svg,
.p-spMenu__closeBtn svg {
    fill: #6C6059 !important;
    stroke: #6C6059 !important;
}

/*
----------------------------------------------
* レスポンシブ設定
*
----------------------------------------------
*/

/* スマホ用フォントサイズ調整 */
@media (max-width: 599px) {
    .p-spMenu__body {
        font-size: clamp(14px, 3vw, 18px);
    }

    .p-spMenu__inner a {
        font-size: clamp(14px, 4vw, 18px);
    }

    /* v5.4: スマホでのアコーディオンアイコンサイズ調整 */
    .p-spMenu .c-accordion__trigger::before,
    .p-spMenu [data-accordion-trigger]::before {
        font-size: 16px;
    }
}

/* PC用閉じるボタン位置調整 */
@media (min-width: 960px) {
    .-right .p-spMenu__closeBtn {
        right: var(--swl-pad_container, 0);
        height: calc(var(--logo_size_pc) + 32px);
    }
}

/*
----------------------------------------------
* 投稿ページ末尾に自動で設定されるCTAを整える
*
----------------------------------------------
*/

/* 末尾CTAボックス */
.cs-stable-cta {
    margin-top: 2.0rem;
    padding: 1.2rem 1rem;
    border-top: 1px solid #e5e7eb; /* 上に線 */
    border-bottom: 1px solid #e5e7eb; /* 下に線 */
    border-left: none;
    border-right: none;
    background: transparent; /* 背景色を透明に（親要素の背景を継承） */
}

.cs-stable-cta__title {
    font-weight: 600;
    margin-bottom: .4rem;
    font-size: 1.05rem;
}

.cs-stable-cta__links a {
    text-decoration: none;
    border-bottom: 1px solid rgba(0,0,0,.2);
}

.cs-stable-cta__links a:hover {
    opacity: .8;
}

/*
----------------------------------------------
* 固定LP：共通（Hero / Lead / Cards）
* ブランドカラー適用版
* Coffey Stable brand color
* - Base: #FFFEF9
* - Text: #6C6059
* - Accent: #D6BDA5
*
----------------------------------------------
*/

/* Hero部分 */
.feature-hero .feature-label {
    letter-spacing: .08em;
    font-weight: 600;
    margin-bottom: .3em;
    color: #D6BDA5; /* アクセントカラー */
}

.feature-hero .feature-title {
    line-height: 1.15;
    margin: .1em 0 .2em;
    color: #6C6059; /* メインテキストカラー */
}

.feature-hero .feature-kicker {
    opacity: .9;
    color: #6C6059;
}

/* リード文 */
.feature-lead-group {
    margin-block: clamp(16px, 3vw, 28px);
}

.feature-lead {
    font-size: clamp(16px, 1.8vw, 18px);
    line-height: 1.9;
    color: #6C6059; /* 読みやすいテキストカラー */
}

/* カードグリッド */
.feature-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: clamp(12px, 2.4vw, 20px);
    margin-block: clamp(16px, 3vw, 28px);
}

.feature-card {
    background: #FFFEF9; /* ベースカラー */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(214, 189, 165, 0.25); /* アクセントカラー由来の影 */
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 18px rgba(214, 189, 165, 0.35);
}

.feature-card .wp-block-image { 
    aspect-ratio: 16/9; 
    overflow: hidden; 
}

.feature-card .wp-block-image img { 
    width: 100%; 
    height: 100%;
    object-fit: cover; 
    display: block; 
}

.feature-card__title {
    font-size: clamp(18px, 2.2vw, 20px);
    margin: 12px 16px 4px;
    line-height: 1.35;
    color: #6C6059;
}

.feature-card__text {
    margin: 0 16px 12px;
    opacity: .95;
    color: #6C6059;
}

.feature-card .wp-block-buttons { 
    margin: 0 16px 16px; 
}

.feature-card .wp-block-button__link {
    background-color: #D6BDA5; /* アクセントカラー */
    color: #FFFEF9; /* 白っぽいベースに白文字 */
    border-radius: 8px;
    padding: 0.5em 1.2em;
    transition: background-color 0.25s ease, opacity 0.25s ease;
}

.feature-card .wp-block-button__link:hover {
    background-color: #6C6059; /* テキストカラーに反転 */
    opacity: 0.9;
}

/* 過去特集リンク */
.feature-archive-link {
    text-align: right;
    margin-top: 8px;
}

.feature-archive-link a {
    color: #6C6059;
    font-weight: 600;
    border-bottom: 1px solid #D6BDA5;
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.feature-archive-link a:hover {
    color: #D6BDA5;
    border-color: #6C6059;
}