@charset "UTF-8";
/* =============================================================================
   沖縄ウェディングラボ ── ウェディングTOP リニューアル用スタイル
   wedding_new.css
   -----------------------------------------------------------------------------
   ■ 置き場所： wp-content/themes/balance/css/wedding_new.css
   ■ このページ専用クラスはすべて「wl-」で始まります。
     旧 wedding.css と名前が重ならないので、旧CSSが読み込まれていても崩れません。
   ■ すべて #wl-page（index.phpのラッパー）の中だけに効きます。
     → ヘッダー・フッターなど他ページには影響しません。
   ■ 初心者の方へ：色や文字サイズは下の「◆ 編集ガイド」（:root変数）で一括調整できます。
   -----------------------------------------------------------------------------
   目次
     0. 編集ガイド（色・フォント）
     1. 土台（リセット・旧CSS対策）
     2. 共通見出し（.wl-sec-head）
     3. メインビジュアル（.wl-hero）
     4. コンセプト（.wl-concept）
     5. お知らせ（.wl-info）
     6. 3つの入口タブ（.wl-nav）
     7. プラン紹介（.wl-plan）
     8. お問い合わせボタン＆モデルコース（.wl-cta / .wl-course）
     9. よくある質問（.wl-faq）
    10. お問い合わせ（.wl-contact）
    11. 会社情報バー（.wl-footer）
    12. スクロール演出（.wl-reveal）
    13. スマホ対応（レスポンシブ）
    14. PC/スマホ 表示切替（.wl-pc / .wl-sp）
   ========================================================================== */

/* 上品なWebフォント（読み込めない環境ではPC標準の明朝／ゴシックで表示） */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Shippori+Mincho:wght@400;500;600&family=Zen+Kaku+Gothic+New:wght@300;400;500;700&display=swap');


/* =============================================================================
   0. ◆ 編集ガイド（ここを変えると全体の色・フォントが変わります）
   ========================================================================== */
#wl-page {
    /* --- 色 --- */
    --wl-bg:      #ffffff;
    --wl-ivory:   #f7f2ee;
    --wl-ink:     #3b3330;
    --wl-ink-sub: #726761;
    --wl-rose:    #c69a8e;
    --wl-rose-d:  #a9776a;
    --wl-gold:    #b89b6b;
    --wl-line:    #e7ded7;

    /* --- フォント --- */
    --wl-serif-en: 'Cormorant Garamond', 'Times New Roman', serif;
    --wl-serif-jp: 'Shippori Mincho', 'Yu Mincho', YuMincho, 'Hiragino Mincho ProN', serif;
    --wl-sans-jp:  'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Yu Gothic', sans-serif;

    /* --- コンテンツ幅（全セクション共通で横幅を揃えるための基準） --- */
    --wl-max: 1200px;   /* コンテンツの最大幅 */
    --wl-gutter: 24px;  /* 左右の余白（固定値。画面幅では変わりません） */
}


/* =============================================================================
   1. 土台（リセット・旧 wedding.css 対策）
   -----------------------------------------------------------------------------
   旧 wedding.css は  p / span / h2 などに「font-family: 明朝 !important」を
   かけています。本文をゴシックに保つため、#wl-page 側でも指定して上書きします。
   ========================================================================== */
#wl-page,
#wl-page * { box-sizing: border-box; }

#wl-page {
    font-family: var(--wl-sans-jp) !important;
    color: var(--wl-ink);
    background: var(--wl-bg);
    font-size: 16px;
    line-height: 1.95;
    letter-spacing: 0.02em;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
/* 本文系は必ずゴシック（旧CSSの !important に勝つよう #id で指定） */
#wl-page :where(p, span, li, a, div, dd, dt, summary, ul, ol, details) {
    font-family: var(--wl-sans-jp) !important;
}
/* 見出しは明朝 */
#wl-page :where(h1, h2, h3, h4, h5) {
    font-family: var(--wl-serif-jp) !important;
    font-weight: 500;
    line-height: 1.6;
    margin: 0;
}

#wl-page p { margin: 0; }
#wl-page img { max-width: 100%; height: auto; vertical-align: bottom; }
#wl-page ul { list-style: none; margin: 0; padding: 0; }
#wl-page a { color: inherit; text-decoration: none; transition: color 0.3s ease; }
#wl-page b { font-weight: 700; }

/* ページ内リンク（タブ）で飛んだ時に固定ヘッダーへ隠れない余白 */
#wl-page .wl-anchor { scroll-margin-top: 100px; }
html { scroll-behavior: smooth; }

/* セクション共通：全セクションで横幅をピシッと揃える中央寄せコンテナ
   ・幅は「最大1200px」。画面が広い時は常に1200pxで全セクション横幅が一致します。
   ・狭い画面では左右に固定24pxの余白を確保（可変ではありません）。
   ・上下だけ余白を付け、左右paddingは使いません（＝幅がぶれない）。 */
#wl-page .wl-section {
    width: min(100% - (var(--wl-gutter) * 2), var(--wl-max));
    margin-inline: auto;
    padding: clamp(70px, 10vw, 130px) 0;
}


/* =============================================================================
   2. 共通見出し（.wl-sec-head）── 英字＋日本語
   ========================================================================== */
#wl-page .wl-sec-head {
    text-align: center;
    margin: 0 auto clamp(40px, 6vw, 70px);
    line-height: 1.2;
}
#wl-page .wl-sec-head .wl-en {
    display: block;
    font-family: var(--wl-serif-en) !important;
    font-size: clamp(34px, 5.5vw, 56px);
    font-weight: 500;
    font-style: italic;
    letter-spacing: 0.04em;
    color: var(--wl-rose);
}
#wl-page .wl-sec-head .wl-jp {
    display: block;
    font-family: var(--wl-serif-jp) !important;
    font-size: clamp(14px, 1.6vw, 17px);
    letter-spacing: 0.28em;
    color: var(--wl-ink);
    margin-top: 14px;
    padding-left: 0.28em;
}
#wl-page .wl-sec-head::after {
    content: "";
    display: block;
    width: 46px;
    height: 1px;
    background: var(--wl-gold);
    margin: 20px auto 0;
}
#wl-page .wl-sec-head--sm .wl-en { font-size: clamp(26px, 4vw, 42px); }


/* =============================================================================
   3. メインビジュアル（.wl-hero）
   ========================================================================== */
#wl-page .wl-hero {
    position: relative;
    width: 100%;
    height: clamp(520px, 90vh, 900px);
    overflow: hidden;
    margin: 0;
}
#wl-page .wl-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: wlHeroZoom 12s ease-out forwards;
}
@keyframes wlHeroZoom { from { transform: scale(1.08); } to { transform: scale(1); } }
#wl-page .wl-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(59,51,48,0.28) 0%, rgba(59,51,48,0) 35%, rgba(59,51,48,0.10) 70%, rgba(59,51,48,0.45) 100%);
}
#wl-page .wl-hero-kicker {
    position: absolute;
    top: 34px; left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    width: max-content;
    max-width: 92%;
    text-align: center;
}
#wl-page .wl-hero-kicker span {
    color: #fff;
    font-family: var(--wl-serif-jp) !important;
    font-size: clamp(11px, 1.4vw, 14px);
    letter-spacing: 0.22em;
    text-shadow: 0 1px 6px rgba(0,0,0,0.35);
}
#wl-page .wl-hero-title {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 90%;
    text-align: center;
    color: #fff !important;
    font-family: var(--wl-serif-en) !important;
    font-weight: 500;
    font-style: italic;
    font-size: clamp(30px, 6vw, 72px);
    line-height: 1.35;
    letter-spacing: 0.06em;
    text-shadow: 0 3px 18px rgba(59,51,48,0.4);
    animation: wlFadeUp 1.4s ease 0.2s both;
}
@keyframes wlFadeUp {
    from { opacity: 0; transform: translate(-50%, calc(-50% + 26px)); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}
#wl-page .wl-hero-scroll {
    position: absolute;
    left: 50%; bottom: 26px;
    transform: translateX(-50%);
    z-index: 2;
    color: #fff;
    font-family: var(--wl-serif-en) !important;
    font-size: 11px;
    letter-spacing: 0.35em;
    padding-bottom: 42px;
    opacity: 0.9;
}
#wl-page .wl-hero-scroll::after {
    content: "";
    position: absolute;
    left: 50%; bottom: 0;
    width: 1px; height: 34px;
    background: rgba(255,255,255,0.8);
    transform: translateX(-50%);
    animation: wlScrollLine 2s ease-in-out infinite;
}
@keyframes wlScrollLine {
    0%   { transform: translateX(-50%) scaleY(0); transform-origin: top; }
    45%  { transform: translateX(-50%) scaleY(1); transform-origin: top; }
    55%  { transform: translateX(-50%) scaleY(1); transform-origin: bottom; }
    100% { transform: translateX(-50%) scaleY(0); transform-origin: bottom; }
}


/* =============================================================================
   4. コンセプト（.wl-concept）
   ========================================================================== */
#wl-page .wl-concept {
    width: min(100% - (var(--wl-gutter) * 2), var(--wl-max));
    margin-inline: auto;
    padding: clamp(70px, 10vw, 120px) 0;
    text-align: center;
}
#wl-page .wl-concept-en {
    font-family: var(--wl-serif-en) !important;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(24px, 3.4vw, 40px);
    color: var(--wl-rose);
    letter-spacing: 0.04em;
    line-height: 1.5;
}
#wl-page .wl-concept-jp {
    font-family: var(--wl-serif-jp) !important;
    font-size: clamp(18px, 2.4vw, 26px);
    letter-spacing: 0.18em;
    color: var(--wl-ink);
    margin-top: 26px;
    padding-bottom: 26px;
}
#wl-page .wl-concept-jp::after {
    content: "";
    display: block;
    width: 40px; height: 1px;
    background: var(--wl-gold);
    margin: 22px auto 0;
}
#wl-page .wl-concept-text {
    max-width: 760px;
    margin: 0 auto;
    color: var(--wl-ink-sub);
    font-size: clamp(14px, 1.7vw, 16px);
    line-height: 2.2;
}


/* =============================================================================
   5. お知らせ（.wl-info）
   ========================================================================== */
/* お知らせも他セクションと同じ横幅（1200px）に揃える */
#wl-page .wl-news {
    display: flex;
    gap: clamp(18px, 3vw, 40px);
    align-items: baseline;
    padding: 26px 8px;
    border-bottom: 1px solid var(--wl-line);
    transition: background 0.3s ease;
}
#wl-page .wl-news-list .wl-news:first-child { border-top: 1px solid var(--wl-line); }
#wl-page .wl-news:hover { background: var(--wl-ivory); }
#wl-page .wl-news-date {
    flex: 0 0 auto;
    min-width: 92px;
    font-family: var(--wl-serif-en) !important;
    font-size: 16px;
    letter-spacing: 0.08em;
    color: var(--wl-rose-d);
}
#wl-page .wl-news-body { flex: 1 1 auto; }
#wl-page .wl-news-body h4 {
    font-size: clamp(15px, 1.9vw, 18px);
    color: var(--wl-ink);
    line-height: 1.7;
    transition: color 0.3s ease;
}
#wl-page .wl-news:hover .wl-news-body h4 { color: var(--wl-rose-d); }
#wl-page .wl-news-body p {
    margin-top: 8px;
    font-size: 13.5px;
    color: var(--wl-ink-sub);
    line-height: 1.9;
}


/* =============================================================================
   6. 3つの入口タブ（.wl-nav）
   ========================================================================== */
#wl-page .wl-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(14px, 2vw, 26px);
    width: min(100% - (var(--wl-gutter) * 2), var(--wl-max));
    margin: clamp(30px, 5vw, 60px) auto;
}
#wl-page .wl-nav-item {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
}
#wl-page .wl-nav-item a {
    display: flex;          /* 画像の下に余白が出ないようflexで包む */
    position: relative;
    line-height: 0;
}
#wl-page .wl-nav-img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
    transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
#wl-page .wl-nav-item a::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(59,51,48,0.05) 0%, rgba(59,51,48,0.15) 45%, rgba(59,51,48,0.62) 100%);
    transition: background 0.4s ease;
}
#wl-page .wl-nav-item h3 {
    position: absolute;
    left: 0; right: 0; bottom: 52px;
    z-index: 2;
    color: #fff !important;
    text-align: center;
    font-size: clamp(15px, 1.9vw, 20px);
    letter-spacing: 0.1em;
    line-height: 1.5;
    padding: 0 14px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.35);
}
#wl-page .wl-nav-arrow {
    position: absolute;
    left: 50%; bottom: 24px;
    transform: translateX(-50%);
    z-index: 2;
    width: 26px; height: auto;
    filter: brightness(0) invert(1);
    opacity: 0.9;
    transition: transform 0.4s ease;
}
#wl-page .wl-nav-item:hover .wl-nav-img { transform: scale(1.06); }
#wl-page .wl-nav-item:hover a::before { background: linear-gradient(180deg, rgba(166,119,106,0.10) 0%, rgba(59,51,48,0.25) 45%, rgba(59,51,48,0.70) 100%); }
#wl-page .wl-nav-item:hover .wl-nav-arrow { transform: translateX(-50%) translateY(5px); }


/* =============================================================================
   7. プラン紹介（.wl-plan）
   ========================================================================== */
/* --- 各セクション冒頭の説明文 --- */
#wl-page .wl-lead {
    text-align: center;
    max-width: 820px;
    margin: 0 auto clamp(48px, 7vw, 84px);
}
#wl-page .wl-lead-catch {
    font-family: var(--wl-serif-jp) !important;
    color: var(--wl-rose-d);
    font-size: clamp(13px, 1.7vw, 16px);
    letter-spacing: 0.14em;
    margin-bottom: 14px;
}
#wl-page .wl-lead-title {
    font-size: clamp(21px, 3.2vw, 34px);
    color: var(--wl-ink);
    line-height: 1.55;
    letter-spacing: 0.04em;
}
#wl-page .wl-lead-desc {
    margin-top: 24px;
    color: var(--wl-ink-sub);
    font-size: clamp(14px, 1.7vw, 16px);
    line-height: 2.15;
}

/* --- プランの並び --- */
#wl-page .wl-plans {
    display: flex;
    flex-direction: column;
    gap: clamp(56px, 8vw, 110px);
}
#wl-page .wl-plan {
    display: flex;
    align-items: center;
    gap: clamp(28px, 4.5vw, 64px);
}
#wl-page .wl-plan-rev { flex-direction: row-reverse; }  /* 画像を右に */

/* 画像側 */
#wl-page .wl-plan-media {
    flex: 0 0 53%;
    max-width: 53%;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 22px 48px -28px rgba(59,51,48,0.45);
}
#wl-page .wl-plan-media a { display: flex; line-height: 0; }
/* メイン画像だけを対象にする（> a > img）。バッジ内のロゴには当てない＝ロゴが切れない */
#wl-page .wl-plan-media > a > img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
#wl-page .wl-plan:hover .wl-plan-media > a > img { transform: scale(1.05); }
/* 提携ロゴのバッジ（画像の左下に重なる白い枠）
   ── 提供元ロゴなので「絶対に見切れない」ことを最優先。
      縦長・横長どんな比率のロゴが来ても、縮小して枠内に全体が収まるようにしています。 */
#wl-page .wl-plan-badge {
    position: absolute;
    left: 14px; bottom: 14px;
    z-index: 2;
    max-width: calc(100% - 28px);   /* 画像の幅からはみ出さない */
    display: flex;                   /* ロゴが複数でも横並びで収める */
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.94);
    padding: 8px 12px;
    border-radius: 3px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
    box-sizing: border-box;
    line-height: 0;
}
/* ▼ ロゴ画像本体：max-width / max-height を両方指定し、width:auto・height:auto にすることで
      どんな縦横比でも「縦横比を保ったまま縮小」＝ 一切トリミングされず全体が表示されます。 */
#wl-page .wl-plan-badge img {
    width: auto;
    height: auto;
    aspect-ratio: auto;    /* メイン画像用の 4/3 を打ち消す（ロゴ本来の比率を保つ） */
    max-width: 120px;      /* 横に長いロゴの上限（大きくしたい時はここを変更） */
    max-height: 34px;      /* 縦に長いロゴの上限（同上） */
    object-fit: contain;   /* 念のため。切れずに収める */
    display: block;
    flex: 0 1 auto;
    min-width: 0;
}

/* テキスト側 */
#wl-page .wl-plan-body { flex: 1 1 auto; min-width: 0; }
#wl-page .wl-plan-inner { max-width: 460px; }
#wl-page .wl-plan-rev .wl-plan-inner { margin-left: auto; } /* 画像右のときテキストを画像側へ寄せる */

#wl-page .wl-plan-inner h4 {
    font-size: clamp(20px, 2.7vw, 28px);
    color: var(--wl-ink);
    line-height: 1.5;
    letter-spacing: 0.03em;
    padding-bottom: 18px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--wl-line);
}
#wl-page .wl-plan-inner h4 a:hover { color: var(--wl-rose-d); }

#wl-page .wl-plan-lead {
    color: var(--wl-ink-sub);
    font-size: clamp(14px, 1.7vw, 15.5px);
    line-height: 2.1;
}
#wl-page .wl-plan-lead b { color: var(--wl-ink); font-weight: 700; }
#wl-page .wl-plan-lead u {
    text-decoration: none;
    background: linear-gradient(transparent 62%, rgba(198,154,142,0.28) 62%);
    padding: 0 1px;
}

/* 料金 */
#wl-page .wl-price {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid var(--wl-line);
}
#wl-page .wl-price-label { font-size: 12.5px; letter-spacing: 0.14em; color: var(--wl-ink-sub); }
#wl-page .wl-price-val { font-family: var(--wl-serif-jp) !important; font-size: 18px; color: var(--wl-ink); }
#wl-page .wl-price-num {
    font-family: var(--wl-serif-en) !important;
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 600;
    color: var(--wl-rose-d);
    line-height: 1;
    margin: 0 3px;
}
/* 金額が決まっていないプラン（例：ひまわり畑プロポーズ）の「お問い合わせください」表示 */
#wl-page .wl-price-ask {
    font-family: var(--wl-serif-jp) !important;
    font-size: clamp(16px, 2.1vw, 20px);
    color: var(--wl-rose-d);
    letter-spacing: 0.04em;
}

/* 「詳しく見る」ボタン */
#wl-page .wl-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.7em;
    margin-top: 28px;
    padding: 14px 36px;
    border: 1px solid var(--wl-rose);
    color: var(--wl-rose-d);
    font-family: var(--wl-serif-jp) !important;
    font-size: 14px;
    letter-spacing: 0.16em;
    position: relative;
    overflow: hidden;
    transition: color 0.4s ease;
    z-index: 0;
}
#wl-page .wl-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--wl-rose);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
#wl-page .wl-btn::after { content: "→"; font-size: 14px; }
#wl-page .wl-btn:hover { color: #fff; }
#wl-page .wl-btn:hover::before { transform: scaleX(1); }


/* --- プランに含まれるもの（予備プランをコメント解除した時に使う一覧） --- */
#wl-page .wl-includes { margin-top: 22px; }
#wl-page .wl-includes-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
#wl-page .wl-includes-head img { width: 18px; height: auto; }
#wl-page .wl-includes-head p { font-family: var(--wl-serif-jp) !important; font-size: 14px; letter-spacing: 0.1em; color: var(--wl-rose-d); }
#wl-page .wl-includes-list { display: flex; flex-wrap: wrap; gap: 8px; }
#wl-page .wl-includes-list p {
    font-size: 12.5px;
    color: var(--wl-ink-sub);
    background: var(--wl-ivory);
    border: 1px solid var(--wl-line);
    padding: 4px 12px;
    border-radius: 999px;
}
/* --- プラン内の箇条書き（アニバーサリープランなど） --- */
#wl-page .wl-plan-sublist { margin: 4px 0 4px; }
#wl-page .wl-plan-sublist li { font-size: 14px; color: var(--wl-ink-sub); line-height: 1.95; }


/* --- こだわりポイント（3つの特長。予備セクション） --- */
#wl-page .wl-points {
    width: min(100% - (var(--wl-gutter) * 2), var(--wl-max));
    margin-inline: auto;
    padding: clamp(60px, 9vw, 110px) 0;
}
#wl-page .wl-points-head { text-align: center; max-width: 780px; margin: 0 auto clamp(40px, 6vw, 64px); }
#wl-page .wl-points-head h3 {
    font-size: clamp(20px, 3vw, 30px);
    color: var(--wl-ink);
    line-height: 1.6;
    margin-bottom: 20px;
}
#wl-page .wl-points-head .wl-points-accent { color: var(--wl-rose-d); }
#wl-page .wl-points-head > p { color: var(--wl-ink-sub); font-size: clamp(14px, 1.7vw, 16px); line-height: 2.1; }
#wl-page .wl-points-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); }
#wl-page .wl-points-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; display: block; }
#wl-page .wl-points-item h5 {
    font-size: clamp(17px, 2.2vw, 21px);
    color: var(--wl-ink);
    margin: 18px 0 10px;
    display: flex;
    align-items: baseline;
    gap: 4px;
}
#wl-page .wl-points-item h5 .wl-num { font-family: var(--wl-serif-en) !important; color: var(--wl-rose); font-size: 1.2em; }
#wl-page .wl-points-item > p { color: var(--wl-ink-sub); font-size: 13.5px; line-height: 1.95; }


/* =============================================================================
   8. お問い合わせボタン（.wl-cta）＆モデルコース（.wl-course）
   ========================================================================== */
#wl-page .wl-cta {
    display: flex;
    justify-content: center;
    margin: clamp(40px, 6vw, 72px) 0;
}
#wl-page .wl-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: var(--wl-rose-d);
    color: #fff;
    font-family: var(--wl-serif-jp) !important;
    font-size: clamp(15px, 2vw, 18px);
    letter-spacing: 0.12em;
    padding: 20px 48px;
    border-radius: 4px;
    box-shadow: 0 16px 34px -18px rgba(169,119,106,0.7);
    transition: background 0.35s ease, transform 0.35s ease;
}
#wl-page .wl-cta-btn span { color: #fff; }
#wl-page .wl-cta-btn img { width: 26px; height: auto; }
#wl-page .wl-cta-btn:hover { background: var(--wl-rose); transform: translateY(-3px); }

#wl-page .wl-course { margin-top: clamp(60px, 9vw, 110px); }
#wl-page .wl-course-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(14px, 2vw, 26px);
    margin-top: 10px;
}
#wl-page .wl-course-grid li {
    border-radius: 4px;
    overflow: hidden;
    background: var(--wl-bg);
    box-shadow: 0 14px 34px -24px rgba(59,51,48,0.5);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
#wl-page .wl-course-grid li:hover { transform: translateY(-5px); box-shadow: 0 22px 40px -22px rgba(59,51,48,0.55); }
#wl-page .wl-course-grid a { display: block; }
#wl-page .wl-course-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}
#wl-page .wl-course-name {
    padding: 14px 12px;
    text-align: center;
    font-family: var(--wl-serif-jp) !important;
    font-size: 14px;
    letter-spacing: 0.04em;
    color: var(--wl-ink);
    line-height: 1.5;
}


/* =============================================================================
   9. よくある質問（.wl-faq）
   ========================================================================== */
/* よくある質問も他セクションと同じ横幅（1200px）に揃える */
#wl-page .wl-faq-list { display: flex; flex-direction: column; gap: 14px; }
#wl-page .wl-qa {
    border: 1px solid var(--wl-line);
    border-radius: 4px;
    background: var(--wl-bg);
    overflow: hidden;
    transition: border-color 0.3s ease;
}
#wl-page .wl-qa[open] { border-color: var(--wl-rose); }
#wl-page .wl-qa summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 26px;
    font-family: var(--wl-serif-jp) !important;
    font-size: clamp(15px, 1.9vw, 17px);
    color: var(--wl-ink);
    line-height: 1.6;
}
#wl-page .wl-qa summary::-webkit-details-marker { display: none; }
#wl-page .wl-qa summary::before {
    content: "Q";
    flex: 0 0 auto;
    font-family: var(--wl-serif-en) !important;
    font-size: 22px;
    font-style: italic;
    color: var(--wl-rose);
    line-height: 1;
}
#wl-page .wl-qa summary::after {
    content: "";
    margin-left: auto;
    flex: 0 0 auto;
    width: 13px; height: 13px;
    background:
        linear-gradient(var(--wl-rose-d), var(--wl-rose-d)) center / 100% 1px no-repeat,
        linear-gradient(var(--wl-rose-d), var(--wl-rose-d)) center / 1px 100% no-repeat;
    transition: transform 0.35s ease;
}
#wl-page .wl-qa[open] summary::after { transform: rotate(90deg); }
#wl-page .wl-qa > p {
    padding: 0 26px 24px 60px;
    color: var(--wl-ink-sub);
    font-size: 14px;
    line-height: 2.05;
}


/* =============================================================================
   10. お問い合わせ（.wl-contact）
   ========================================================================== */
/* 背景（アイボリー帯）は全幅。中身だけ他セクションと同じ1200pxで中央寄せ */
#wl-page .wl-contact {
    width: 100%;
    padding: clamp(70px, 10vw, 120px) 0;
    background: var(--wl-ivory);
}
#wl-page .wl-contact .wl-sec-head { margin-bottom: 12px; }
#wl-page .wl-contact-box {
    width: min(100% - (var(--wl-gutter) * 2), var(--wl-max));
    margin-inline: auto;
    text-align: center;
}
#wl-page .wl-contact-box h3 {
    font-size: clamp(19px, 2.6vw, 26px);
    color: var(--wl-ink);
    letter-spacing: 0.06em;
    margin-bottom: 14px;
}
#wl-page .wl-contact-exp {
    color: var(--wl-ink-sub);
    font-size: clamp(13.5px, 1.6vw, 15px);
    max-width: 640px;
    margin: 0 auto 48px;
    line-height: 2;
}
#wl-page .wl-contact-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
#wl-page .wl-contact-list > li {
    background: var(--wl-bg);
    border: 1px solid var(--wl-line);
    border-radius: 6px;
    padding: 40px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;   /* 中身を縦中央に。カード高さが揃っても綺麗に見える */
    gap: 18px;
}
#wl-page .wl-contact-list h4 {
    font-size: 16px;
    color: var(--wl-rose-d);
    letter-spacing: 0.08em;
}

/* ── メール：線画封筒の丸アイコンボタン（QRより控えめなサイズで雰囲気を壊さない） ── */
#wl-page .wl-contact-icon {
    width: 74px;
    height: 74px;
    border: 1px solid var(--wl-rose);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--wl-rose-d);
    transition: background 0.35s ease, color 0.35s ease, transform 0.35s ease;
}
#wl-page .wl-contact-icon svg { width: 32px; height: 32px; }
#wl-page .wl-contact-icon:hover { background: var(--wl-rose); color: #fff; transform: translateY(-3px); }

/* ── LINE：QRは読み取れる大きさを確保 ── */
#wl-page .wl-contact-qr { display: inline-block; line-height: 0; transition: opacity 0.3s ease; }
#wl-page .wl-contact-qr:hover { opacity: 0.85; }
#wl-page .wl-contact-qr img { width: 140px; height: auto; border-radius: 4px; display: block; }

/* ── 補足テキスト（各カード共通） ── */
#wl-page .wl-contact-note { font-size: 12.5px; color: var(--wl-ink-sub); line-height: 1.7; }

/* ── 電話：タップ発信リンク ── */
#wl-page .wl-tel {
    display: inline-block;
    font-family: var(--wl-serif-en) !important;
    font-size: clamp(20px, 3vw, 26px);
    color: var(--wl-ink);
    letter-spacing: 0.04em;
    transition: color 0.3s ease;
}
#wl-page .wl-tel:hover { color: var(--wl-rose-d); }
#wl-page .wl-tel-sub { font-size: 12.5px; color: var(--wl-ink-sub); line-height: 1.8; }


/* =============================================================================
   11. 会社情報バー（.wl-footer）
   ========================================================================== */
#wl-page .wl-footer {
    background: var(--wl-ink);
    color: #f3ece7;
    padding: clamp(40px, 6vw, 66px) 0;
}
#wl-page .wl-footer-inner {
    width: min(100% - (var(--wl-gutter) * 2), var(--wl-max));
    margin-inline: auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    flex-wrap: wrap;
}
#wl-page .wl-footer-logo { display: inline-block; margin-bottom: 20px; line-height: 0; }
/* SVGロゴは viewBox のみ指定のため height を明示（width:auto で比率維持）。
   filter でカラーロゴを白一色に変換して、濃色フッターに載せています。
   ※ 大きさを変えたい時は height の値を変更してください。 */
#wl-page .wl-footer-logo img {
    height: 56px;                         /* ロゴの大きさ（大きくしたい時はここを上げる） */
    width: auto;
    display: block;
    filter: brightness(0) invert(1);      /* カラーロゴ → 白ロゴ */
}
#wl-page .wl-footer-address { font-size: 13px; line-height: 1.9; color: #d8ccc4; letter-spacing: 0.04em; }
#wl-page .wl-footer-right { display: flex; flex-wrap: wrap; gap: 14px 34px; }
#wl-page .wl-footer-right p { margin: 0; }
#wl-page .wl-footer-right a {
    font-family: var(--wl-serif-jp) !important;
    font-size: 14px;
    letter-spacing: 0.08em;
    color: #f3ece7;
    position: relative;
    padding-bottom: 3px;
}
#wl-page .wl-footer-right a::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 0; height: 1px;
    background: var(--wl-rose);
    transition: width 0.35s ease;
}
#wl-page .wl-footer-right a:hover { color: var(--wl-rose); }
#wl-page .wl-footer-right a:hover::after { width: 100%; }


/* =============================================================================
   12. スクロール演出（.wl-reveal）
   ※ JavaScriptが動いた時だけ付きます。オフなら最初から表示（安全）。
   ========================================================================== */
#wl-page .wl-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease, transform 1s cubic-bezier(0.2, 0.7, 0.2, 1);
    will-change: opacity, transform;
}
#wl-page .wl-reveal.wl-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    #wl-page .wl-reveal { opacity: 1 !important; transform: none !important; transition: none; }
    #wl-page .wl-hero-img, #wl-page .wl-hero-title, #wl-page .wl-hero-scroll::after { animation: none !important; }
    html { scroll-behavior: auto; }
}


/* =============================================================================
   13. スマホ・タブレット対応（レスポンシブ）
   ========================================================================== */
@media (max-width: 1024px) {
    #wl-page .wl-course-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    #wl-page { font-size: 15px; }
    #wl-page .wl-hero { height: 74vh; min-height: 460px; }

    /* タブは縦1列 */
    #wl-page .wl-nav { grid-template-columns: 1fr; }
    #wl-page .wl-nav-img { aspect-ratio: 16 / 10; }
    #wl-page .wl-nav-item h3 { bottom: 46px; }

    /* プランは縦積み（画像が上）。--rev も縦積みに */
    #wl-page .wl-plan,
    #wl-page .wl-plan-rev { flex-direction: column; }
    #wl-page .wl-plan-media { flex-basis: auto; max-width: 100%; width: 100%; }
    #wl-page .wl-plan-inner,
    #wl-page .wl-plan-rev .wl-plan-inner { max-width: 100%; margin: 0; }

    /* お知らせは日付を上に */
    #wl-page .wl-news { flex-direction: column; gap: 6px; align-items: stretch; }

    /* モデルコースは2列 */
    #wl-page .wl-course-grid { grid-template-columns: repeat(2, 1fr); }

    /* こだわりポイントは1列 */
    #wl-page .wl-points-grid { grid-template-columns: 1fr; gap: 32px; }

    /* お問い合わせは縦1列 */
    #wl-page .wl-contact-list { grid-template-columns: 1fr; gap: 16px; }

    /* 会社情報バーは縦積み */
    #wl-page .wl-footer-inner { flex-direction: column; gap: 28px; }

    #wl-page .wl-hero-scroll { bottom: 16px; padding-bottom: 30px; }
}

@media (max-width: 480px) {
    #wl-page .wl-course-grid { grid-template-columns: 1fr; }
    #wl-page .wl-sec-head .wl-en { font-size: 32px; }
    #wl-page .wl-cta-btn { padding: 18px 28px; }
    #wl-page .wl-qa summary { padding: 18px 18px; gap: 12px; }
    #wl-page .wl-qa > p { padding: 0 18px 20px 44px; }
}


/* =============================================================================
   14. PC用／スマホ用の表示切替（.wl-pc / .wl-sp）
   ========================================================================== */
#wl-page .wl-sp { display: none; }
#wl-page .wl-pc { display: revert; }
@media (max-width: 768px) {
    #wl-page .wl-sp { display: revert; }
    #wl-page .wl-pc { display: none; }
}