@charset "UTF-8";
/* ============================================================
   焼菓子店 つきとバター（D10デモ）
   設計方針:
   - モバイルファースト（min-width で拡張）
   - BEM命名。演出用の状態クラスは is-* プレフィックス
   - 配色・フォントは custom properties に集約（デザイン設計.md 準拠）
   ============================================================ */

:root {
  /* 配色: デザイン設計.md の5色。ここを変えれば全体のトーンが変わる */
  --color-base: #F3EDE2;   /* 生成り（背景） */
  --color-main: #B98A4E;   /* 焼き色キャメル（見出し・罫線） */
  --color-text: #4A3B2A;   /* こげ茶（本文。生成り地でコントラストAAA） */
  --color-accent: #E4C36B; /* バター/月の黄（CTA・アクセント） */
  --color-white: #FFFFFF;
  --color-roast: #C9AA79;      /* 淡いミルクティーキャメル（区間4の面。生成りとの穏やかなトーン差） */
  --color-roast-deep: #6B4E2A; /* 淡いキャメル面の上のアクセント（商品名・欧文ラベル） */
  --color-cream: #F6EFE3;      /* （予備）濃い面に戻す場合の文字色 */

  --font-serif: "Zen Old Mincho", serif;          /* 見出し用 */
  --font-sans: "Zen Kaku Gothic New", sans-serif; /* 本文用（可読性優先） */
  --font-round: "Zen Maru Gothic", sans-serif;    /* 欧文ラベル用の丸ゴシック */

  /* 30〜60代ターゲットのため本文は16px以上・行間広め */
  --fs-body: 1rem;
  --lh-body: 1.9;
}

/* ---- リセット（最小限） ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
ul { list-style: none; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  background-color: var(--color-base);
  /* 紙テクスチャ: 画像を使わず微細ノイズをグラデで擬似再現（外部リクエスト削減）
     本物の紙質感が欲しくなったらSVGノイズ（feTurbulence）のdata URIに差し替える */
  background-image:
    radial-gradient(rgba(185, 138, 78, 0.05) 1px, transparent 1px),
    radial-gradient(rgba(255, 255, 255, 0.4) 1px, transparent 1px);
  background-size: 7px 7px, 5px 5px;
  background-position: 0 0, 3px 3px;
  /* SPの横スクロール事故防止（css_overflow_sticky_gotcha対策はwrapper側でも行う） */
  overflow-x: hidden;
}

/* SPだけで改行したい箇所に使う */
.sp-only { display: inline; }
/* PCだけで改行したい箇所（SPでは文章を自然に流す） */
.pc-only { display: none; }
@media (min-width: 768px) {
  .sp-only { display: none; }
  .pc-only { display: inline; }
}

/* ============================================================
   ローディング（フェーズ2で演出実装。静的版は is-done で非表示）
   ============================================================ */
.loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-base);
}
.loader.is-done { display: none; }
.loader__logo { text-align: center; color: var(--color-main); }
.loader__name {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  letter-spacing: 0.3em;
  color: var(--color-text);
}
/* JSが1文字ずつspan化する。transformを効かせるためinline-blockにする */
.loader__char { display: inline-block; }
/* 店名下の罫線。中央から左右へ伸ばすため scaleX(0) を初期値にしておく */
.loader__line {
  display: block;
  width: 9em;
  height: 1px;
  margin: 1rem auto 0;
  background: var(--color-main);
  transform: scaleX(0);
  transform-origin: center;
}

/* ============================================================
   ヘッダー / ナビ
   SP: 上部固定バー＋ハンバーガー / PC: 右端固定の縦書きナビ（ムギ参照）
   ============================================================ */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1rem;
  /* SPもPC同様に背景透過（ユーザーFB反映） */
}
.header__logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  font-family: var(--font-serif);
  font-size: 0.95rem;
}

/* ハンバーガー（SPのみ表示） */
.header__toggle {
  width: 44px;  /* タップ領域44px確保 */
  height: 44px;
  display: grid;
  place-content: center;
  gap: 7px;
  background: none;
  border: none;
  cursor: pointer;
  /* ドロワー（.nav）は position:fixed なので、何もしないとこのボタンより
     手前に描画されてバツ印が隠れてしまう。閉じるボタンとして常に見えるよう前面に出す */
  position: relative;
  z-index: 1;
}
.header__toggle-line {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--color-text);
  transition: transform 0.3s;
}
/* 開いた状態は is-open（js/main.jsで付与）で×印に */
.header__toggle.is-open .header__toggle-line:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.header__toggle.is-open .header__toggle-line:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); }

/* SPナビ: 全画面ドロワー */
.nav {
  position: fixed;
  inset: 0;
  background: var(--color-base);
  display: grid;
  place-content: center;
  /* 非表示は visibility+opacity（displayだとtransitionが効かない） */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s, visibility 0.3s;
}
.nav.is-open { visibility: visible; opacity: 1; }
.nav__list { text-align: center; display: grid; gap: 1.5rem; }
.nav__link {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  text-decoration: none;
  letter-spacing: 0.15em;
}


@media (min-width: 768px) {
  /* PC: ヘッダーはロゴのみ残し、ナビを右端固定の縦書きに */
  .header { padding: 1.2rem 1.5rem; }
  .header__toggle { display: none; }
  .nav {
    position: fixed;
    inset: auto 0 auto auto;
    top: 50%;
    transform: translateY(-50%);
    visibility: visible;
    opacity: 1;
    background: none;
    padding-right: 1.5rem;
  }
  .nav__list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  .nav__link {
    writing-mode: vertical-rl; /* 縦書きナビ */
    font-size: 0.95rem;
    letter-spacing: 0.3em;
  }
  .nav__link:hover { color: var(--color-main); }
}

/* ============================================================
   セクション共通
   ============================================================ */
.section {
  padding: 5rem 1.25rem;
  max-width: 1080px;
  margin-inline: auto;
}
/* 店舗案内など「静かに読ませる」セクションは白地に切り替える */
.section--white {
  max-width: none;
  background: var(--color-white);
}
.section--white > * { max-width: 1080px; margin-inline: auto; }

.section__title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 2.5rem;
  letter-spacing: 0.1em;
}
/* 欧文ラベル（Cookies等）は見出しの上に小さく置く */
.section__title-en {
  display: block;
  font-family: var(--font-round); /* 欧文ラベルは丸ゴシック（ユーザーFB反映） */
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-main);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

@media (min-width: 768px) {
  .section { padding: 7.5rem 2rem; }
  .section__title { font-size: 2rem; }
}

/* ============================================================
   1. ファーストビュー
   ============================================================ */
.fv {
  /* 100svh: SPのアドレスバー伸縮による欠け・ガタつきを防ぐ */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5rem 1.25rem 3rem;
  position: relative;
}
.fv__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  max-width: 1080px;
  margin-inline: auto;
}
.fv__catch {
  font-family: var(--font-serif);
  font-weight: 600;
  /* clamp: 375pxでも改行位置が崩れない自動縮小（sp_no_unexpected_wrap対策） */
  font-size: clamp(1.35rem, 5.5vw, 2.4rem);
  line-height: 1.8;
  letter-spacing: 0.12em;
  text-align: center;
}
.fv__photo {
  width: min(78vw, 340px);
  /* アーチ型（かまぼこ型）マスク。フェーズ2でここが開く演出の起点になる */
  border-radius: 50% 50% 0 0 / 30% 30% 0 0;
  overflow: hidden;
}
.fv__photo img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.fv__sub {
  text-align: center;
  font-size: 0.95rem;
}
/* キャッチの行。blockにすると縦書き(vertical-rl)では右→左の列、横書きでは通常の行になる
   （<br>と同じ見た目のまま、演出の単位として使える） */
.fv__catch-line { display: block; }

/* ※FVのスクロール誘導（scroll＋ライン）は削除（2026-08-11ユーザーFB） */

@media (min-width: 768px) {
  /* PC: 縦書きキャッチを写真の左に並べる（ムギのレイアウト参照） */
  .fv__inner {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 4rem;
  }
  .fv__catch {
    writing-mode: vertical-rl;
    text-align: initial;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    order: 2; /* 縦書きは右から読むため写真の右に置く */
  }
  .fv__photo { width: 380px; order: 1; }
  .fv__sub {
    order: 0;
    writing-mode: vertical-rl;
    font-size: 1rem;
    align-self: center;
  }
}

/* ============================================================
   2. 想い
   ============================================================ */
/* FVはpinSpacing:falseでピン留めされ、このセクションがぼかし退場中のFVの上に
   被さってくる（ユーザーFB反映）。pinされたFV（transformでスタッキング文脈化）より
   手前に描画するため position+z-index を明示する */
.section.about {
  position: relative;
  z-index: 1;
  padding-top: 3.5rem;
  /* ピン留め時に1画面として見せるため全画面化し、テキストを中央へ。
     流れる写真はoverflow:hiddenでセクション外へはみ出さないよう刈り込む。
     高さは lvh（iOSでアドレスバーが隠れた最大時の高さ）にする。svhだと
     バーが隠れたとき画面より低くなり、下端に地の色の帯が出て写真も途中で切れる */
  min-height: 100vh;  /* lvh非対応ブラウザ用のフォールバック */
  min-height: 100lvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
/* テキストは流れる写真より手前に */
.about .section__title,
.about__body { position: relative; z-index: 1; }

/* --- 背景を流れる工房写真（区間3b） ---
   初期位置はCSSで下方に散らしておき、JS（scrub）が上方向へ流す。
   本文と重ならないよう左右端に配置。ポラロイド風の白フチ＋わずかな傾き */
.about__photos { position: absolute; inset: 0; z-index: 0; }
/* 装飾なしで写真そのものを大きく見せる（ユーザーFB: 枠線・傾け不要） */
.about__photo {
  position: absolute;
  width: 34%;
}
.about__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* 初期位置は全てセクションの下端より外（top:110%〜）。
   テキストが固定位置に到着（ピン開始）するまで写真は1枚も見えず、
   到着後にスクロールで下から流れ込んでくる（ユーザーFB反映） */
.about__photo--1 { left: -4%;  top: 110%; }
.about__photo--2 { right: -4%; top: 150%; }
.about__photo--3 { left: 2%;   top: 190%; }

/* 中間幅のPC/タブレットでは本文と重なりやすいので少し絞る（本文の可読性優先） */
@media (min-width: 768px) and (max-width: 1200px) {
  .about__photo { width: 26%; }
}
@media (max-width: 767px) {
  /* SP: 写真3枚とも表示・大きく見せる（ユーザーFB反映）。
     画面幅の7割弱＋左右に少しはみ出す配置で、通過時の迫力を出す。
     写真が大きいぶん、初期位置の間隔もPC（110/150/190%）より広く取り、
     通過中に写真同士が重ならないようにする */
  .about__photo { width: 68%; }
  .about__photo--1 { left: -8%;  top: 110%; }
  .about__photo--2 { right: -8%; top: 175%; }
  .about__photo--3 { left: -4%;  top: 240%; }
}

/* ※見出し下の罫線は削除（2026-08-11ユーザーFB。SP/PCとも表示しない）

   演出の初期状態は .anim-on 配下にのみ書く（JS無効環境で内容が隠れない保険）。
   出現はJSが .is-shown を付け、こちらのtransitionが動く */
.anim-on .about .section__title {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.anim-on .about .section__title.is-shown { opacity: 1; transform: translateY(0); }

.about__body {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  text-align: center;
  display: grid;
  gap: 0.9rem;
}
/* 段落間の「間」。演出時はこの単位でフェードインさせる */
.about__line--space { margin-top: 2.2rem; }

@media (min-width: 768px) {
  .about__body { font-size: 1.2rem; gap: 1.1rem; }
}

/* ============================================================
   3. クッキーのこと（区間4）
   sticky背景レイヤー＋その上に被さる内容＋商品の横スクロール
   ============================================================ */
/* セクション全体: 区間3の上に「せり上がってくる」ためz-indexを立てる。
   margin-topは登場を遅らせるための「間」— 区間3の写真が先に流れる時間を確保し、
   その後を追いかけるように背景がせり上がる（ユーザーFB反映） */
.cookies {
  position: relative;
  z-index: 2;
  margin-top: 55svh;
  /* セクション自体にも同じ色を敷いておく二重の保険。
     sticky背景の高さが表示領域に一瞬足りない場面（iOSのアドレスバー開閉中など）でも
     下から地の生成り色が覗かない */
  background-color: var(--color-roast);
}
@media (max-width: 767px) {
  /* SP: 写真の間隔を広げたぶん流れ切るまでが長いので、
     背景の登場もさらに遅らせて「写真が先・背景が後」の順を保つ（ユーザーFB反映） */
  .cookies { margin-top: 85svh; }
}

/* 背景レイヤー: 深煎りキャメルの面（トーン反転）。区間3の写真を追いかけて
   せり上がり、stickyで画面上端に貼り付く（nougatshop方式）。
   生成り面と同じドット状の紙テクスチャをクリーム色で重ねて質感を揃える */
.cookies__bg {
  position: sticky;
  top: 0;
  /* iOSでアドレスバーが隠れると表示領域が svh より高くなり、
     背景の下端から地の生成り色が覗いてしまう。
     lvh（バーが隠れた最大時の高さ）で常に画面を覆い切る */
  height: 100vh;  /* lvh非対応ブラウザ用のフォールバック */
  height: 100lvh;
  background-color: var(--color-roast);
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    radial-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px);
  background-size: 7px 7px, 5px 5px;
  background-position: 0 0, 3px 3px;
  overflow: hidden;
}

/* 内容側: 固定済みの背景の上に、見出し＋リード＋商品がひとかたまりで乗ってくる。
   1画面をflex縦割りにして、ピン中は見出し（head）が上部・商品（hwrap）が残り領域 */
.cookies__main {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  /* 負マージンで背景の直後に食い込ませ、背景のせり上がりに内容が随伴する
     （背景が55%上がった頃に内容の頭が画面下から見え始める。ユーザーFB反映） */
  margin-top: -55svh;
}
.cookies__head {
  text-align: center;
  padding: 4.5rem 1.5rem 0;
}
.cookies__head .section__title { margin-bottom: 1rem; }
.cookies__head .section__title-en { color: var(--color-roast-deep); }
.cookies__lead { max-width: 640px; margin-inline: auto; }

/* 横スクロールの入れ物。JSが .cookies__main をピン留めしてトラックを横に流す。
   アニメOFF時は普通の横スクロール領域として触れるようにフォールバック */
.cookies__hwrap {
  flex: 1;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.anim-off .cookies__hwrap { overflow-x: auto; }
.cookies__track { display: flex; }

/* 商品カード: 1枚=1画面ぶんの横幅。高さは見出しの下の残り領域に収める */
.cookie-item {
  flex: 0 0 100vw;
  display: grid;
  align-content: center;
  gap: 1.25rem;
  padding: 2rem 1.5rem 3rem;
}
.cookie-item__photo {
  border-radius: 6px;
  overflow: hidden;
}
.cookie-item__photo img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.cookie-item__name {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--color-roast-deep); /* 淡いキャメル面では深煎り色が商品名のアクセント */
  margin-bottom: 0.5rem;
}
/* 説明文は3行ぶんの高さを確保する。
   商品ごとに行数が違うとカードの中身の高さが変わり、中央揃えの結果
   写真の位置が商品ごとに上下にズレてしまうため（375px基準で最大3行） */
.cookie-item__desc { min-height: calc(var(--lh-body) * 3em); }

@media (min-width: 768px) {
  .cookie-item {
    grid-template-columns: minmax(0, 480px) minmax(0, 420px);
    justify-content: center;
    align-items: center;
    gap: 3.5rem;
  }
}

/* ============================================================
   4. ギフト
   ============================================================ */
.gift__lead { margin-bottom: 3rem; }
.gift__cards { display: grid; gap: 2rem; }

.gift-card {
  background: var(--color-white);
  border-radius: 8px;
  overflow: hidden;
  /* 影は薄く。ベージュの世界観では強い影が浮く */
  box-shadow: 0 2px 12px rgba(74, 59, 42, 0.08);
}
.gift-card__photo { overflow: hidden; }
.gift-card__photo img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  width: 100%;
  /* フェーズ2のホバーズームに備えて transition だけ先に定義 */
  transition: transform 0.6s ease;
}
.gift-card__name {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  padding: 1.25rem 1.25rem 0.25rem;
}
.gift-card__desc { padding: 0 1.25rem 1.5rem; font-size: 0.95rem; }

@media (min-width: 768px) {
  .gift__cards { grid-template-columns: 1fr 1fr; }
  /* ホバーでゆっくりズーム（PCのみ。タッチ端末では発火しない） */
  .gift-card:hover .gift-card__photo img { transform: scale(1.05); }
}

/* ============================================================
   5. 季節のおやつ（白地・タブ切り替え）
   ============================================================ */
.season__lead { margin-bottom: 2.5rem; }

/* タブ本体: ブラウザのタブ風（ユーザーFB反映）。
   上だけ角丸のタブがカードの上辺に直接乗り、選択中はカードと同じ色で
   塗ることで「開いているタブとカードが一枚につながって見える」仕掛け */
.season__tabs {
  display: flex;
  align-items: flex-end; /* 選択中タブを少し背伸びさせるための基準線 */
  gap: 4px;
  padding: 0 0.75rem; /* カードの角丸とタブが重ならないよう左右に逃げを作る */
  margin-bottom: 0;   /* タブとカードを密着させる */
}
.season__tab {
  flex: 1;
  max-width: 120px;
  padding: 0.65rem 0;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  letter-spacing: 0.2em;
  text-indent: 0.2em; /* letter-spacingの右余白ぶんを打ち消して1文字を中央に */
  text-align: center;
  color: rgba(74, 59, 42, 0.55); /* 非選択は文字も一段沈める */
  background: rgba(185, 138, 78, 0.14); /* 非選択タブは奥にある薄い色 */
  border: none;
  border-radius: 10px 10px 0 0; /* 上だけ角丸＝タブの形 */
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease,
              padding 0.25s ease, margin 0.25s ease;
}
.season__tab:hover { background: rgba(185, 138, 78, 0.24); }
/* 選択中: カードと同色で塗って一体化＋少しだけ背が高くなり「手前に出ている」感を出す。
   色だけでなく高さの差でも選択状態が分かる（色覚特性への配慮）。
   背伸びぶん（padding-top +0.25rem）は margin-top -0.25rem で相殺し、
   レイアウト上の高さを常に一定にする＝切り替え時に下のカードがガタつかない */
.season__tab.is-active {
  background: #EAE0CC; /* .season__panels と同色。境界が消えてつながって見える */
  color: var(--color-text);
  padding: 0.9rem 0 0.65rem;
  margin-top: -0.25rem; /* タブは上方向へだけ伸びる（カード位置に影響しない） */
}
/* キーボード操作時のフォーカスを明示（マウス操作時は出ない :focus-visible） */
.season__tab:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: -3px; /* タブ同士が密着しているため内側に描く */
}

/* パネルの入れ物を淡い茶色のカードにする（ユーザーFB反映）。
   縮小/拡大アニメはパネル側に掛かるので、カードの枠は動かず安定して見える */
.season__panels {
  background: #EAE0CC; /* 生成りより一段濃い淡茶（塗りつぶし） */
  border-radius: 10px;
  padding: 1.5rem;
  /* 進行バーをカード上辺に貼るための基準＋角丸からのはみ出しを刈る */
  position: relative;
  overflow: hidden;
}
/* 自動切り替えの進行バー: カード上辺の細いライン。
   JS（GSAP）が scaleX 0→1 を切り替え間隔と同じ時間で動かす */
.season__progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  transition: opacity 0.4s ease;
}
.season__progress-bar {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--color-main);
  transform: scaleX(0);     /* 初期は空。伸ばすのはJS */
  transform-origin: left;   /* 左から右へ満ちていく */
}
/* 手動操作で自動切り替えを止めたらバーごと静かに消す */
.season__progress.is-off { opacity: 0; }

.season__panel { display: grid; gap: 1.5rem; }
/* display指定はブラウザ標準の [hidden]（display:none）より強いので、
   非選択パネルを消すために明示的に打ち消す */
.season__panel[hidden] { display: none; }
.season__photo { border-radius: 6px; overflow: hidden; }
.season__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* ※月表示（March — May 等）は削除（2026-08-11ユーザーFB） */
.season__name {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  margin-bottom: 0.75rem;
}
/* 季節ごとに文章量が違ってもパネルの高さが変わらないよう、3行ぶん確保する
   （切り替えたときにページがガタつくのを防ぐ） */
.season__desc { min-height: calc(var(--lh-body) * 3em); }

@media (min-width: 768px) {
  .season__panels { padding: 2.5rem; }
  .season__panel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 3rem;
  }
  .season__text { padding-right: 2rem; }
}

/* ============================================================
   6. クロージング
   ============================================================ */
.closing {
  position: relative;
  min-height: 70svh;
  display: grid;
  place-content: center;
  text-align: center;
  overflow: hidden;
}
/* 背景写真は疑似要素でなくdivで持つ（パララックスさせるため独立要素にしてある）。
   上下に余白ぶんの高さを足してあるのは、縦に動かしたときに端が欠けないようにするため */
.closing__bg {
  position: absolute;
  inset: -12% 0;
  /* 締めの背景: クッキーとお茶の食卓（家でのおやつの時間）。
     パン屋の陳列棚から差し替え（焼菓子店の世界観に合わせるため） */
  background-image: url("https://images.unsplash.com/photo-1451475836122-926a326bda4f?w=1600&q=70");
  background-size: cover;
  background-position: center;
}
/* 写真の上に生成りの薄幕をかけて文字の可読性を確保 */
.closing__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(243, 237, 226, 0.55);
}
.closing__inner { position: relative; z-index: 1; padding: 2rem 1.25rem; }
.closing__copy {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 5vw, 2.2rem);
  letter-spacing: 0.15em;
  margin-bottom: 2rem;
}
.closing__cta {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-text);
  font-weight: 700;
  text-decoration: none;
  padding: 1rem 2.5rem;
  border-radius: 999px;
  letter-spacing: 0.1em;
  transition: opacity 0.3s;
}
.closing__cta:hover { opacity: 0.85; }

/* ============================================================
   フッター
   ============================================================ */
.footer {
  text-align: center;
  padding: 3.5rem 1.25rem 2.5rem;
}
.footer__name {
  font-family: var(--font-serif);
  letter-spacing: 0.2em;
}
.footer__info {
  font-size: 0.85rem;
  margin-top: 0.5rem;
}
.footer__note {
  font-size: 0.8rem;
  opacity: 0.7;
  margin-top: 1rem;
}