@charset "UTF-8";
/* ========================================
   Lien café STAYGOLD - index.css
   トップページ専用スタイル

   【方針】
   主役は商品写真。カード（白い角丸ボックス＋影）の連続を避け、
   写真とテキストを直接ページ背景に置く構成にしている。
   箱で囲うのは「お知らせ」など情報の性質上まとまりが要る所だけ。
======================================== */

/* ========================================
   FV（ファーストビュー）
   ※ 全画面にしない。--fv-height（JSが初回1回だけ設定するinnerHeight）に
     係数をかけて、下のコンセプトが少し覗く高さに抑える。
     100svh を直接使うとiOS Safariでガタつくため、変数経由のままにしている。
   ※ 768px以上ではこの方針を変え、FV＋旬のご案内で画面1枚に収める。
     下の @media (min-width: 768px) を参照。
======================================== */
.fv {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: calc(var(--fv-height, 100svh) * 0.92);
    min-height: 38rem;  /* 極小端末での潰れ防止 */
    max-height: 54rem;  /* 縦長端末で伸びすぎないよう上限 */
    overflow: hidden;
    background-color: var(--color-bg-light);
}

/* 576px以上：576px未満より幅に余裕ができるので、高さは元の比率に戻す。 */
@media (min-width: 576px) {
    .fv {
        height: calc(var(--fv-height, 100svh) * 0.85);
        min-height: 34rem;
        max-height: 52rem;
    }
}

/* 768px以上：SPと同じく画面いっぱいにはしない（主役は商品なので下をすぐ見せる）。
   ※ 以前は「FV＋旬のご案内で画面1枚に収める」設計で、height から帯の高さ
     （--topics-height）を引いていたが廃止した。帯の中身を自由に組めるようにするため。
   ※ 係数 0.78 は、旧設計（画面高 − 帯13rem）とほぼ同じ高さになる値。
     FVの見た目を変えずに、帯への依存だけを外している。
   ※ min-height はロゴ・キャッチが潰れない下限。
   ※ max-height はテンプレートの段階指定（768:900px / 1024:1080px）に
     同じ係数をかけた値。 */
@media (min-width: 768px) {
    .fv {
        height: calc(var(--fv-height, 100svh) * 0.775);
        min-height: 23rem;
        max-height: 47rem;
    }
}

@media (min-width: 1024px) {
    .fv {
        height: calc(var(--fv-height, 100svh) * 0.825);
        max-height: 63rem;
    }
}

@media (min-width: 1200px) {
    .fv {
        height: calc(var(--fv-height, 100svh) * 0.875);
        max-height: 85rem;
    }
}

@media (min-width: 1440px) {
    .fv {
        height: calc(var(--fv-height, 100svh) * 0.925);
        max-height: 93rem;
    }
}

/* 背景スライド */
.fv__bg {
    position: absolute;
    inset: 0;
}

/* 写真レイヤー一式（ゴールドの縁・隙間マスク・写真本体）をまとめるラップ。
   ※ デフォルト（768px以上・左右分割）はposition: absolute; inset: 0で.fv全体を覆うだけの器にし、
     中の.fv__bg-ring・.fv__bg-gap・.fv__bgは今までどおりこのラップ（＝.fvと同じ範囲）
     を基準に位置決めする。挙動は以前（.fvへ直接position: absoluteしていたとき）と完全に同じ。
   ※ 768px未満だけ、下の@media (max-width: 767.98px)でposition: relative; flex: 1に切り替え、
     テキスト（.fv__inner）の直後に実フローで並べる（詳細はそちらのコメント参照）。 */
.fv__photo {
    position: absolute;
    inset: 0;
}

/* ゴールドの縁（楕円clip-pathの弧でのみ使う）。基本は非表示。
   ※ デスクトップ側（border-radiusの円弧クリップ）では使わない。768px未満（楕円clip-pathの
     弧）でのみ index.css下方の @media (max-width: 767.98px) ブロック内で位置・形を与えて
     表示させる。 */
.fv__bg-ring {
    display: none;
}

/* ゴールドラインと写真の間の隙間を作るマスク（地の茶色で塗る）。.fv__bg-ringと同じ理由で基本は非表示。 */
.fv__bg-gap {
    display: none;
}

.fv__bg-slide {
    position: absolute;
    inset: 0;
    background-color: var(--color-bg-light);
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.6s ease;
}

.fv__bg-slide--active {
    opacity: 1;
}

/* ⚠️ fv-01・fv-03は引き続き暂定でshop-outside.webpを使い回している。fv-02は今回初めて別の素材（crepe02.webp）に
   差し替え済み。残り（fv-03など）の素材が届いたら --03 の行も差し替える。 */
.fv__bg-slide--01 { background-image: url('../images/fv-crepe.webp'); }
.fv__bg-slide--02 { background-image: url('../images/shop-outside.webp'); }
.fv__bg-slide--03 { background-image: url('../images/fv-tapioka.webp'); }

/* sp / md / pc の3サイズ出し分けは素材が揃ってから戻す。
   （現状これを有効にすると、768px以上で未設置ファイルを指して
     背景が空になるのでコメントアウトしている）

@media (min-width: 768px) {
    .fv__bg-slide--01 { background-image: url('../images/md-fv-image01.webp'); }
    .fv__bg-slide--02 { background-image: url('../images/md-fv-image02.webp'); }
    .fv__bg-slide--03 { background-image: url('../images/md-fv-image03.webp'); }
}

@media (min-width: 1280px) {
    .fv__bg-slide--01 { background-image: url('../images/pc-fv-image01.webp'); }
    .fv__bg-slide--02 { background-image: url('../images/pc-fv-image02.webp'); }
    .fv__bg-slide--03 { background-image: url('../images/pc-fv-image03.webp'); }
}
*/

/* ベール（淡いアイボリーで柔らかく） */
.fv__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
                rgba(252, 250, 246, 0.52) 0%,
                rgba(252, 250, 246, 0.18) 45%,
                rgba(252, 250, 246, 0.70) 100%);
}

/* 一番上の帯。ヘッダー（.header）はposition: fixed・透明でFVの上に重なるので、
   その背後に必ず地の色（#302821）が来るよう、高さをvar(--header-height)に揁えた帯を
   最上部に敷く。
   ※ 768px以上でvar(--header-height)参照にしていたが、768px以上のルール（var参照）を
     768px未満にも適用するよう指示を受け、全幅でvar(--header-height)一本に統一した。
     （var(--header-height)はベース4rem、768pxで4.5rem、1024pxで5remと常に実際の
       ヘッダー高さと一致する）。
   DOM順で.fv__bg-ring・.fv__bg-gap・.fv__bg・.fv__veilより後ろに
   置いているので（z-index未指定同士はDOM順で積み重なる）、それらより上に重なる。
   ※ 下辺にゴールドの線を引き、帯と写真/コンテンツ部分の境目を明確にする。 */
/* 帯の高さを単一の変数で一元管理する。
   ※ .fv__top-bandの高さと、.header（ハンバーガー・SNSアイコン）の高さの両方がこの
     1値だけを参照する。ここを変えれば帯の見た目とハンバーガーの中央位置が
     常に連動して一致する（.header__innerがdisplay: flex; align-items: center;
     height: 100%なので、.header自体の高さが変われば中央位置も自動で追従する）。
   ※ トップページ限定（index.cssにしかない変数）なので、他ページの
     --header-height（drawer・page-heroなどの余白計算）には影響しない。
   ※ ベース・768〜1023pxはvar(--header-height)をそのまま使い、1024px以上だけ6remにする。 */
:root {
    --fv-top-band-height: var(--header-height);
}

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

/* トップページのみ：.header（ハンバーガー・SNSアイコン）の高さを
   .fv__top-bandと同じ--fv-top-band-heightに揃える。common.cssの
   .header（height: var(--header-height)）よりもこちらが後設定で勝つ。 */
.page-index .header {
    height: var(--fv-top-band-height);
}

/* ドロワー（モバイルメニュー）の上部帯も同様に揃える。
   ※ common.cssの.drawer__top-band（height: var(--header-height)）は
     トップページ以外では実際のヘッダー高さと一致するが、トップページだけは
     ヘッダー自体が--fv-top-band-height（1024px以上で6rem）になるため、
     ここで上書きしてゴールドの線の高さを画面サイズごとに一致させる。 */
.page-index .drawer__top-band {
    height: var(--fv-top-band-height);
}

.fv__top-band {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--fv-top-band-height);
    display: flex;
    align-items: center;
    padding-inline: 0.875rem;
    background-color: #302821;
    border-bottom: 2px solid rgba(191, 160, 106, 0.8);
    pointer-events: none;
}

/* ロゴ・テキストロゴを包むリンク。.fv__top-band自体はpointer-events: noneなので、
   クリック可能にするこのリンクにはautoを付け直す。gapは以前の.fv__top-bandのものをこちらに移した。 */
.fv__top-band-logo-link {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    transition: opacity var(--transition);
}

.fv__top-band-logo-link:hover {
    opacity: 0.8;
}

/* ゴールドのテキストロゴ（fv-gold-logo-text.png）。576px未満では非表示、
   576px以上でロゴ（.fv__top-band-logo）の右に並べて表示する。 */
.fv__top-band-logo-text {
    display: none;
}

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

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

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

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

/* 帯の左にSTAYGOLDのロゴを配置。帯の高さ（var(--header-height)）に対して
   少し余白を持たせた高さにし、上下中央（align-items: center）にする。 */
.fv__top-band-logo {
    height: 3.25rem;
    width: auto;
    object-fit: contain;
}

/* コピー */
.fv__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: calc(var(--section-width-lg) + var(--gutter) * 2);
    padding-inline: var(--gutter);
    text-align: center;
}

/* ロゴ（ヘッダーには置かず、ここで大きく見せる） */
.fv__logo {
    display: flex;
    justify-content: center;
    opacity: 0;
    transform: translateY(0.75rem);
    transition: opacity 1.1s ease 0.1s, transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}

.fv__logo img {
    width: auto;
    height: 4.5rem;
    max-width: 78vw;
    object-fit: contain;
}

.fv.is-ready .fv__logo {
    opacity: 1;
    transform: translateY(0);
}

.fv__catch {
    /* 下のキャッチ画像（.fv__catch-img）の幅に自動で合わせるため、幅をfit-contentにして
       子の実際の幅に揃える。自体をコンテナ化（container-type: inline-size）することで、
       中の.fv__catch-captionはcqi単位でこの幅（=画像の幅）に常に連動して
       フォントサイズが決まる（.topics__titleの幅連動と同じ考え方）。
       ※ ベース（非 cocoa）はmargin-inline: autoで中央寄せ。
         .fv--cocoaでは左寄せにしたいので、下の.fv--cocoa .fv__catchで上書きする。 */
    width: clamp(12rem, 65vw, 18rem);
    margin-inline: auto;
    container-type: inline-size;
    /* 登場アニメーション。画像（.fv__catch-img）とキャッチコピー（.fv__catch-caption）を
       個別にアニメーションさせず、親要素（.fv__catch）ごとフェードインさせることで
       常に1つのグループとして一致して動く。タイミングは.fv__logoと同一（1.1s ease 0.1s）にし、
       ロゴ（復活時）とキャッチが同じタイミングで現れ、その後に.fv__lead（0.9s遅延）が
       続くという段階的な登場になる。 */
    opacity: 0;
    transform: translateY(0.75rem);
    transition: opacity 1.1s ease 0.1s, transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}

.fv.is-ready .fv__catch {
    opacity: 1;
    transform: translateY(0);
}

/* .fv__catchと.fv__leadの間の区切り線。他セクションの.section-ornament-frameと同じ画像（ornament.svg）を
   使い、.fv__catch（ゴールド・明朝体）と.fv__lead（ゴシック体・控えめなサイズ）の間を
   視覚的に切り離す。
   ※ 元画像（ornament.svg）は横に長い罵線なので、幅だけ指定してaspect-ratioで
     高さを決める（.section-ornament-frameと同じ考え方）。
   ※ ベース（非 cocoa）はmargin-inline: autoで中央寢せ。.fv__catchと同じ理由で
     .fv--cocoaでは下の.fv--cocoa .fv__ornamentで左寢せに上書きする。 */
.fv__ornament {
    display: block;
    width: clamp(12rem, 65vw, 18rem);
    aspect-ratio: 20 / 1;
    margin-top: 1rem;
    margin-inline: auto;
    opacity: 0.85;
}

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

/* キャッチコピーの画像ロゴ（以前は「しあわせを、つなぐひとくち。」のテキスト）。
   ※ 幅はclampで画面幅に応じて伸縮させ、height: autoで比率を保つ。 */
.fv__catch-img {
    display: block;
    width: clamp(12rem, 65vw, 18rem);
    height: auto;
}

/* キャッチコピーの画像ロゴの下に添えるテキスト版（同じ文言）。
   ※ 他箇所（.pick-showcase__title・.shop-brief__titleなど）と同じHina Minchoを使う。
   ※ font-sizeはcqi（親コンテナ.fv__catchの幅の1%）で指定している。
     「しあわせを、つなぐひとくち。」（全角支確支確14文字）+ letter-spacing 0.14emを含めた
     概算全体幅が約 15.9emになるので、100cqi ÷ 15.9 ≈ 6.29を目安に、
     若干余裕を持たせた6.25cqiにしている（コンテナ=.fv__catchの幅=上の画像の幅）。 */
.fv__catch-caption {
    margin-top: 0.5rem;
    font-family: 'Hina Mincho', var(--font-heading);
    font-size: 6.25cqi;
    font-weight: 400;
    letter-spacing: 0.14em;
    color: var(--color-title);
    white-space: nowrap;
}

.fv__lead {
    margin-top: 0.875rem;
    font-size: 0.8125rem;
    letter-spacing: 0.1em;
    color: var(--color-text);
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity 1s ease 0.9s, transform 1s ease 0.9s;
}

.fv.is-ready .fv__lead {
    opacity: 1;
    transform: translateY(0);
}

@media (min-width: 768px) {
    .fv__logo img {
        height: 7rem;
        max-width: 60vw;
    }
    .fv__lead {
        font-size: 0.9375rem;
    }
}

@media (min-width: 1024px) {
    .fv__logo img {
        height: 8.5rem;
    }
}

/* 1200px以上：キャッチ下のリード文を折り返さない（横に広い画面では1行で収まる想定）。
   ※ マークアップ内の<br>は明示的な改行なので、white-space: nowrapだけでは効かない。
     この幅では<br>自体を非表示にして1行にする。 */
@media (min-width: 1200px) {
    .fv__lead {
        white-space: nowrap;
    }
    .fv__lead br {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fv__logo,
    .fv__catch,
    .fv__lead { opacity: 1; transform: none; }
}

/* ========================================
   旬のご案内（FV直下）
   ※ バナー画像は作らない。写真＋テキストを直に置く。
   ※ 写真を横に並べて高さを抑えている。FVとイチオシ商品の間に
     入るので、縦に積むと主役の商品が遠のくため。
   ※ .section を付けず、他のセクションより余白を小さくしている。
======================================== */
/* ※ 帯の高さ固定（--topics-height）は廃止した。FVの高さがこの値を
     引く設計をやめたので、ここは中身なりの高さでよい。
   ※ 上下の余白は持たない。FVの直下に接して置くため。
   ※ セクション自体は幅制限を持たない（地の色を画面端まで出すため）。
     1440px の頭打ちは .topics__link 側で行う。 */
.sec-topics {
    padding: 0;
    /* ※ 右邉60%（写真エリア）は透明にしてFVのブリードした写真（.fv__bg）が透けるようにする。
       一方で左邉40%（FVのテキスト側）はFVの写真（left:40%から右だけ）が届かないので、
       完全に透明にするとページの地色（白系）が見えてしまう。そのため、左邉40%だけはFVと同じ濃い
       茶色（#302821）をハードエッジで塗り、右邉60%は透明のままにするグラデーションを使う。
       境界（40%）はFV自体の左右分割の境界（left:40%）と揃えてある。 */
    background: linear-gradient(to right, #302821 0%, #302821 40%, transparent 40%, transparent 100%);
    /* セクション下部の区切り線。次の看板メニューとの境目を明確にする。 */
    border-bottom: 0.3rem solid #302821;
}

/* ※ タイル同士の間に0.15remの間際をあける（576px以上は0.3rem、下の@media参照）。 */
.topics {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.15rem;
}

@media (min-width: 576px) {
    .topics {
        gap: 0.3rem;
    }
}

/* 左：季節限定（薄い黄）／右：Instagram（濃い茶）。
   ※ 上下左右の余白は .topics__link が持つ（タイルは地の色だけ）。
   ※ 濃い茶はフッター・sec-links のFAQタイルと同じ #3A322B。変数がないので実値。
   ※ 薄い青（--color-bg-blue）はトップでは使わない。 */
.topics__link {
    /* <a>要素は初期値がdisplay: inlineで、aspect-ratioは非置換のinline要素には効かない。
       中身（.topics__title・.topics__btn）は両方position: absoluteでフロー外なので、
       displayを明示しないとタイルの高さがほぼ0に潰れて見えなくなる。block化して解決。 */
    display: block;
    position: relative;
    overflow: hidden;
    /* アスペクト比は.sec-topics--cocoa-ribbonで定義する--topics-aspectを参照（1440px以上の
       切り替えもそちらで一元管理している）。リボン以外（万一の未定義時）のフォールバックは16/9。 */
    aspect-ratio: var(--topics-aspect, 16 / 9);
    background-size: cover;
    background-position: center;
    color: var(--color-text-white);
    /* タイル自体をコンテナにし、中の.topics__titleのfont-sizeをタイルの幅（cqi）に
       連動させる。これでブレークポイントごとの固定値ではなく、親要素（タイル）の
       実際の大きさに応じてなめらかに変化する（.fv--cocoaのcqhと同じ考え方）。 */
    container-type: inline-size;
}

.topics__item--seasonal .topics__link {
    background-image: url('../images/reservation-topics.webp');
}

.topics__item--instagram .topics__link {
    background-image: url('../images/dippin-dots.webp');
}

.topics__link::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(53, 48, 43, 0.1) 0%, rgba(53, 48, 43, 0.4) 100%);
    transition: opacity var(--transition);
    pointer-events: none;
}

.topics__link:hover::after {
    opacity: 0.8;
}

/* 見出し＋オーナメントをまとめるラッパー。.section-title-wrapと同じ考え方で、
   width: fit-contentにより中のh2（white-space: nowrap）の実際のテキスト幅に
   ラッパー自体の幅が一致する。このラッパーをタイル真中心にposition: absoluteで
   固定することで、以前タイトル単体に付けていた中央固定を維持しつつ、
   直下のオーナメント（幅100%）がテキストと同じ長さで揃うようにしている。 */
.topics__title-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: fit-content;
}

.topics__title {
    text-align: center;
    white-space: nowrap;
    font-family: var(--font-heading);
    /* %やcqiの計算式ではなく、.link-tile__title（sec-links）と同じ普通の固定値で指定する。
       576px以上・768px以上の拡大は下の@mediaで行う。 */
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--color-text-white);
}

/* 見出しの直下に添えるオーナメント（FVの.fv__ornamentと同じ画像・考え方）。
   width: 100%で親（.topics__title-wrap、幅=見出しテキストの実際の幅）に揃えることで、
   「予約商品はこちら」「最新情報はこちら」どちらのタイルでも見出しと同じ長さになる
   （.section-title-wrap + .section-ornament-frameと同じ手法）。
   ※ 画像（ornament.svg）はゴールド色のまま使う。不透明度は他のオーナメント
     （.fv__ornament や0.85、.section-ornament-frameや0.85）より高めの1にし、写真背景の
     上でも目立つようにしている。 */
.topics__ornament {
    display: none;
    width: 100%;
    aspect-ratio: 20 / 1;
    margin-top: 0.5rem;
    opacity: 1;
}

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

/* 見出しの直下に付く小さな丸ボタン。見出し（.topics__title）は常にタイル真中心に固定されているので、
   このボタンは同じようにposition: absoluteで中心から少し下の位置に独自に配置する。
   ※ スタイルは.cat-band__arrow（メニュー一覧セクション）と同じ作りに統一。以前の「＞」テキスト文字を
     直接表示する方式ではなく、空の円形枚（border）に::afterの回転borderトリックで「＞」形の矢印を作る。
     HTML側も中身の＞文字を削除して空のspanに合わせてある。 */
.topics__btn {
    position: absolute;
    top: calc(50% + 1.25rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: var(--radius-full);
    transition: border-color var(--transition);
}

.topics__btn::after {
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    /* .cat-band__arrow::afterと同じ考え方。回転45degした正方形の重心を
       矢印の先端（右側の頂点）に迪らせ、見た目上中央に見せる。 */
    margin-left: -0.15rem;
    border-top: 1.5px solid var(--color-text-white);
    border-right: 1.5px solid var(--color-text-white);
    transform: rotate(45deg);
    transition: border-color var(--transition);
}

.topics__link:hover .topics__btn {
    border-color: var(--color-white);
}





@media (min-width: 576px) {
    .topics__title {
        font-size: 1.375rem;
    }
}

/* 768〜1023px：1カラム（縦積み）のまま。写真は右寄せを維持する。
   ※ 帯の高さ固定（height: var(--topics-height)）は廃止。中身なりに伸びてよい。
   ※ .topics__titleのfont-sizeは親の幅（cqi）連動にしたので、ここでの上書きは不要になった。 */
@media (min-width: 768px) {
    .topics__title {
        font-size: 1.625rem;
    }
    .topics__ornament {
        margin-top: 0.625rem;
    }
    .topics__btn {
        top: calc(50% + 2rem);
        width: 2.25rem;
        height: 2.25rem;
    }
}

/* ========================================
   セクション下部の導線
======================================== */
.sec-foot {
    display: flex;
    justify-content: center;
    margin-top: var(--spacing-xl);
}

/* ========================================
   こだわり：導入部（旧コンセプト）
   ※ セクション背景は --color-bg-accent。
     小さい方の写真の縁取りは背景と同色に合わせる。
======================================== */
.reason-intro {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.reason-intro__title {
    font-family: 'Hina Mincho', var(--font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.7;
    letter-spacing: 0.1em;
    color: var(--color-title);
    white-space: nowrap;
}

.reason-intro__body {
    margin-top: 2rem;
    font-size: 0.9375rem;
}

/* 詳細ページへの導線はテキストの直下・右寄せに置く（.sec-foot の中央寄せは使わない）。
   ※ こだわり（.reason-intro__text）・看板メニュー（.pick-showcase__text）・店舗案内（.shop__text）で共通。
   ※ .link-arrow は inline-flex なのでそのままだと左端に付く。
     block化し、width: fit-content ＋ margin-left: auto で右へ寄せている。
     幅を fit-content にするのは、当たり判定を文字＋矢印の幅に留めるため。 */
.reason-intro__text .link-arrow,
.pick-showcase__text .link-arrow,
.shop__frame-body .link-arrow {
    display: flex;
    width: fit-content;
    margin-left: auto;
}

.reason-intro__text .link-arrow,
.pick-showcase__text .link-arrow,
.shop__frame-body .link-arrow {
    margin-top: var(--spacing-md);
}

/* ※ 親の padding-bottom / padding-left は、重ねた写真のはみ出し分。
     ここを大きくするほどサブ写真が外側に逃げ、重なりが減る。
   ※ サブ写真は左下に重ねる。店舗案内（.shop__images）は右下なので、
     1024px以上で並んだときに左右対称になる。 */
.reason-intro__images {
    position: relative;
    padding-bottom: 5rem;
    padding-left: 4rem;
}

/* 写真は対角（左上＋右下）だけを丸め、残り2角は直角のままにする。
   ※ 縁取りはメイン・サブとも 4px。色は #9C8B79。
     --color-primary（#7A6250）と --color-primary-light（#B2A392）の中間の茶で、
     額装として見える濃さにしている。
     ※ トークン化していないのはこの2セクション専用の値だから。
       茶系のパレットを変えるときはここも一緒に直す。
   ※ 店舗案内（.shop__img）も同じ形・同じ太さ・同じ色にしてある。 */
.reason-intro__img {
    overflow: hidden;
    border: 4px solid #9C8B79;
    border-radius: var(--radius-lg) 0 var(--radius-lg) 0;
}

.reason-intro__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 初期状態（未表示）。他の写真ギャラリー（.pick-showcase__img / .cat-band__img）と
       同じフォーカスイン演出に揃える（以前はjs-reveal--zoomのtranslateYスライド＋拡大
       だったが、ページ内の他の写真と動き方が違いちぐはぐだった）。
       ※ transformの遅延はopacityと共用しない。理由は.pick-showcase__img imgのコメント参照。 */
    opacity: 0;
    transform: scale(1.08);
    transition: opacity 1s ease var(--reveal-delay, 0s),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.reason-intro__img.is-revealed img {
    opacity: 1;
    transform: scale(1);
}

.reason-intro__img--main {
    aspect-ratio: 4 / 3;
}

/* ※ 幅 40% は店舗案内（.shop__img--sub）と揃えてある。
   ※ 縁取りは .reason-intro__img 側でメインと共通に持たせている。 */
.reason-intro__img--sub {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40%;
    aspect-ratio: 1 / 1;
}

/* 正方形の枠に 4:3 の素材を入れるので左右が切れる。
   左寄せにして、切れるのは右側だけにする。 */
.reason-intro__img--sub img {
    object-position: left center;
}

@media (min-width: 768px) {
    .reason-intro__title {
        font-size: 1.875rem;
    }
    .reason-intro__body {
        font-size: 1rem;
    }
    .reason-intro {
        flex-direction: row;
        align-items: center;
        gap: var(--spacing-xxl);
    }
    .reason-intro__text {
        flex: 1 1 50%;
    }
    .reason-intro__images {
        flex: 1 1 50%;
    }
}

@media (min-width: 1024px) {
    .reason-intro__title {
        font-size: 2.125rem;
    }
    .reason-intro__text {
        flex: 1 1 42%;
    }
    .reason-intro__images {
        flex: 1 1 58%;
    }
}

/* 以前は下の店舗案内セクション（.sec-shop::before）のドーム装飾に合わせ、ここで下余白を増やしていたが、
   店舗案内をシンプルな構成に変えてドームを廃止したため、この上書きは不要になった。
   .section--padの標準値（base 4rem / 768px以上 5rem）に戻す。 */

/* ========================================
   セクションタイトル下のオーナメント（ornament.png）
   ※ .section-title-wrap / .section-ornament-frame / .section-ornament /
     .section-ornament-frame--on-dark は、includes/page-hero.php が全ページ共通で
     使うクラスのため common.css に移動した（旧定義はここにあった）。
     このファイル内の .sec-pick__title-wrap 等の個別上書きはそのまま以下に残す。 */

/* ========================================
   おすすめ（旧イチオシ商品）
   2026-08 デザイン刷新：写真の下に文字を重ねる方式をやめ、写真＋文字を
   交互に並べる構成に変更。写真の背後には円形のワンポイント（blob）を
   添える（店舗案内セクション .sec-shop::before と同じモチーフ）。
   ※ 詳細は recommend.php に集約してあるので、トップは2品だけ。
======================================== */

/* 全幅（.inner--full）だが、写真が大きくなりすぎないようこのセクションだけ
   最大幅を設けて頭打ちにし、中央寄せにする。
   ※ 上限は .section--pad > .inner と同じ段階切り替え。
     〜767px … 576px／768〜1023px … 768px／1024px以上 … 1440px。
   ※ .section--pad へ移行済み。左右余白はセクションが持つので、
     max-width は素の値（+gutter*2 なし）にする。
     （見出しも同じ幅に揃うよう .inner--full ごと絞っている） */
.sec-pick .inner--full {
    max-width: var(--section-width-sm);
    margin-inline: auto;
}

@media (min-width: 768px) {
    .sec-pick .inner--full {
        max-width: none;
    }
}

@media (min-width: 1024px) {
    .sec-pick .inner--full {
        max-width: var(--section-width-xl);
    }
}

/* アイテム同士の間隔。モバイルは縦積み、テキスト→写真の順で並ぶ（マークアップ順のまま）。 */
.pick-showcase {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.pick-showcase__item {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.pick-showcase__text .sec-head {
    margin-bottom: 1.25rem;
}

.pick-showcase__name {
    position: relative;
    z-index: 1;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--color-primary);
}

.pick-showcase__lead {
    margin-top: 0.625rem;
    font-size: 0.9375rem;
    line-height: 1.9;
    color: var(--color-text);
}

/* 看板メニューの「詳しく見る」は共通ルール（.reason-intro__text ・ .shop__frame-body と同じブロック）で
   右寄せにしているので、ここではmargin-topの重複指定は不要。 */

/* 看板メニューの見出し。以前の .sec-head__label（Recommend）と同じゴールドを使う。
   ※ フォントはHina Mincho（includes/header.phpで読み込み済み。通常ウェイト400のみの提供なので400に）。
     このタイトルだけの使用で、他の見出し（var(--font-heading)=Zen Old Mincho）は従来通り。 */
.pick-showcase__title {
    font-family: 'Hina Mincho', var(--font-heading);
    font-size: 1.25rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    color: var(--color-gold);
    white-space: nowrap;
}

.pick-showcase__title-wrap {
    margin-bottom: 1.25rem;
}

/* 写真・円のマトリックス。円は背後に回り込むので overflow は持たせない。 */
.pick-showcase__media {
    position: relative;
}

/* 円の装飾。写真の縁から一部だけはみ出すように、写真よりも少し大きくしてオフセットする。
   ※ 色は --color-accent（ダスティピンク）。地の --color-bg-pink より一段濃い。
   ※ 位置は両アイテムとも写真の左下で統一。
   ※ 以前はwidthは%だが位置（left/bottom）がrem固定だったため、看板メニューの
     各ブレークポイント（縦積み・2カラム・ベントグリッド）で写真サイズが大きく変わっても
     オフセットの比率が一定のままでバランスが崩れていた。位置も%にして、写真（.pick-showcase__media）
     の実サイズに常に追従するようにする。大きさも少し抱える（62% → 45%）。 */
.pick-showcase__blob {
    position: absolute;
    z-index: 0;
    left: -9%;
    bottom: -10%;
    width: 45%;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: var(--color-accent);
}

.pick-showcase__img {
    position: relative;
    z-index: 1;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    /* イチョウ型。左上を特に強く丸め、他の3角は控えめの丸みを持たせて
       扇状・葉っぱのシルエットにする。
       ※ 左上はremでは箱の大きさに対して丸みが相対的に小さくなるので、パーセント指定にし
         箱のサイズに追従させる。他の3角は --radius-lg で控えめに。
       ※ フレーム自体に地色を持たせる。地色がないと写真（img）が透明の間は
         フレームの形自体が見えず、写真がフェードインする際にフレームごと現れたように
         見えてしまう。地色を持たせてフレームの形は常に見える状態にし、
         写真の方だけがその上でフェードインするようにする（.cat-band__link など他の
         セクションでも同じ取りをしている）。 */
    background-color: var(--color-bg-light);
    border-radius: 65% var(--radius-lg) var(--radius-lg) var(--radius-lg);
}

.pick-showcase__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 初期状態（未表示）。.cat-band__imgと同じフォーカスイン演出（少し拡大＋透明から
       定位置・不透明へ収束）。
       ※ 監視対象は .pick-showcase__media 自体（js-wipe）。アイテムラッパー（.pick-showcase__item）は
         1024px以上で display: contents になり描画ボックスを持たないためIntersectionObserverが
         交差を検知できず、is-revealedが付与されない（→写真が永遠に透明のままになるバグがあった）。
         監視対象を常に実体のある .pick-showcase__media にすることで回避している。
       ※ transformの遅延はopacityと共用しない。両方に--reveal-delayを付けると、
         ホバー時の拡大（transform）まで遅れてラグのように感じられるため。
         スタガーはopacityだけにし、transformは常に即応でホバーに反応するようにする。 */
    opacity: 0;
    transform: scale(1.08);
    transition: opacity 1s ease var(--reveal-delay, 0s),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.pick-showcase__media.is-revealed .pick-showcase__img img {
    opacity: 1;
    transform: scale(1);
}

/* ディッピンドッツアイスの写真は、左端を基準（0%）にフォーカスする（左端は切らず、右側だけが欠ける）。 */
.pick-showcase__item--01 .pick-showcase__img img {
    object-position: 0% center;
}

/* 季節のクレープの写真も中心よりやや左（25%）にフォーカス。 */
.pick-showcase__item--02 .pick-showcase__img img {
    object-position: 25% center;
}

.pick-showcase__item:hover .pick-showcase__img img {
    transform: scale(1.05);
}

/* 1024px未満（縦積み・2カラムとも）：両アイテムとも画像を上、テキストを下にする。
   ※ item--01はDOM順（テキスト→写真）のままだとテキストが上に来るので、
     写真（.pick-showcase__media）にorder: -1を付けて先頭に引き上げる。
   ※ item--02はDOM順（写真→テキスト）がすでに「写真が先」なので、
     以前のテキストorder:-1は外して自然の順番（写真→テキスト）に戻す。
   ※ 1024px以上は .pick-showcase__item がdisplay: contentsになり、
     grid-rowで明示配置されるのでこのorderは影響しない。 */
.pick-showcase__item--01 .pick-showcase__media {
    order: -1;
}

@media (min-width: 768px) {
    .pick-showcase__title {
        font-size: 1.5rem;
    }
    .pick-showcase__name {
        font-size: 1.5rem;
    }
    .pick-showcase__lead {
        font-size: 1rem;
    }
}

/* 576〜1023px：2品を左右のシンプルな2カラムに並べる（1024px以上のベントグリッドへの中間段階）。〜575pxはベースの縦積み（.pick-showcaseの基本値：display:flex; flex-direction:column）のまま。
   ※ .pick-showcase__itemはdisplay: contentsにしない。各アイテムはこれまで通り
     テキスト+写真の縦積み（flex-direction: column）のまま、カラムの中に収まるだけ。
   ※ item--02の text/orderは上の無条件ルール（.pick-showcase__item--01 .pick-showcase__media { order: -1; }）で既に
     適用済みなので、ここでは別途指定不要（テキストが写真の上に来るまま）。
   ※ 画像が画面幅いっぱいに引き伸ばされて間延びするのを防ぐのが目的。 */
@media (min-width: 576px) {
    .pick-showcase {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 2rem;
        row-gap: 0;
        align-items: start;
    }
}

/* セクション見出し（.sec-pick__title）。普段は非表示。
   1024px未満（モバイル・タブレットとも）のときだけ、.pick-showcase__item--01内のタイトルを側に退避して
   代わりにこちらをセクション先頭の見出しとして見せる（画像よりも上に来る）。
   （1024px以上はこの見出しを使わず、従来通りベントグリッド内のアイテムタイトルを使う）。 */
.sec-pick__title {
    font-family: 'Hina Mincho', var(--font-heading);
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-align: left;
    color: var(--color-gold);
    white-space: nowrap;
}

.sec-pick__title-wrap {
    display: block;
    margin-bottom: 2rem;
}

.pick-showcase__item--01 .pick-showcase__title-wrap {
    display: none;
}

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

@media (min-width: 1024px) {
    .sec-pick__title-wrap {
        display: none;
    }
    .pick-showcase__item--01 .pick-showcase__title-wrap {
        display: block;
    }
}

/* 1024px以上：3カラムのベントグリッドにし、2品を横並びにする。
   　テキスト（列１・両行分）　画像1（列２・両行分）　画像2（列３・1行目）
   　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　テキスト（列３・2行目）
   ※ .pick-showcase__item（アイテムラッパー）を display: contents にし、
     中の text / media を直接グリッドに配置する。
   ※ タイトル（.pick-showcase__title）はこの幅でだけ表示される（1024px未満は
     .sec-pick__titleを使う）。こだわりセクションと同じフォントサイズ（3rem）に揃える。 */
@media (min-width: 1024px) {
    .pick-showcase {
        display: grid;
        /* テキスト列は1.2fr。以前は0.8frだったが、3remの「看板メニュー」タイトルが
           1024pxブレークポイント直後（列が最も狭くなる幅）で折り返さずに収まる幅を
           確保するために広げている。画像1・画像2の比率（1.3:0.9）はそのまま。 */
        grid-template-columns: 1.2fr 1.3fr 0.9fr;
        grid-template-rows: auto auto;
        column-gap: 2.5rem;
        row-gap: 1.5rem;
        align-items: start;
    }
    .pick-showcase__item {
        display: contents;
    }
    .pick-showcase__title {
        font-size: 3rem;
    }
    .pick-showcase__item--01 .pick-showcase__text {
        grid-column: 1;
        grid-row: 1 / 3;
        align-self: start;
    }
    .pick-showcase__item--01 .pick-showcase__media {
        grid-column: 2;
        grid-row: 1 / 3;
    }
    /* 画像1（大）は縦長のポートレート、画像2（小）は正方形に近い比率にして
       大小のメリハリをつける（列幅の比率と合わせて画像1を目立たせる）。 */
    .pick-showcase__item--01 .pick-showcase__img {
        aspect-ratio: 3 / 3.5;
    }
    .pick-showcase__item--02 .pick-showcase__media {
        grid-column: 3;
        grid-row: 1;
    }
    .pick-showcase__item--02 .pick-showcase__text {
        grid-column: 3;
        grid-row: 2;
        align-self: start;
    }
}

/* 1200px以上：幅に余裕が出るので列間の隙間（column-gap）を広げる。 */
@media (min-width: 1200px) {
    .pick-showcase {
        column-gap: 5rem;
    }
}

/* ========================================
   メニュー（画面幅いっぱいの写真帯）
   ※ .sec-menu 自体は .section を付けず、帯を全幅に出すため
     見出し・ボタンだけ .inner で内側に寄せている。
======================================== */
.sec-menu {
    padding: 0;
}

.cat-band {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 隙間なし。写真同士を接して1本の帯に見せる */
    gap: 0;
}

.cat-band__link {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background-color: var(--color-bg-light);
}

.cat-band__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 初期状態（未表示）。少し拡大して透明にしておき、
       ピントを結ぶように定位置・不透明へ収束させる（下の .is-revealed 参照）。
       ※ タイル本体（影・テキスト・アイコン・矢印）は一切動かさないので、
         フェード中にページ背景が透ける心配はない（透けても地の --color-bg-light が見えるだけ）。
       ※ transformの遅延はopacityと共用しない。両方に--reveal-delayを付けると、
         ホバー時の拡大（transform）まで遅れてラグのように感じられるため。
         スタガーはopacityだけにし、transformは常に即応でホバーに反応するようにする。 */
    opacity: 0;
    transform: scale(1.08);
    transition: opacity 1s ease var(--reveal-delay, 0s),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.cat-band__item.is-revealed .cat-band__img {
    opacity: 1;
    transform: scale(1);
}

.cat-band__link:hover .cat-band__img {
    transform: scale(1.06);
}

/* 文字を載せるための影。上半分は素の写真を見せる。
   ※ ホバーでは影を薄くして写真を明るく見せる（理由は .pick-duo__link 参照）。 */
.cat-band__link::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(53, 48, 43, 0) 45%, rgba(53, 48, 43, 0.44) 100%);
    transition: opacity var(--transition);
    pointer-events: none;
}

.cat-band__link:hover::after {
    opacity: 0.72;
}

.cat-band__label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1.25rem;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    padding-inline: 0.5rem;
    text-align: center;
    color: var(--color-text-white);
}

/* カテゴリのアイコン枚。現在は空（円のだけ）。後日この中に <img> を入れる予定なので、
   overflow: hidden で円にクリップするようにしておく。
   ※ 地は #FCFAF6（ページ地色と同じアイボリー。--color-bg を参照）。
   ※ .cat-band__labelの中のテキストの上下顓には属さず、カード（.cat-band__link）自体の上下左右中央に
     絶対配置する。
   ※ 幅はrem固定ではなくカード幅に対するパーセントにし、aspect-ratio: 1 で高さを幅に揃える。
     これでカードの実サイズ（2カラム/4カラム・画面幅）に応じて円の大きさが自動でスケールする。 */
.cat-band__icon {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 25%;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-full);
    background-color: var(--color-bg);
}

.cat-band__icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cat-band__en {
    font-family: var(--font-en);
    font-size: 0.75rem;
    font-style: italic;
    letter-spacing: 0.14em;
    opacity: 0.85;
}

/* 右矢印（円形の枠線付き）。テキストの流れから外し、カード右下に固定配置する（.guide-card__arrowと同じ作り）。
   ※ .cat-band__link は position: relative 済みなので、その基準で右下に絶対配置する。
   ※ 以前は線（::before）+矢尻（::after）の組み合わせだったが、flexで隣接させても
     繋がって見えない（連続していない）との指摘を受け、線を廃止して矢尻（::after）だけの
     シンプルな「＞」形にした。円は引き続きflexコンテナで中央揃え。
   ※ ホバーでは円の地を白に埋め、矢印を濃茶に反転させる。 */
.cat-band__arrow {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: var(--radius-full);
    transition: background-color var(--transition), border-color var(--transition);
}

.cat-band__arrow::after {
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    /* 本体の中心から見てやや左に寄せる（45deg回転した正方形の
       重心を矢印の先端（右側の頂点）に迫らせ、見た目上中央に見せる）。 */
    margin-left: -0.15rem;
    border-top: 1.5px solid var(--color-text-white);
    border-right: 1.5px solid var(--color-text-white);
    transform: rotate(45deg);
    transition: border-color var(--transition);
}

.cat-band__link:hover .cat-band__arrow {
    border-color: var(--color-white);
}

.cat-band__ja {
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0.1em;
}

/* 768px以上で4カラムに切り替える（767px以下は2カラムのまま維持） */
@media (min-width: 768px) {
    .cat-band {
        grid-template-columns: repeat(4, 1fr);
    }
    .cat-band__link {
        aspect-ratio: 3 / 4.2;
    }
    .cat-band__label {
        bottom: 1.75rem;
    }
    .cat-band__ja {
        font-size: 1.0625rem;
    }
    .cat-band__arrow {
        bottom: 0.75rem;
        width: 2.25rem;
        height: 2.25rem;
    }
}

/* ========================================
   店舗案内
   ※ こだわりセクション（.reason-intro）と対になるデザイン。画像デュオ（写真2枚の重なり）＋テキストの
     構成をそのまま流用しつつ、こだわり（画像が右・テキストが左）に対して左右を反転させている
     （画像が左・テキストが右）。
   ※ 地の色は濃めのココア茶色（--color-primary）。こだわり（明るいクリーム地）と明暗も
     反転させることで、2セクションが対になっているのが伝わるようにしている。
======================================== */
.shop-brief {
    position: relative;
    z-index: 0;
    background-color: var(--color-primary);
}

/* クラフト紙風のテクスチャ（brown-bg.webp）を敷く。::beforeに切り出してopacityを下げ、地の色（--color-primary）が透けて見えるようにしている（background-image自体にopacityはかけられないため）。
   ※ z-index: -1で実コンテンツ（.shop-brief__duo等、位置指定なし）より確実に背面に回す（位置指定のない通常要素は、位置指定された::before（z-index: auto）より先に描画されるスタッキング規則のため、z-indexなしだとテキストが透けて見える問題があった）。
     親（.shop-brief）自体にz-index: 0を付けてスタッキングコンテキストを作り、負のz-indexがページ全体に漏れないようにしている。
   ※ ベース（768px未満）は600px×autoのリピートタイル。
     768〜1199pxはセクション全体を覆う1枚のcover背景に切り替え、
     1200px以上でリピートタイルに戻す（下の@mediaを参照）。
   ※ 2層目の--img-placeholder（斜めストライプ）は他の素材待ち箇所と同じ作りのダミー。
     brown-bg.webpが上に不透明に覆うので普段は完全に隠れるが、万一未配置の
     ときはストライプが見えて未配置と分かる。 */
.shop-brief::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        url('../images/brown-bg.webp'),
        var(--img-placeholder);
    background-size: 600px auto, auto;
    background-repeat: repeat, repeat;
    background-position: center, center;
    opacity: 0.85;
    pointer-events: none;
}

/* 画像デュオ（.shop-brief__images）＋テキスト（.shop-brief__text）の外側ラッパー。
   ※ DOM順は画像→テキスト（こだわりはテキスト→画像なので、ここが反転のポイント）。
   ※ 〜767pxは縦積み（画像が上・テキストが下）。768px以上で横並びにする
     （.reason-introと同じブレークポイントに揃えた）。 */
.shop-brief__duo {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

/* 画像デュオ本体。こだわり（.reason-intro__images）と同じ重ね方だが、サブ写真の位置・
   角丸の丸め方を左右反転させている。 */
.shop-brief__images {
    position: relative;
}

.shop-brief__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 初期状態（未表示）。.reason-intro__img imgと同じ理由で、他の写真ギャラリー
       （.pick-showcase__img / .cat-band__img）と同じフォーカスイン演出に揃えている。 */
    opacity: 0;
    transform: scale(1.08);
    transition: opacity 1s ease var(--reveal-delay, 0s),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.shop-brief__img.is-revealed img {
    opacity: 1;
    transform: scale(1);
}

.shop-brief__img--main {
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: 2rem 2rem 0 0;
}

/* 768px以上：横長の16:9に切り替え。角丸も少し大きくする。 */
@media (min-width: 768px) {
    .shop-brief__img--main {
        aspect-ratio: 16 / 9;
        border-radius: 3rem 3rem 0 0;
    }
}

/* サブ写真（店内）。メインの左下に重ねる（こだわりは右下なので反転）。 */
.shop-brief__img--sub {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 28%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    /* 右上・左下を左上・右下（どちらも 15%）に揁え、四角とも 15% に統一。 */
    border-radius: 15%;
    transform: translate(-18%, 28%);
}

.shop-brief__img--sub img {
    object-position: right center;
}

/* コンテンツ（タイトル＋テキスト）をまとめる親要素。画像列（.shop-brief__images）と
   並ぶもう一方の列になる。中の.shop-brief__title-wrapと.shop-brief__textを縦に並べる。
   ※ position: relativeは中の.shop-brief__deco（position: absolute）の基準にするため。 */
.shop-brief__content {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* テキスト（見出し・営業時間・住所・詳しく見るリンク）。 */
.shop-brief__text {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* イラスト装飾。.sec-reason--editorial .reason-intro__deco と同じ考え方
   （テキストブロックの右上に小さくワンポイント）。
   ※ 濃いココア地なので、こだわり側（クリーム地）より少し不透明度を上げて視認性を確保している。
   ※ pointer-events: noneでクリックを遮らないようにする。 */
.shop-brief__deco {
    position: absolute;
    top: -1rem;
    right: 0;
    z-index: 0;
    width: 7rem;
    height: auto;
    opacity: 0.9;
    pointer-events: none;
}

@media (min-width: 768px) {
    .shop-brief__deco {
        top: -1.5rem;
        right: -1rem;
        width: 9rem;
    }
}

.shop-brief__title {
    /* Hina Mincho（.pick-showcase__titleや.sec-pick__titleと同じフォント）に変更。
       ※ Hina Minchoは通常ウェイト400のみの提供なので、他のHina Mincho使用箇所と同じく
         font-weightも400に合わせてある（以前の500のままだとブラウザが存在しないウェイトを
         指定することになり、フォントによっては合成太字やフォントフォールバックの
         既定ウェイトに強制的に変わる可能性がある）。 */
    font-family: 'Hina Mincho', var(--font-heading);
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: 0.14em;
    color: var(--color-text-white);
    white-space: nowrap;
}

/* タイトルラッパー自体。以前は.shop-brief__textの中にあり、flexのgapで下の要素との間隔を
   確保していたが、.inner直下に独立させたので、代わりにmargin-bottomで.shop-brief__duoとの
   間隔を確保する。.sec-pick__title-wrap（margin-bottom: 2rem）と同系統の値。 */
.shop-brief__title-wrap {
    margin-bottom: 2rem;
}

/* 店舗概要テキスト。こだわり（.reason-intro__body）と対になる位置・役割だが、地が濃いココア茶色なので
   文字色は白の透過（.shop-brief__rowと同じ考え方）にしている。 */
.shop-brief__body {
    font-size: 0.9375rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.9);
}

.shop-brief__info {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* 営業時間・住所の各行。アイコン（時計・ピン）＋文字のシンプルな並び。
   ※ 暗いココア地なので、文字は白の透過、アイコンはゴールドにする。 */
.shop-brief__row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
}

/* 時計・位置ピンともに白にする。 */
.shop-brief__row i {
    flex: 0 0 auto;
    width: 1.25rem;
    font-size: 1rem;
    color: var(--color-text-white);
    text-align: center;
}

/* 詳細ページへのリンク。白地の塗りつぶしピルボタンではなく、白の編取りのみのアウトラインスタイルにしている。
   ※ 編取りの透過度は.topics__arrow・.cat-band__arrowと同じrgba(255, 255, 255, 0.7)に揃えてある。
   ※ ホバーでは塗りつぶし（白地・濃い茶色文字）に反転させて、クリック可能なことを伝える。
   ※ .reason-intro__text .link-arrow 等と同じ考え方でmargin-left: autoを使い、親（.shop-brief__text、
     display: flex; flex-direction: column;）の中で右寄せにしている。 */
.shop-brief__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: fit-content;
    margin-top: 0.5rem;
    margin-left: auto;
    padding: 0.625rem 1.25rem;
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 255, 255, 0.7);
    background-color: transparent;
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    color: var(--color-text-white);
    transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

.shop-brief__more:hover {
    background-color: var(--color-white);
    border-color: var(--color-white);
    color: var(--color-primary-dark);
}

/* 矢印部分は「→」文字ではなく、他箇所（.link-arrow・.link-tile__more）と同じ
   横棒が伸びる演出に統一。gap・widthは動かさず、transform: scaleXだけで
   見た目を伸ばす（理由は.link-arrow参照）。 */
.shop-brief__more-arrow {
    width: 1.75rem;
    height: 1px;
    background-color: currentColor;
    transform: scaleX(1);
    transform-origin: left center;
    transition: transform var(--transition);
}

.shop-brief__more:hover .shop-brief__more-arrow {
    transform: scaleX(1.3);
}

/* Instagram誘導。以前フッターにあったものと同じ横並び（テキスト＋QR）カードのまま、
   画像デュオの下に独立ブロックとして置く。
   ※ .footer__insta自体のスタイル（内部の横並びレイアウト含め）はcommon.cssの定義をそのまま使う。 */
.shop-brief__insta {
    margin-top: var(--spacing-xxl);
}

@media (min-width: 768px) {
    .shop-brief__title {
        font-size: 2.5rem;
    }
    .shop-brief__body {
        font-size: 1rem;
    }
    .shop-brief__row {
        font-size: 1.125rem;
    }
    .shop-brief__duo {
        flex-direction: row;
        align-items: center;
        gap: var(--spacing-xxl);
    }
    .shop-brief__images {
        flex: 1 1 50%;
    }
    .shop-brief__content {
        flex: 1 1 50%;
    }
}

/* 1024px以上：画像デュオとテキストの比率をこだわり（画像58%・テキスト42%）と揃える
   （768〜1023pxは上の@mediaで50%/50%）。 */
@media (min-width: 1024px) {
    .shop-brief__images {
        flex: 1 1 58%;
    }
    .shop-brief__content {
        flex: 1 1 42%;
    }
}

/* 768〜1199px：brown-bg.webpをセクション全体を覆う1枚のcover背景にする
   （768px未満・1200px以上はベースの600px×autoリピートタイルのまま）。 */
@media (min-width: 768px) {
    .shop-brief::before {
        background-size: cover, auto;
        background-repeat: no-repeat, repeat;
    }
}

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

/* 768〜1023px：こだわり・店舗案内は.section--pad > .innerのmax-width制限
   （768px以上は--section-width-md=720px）を外し、画像デュオが窒屈にならないよう
   全幅に近づける（1024px以上は通常どおり--section-width-xlの上限に戻る）。
   ※ セクション自体の左右パディングは--gutter（768〜1023pxは2.5rem）を
     そのまま使うので、ここでの個別上書きは不要。 */
@media (min-width: 768px) {
    .sec-reason--editorial.section--pad > .inner,
    .shop-brief.section--pad > .inner,
    .sec-faq.section--pad > .inner {
        max-width: none;
    }
    .reason-intro,
    .shop-brief__duo {
        gap: var(--spacing-lg);
    }
}

@media (min-width: 1024px) {
    .sec-reason--editorial.section--pad > .inner,
    .shop-brief.section--pad > .inner,
    .sec-faq.section--pad > .inner {
        max-width: var(--section-width-xl);
    }
}

/* ========================================
   よくあるご質問（トップは3件のみ）
   ※ 店舗案内と同じ背景色なので、罫線だけで区切る。
     箱・影・角丸は使わない（.guide-links / .def-list と同じ作り）。
   ※ アコーディオンにはしていない。3件だけなので開いたままでも
     高さが出ないし、JSを増やす理由がない。
======================================== */
.faq-brief {
}

.faq-brief__row {
    padding: 1rem 0.25rem;
    border-bottom: 1px solid rgba(191, 160, 106, 0.3);
}

.faq-brief__row:first-child {
    padding-top: 0;
}

.faq-brief__row:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.faq-brief__q {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.7;
    letter-spacing: 0.06em;
    color: var(--color-primary);
}

.faq-brief__a {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.9;
    color: var(--color-title);
}

/* Q / A は丸バッジにせず英字だけ。箱を増やしたくないため */
.faq-brief__badge {
    flex: 0 0 1.5rem;
    font-family: var(--font-en);
    font-size: 1.5rem;
    line-height: 1.4;
    color: var(--color-gold);
}

.faq-brief__badge--a {
    color: #C79AA0;
}

@media (min-width: 768px) {
    .faq-brief__row {
        padding: 1rem 0.5rem;
    }
    .faq-brief__q {
        font-size: 1.125rem;
    }
    .faq-brief__a {
        font-size: 0.9375rem;
    }
    .faq-brief__badge {
        flex-basis: 1.875rem;
        font-size: 1.875rem;
    }
}

@media (min-width: 1024px) {
    .faq-brief__row {
        padding-top: var(--spacing-sm);
        padding-bottom: var(--spacing-sm);
    }
}

/* 背景テクスチャ（beige-bg.webp）を敷く。.shop-brief（brown-bg.webp）と同じように::beforeに切り出してopacityを下げ、
   地の色（--color-bg-light、section--light経由）が透けて見えるようにしている。
   ※ ベース（768px未満）は600px×autoのリピートタイル。
     768〜1199pxはセクション全体を覆う1枚のcover背景に切り替え、
     1200px以上でリピートタイルに戻す（下の@mediaを参照）。
   ※ 2層目の--img-placeholderは素材未配置のときだけ見えるダミー（他の素材待ち箇所と同じ作り）。 */
.sec-faq {
    position: relative;
    z-index: 0;
}

.sec-faq::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        url('../images/beige-bg.webp'),
        var(--img-placeholder);
    background-size: 600px auto, auto;
    background-repeat: repeat, repeat;
    background-position: center, center;
    opacity: 0.85;
    pointer-events: none;
}

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

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

/* 1024px以上：.section--pad > .inner の既定（--section-width-xl=1440px）より
   狭めたいセクション専用の上書き。 */
@media (min-width: 1024px) {
    .sec-faq.section--pad > .inner {
        max-width: 1200px;
    }
}

/* 見出し列（.sec-faq__head）。日本語タイトル・肉球アイコン・リード文・イラストを
   縦に並べ、常に左寄せにする（768px以上で.sec-faq__listと横並びになっても
   この列自体の中身は常に左寄せのまま）。
   ※ 768px未満は中央揃えにする（下の@media (min-width: 768px)で左寄せに上書き）。 */
.sec-faq__head {
    text-align: center;
}

.sec-faq__list {
    margin-top: 2rem;
}

/* 見出し。店舗案内（.shop-brief__title）と同じHina Minchoパターン。
   ※ Hina Minchoは通常ウェイト400のみの提供なので、他のHina Mincho使用箇所と同じく
     font-weightも400に合わせてある。
   ※ タイトル下の装飾は店舗案内と同じ.section-ornament-frame（ornament.svg）を使う。
     広さは.section-title-wrap（width: fit-content）でタイトルテキストの実際の幅に自動で揃う。 */
.sec-faq__title {
    font-family: 'Hina Mincho', var(--font-heading);
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: 0.14em;
    color: var(--color-primary);
    white-space: nowrap;
}

/* .section-title-wrapはdisplay指定なし（ブロック）+ width: fit-contentなので、
   768px未満は中央寄せ（margin-inline: auto）にし、768px以上は左寄せ（下の@mediaで上書き）にする。 */
.sec-faq__title-wrap {
    margin-inline: auto;
}

.sec-faq__lead {
    margin-top: 2rem;
    font-size: 0.9375rem;
    line-height: 1.9;
    color: var(--color-title);
}

.sec-faq__illust {
    display: block;
    width: 8rem;
    height: auto;
    margin: 1.5rem auto 0;
    opacity: 0.9;
}

/* 768px未満：見出しの両脇にイラストを配置する行。 */
.sec-faq__title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

/* 両脇の小さなイラスト。768px未満だけ表示し、768px以上では下のイラスト（.sec-faq__illust--bottom）に切り替わる。
   ※ 右側は左右反転（transform: scaleX(-1)）して対称に見せる。
   ※ 576px未満は幅2.5rem、576px以上は3remに広げる（下の@media参照）。 */
.sec-faq__illust--side {
    width: 2.5rem;
    margin: 0;
    flex: 0 0 auto;
}

@media (min-width: 576px) {
    .sec-faq__illust--side {
        width: 3rem;
    }
}

.sec-faq__illust--right {
    transform: scaleX(-1);
}

.sec-faq__illust--bottom {
    display: none;
}

@media (min-width: 768px) {
    .sec-faq__head {
        text-align: left;
    }
    .sec-faq__list {
        margin-top: 0;
    }
    .sec-faq__title-wrap {
        margin-inline: 0;
    }
    .sec-faq__title-row {
        justify-content: flex-start;
    }
    .sec-faq__illust--side {
        display: none;
    }
    .sec-faq__illust--bottom {
        display: block;
    }
    .sec-faq__title {
        font-size: 2.5rem;
    }
    .sec-faq__lead {
        font-size: 1rem;
    }
    .sec-faq__illust {
        width: 7rem;
    }
}


/* 「すべての質問を見る」ボタン。リストの下に中央揃えで置くピル形のアウトラインボタン。 */
.sec-faq__btn {
    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);
}

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

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

.sec-faq__btn:hover .sec-faq__btn-arrow {
    transform: scaleX(1.3);
}

/* ブレークポイントごとに表示先を切り替える（.sec-faq__illust--side/--bottomと同じ作り）。
   　※ 768px未満：一覧の下（.sec-faq__list側、.sec-foot--list）に表示。
   　※ 768px以上：見出し列（.sec-faq__head側、.sec-foot--head）に表示。 */
.sec-foot--head {
    display: none;
}

.sec-foot--list {
    justify-content: center;
}

@media (min-width: 768px) {
    .sec-foot--head {
        display: flex;
        justify-content: center;
        margin-top: var(--spacing-lg);
    }
    .sec-foot--list {
        display: none;
    }
}

/* 768px以上：見出し列（.sec-faq__head）と質問リスト列（.sec-faq__list）を横並びにする。
   見出しは幅を固定せず比率（1：2）で分割し、リスト側に多めに幅を持たせる
   （Q&Aの本文のほうが長いため）。見出し側はtopをリスト側の1行目（Q）と
   揃える（align-items: flex-start）。 */
@media (min-width: 768px) {
    .sec-faq__body {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 3rem;
    }
    .sec-faq__head {
        flex: 1 1 0;
        /* min-widthを指定しない（既定値のautoのまま）。flexアイテムの既定のmin-width: autoは、
           中身の最小コンテンツ幅（=white-space: nowrapのタイトルの実幅）を下回らないよう
           自動で確保する。これにより、狭い幅（768px付近など）でも「よくあるご質問」のタイトルが
           隣の.sec-faq__listにはみ出すことなく、常にタイトル幅を確保した比率になる。 */
    }
    .sec-faq__list {
        flex: 2 1 0;
        min-width: 0;
    }
}

/* ========================================
   お知らせ
======================================== */
.news-list #newsList {
    border-top: 1px solid var(--color-border);
}

.news-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.875rem;
    padding: 1.125rem 0.25rem;
    border-bottom: 1px solid var(--color-border);
    transition: background-color var(--transition);
}

.news-item:hover {
    background-color: rgba(255, 255, 255, 0.6);
}

.news-item__date {
    font-family: var(--font-en);
    font-size: 0.9375rem;
    letter-spacing: 0.06em;
    color: var(--color-text-light);
}

.news-item__cat {
    padding: 0.1875rem 0.75rem;
    border: 1px solid var(--color-primary-light);
    border-radius: var(--radius-full);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    color: var(--color-primary-dark);
}

.news-item__title {
    flex: 1 1 100%;
    font-size: 0.9375rem;
    color: var(--color-text);
}

.news-item__new {
    font-family: var(--font-en);
    font-size: 0.75rem;
    font-style: italic;
    letter-spacing: 0.08em;
    color: var(--color-accent);
}

/* CMS側が出力するサムネイル */
.news-item img {
    width: 3.5rem;
    height: 3.5rem;
    object-fit: cover;
}

@media (min-width: 768px) {
    .news-item__title {
        flex: 1;
    }
}

/* ========================================
   ご案内（写真カード2枚）
   ※ 白い箱・影・角丸は使わない。.cat-band と同じく写真の下半分に
     影を重ねて、その上に文字を載せる。
   ※ 矢印は旧 .guide-links__arrow と同じ作り。色だけ白にしている。
   ※ 一度は店舗案内の中に取り込んだが、独立セクション（.sec-guide）に戻した。
     余白は .section--pad が持つので、ここでは何も持たない。
======================================== */
.guide-cards {
    display: grid;
    gap: 0;
    background-color: #302821;
    border: 1px solid rgba(191, 160, 106, 0.3);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

/* 濃茶の地に、アイコン＋タイトル（横並び）・写真（角丸）・説明文・丸ボタンを
   縦に並べる。6列横並びになるので、カード同士の区切りは（隣接する側の）縦線（ゴールドの薄い線）で行う。576px未満は縦積みなので
   上の横線で区切る（最初のカードは上の線不要）。 */
.guide-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    gap: 1rem;
    padding: 2rem 1.75rem;
    text-align: center;
    color: var(--color-text-white);
    border-top: 1px solid rgba(191, 160, 106, 0.3);
    /* 登場アニメーション（初期状態：未表示）。店舗案内（.shop-brief__img imgや.pick-showcase__img imgと同じ）の
       フォーカスイン演出に揃えている（少し拡大した状態から透明で待機し、定位置・不透明へ収束）。
       ※ transformの遅延はopacityと共用しない。両方に--reveal-delayを付けると、
         ホバー時の拡大（transform）まで遅れてラグのように感じられるため。 */
    opacity: 0;
    transform: scale(1.08);
    transition: opacity 1s ease var(--reveal-delay, 0s),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                background-color var(--transition);
}

.guide-cards__item.is-revealed .guide-card {
    opacity: 1;
    transform: scale(1);
}

.guide-cards__item:first-child .guide-card {
    border-top: 0;
}

@media (min-width: 576px) {
    .guide-card {
        border-top: 0;
    }
    .guide-cards__item:not(:first-child) .guide-card {
        border-left: 1px solid rgba(191, 160, 106, 0.3);
    }
}

.guide-card:hover {
    background-color: #3A322B;
}

.guide-card__head {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

/* 見出し下のオーナメント。会社概要・スタッフ募集・お問い合わせの3枚で長さを揃える。
   ※ .section-title-wrap本来の挙動（width: fit-content、タイトル自身の実幅）をここだけ上書きし、
     長い方（“スタッフ募集”／“お問い合わせ”〉6文字）を目安にした固定幅（全角文字1文字1em＋
     letter-spacing分）にし、他の2枚も同じ幅に揃える。
   ※ .guide-card__headはspan（インライン）なので、子の.section-title-wrapもdisplay: blockを
     明示してwidthが有効になるようにしている。
   ※ font-sizeは.guide-card__jaと同じ段階（ベース1.0625rem、768px以上1.25rem）にして、
     emの基準サイズをタイトルの実際の表示サイズと一致させている。 */
.guide-card__head .section-title-wrap {
    display: block;
    width: 7em;
    font-size: 1.0625rem;
}

@media (min-width: 768px) {
    .guide-card__head .section-title-wrap {
        font-size: 1.25rem;
    }
}

.guide-card__ja {
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    white-space: nowrap;
}

.guide-card__photo {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 1;
    overflow: hidden;
    border-radius: var(--radius-sm);
}

.guide-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition);
}

.guide-card:hover .guide-card__photo img {
    transform: scale(1.06);
}

.guide-card__desc {
    font-size: 0.75rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.75);
}

.guide-card__circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-full);
    transition: border-color var(--transition);
}

/* 会社概要（ロゴ）：<img>でのサイズ調整が安定しなかったため、background-image +
   background-size: containに変更。アスペクト比は他の写真カードと同じ（2/1、
   ベースルールをそのまま使う）。 */
.guide-card--logo .guide-card__photo {
    padding: 1rem;
    background-color: var(--color-white);
    background-image: url('../images/lien-logo-wide.png');
    background-size: 75% auto;
    background-position: center;
    background-repeat: no-repeat;
}

.guide-card__circle::after {
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    margin-left: -0.15rem;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    color: var(--color-text-white);
    transform: rotate(45deg);
    transition: color var(--transition), border-color var(--transition);
}

.guide-card:hover .guide-card__circle {
    border-color: var(--color-gold);
}

.guide-card:hover .guide-card__circle::after {
    color: var(--color-gold);
}

@media (min-width: 576px) {
    .guide-cards {
        grid-template-columns: repeat(3, 1fr);
    }

    /* スタッフ募集カードを一時非表示にしている間はカードが2枚だけになる。
       3列のままだと3列目が空いて見えるので、2枚のときだけ :has() で自動判定し、2列にする。
       カードを復活させれば3枚に戻れば、この条件は自動的に一致しなくなり3列に戻る。 */
    .guide-cards:has(> :nth-child(2):last-child) {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .guide-card__ja {
        font-size: 1.25rem;
    }
    .guide-card__desc {
        font-size: 0.8125rem;
    }
}

/* 横パディングの段階指定。縦（上下）は上の値（ベース2.5rem、768px以上3rem）のままにし、
   横だけ576px以上0.75rem、768px以上1rem、1024px以上2remと段階的に広げる。
   ※ 升順（576→768→1024）の順に並べてあるので、幅が広いときは後ろのルールが勝ち、
     最新（一番広い）の値が反映される。 */
@media (min-width: 576px) {
    .guide-card {
        padding-inline: 0.75rem;
    }
}

@media (min-width: 768px) {
    .guide-card {
        padding-inline: 1rem;
    }
}

@media (min-width: 1024px) {
    .guide-card {
        padding-inline: 2rem;
    }
}

/* ========================================
   2026-08 トップページ・デザインカンプ反映
   FV / 旬のご案内：Cocoa Classic
   看板メニュー / メニュー / 愛される理由：Soft Editorial
   既存構造を保ったまま、トップページ専用のmodifierで上書きする。
======================================== */

/* FV：左を濃いココア茶色、右を写真の分割レイアウト。
   ※ 2026-08：右側の写真エリアの左辺全体を、1本のなめらかな「正円」の弧に見せている。
     以前は.fvのheight計算式（calc(var(--fv-height,100svh)*係数)をmin/maxでクランプ）を
     ブレークポイントごとに重複して再現していたが、式が二重になり実際の高さとズレるリスクがあり、
     実際に正円にならない問題が残っていた。
     代わりにCSSコンテナークエリの単位（cqh）を使う。.fv--cocoa自体を
     container-type: size にしておくと、子要素の中で 1cqh = .fv--cocoaの実際の
     高さの1%を常に正確に指す。これを.fv__bgの左上・左下両方の角のhorizontal/vertical
     両方の半径に同じ値で使うことで、ブレークポイントやsvhの変動に関係なく常に正確に
     「実際の高さの半分」になる（クランプ式の重複も不要になる）。
     .fv__bgの高さ自体は.fv--cocoaの高さ＋下側ブリード10remなので、半径は
     50cqh（=.fv--cocoaの高さの半分）＋5rem（=ブリード10remの半分）としている。
     左上・左下の両方の角に同じ半径を使うことで、上下の弧がボックスの中央でぴったり
     接続し（半径の合計が高さ全体と一致するため）、途中から直線になる区間も出ない。
     右側（right:0）は常に直角・画面右端に密着するので、画面幅に依存せずギャップは出ない。
   ※ 写真の下端をFV自体の下端よりも下（sec-topics側）まで伸ばし、.fvのoverflow:hiddenを
     overflow:visibleで打ち消してブリードさせている。sec-topicsのリボン（z-index:3）はFV（z-index
     指定なし=auto）より常に手前に来るので、リボンが不透明な部分では写真は隠れ、弧の
     切れ目だけで「地続きの同じ写真」が見える。 */
.fv--cocoa {
    container-type: size;
    align-items: stretch;
    justify-content: center;
    padding-top: var(--fv-top-band-height);
    background-color: #302821;
    overflow: visible;
}

/* ブリード部分（.fv自体の下端より下の10rem）の下地。
   overflow: visibleはbleedさせた子要素（.fv__bg）を見せるだけで、.fv--cocoa自身の
   background-colorはあくまで自分自身の高さ（.fvの実高さ）までしか塗られず、
   ブリード領域には届かない。そのため、.fv__bgの円弧クリップで写真が切り取られる部分（特に
   左下コーナー付近）では、背後に何もなくページの地色（アイボリー、白に近い）が
   そのまま透けて見えてしまう。これが白フラッシュのもう一つの原因だった。
   この::beforeでブリード領域全体をFVの地色（#302821）で事前に塗っておくことで、
   .fv__bgの円弧クリップやクロスフェードで何が透けても必ず濃い茶色が下地になるようにする。
   z-indexを指定しないことで（=auto）、DOM上先にある::beforeは.fv__bgより先に（背後に）
   描画される。 */
.fv--cocoa::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10rem;
    height: 10rem;
    background-color: #302821;
}

.fv--cocoa .fv__bg {
    top: 0;
    right: 0;
    left: 40%;
    bottom: -10rem;
    border-radius: 0;
    /* 半径は本来「50cqh + 5rem」だけで正しいはずだったが、cqh（コンテナクエリ単位）は
       ブラウザ上ではコンテナのコンテンツボックス（=padding-topを差し引いた高さ）を基準に
       計算されるため、.fv--cocoaにpadding-topがあると実際のボーダーボックス高さより小さく評価されてしまい、
       半径（本来はボーダーボックス高さ／2+5rem）がズレて歪んだ橕円になってしまう（padding-topが
       増えるほどズレが大きくなる）。padding-topの半分を足して補正することで、padding-topの値が
       変わっても常に正確な正円になるようにしている。
       ※ padding-topが常に5remなので、補正も常にその半分の2.5rem。 */
    border-top-left-radius: calc(50cqh + 5rem + (var(--fv-top-band-height) / 2));
    border-bottom-left-radius: calc(50cqh + 5rem + (var(--fv-top-band-height) / 2));
    overflow: hidden;
}

/* ゴールドの縁（細い線）。768px以上（左右分割・正円クリップ）用。
   ※ .fv__bgの正円は「top-left/bottom-leftのradiusをbox高さの半分以上にする」ことで
     半径=box高さ/2の正円になる（大きすぎる値はブラウザが自動でbox高さ/2に丸める）。
     この正円の中心は box の左上角から (R, R) の位置（=box内で対角線ではなく、左端から
     Rだけ右、上端からRだけ下）。
   ※ 写真とゴールドラインの間に少し隙間を空けるため、オフセットを、2段階に分けている。
     写真（.fv__bg、オフセット０）→隙間（.fv__bg-gap、オフセットG=0.2rem）→リング（.fv__bg-ring、
     オフセットG+T=0.28rem）の順で外側に広がる。.fv__bg-gapが.fv__bg-ringの内側（0〜0.2rem）を
     地の茶色で隠すので、実際にゴールドとして見えるのは0.2〜0.28remの部分（ラインの太さT=0.08rem）だけ。 */
.fv--cocoa .fv__bg-ring {
    display: block;
    position: absolute;
    top: -0.28rem;
    right: 0;
    left: calc(40% - 0.28rem);
    bottom: -10.28rem;
    border-radius: 0;
    /* .fv__bgと同じpadding-top補正（+2.5rem）を加えてある。 */
    border-top-left-radius: calc(50cqh + 5rem + 0.28rem + (var(--fv-top-band-height) / 2));
    border-bottom-left-radius: calc(50cqh + 5rem + 0.28rem + (var(--fv-top-band-height) / 2));
    background-color: var(--color-gold);
}

/* ゴールドラインと写真の間の隙間を作るマスク。地の茶色（#302821）で塗り、ゴールドリング（.fv__bg-ring）の
   内側部分を隠して隙間に見せる。.fv__bgと同じ作りだが、オフセット（G=0.2rem）が写真より小さく
   リング（G+T=0.35rem）より大きい。
   リングと同じ中心の正円を作るには、box自体を上下左右にGずつ広げ、半径の計算式にも
   同じGを足す（.fv__bg-ringと同じ考え方）。 */
.fv--cocoa .fv__bg-gap {
    display: block;
    position: absolute;
    top: -0.2rem;
    right: 0;
    left: calc(40% - 0.2rem);
    bottom: -10.2rem;
    border-radius: 0;
    /* .fv__bgと同じpadding-top補正（+2.5rem）を加えてある。 */
    border-top-left-radius: calc(50cqh + 5rem + 0.2rem + (var(--fv-top-band-height) / 2));
    border-bottom-left-radius: calc(50cqh + 5rem + 0.2rem + (var(--fv-top-band-height) / 2));
    background-color: #302821;
}

.fv--cocoa .fv__bg-slide {
    /* スライドの自前のbackground-colorはベースの--color-bg-light（近い白ベージュ）のままだった。
       画像切り替えのクロスフェード中（opacityの遷移中）や、.fv__bgの円弧クリップで切り取られる
       部分などで、このベージュが一瞬見えて白っぽくフラッシュする原因になっていた。
       FVの地の色（#302821）に合わせておくことで、何かの拍子で写真が一瞬透けても
       濃い茶色になるだけで、白が見えないようにする。 */
    background-color: #302821;
    background-position: center;
}

/* 写真が大きな正円になったので、以前のクリーム地へのフェード・ベールは不要になった。
   （円の境界そのものが境界線になるため、塗り分けのためのグラデーションは不要） */
.fv--cocoa .fv__veil {
    background: none;
}

.fv--cocoa .fv__inner {
    max-width: var(--section-width-xl);
    margin-inline: auto;
    text-align: left;
}

/* 1440px以上：max-widthでの中央寄せをやめ、写真ではない左40%（.fv__bgのleft: 40%と
   同じ区切り）に幅を合わせて配置する。画面がさらに広がっても、テキストが写真側に
   はみ出したり、中央寄せで右に流れたりしないようにするため。 */
@media (min-width: 1440px) {
    .fv--cocoa .fv__inner {
        max-width: none;
        width: 40%;
        margin-inline: 0;
    }
}

.fv--cocoa .fv__logo {
    justify-content: flex-start;
}

.fv--cocoa .fv__logo img {
    height: 5.5rem;
}

/* .fv--cocoa（768px以上の左右分割レイアウト）では左寄せなので、キャッチ画像も少し大きめに対応する幅にする。 */
.fv--cocoa .fv__catch {
    width: clamp(18rem, 32vw, 30rem);
    /* .fv__catchのベース値margin-inline: autoを打ち消し、左寢せにする（.fv__logoのjustify-content: flex-startと同じ考え方）。 */
    margin-inline: 0;
}

/* 区切り線もキャッチと同じ理由で左寢せにする。幅も.fv__catchと同じ長さに揮える。 */
.fv--cocoa .fv__ornament {
    width: clamp(18rem, 32vw, 30rem);
    margin-inline: 0;
}

.fv--cocoa .fv__catch-img {
    width: clamp(18rem, 32vw, 30rem);
}

/* 地が濃い茶色なので、キャッチのテキスト版（.fv__catch-caption）も白文字にする。 */
.fv--cocoa .fv__catch-caption {
    color: var(--color-text-white);
}

.fv--cocoa .fv__lead {
    max-width: 25rem;
    color: #E8E0D4;
}

/* FV直下のリボンについては下記参照 */
/* サイズ関連の一元管理。以前はタイルのアスペクト比（.topics__link本体・1440pxの
   メディアクエリ）と、リボンの弧の縦半径（.topics自身・::before・モバイル用オーバーライド）が
   それぞれ別の場所に手打ちされていて、変えるたびに複数箇所を探す必要があった。
   ※ タイルのアスペクト比と弧の深さは数式的には独立した値（弧の深さはタイルの高さから
     式で導かれるものではなく、見た目のふくらみ量を決めるデザイン値）だが、どちらも
     「このリボン帯がどう見えるか」を決める値なので、ここにまとめて定義し、モバイル側も
     このカスタムプロパティを上書きするだけで済むようにしている。 */
.sec-topics--cocoa-ribbon {
    position: relative;
    z-index: 3;
    margin-top: -2rem;
    /* .topics__linkのaspect-ratioが参照 */
    --topics-aspect: 4 / 3;
    /* .topicsのclip-path楕円の縦半径が参照 */
    --ribbon-curve-v: 37rem;
    /* ::before（縁）の楕円の縦半径が参照。--ribbon-curve-vより0.75rem大きい */
    --ribbon-edge-curve-v: 37.3rem;
}

/* 1440px以上：タイルのアスペクト比16:9のままでは縦に伸びすぎるため、16:7に切り替えて
   間延びを防ぐ。 */
@media (min-width: 1440px) {
    .sec-topics--cocoa-ribbon {
        --topics-aspect: 16 / 7;
    }
}

/* 576px以上（〜767px）：タイルが狭くなるので16:11に切り替えて中間位の高さにする。 */
@media (min-width: 576px) {
    .sec-topics--cocoa-ribbon {
        --topics-aspect: 16 / 11;
    }
}

/* 768px以上（〜1023px）：タイルが幅広になるので16/10に。 */
@media (min-width: 768px) {
    .sec-topics--cocoa-ribbon {
        --topics-aspect: 16 / 10;
    }
}

/* 1024px以上：さらに幅広になるので16/9に。 */
@media (min-width: 1024px) {
    .sec-topics--cocoa-ribbon {
        --topics-aspect: 16 / 9;
    }
}

/* 縁。当初.topics::afterのinset box-shadowで実装していたが、box-shadowは要素自前の
   矩形のボックス基準で描画されるため、楕円clip-pathで切り取られた後には矩形の
   角（マイター）の影響が残り、曲線沿いの太さが一定しない・一部が歯切れのように
   見えるなど、「汚い」見た目になっていた。
   代わりに、今度は.topicsと同じエリプスを一回り大きくした::beforeをこの親要素（.sec-topics--cocoa-ribbon）
   に重ね、.topics自体の背後に敷いておく方式に変えた。::beforeはDOM上.topics（実の子要素）より先に
   描画（=背後）されるので、大きい方の楕円と小さい方の楕円（.topics）の差分が、幅の均一なリングとして
   見える。内側の楕円（.topicsのclip-path）とちょうど同じ中心で、半径だけを固定値（0.75rem）分大きくし、
   上辺（top）も同じ量だけ上に拡張している。 */
.sec-topics--cocoa-ribbon::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -0.3rem;
    bottom: 0;
    background-color: #302821;
    clip-path: ellipse(100vw var(--ribbon-edge-curve-v) at 50% var(--ribbon-edge-curve-v));
}

/* ゴールドの細い線（768px以上のみ）。FV写真のゴールドライン（.fv--cocoa .fv__bg-ringと.fv__bg-gap）と同じ
   （3層：写真→隠間→ゴールド）の仕組み。::before（地の茶色、既存の「隠間」役）のさらに
   外側に.topics__ring（ゴールド）を敷き、::beforeがその内側を隠すことで、外周のワズカ（0.08rem）
   だけがゴールドの細い線として見える。
   ※ .topics__ringはHTML上は::beforeより後（実要素）なので本来なら::beforeより手前（上）に
     描画されてしまうが、z-index: -1を付けることでスタッキング上::before（z-index: auto）より
     背面（先）に回している（親要素.sec-topics--cocoa-ribbon自体がposition: relative + z-index: 3で
     スタッキングコンテキストを作っているので、子要素のz-index: -1はそのコンテキスト内だけで安全に比較される）。
   ※ 半径は::beforeと同じ中心（上辺を同じ量だけ上に拡張しつつ半径も同じ量大きくする）で概心5円を保つ。
   ※ 768px未満は非表示のまま（モバイルは上下構成用の別のゴールドラインを既に持っているため、このリングは不要）。 */
.topics__ring {
    display: none;
}

@media (min-width: 768px) {
    .topics__ring {
        display: block;
        position: absolute;
        z-index: -1;
        left: 0;
        right: 0;
        top: -0.38rem;
        bottom: 0;
        background-color: var(--color-gold);
        clip-path: ellipse(100vw calc(var(--ribbon-edge-curve-v) + 0.08rem) at 50% calc(var(--ribbon-edge-curve-v) + 0.08rem));
    }
}

.sec-topics--cocoa-ribbon .topics {
    overflow: hidden;
    /* 幅いっぱいのアーチだが、以前はborder-radiusの横方向半径が50%（=自分自身の幅の半分）だったため、
       カーブの接続点（左右の接続部分）がちょうど画面の左右端に来てしまい、そこで接線が垂直におれ曲がり、
       画面端でカーブが直角に折れ曲がって見えてしまう問題があった。
       border-radiusは左右両角の横方向半径の合計が自身の幅を超えられない（超えると自動縮小される）ため、
       「幅より大きな楕円」をborder-radiusだけで作ることはできない。そのためclip-path: ellipse()に
       切り替えた。楕円の横幅（100vw）を自身の幅（100%）の2倍にして自分自身の左右端より外側に
       楕円の中心を抜けさせ、画面の左右端では楕円の接線部分（垂直接線）ではなく、もっと
       フラットな途中の部分だけが見えるようにしている（=「パスが画面外に伸びていて、そこをクリップ
       している」見た目）。
       具体値：中心の頂点高さ（画面中央でy=0）と、画面左右端でのy=5rem（以前の値）を保ったまま、
       横半径を自分の幅の2倍（100vw）にした場合の楕円方程式を解いて縦半径（37rem）を算出している。
       値は.sec-topics--cocoa-ribbonの--ribbon-curve-vを参照（一元管理）。 */
    clip-path: ellipse(100vw var(--ribbon-curve-v) at 50% var(--ribbon-curve-v));
}



/* 看板メニュー（おすすめ）：淡いピンクの地は維持。
   レイアウト本体（.pick-showcase）はindex.css上部の「おすすめ（旧イチオシ商品）」
   ブロックで定義済みなのでここでは余白だけ上書きする。 */
.sec-pick--editorial.section--pad {
    position: relative;
    z-index: 4;
    background-color: var(--color-bg-pink);
    /* ピンクの紙目のテクスチャ（pink-bg.webp）を敷く。こだわりセクション（.sec-reason--editorialのwhite-bg.webp）と
       同じ作り。
       ※ パディングは.section--padの既定値（base 4rem / 768px以上 5rem）のまま。
         こだわり・店舗案内と同じ値に揃えてある（以前はこのセクションだけ別値だった）。
       ※ ベース（768px未満）は600px×autoのリピートタイル。
         768〜1199pxはセクション全体を覆う1枚のcover背景に切り替え、
         1200px以上でリピートタイルに戻す（下の@mediaを参照）。
       ※ 2層目の--img-placeholderは素材未配置のときだけ見えるダミー（他の素材待ち箇所と同じ作り）。 */
    background-image:
        url('../images/pink-bg.webp'),
        var(--img-placeholder);
    background-size: 600px auto, auto;
    background-repeat: repeat, repeat;
    background-position: center, center;
}

@media (min-width: 768px) {
    .sec-pick--editorial.section--pad {
        background-size: cover, auto;
        background-repeat: no-repeat, repeat;
    }
}

@media (min-width: 1200px) {
    .sec-pick--editorial.section--pad {
        background-size: 600px auto, auto;
        background-repeat: repeat, repeat;
    }
}

/* メニュー：B案の写真帯。見出しを廃止したので上下パディングは持たず、看板メニュー・こだわりの余白だけで区切る。 */
.sec-menu--editorial {
    padding: 0;
    background-color: var(--color-bg);
}

.sec-menu--editorial .cat-band__link {
    aspect-ratio: 3 / 3.5;
}

.sec-menu--editorial .cat-band__label {
    bottom: 1.25rem;
}

/* 愛される理由：B案の文章＋横長カプセル写真
   ※ パディングは.section--padの既定値（base 4rem / 768px以上 5rem）のまま。
     看板メニュー・店舗案内と同じ値に揃えてある。 */
.sec-reason--editorial.section--pad {
    background-color: var(--color-bg);
    /* 白い紙目のテクスチャ（white-bg.webp）を敷く。.shop-briefのbrown-bg.webpと同じ作り。
       ※ ベース（768px未満）は600px×autoのリピートタイル。
         768〜1199pxはセクション全体を覆う1枚のcover背景に切り替え、
         1200px以上でリピートタイルに戻す（下の@mediaを参照）。
       ※ 2層目の--img-placeholderは素材未配置のときだけ見えるダミー（他の素材待ち箇所と同じ作り）。 */
    background-image:
        url('../images/white-bg.webp'),
        var(--img-placeholder);
    background-size: 600px auto, auto;
    background-repeat: repeat, repeat;
    background-position: center, center;
}

/* タイトル（.reason-intro__textの中に組み込む。以前の .sec-head は廃止）を、削除前の英字ラベル（.sec-head__label）と
   同じフォントサイズ（2rem / 768px以上3rem / 1024px以上3.5rem）・ゴールドにする。
   ※ ベースの .reason-intro__title（font-weight:600・lettter-spacing:0.1em・color:title）を
     上書きする。.sec-reason--editorial にスコープし、他のセクションには影響しない。 */
.sec-reason--editorial .reason-intro__title {
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    color: var(--color-gold);
}

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

.sec-reason--editorial .reason-intro {
    gap: 3rem;
}

/* 店舗案内（.shop-brief__duo）もこだわり（.reason-intro）と同じ値（3rem）に揃える。
   ※ .shop-brief .shop-brief__duoでスコープし、.shop-brief__duo自体のブレークポイントごとの
     gap指定（ベースvar(--spacing-xl)・768px以上var(--spacing-xxl)・768〜1023pxvar(--spacing-lg)）を
     全ブレークポイントで上書きする（.sec-reason--editorial .reason-introと同じ考え方）。 */
.shop-brief .shop-brief__duo {
    gap: 3rem;
}

/* こだわりセクションのカットイラスト。.reason-intro__textの右上に小さくワンポイントとして置く。
   ※ .reason-intro__textはposition: relativeにして、イラストの基準とする。
   ※ カーソル・タップの実際の文字と重ならないよう、小さめ・透過度を下げ目にしている。
   ※ pointer-events: noneでクリックを遮らないようにする。 */
.sec-reason--editorial .reason-intro__text {
    position: relative;
}

.sec-reason--editorial .reason-intro__deco {
    position: absolute;
    top: -1rem;
    right: 0;
    z-index: 0;
    width: 4.5rem;
    height: auto;
    opacity: 0.85;
    pointer-events: none;
}

@media (min-width: 768px) {
    .sec-reason--editorial .reason-intro__deco {
        top: -1.5rem;
        right: -1rem;
        width: 5.5rem;
    }
}

.sec-reason--editorial .reason-intro__images {
    /* パディングなし。サブ画像（crepe02.webp）はメイン画像の右下角に直接重なる。 */
    padding: 0;
}

.sec-reason--editorial .reason-intro__img {
    border: 0;
}

.sec-reason--editorial .reason-intro__img--main {
    aspect-ratio: 4 / 3;
    border-radius: 4rem 1rem 4rem 1rem;
}

/* 768px以上：横長のピル型に切り替える。
   ※ 角丸はrem固定にする。%指定は横幅・縦幅それぞれに割合でかかるため、
     16:9の横長ボックスだとカーブの伸び方が変わり、ピル形の雰囲気から
     大きくズレるため。 */
@media (min-width: 768px) {
    .sec-reason--editorial .reason-intro__img--main {
        aspect-ratio: 16 / 9;
        border-radius: 8rem 2rem 8rem 2rem;
    }
}

/* ピル型メイン画像は左寄りで並べる（テキストが左にあるレイアウト）ので、ベースの
   左下重ね（left: 0）ではなく右下に重ねる。幅は小さめ（28%）にし、ピルの高さ（短め）に
   対して大きすぎないようにする。
   ※ 角丸は%指定のまま。サブ画像は28%幅と小さく、画面幅によってさらに小さくなるので、
     remだと丸みが大きすぎて崩れる。%指定なら常にボックスに対する割合で収まる。
   ※ 親（.reason-intro__images）はpadding: 0なので、重なり代はtransformで作る。
     右下に少しずらして、メイン画像の角からはみ出すようにする（.reason-intro__images自体は
     overflowを持たないのではみ出しても切れない）。 */
.sec-reason--editorial .reason-intro__img--sub {
    left: auto;
    right: 0;
    width: 28%;
    border-radius: 35% 15% 35% 15%;
    transform: translate(18%, 28%);
}

/* 768px未満：FVも左右分割ではなく上下構成（テキスト→写真）に切り替える。
   ※ 以前は1024px未満（タブレット幅も含む）だったが、768px未満（スマホ幅だけ）に
     戻した。768〜1023px（タブレット）はデスクトップ側の左右分割レイアウトに戻る
     （リボンのブリード・背景・弧の深さもこのブロック内にまとめてあるので、このブレークポイント
     を変えれば自動的にデスクトップ側の値（基本ルール）に戻る）。 */
@media (max-width: 767.98px) {
    .fv--cocoa {
        justify-content: flex-start;
        /* 上の余白（padding-top: 5rem）に768px未満だけ2rem足す。 */
        padding-top: calc(var(--fv-top-band-height) + 2rem);
    }

    /* 画面幅以上の横長な写真を上下構成で使うので、花形の中心（center）では主顔が切れやすい。
       上から25%の位置にフォーカスを寄せる。 */
    .fv--cocoa .fv__bg-slide {
        background-position: center 65%;
    }

    /* 旬のご案内タイル見出し：基本（モバイル値）は.topics__title本体に直接持たせてあり、
       768px以上の拡大は下の@media (min-width: 768px)で行う（min-widthを基本とする
       プロジェクト方針に従い、max-widthでの上書きを廃止した）。 */

    /* ゴールドの縁（細い線）。リボンの縁と同じ二重楕円の手法だが、リボン側（0.75rem）
       よりずっと控えめな差分にして、太い帯ではなく細いラインに見せる。
       ※ デスクトップ側と同じように、写真とラインの間に隙間を空けるため、オフセットを２段階に
         分けている。写真（.fv__bg、0.15弱内の付近でもない）→隙間（.fv__bg-gap、0.2rem）
         →リング（.fv__bg-ring、0.35rem）の順で外側に広がる。
       ※ 化円はRY×0.134で画面端の立ち上がりyが決まるので、単にRYを大きくするだけだと
         後ろ（内側）に縮こむ。そのため上端（top）も同じ量だけ上にずらす必要がある（.fv__bgの
         方法と同じ）。太さは近似的に「上端のずらし量の差」にほぼ一致するので、リング（0.35）と
         隙間（0.2）の差（0.15rem）が実際のラインの太さになる。 */
    .fv--cocoa .fv__inner {
        flex-shrink: 0;
        order: 1;
    }

    .fv--cocoa .fv__photo {
        position: relative;
        order: 2;
        flex: 1;
        min-height: 10rem;
        margin-top: 1.5rem;
        margin-bottom: -5rem;
    }

    .fv--cocoa .fv__bg-ring {
        display: block;
        position: absolute;
        inset: -0.28rem 0;
        /* デスクトップ側（上）でborder-top-left-radius・border-bottom-left-radiusを付けているので、
           モバイルでは0に戻して消す（付けたままだと楕円clip-pathと二重に形が歪む）。 */
        border-radius: 0;
        background-color: var(--color-gold);
        clip-path: ellipse(100vw 18.78rem at 50% 18.78rem);
        -webkit-clip-path: ellipse(100vw 18.78rem at 50% 18.78rem);
    }

    /* ゴールドラインと写真の間の隙間を作るマスク。デスクトップ側の.fv__bg-gapと同じ考え方で、
       リング（.fv__bg-ring）の内側（写真側の0.2rem未満の部分）を地の茶色で隠す。 */
    .fv--cocoa .fv__bg-gap {
        display: block;
        position: absolute;
        inset: -0.2rem 0;
        border-radius: 0;
        background-color: #302821;
        clip-path: ellipse(100vw 18.7rem at 50% 18.7rem);
        -webkit-clip-path: ellipse(100vw 18.7rem at 50% 18.7rem);
    }

    .fv--cocoa .fv__bg {
        position: absolute;
        inset: 0;
        border-radius: 0;
        /* 左右分割ではなく上下構成なので、リボンと同じ手法（画面幅より大きな楕円を
           clip-pathで使い、実際に見えるのは頂点付近のごく平らな部分だけ）で弧を作る。
           ※ 以前はborder-radiusのクォーターエリプス（50%、50%/22%）だったが、丸みがそのまま出て
             しまい、楕円のひと弧だけを使うリボン側の控えめな弧と比べるとふっくら・不格好に
             見えていた。楕円と同じ手法に揃えることで、FVの弧とリボンの弧が同じトーンで
             繋がって見える。
           ※ 縦半径はリボンの--ribbon-curve-v（18.5rem）と同じ値に揃えてある（両方とも画面左右端での
             落差が約2.5remで揃う）。 */
        clip-path: ellipse(100vw 18.5rem at 50% 18.5rem);
        -webkit-clip-path: ellipse(100vw 18.5rem at 50% 18.5rem);
        mask-image: none;
        -webkit-mask-image: none;
    }

    .fv--cocoa .fv__veil {
        background: none;
    }

    .fv--cocoa .fv__inner {
        text-align: center;
    }

    .fv--cocoa .fv__logo {
        justify-content: center;
    }

    .fv--cocoa .fv__logo img {
        height: 4rem;
    }

    .fv--cocoa .fv__catch {
        width: clamp(11rem, 55vw, 16rem);
    }

    .fv--cocoa .fv__ornament {
        width: clamp(11rem, 55vw, 16rem);
    }

    .fv--cocoa .fv__catch-img {
        width: clamp(11rem, 55vw, 16rem);
    }

    .fv--cocoa .fv__lead {
        margin-inline: auto;
    }

    .sec-topics--cocoa-ribbon {
        margin-top: -1.25rem;
        padding-inline: 0;
        --ribbon-curve-v: 18.5rem;
        --ribbon-edge-curve-v: 18.8rem;
        /* デスクトップ側は左邉40%・右邉60%の分割（.sec-topicsのベースグラデーション）だったが、
           上下構成のモバイルではFVの写真が全幅なので、左右分割はもう合わない。
           全幅を透明にして、上の.fv--cocoa .fv__bgのブリード（-5rem）がリボンの左上・右上
           コーナー（アーチの内側）に透けて見えるようにする（1024px以上でFV写真がリボンに
           地続きで見えるのと同じ効果）。透明にしてもリボン全体の高さ（約6〜7rem程度）は
           .fv--cocoa::beforeの10remブリードの範囲内なので、写真が届かない部分も白ではなく
           濃い茶色（#302821）の下地が引き続き見える。 */
        background: transparent;
    }
}

/* 768〜1199px：white-bg.webpをセクション全体を覆う1枚のcover背景にする
   （768px未満・1200px以上はベースの600px×autoリピートタイルのまま。.shop-briefと同じ）。 */
@media (min-width: 768px) {
    .sec-reason--editorial.section--pad {
        background-size: cover, auto;
        background-repeat: no-repeat, repeat;
    }
}

@media (min-width: 1200px) {
    .sec-reason--editorial.section--pad {
        background-size: 600px auto, auto;
        background-repeat: repeat, repeat;
    }
}

/* 1200px以上：看板メニュー・こだわり・店舗案内の3セクションは上下パディングを
   6remに拡大する（.section--padの既定値、base 4rem / 768px以上 5remよりさらに広げる）。
   ※ 左右（--gutter）は触らず、上下だけ上書きする。 */
@media (min-width: 1200px) {
    .sec-pick--editorial.section--pad,
    .sec-reason--editorial.section--pad,
    .shop-brief.section--pad {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
}

/* 見出し（.sec-head）を廃止したセクション。
   ※ .section--pad の上下パディング（base 4rem / 768px以上 5rem）と同じ値なので、
     現状は共通クラスのままで良いが、以前の固定値指定の名残として明示的に揃えておく。 */
/* 見出し（.sec-head）を廃止したセクション。
   ※ フッターとの間の余白をなくすため、上下左右すべてのパディングを打ち消す。
   ※ ただし下はフッターのwaveの高さ（.footer::beforeのwidth 4rem）と同じ分だけ
     余白を持たせ、waveがカードに直接重ならないようにする。 */
/* 見出し（.sec-head）を廃止したセクション。
   ※ 余白は親要素（.sec-links-guide-wrap）側に一元化したので、ここでは
     何も持たない（common.cssの.sec-links-guide-wrap .sec-guide.section--padを参照）。 */
.sec-guide.section--pad {
    padding: 0;
}

/* 1200pxで頭打ちにし、中央寄せにする。左右の余白（--gutter）は
   .inner--full自体が持つものをそのまま使う。 */
.sec-guide .inner--full {
    max-width: 1200px;
    margin-inline: auto;
}

/* ========================================
   ご予約・ご案内（全幅モザイク）
   ※ 下層ページでも共通で使う（includes/sec-links.php）ので、
     スタイルは common.css に移してある。ここには置かない。
======================================== */

/* ========================================
   375px未満：旬のご案内リボンとFVアーチのclip-path補正（ファイル末尾）
   ※ common.cssの「375px未満：position:fixed 要素の補正」と同じ理屈。
     375px未満ではhtml自体が width:375px に固定され、実際のビューポート幅への
     縮小はtransform: scale()だけで行っている（レイアウト自体は375px幅のまま）。
     ところがtransformはvw単位の解釈には影響しない（vwは常に実際のビューポート幅を基準にする）ため、
     clip-path: ellipse(100vw ...)の「100vw」部分だけが実際の（375pxより狭い）
     ビューポート幅で計算されてしまい、375px幅でレイアウトされている要素（幅は375px基準）
     の中では楕円が相対的に縮んで見えてしまう（=「クリップパスが縮まる」問題）。
     旬のご案内リボン・FVアーチ（とそのゴールドの縁）のどちらも clip-path で100vwを
     使っているので、同じ補正が必要。
     対策として、この幅帯だけ横半径を 100vw から固定値 375px に差し替える（htmlの
     固定幅と揃える）。縦半径（--ribbon-curve-v や 18.5rem/19.25remなど）は既に
     それぞれのモバイル値になっているのでここでは触らない。 */
@media (max-width: 374px) {
    .fv--cocoa .fv__bg {
        clip-path: ellipse(375px 18.5rem at 50% 18.5rem);
        -webkit-clip-path: ellipse(375px 18.5rem at 50% 18.5rem);
    }

    .fv--cocoa .fv__bg-ring {
        clip-path: ellipse(375px 18.78rem at 50% 18.78rem);
        -webkit-clip-path: ellipse(375px 18.78rem at 50% 18.78rem);
    }

    .fv--cocoa .fv__bg-gap {
        clip-path: ellipse(375px 18.7rem at 50% 18.7rem);
        -webkit-clip-path: ellipse(375px 18.7rem at 50% 18.7rem);
    }

    .sec-topics--cocoa-ribbon .topics {
        clip-path: ellipse(375px var(--ribbon-curve-v) at 50% var(--ribbon-curve-v));
    }

    .sec-topics--cocoa-ribbon::before {
        clip-path: ellipse(375px var(--ribbon-edge-curve-v) at 50% var(--ribbon-edge-curve-v));
    }

    /* .fv__catch・.fv__ornament・.fv__catch-imgはwidth: clamp(11rem, 55vw, 16rem)。
       55vwの部分がclip-pathと同じ理由（vwは実際のビューポート幅を基準にし、
       375px固定レイアウトのtransform:scaleの影響を受けない）で、375px未満では
       実際のビューポートがさらに狭くなるにつれて55vwの計算値も縮み続け、
       transform:scaleとの二重縮小でキャッチ部分が必要以上に小さく見えてしまう。
       375px幅時点の55vw（375px×0.55=206.25px）に固定し、それ以上は縮小させない。 */
    .fv--cocoa .fv__catch,
    .fv--cocoa .fv__ornament,
    .fv--cocoa .fv__catch-img {
        width: 206.25px;
    }
}