@charset "UTF-8";
/* ========================================
   Lien café STAYGOLD - common.css
   全ページ共通スタイル
======================================== */

/* ========================================
   :root カスタムプロパティ
======================================== */
:root {
    /* ================================
       カラー
       淡いアイボリーをベースに、ココアブラウン（メイン＝操作色）、
       ラテベージュ（サブ）、ゴールド（STAYGOLDの高級感）を差し色として使う。
       セクション・タイルの塗り分けは淡い3色（青・ピンク・黄）で行う。
       ※ ホバー色（--color-primary-dark）は本文文字色としても使う（リンク・価格・電話番号）。
         ホバーで暗くなりすぎないよう、primary からの差を控えめにしている（旧値 #5C4A3C）。
       ※ 2026/08 にセージグリーン→ダスティローズ→ブラウンと変更している。
         緑系：#7E8F78 / #5A6A56 / #A8B5A2、差し色 #EEF0EA
         ローズ系：#9B5F66 / #7E4A50 / #C79AA0
         濃めの茶：#5F5044 / #3A322B / #A2958A
         グレージュ茶：#7D6F62 / #5A4E44 / #B3A99E
       ⚠️ --color-primary はボタン地（白文字）に使うので、これ以上明るくすると
         コントラスト比が 4.5:1 を割る。淡くしたいときはボタンを
         .btn--outline（地なし・文字は濃茶）側に寄せること。
    ================================ */
    --color-primary: #7A6250;
    /* ココア：メイン（ボタン・リンク） */
    --color-primary-dark: #6B5544;
    /* ココア（暗め。ホバーと本文リンクの文字色） */
    --color-primary-light: #B2A392;
    /* ココア（明るめ。罫線・淡い箇所） */
    --color-secondary: #C9AE8C;
    /* ラテベージュ：サブカラー */
    --color-accent: #E2C9C2;
    /* ダスティピンク（淡）：小さな装飾 */
    --color-gold: #BFA06A;
    /* ゴールド：見出し装飾・区切り線 */

    --color-text: #4A443E;
    /* 本文テキスト */
    --color-title: #35302B;
    /* 見出しテキスト */
    --color-title-brown: #584940;
    /* --color-primary（#7A6250）と --color-title（#35302B）の中間。
       茶色みを残したまま少し落ち着いた見出しに使う（.sec-bar__ja など） */
    --color-text-light: #8A8179;
    /* 補足・薄めテキスト */
    --color-text-white: #FFFFFF;

    --color-bg: #FCFAF6;
    /* ページ背景（アイボリー） */
    --color-bg-light: #F5F0E8;
    /* セクション背景（薄ベージュ） */

    /* セクション・タイルの塗り分け用の淡い3色。
       ※ どれも明度が高いので白文字は載せない（文字は --color-text / --color-title）。 */
    --color-bg-blue: #E4EDF3;
    /* 薄い青 */
    --color-bg-pink: #FAF1F0;
    /* 薄いピンク */
    --color-bg-yellow: #FAF0DA;
    /* 薄い黄 */

    /* 既定の差し色。.section--accent（こだわり）、FAQタブ、アイコンの地などが参照する。
       割り当てを変えたいときはこの1行を上の3色から選び直す。
       ※ ピンク（--color-bg-pink）は現在どこからも参照されていない（控え）。 */
    --color-bg-accent: var(--color-bg-yellow);
    --color-white: #FFFFFF;
    --color-border: #E5DDD1;
    /* ボーダー */
    --color-border-light: #F0EAE0;

    /* ================================
       フォント
    ================================ */
    --font-family: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
    --font-heading: 'Zen Old Mincho', 'Hiragino Mincho ProN', serif;
    --font-en: 'Crimson Text', 'Zen Old Mincho', serif;

    --body-font-size-sp: 1rem;
    --body-font-size-pc: clamp(1rem, 1.6vw, 1.0625rem);
    --body-line-height-sp: 1.9;
    --body-line-height-pc: 2;
    --body-letter-spacing: 0.06em;

    /* ================================
       角丸（やわらかさ＝可愛らしさの担保）
    ================================ */
    --radius-xs: 0.25rem;
    --radius-sm: 0.5rem;
    --radius-md: 0.875rem;
    --radius-lg: 1.5rem;
    --radius-xl: 2rem;
    --radius-full: 999px;

    /* ================================
       落ち影（淡く・広く）
    ================================ */
    --shadow-sm: 0 2px 10px rgba(74, 68, 62, 0.04);
    --shadow-md: 0 6px 24px rgba(74, 68, 62, 0.07);
    --shadow-lg: 0 12px 40px rgba(74, 68, 62, 0.10);

    /* ================================
       トランジション（通常のUIはすべてこれを使う）
    ================================ */
    --transition: 0.3s ease;

    /* ================================
       スペーシング
    ================================ */
    --spacing-xxs: 0.5rem;
    --spacing-xs: 0.75rem;
    --spacing-sm: 1.5rem;
    --spacing-md: 2rem;
    --spacing-lg: 3rem;
    --spacing-xl: 4rem;
    --spacing-xxl: 5.5rem;
    --spacing-3xl: 8rem;

    /* ================================
       セクション幅
    ================================ */
    --section-width-sm: 576px;
    --section-width-md: 720px;
    --section-width-narrow: 880px;
    --section-width-lg: 1024px;
    --section-width-xl: 1440px;

    /* ================================
       レイアウト
    ================================ */
    --header-height: 5rem;
    --fixed-bar-height: 4rem;
    /* 下部固定タブ（〜767px） */
    --fixed-bar-bleed: 80px;
    /* iOS Chrome対策：下へはみ出させる量 */
    --gutter: 1.5rem;

    /* ================================
       素材待ちの背景プレースホルダ（斜めストライプ）
       background-image の最後の層に重ねると、写真が404の間だけ見える。
       例）background-image: url('../images/xxx.webp'), var(--img-placeholder);
       ※ CSSの背景画像は404を検知できないので、animation.js の .img-ph（<img>用）
         は効かない。このトークンがその代わり。
       ※ 写真を置けば自動で隠れる（CSSの変更不要）。
         公開前にストライプが見えていたら＝素材未配置のサイン。
       ※ 白文字が載る前提で暗めの茶にしている。グレー系にしたいときは
         #5C4A3C / #544338 を #6B6B6B / #626262 などに差し替える。
    ================================ */
    --img-placeholder: repeating-linear-gradient(-45deg,
            #5C4A3C 0 1.5rem,
            #544338 1.5rem 3rem);
}

@media (min-width: 768px) {
    :root {
        --gutter: 2.5rem;
    }
}

@media (min-width: 1024px) {
    :root {
        --gutter: 3rem;
    }
}

/* 大型画面は左右の余白だけを広げる。
   .inner の max-width は --gutter を足して算出しているので、
   中身の実効幅（--section-width-*）は変わらない。 */
@media (min-width: 1200px) {
    :root {
        --gutter: 4rem;
    }
}

@media (min-width: 1440px) {
    :root {
        --gutter: 5rem;
    }
}

/* ========================================
   リセット / ベース
======================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    overflow-x: hidden;
    overscroll-behavior-y: none;
}

/* Chrome のスクロール復元による初回表示ずれを防ぐ */
html:not(.js-ready) {
    scroll-behavior: auto;
}

/* 375px未満：375px幅でレイアウトして縮小表示
   ※ r-doboku / sato-jusetsukougyo と同じ方式。
     ブレークポイントを増やすのではなく、375px幅で組んだものを
     画面幅に合わせてそのまま縮小する（iPhone SE等の320px幅対策）。
   ※ fixed要素の補正はファイル末尾で行う
     ― .drawer 本体の定義より後に置かないと inset:0 に上書きされるため。 */
@media (max-width: 374px) {
    html {
        width: 375px;
        transform-origin: top left;
        transform: scale(calc(100vw / 375));
    }
}

body {
    margin: 0;
    font-family: var(--font-family);
    font-size: var(--body-font-size-sp);
    font-weight: 400;
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: var(--body-line-height-sp);
    letter-spacing: var(--body-letter-spacing);
    overflow-x: hidden;
    overscroll-behavior-x: none;
    touch-action: pan-y;
    -webkit-font-smoothing: antialiased;
}

@media (min-width: 768px) {
    body {
        font-size: var(--body-font-size-pc);
        line-height: var(--body-line-height-pc);
    }
}

/* ドロワー展開中は背面をスクロールさせない */
body.menu-open {
    overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
figure,
dl,
dd {
    margin: 0;
    padding: 0;
}

ul,
ol {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
}

::selection {
    background-color: var(--color-accent);
    color: var(--color-title);
}

/* ========================================
   汎用ユーティリティ
======================================== */
.u-br-sp {
    display: inline;
}

.u-br-pc {
    display: none;
}

@media (min-width: 768px) {
    .u-br-sp {
        display: none;
    }

    .u-br-pc {
        display: inline;
    }
}

.u-center {
    text-align: center;
}

/* 475px未満だけ改行させる<br>。
   ※ .u-br-sp（768px未満）よりさらに狭い幅専用。min-widthで打ち消す。 */
.u-br-xs {
    display: inline;
}

@media (min-width: 475px) {
    .u-br-xs {
        display: none;
    }
}

/* セクション共通 */
.section {
    padding: 4rem 0;
}

@media (min-width: 768px) {
    .section {
        padding: 5rem 0;
    }
}

.section--light {
    background-color: var(--color-bg-light);
}

.section--accent {
    background-color: var(--color-bg-accent);
}

/* ========================================
   セクションのひな型（余白のパターン）
   ※ 新しいパターン。従来の .section は上下余白だけを持ち、
     左右余白と中央寄せは .inner 側が持っていた。
     この .section--pad では役割を分け、
       セクション = 上下左右のパディング
       内側(.inner) = max-width と中央寄せだけ
     とする。
   ※ 既存の .section / .inner はそのまま。.section--pad を付けた
     セクションだけこのパターンになる（1つずつ移していける）。
   ※ 左右パディングはセクションが持つので、中の .inner は
     padding-inline を打ち消し、max-width も素の幅（+gutter*2 なし）にする。
======================================== */
.section--pad {
    padding: 4rem var(--gutter);
}

@media (min-width: 768px) {
    .section--pad {
        padding: 5rem var(--gutter);
    }
}

/* このパターン内の .inner は左右余白をセクションに譲る。
   従来の .inner は max-width に +gutter*2 を含む（余白を内包）が、
   ここでは余白をセクションが持つので素の幅に戻す。
   中央寄せ（margin-inline: auto）は .inner 側に残るのでそのまま。
   ※ .inner の段階切り替え（576/768/1440）に揃えてこちらも段階化。 */
.section--pad>.inner {
    padding-inline: 0;
    max-width: var(--section-width-sm);
}

/* 修飾クラス（--lg / --narrow / --md / --full）は、基本の.innerとと同じ要素に両方付けて使う前提（例：class="inner inner--narrow"）なので、
   セレクタを「.innerと両方含む」形にして詳細度を上げている（3クラス分）0-3-0）。
   ※ これがないと、下の@media内の基本.innerの値（同じ詳細度。0-2-0）がソース順序で後ろになるため、
     768px以上で修飾クラスの指定を上書きしてしまう（実際にnews-detail.phpの880pxが1024px以上1440pxになる不具合があった）。 */
.section--pad>.inner.inner--lg {
    max-width: var(--section-width-lg);
}

.section--pad>.inner.inner--narrow {
    max-width: var(--section-width-narrow);
}

.section--pad>.inner.inner--md {
    max-width: var(--section-width-md);
}

.section--pad>.inner.inner--full {
    max-width: none;
}

@media (min-width: 768px) {
    .section--pad>.inner {
        max-width: var(--section-width-md);
    }
}

@media (min-width: 1024px) {
    .section--pad>.inner {
        max-width: var(--section-width-xl);
    }
}

/* インナー
   max-width はブレークポイントごとに上限を切り替える（段階）。
     〜767px      … 576px
     768〜1023px  … 768px
     1024px以上   … 1440px
   ※ 左右余白（--gutter）を内包する算出式なので、各段階も
     calc(幅 + gutter*2) で揃えている。
   ※ 幅バリエーション（--lg / --narrow / --md）は用途別の狭い幅を
     保つのでこの段階切り替えの対象外。 */
.inner {
    width: 100%;
    max-width: calc(var(--section-width-sm) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

@media (min-width: 768px) {
    .inner {
        max-width: calc(var(--section-width-md) + var(--gutter) * 2);
    }
}

@media (min-width: 1024px) {
    .inner {
        max-width: calc(var(--section-width-xl) + var(--gutter) * 2);
    }
}

.inner--lg {
    max-width: calc(var(--section-width-lg) + var(--gutter) * 2);
}

.inner--narrow {
    max-width: calc(var(--section-width-narrow) + var(--gutter) * 2);
}

.inner--md {
    max-width: calc(var(--section-width-md) + var(--gutter) * 2);
}

/* narrow の段階版（faq / news で使用）。
   上限をブレークポイントごとに切り替える。
     〜767px      … 576px
     768〜1023px  … 768px
     1024px以上   … 880px
   ※ .inner--narrow（880px固定）は他で使うので残し、これは別クラス。 */
.inner--narrow-step {
    max-width: calc(var(--section-width-sm) + var(--gutter) * 2);
}

@media (min-width: 768px) {
    .inner--narrow-step {
        max-width: calc(var(--section-width-md) + var(--gutter) * 2);
    }
}

@media (min-width: 1024px) {
    .inner--narrow-step {
        max-width: calc(var(--section-width-narrow) + var(--gutter) * 2);
    }
}

/* 最大幅なし（全幅）。写真を大きく見せたいセクションで使う。
   左右の padding-inline（--gutter）は残すので、文字が画面端に寄り切らない。 */
.inner--full {
    max-width: none;
}

/* ========================================
   セクション見出し
   ※ 英字を大きく見せ、日本語は小さく添える（ページヒーローと同じ階層）。
     英字だけで意味が通るセクションでは日本語行を置かない。
======================================== */
.sec-head {
    text-align: center;
    margin-bottom: 4rem;
}

.sec-head--left {
    text-align: left;
}

/* 英字（見出し本体） */
.sec-head__label {
    display: block;
    font-family: var(--font-en);
    font-size: 2rem;
    font-weight: 400;
    font-style: italic;
    line-height: 1.2;
    letter-spacing: 0.08em;
    color: var(--color-gold);
}

/* 日本語（補助・要所のみ） */
.sec-head__title {
    margin-top: 0.375rem;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0.18em;
    color: var(--color-title);
}

.sec-head__title-sub {
    display: block;
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    color: var(--color-text-light);
    margin-top: 0.5rem;
    font-family: var(--font-family);
}

/* 金色の下線装飾（.sec-head__deco）は廃止。
   マークアップ側の <span class="sec-head__deco"> は各ファイルに残してある
   （空の inline 要素なので何も描画されない）。
   戻したいときは下の2ブロックを復活させるだけでよい。

.sec-head__deco {
    display: block;
    width: 3.5rem;
    height: 1px;
    margin: var(--spacing-sm) auto 0;
    background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
}

.sec-head--left .sec-head__deco {
    margin-inline: 0;
    background: linear-gradient(90deg, var(--color-gold), transparent);
}
*/

.sec-head__lead {
    margin-top: var(--spacing-sm);
    font-size: 0.875rem;
    letter-spacing: 0.06em;
    color: var(--color-text-light);
}

@media (min-width: 768px) {
    .sec-head__label {
        font-size: 3rem;
    }

    .sec-head__title {
        font-size: 1.125rem;
    }

    .sec-head__title-sub {
        font-size: 0.875rem;
    }

    .sec-head__lead {
        font-size: 0.9375rem;
    }
}

@media (min-width: 1024px) {
    .sec-head__label {
        font-size: 3.5rem;
    }
}

/* ========================================
   セクション見出し（日本語タイトルのみ版）
   ※ .sec-head（英字ラベル＋日本語）とは別に、英字ラベルを持たないページ
     （recruit.phpなど）向けの日本語タイトルのみの見出し。
     commitment.php の「愛される3つの理由」見出し（.com-head__label /
     .com-head__title）と同じ構成・フォント・サイズ・色に揃えている
     （小さな二重線つきラベル＋Hina Minchoの大見出し、色はゴールドではなく
     本文見出し色 var(--color-title)）。
======================================== */
.sec-title-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    font-family: var(--font-heading);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.24em;
    color: var(--color-gold);
}

.sec-title-label-line {
    width: 2rem;
    height: 1px;
    background-color: var(--color-gold);
    opacity: 0.6;
}

.sec-title {
    font-family: 'Hina Mincho', var(--font-heading);
    font-size: 1.625rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.1em;
    color: var(--color-title);
}

.sec-title-wrap {
    text-align: center;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .sec-title-label {
        font-size: 0.875rem;
    }

    .sec-title-label-line {
        width: 2.75rem;
    }

    .sec-title {
        font-size: 2.25rem;
    }
}

@media (min-width: 1024px) {
    .sec-title {
        font-size: 2.5rem;
    }
}

/* ========================================
   下層ページの共通背景（crepe-color-bg.webp）
   ※ shop / company / news / news-detail / faq / recruit / contact の7ページで使う。
   ※ bodyに敷き、各ページのセクション側の地色（.section--lightなど）は
     下で透明に上書きして、この背景がページ全体に通して見えるようにする。
   ※ background-attachment: fixed はiOS Safariで無視されるので使わない。
     600px幅のタイルとして繰り返す（他の紙目テクスチャと同じ作り）。
     ※ この絵柄はほぼ無地のクリーム色なので、要素をまたいだときに
       タイルの基点がずれても見た目には分からない。
   ※ 2層目の--img-placeholderは素材未配置のときだけ見えるダミー。
======================================== */
.page-shop,
.page-company,
.page-news,
.page-news-detail,
.page-faq,
.page-recruit,
.page-contact {
    background-image: url('../images/crepe-color-bg.webp');
    background-size: 600px auto;
    background-repeat: repeat;
    background-position: center;
}

/* 上の背景を覚うセクションの地色を透明にする。
   ※ カード・テーブル側（.def-list・.owner-introなど）は自分の地色を持っているので
     ここでは触らない（地の上にカードが浮く見え方になる）。 */
.page-shop .section--light,
.page-company .section--light,
.page-news .section--light,
.page-news-detail .section--light,
.page-faq .section--light,
.page-recruit .section--light,
.page-contact .section--light {
    background-color: transparent;
}

/* page-heroの楺円クリップ（谷型）で欠けた部分も、bodyの共通背景がそのまま
   透けて見えるようにラッパーを透明にする（下のセクションと地続きに見せる）。
   ※ 各ページの $hero_after_bg の指定よりこちらが優先される。 */
.page-shop .page-hero-wrap,
.page-company .page-hero-wrap,
.page-news .page-hero-wrap,
.page-news-detail .page-hero-wrap,
.page-faq .page-hero-wrap,
.page-recruit .page-hero-wrap,
.page-contact .page-hero-wrap,
.page-commitment .page-hero-wrap {
    background-color: transparent;
}

/* 山型・split（shop.php・recruit.php）の下端の「欠け」は.page-heroの内側にある
   要素（::after）なので、透明にすると背後の写真が見えてしまう。
   bodyと同じテクスチャを敷いて地続きに見せる。
   ※ タイルの基点は要素ごとなのでbodyとは厳密には揃わないが、
     この絵柄はほぼ無地なので境目は分からない。fixedはiOSで効かないので使わない。 */
.page-shop .page-hero::after,
.page-company .page-hero::after,
.page-news .page-hero::after,
.page-news-detail .page-hero::after,
.page-faq .page-hero::after,
.page-recruit .page-hero::after,
.page-contact .page-hero::after {
    background-color: var(--color-bg);
    background-image: url('../images/crepe-color-bg.webp');
    background-size: 600px auto;
    background-repeat: repeat;
    background-position: center;
}

/* ========================================
   セクション見出しバー（左端＝英字・右端＝日本語・間をゴールドの一本線）
   ※ .sec-head（英字を大きく中央に見せる型）とは別の、横に伸びる見出し。
   ※ shop.phpの.shop-gallery-head（店舗の雰囲気・店舗情報）と同じ見た目・同じ値。
     shop.css側は既存のクラス名のまま残してある。
   ※ 英字はイタリックにしない方針。
======================================== */
.sec-bar {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.sec-bar__en {
    flex-shrink: 0;
    font-family: var(--font-en);
    font-size: 1rem;
    letter-spacing: 0.12em;
    color: var(--color-gold);
}

.sec-bar__line {
    flex: 1;
    height: 1px;
    background-color: var(--color-gold);
    opacity: 0.6;
}

.sec-bar__ja {
    flex-shrink: 0;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    color: var(--color-title-brown);
}

@media (min-width: 576px) {
    .sec-bar__en {
        font-size: 1.25rem;
    }

    .sec-bar__ja {
        font-size: 1.375rem;
    }
}

@media (min-width: 768px) {
    .sec-bar {
        gap: 2rem;
        margin-bottom: 2rem;
    }

    .sec-bar__en {
        font-size: 1.5rem;
    }

    .sec-bar__ja {
        font-size: 1.75rem;
    }
}

/* ========================================
   リボン型の見出し帯（.ribbon-head）
   ※ 濃茶（#302821、FV・page-heroと同じ色）の帯の両端をV字に切り欠いた
     リボン形の見出し。画像は使わず clip-path: polygon() だけで作っている。
   ※ 内側のゴールドの線は、clip-pathをかけた要素にborderが使えない（枠線ごと
     切り取られる）ため、FVの.fv__bg-ringと同じ「同じ形を2枚重ねてズレた分だけを
     線に見せる」手法で作っている。
       ::before（ゴールド） … 内側 4px
       ::after （地と同じココア茶） … 内側 5px
     差分の1pxだけが、切り込みの形に沿った線として見える。
     ※ ::afterは擬似要素の性質上最後に描画されるので、中のテキスト・アイコンには
       z-index: 1 を付けて先に出す必要がある（ないと文字が濃茶の面に隠れる）。

   【形のバリエーション】
     .ribbon-head          … 両端を切り欠く（左右対称のリボン）
     .ribbon-head--right   … 右端だけ切り欠く（左端は直角のまま）
     .ribbon-head--capsule … 左端は半円・右端だけ切り欠く

   【内側の面の値について】
     斜辺を正しく平行にオフセットするには、上下と左右でinsetの量を変える必要がある。
     単純に inset: 4px で縮めると箱の高さも縮むため、斜辺の傾きが変わってしまう
     （外側 28/18 に対して内側 24/19 になる）。

     斜辺を垂直方向にdだけオフセットしたとき、同じ高さでの水平方向のズレは
       d × 斜辺の長さ ÷ (帯の高さ÷2)
     になる。高さ56px・切り込み18px・d=4px なら約4.76px。
     従って内側の面は、
       上下のinset  … 4px（=dそのまま）
       左右のinset … 外側の斜辺の位置 + 4.76px → 約7px
       切り込み   … 約15.5px（内側の箱の左端から頂点まで）
     となる。高さ64pxの場合も約6.8px / 15.8px とほぼ同じなので、
     両方のブレークポイントで共通の値を使っている。
     ※ 上に重ねる濃茶の面（::after）はさらに1px内側なので、左右はinsetを
       1 × 斜辺長 ÷ (高さ÷2) ≈ 1.2px 分だけ大きくしてある。
     ※ 帯の高さや切り込み量を変えるとこれらの値も変わるので、heightを固定してある。
======================================== */
.ribbon-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    height: 3.5rem;
    margin-bottom: 2rem;
    padding-inline: 2.5rem;
    background-color: #302821;
    clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 50%, 100% 100%, 0 100%, 18px 50%);
}

.ribbon-head::before,
.ribbon-head::after {
    content: '';
    position: absolute;
    clip-path: polygon(0 0, 100% 0, calc(100% - 15.5px) 50%, 100% 100%, 0 100%, 15.5px 50%);
    pointer-events: none;
}

.ribbon-head::before {
    inset: 4px 7px;
    background-color: var(--color-gold);
}

.ribbon-head::after {
    inset: 5px 8.2px;
    background-color: #302821;
}

/* 右端だけ切り欠く形（.ribbon-head--right）。
   ※ 左端は直角のままなので、他の見出し（.sec-bar・本文）と左端の基準線が揃う。
   ※ 左側の切り込みがない分、左パディングは少し詰めてよい。
   ※ 内側の面の左insetsも、斜辺ではなく直線なのでdそのまま（4px / 5px）に戻す。
   ※ ※ これらの修飾クラスは基本の .ribbon-head::before / ::after と詳細度が同じなので、
     必ず基本の指定より後ろに置くこと（前に置くとinsetが上書きされて線がずれる）。 */
.ribbon-head--right {
    padding-left: 1.75rem;
    clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 50%, 100% 100%, 0 100%);
}

.ribbon-head--right::before,
.ribbon-head--right::after {
    clip-path: polygon(0 0, 100% 0, calc(100% - 15.5px) 50%, 100% 100%, 0 100%);
}

.ribbon-head--right::before {
    inset: 4px 7px 4px 4px;
}

.ribbon-head--right::after {
    inset: 5px 8.2px 5px 5px;
}

/* 左端を半円・右端をV字に切り欠く形（.ribbon-head--capsule）。
   ※ clip-path と border-radius は併用できる（border-radiusで丸めた形を
     clip-pathがさらに切り抜く）。
   ※ 丸みは帯の高さの半分（ベース28px / 768px以上32px）。
   ※ 内側のゴールド線が同心円になるよう、左のinsetと丸みの合計を
     常に28px（=外側の半径）に保つ。
       ::before … inset 4px + 半径24px = 28px
       ::after  … inset 5px + 半径23px = 28px
   ※ 左パディングは丸みの分だけ広めにとる。 */
.ribbon-head--capsule {
    padding-left: 2rem;
    border-radius: 28px 0 0 28px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 50%, 100% 100%, 0 100%);
}

.ribbon-head--capsule::before,
.ribbon-head--capsule::after {
    clip-path: polygon(0 0, 100% 0, calc(100% - 15.5px) 50%, 100% 100%, 0 100%);
}

.ribbon-head--capsule::before {
    inset: 4px 7px 4px 4px;
    border-radius: 24px 0 0 24px;
}

.ribbon-head--capsule::after {
    inset: 5px 8.2px 5px 5px;
    border-radius: 23px 0 0 23px;
}

.ribbon-head__icon {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    font-size: 1.125rem;
    color: var(--color-gold);
}

.ribbon-head__title {
    position: relative;
    z-index: 1;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    color: var(--color-text-white);
}

@media (min-width: 768px) {
    .ribbon-head {
        height: 4rem;
        padding-inline: 3rem;
    }

    .ribbon-head--right {
        padding-left: 2rem;
    }

    /* 768px以上は帯の高さが4remになるので、半円の半径もその半分（32px）にする。 */
    .ribbon-head--capsule {
        padding-left: 2.5rem;
        border-radius: 32px 0 0 32px;
    }

    .ribbon-head--capsule::before {
        border-radius: 28px 0 0 28px;
    }

    .ribbon-head--capsule::after {
        border-radius: 27px 0 0 27px;
    }

    .ribbon-head__title {
        font-size: 1.125rem;
    }
}

/* ========================================
   タイトル下のオーナメント（ornament.svg）
   ※ 元々はindex.css（トップページ専用）にあったが、includes/page-hero.php が
     全ページ共通でこのクラスを使っているため、common.css（全ページ共通）に移動した。
   ※ .section-title-wrap：タイトル（h2など）とオーナメントをひとつの通常フローとして
     まとめるラッパー。width: fit-contentで中のタイトルの実際の幅に自動で揃う。
   ※ .section-ornament-frame：オーナメント本体を入れるスペーサー（aspect-ratio 20/1）。
   ※ --on-dark：濃い背景の上で使うとき、画像を白に反転させる（ornament.svgは
     ゴールド固定色のSVGなのでCSSのcolorでは変えられないため）。
======================================== */
.section-title-wrap {
    width: fit-content;
}

.section-ornament-frame {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 20 / 1;
    opacity: 0.85;
}

.section-ornament {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.section-ornament-frame--on-dark {
    opacity: 0.95;
}

.section-ornament-frame--on-dark .section-ornament {
    filter: brightness(0) invert(1);
}

/* ========================================
   ボタン
======================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    min-height: 3.25rem;
    padding: 0.875rem 2.25rem;
    border-radius: var(--radius-full);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-align: center;
    background-color: var(--color-primary);
    color: var(--color-text-white);
    border: 1px solid var(--color-primary);
    transition: background-color var(--transition), color var(--transition),
        border-color var(--transition), transform var(--transition);
}

.btn i {
    font-size: 0.875rem;
}

.btn:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    transform: translateY(-2px);
}

/* アウトライン */
.btn--outline {
    background-color: transparent;
    color: var(--color-primary-dark);
    border-color: var(--color-primary);
}

.btn--outline:hover {
    background-color: var(--color-primary);
    color: var(--color-text-white);
}

/* ゴールド（高級感を出したい主要導線） */
.btn--gold {
    background-color: transparent;
    color: var(--color-gold);
    border-color: var(--color-gold);
}

.btn--gold:hover {
    background-color: var(--color-gold);
    color: var(--color-text-white);
    border-color: var(--color-gold);
}

/* 白背景（画像の上など） */
.btn--white {
    background-color: var(--color-white);
    color: var(--color-primary-dark);
    border-color: var(--color-white);
}

.btn--white:hover {
    background-color: var(--color-primary);
    color: var(--color-text-white);
    border-color: var(--color-primary);
}

.btn--sm {
    min-height: 2.75rem;
    padding: 0.625rem 1.5rem;
    font-size: 0.875rem;
}

.btn--wide {
    width: 100%;
    max-width: 22rem;
}

/* テキストリンク（矢印付き）
   ※ ホバーでは横棒だけを伸ばし、gap や width は動かさない。
     width を変えると要素自体の幅が変わるので、.sec-foot のような
     中央寄せでは文字が左にずれ、gap を変えると棒の位置自体が動く。
     レイアウトに影響しない transform: scaleX で見た目だけ伸ばす
     （menu-tab / menu-jump の下線と同じ考え方）。 */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.9375rem;
    letter-spacing: 0.1em;
    color: var(--color-primary-dark);
    transition: color var(--transition);
}

.link-arrow::after {
    content: '';
    width: 1.75rem;
    height: 1px;
    background-color: currentColor;
    transform: scaleX(1);
    transform-origin: left center;
    transition: transform var(--transition);
}

.link-arrow:hover {
    color: var(--color-gold);
}

.link-arrow:hover::after {
    transform: scaleX(1.3);
}

/* アウトラインピル＋伸びる下線矢印のボタン。
   トップページの「質問一覧を見る」（以前の.sec-faq__btn、index.css）と同じ見た目を、
   他のページでも使えるよう共通化したもの。 */
.btn-line {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 0.75rem 1.75rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-primary);
    background-color: transparent;
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    color: var(--color-primary-dark);
    transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.btn-line__arrow {
    width: 1.75rem;
    height: 1px;
    background-color: currentColor;
    transform: scaleX(1);
    transform-origin: left center;
    transition: transform var(--transition);
}

.btn-line:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-white);
}

.btn-line:hover .btn-line__arrow {
    transform: scaleX(1.3);
}

/* 大きめサイズのオプション。.btn--smと同じ考え方で、.btn-lineに付け足す修飾クラス。
   ※ 576px未満は拡大前（.btn-lineの基本サイズ）のままにし、576px以上だけこの大きめ値を適用する。 */
@media (min-width: 576px) {
    .btn-line--lg {
        padding: 1rem 2.25rem;
        font-size: 0.9375rem;
    }

    .btn-line--lg .btn-line__arrow {
        width: 2rem;
    }
}

@media (min-width: 768px) {
    .btn {
        font-size: 1rem;
    }
}

/* ========================================
   ヘッダー
   ※ ロゴはFV側に置くのでヘッダーには入れない。
     中身は Instagram と ハンバーガー の2つだけ。
     お問い合わせへの導線は、ドロワー・CTAセクション・下部固定バー・フッターにある。
   ※ 背景は幅いっぱいの帯にせず、中身の長さ分だけのピル（.header__bar）につける。
     .header 自体は透明で pointer-events: none。ピルの外側はクリックを通す。
   ※ z-index はドロワー（1100）より上。ハンバーガーをピル内に入れているため、
     ドロワーを開いた状態でも閉じる操作ができるようにする。
======================================== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1200;
    width: 100%;
    /* トップページ（FVの--fv-top-band-height）と同じ値。ベース・768〜1023pxはvar(--header-height)、
       1024px以上は6remに拡大する（定義はファイル後方の「サブページ ヒーロー」ブロックを参照）。 */
    height: var(--page-hero-top-band-height);
    pointer-events: none;
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    height: 100%;
    /* 左右パディングは共通の--gutterではなく、このヘッダー専用の値を段階で持たせている
       （ベース0.25rem / 768px以上0.5rem / 1200px以上0.75rem / 1440px以上1rem）。 */
    padding-inline: 0.25rem;
}

/* SNS（全ブレークポイントで表示）
   ※ ハンバーガーのピルとは別の独立した丸。同じ半透明の地を敷く。
   ※ 以前は768px以上のみ表示だったが、SPでも右上にInstagram・Threadsを
     常に見せる方針に変更。底の固定バーと導線は重複するが、
     右上に常にSNSがある分かりやすさを優先している。 */
.header__sns {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-full);
    background-color: #302821;
    border: 2px solid var(--color-gold);
    font-size: 1rem;
    color: var(--color-text-white);
    transition: background-color var(--transition), border-color var(--transition),
        color var(--transition), opacity var(--transition),
        visibility var(--transition), transform var(--transition),
        box-shadow var(--transition);
}

.header.is-scrolled .header__sns {
    background-color: #302821;
    border-color: var(--color-gold);
    box-shadow: var(--shadow-sm);
}

/* ホバー時はハンバーガーと揃える。
   背景は変えずアイコンの色だけゴールドにする。
   （以前は背景をセージに塗りつぶしていたが、明るい写真の上で
     白系が重なりホバー中に透明に見えることがあったためやめた） */
.header__sns:hover {
    color: var(--color-gold);
}

/* ※ 2026/08：以前はドロワー展開中は非表示にしていたが、ドロワー上部帯（.drawer__top-band）を
   新設して同じ帯の中に収まる構成になったため、展開中も表示したままにしている。 */

@media (min-width: 768px) {
    .header__inner {
        gap: 0.625rem;
        padding-inline: 0.5rem;
    }

    .header__sns {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1.125rem;
    }
}

@media (min-width: 1200px) {
    .header__inner {
        padding-inline: 0.75rem;
    }
}

@media (min-width: 1440px) {
    .header__inner {
        padding-inline: 1rem;
    }
}

@media (min-width: 1024px) {
    .header__sns {
        width: 2.75rem;
        height: 2.75rem;
        font-size: 1.25rem;
    }
}

/* 背景を持つのはこのピルだけ */
.header__bar {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.5rem;
    border-radius: var(--radius-full);
    background-color: #302821;
    border: 2px solid var(--color-gold);
    transition: background-color var(--transition), border-color var(--transition),
        box-shadow var(--transition);
}

.header.is-scrolled .header__bar {
    background-color: #302821;
    border-color: var(--color-gold);
    box-shadow: var(--shadow-sm);
}

/* ドロワー展開中はピルの背景を消し、ハンバーガー（✕）だけ残す。
   ※ 2026/08：枠線（ゴールド）は消さずに残すことにした。 */
body.menu-open .header__bar {
    background-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}

/* ========================================
   ハンバーガー（ヘッダーのピル内に入る）
   ※ ブレークポイントごとの差分は持たず、全幅で同じ見た目にする。
     Menu / Close のラベルも 767px 以下でも表示する。
======================================== */
.hamburger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.5rem;
    padding-inline: 0.875rem;
    border-radius: var(--radius-full);
    transition: background-color var(--transition);
}

.hamburger__label {
    display: grid;
    justify-items: end;
    font-family: var(--font-en);
    font-size: 0.8125rem;
    letter-spacing: 0.12em;
    line-height: 1;
    color: var(--color-text-white);
    transition: color var(--transition);
}

/* Menu / Close を同じマスに重ねる。
   grid なら箱の幅が広い方（Close）に揃うので、
   切り替わっても✕の位置がずれない。 */
.hamburger__label-text {
    grid-area: 1 / 1;
    transition: opacity var(--transition);
}

.hamburger__label-text--close {
    opacity: 0;
}

.hamburger__lines {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.3125rem;
    width: 1.5rem;
    height: 0.875rem;
}

.hamburger__line {
    display: block;
    width: 100%;
    height: 1px;
    background-color: var(--color-text-white);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.25s ease, background-color var(--transition);
}

.hamburger:hover .hamburger__line {
    background-color: var(--color-gold);
}

.hamburger:hover .hamburger__label {
    color: var(--color-gold);
}

.hamburger.is-active .hamburger__line:nth-child(1) {
    transform: translateY(0.375rem) rotate(38deg);
}

.hamburger.is-active .hamburger__line:nth-child(2) {
    opacity: 0;
}

.hamburger.is-active .hamburger__line:nth-child(3) {
    transform: translateY(-0.375rem) rotate(-38deg);
}

/* ドロワー展開中は Menu → Close に入れ替える */
body.menu-open .hamburger__label-text--menu {
    opacity: 0;
}

body.menu-open .hamburger__label-text--close {
    opacity: 1;
}

/* ========================================
   ドロワー（フルスクリーン・中央揃え）
   ※ 右からのスライドではなく、画面全体をFVと同じ濃い茶色（#302821）で覆い、
     ナビゲーションを中央に縦に並べる。
   ※ 外側がないのでオーバーレイ要素は不要（マークアップから削除済み）。
     閉じるのはヘッダーの✕またはEscキー。
   ※ 2026/08：背景をアイボリー→FVと同じ濃い茶色（#302821）に変更。
     それに伴い地の上のテキスト（.drawer__nav-ja / -en、.drawer__cta-ja / -en、
     .drawer__tel、.drawer__hours、.drawer__sns-link）も白系に変更している。
     ホバー／アクティブの強調色は、濃茶の地でも視認できるよう
     ゴールド（var(--color-gold)）に統一した（元は var(--color-primary-dark)）。
======================================== */
.drawer {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background-color: #302821;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.02);
    transition: opacity 0.45s ease, visibility 0.45s ease,
        transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.drawer.is-open {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.drawer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    min-height: 100%;
    padding: calc(var(--header-height) + 1.5rem) var(--gutter) 2.5rem;
    text-align: center;
}

/* ナビ：上下中央に置く
   ※ ベースは2カラム、1024px以上は3カラム。
     縦一列だと10項目でSPの画面高さを超えやすいため。 */
.drawer__nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 0.5rem;
    align-content: center;
    width: 100%;
    max-width: 26rem;
    margin-inline: auto;
}

/* 2カラム時の空きマスは .drawer__cta が埋めるので、
   最後の1つを中央寄せする指定は不要になった。 */

.drawer__nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    opacity: 0;
    transform: translateY(0.625rem);
    transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 開いたときに上から順に現れる */
.drawer.is-open .drawer__nav-item {
    opacity: 1;
    transform: translateY(0);
}

.drawer.is-open .drawer__nav-item:nth-child(1) {
    transition-delay: 0.10s;
}

.drawer.is-open .drawer__nav-item:nth-child(2) {
    transition-delay: 0.15s;
}

.drawer.is-open .drawer__nav-item:nth-child(3) {
    transition-delay: 0.20s;
}

.drawer.is-open .drawer__nav-item:nth-child(4) {
    transition-delay: 0.25s;
}

.drawer.is-open .drawer__nav-item:nth-child(5) {
    transition-delay: 0.30s;
}

.drawer.is-open .drawer__nav-item:nth-child(6) {
    transition-delay: 0.35s;
}

.drawer.is-open .drawer__nav-item:nth-child(7) {
    transition-delay: 0.40s;
}

.drawer.is-open .drawer__nav-item:nth-child(8) {
    transition-delay: 0.45s;
}

.drawer.is-open .drawer__nav-item:nth-child(9) {
    transition-delay: 0.50s;
}

.drawer.is-open .drawer__nav-item:nth-child(10) {
    transition-delay: 0.55s;
}

.drawer__nav-ja {
    position: relative;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1.5;
    color: var(--color-text-white);
    transition: color var(--transition);
}

/* ホバー下線（中央から伸びる） */
.drawer__nav-ja::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -0.1875rem;
    width: 0;
    height: 1px;
    background-color: var(--color-gold);
    transform: translateX(-50%);
    transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.drawer__nav-en {
    font-family: var(--font-en);
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.7);
    transition: color var(--transition);
}

.drawer__nav-item:hover .drawer__nav-ja,
.drawer__nav-item.is-active .drawer__nav-ja {
    color: var(--color-gold);
}

.drawer__nav-item:hover .drawer__nav-ja::after,
.drawer__nav-item.is-active .drawer__nav-ja::after {
    width: 100%;
}

.drawer__nav-item:hover .drawer__nav-en,
.drawer__nav-item.is-active .drawer__nav-en {
    color: var(--color-gold);
}

/* お問い合わせ：ナビの並びから外し、ピルボタンとして強調する
   ※ 2026/10：採用情報をナビから外したため、ナビは8項目になった。
     2カラム時（768px未満）は8項目で4行が埋まるので、CTAは全カラムにまたいで下に中央配置する。
     （以前は9項目目（採用情報）の隣の空きマスを埋める配置だった。採用情報を戻すときは grid-column の指定を外す） */
.drawer__cta {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    justify-self: center;
    align-self: center;
    padding: 0.25rem 0.5rem;
    color: var(--color-title);
    opacity: 0;
    transform: translateY(0.625rem);
    transition: opacity 0.5s ease,
        transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        color var(--transition);
}

/* ナビの最後（8項目目）が0.45sなので、その次の段（0.50s）で現れる。 */
.drawer.is-open .drawer__cta {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.50s;
}

.drawer__cta-ja {
    position: relative;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1.5;
    color: var(--color-text-white);
    transition: color var(--transition);
}

/* ホバー下線（中央から伸びる）― .drawer__nav-ja と同じ */
.drawer__cta-ja::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -0.1875rem;
    width: 0;
    height: 1px;
    background-color: var(--color-gold);
    transform: translateX(-50%);
    transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.drawer__cta-en {
    font-family: var(--font-en);
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.7);
    transition: color var(--transition);
}

.drawer__cta:hover .drawer__cta-ja,
.drawer__cta.is-active .drawer__cta-ja {
    color: var(--color-gold);
}

.drawer__cta:hover .drawer__cta-ja::after,
.drawer__cta.is-active .drawer__cta-ja::after {
    width: 100%;
}

.drawer__cta:hover .drawer__cta-en,
.drawer__cta.is-active .drawer__cta-en {
    color: var(--color-gold);
}

/* ナビとフッター（電話・営業時間）の間の区切り。FVの.fv__ornamentと同じ使い方。 */
.drawer__ornament {
    display: block;
    width: clamp(10rem, 40vw, 16rem);
    aspect-ratio: 20 / 1;
    opacity: 0.85;
}

.drawer__ornament img {
    display: block;
    width: 100%;
    height: 100%;
}

/* フッター（電話・営業時間・SNS） */
.drawer__footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.6s ease 0.6s;
}

.drawer.is-open .drawer__footer {
    opacity: 1;
}

.drawer__tel-label {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.5rem;
    padding: 0.3125rem 1rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-text-white);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    color: var(--color-text-white);
}

.drawer__tel {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    /* 電話番号は視認性重視でゴシック体 */
    font-family: var(--font-family);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-text-white);
    transition: color var(--transition);
}

.drawer__tel i {
    font-size: 0.9375rem;
    color: var(--color-gold);
}

.drawer__tel:hover {
    color: var(--color-gold);
}

.drawer__hours {
    margin-top: 0.125rem;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.7);
}

@media (min-width: 768px) {
    .drawer__inner {
        padding: calc(var(--header-height) + 2.5rem) var(--gutter) 3.5rem;
    }

    /* 3カラム。ナビ8項目＋CTAで9マスになるので、CTAはグリッドの9マス目に入れて3行ちょうどに収める。
       ※ 2026/08：768px以上で3カラムに変更（以前は1024px以上のみ3カラムだった）。 */
    .drawer__nav {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2rem 2.5rem;
        max-width: 48rem;
    }

    .drawer__nav-item {
        padding: 0.375rem 0.75rem;
    }

    .drawer__nav-ja {
        font-size: 1.375rem;
        letter-spacing: 0.18em;
    }

    .drawer__nav-en {
        font-size: 0.75rem;
    }

    /* ※ 2026/08：ドロワー背景をFVと同じ濃い茶色にした際にゴールド枠線の
       塗りボタンを試したが、あえて目立たせなくていいとのことで、
       色・ホバー挙動は他のナビ項目と完全に同じに戻した（白文字・ホバーでゴールド＋下線）。
       ※ 2026/08：さらに見た目（ja/enの縦積み・フォントサイズ）も他のナビ項目と
         完全に揃えた。配置（グリッド外・下に単独・全幅）だけこのまま残している
         （9項目でちょうど 3行埋まるため）。
       ※ 2026/10：採用情報を外してナビが8項目になったため、全幅の単独行をやめ、
         グリッドの9マス目に入れて空きマスを埋める。
         採用情報を戻すときは grid-column: 1 / -1（全幅・下に単独）に戻す。 */
    .drawer__cta {
        grid-column: auto;
        padding: 0.375rem 0.75rem;
    }

    .drawer__cta-ja {
        font-size: 1.375rem;
        letter-spacing: 0.18em;
    }

    .drawer__cta-en {
        font-size: 0.75rem;
    }

    .drawer__hours {
        font-size: 0.8125rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .drawer {
        transform: none;
    }

    .drawer__nav-item,
    .drawer__cta,
    .drawer__footer {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ========================================
   ドロワー上部帯（ロゴ）
   ※ 2026/08：ロゴをナビの縦積みから外し、FVの.fv__top-bandと同じ意匠
     （最上部に固定・下にゴールドの線）に変更した。
   ※ .drawer__inner（display:flex, min-height:100%）と同じ.drawer直下に置く
     絶対配置の帯。DOM順で.drawer__innerの後ろに置くことで、
     .drawer__innerの余白（パディング）部分に重なってもクリックを奪われないようにしている。
   ※ ヘッダー（.header、z-index:1200）はドロワー（z-index:1100）より上に重なるので、
     ハンバーガーのピルはこの帯の上に自然に乗る。
   ※ .drawer__inner側の上パディング（calc(var(--header-height) + 1.5rem)）は
     この帯の高さぶんを既に確保しているので、ナビの位置調整は不要。 */
.drawer__top-band {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /* .headerと同じ値に揃える（1024px以上で6rem）。ずれるとハンバーガーのピルが
       帯のゴールド線と噫み合わなくなるため。 */
    height: var(--page-hero-top-band-height);
    display: flex;
    align-items: center;
    padding-inline: 0.875rem;
    border-bottom: 2px solid rgba(191, 160, 106, 0.8);
    pointer-events: none;
}

.drawer__top-band-logo {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    transition: opacity var(--transition);
}

.drawer__top-band-logo:hover {
    opacity: 0.8;
}

.drawer__top-band-logo-img {
    height: 3.25rem;
    width: auto;
    object-fit: contain;
}

/* ゴールドのテキストロゴ（fv-gold-logo-text.png）。FVの.fv__top-band-logo-textと同じ
   出し分け・サイズにしている。576px未満では非表示。 */
.drawer__top-band-logo-text {
    display: none;
}

@media (min-width: 576px) {
    .drawer__top-band-logo-text {
        display: block;
        height: 1.75rem;
        width: auto;
        object-fit: contain;
    }
}

@media (min-width: 768px) {
    .drawer__top-band-logo-text {
        height: 2rem;
    }
}

@media (min-width: 1024px) {
    .drawer__top-band-logo-text {
        height: 2.5rem;
    }
}

@media (min-width: 1200px) {
    .drawer__top-band-logo-text {
        height: 2.75rem;
    }
}

/* ========================================
   サブページ ヒーロー
======================================== */
/* 帯の高さをFVの.fv__top-band（--fv-top-band-height）と同じ値にする。
   ベース・768〜1023pxはvar(--header-height)のまま、1024px以上だけ6remに拡大する（FVと同じ場分岹）。 */
:root {
    --page-hero-top-band-height: var(--header-height);
}

@media (min-width: 1024px) {
    :root {
        --page-hero-top-band-height: 6rem;
    }
}

/* ページヒーローを囲む外側ラッパー。valley式（.page-hero--valley）はpage-hero自体に直接clip-pathをかけて角を欠けさせる方式なので、
   欠けた部分には本来はpage-heroの背後（=何もなければページの地色）がそのまま透けて見えてしまう。
   このラッパーの::beforeをpage-heroの一つ手前（背後）に敷くことで、$hero_after_bg（CSSカスタムプロパティ
   --page-hero-after-bgとしてラッパー自体にincludes/page-hero.phpが付与）で指定した色を欠け部分に見せれる。
   （split・mountain式はpage-hero自体の外側矩形にはclipがかからないので、この::beforeは常にpage-heroの不透明な背景に
     隠れたままで影響なし。::beforeはDOM上仮想的に最初の子となり、実の子である<section>より先（=背後）に
     描画されるのでz-indexは不要。） */
.page-hero-wrap {
    position: relative;
    background-color: var(--page-hero-after-bg, var(--color-bg));
}

/* 谷型クリップ（.page-hero--valley）の弧の内側に、少し隔ててゴールドの線を引く。
   ※ FV（.fv--cocoaの.fv__bg / __bg-gap / __bg-ring）と同じ三層の仕組み・同じ間隔。
     外側から順に、
       ::before （地の濃茶） … オフセット0    ＝シルエットの境界そのもの
       ::after  （ゴールド） … オフセット0.2rem
       .page-hero（写真）   … オフセット0.28rem
     と内側へずらして重ねるので、境界から0.2remは濃茶の隔たり、その内側の
     0.08remだけが細いゴールドの線として見える。
   ※ 弧の外側（欠けた部分）に見える色は、このラッパー自体の背景色
     （--page-hero-after-bg）が担当する。
   ※ 山型（修飾クラスなし）・splitでは.page-hero自体が矩形のままなので、
     この2層は完全に隠れる（影響なし）。 */
.page-hero-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: #302821;
    clip-path: ellipse(100vw 18.5rem at 50% calc(100% - 18.5rem));
    pointer-events: none;
}

.page-hero-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--color-gold);
    clip-path: ellipse(100vw 18.5rem at 50% calc(100% - 18.5rem - 0.2rem));
    pointer-events: none;
}

.page-hero {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 22.5rem;
    /* 下パディングは、本来の余白に下端の楺円クリップの高さの半分を
       加算した値にする。弧で削られる分をあらかじめ退かしておくことで、
       リード文が弧にかからないようにする。
       ※ --page-hero-arc-height は .page-hero::after の高さに使う。 */
    --page-hero-arc-height: 4rem;
    padding: calc(var(--page-hero-top-band-height) + 3rem) var(--gutter) calc(3rem + 3rem / 2);
    overflow: hidden;
    /* FV（.fv--cocoa）と同じ濃いココア茶色に統一。写真未配置の間もこの色がそのまま見える。 */
    background-color: #302821;
    text-align: center;
    /* 下端の弧は box 自体の clip-path ではなく、直後の ::after（ページの明るい地色）で作る（下の.page-hero::after参照）。
       ※ .sec-topics--cocoa-ribbon .topicsの弧は、中心が一番高い位置（画面上端に近い）にあり、両端に向かうほど低い位置（カーブが深い）になる山形。
       この弧を単一のellipse() clip-pathでボックス自体に適用すると、「kept=inside」が常にx=0（中央）で最大になるという性質上、
         中心が一番高い（=ボックスの高さが残る）・両端が低い（=高さが減る）山形になり、page-heroの下端では逆に「中央が一番引っ込み・両端が伸びる」弧（リボンを上下反転した形）になってしまう（リボンとは逆方向）。
       そのため、明るい色（ページ地色）の「欠け」を別要素として下端に重ね、そちらでリボンと同じ式（at 50% Rv）を使い、
         結果的に地の色（濃茶）側から見るとリボンと同じ向きの山形（中央が高い・両端が低い）に見えるようにしている。 */
}

/* 下端の弧（リボンと完全に同じ向き：中央が高い・両端が低い山形）を作る明るい色（ページ地色）の「欠け」。
   ※ clip-pathはリボンと完全に同じ式（ellipse(100vw Rv at 50% Rv)）・同じRvの値を使う。
     この要素自体の高さ（D）はpage-hero自体の高さを超えないよう控えめにしてあるが、
     楽円の半径Rv自体はリボンと完全に同じ値（18.5rem）にすることで、同じ弧の「形」を保ったまま、
     Dの範囲だけを窓として見せている（楽円自体が大きいので、Dの中での変化はリボンと同じ緩やかなカーブになる）。
     中央（x=0）ではD全体が明るくなり（欠けが深い）、画面端（x=半幅）では楽円の範囲が両側から
     Rv×(1-√0.75)≈Rv×0.134ずつ内側に縮むので、Dより浅くしか明るくならない（欠けが浅い）。 */
.page-hero::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--page-hero-arc-height);
    background-color: var(--page-hero-after-bg, var(--color-bg));
    clip-path: ellipse(100vw 18.5rem at 50% 18.5rem);
    pointer-events: none;
}

/* ========================================
   page-hero の弧の向きをページごとに切り替えるモディファイア
   ※ デフォルト（修飾クラスなし）：山型（.page-hero::afterの欠けで作る、リボンと同じ向き。上を参照）。
   ※ .page-hero--valley：谷型（中央が深く沈み込み・両端が浅くなる形）。
     こちらは単一のellipse() clip-pathをbox自体に直接使える向き（「kept=inside」が常にx=0で
       最大になる性質をそのまま使える）なので、別要素（::after）は不要。そのためここで非表示にする。
     値はFV/リボンと同じRv（18.5rem・768px以上は37rem）を使い、中心を「自分の下端（100%）からRvだけ
       上に行った位置」（calc(100% - Rv)）にすることで、中央がボックスの下端まで完全に残り（深く）、
       画面端ではRv×0.134分だけ下部が切り取られる（浅くなる）。 */
.page-hero--valley::after {
    content: none;
}

.page-hero--valley {
    clip-path: ellipse(100vw 18.5rem at 50% calc(100% - 18.5rem - 0.28rem));
}

/* 高さ（下限）はベース22.5rem・576px以上25remの2段階。
   ※ 以前は768px以上20rem・1024px以上24remも持っていたが、どちらも
     25remを下回り、広い画面で逆にヒーローが低くなってしまうので削除した。 */
@media (min-width: 576px) {
    .page-hero {
        min-height: 25rem;
    }
}

.page-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.page-hero__veil {
    position: absolute;
    inset: 0;
    /* 背景を明るくするベール（アイボリー）から、地の濃茶（#302821）を重ねて写真を暗くする
       ベールに変更。白文字（.page-hero__ja / __lead）が写真の上でも読めるようにする。 */
    background: linear-gradient(180deg, rgba(48, 40, 33, 0.55) 0%, rgba(48, 40, 33, 0.75) 100%);
}

/* 上部帯（ロゴ）
   ※ FVの.fv__top-band・ドロワーの.drawer__top-bandと同じ意匠（最上部固定・背景は地の濃茶色・下にゴールドの線）に統一。
   ※ .page-hero自体のpadding-top（calc(var(--header-height) + 3rem)以降）がすでに
     帯の高さ（var(--header-height)）分を確保済みなので、.page-hero__inner側の調整は不要。 */
.page-hero__top-band {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    height: var(--page-hero-top-band-height);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-inline: 0.875rem;
    background-color: #302821;
    border-bottom: 2px solid rgba(191, 160, 106, 0.8);
    pointer-events: none;
}

.page-hero__top-band-logo {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    transition: opacity var(--transition);
}

.page-hero__top-band-logo:hover {
    opacity: 0.8;
}

.page-hero__top-band-logo-img {
    height: 3.25rem;
    width: auto;
    object-fit: contain;
}

/* ゴールドのテキストロゴ（fv-gold-logo-text.png）。FV・ドロワーと同じ出し分け・サイズ。576px未満では非表示。 */
.page-hero__top-band-logo-text {
    display: none;
}

@media (min-width: 576px) {
    .page-hero__top-band-logo-text {
        display: block;
        height: 1.75rem;
        width: auto;
        object-fit: contain;
    }
}

@media (min-width: 768px) {
    .page-hero__top-band-logo-text {
        height: 2rem;
    }
}

@media (min-width: 1024px) {
    .page-hero__top-band-logo-text {
        height: 2.5rem;
    }
}

@media (min-width: 1200px) {
    .page-hero__top-band-logo-text {
        height: 2.75rem;
    }
}

.page-hero__inner {
    position: relative;
    z-index: 1;
}

/* 英字（小さめのラベル）と日本語（見出し本体）。
   ※ 以前は逆（英字を大きく・日本語を小さく添える）だったが、
     日本語を主タイトルの大きさにし、英字をその上の小さなラベルに変更した。
   ※ 日本語は全角なので、英字の旧サイズと同じ値にすると大きすぎるため
     わずかに押さえている（2.25→2rem / 3.25→2.75rem / 4→3.25rem）。
   ※ 英字は.page-hero__title-wrap（width: fit-content＝日本語タイトルの実幅）の
     中に入れてあるので、text-align: centerで日本語タイトルの幅に対して
     中央に並ぶ（splitの左寄せレイアウトでもタイトルの真上に乗る）。 */
.page-hero__en {
    font-family: var(--font-en);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.16em;
    line-height: 1.2;
    margin-bottom: 1rem;
    text-align: center;
    color: var(--color-gold);
}

.page-hero__ja {
    font-family: 'Hina Mincho', var(--font-heading);
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    color: var(--color-text-white);
}

.page-hero__lead {
    margin-top: 1.25rem;
    font-size: 0.875rem;
    color: #E8E0D4;
}

/* タイトル（.page-hero__ja）下の共通オーナメント。幅は.section-title-wrap（fit-content）で
   タイトルテキストの実幅に自動で揃う。.page-hero__innerはtext-alignが中央/左寣せで切り替わるが、
   text-alignはblock要素（このラッパー）自体の位置には影響しないので、
   中央寄せにするケース（基本値）はmargin-inline: autoで明示的に中央に寄せる。 */
.page-hero__title-wrap {
    margin-inline: auto;
}

/* タイトルの上下にゴールドの線を引き、日本語タイトルを挖む。
   ※ 幅はラッパー（.section-title-wrap、width: fit-content）が
     タイトル文字の実幅に揃えてくれるので、線はwidth:100%でよい。 */
.page-hero__line {
    display: block;
    width: 100%;
    height: 1px;
    background-color: var(--color-gold);
    opacity: 0.8;
}

/* ========================================
   page-hero を FV（.fv--cocoa）と同じ画像配置にするモディファイア
   ※ .page-hero--split：768px以上は左の濃茶地にタイトルを左寄せで置き、右側は
     円弧（cqh単位で常に正円になる、FVと同じ手法）で切り取られた写真にする。
     768px未満はテキストが上・写真が下の縦積みになり、FVモバイル版と同じ
     楽円clip-pathで写真上端に弧を付ける。
   ※ 弧（山型・谷型）や下端の「欠け」（.page-hero::after）は使わないので無効化する。 */
.page-hero--split {
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
    text-align: left;
    isolation: isolate;
    /* container-type: size は中身（.page-hero__innerのテキスト量や写真）を無視して自分自身の高さを決める（containment）。
       明示的な height がないと .page-hero の min-height（15～24rem）だけに潰れてしまい、
       FVと同じ円弧の写真やテキストが入り切らなくなる（overflow: hiddenで欠ける）。
       そのためここで height を明示指定する（768px以上・1024px以上の値は下の@mediaを参照）。 */
    height: 36rem;
}

.page-hero--split .page-hero__photo {
    position: absolute;
    inset: 0;
}

/* ゴールドの縦の線・隣接を隔てる隔間。基本は非表示。各ブレークポイントで表示させる。 */
.page-hero__bg-ring,
.page-hero__bg-gap {
    display: none;
}

.page-hero__arc-ring,
.page-hero__arc-gap {
    display: none;
}

@media (min-width: 768px) {
    /* テキスト側（.page-hero__inner）を垂直中央にする。ベースのstretchは写真（position: absolute）には
       影響しないので、実質.page-hero__innerの中央揃えだけになる。 */
    .page-hero--split {
        align-items: center;
    }

    /* テキスト・写真が左右に並ぶ構成になるのでモバイルより低めでも十分だが、FVらしい円弧の見せ場を確保するため少し余裕を持たせている。 */
    .page-hero--split {
        height: 38rem;
    }

    .page-hero--split .page-hero__bg {
        top: 0;
        right: 0;
        bottom: 0;
        left: 40%;
        border-radius: 0;
        /* コンテナクエリー単位（50cqh）を使うことで、page-hero自体の実際の高さが何であっても
           常に「実際の高さの半分」の半径になり、写真の左辺全体がなめらかな一本の正円の弧に見える（FVと同じ考え方）。 */
        border-top-left-radius: 19rem;
        border-bottom-left-radius: 19rem;
        overflow: hidden;
    }

    /* ゴールドの細い線。FVの.fv__bg-ring/.fv__bg-gapと同じ二重楽円の手法で、
         写真（.page-hero__bg）よりひと回り大きい弧をゴールドで敷き、隔間マスク（地の濃茶）が
         その内側を隠すことで、差分（0.08rem）だけが細い線として見える。 */
    .page-hero--split .page-hero__bg-ring {
        display: block;
        position: absolute;
        top: -0.28rem;
        right: 0;
        bottom: -0.28rem;
        left: calc(40% - 0.28rem);
        border-radius: 0;
        border-top-left-radius: 19.28rem;
        border-bottom-left-radius: 19.28rem;
        background-color: var(--color-gold);
    }

    .page-hero--split .page-hero__bg-gap {
        display: block;
        position: absolute;
        top: -0.2rem;
        right: 0;
        bottom: -0.2rem;
        left: calc(40% - 0.2rem);
        border-radius: 0;
        border-top-left-radius: 19.2rem;
        border-bottom-left-radius: 19.2rem;
        background-color: #302821;
    }

    /* 写真とテキストが円弧ではっきり分かれているので、FVと同じ理由でベール（写真を暗くするグラデーション）は不要。 */
    .page-hero--split .page-hero__veil {
        background: none;
    }

    .page-hero--split .page-hero__inner {
        /* max-widthだけだとフレックスアイテムが中身の幅に縮んでしまい（flex-basis: autoの性質）、
           40%の領域を実際には占有しない（text-align: centerが効かない原因になっていた）。
           widthで明示的に40%そのものを占有させる。 */
        width: 40%;
        padding-inline: var(--gutter);
        padding-bottom: 4rem;
        text-align: left;
    }

    /* splitの768px以上は左寣せなので、オーナメントラッパーも中央寄せを打ち消して左端に寄せる。 */
    .page-hero--split .page-hero__title-wrap {
        margin-inline: 0;
    }

    .page-hero--split .page-hero__arc-ring {
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: calc(6rem + 0.38rem);
        background-color: var(--color-gold);
        clip-path: ellipse(100vw calc(37rem + 0.38rem) at 50% calc(37rem + 0.38rem));
        pointer-events: none;
    }

    .page-hero--split .page-hero__arc-gap {
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: calc(6rem + 0.3rem);
        background-color: #302821;
        clip-path: ellipse(100vw calc(37rem + 0.3rem) at 50% calc(37rem + 0.3rem));
        pointer-events: none;
    }
}

/* 1024px以上：--page-hero-top-band-heightが6remに広がる分、少し高さに余裕を持たせる。
   あわせて、タイトル・リード文を含む.page-hero__inner全体を、写真配置部分（右側円弧）を
   除いた左側の非画像領域（.page-hero__inner自体、max-width: 40%）の中央に配置する。
   ※ 768px以上では左寄せ（margin-inline: 0、text-align: left）だったが、
     1024px以上だけ.page-hero__inner自体をtext-align: centerにし、
     中のtitle-wrapもmargin-inline: autoでブロックとして中央に寄せる。 */
@media (min-width: 1024px) {
    .page-hero--split {
        height: 44rem;
    }

    .page-hero--split .page-hero__bg {
        border-top-left-radius: 22rem;
        border-bottom-left-radius: 22rem;
    }

    .page-hero--split .page-hero__bg-ring {
        border-top-left-radius: 22.28rem;
        border-bottom-left-radius: 22.28rem;
    }

    .page-hero--split .page-hero__bg-gap {
        border-top-left-radius: 22.2rem;
        border-bottom-left-radius: 22.2rem;
    }

    .page-hero--split .page-hero__inner {
        text-align: center;
    }

    .page-hero--split .page-hero__title-wrap {
        margin-inline: auto;
    }
}

@media (max-width: 767.98px) {
    .page-hero--split {
        flex-direction: column;
        justify-content: flex-start;
        padding-top: calc(var(--page-hero-top-band-height) + 2rem);
        text-align: center;
    }

    .page-hero--split .page-hero__inner {
        order: 1;
        flex-shrink: 0;
        text-align: center;
        padding-inline: var(--gutter);
        padding-bottom: 2rem;
    }

    .page-hero--split .page-hero__photo {
        position: relative;
        z-index: 0;
        order: 2;
        flex: 1;
        min-height: 12rem;
    }

    /* 位置指定のないabsolute要素（::after）はoflexboxのフレックスアイテムにはならないため、
       orderプロパティは重なり順に影響しない。代わりにz-indexで写真（z-index:0）より前に固定する
       （.page-hero--split自体のisolation: isolateで安全にスコープされている）。
       ゴールドの線（arc-ring/arc-gap）は768px未満ではFVと同じく非表示なのでz-index不要。 */
    .page-hero--split::after {
        z-index: 1;
    }

    /* 下端の弧（.page-hero::afterの「欠け」）に沿って茶色い線を引く。
       ※ FV直下のリボン（.sec-topics--cocoa-ribbon::before）と同じ二重楺円の手法。
         同じ式の楺円を0.3rem大きくした茶色の面を「欠け」の背後に敷くことで、
         差分の0.3remだけが弧に沿った線として写真の上に見える。
       ※ z-indexは欠け（::after）と同じ1だが、DOM順で::beforeが先（背面）に
         なるので意図どおり重なる。
       ※ 768px以上は専用のゴールドの線（.page-hero__arc-ring / __arc-gap）があるので不要。 */
    .page-hero--split::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        height: calc(var(--page-hero-arc-height) + 0.3rem);
        background-color: #302821;
        clip-path: ellipse(100vw calc(18.5rem + 0.3rem) at 50% calc(18.5rem + 0.3rem));
        pointer-events: none;
    }

    /* FVモバイル版と同じ手法（画面幅より大きな楽円をclip-pathで使い、そのごく一部（頂点付近）だけを
       見せる）で、写真の上端に弧を付ける。 */
    .page-hero--split .page-hero__bg-ring {
        display: block;
        position: absolute;
        inset: -0.28rem 0;
        background-color: var(--color-gold);
        clip-path: ellipse(100vw 12.78rem at 50% 12.78rem);
    }

    .page-hero--split .page-hero__bg-gap {
        display: block;
        position: absolute;
        inset: -0.2rem 0;
        background-color: #302821;
        clip-path: ellipse(100vw 12.7rem at 50% 12.7rem);
    }

    .page-hero--split .page-hero__bg {
        position: absolute;
        inset: 0;
        clip-path: ellipse(100vw 12.5rem at 50% 12.5rem);
    }

    .page-hero--split .page-hero__veil {
        background: none;
    }
}

/* 576px以上・768px未満：縦積みレイアウトのまま、写真が見える高さ（.page-hero__photoのflex:1部分）を広げる。
   テキスト側（.page-hero__inner、flex-shrink:0）の高さは変わらないので、
   .page-hero--split自体の高さを増やせばその分がそのまま写真の可視領域に回る。 */
@media (min-width: 576px) and (max-width: 767.98px) {
    .page-hero--split {
        height: 42rem;
    }
}

/* 375px未満のclip-path補正（他の楽円clip-pathと同じ理由。ファイル末尾の375px補正ブロックに同様の
   ルールがあるので、実際の値はこちらでは置かずファイル末尾にまとめる）。 */

@media (min-width: 768px) {
    .page-hero {
        --page-hero-arc-height: 6rem;
        padding-top: calc(var(--page-hero-top-band-height) + 4rem);
        padding-bottom: calc(4rem + 6rem / 2);
    }

    .page-hero::after {
        /* Rvはリボンのデフォルト（768px以上）値（37rem）と完全に同じ。 */
        clip-path: ellipse(100vw 37rem at 50% 37rem);
    }

    .page-hero--valley {
        clip-path: ellipse(100vw 37rem at 50% calc(100% - 37rem - 0.28rem));
    }

    .page-hero-wrap::before {
        clip-path: ellipse(100vw 37rem at 50% calc(100% - 37rem));
    }

    .page-hero-wrap::after {
        clip-path: ellipse(100vw 37rem at 50% calc(100% - 37rem - 0.2rem));
    }

    .page-hero__en {
        font-size: 1.125rem;
    }

    .page-hero__ja {
        font-size: 2.75rem;
    }

    .page-hero__lead {
        margin-top: var(--spacing-sm);
        font-size: 0.9375rem;
    }
}

@media (min-width: 1024px) {
    .page-hero__en {
        font-size: 1.25rem;
    }

    .page-hero__ja {
        font-size: 3.25rem;
    }
}

/* ========================================
   パンくずリスト
   ※ FVと同じ濃いココア茶色（#302821）に統一。page-hero直下に接するので、
     地の色が途切れなくつながる。文字・区切り線は白の透過に変えて読みやすさを確保している。
======================================== */
.breadcrumb {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    background-color: #302821;
}

.breadcrumb__outer {
    width: 100%;
    max-width: calc(var(--section-width-xl) + var(--gutter) * 2);
    margin-inline: auto;
    padding: 0.75rem var(--gutter);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.breadcrumb__outer::-webkit-scrollbar {
    display: none;
}

.breadcrumb__list {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    /* page-heroの日本語テキスト（.page-hero__ja）と同じフォント・字並に揃える。 */
    font-family: var(--font-heading);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
}

.breadcrumb__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.breadcrumb__item:not(:last-child)::after {
    content: '';
    width: 0.3125rem;
    height: 0.3125rem;
    border-top: 1px solid rgba(255, 255, 255, 0.35);
    border-right: 1px solid rgba(255, 255, 255, 0.35);
    transform: rotate(45deg);
}

.breadcrumb__link {
    position: relative;
    color: rgba(255, 255, 255, 0.7);
    transition: color var(--transition);
}

/* ホバーでゴールドの下線を引く。.footer__nav-linkと同じ作りで、
   左から伸びてテキスト幅いっぱいになる。 */
.breadcrumb__link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -0.1875rem;
    width: 0;
    height: 1px;
    background-color: var(--color-gold);
    transition: width var(--transition);
}

.breadcrumb__link:hover {
    color: var(--color-gold);
}

.breadcrumb__link:hover::after {
    width: 100%;
}

.breadcrumb__current {
    color: var(--color-text-white);
}

@media (min-width: 768px) {
    .breadcrumb__list {
        font-size: 0.8125rem;
    }
}

/* ========================================
   共通CTAセクション（includes/contact.php）
   ※ 現在は未使用。全ページとも下の「ご予約・ご案内」（.sec-links /
     includes/sec-links.php）に置き換えた。戻す場合は各ページの
     include を includes/contact.php に戻す。
======================================== */
.sec-cta {
    position: relative;
    padding: var(--spacing-xxl) 0;
    background-color: var(--color-bg-accent);
}

.sec-cta__inner {
    width: 100%;
    max-width: calc(var(--section-width-lg) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.sec-cta__head {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.sec-cta__label {
    font-family: var(--font-en);
    font-size: 2rem;
    font-style: italic;
    line-height: 1.2;
    letter-spacing: 0.08em;
    color: var(--color-gold);
}

.sec-cta__title {
    margin-top: 0.375rem;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    color: var(--color-title);
}

.sec-cta__lead {
    margin-top: var(--spacing-sm);
    font-size: 0.9375rem;
    color: var(--color-text);
}

.sec-cta__body {
    display: grid;
    gap: var(--spacing-md);
}

/* ※ カードにしない。白い箱と影をやめ、罫線だけで区切る。 */
.cta-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.375rem;
    padding: var(--spacing-md) var(--spacing-sm);
    border-top: 1px solid var(--color-border);
    transition: transform var(--transition);
}

.cta-card:hover {
    transform: translateY(-3px);
}

.cta-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 0.5rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    color: var(--color-primary-dark);
    font-size: 1.125rem;
    transition: background-color var(--transition), color var(--transition),
        border-color var(--transition);
}

.cta-card:hover .cta-card__icon {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-white);
}

.cta-card__label {
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    color: var(--color-text-light);
}

.cta-card__value {
    /* 電話番号は視認性重視でゴシック体。
       メール文言（.cta-card--mail）は下で明朝体に上書きしている。 */
    font-family: var(--font-family);
    font-size: 1.625rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.3;
    color: var(--color-title);
}

.cta-card--mail .cta-card__value {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    letter-spacing: 0.1em;
}

.cta-card__note {
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--color-text-light);
}

@media (min-width: 768px) {
    .sec-cta {
        padding: var(--spacing-3xl) 0;
    }

    .sec-cta__label {
        font-size: 3rem;
    }

    .sec-cta__title {
        font-size: 1.125rem;
    }

    .sec-cta__body {
        grid-template-columns: 1fr 1fr;
        gap: 0;
    }

    .cta-card {
        padding: var(--spacing-lg) var(--spacing-md);
    }

    /* PCでは2つの間を縦の罫線で仕切る */
    .cta-card+.cta-card {
        border-left: 1px solid var(--color-border);
    }

    .cta-card__value {
        font-size: 1.875rem;
    }

    .cta-card--mail .cta-card__value {
        font-size: 1.375rem;
    }
}

/* ========================================
   ご予約・ご案内（全幅モザイク）
   includes/sec-links.php 。全ページのフッター直前（トップは店舗案内の下）に入る。
   1024px以上  … 左＝Instagram誘導（縦長）／右上＝QRコード／右下＝お知らせ。
   768〜1023px … 上＝Instagram（全幅）／下＝QR｜お知らせの横並び。
   〜767px     … QRコードを非表示にし、Instagram・お知らせの2枚を縦積み。
   ※ 2026-08：QRコードタイルは768px未満では非表示（.link-tile--qrにdisplay:noneを設定し、
     768px以上でdisplay:flexに戻す）。自分の画面ではQRを読み取れないため。
   ※ 白い角丸カードは使わない。.cat-band と同じ「全幅・隙間なし」のタイル。
   ※ 上下の余白は持たない（前のセクションの下余白とフッターに任せる）。
   ※ 写真素材は未着なので、いまは配色で塗り分けている。
       左   … Instagramはdippin-dots02.webpの背景写真
       右上 … QRは濃い茶（フッターと同じ #3A322B）
       右下 … 薄ベージュ
     ※ 濃い茶を右下でなく右上に置いているのは、下層ページではこの帯の
       直下にフッター（同じ #3A322B）が来るため。右下を濃い茶にすると
       フッターと境目が消えてひとつの塊に見えてしまう。
======================================== */
.link-tiles {
    display: grid;
    /* 隙間なし。タイル同士を接して1枚の面に見せる（.cat-band と同じ） */
    gap: 0;
}

.link-tile {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 13rem;
    padding: var(--spacing-xl) var(--gutter);
    overflow: hidden;
    /* ホバーの地の変化を 0.3s ease でつなぐ（他のUIと揃えて --transition を使う）。
       これがないと .link-tile--news:hover の背景色が瞬間で切り替わる。 */
    transition: background-color var(--transition);
}

/* ※ 中身の幅は 576px（--section-width-sm）で頭打ちし、タイル内で中央寄せにする。
   ※ z-index は左タイルのベール（.link-tile--contact::before）より上に出すため。
     ※ ベールは現在廃止済みなので、この z-index は実質効いていない。
     復活させたときのために残してある。 */
.link-tile__body {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--section-width-sm);
    margin: 0 auto;
}

/* 左：ご予約（バナー1枚）

   【背景写真の入れ方】
   assets/images/reservation-bg.webp を差し替えるだけで反映される（HTMLの変更は不要）。
     ・未配置のあいだは background-image が効かず、background-color（セージ）
       がそのまま出るので画面は崩れない（コンソールに404が出るだけ）。
     ・ファイル名を変える場合は下の url() を書き換える。
     ・推奨サイズ：横1600px前後。PCでは幅の半分（最大720px）に cover で
       入るので、人物や商品は中央寄りの写真が扱いやすい。
     ・SP用／PC用で出し分けたいときは @media 内で background-image を
       上書きする（FVと同じやり方）。

   【ベール（::before）】※ 現在は廃止。バナーの上に白文字を載せなくなったため。
   以下は復活させる場合のメモ。
   写真の上でも白文字が読めるよう、ブランド色の半透明を一面に重ねている。
     濃さの調整は --tile-veil の不透明度（1箇所）だけでできる。
     明るい写真：上げる（0.85前後）／暗い写真：下げる（0.6前後）。
     ※ ベールは地の色にも重なるので、写真未配置の間は少し深めのセージに見える。 */
.link-tile--insta {
    background-image:
        url('../images/dippin-dots02.webp'),
        var(--img-placeholder);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--color-text-white);
    /* 高さはmin-heightで段階切り替える（aspect-ratioではなくmin-heightを使うのは、
       .link-tileがoverflow:hiddenのグリッドアイテムで自動最小サイズ（min-height:auto）が0になり、
       aspect-ratioだと中身が高さを上回ったときに文字が切れてしまうため）。
       〜767px：4:3（幅100vwなので高さは75vw）。768〜1023pxは@mediaで更新（16:11）。
       1024px以上は左列の縦長タイルになるので、既定の.link-tileのmin-heightに任せる（1024pxの@mediaで同じ値を明示）。 */
    min-height: 75vw;
}

.link-tile--insta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(53, 48, 43, 0.2) 0%, rgba(53, 48, 43, 0.6) 100%);
    pointer-events: none;
    transition: opacity var(--transition);
}

.link-tile--insta:hover::before {
    opacity: 0.85;
}

/* 右上：QRコード（濃い茶。QRコード画像自体は白い台紙に載せて読み取りやすさを確保する）。
   ※ 768px未満（スマホ・縦積み時）は非表示。自分の画面ではQRを読み取れないため。
     768px以上（タブレット・PC）で表示する（.link-tileの基本値と同じdisplay: flex）。 */
.link-tile--qr {
    display: none;
    background-color: #3A322B;
    color: var(--color-text-white);
}

.link-tile--qr:hover {
    background-color: #453A31;
}

@media (min-width: 768px) {
    .link-tile--qr {
        display: flex;
    }
}

.link-tile--qr .link-tile__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
}

.link-tile__qr-img {
    width: 7rem;
    height: 7rem;
    object-fit: contain;
    padding: 0.5rem;
    background-color: var(--color-white);
    border-radius: var(--radius-md);
}

.link-tile__qr-caption {
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.82);
}

@media (min-width: 768px) {
    .link-tile__qr-img {
        width: 8rem;
        height: 8rem;
    }
}

@media (min-width: 1024px) {
    .link-tile__qr-img {
        width: 9rem;
        height: 9rem;
    }
}

/* 右下：お知らせ（薄ベージュ。フッターと境目が消えないよう明るくする） */
.link-tile--news {
    background-color: var(--color-bg-light);
    color: var(--color-text);
}

.link-tile--news:hover {
    background-color: var(--color-bg-accent);
}

/* 英字ラベル
   ※ ゴールドはセージグリーンの上だとコントラストが足りないので、
     左タイルだけ白の透過にしている。 */
.link-tile__en {
    font-family: var(--font-en);
    font-size: 1.125rem;
    font-style: italic;
    letter-spacing: 0.16em;
    line-height: 1.2;
    color: var(--color-gold);
}

.link-tile--insta .link-tile__en {
    color: rgba(255, 255, 255, 0.82);
}

.link-tile__title {
    margin-top: 0.375rem;
    font-family: var(--font-heading);
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 0.1em;
}

.link-tile--news .link-tile__title {
    color: var(--color-title);
}

/* お知らせの見出しはCMSの記事タイトルなので、長文でもタイルが
   伸びないよう2行で打ち切る。 */
.link-tile__title--news {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 1.1875rem;
    line-height: 1.7;
}

.link-tile__lead {
    margin-top: var(--spacing-xs);
    font-size: 0.875rem;
    line-height: 1.9;
}

.link-tile--news .link-tile__lead {
    color: var(--color-text-light);
}

.link-tile--insta .link-tile__lead {
    color: rgba(255, 255, 255, 0.82);
}

/* 電話番号（白いピル）
   ※ 番号は視認性重視でゴシック体（.drawer__tel / .cta-card__value と同じ）。
   ※ ホバーで地を暗くすると背景のセージに沈むので、
     文字色だけゴールドに変える。 */
.link-tile__tel {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.75rem;
    border-radius: var(--radius-full);
    background-color: var(--color-white);
    color: var(--color-primary-dark);
    box-shadow: var(--shadow-sm);
    transition: color var(--transition), transform var(--transition);
}

.link-tile__tel i {
    font-size: 0.875rem;
    color: var(--color-gold);
}

.link-tile__tel-num {
    font-family: var(--font-family);
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.3;
}

.link-tile__tel:hover {
    color: var(--color-gold);
    transform: translateY(-2px);
}

.link-tile__hours {
    margin-top: 0.625rem;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: var(--color-text-light);
}

/* メールリンク（現在は未使用）
   ※ ご予約の導線をお電話・ご来店に絞ったため、includes/sec-links.php から
     .link-tile__mail の a を削除している（メールの導線はフッターの
     サイトマップと下部固定バーにある）。
     戻す場合はマークアップを復活させればこの指定がそのまま効く。 */
.link-tile__mail {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: var(--spacing-sm);
    padding-bottom: 0.1875rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.45);
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    color: var(--color-text-white);
    transition: opacity var(--transition), border-color var(--transition);
}

.link-tile__mail i {
    font-size: 0.8125rem;
}

.link-tile__mail:hover {
    opacity: 0.75;
    border-color: rgba(255, 255, 255, 0.8);
}

/* 右2枚の「見る」リンク。.link-arrow と同じ作りだが、
   タイル全体が a なので span で組んでいる。
   ※ 横棒は scaleX で伸ばす（gap・width は動かさない）。理由は .link-arrow 参照。 */
.link-tile__more {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    margin-top: var(--spacing-sm);
    font-size: 0.875rem;
    letter-spacing: 0.1em;
}

.link-tile__more::after {
    content: '';
    width: 1.75rem;
    height: 1px;
    background-color: currentColor;
    transform: scaleX(1);
    transform-origin: left center;
    transition: transform var(--transition);
}

.link-tile--news .link-tile__more {
    color: var(--color-primary-dark);
}

.link-tile:hover .link-tile__more::after {
    transform: scaleX(1.3);
}

/* 768〜1023px：上にInstagramを全幅で置き、その下に QR｜お知らせ を横並びにする。
   ※ 縦長モザイク（左1枚＋右2枚）は 1024px以上でだけ組む。
     タブレット幅だと左タイルが細長くなりすぎるため。 */
@media (min-width: 768px) {
    .link-tiles {
        grid-template-columns: 1fr 1fr;
    }

    .link-tile {
        min-height: 15rem;
    }

    /* 1行目を全幅で使う（QR・お知らせが2行目に回る） */
    .link-tile--insta {
        grid-column: 1 / -1;
        /* 768〜1023px：16:11（幅100vwなので高さは68.75vw = 11÷16）。1024px以上は下の@mediaで上書き。 */
        min-height: 68.75vw;
    }

    .link-tile__title {
        font-size: 1.625rem;
    }

    .link-tile__title--news {
        font-size: 1.3125rem;
    }

    .link-tile__lead {
        font-size: 0.9375rem;
    }

    .link-tile__tel-num {
        font-size: 1.625rem;
    }
}

/* 〜767px：ご予約ブロック（全幅）を 4:3 にする。
   幅が 100vw なので高さは 75vw。
   ※ aspect-ratio ではなく min-height を使う。.link-tile は overflow:hidden の
     グリッドアイテムなので自動最小サイズ（min-height:auto）が 0 になり、
     aspect-ratio だと中身が高さを上回ったときに文字が切れてしまうため。
   ※ そのかわり、中身（約360px）のほうが高くなる幅──おおむね480px未満
     ──では4:3にならず、中身なりの高さになる（SPで文字が切れるより安全側）。
   ※ 1024px以上は左列の縦長タイルになるのでこの指定は外す。
     （そちらの4:3は右2枚の min-height 18.75vw で作っている） */
/* 1024px以上：左1枚（2行ぶんの縦長）＋右2枚のモザイクに組み替える。
   ※ 左タイルの高さ＝右2枚の高さの合計。
   ※ 左タイルを 4:3（幅 50vw ÷ 高さ 37.5vw）に寄せるため、右2枚に
     その半分の 18.75vw を下限として持たせている。
     max() なので中身のほうが高いときは中身が勝つ＝文字は切れない。
     ⚠️ 右タイルの中身（英字＋見出し＋リード＋リンク＋上下余白8rem）が
       約285pxあるため、18.75vw がそれを上回る 1520px 前後から
       実際に4:3で固定される。それより狭い幅では中身の高さが勝ち、
       画面が狭いほど縦長になる。
       下の幅まで広げるには .link-tile の上下 padding を詰める必要がある。 */
@media (min-width: 1024px) {
    .link-tile--insta {
        grid-column: auto;
        grid-row: 1 / span 2;
        /* 768〜1023pxのmin-height（vw基準）を解除し、下の.link-tileと同じ固定値に戻す。 */
        min-height: 20rem;
    }

    .link-tile {
        min-height: 20rem;
    }

    .link-tile__title {
        font-size: 1.875rem;
    }

    .link-tile__title--news {
        font-size: 1.5rem;
    }

    .link-tile__tel-num {
        font-size: 1.875rem;
    }
}

/* 1024〜1199px：モザイクになった直後の幅では左タイルが縦長になりやすいので、
   左列を少し広げて 1.5:1（Instagram：QR・お知らせの縦積み）にする。
   ※ 1200px以上は下の@mediaで 1fr 1fr（左＝50vw）に戻す。右2枚の min-height 18.75vw で
     作っている4:3の計算が「左タイル＝50vw」前提のため。
   ※ 1024px未満にはかけない。あちらはご予約が全幅で、下段の FAQ｜お知らせは
     等幅（1:1）で並べるため。 */
@media (min-width: 1024px) {
    .link-tiles {
        grid-template-columns: 1.5fr 1fr;
    }
}

@media (min-width: 1200px) {
    .link-tiles {
        grid-template-columns: 1fr 1fr;
    }
}

/* ========================================
   お知らせ・Instagram（2枚の独立した紙目カード）
   includes/sec-links.php 。全ページのフッター直前（トップは店舗案内の下）に入る。
   ※ 以前は1枚の共有カードを縦線で左右に分けていたが、それぞれ独立した紙目カード
     （.link-panel）に分け、アイコンメダリオンとワンポイントの円（.link-panel__blob、看板メニューの
     .pick-showcase__blobと同じモチーフ）を添えて、こだわり・看板メニューなど他セクションと同じ
     質感に揃えた。
   ※ 全体（.link-panels）はmax-width 1200pxで中央寄せ。
======================================== */
.sec-links.section--pad {
    position: relative;
    background-color: #302821;
    /* 下はフッターのwave（.footer::before、高4rem）がカードに重ならないよう、
       通常のセクション下余白（4rem）+wave高（4rem）で 8rem にする。
       （.sec-links-guide-wrap と同じ考え方。そちらは内で padding: 0 に上書きされるので影響なし） */
    padding-bottom: 8rem;
}

/* 上端の二重ゴールドライン。サブページで単独使用するときの目印代わり。
   ※ .sec-links-guide-wrap（トップページ）と同じ手法（0px・7pxに1pxの線を2本重ねる）。
   ※ .sec-links-guide-wrap内で使われるときは、ラッパー自身が同じ線を持つので
     二重にならないよう下の.sec-links-guide-wrap .sec-links.section--padで打ち消す。 */
.sec-links.section--pad::before {
    content: '';
    position: absolute;
    top: 0px;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--color-gold);
    pointer-events: none;
}

.sec-links.section--pad::after {
    content: '';
    position: absolute;
    top: 7px;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--color-gold);
    pointer-events: none;
}

.link-panels {
    max-width: 1200px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* 独立した紙目カード。こだわりセクション（.sec-reason--editorial）と同じ白い紙目
   テクスチャ（white-bg.webp）を敷き、影・角丸で1枚のカードとして浮かせる。
   ※ ベース（768px未満）は600px×autoのリピートタイル。
     768〜1199pxはカード全体を覆う1枚のcover背景に切り替え、
     1200px以上でリピートタイルに戻す（下の@mediaを参照）。 */
.link-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: var(--section-width-sm);
    margin-inline: auto;
    background-color: var(--color-bg);
    background-image:
        url('../images/white-bg.webp'),
        var(--img-placeholder);
    background-size: 600px auto, auto;
    background-repeat: repeat, repeat;
    background-position: center, center;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    padding: 2.5rem 2rem;
    overflow: hidden;
}

/* ゴールドの縁取り。カードの外周そのものではなく、少し内側に控えた位置に敷く
   （額装のような二重の縁の見え方にする）。 */
.link-panel::before {
    content: '';
    position: absolute;
    inset: 0.75rem;
    z-index: 1;
    border: 1px solid rgba(191, 160, 106, 0.45);
    border-radius: calc(var(--radius-xl) - 0.75rem);
    pointer-events: none;
}

@media (min-width: 768px) {
    .link-panel {
        background-size: cover, auto;
        background-repeat: no-repeat, repeat;
    }
}

@media (min-width: 1200px) {
    .link-panel {
        background-size: 600px auto, auto;
        background-repeat: repeat, repeat;
    }
}

/* 円のワンポイント装飾。看板メニュー（.pick-showcase__blob）と同じ色・考え方で、
   アイコンメダリオンの背後に少しだけ覞かせる。 */
.link-panel__blob {
    position: absolute;
    z-index: 0;
    top: -1.75rem;
    left: 50%;
    transform: translateX(-50%);
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    background-color: var(--color-accent);
    opacity: 0.55;
    pointer-events: none;
}

.link-panel__head {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1.5rem;
}

/* 見出し下のオーナメントは、お知らせ・Instagramで長さを揃える。
   ※ .section-title-wrap本来の挙動（width: fit-content、タイトル自身の実幅）をここだけ上書きし、
     長い方（“Instagram”〉9文字）を目安にした固定幅（ch（実際のフォントの文字幅）＋
     letter-spacing分のem）にし、お知らせ側も同じ幅に揃える。
   ※ font-sizeは.link-panel__titleと同じ段階（ベース1.375rem、768px以上1.5rem）にして、
     ch/emの基準サイズをタイトルの実際の表示サイズと一致させている。 */
.link-panel__head .section-title-wrap {
    width: calc(9ch + 1.3em);
    font-size: 1.375rem;
}

@media (min-width: 768px) {
    .link-panel__head .section-title-wrap {
        font-size: 1.5rem;
    }
}

/* アイコンメダリオン。.cta-card__iconと同じ考え方（縁取りの円・ホバーで塗りつぶし）。
   ※ お知らせ＝ココア、Instagram＝ゴールドで色分けし、2枚のカードを見分けやすくする。 */
.link-panel__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 1rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-primary-light);
    background-color: var(--color-white);
    color: var(--color-primary-dark);
    font-size: 1.25rem;
    transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

.link-panel--insta .link-panel__icon {
    border-color: var(--color-gold);
    color: var(--color-gold);
}

.link-panel__title {
    font-family: var(--font-heading);
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--color-title);
    text-align: center;
    white-space: nowrap;
}

.link-panel__body {
    position: relative;
    z-index: 1;
    width: 100%;
    flex: 1;
}

/* Instagram側は中身QR1つだけなので、パネルの残り高さの中で上下中央に置く
   （768px以上でお知らせ側とパネルの高さを揃えたときに、間延びして見えないように）。 */
.link-panel__body--insta {
    display: flex;
    align-items: center;
    justify-content: center;
}

.link-panel__btn {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    width: fit-content;
    margin-top: 1.5rem;
    padding: 0.75rem 1.75rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-primary-light);
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    color: var(--color-primary-dark);
    transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

.link-panel__btn-arrow {
    width: 1.25rem;
    height: 1px;
    background-color: currentColor;
    transform: scaleX(1);
    transform-origin: left center;
    transition: transform var(--transition);
}

.link-panel__btn:hover {
    background-color: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-text-white);
}

.link-panel__btn:hover .link-panel__btn-arrow {
    transform: scaleX(1.3);
}

/* お知らせ一覧（ダッシュ罫線区切り）。日付をゴールドにし、こだわりなどの
   小さな差し色（--color-gold）と揃える。 */
.news-brief {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.news-brief__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 1rem;
    padding: 0.875rem 0;
    border-bottom: 1px dashed var(--color-border);
}

.news-brief__row:first-child {
    border-top: 1px dashed var(--color-border);
}

.news-brief__date {
    flex: 0 0 auto;
    font-family: var(--font-en);
    font-size: 0.8125rem;
    font-style: italic;
    letter-spacing: 0.04em;
    color: var(--color-gold);
}

.news-brief__title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.875rem;
    letter-spacing: 0.02em;
    color: var(--color-text);
    transition: color var(--transition);
}

.news-brief__title:hover {
    color: var(--color-gold);
}

/* 768px以上：日付とタイトルを縦並びにする（ベースは横並び・flex-wrap）。 */
@media (min-width: 768px) {
    .news-brief__row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
}

.news-brief__empty {
    width: 100%;
    font-size: 0.875rem;
    line-height: 1.9;
    color: var(--color-text-light);
    padding: 1rem 0;
    border-top: 1px dashed var(--color-border);
    border-bottom: 1px dashed var(--color-border);
}

/* InstagramのQR＋案内文 */
.insta-brief__qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.875rem;
    transition: opacity var(--transition);
}

.insta-brief__qr:hover .insta-brief__qr-img {
    opacity: 0.75;
}

.insta-brief__qr-img {
    width: 11rem;
    height: 11rem;
    object-fit: contain;
    background-color: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: opacity var(--transition);
}

/* QRコード下の案内文。リード文（見出し系のフォント・color-title）と補足文（控えめのcolor-text-light）の
   2段階にして、他セクションの見出し＋本文の階層と揃えてある（.shop-brief__title＋__bodyと同じ考え方）。 */
.insta-brief__caption {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    max-width: 14rem;
}

.insta-brief__caption-lead {
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--color-title);
}

.insta-brief__caption-sub {
    font-size: 0.75rem;
    line-height: 1.6;
    letter-spacing: 0.02em;
    color: var(--color-text-light);
}

/* モバイル（縦積み時）：Instagramカードをお知らせカードより上に表示する。
   ※ DOM順（お知らせ→Instagram）は768px以上の左右並び順と共通なので変えず、
     見た目の順番だけorderで入れ替える。768px以上は下の@mediaでDOM順（order:0）に戻す。 */
.link-panel--news {
    order: 2;
}

.link-panel--insta {
    order: 1;
}

@media (min-width: 768px) {
    .link-panels {
        flex-direction: row;
        align-items: stretch;
        gap: 2.5rem;
    }

    .link-panel--news {
        order: 0;
    }

    .link-panel--insta {
        order: 0;
    }

    .link-panel {
        flex: 1 1 50%;
        max-width: none;
        margin-inline: 0;
        padding: 3rem 2.5rem;
    }

    .link-panel__title {
        font-size: 1.5rem;
    }

    .insta-brief__qr-img {
        width: 12rem;
        height: 12rem;
    }
}

@media (min-width: 1024px) {
    .link-panel {
        padding: 3.5rem 3rem;
    }

    .insta-brief__qr-img {
        width: 13rem;
        height: 13rem;
    }
}

/* ========================================
   ご予約・ご案内とガイドセクションを囲む親要素（index.php限定）
   ※ 背景色はガイドセクション（.guide-cards）と同じ濃い茶色。
   ※ 以前は子（.sec-links / .sec-guide）それぞれが自分の.section--padで
     余白を持っていたが、両方ともこのラッパー内でしか使わないため、
     余白はこのラッパー側に一元化した（子側の.section--padは0に打ち消す）。
   ※ 上下は.section--padと同じ段階（base 4rem / 768px以上5rem）。
     下はフッターのwaveの高さ（.footer::beforeのwidth 4rem）と同じ分だけ
     余白を持たせ、waveがカードに直接重ならないようにする。
   ※ 子どうし（.sec-linksカードと.guide-cards）の間の間隔はflexのgapで作る。
     以前は.sec-linksの下余白（5rem前後）がそのまま間隔になっていたので、
     同じ値をgapに引き継いでいる。
   ※ .sec-links（.link-card）自体はこだわりセクションと同じ白い紙目テクスチャ背景を
     そのまま使うので、.sec-linksセクション自体はこのラッパー内だけ透明に上書きして
     下のガイドセクションと一枚の濃い茶地につながって見えるようにする（他のページでは
     sec-links.phpを単独で使うので、この上書きは.sec-links-guide-wrapの中にスコープしてある）。
======================================== */
.sec-links-guide-wrap {
    position: relative;
    background-color: #302821;
    display: flex;
    flex-direction: column;
    gap: 4rem;
    padding: 4rem var(--gutter) 8rem;
}

/* 上端の二重ゴールドライン。border-topだと前のセクションとの境目（地の色が切り替わるまさにそのピクセル）に重なってしまい、
   線自体が埋もれて見えにくかった。
   ※ outlineは4辺すべてに出てしまい上端だけにできないので、擬似要素で2本引く。
     どちらも境目より内側（濃茶の地の中）に位置をずらし、はっきり見えるようにする。 */
.sec-links-guide-wrap::before {
    content: '';
    position: absolute;
    top: 0px;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--color-gold);
    pointer-events: none;
}

.sec-links-guide-wrap::after {
    content: '';
    position: absolute;
    top: 7px;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--color-gold);
    pointer-events: none;
}

@media (min-width: 768px) {
    .sec-links-guide-wrap {
        gap: 5rem;
        padding-top: 5rem;
    }
}

.sec-links-guide-wrap .sec-links.section--pad {
    padding: 0;
    background-color: transparent;
}

.sec-links-guide-wrap .sec-links.section--pad::before,
.sec-links-guide-wrap .sec-links.section--pad::after {
    content: none;
}

.sec-links-guide-wrap .sec-guide.section--pad {
    padding: 0;
}


/* ========================================
   フッター
======================================== */
.footer {
    /* ※ 試作：濃い茶色（ダーク系）の背景。元は var(--color-bg-light)。
       文字色・罫線はフッターCSS末尾の「フッターダーク用上書き」で調整。
       戻す場合は background-color を var(--color-bg-light) に戻し、
       「フッターダーク用上書き」ブロックを削除する。
       ※ 上辺の border-top は廃止。直上に sec-links のタイル帯が接するので、
         罫線が入ると余分な境目に見えるため。 */
    background-color: #3A322B;
    position: relative;
}

/* 境目の波形。 footer-wave.svg は濃茶色の塗り＋ゴールドの線を1枚にまとめてある。
   ※ 768px未満は専用の緩やかな波（footer-wave-sp.svg、viewBox幅750・振幅半分）を使う。
     PC用（viewBox幅1440）をスマホ幅に押し込むと横に強く圧縮されて波が急勾配になるため。 */
.footer::before {
    content: '';
    position: absolute;
    top: -4rem;
    left: 0;
    right: 0;
    height: 4rem;
    background-image: url('../images/footer-wave-sp.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
}

@media (min-width: 768px) {
    .footer::before {
        background-image: url('../images/footer-wave.svg');
    }
}

.footer__inner {
    width: 100%;
    /* コピーライト（.footer__copy）だけを包むコンテナ。以前は.footer__bodyもこの中にあったが、
       .footer__bodyは幅制限の外（.footerの直下）に移して全幅化したので、
       .footer__innerはコピーライト行だけのコンテナになった。
       最大幅はブレークポイントごとに切り替える（段階）。
         〜767px      … 576px
         768〜1023px  … 768px
         1024px以上   … 1200px
       左右余白（--gutter）を内包するので各段階も +gutter*2 している。 */
    max-width: calc(var(--section-width-sm) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

@media (min-width: 768px) {
    .footer__inner {
        max-width: calc(var(--section-width-md) + var(--gutter) * 2);
    }
}

@media (min-width: 1024px) {
    .footer__inner {
        max-width: calc(1200px + var(--gutter) * 2);
    }
}

/* 本体（ロゴ全幅＋下段：サイトマップ・店舗情報・地図）
   ※ .footerの直下（幅制限の.footer__innerの外）に置くことで、フッター自体の幅いっぱいを使う。
     左右余白（--gutter）と上余白（以前.footer__innerが持っていた分）は.footer__body自身が持つ。
   ※ 〜1023px は縦積み。DOM順は ロゴ→サイトマップ→店舗情報→地図。
     Instagramは sec-links（フッター直前の全幅モザイク）の左タイルに移設済みなので、
     ここには含まない。
     1024px以上で flex-wrap し、ロゴを全幅・下段を横並びにする。 */
.footer__body {
    /* 左右：以前.footer__innerが持っていた--gutter。
       上：元々のpadding（spacing-xl）の半分。
       下：spacing-xl（footer__copyとの間隔）。 */
    padding: calc(var(--spacing-xl) / 2) var(--gutter) var(--spacing-xl);
}

/* max-widthと中央寄せはこちらの内側要素が持つ（.footer__bodyはpaddingだけ）。
   以前は.footer__body自体にmax-width+margin-inline: autoを直接付けていたが、
   外側（padding担当）と内側（max-width担当）に分けた。 */
.footer__body-inner {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 1200px;
    margin-inline: auto;
}

.footer__logo--top {
    order: 0;
}

.footer__group {
    order: 1;
}

/* サイトマップ・店舗情報・地図を横並びにする。各列の幅は 3:3:4。
   ※ flex-basisを0にし、flex-growの比率（3:3:4）だけで幅を決める（flex: <grow> 1 0）。
   ※ 縦方向（折り返し時の行間）は2remで固定し、横方向（列間）は--gutterのままにする。 */
.footer__group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2rem var(--gutter);
}

.footer__group>.footer__col {
    min-width: 0;
}

/* ※ ベース（576px未満）：サイトマップ・店舗情報・地図をすべて縦積みにする。
   576px以上はメディアクエリの上書き（flex: 3 1 0）でサイトマップ・店舗情報を横並びにする。
   1024px以上はさらに地図も同じ行に合流する（flex: 4 1 0）。 */
.footer__col--nav {
    flex: 1 1 100%;
}

.footer__col--brand {
    flex: 1 1 100%;
}

.footer__col--map {
    flex: 1 1 100%;
}

/* 地図の高さ上限は幅に関わらず常に360px。※ .map-wrap自体はbaseでaspect-ratioで高さが決まるので（1024px未満）、
   幅が広いと360pxを超えうる。このmax-heightは幅ブレークポイントに関係なく常にかけておく。 */
.footer__col--map .map-wrap {
    max-height: 360px;
}

@media (min-width: 576px) {
    .footer__col--nav {
        flex: 3 1 0;
    }

    .footer__col--brand {
        flex: 3 1 0;
    }

    .footer__group {
        row-gap: 2.5rem;
    }
}

.footer__logo {
    display: inline-flex;
    /* リンクの当たり判定をロゴ画像の幅だけにする。
       ※ .footer__logo--top は 1024px以上で flex: 0 0 100%（一行全幅）に
         なるので、a 自体を align-self: flex-start で収缩させ、
         ロゴの右側の余白をクリック領域にしない。 */
    /* FVの.fv__top-bandと同じ、アイコンと文字ロゴを横並びにする。 */
    align-items: center;
    gap: 0.75rem;
    align-self: flex-start;
    width: fit-content;
    max-width: 100%;
    transition: opacity var(--transition);
}

.footer__logo:hover {
    opacity: 0.8;
}

.footer__logo-img {
    width: auto;
    /* FVの.fv__top-band-logoと同じ3.25remで全サイズ共通（ブレークポイントでの拡大はしない）。 */
    height: 3.25rem;
    object-fit: contain;
}

/* ゴールドの文字ロゴ（fv-gold-logo-text.png）。
   FV・ドロワーと違い、フッターでは576px未満でも非表示にせず常に表示。高さは1.75remで固定。 */
.footer__logo-text {
    width: auto;
    height: 1.75rem;
    object-fit: contain;
}

.footer__info {
    /* .footer__title（店舗情報）の直下に置くので上マージンは0。
       タイトル側の margin-bottom で間隔を取る（サイトマップと揃える）。 */
    font-size: 0.875rem;
    line-height: 2;
    color: var(--color-text);
}

.footer__info a {
    transition: color var(--transition);
}

.footer__info a:hover {
    color: var(--color-gold);
}

.footer__owner {
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    color: var(--color-text-light);
}

.footer__owner a {
    color: var(--color-primary-dark);
    text-decoration: underline;
    text-underline-offset: 0.25em;
    transition: color var(--transition);
}

.footer__owner a:hover {
    color: var(--color-gold);
}

.footer__title {
    font-family: var(--font-en);
    font-size: 0.875rem;
    letter-spacing: 0.14em;
    color: var(--color-gold);
    margin-bottom: var(--spacing-sm);
}

/* サイトナビゲーションの見出しはドロワー（.drawer__nav-ja 等）と同じ日本語見出し用フォント（var(--font-heading)）にする。 */
.footer__col--nav .footer__title {
    font-family: var(--font-heading);
}

.footer__nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 1.25rem;
}

.footer__nav-link {
    position: relative;
    /* gridセル内で幅をテキスト分にする（下線がセル幅いっぱいに
       伸びないよう左寄せで固有幅にする）。 */
    justify-self: start;
    font-family: var(--font-heading);
    font-size: 0.875rem;
    letter-spacing: 0.06em;
    color: var(--color-text);
    transition: color var(--transition);
}

/* ホバー／アクティブは下線を引く。
   下線は左から伸びてテキスト幅いっぱいになる。 */
.footer__nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -0.1875rem;
    width: 0;
    height: 1px;
    background-color: var(--color-gold);
    transition: width var(--transition);
}

.footer__nav-link:hover,
.footer__nav-link.is-active {
    color: var(--color-primary-dark);
}

.footer__nav-link:hover::after,
.footer__nav-link.is-active::after {
    width: 100%;
}

.footer__copy {
    padding: 1.25rem 0;
    border-top: 1px solid var(--color-border);
    font-family: var(--font-en);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-align: center;
    color: var(--color-text-light);
}

@media (min-width: 768px) {
    .footer__body-inner {
        gap: 2.5rem;
    }

    /* サイトマップ：768〜1023px は3カラム（1024px以上では2カラムに戻す） */
}

@media (min-width: 1024px) {

    /* ロゴを全幅・最上部にし、下段（サイトマップ｜店舗情報）を横並びにする。 */
    .footer__body-inner {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: var(--spacing-lg) var(--spacing-xxl);
    }

    /* ロゴ：単独で一行占有（全幅）。flex: 0 0 100%で行を占有しつつも、
       max-width: fit-contentで実際にレンダリングされる幅をロゴ＋ロゴテキストの実幅まで縮める
       （flex-basisはwrapの改行判定に使われる仮のサイズなので、行は引き続き一人占めのまま。
         最終サイズのみ max-width でクリップされるので、リンク自体のクリック可能領域が
         ロゴ以外の余白には広がらなくなる）。 */
    .footer__logo--top {
        flex: 0 0 100%;
        max-width: fit-content;
        order: 0;
    }

    /* 下段：サイトマップ・店舗情報・地図の3列なので、単一はfooter__groupが全幅を占める。 */
    .footer__group {
        flex: 0 0 100%;
        order: 1;
    }

    /* 1024px以上は地図もサイトマップ・店舗情報と同じ行に戻す（3:3:4）。 */
    .footer__col--map {
        flex: 4 1 0;
        max-height: 360px;
    }

    /* .footer__groupはデフォルトのalign-items:stretchで各列の高さを揃えるが、
       .map-wrapは元々aspect-ratioで自分の幅から高さを決めているため、
       揃った高さより低くなり下に余白が空いてしまう。ここだけaspect-ratioを外し、
       親（.footer__col--map、ストレッチで高さが決まっている）いっぱいに高さを取らせる。 */
    .footer__col--map .map-wrap {
        height: 100%;
        aspect-ratio: auto;
    }
}

/* ―― フッターダーク用上書き（試作）――
   濃い茶背景（.footer）に合わせて文字・罫線を明るくする。
   ※ 各元定義より後ろに置く（同詳細度で後勝ち）。
   ※ Instagramカード（.footer__insta 白背景）の中は元のまま。
   戻す場合はこのブロックごと削除し、.footer の背景を戻す。 */
.footer__info {
    color: #E8E0D4;
}

.footer__info a:hover {
    color: var(--color-gold);
}

.footer__owner {
    color: #C9BEAE;
}

.footer__owner a {
    color: #E8E0D4;
}

.footer__owner a:hover {
    color: var(--color-gold);
}

.footer__nav-link {
    color: #E8E0D4;
}

.footer__nav-link:hover,
.footer__nav-link.is-active {
    color: #FFFFFF;
}

.footer__copy {
    color: #C9BEAE;
    border-top-color: rgba(255, 255, 255, 0.18);
}

/* ========================================
   下部固定バー（〜767px）
   ※ iOS Chrome対策：bottomを下げた分ちょうどheightを足して
     背景だけ下へ伸ばし、浮いた隙間を見せない
======================================== */
.fixed-bar {
    position: fixed;
    left: 0;
    bottom: calc(-1 * var(--fixed-bar-bleed));
    z-index: 1050;
    display: none;
    width: 100%;
    height: calc(var(--fixed-bar-height) + var(--fixed-bar-bleed));
    background-color: var(--color-white);
    border-top: 1px solid var(--color-border-light);
    /* 上辺の左右角だけ丸める（下は画面外にはみ出しているので上の2角のみ）。
       overflow:hidden は子の:active背景が角の外に覚えないようにするため。
       自身の box-shadow は外側に出るので切れない。 */
    border-top-left-radius: var(--radius-md);
    border-top-right-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 -2px 12px rgba(74, 68, 62, 0.06);
}

.fixed-bar__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1875rem;
    /* はみ出させた分をpaddingで埋める（アイコンとテキストは上側の中央に来る） */
    padding-bottom: var(--fixed-bar-bleed);
    color: var(--color-text);
    transition: background-color var(--transition), color var(--transition);
}

.fixed-bar__item:not(:last-child) {
    border-right: 1px solid var(--color-border-light);
}

.fixed-bar__item i {
    font-size: 1.0625rem;
    color: var(--color-primary);
    transition: color var(--transition);
}

.fixed-bar__label {
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    line-height: 1.2;
}

.fixed-bar__item:active {
    background-color: var(--color-bg-light);
}

@media (min-width: 768px) {
    .fixed-bar {
        display: none;
    }
}

/* ========================================
   制作中プレースホルダー
   ※ wip_gate() はページヒーローより前に置くため、
     このセクションがページ最上部に来る。
     固定ヘッダーに潜らないよう上部にヘッダー高さ分の余白を取る。
======================================== */
.sec-wip {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: calc(var(--header-height) + var(--spacing-xxl)) var(--gutter) var(--spacing-xxl);
    text-align: center;
    background-color: var(--color-bg-light);
}

.sec-wip__inner {
    max-width: var(--section-width-sm);
    margin-inline: auto;
}

.sec-wip__icon {
    font-size: 2.5rem;
    color: var(--color-primary-light);
}

.sec-wip__label {
    margin-top: var(--spacing-sm);
    font-family: var(--font-en);
    font-size: 0.9375rem;
    font-style: italic;
    letter-spacing: 0.16em;
    color: var(--color-gold);
}

.sec-wip__text {
    margin-top: 0.25rem;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--color-title);
}

.sec-wip__deco {
    display: block;
    width: 3.5rem;
    height: 1px;
    margin: var(--spacing-sm) auto 0;
    background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
}

.sec-wip__sub {
    margin-top: var(--spacing-sm);
    font-size: 0.875rem;
    color: var(--color-text-light);
}

.sec-wip__btn {
    margin-top: var(--spacing-md);
}

@media (min-width: 768px) {
    .sec-wip {
        min-height: 65vh;
        padding-top: calc(var(--header-height) + var(--spacing-3xl));
        padding-bottom: var(--spacing-3xl);
    }

    .sec-wip__icon {
        font-size: 3rem;
    }

    .sec-wip__text {
        font-size: 1.5rem;
    }
}

/* ========================================
   スクロールリビール
======================================== */
.js-reveal {
    opacity: 0;
    transform: translateY(1.5rem);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--reveal-delay, 0s);
}

.js-reveal.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* 画像用：ふわっと拡大しながら表示 */
.js-reveal--zoom {
    transform: translateY(1.5rem) scale(1.02);
}

.js-reveal--zoom.is-revealed {
    transform: translateY(0) scale(1);
}

/* 検知用ラッパー（clip-pathは内側の要素に当てる） */
.js-wipe {
    /* IntersectionObserverの監視対象。clip-pathは絶対に当てない */
}

.js-wipe__target {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.1s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--reveal-delay, 0s);
}

.js-wipe.is-revealed .js-wipe__target {
    clip-path: inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {

    .js-reveal,
    .js-wipe__target {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
        transition: none !important;
    }

    .page-hero__bg {
        animation: none;
    }

    html {
        scroll-behavior: auto;
    }
}

/* ========================================
   下層ページ共通パーツ
======================================== */

/* リード文 */
.lead-text {
    max-width: var(--section-width-narrow);
    margin-inline: auto;
    margin-bottom: var(--spacing-xl);
    text-align: center;
    font-size: 0.9375rem;
}

@media (min-width: 768px) {
    .lead-text {
        font-size: 1rem;
    }
}

/* 定義リスト（会社概要・店舗情報・募集要項） */
.def-list {
    border-top: 1px solid var(--color-border);
}

.def-row {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1.125rem 0.25rem;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.9375rem;
}

.def-row dt {
    font-family: var(--font-heading);
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--color-primary-dark);
}

.def-row dd {
    color: var(--color-text);
}

.def-row a {
    text-decoration: underline;
    text-underline-offset: 0.25em;
    transition: color var(--transition);
}

.def-row a:hover {
    color: var(--color-gold);
}

.def-row__note {
    display: block;
    margin-top: 0.375rem;
    font-size: 0.8125rem;
    color: var(--color-text-light);
}

@media (min-width: 576px) {
    .def-row {
        flex-direction: row;
        gap: 2rem;
        padding: 1.375rem 0.5rem;
    }

    .def-row dt {
        flex: 0 0 9rem;
    }

    .def-row dd {
        flex: 1;
    }
}

/* 注意書きボックス */
.note-box {
    padding: var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-white);
    font-size: 0.875rem;
    color: var(--color-text-light);
}

.note-box__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--color-title);
}

.note-box__title i {
    font-size: 0.875rem;
    color: var(--color-gold);
}

/* 地図埋め込み */
.map-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.map-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (min-width: 768px) {
    .map-wrap {
        aspect-ratio: 16 / 9;
    }
}

/* ページ内小見出し */
.block-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: var(--spacing-sm);
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--color-title);
}

.block-title::before {
    content: '';
    width: 1.5rem;
    height: 1px;
    background-color: var(--color-gold);
}

/* セクション下部のボタン領域（index以外でも使う） */
.sec-foot {
    display: flex;
    justify-content: center;
    margin-top: var(--spacing-xl);
}

/* セクション下部のボタンはフェードインさせない。
   ※ マークアップの js-reveal は各ファイルに残してあるが、
     ここで初期状態を打ち消しているので演出は走らない。
   ※ .js-reveal.is-revealed と同じ詳細度なので、必ずそれより
     後ろ（この位置）に置く。 */
.sec-foot.js-reveal {
    opacity: 1;
    transform: none;
    transition: none;
}

/* ========================================
   画像プレースホルダー（素材待ち）
   ※ animation.js が読み込みに失敗した <img> を
     <span class="img-ph"> に入れ替える。
   ※ 親に aspect-ratio がある（figure 等）場合は width/height 100% で
     その枠をそのまま埋める。親の高さが auto のときは
     min-height で潰れないようにしている。
   ※ 本番公開後も残しておいてよい（画像が揃っていれば発動しない）。
======================================== */
.img-ph {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    height: 100%;
    min-height: 6rem;
    padding: 1rem;
    background-color: var(--color-bg-light);
    border: 1px dashed var(--color-border);
    text-align: center;
}

.img-ph__icon {
    font-size: 1.5rem;
    line-height: 1;
    color: var(--color-primary-light);
}

.img-ph__text {
    font-size: 0.75rem;
    line-height: 1.6;
    letter-spacing: 0.04em;
    color: var(--color-text-light);
}

@media (min-width: 768px) {
    .img-ph__icon {
        font-size: 1.875rem;
    }

    .img-ph__text {
        font-size: 0.8125rem;
    }
}

/* ========================================
   375px未満：position:fixed 要素の補正（ファイル末尾）

   html に transform:scale がかかると、fixed要素の
   inset:0 や 100dvh は「実際のビューポート」の値のままなので、
   縮小した分だけ右端・下端に隔間ができる。
     幅 → 375px（レイアウト幅）に合わせる
     高さ → 縮小分を上回る 150dvh で塗り切る

   ※ 各要素の本体定義より後に置く必要がある（上書きのため）。
   ※ r-doboku / sato-jusetsukougyo でも同じ補正を入れている。
======================================== */
@media (max-width: 374px) {

    /* ドロワー（フルスクリーン）
       inset:0 だと右下に地が届かないので実寸で指定し直す。 */
    .drawer {
        inset: 0 auto auto 0;
        width: 375px;
        height: 150dvh;
    }

    /* 背景は150dvhで塗り切るが、中身の上下中央寄せは
       実表示領域（100dvh）基準にする（下へのずれ防止）。 */
    .drawer__inner {
        min-height: 100dvh;
    }

    /* ナビは2カラムのまま。375px幅で組むので文字を小さくする必要はない。 */

    /* ヘッダーのピル・下部固定バー：
       幅100%だと縮小後に右端が余るのでレイアウト幅に合わせる。 */
    .header,
    .fixed-bar {
        width: 375px;
    }

    /* .page-heroの下端の「欠け」（.page-hero::after）も同じ理由で補正が必要。
       100vwの部分だけを固定値375pxに差し替える（htmlの固定幅と揃える）。 */
    .page-hero::after {
        clip-path: ellipse(375px 18.5rem at 50% 18.5rem);
    }

    /* .page-hero--valleyも同様の補正。 */
    .page-hero--valley {
        clip-path: ellipse(375px 18.5rem at 50% calc(100% - 18.5rem - 0.28rem));
    }

    /* 谷型の地の濃茶・ゴールド線も同様の補正。 */
    .page-hero-wrap::before {
        clip-path: ellipse(375px 18.5rem at 50% calc(100% - 18.5rem));
    }

    .page-hero-wrap::after {
        clip-path: ellipse(375px 18.5rem at 50% calc(100% - 18.5rem - 0.2rem));
    }

    /* .page-hero--split（モバイル：写真上端の弧）も同様の補正。 */
    .page-hero--split::before {
        clip-path: ellipse(375px calc(18.5rem + 0.3rem) at 50% calc(18.5rem + 0.3rem));
    }

    .page-hero--split .page-hero__bg-ring {
        clip-path: ellipse(375px 12.78rem at 50% 12.78rem);
    }

    .page-hero--split .page-hero__bg-gap {
        clip-path: ellipse(375px 12.7rem at 50% 12.7rem);
    }

    .page-hero--split .page-hero__bg {
        clip-path: ellipse(375px 12.5rem at 50% 12.5rem);
    }

    /* メニューページの追従タブは sticky なので補正不要 */
}