/* ==========================================================================
   L'irréel cafe — TOPページ専用スタイル
   Figma: 22-258（案2）をセクションごとに実装。座標は1440×796等の%変換
   ========================================================================== */

/* --------------------------------------------------------------------------
   FV（ヒーロー）Figma 22:259 — 1440×796
   ① 写真に重なる文字部分だけ白、外はネイビー（テキスト2層＋clip-path）
   -------------------------------------------------------------------------- */
.fv {
  position: relative;
  z-index: 1; /* 右下の円が後続セクションの背景より上に描かれるように */
  width: 100%;
  aspect-ratio: 1440 / 796;
  overflow: visible; /* 右下の円がCONCEPT方向へはみ出す（横はbodyのoverflow-x:clipで処理） */
  background-color: var(--color-white);
  color: var(--color-navy);
}

/* PC: 下部キャッチコピーが初期表示で見切れないよう高さをビューポート内に制限
   （FV上端オフセット≒76px＋下余白。子は全て%配置なので写真矩形とclip-pathはズレない） */
@media (min-width: 768px) {
  .fv {
    max-height: calc(100svh - 100px);
  }
}

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

/* --------------------------------------------------------------------------
   追従ヘッダー（ロゴ＋ナビ — 2026-07-05 CHUMさん指示でスクロール固定化）
   座標はFigma FVのまま: ロゴ(47,43/151×40)、ナビ2行(y45/73)×3列(x358/517/693)
   -------------------------------------------------------------------------- */
.top-header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 124px; /* 100px→124px: メニューの上下に余白を追加（2026-07-11 CHUMさん指示） */
  z-index: 200;
  color: var(--color-navy);
  pointer-events: none; /* 帯全体はクリックを透過し、リンクだけ受ける */
}

/* すりガラス帯（2026-07-05 CHUMさん相談→採用）。下端はふわっとフェード
   2026-07-13 CHUMさんFB: 範囲を下へ拡大（-36px）・コンパクト時は非表示 */
.top-header::before {
  content: "";
  position: absolute;
  inset: 0 0 -36px;
  background-color: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
  mask-image: linear-gradient(to bottom, #000 70%, transparent);
  transition:
    background-color var(--duration-hover) var(--ease-soft),
    opacity var(--duration-hover) var(--ease-soft);
}

/* ハンバーガー切替後はすりガラス不要（ロゴ＋二本線だけを浮かせる） */
.top-header.is-compact::before {
  opacity: 0;
}

.top-header.is-on-dark::before {
  background-color: rgba(35, 74, 112, 0.45); /* ネイビーセクション上では紺のすりガラス */
}

.top-header a {
  pointer-events: auto;
}

.top-header__brand {
  position: absolute;
  left: 3.264%;    /* 47/1440 */
  top: 47px;       /* ナビ2行（57/85px）との縦中心に合わせる */
  width: 13%;      /* 151/1440=10.486% → ひと回り拡大（2026-07-11 CHUMさん指示） */
  aspect-ratio: 151 / 40; /* SVGがheight=100%指定のためコンテナ側で比率を作る */
}

.top-header__brand img {
  display: block;
  width: 100%;
  height: 100%;
}

.top-header__nav {
  font-family: var(--font-en-serif);
  font-size: var(--fs-nav);
  font-weight: 500;
  letter-spacing: var(--ls-nav);
}

.top-header__nav a {
  position: absolute;
  transform: translateY(-50%);
  white-space: nowrap;
  transition: opacity var(--duration-hover) var(--ease-soft);
}

.top-header__nav a:hover,
.top-header__nav a:focus-visible {
  color: var(--color-pink-gold); /* 優しいピンクゴールドに変化 */
}

/* 帯124px化に合わせて2行を縦センターへ（上下の余白を均等に確保） */
.top-header__nav-concept   { left: 24.861%; top: 57px; }
.top-header__nav-menu      { left: 24.861%; top: 85px; }
.top-header__nav-specialty { left: 35.903%; top: 57px; }
.top-header__nav-access    { left: 35.903%; top: 85px; }
.top-header__nav-news      { left: 48.125%; top: 57px; }
.top-header__nav-reserve   { left: 48.125%; top: 85px; } /* NEWSと頭揃え */

/* メイン写真（左端〜1203px・下端まで） */
.fv__photo {
  position: absolute;
  left: -0.139%;   /* -2/1440 */
  top: 25.377%;    /* 202/796 */
  width: 83.681%;  /* 1205/1440 */
  height: 74.623%; /* 594/796 */
}

.fv__photo img {
  object-fit: cover;
}

/* 左上の細い円の線（写真の上に重なる） */
.fv__deco-tl {
  position: absolute;
  left: -18.333%;  /* -264/1440 */
  top: -39.699%;   /* -316/796 */
  width: 39.046%;  /* 562/1440 */
  height: 73.241%; /* 583/796 */
}

/* 写真の矩形でクリップするレイヤー（写真に被った線を白く見せる用） */
.fv__clip-photo {
  position: absolute;
  inset: 0;
  clip-path: inset(25.377% 16.458% 0 0); /* 写真: top202 / 右端1203 / 下端まで / 左0 */
  pointer-events: none;
}

/* 右下の円（Figma 22:266 — 1109,398 / 757×779 / 中身-6.9°回転）
   CONCEPTへつながるようFV下端からはみ出す。写真に被ってもネイビーのまま */
.fv__deco-br {
  position: absolute;
  left: 77.014%;   /* 1109/1440 */
  top: 50%;        /* 398/796 */
  width: 52.606%;  /* 757.534/1440 */
  height: 97.909%; /* 779.351/796 */
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.fv__deco-br > div {
  width: 89.501%;  /* 678/757.534 */
  aspect-ratio: 678 / 703;
  transform: rotate(-6.9deg);
}

/* 写真上の白ロゴ（2円＋L'irréel cafe＋タグライン） */
.fv__logo {
  position: absolute;
  left: 7.708%;    /* 111/1440 */
  top: 47.362%;    /* 377/796 */
  width: 23.056%;  /* 332/1440 */
  height: 29.523%; /* 235/796 */
}

/* --- ① キャッチコピー2層 ---
   ベース層=ネイビー。白層=同座標の複製を写真の矩形でclip。
   写真: top 25.377% / right (1440-1203)/1440=16.458% / bottom 0 / left 0 */
.fv__texts {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.fv__texts--white {
  color: var(--color-white);
  clip-path: inset(25.377% 16.458% 0 0);
}

/* 筆記体キャッチ（Whisper 36px — Square Peg廃止ルールで置換）
   Figma同様に1行で写真右端をまたがせる（またいだ先がネイビーになる）。
   Whisperは字幅が広いため右端基準(1375/1440)で1行配置に調整 */
.fv__script {
  position: absolute;
  right: 4.514%;   /* 右端1375/1440 */
  top: 86.181%;    /* 686/796 */
  font-family: var(--font-script);
  font-size: min(36px, 2.5vw);
  line-height: 1.1;
  white-space: nowrap;
}

/* 和文コピー（Shippori Mincho 600・右揃え） */
.fv__copy {
  position: absolute;
  right: 6.181%;   /* 右端1351/1440 */
  top: 91.834%;    /* 731/796 */
  font-family: var(--font-jp);
  font-weight: 600;
  font-size: var(--fs-body);
  line-height: normal;
  text-align: right;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   NEWS帯（Figma 48:17 — 1440×105、FVとCONCEPTの間・白背景）
   最新投稿1件（WPではWP_Queryで差し込み）＋ ② View More小型ボタン
   -------------------------------------------------------------------------- */
.news-band {
  position: relative;
  width: 100%;
  aspect-ratio: 1440 / 105;
  background-color: var(--color-white);
  color: var(--color-navy);
}

.news-band__label {
  position: absolute;
  left: 5.694%;    /* 82/1440 */
  top: 35.238%;    /* 37/105 */
  line-height: normal;
}

.news-band__label-en {
  font-family: var(--font-en-heading);
  font-weight: 700;
  font-size: var(--fs-body);
  margin-bottom: -7px; /* Figma準拠: 筆記体が少し重なる */
}

.news-band__label-script {
  font-family: var(--font-script);
  font-size: min(15px, 1.042vw);
  font-weight: 400;
}

.news-band__title {
  position: absolute;
  left: 13.681%;   /* 197/1440 */
  top: 40%;        /* 42/105 */
  font-weight: 400;
  font-size: var(--fs-body);
  letter-spacing: 0.16px;
  line-height: normal;
  white-space: nowrap;
}

.news-band__line {
  position: absolute;
  left: 5.694%;    /* 82/1440 */
  top: 66.667%;    /* 70/105 */
  width: 33.333%;  /* 480/1440 */
  border-top: 1px solid currentColor;
}

.news-band__more {
  position: absolute;
  left: 29.861%;   /* 430/1440 */
  top: 50.476%;    /* 円中心 53/105 */
  transform: translateY(-50%);
}

/* --------------------------------------------------------------------------
   CONCEPT（Figma 22:286 — 1440×1304、オフホワイト背景）
   -------------------------------------------------------------------------- */
.concept {
  /* カーテン効果は廃止（2026-07-11 林さんFB「被さる演出がみにくい」→
     スクロールで背景色がふわっと替わる方式へ。末尾の「背景フェード」ブロック参照）
     ※relative必須: 絶対配置の子・疑似要素の基準（staticにすると飛ぶ） */
  position: relative;
  width: 100%;
  aspect-ratio: 1440 / 1304;
  background-color: var(--color-bg);
  color: var(--color-navy);
}

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

.concept__heading {
  position: absolute;
  left: 50%;
  top: 17.331%;    /* 226/1304 */
  transform: translateX(-50%);
}

.concept__copy {
  position: absolute;
  left: 50%;
  top: 39.264%;    /* 512/1304 */
  transform: translateX(-50%);
  width: 40.625%;  /* 585/1440 */
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
  text-align: center;
  line-height: normal;
}

.concept__copy-title {
  font-size: var(--fs-title-jp);
  font-weight: 700;
  white-space: nowrap;
}

.concept__copy-body {
  font-size: var(--fs-body);
  font-weight: 700;
}

/* 写真3点 */
.concept__photo-l {
  position: absolute;
  left: 9.028%;    /* 130/1440 */
  top: 23.926%;    /* 312/1304 */
  width: 17.847%;  /* 257/1440 */
  height: 28.911%; /* 377/1304 */
}

.concept__photo-r {
  position: absolute;
  left: 74.097%;   /* 1067/1440 */
  top: 43.021%;    /* 561/1304 */
  width: 17.847%;
  height: 28.911%;
}

.concept__photo-b {
  position: absolute;
  left: 19.931%;   /* 287/1440 */
  top: 77.07%;     /* 1005/1304 */
  width: 21.25%;   /* 306/1440 */
  height: 15.721%; /* 205/1304 */
}

.concept__photo-l img,
.concept__photo-r img,
.concept__photo-b img {
  object-fit: cover;
}

/* 左下の細い2円（Figma Group3） */
.concept__deco {
  position: absolute;
  left: -5.417%;   /* -78/1440 */
  top: 50.92%;     /* 664/1304 */
  width: 36.667%;  /* 528/1440 */
  height: 41.984%; /* 547.469/1304 */
  pointer-events: none;
}

/* SP専用: 文章終わりと1枚目写真の間の二重丸（2026-07-14 林さんFB）。PCでは出さない */
.concept__deco-mid {
  display: none;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   ダーク背景での固定ヘッダー白反転（JS: .is-on-dark を付与）
   -------------------------------------------------------------------------- */
.top-header,
.top-header a {
  transition: color var(--duration-hover) var(--ease-soft);
}

.top-header.is-on-dark {
  color: var(--color-white);
}

.top-header__brand img {
  transition: filter var(--duration-hover) var(--ease-soft);
}

.top-header.is-on-dark .top-header__brand img {
  filter: brightness(0) invert(1); /* ブルーロゴを白に */
}

/* --------------------------------------------------------------------------
   MENU（Figma 22:299 — 1440×4751、ネイビー背景）
   構成: 導入（④円リビール＋見出し）→ COURSE（別セクション挿入） → Savoury Crepe → ⑤縦線 → Crepe
   ※2026-07-07: コース（Figma 96:23）を見出しとSavoury Crepeの間に挟むため、
     元フレームを y=1000 で「導入部（--intro 1440×1000）」と
     「本体（--main 1440×3751）」に分割。%はそれぞれの高さで再計算
   -------------------------------------------------------------------------- */
.menu {
  position: relative;
  width: 100%;
  background-color: var(--color-navy);
  color: var(--color-white);
}

.menu--intro {
  aspect-ratio: 1440 / 1000;
}

.menu--main {
  aspect-ratio: 1440 / 3751;
}

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

/* ④ 円リビール（Figma 22:304 の白2円をCSS円で再現） */
.menu__circles {
  position: absolute;
  left: 29.023%;   /* 417.93/1440 */
  top: 23.3%;      /* 233/1000 */
  width: 42.003%;  /* 604.838/1440 */
  height: 62.504%; /* 625.043/1000 */
  pointer-events: none;
}

.menu__circle {
  position: absolute;
  width: 88.55%;   /* 直径535.59/604.838 */
  height: 85.69%;  /* 535.59/625.043 */
  border: 1px solid currentColor;
  border-radius: 50%;
}

.menu__circle--a { left: 2.166%; top: 11.887%; }
.menu__circle--b { left: 9.259%; top: 2.416%; }

/* MENU見出し＋リード */
.menu__heading {
  position: absolute;
  left: 43.611%;   /* 628/1440 */
  top: 41.2%;      /* 412/1000 */
  width: 12.708%;  /* 183/1440 */
}

.menu__lead {
  position: absolute;
  left: 43.611%;
  top: 57.5%;      /* 575/1000 */
  width: 40.208%;  /* 579/1440 */
  line-height: normal;
}

.menu__lead-title {
  font-size: var(--fs-title-jp);
  font-weight: 700;
  white-space: nowrap;
}

.menu__lead-sub {
  font-size: var(--fs-body);
  font-weight: 700;
}

/* ブロック見出し（Savoury Crepe / Crepe） */
.menu__block-head {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 27px;
  text-align: center;
  line-height: normal;
}

.menu__block-head--savoury {
  left: 35.486%;   /* 511/1440 */
  top: 2.559%;     /* 96/3751 */
  width: 28.958%;  /* 417/1440 */
}

.menu__block-head--crepe {
  left: 37.083%;   /* 534/1440 */
  top: 48.067%;    /* 1803/3751 */
  width: 25.833%;  /* 372/1440 */
}

.menu__block-title {
  font-family: var(--font-en-heading);
  font-weight: 700;
  font-size: var(--fs-heading-en);
  line-height: normal;
  white-space: nowrap; /* Savoury Crepe を改行させない */
}

.menu__block-jp {
  font-size: var(--fs-title-jp);
  font-weight: 700;
  margin-top: -27px; /* タイトル直下に詰める（gapはdescとの間用） */
}

.menu__block-desc {
  font-size: var(--fs-body);
  font-weight: 700;
  white-space: nowrap; /* 中央揃えのまま余計な折り返しをさせない */
}

/* 回転した筆記体（Crêpes Salées / Sucrées） */
.menu__script {
  position: absolute;
  font-family: var(--font-script);
  font-size: var(--fs-script);
  font-weight: 400;
  line-height: normal;
  text-align: center;
  white-space: nowrap; /* 回転テキストは折り返さない */
}

.menu__script--salees {
  left: 61.25%;    /* 882/1440 */
  top: 1.653%;     /* 62/3751 */
  width: 13.273%;
  transform: rotate(13.53deg);
}

.menu__script--sucrees {
  left: 51.736%;   /* 745/1440 */
  top: 46.947%;    /* 1761/3751 */
  width: 14.531%;
  transform: rotate(18.91deg);
}

/* 手書きの金の王冠（Figmaからフラット書き出し→背景透過処理済み）
   Figmaどおり写真の上に重なる（z-indexで前面へ） */
.menu__arrow {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.menu__arrow img {
  height: auto;
}

.menu__arrow--salees {
  left: 40.417%;   /* 582/1440 */
  top: 7.784%;     /* 292/3751 */
  width: 18.013%;  /* 259.39/1440 */
}

.menu__arrow--sucrees {
  left: 40.486%;   /* 583/1440 */
  top: 53.506%;    /* 2007/3751 */
  width: 17.445%;  /* 251.212/1440 */
}

/* 代表メニュー（大きい写真＋説明の横並び） */
.menu__featured {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 70.208%;  /* 1011/1440 */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.menu__featured--savoury { top: 11.144%; } /* 418/3751 */
.menu__featured--crepe   { top: 56.332%; } /* 2113/3751 */

.menu__featured-photo {
  width: 52.423%;  /* 530/1011 */
  aspect-ratio: 530 / 377;
  overflow: hidden;
}

.menu__featured-photo img {
  object-fit: cover;
}

.menu__featured-text {
  width: 36.894%;  /* 373/1011 */
  line-height: normal;
}

/* メニューカード共通 */
.menu__item-title {
  font-size: var(--fs-medium);
  font-weight: 700;
  margin-bottom: 20px;
  line-height: normal;
}

.menu__item-desc {
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: normal;
}

/* 各メニューの金額（2026-07-07 CHUMさん指示・右寄せ） */
.menu__item-price {
  margin-top: 20px;
  font-size: var(--fs-medium);
  font-weight: 700;
  line-height: normal;
  text-align: right;
}

.menu__card {
  position: absolute;
  width: 27.014%;  /* 389/1440 */
}

/* カードのメニュー名は少し小さく（CHUMさん指示 2026-07-05: 1行に収める） */
.menu__card .menu__item-title,
.menu__crepe-card .menu__item-title {
  font-size: min(18px, 1.25vw);
  white-space: nowrap;
}

.menu__card-photo {
  aspect-ratio: 389 / 275;
  overflow: hidden;
  margin-bottom: 28px;
}

.menu__card-photo img {
  object-fit: cover;
}

.menu__card--s1 { left: 8.472%;  top: 24.713%; } /* 122,927/3751 */
.menu__card--s2 { left: 36.458%; top: 24.713%; } /* 525 */
.menu__card--s3 { left: 64.514%; top: 24.713%; } /* 929 */

/* ⑤ 光が流れる縦線（Savoury Crepe と Crepe の間・中央） */
.menu__scroll-line {
  position: absolute;
  left: 50%;
  top: 39.03%;     /* 1464/3751 */
  height: 4.905%;  /* 184/3751 */
  margin: 0;
}

/* Crepe側カード群（flexレイアウト） */
.menu__crepe-cards {
  position: absolute;
  left: 8.472%;    /* 122/1440 */
  top: 70.221%;    /* 2634/3751 */
  width: 83.125%;  /* 1197/1440 */
}

.menu__crepe-row {
  display: flex;
  gap: 0.752%;     /* 9/1197 */
  justify-content: center;
}

.menu__crepe-card {
  width: 32.498%;  /* 389/1197 */
}

.menu__crepe-card--wide {
  width: 33.5%;    /* 401/1197 */
}

.menu__crepe-card .menu__card-photo {
  margin-bottom: 28px;
}

.menu__crepe-card--matcha .menu__card-photo {
  aspect-ratio: 401 / 275;
}

.menu__crepe-card--chocolat {
  margin-top: 77px;
}

/* --------------------------------------------------------------------------
   COURSE（Figma 96:23ベース — ネイビー背景）
   2026-07-11 林さんFBで再構成:
   ・カーテン効果（sticky）廃止 → 背景フェード方式（末尾ブロック参照）
   ・「Seasonal Menu（季節のメニュー・写真左/文章右）」と
     「Special Menu（スペシャルメニュー・横並び2枠）」の2セクションに分割
   ・固定aspect-ratio → フロー型（余白はFigma 96:23の比率を踏襲）
   -------------------------------------------------------------------------- */
.course {
  position: relative; /* relative必須（絶対配置の筆記体の基準） */
  width: 100%;
  padding: 120px 10.139% 150px; /* 左右146/1440 */
  background-color: var(--color-navy);
  color: var(--color-white);
}

/* 連続する2セクション（Seasonal→Special）の間はひと続きに見せる */
.course--seasonal {
  padding-bottom: 20px;
}

.course--special {
  padding-top: 110px;
}

/* スペシャルメニュー→セイボリークレープへの光の縦線（2026-07-14 林さんFB）
   絶対配置のmenu__scroll-lineと違いフロー配置（.scroll-lineのmargin:0 autoを上書き） */
.course__scroll-line {
  height: 150px;
  margin: 110px auto 0;
}

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

/* 見出し（Seasonal Menu ／ Special Menu） */
.course__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: normal;
}

.course__title-en {
  font-family: var(--font-en-heading);
  font-weight: 700;
  font-size: var(--fs-heading-en);
  white-space: nowrap;
}

.course__title-jp {
  font-size: var(--fs-title-jp);
  font-weight: 700;
}

/* 回転した筆記体（Menu de saison / Menu spécial — MENUのCrêpes Saléesと同じ言語） */
.course__script {
  position: absolute;
  left: 61.25%;    /* 882/1440 */
  top: min(89px, 6.181vw); /* 旧89/1137相当（フロー化で実測値に） */
  width: 13.273%;  /* 191.135/1440 */
  font-family: var(--font-script);
  font-size: var(--fs-script);
  font-weight: 400;
  line-height: normal;
  text-align: center;
  white-space: nowrap;
  transform: rotate(13.53deg);
}

/* コース項目の横並び（WP管理画面から件数が増えたら折り返す） */
.course__items {
  width: 100%;
  margin-top: min(100px, 6.944vw); /* 旧: 見出し下端→項目上端の視覚間隔を踏襲 */
  display: flex;
  flex-wrap: wrap;
  column-gap: 7.666%; /* 88/1148 */
  row-gap: 80px;
}

.course__item {
  width: 46.167%;  /* 530/1148 */
  display: flex;
  flex-direction: column;
  line-height: normal;
}

/* プラン名（写真の上・下端揃えで2枚の写真の高さを合わせる） */
.course__item-head {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 86px;   /* Figma: タイトル領域 329→445 からgap分を引いた高さ */
  margin-bottom: 30px;
  font-size: var(--fs-medium);
  font-weight: 700;
}

.course__item-photo {
  aspect-ratio: 530 / 377;
  overflow: hidden;
}

.course__item-photo img {
  object-fit: cover;
}

.course__item-desc {
  margin-top: 28px;
  font-size: var(--fs-body);
  font-weight: 700;
}

/* WP本文（the_content）の段落間 */
.course__item-desc p + p {
  margin-top: 0.8em;
}

.course__item-price {
  margin-top: 22px;
  font-size: var(--fs-medium);
  font-weight: 700;
  text-align: right;
}

/* Seasonal Menu用: 写真左・テキスト右の1項目レイアウト（2026-07-11 林さんFB） */
.course__item--row {
  width: 100%;
  flex-direction: row;
  align-items: flex-start;
  gap: 7.666%;
}

.course__item--row .course__item-photo {
  width: 46.167%; /* Special側の写真と同じ幅・同じ比率 */
  flex-shrink: 0;
}

.course__item--row .course__item-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.course__item--row .course__item-head {
  min-height: 0;
  justify-content: flex-start;
  margin-bottom: 28px;
}

.course__item--row .course__item-desc {
  margin-top: 0;
}

.course__item--row .course__item-price {
  margin-top: 28px;
}

/* --------------------------------------------------------------------------
   SPECIALTY（Figma 22:357 — 1440×2265、白背景）
   ⑥ 円リビール（左上＋右の2円グループ、④と同じ動き）
   -------------------------------------------------------------------------- */
.specialty {
  position: relative;
  width: 100%;
  aspect-ratio: 1440 / 2265;
  background-color: var(--color-white);
  color: var(--color-navy);
}

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

.specialty__circle {
  position: absolute;
  border: 1px solid currentColor;
  border-radius: 50%;
}

/* 左上の2円（Figma 22:360 = Group6 を84.64°回転 → 回転後の中心を直接配置） */
.specialty__circles-tl {
  position: absolute;
  left: -6.042%;   /* -87/1440 */
  top: 0.442%;     /* 10/2265 */
  width: 45.077%;  /* 649.104/1440 */
  height: 27.811%; /* 629.924/2265 */
  pointer-events: none;
}

.specialty__circles-tl .specialty__circle--a { left: 13.727%; top: 10.192%; width: 82.513%; height: 85.025%; }
.specialty__circles-tl .specialty__circle--b { left: 3.76%;   top: 4.783%;  width: 82.513%; height: 85.025%; }

/* 右の2円（Figma 26:17 = Group5 を-6.9°回転） */
.specialty__circles-r {
  position: absolute;
  left: 65.694%;   /* 946/1440 */
  top: 26.358%;    /* 597/2265 */
  width: 41.268%;  /* 594.257/1440 */
  height: 26.992%; /* 611.37/2265 */
  pointer-events: none;
}

.specialty__circles-r .specialty__circle--a { left: 10.945%; top: 4.651%;  width: 83.128%; height: 80.801%; }
.specialty__circles-r .specialty__circle--b { left: 5.927%;  top: 14.547%; width: 83.128%; height: 80.801%; }

.specialty__heading {
  position: absolute;
  left: 50%;
  top: 10.552%;    /* 239/2265 */
  transform: translateX(-50%);
  width: 21.875%;  /* 315/1440 */
}

.specialty__heading .section-heading__en {
  font-weight: 400; /* Figma: SPECIALTYのみ Philosopher Regular */
}

.specialty__copy {
  position: absolute;
  left: 50%;
  top: 23.311%;    /* 528/2265 */
  transform: translateX(-50%);
  width: 40.625%;  /* 585/1440 */
  display: flex;
  flex-direction: column;
  gap: 41px;
  align-items: center;
  text-align: center;
  line-height: normal;
}

.specialty__copy-title {
  font-size: var(--fs-title-jp);
  font-weight: 700;
  white-space: nowrap;
}

.specialty__copy-body {
  font-size: var(--fs-body);
  font-weight: 700;
}

/* 写真6枚のグリッド（3列×2行） */
.specialty__cards {
  position: absolute;
  left: 7.986%;    /* 115/1440 */
  top: 50.905%;    /* 1153/2265 */
  width: 83.333%;  /* 1200/1440 */
  display: flex;
  flex-direction: column;
  gap: 77px;
}

.specialty__row {
  display: flex;
  gap: 6%;         /* 72/1200 */
}

.specialty__card {
  width: 29.333%;  /* 352/1200 */
}

.specialty__card-photo {
  aspect-ratio: 352 / 332;
  overflow: hidden;
  margin-bottom: 20px;
}

.specialty__card-photo img {
  object-fit: cover;
}

/* 珈琲の写真: Figmaの拡大クロップを再現（元写真477×375を352×332窓に-125,-39オフセット）
   → 端の黒い線が切れて写真も大きく見える（2026-07-05 CHUMさん指示） */
.specialty__card-photo--coffee img {
  width: 135.51%;   /* 477/352 */
  height: 112.951%; /* 375/332 */
  max-width: none;
  margin-left: -35.511%; /* -125/352 */
  margin-top: -11.747%;  /* -39/332 */
}

.specialty__card-caption {
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: normal;
}

/* --------------------------------------------------------------------------
   ACCESS（Figma 22:390 — 1440×1951、ネイビー背景）
   ⑦ 営業カレンダーボタンの実戦投入（components.cssの.btn-calendar）
   -------------------------------------------------------------------------- */
.access {
  position: relative;
  width: 100%;
  aspect-ratio: 1440 / 1951;
  background-color: var(--color-navy);
  color: var(--color-white);
}

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

/* 見出し背後の2円（Figma 22:393 = Group7を84.64°回転。SPECIALTY左上と同型） */
.access__circles {
  position: absolute;
  left: 27.431%;   /* 395/1440 */
  top: 11.328%;    /* 221/1951 */
  width: 45.077%;  /* 649.104/1440 */
  height: 32.287%; /* 629.925/1951 */
  pointer-events: none;
}

.access__circle {
  position: absolute;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.access__circles .access__circle--a { left: 13.727%; top: 10.192%; width: 82.513%; height: 85.025%; }
.access__circles .access__circle--b { left: 3.76%;   top: 4.783%;  width: 82.513%; height: 85.025%; }

.access__heading {
  position: absolute;
  left: 50%;
  top: 25.269%;    /* 493/1951 */
  transform: translateX(-50%);
}

.access__heading .section-heading__en {
  font-weight: 400; /* Figma: Philosopher Regular */
}

/* 店名・住所・アクセス情報 */
.access__info {
  position: absolute;
  left: 50%;
  top: 46.694%;    /* 911/1951 */
  transform: translateX(-50%);
  width: 28.056%;  /* 404/1440 */
  display: flex;
  flex-direction: column;
  gap: 29px;
  align-items: center;
  text-align: center;
  line-height: normal;
}

.access__shop-name {
  white-space: nowrap;
}

.access__shop-name-en {
  font-family: var(--font-en-serif);
  font-weight: 700;
  font-size: var(--fs-title-jp);
}

.access__shop-name-jp {
  margin-left: 0.45em;
  font-size: var(--fs-medium);
  font-weight: 700;
}

.access__address,
.access__walk {
  font-size: var(--fs-body);
  font-weight: 700;
}

/* 営業時間＋⑦営業カレンダー
   （2026-07-05 CHUMさん指示: 上の徒歩情報と被らないよう下へ） */
.access__hours {
  position: absolute;
  left: 50%;
  top: 61.2%;      /* 1194/1951（Figma 1118から下げて余白確保） */
  transform: translateX(-50%);
  width: 28.056%;  /* 404/1440 */
  line-height: normal;
}

.access__hours-info {
  margin-left: 7px;
  font-size: var(--fs-body);
  font-weight: 700;
}

.access__hours-line {
  position: absolute;
  left: 0;
  top: 48px;
  width: 100%;
  border-top: 1px solid currentColor;
}

.access__hours .btn-calendar {
  position: absolute;
  left: 52%;       /* Figma: 226/404（ボタン自体の余白ぶん少し左へ） */
  top: -6px;
}

/* 地図（仮画像 → WP化時にGoogle Maps埋込へ差替） */
.access__map {
  position: absolute;
  left: 50%;
  top: 67.247%;    /* 1312/1951 */
  transform: translateX(-50%);
  width: 96.875%;  /* 1395/1440 */
  height: 20.195%; /* 394/1951 */
}

.access__map img {
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   Reserve（Figma 78:9 — 1440×1434、オフホワイト背景）
   Contact 2円見出し＋連絡リンクは承認済みコンポーネントを使用
   -------------------------------------------------------------------------- */
.reserve {
  position: relative;
  width: 100%;
  aspect-ratio: 1440 / 1434;
  background-color: var(--color-bg);
  color: var(--color-navy);
}

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

/* 左の2円（Figma 78:10 = Group8を-177.22°回転。MENU冒頭と同型なので同じ%） */
.reserve__circles {
  position: absolute;
  left: 9.444%;    /* 136/1440 */
  top: 16.109%;    /* 231/1434 */
  width: 42.003%;  /* 604.838/1440 */
  height: 43.588%; /* 625.044/1434 */
  pointer-events: none;
}

.reserve__circle {
  position: absolute;
  width: 88.55%;
  height: 85.69%;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.reserve__circle--a { left: 2.166%; top: 11.887%; }
.reserve__circle--b { left: 9.259%; top: 2.416%; }

.reserve__heading {
  position: absolute;
  left: 23.125%;   /* 333/1440 */
  top: 29.428%;    /* 422/1434 */
  width: 15.625%;  /* 225/1440 */
  display: flex;
  flex-direction: column;
  gap: 42px;
  align-items: center;
}

.reserve__copy {
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  white-space: nowrap;
}

/* 食べログ予約（ネイビー塗り円322px＋QR） */
.reserve__tabelog {
  position: absolute;
  left: 60.903%;   /* 877/1440 */
  top: 29.01%;     /* 416/1434 */
  width: 22.361%;  /* 322/1440 */
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background-color: var(--color-navy);
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: opacity var(--duration-hover) var(--ease-soft);
}

.reserve__tabelog:hover,
.reserve__tabelog:focus-visible {
  opacity: 0.85;
}

.reserve__tabelog-label {
  font-size: var(--fs-script);
  font-weight: 800;
  line-height: normal;
  margin-bottom: -4px;
}

.reserve__tabelog-qr {
  width: 37.888%;  /* 122/322 */
  aspect-ratio: 1 / 1;
}

/* Contact 2円見出し（circle-duo流用） */
.reserve__contact {
  position: absolute;
  left: 48.542%;   /* 塗り円左端 699/1440 */
  top: 70.293%;    /* 1008/1434 */
  --duo-size: 76px;
  font-family: var(--font-en-heading);
  font-weight: 700;
  font-size: var(--fs-large);
}

/* 連絡リンク2つ（contact-link流用） */
.reserve__links {
  position: absolute;
  left: 50%;
  top: 80.893%;    /* 1160/1434 */
  transform: translateX(-50%);
  display: flex;
  gap: 56px;
}

/* --------------------------------------------------------------------------
   instagram帯（Figma 71:103 — 1440×374、ネイビー）
   タイルは仮置き → WP化でSmash Balloonに差替
   -------------------------------------------------------------------------- */
.instagram {
  position: relative;
  width: 100%;
  aspect-ratio: 1440 / 374;
  background-color: var(--color-navy);
  color: var(--color-white);
}

.instagram__tile {
  position: absolute;
  top: 10.695%;    /* 40/374 */
  width: 14.653%;  /* 211/1440 */
  height: 78.342%; /* 293/374 */
  background-color: var(--color-placeholder);
}

.instagram__tile--1 { left: 7.986%; }  /* 115 */
.instagram__tile--2 { left: 25.208%; } /* 363 */
.instagram__tile--3 { left: 59.653%; } /* 859 */
.instagram__tile--4 { left: 76.875%; } /* 1107 */

.instagram__center {
  position: absolute;
  left: 50%;
  top: 40.909%;    /* 153/374 */
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--color-white);
  transition: opacity var(--duration-hover) var(--ease-soft);
}

.instagram__center:hover,
.instagram__center:focus-visible {
  opacity: 0.7;
}

.instagram__label {
  font-family: var(--font-en-heading);
  font-weight: 700;
  font-size: var(--fs-large);
  line-height: normal;
}

.instagram__icon {
  width: 28px;
  height: 28px;
}

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

.instagram__script {
  font-family: var(--font-script);
  font-size: var(--fs-large);
  line-height: normal;
}

/* 帯の上の2円（Figma 74:272 = Group10を84.64°回転） */
.instagram__deco {
  position: absolute;
  left: 39.858%;   /* 574/1440 */
  top: 17.38%;     /* 65/374 */
  width: 19.303%;  /* 277.971/1440 */
  height: 72.128%; /* 269.757/374 */
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.instagram__deco > div {
  width: 88.823%;  /* 246.904/277.971 */
  aspect-ratio: 246.904 / 256.01;
  transform: rotate(84.64deg);
}

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

/* --------------------------------------------------------------------------
   動画エリア（Figma 70:10 — 1440×729）
   ⑩ 動画はクライアントからLINE受領待ち → それまでFigma画像をポスター表示
   -------------------------------------------------------------------------- */
.video-band {
  position: relative;
  width: 100%;
  aspect-ratio: 1440 / 729;
  overflow: hidden;
}

.video-band img,
.video-band video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   フッター（Figma 26:94 — 1440×1236、ネイビー）
   -------------------------------------------------------------------------- */
.footer {
  position: relative;
  width: 100%;
  aspect-ratio: 1440 / 1236;
  background-color: var(--color-navy);
  color: var(--color-white);
}

.footer__inner {
  position: absolute;
  left: 50%;
  top: 19.903%;    /* 246/1236 */
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 76px;
}

.footer__logo {
  width: 39.306vw; /* 566/1440 */
  max-width: 566px;
  aspect-ratio: 566 / 401;
}

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

/* RESERVE円ボタン（circle-label--sm流用・100px輪郭円）
   ホバーで円が白塗りになり文字がネイビーに（2026-07-05 CHUMさん指示） */
.footer__reserve {
  font-family: var(--font-en-serif);
  font-weight: 400;
  font-size: var(--fs-medium);
  letter-spacing: 1px;
  transition:
    background-color var(--duration-hover) var(--ease-soft),
    color var(--duration-hover) var(--ease-soft),
    border-color var(--duration-hover) var(--ease-soft);
}

.footer__reserve:hover,
.footer__reserve:focus-visible {
  background-color: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-navy);
}

.footer__nav {
  display: flex;
  gap: 18px;
  font-family: var(--font-en-serif);
  font-weight: 500;
  font-size: var(--fs-nav);
  letter-spacing: var(--ls-nav);
}

.footer__nav a {
  transition: color var(--duration-hover) var(--ease-soft);
}

.footer__nav a:hover,
.footer__nav a:focus-visible {
  color: var(--color-pink-gold); /* 優しいピンクゴールドに変化 */
}

.footer__privacy,
.footer__copy {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-en-serif);
  font-weight: 400;
  white-space: nowrap;
}

.footer__privacy {
  top: 89.5%;
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.12em;
}

.footer__copy {
  top: 93.042%;    /* 1150/1236 */
  margin: 0;
  font-size: var(--fs-body);
}

.footer__privacy a {
  color: inherit;
  text-decoration: none;
  opacity: 0.78;
  transition: opacity var(--duration-hover) var(--ease-soft);
}

.footer__privacy a:hover,
.footer__privacy a:focus-visible {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* --------------------------------------------------------------------------
   NEWS一覧ページ上部（Figma 74:650 — 固有部分 1440×1305、白背景）
   ACCESS以降はTOPと共通セクションを流用
   -------------------------------------------------------------------------- */
.news-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1440 / 1305;
  background-color: var(--color-white);
  color: var(--color-navy);
}

.news-hero img {
  display: block;
  width: 100%;
  height: 100%;
}

/* 左上の細い2円（FVと同じ素材） */
.news-hero__deco-tl {
  position: absolute;
  left: -18.333%;  /* -264/1440 */
  top: -24.215%;   /* -316/1305 */
  width: 39.046%;
  height: 44.674%; /* 583/1305 */
  pointer-events: none;
}

/* 右の大きな2円（-6.9°回転） */
.news-hero__deco-r {
  position: absolute;
  left: 81.875%;   /* 1179/1440 */
  top: 30.498%;    /* 398/1305 */
  width: 52.606%;
  height: 59.72%;  /* 779.351/1305 */
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.news-hero__deco-r > div {
  width: 89.501%;
  aspect-ratio: 678 / 703;
  transform: rotate(-6.9deg);
}

.news-hero__heading {
  position: absolute;
  left: 50%;
  top: 15.862%;    /* 207/1305 */
  transform: translateX(-50%);
}

/* 記事カード 3列×2行 */
.news-grid {
  position: absolute;
  left: 10.764%;   /* 155/1440 */
  top: 36.398%;    /* 475/1305 */
  width: 78.889%;  /* 1136/1440 */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 3.785%; /* 43/1136 */
  row-gap: 37px;
}

.news-card {
  display: block;
  color: var(--color-navy);
}

.news-card__thumb {
  aspect-ratio: 350 / 222;
  overflow: hidden;
  background-color: var(--color-placeholder);
  margin-bottom: 20px;
}

.news-card__thumb img {
  object-fit: cover;
}

.news-card__title {
  font-size: var(--fs-medium);
  font-weight: 600;
  letter-spacing: 0.2px;
  line-height: normal;
}

.news-card__date {
  font-size: min(14px, 0.972vw);
  font-weight: 700;
  margin-top: 20px;
  line-height: normal;
}

.news-card__arrow {
  display: block;
  width: 20.5px;
  aspect-ratio: 21 / 7.364; /* SVGがheight=100%指定のためコンテナ側で比率を作る */
  margin: 5px 0 5px auto; /* 右寄せ */
  transition: transform var(--duration-hover) var(--ease-soft);
}

.news-card__arrow img {
  width: 100%;
  height: 100%;
}

.news-card__line {
  border-top: 1px solid currentColor;
}

.news-card:hover .news-card__arrow,
.news-card:focus-visible .news-card__arrow {
  transform: translateX(6px); /* ホバーで矢印がすっと進む */
}

/* --------------------------------------------------------------------------
   NEWS記事詳細ページ上部（Figma 74:277 — 固有部分 1440×1305、ネイビー背景）
   白い記事パネルの中身はWP化で投稿本文（営業カレンダー画像等）が入る
   -------------------------------------------------------------------------- */
.single-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1440 / 1305;
  background-color: var(--color-navy);
  color: var(--color-white);
}

.single-hero img {
  display: block;
  width: 100%;
  height: 100%;
}

.single-hero__deco-tl {
  position: absolute;
  left: -18.333%;
  top: -24.215%;
  width: 39.046%;
  height: 44.674%;
  pointer-events: none;
}

.single-hero__deco-r {
  position: absolute;
  left: 77.014%;   /* 1109/1440 */
  top: 30.498%;    /* 398/1305 */
  width: 52.606%;
  height: 59.72%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.single-hero__deco-r > div {
  width: 89.501%;
  aspect-ratio: 678 / 703;
  transform: rotate(-6.9deg);
}

.single-hero__heading {
  position: absolute;
  left: 50%;
  top: 14.176%;    /* 185/1305 */
  transform: translateX(-50%);
}

/* 白い記事パネル（WP: この中に entry-content が入る） */
.single-hero__panel {
  position: absolute;
  left: 9.028%;    /* 130/1440 */
  top: 30.498%;    /* 398/1305 */
  width: 82.639%;  /* 1190/1440 */
  height: 69.502%; /* 907/1305 */
  background-color: var(--color-bg);
  color: var(--color-navy);
}

.single-hero__title {
  position: absolute;
  left: 50%;
  top: 9.482%;     /* 86/907 */
  transform: translateX(-50%);
  font-size: var(--fs-title-jp);
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
  text-align: center;
}

.single-hero__title-line {
  position: absolute;
  left: 50%;
  top: 18.412%;    /* 167/907 */
  transform: translateX(-50%);
  width: 20.252%;  /* 241/1190 */
  border-top: 1px solid currentColor;
}

/* --------------------------------------------------------------------------
   Contactページ（Figmaデザインなし → NEWS詳細の骨格＋既存コンポーネントで設計）
   -------------------------------------------------------------------------- */
.contact-hero {
  position: relative;
  z-index: 1; /* 右下の円が後続のフッターの上に描かれるように */
  background-color: var(--color-navy);
  color: var(--color-white);
  padding: 160px 0 120px;
}

.contact-hero img {
  display: block;
  width: 100%;
  height: 100%;
}

.contact-hero__heading {
  position: relative;
  margin: 0 auto;
}

/* パネルと円をまとめる基準枠（円はパネルの角に「かかる」配置。2026-07-05 CHUMさん指示） */
.contact-panel-wrap {
  position: relative;
  width: 82.639%;
  max-width: 1190px;
  margin: 64px auto 0;
}

/* 左上の円: パネル左上の角にかぶる（回転アニメはimg側の.slow-spin） */
.contact-hero__deco-tl {
  position: absolute;
  left: -23%;
  top: -280px;
  width: 47%;
  aspect-ratio: 562.268 / 583;
  pointer-events: none;
}

/* 右下の円: パネル右下の角にかかり、そのままフッターまで途切れず伸びる */
.contact-hero__deco-r {
  position: absolute;
  right: -24%;
  bottom: -450px;
  width: 62%;
  aspect-ratio: 757.534 / 779.351;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.contact-hero__deco-r > div {
  width: 89.501%;
  aspect-ratio: 678 / 703;
  transform: rotate(-6.9deg);
}

/* --------------------------------------------------------------------------
   WP用フロー版（コンテンツ量でセクションが伸びる）
   -------------------------------------------------------------------------- */
/* NEWS一覧: 投稿数・ページネーションに対応 */
.news-hero--flow {
  aspect-ratio: auto;
  padding: 150px 0 120px;
}

.news-hero--flow .news-hero__heading {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  margin: 0 auto 90px;
}

.news-hero--flow .news-grid {
  position: relative;
  left: auto;
  top: auto;
  margin: 0 auto;
}

.news-pagination {
  margin: 80px auto 0;
  display: flex;
  justify-content: center;
  gap: 28px;
  font-family: var(--font-en-serif);
  font-size: var(--fs-body);
  letter-spacing: var(--ls-nav);
  color: var(--color-navy);
}

.news-pagination .page-numbers.current {
  opacity: 0.45;
}

.news-pagination a {
  transition: color var(--duration-hover) var(--ease-soft);
}

.news-pagination a:hover,
.news-pagination a:focus-visible {
  color: var(--color-pink-gold);
}

/* NEWS詳細: 本文の長さでパネルが伸びる */
.single-hero--flow {
  aspect-ratio: auto;
  padding: 150px 0 140px;
}

.single-hero--flow .single-hero__heading {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  margin: 0 auto;
}

.single-hero--flow .single-hero__panel {
  position: relative;
  left: auto;
  top: auto;
  width: 82.639%;
  max-width: 1190px;
  height: auto;
  min-height: 480px;
  margin: 64px auto 0;
  padding: 72px 6% 100px;
}

.single-hero--flow .single-hero__title {
  position: static;
  transform: none;
  margin: 0 auto;
}

.single-hero--flow .single-hero__title-line {
  position: static;
  transform: none;
  margin: 24px auto 0;
}

.single-hero__meta {
  margin: 16px auto 0;
  text-align: center;
  font-size: min(14px, 0.972vw);
  font-weight: 700;
}

.single-hero__content {
  max-width: 680px;
  margin: 56px auto 0;
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 2;
  text-align: center; /* 記事本文はセンター揃え（2026-07-14 CHUMさんFB・サイト全体のセンター基調に合わせる） */
}

.single-hero__content img {
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 24px auto;
  display: block;
}

.single-hero__content p {
  margin-bottom: 1em;
}

/* 白パネル */
.contact-panel {
  position: relative; /* 円より手前に描画され、角の重なり部分は裏に隠れる */
  width: 100%;
  padding: 80px 6% 100px;
  background-color: var(--color-bg);
  color: var(--color-navy);
}

.contact-panel__lead {
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 2;
  text-align: center;
}

/* クイックリンク（電話・食べログ・インスタ） */
.contact-panel__quick {
  display: flex;
  gap: 64px;
  justify-content: center;
  margin-top: 56px;
  flex-wrap: wrap;
}

/* フォーム */
.contact-form {
  max-width: 585px;
  margin: 72px auto 0;
  display: flex;
  flex-direction: column;
  gap: 44px;
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact-form__label {
  font-size: min(14px, 0.972vw);
  font-weight: 700;
  letter-spacing: 1px;
}

.contact-form__required {
  margin-left: 8px;
  font-size: min(12px, 0.833vw);
  color: var(--color-pink-gold);
}

.contact-form input,
.contact-form textarea {
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 1px solid color-mix(in srgb, var(--color-navy) 45%, transparent);
  border-radius: 0;
  padding: 8px 4px;
  font-family: var(--font-jp);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--color-navy);
  transition: border-color var(--duration-hover) var(--ease-soft);
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-bottom-color: var(--color-navy);
}

.contact-form textarea {
  min-height: 170px;
  resize: vertical;
  line-height: 1.8;
}

/* CF7: プライバシーポリシー同意欄 */
.contact-form__consent {
  font-size: min(14px, 0.972vw);
  line-height: 1.8;
}

.contact-form__consent .wpcf7-list-item {
  margin: 0;
}

.contact-form__consent .wpcf7-list-item label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.contact-form input[type="checkbox"] {
  appearance: auto;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 4px 0 0;
  padding: 0;
  border: 0;
  accent-color: var(--color-navy);
}

.contact-form__consent a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 送信ボタン（2円 circle-duo・SENDが吸収されるホバー） */
.contact-form__send-wrap {
  display: flex;
  justify-content: center;
  margin-top: 12px;
  padding-left: 42px; /* 輪郭円が左に出るぶんの視覚バランス調整 */
}

.contact-form__send {
  --duo-size: 90px;
  font-family: var(--font-en-serif);
  font-size: var(--fs-nav);
  letter-spacing: var(--ls-nav);
}

/* ==========================================================================
   SP対応（Phase 5 — 2026-07-07着手）
   デザインカンバスは390×850（Figma 99:71 = FV）。%は390/850基準、
   フォントは min(設計px, 設計px/3.9 vw) でFigmaバランスを維持。
   FV以外のSPデザインは未支給 → COURSEのみコード側設計で縦積み（仮）
   ========================================================================== */

/* ハンバーガー（二本線 — 2026-07-13 林さんFB: PCもヒーロー通過後に表示）
   線はリレールの細線言語に合わせる: PC=1px×40px ／ SP=2px×28px（media内で変数上書き） */
.top-header__burger {
  --burger-line-w: 40px;
  --burger-line-h: 1px;
  --burger-top-1: 18px;
  --burger-top-2: 25px;
  --burger-top-open: 21px;
  position: absolute;
  right: 3.264%;   /* ロゴのleft(3.264%)と対称 */
  top: 40px;       /* 124px帯の縦中央（ボタン44px） */
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--duration-hover) var(--ease-soft),
    visibility var(--duration-hover) var(--ease-soft);
}

/* ヒーロー通過後（JS: .is-compact）とナビ開時に表示 */
.top-header.is-compact .top-header__burger,
.top-header.is-nav-open .top-header__burger {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.top-header__burger span {
  position: absolute;
  left: 50%;
  width: var(--burger-line-w);
  height: var(--burger-line-h);
  background-color: currentColor;
  transform: translateX(-50%);
  transition:
    transform var(--duration-hover) var(--ease-soft),
    top var(--duration-hover) var(--ease-soft);
}

.top-header__burger span:nth-child(1) { top: var(--burger-top-1); }
.top-header__burger span:nth-child(2) { top: var(--burger-top-2); }

/* ホバー: 2本の線が互い違いにわずかにスライド */
.top-header__burger:hover span:nth-child(1) { transform: translateX(calc(-50% - 3px)); }
.top-header__burger:hover span:nth-child(2) { transform: translateX(calc(-50% + 3px)); }

/* PC: ヒーロー通過で横並びナビをフェードアウト（ロゴ＋二本線だけの追従ヘッダーへ） */
.top-header__nav {
  transition:
    opacity var(--duration-hover) var(--ease-soft),
    visibility var(--duration-hover) var(--ease-soft);
}

.top-header.is-compact .top-header__nav,
.top-header.is-nav-open .top-header__nav {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* 開いたら白い×に（すりガラス帯は消してネイビーに直接載せる） */
.top-header.is-nav-open {
  color: var(--color-white);
}

.top-header.is-nav-open::before {
  opacity: 0;
}

.top-header.is-nav-open .top-header__brand img {
  filter: brightness(0) invert(1); /* ネイビー全画面ナビの上ではロゴも白 */
}

.top-header.is-nav-open .top-header__burger span:nth-child(1) {
  top: var(--burger-top-open);
  transform: translateX(-50%) rotate(20deg);
}

.top-header.is-nav-open .top-header__burger span:nth-child(2) {
  top: var(--burger-top-open);
  transform: translateX(-50%) rotate(-20deg);
}

/* 全画面ネイビーナビ（元SP専用 → 2026-07-13からPCでもハンバーガーで開く） */
.sp-nav {
  position: fixed;
  inset: 0;
  z-index: 190; /* ヘッダー(200)のすぐ下＝ロゴと×は見える */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 34px;
  background-color: var(--color-navy);
  font-family: var(--font-en-serif);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: var(--ls-nav);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--duration-hover) var(--ease-soft),
    visibility var(--duration-hover) var(--ease-soft);
}

.sp-nav.is-open {
  opacity: 1;
  visibility: visible;
}

.sp-nav a {
  color: var(--color-white);
  transition: color var(--duration-hover) var(--ease-soft);
}

/* ホバーはPCヘッダーと同じピンクゴールド（2026-07-13 CHUMさんFB） */
.sp-nav a:hover,
.sp-nav a:focus-visible {
  color: var(--color-pink-gold);
}

/* ナビ内のFOOD/DRINK（MENU直下に常時展開・MENUに寄せる） */
.sp-nav__sub {
  display: flex;
  gap: 28px;
  margin-top: -24px;
  font-size: 13px;
}

.sp-nav__sub a {
  color: var(--color-white);
  opacity: 0.85;
}

/* ナビ最下部の白ロゴ（SPのみ表示 — 2026-07-13 CHUMさんFB） */
.sp-nav__brand {
  display: none;
  width: 132px;
  margin-top: 14px;
}

.sp-nav__brand img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 767px) {
  /* ----- 追従ヘッダー: ロゴ・ナビは非表示、ハンバーガーのみ（Figma FV準拠） ----- */
  .top-header {
    height: 52px;
  }

  .top-header__brand,
  .top-header__nav {
    display: none;
  }

  /* ハンバーガーはSPでは常時表示。線は短め×太め（2026-07-13 CHUMさん指示: 28px×2px） */
  .top-header__burger {
    --burger-line-w: 28px;
    --burger-line-h: 2px;
    --burger-top-1: 15px;
    --burger-top-2: 21px;
    --burger-top-open: 18px;
    right: 4.4%;     /* 線の右端 366/390 */
    top: 8px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* ----- SPナビ（全画面ネイビー。コアは共通スコープへ移動済み） ----- */
  .sp-nav {
    gap: 30px;
    font-size: 15px;
  }

  .sp-nav__brand {
    display: block;
  }

  /* ----- FV（Figma 99:71 — 390×850） ----- */
  .fv {
    aspect-ratio: 390 / 850;
  }

  /* 白クリップの円レイヤー: SPでも有効化（写真に被る線だけ白 — 2026-07-13 CHUMさんFB）
     クリップはSPの写真矩形（.fv__texts--whiteと同値） */
  .fv__clip-photo {
    clip-path: inset(9.059% 10.256% 11.882% 10.256%);
  }

  /* 円装飾: 左上の大きな2円（2026-07-13 CHUMさんFB第4弾: PCヒーロー並の迫力・
     丸の1/4が見えるくらい） */
  .fv__deco-tl {
    left: -55%;
    top: -12%;
    width: 110%;
    height: 52%;
  }

  /* 円装飾: 右下の大きな2円。写真に大きくかかり、FV下端からNEWS帯方向へ抜ける
     （2026-07-13 CHUMさんFB第4弾: もっと大きく・写真にかかるぐらい） */
  .fv__deco-br {
    left: auto;
    right: -45%;
    top: 62%;
    width: 95%;
    height: 48%;
  }

  /* FV写真: 横からスライドして定位置へ（SPのみ・2026-07-07 CHUMさん指示） */
  .fv__photo {
    animation: fv-photo-slide 1.5s var(--ease-soft) 0.15s both;
  }

  .fv__logo,
  .fv__texts {
    animation: fv-fade-in 1s var(--ease-soft) 1.35s both;
  }

  .fv__photo {
    left: 10.256%;   /* 40/390 */
    top: 9.059%;     /* 77/850 */
    width: 79.487%;  /* 310/390 */
    height: 79.059%; /* 672/850 */
  }

  .fv__logo {
    left: 28.718%;   /* 112/390 */
    top: 19.176%;    /* 163/850 */
    width: 42.308%;  /* 165/390 */
    height: 13.765%; /* 117/850 */
  }

  /* 白レイヤーのクリップをSPの写真矩形に合わせる */
  .fv__texts--white {
    clip-path: inset(9.059% 10.256% 11.882% 10.256%); /* 写真 40,77〜350,749 */
  }

  /* 筆記体キャッチ: 小さめの1行で写真右端をまたがせる（またいだ先はネイビー
     — 2026-07-07 CHUMさん指示で2行→1行・縮小） */
  .fv__script {
    left: 23.333%;   /* 91/390 */
    right: auto;
    top: 38.2%;
    width: auto;
    font-size: min(26px, 6.67vw); /* 1行のまま写真右端350pxをまたぐ幅（末尾がネイビーになる） */
    white-space: nowrap;
  }

  .fv__copy {
    right: 0;        /* Figma: 右端390にフラッシュ */
    top: 43.882%;    /* 373/850（筆記体が1行に戻ったのでFigma位置に） */
    font-size: min(14px, 3.59vw);
  }

  /* ----- 追従RESERVE: FV右下の位置に固定・最初から表示（Figma 101:135） ----- */
  .btn-reserve {
    top: auto;
    right: 0.513%;   /* 2/390 */
    bottom: 13px;    /* 850-837 */
    font-size: 12px;
    letter-spacing: 1px; /* 2pxだと76px円からはみ出すため詰める */
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .btn-reserve.is-visible {
    transform: none;
  }

  .btn-reserve::before {
    display: none;   /* SPは輪郭円なしの1円（Figma Ellipse 9） */
  }

  .btn-reserve .circle-duo__text {
    left: 50%;
    color: var(--color-white);
  }

  .btn-reserve .circle-duo__text::before {
    display: none;
  }

  .btn-reserve.is-on-dark .circle-duo__text {
    color: var(--color-navy); /* ダーク上では白円＋ネイビー文字 */
  }

  /* ----- COURSE: SPデザイン未支給 → 縦積みのコード側設計（仮） ----- */
  .course {
    aspect-ratio: auto;
    padding: 72px 0 80px;
  }

  /* Seasonal→Specialの2セクションの間は、Special→セイボリー間（約150px）と同等の余白に
     （2026-07-14 林さんFB。従来の「ひと続き」8+56pxから拡大） */
  .course--seasonal {
    padding-bottom: 8px;
  }

  .course--special {
    padding-top: 144px;
  }

  /* 光の縦線はSPも中央・控えめの高さ */
  .course__scroll-line {
    height: 110px;
    margin: 56px auto 0;
  }

  .course__heading {
    position: static;
    transform: none;
  }

  .course__title-en {
    font-size: min(40px, 10.256vw);
  }

  .course__title-jp {
    font-size: min(20px, 5.128vw);
  }

  .course__script {
    left: auto;
    right: 5%;
    top: 34px;
    width: auto;
    font-size: min(26px, 6.667vw);
  }

  /* Specialはpadding-top:144pxに拡大したぶん筆記体も追従させ、見出しと一塊に保つ
     （seasonal: 72-34=38px上 と同じ視覚距離。2026-07-14 林さんFB） */
  .course--special .course__script {
    top: 106px;
  }

  .course__items {
    position: static;
    flex-direction: column;
    gap: 56px;
    width: 84.615%;  /* 330/390 */
    margin: 44px auto 0;
  }

  .course__item {
    width: 100%;
  }

  .course__item-head {
    min-height: 0;
    justify-content: flex-start;
    margin-bottom: 20px;
    font-size: min(15px, 3.846vw);
  }

  .course__item-desc {
    margin-top: 20px;
    font-size: min(14px, 3.59vw);
  }

  .course__item-price {
    margin-top: 14px;
    font-size: min(16px, 4.103vw);
  }

  /* 写真左/文章右のSeasonal項目はSPでは縦積み（写真→プラン名→説明→価格） */
  .course__item--row {
    flex-direction: column;
    gap: 0;
  }

  .course__item--row .course__item-photo {
    width: 100%;
  }

  .course__item--row .course__item-head {
    margin: 20px 0 0;
  }

  .course__item--row .course__item-desc {
    margin-top: 14px;
  }

  .course__item--row .course__item-price {
    margin-top: 14px;
  }
}

/* ==========================================================================
   SP対応 その2 — FV以外の全セクション（2026-07-07 CHUMさん「お任せ」→コード側設計）
   方針: aspect-ratio固定の絶対配置 → フロー（縦積み）に切替。
   見出し背後の2円は残し、レイアウト依存の大型装飾（矢印・散らし円）は非表示。
   フォントは tokens.css のSP変数を使用
   ========================================================================== */
@media (max-width: 767px) {
  /* 背景クロスフェードはSPでは少しゆっくりに（フリックスクロールでも
     「ふわっと」変わるのが体感できる長さ — 2026-07-13 CHUMさんFB） */
  body {
    transition-duration: 1.4s;
  }

  /* ----- NEWS帯（2026-07-14 林さんFB: 添付イメージ準拠に刷新） -----
     白背景固定・タイトル大きめ左＋右に「◯─」ボタン・下線は画面の端から端まで
     ※.news-band__moreをstaticにするとbtn-viewmoreのrelativeが消えて丸が飛ぶので注意 */
  .news-band {
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 16px;
    row-gap: 22px;
    align-items: center;
    padding: 30px 8% 40px;
  }

  /* 背景フェードに任せず白で固定（文字色もネイビー固定） */
  body.home .news-band {
    background-color: var(--color-white);
    color: var(--color-navy);
  }

  .news-band__label {
    position: static;
    grid-column: 1 / -1;
  }

  .news-band__label-script {
    font-size: 13px;
  }

  .news-band__title {
    position: static;
    display: block;
    grid-column: 1;
    grid-row: 2;
    white-space: normal;
    font-size: 18px;
  }

  /* 下線は画面いっぱい（端から端・帯の最下端）※基準のtop指定を必ず解除 */
  .news-band__line {
    position: absolute;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: auto;
  }

  /* Moreボタン: タイトルの右横に縦センターで配置
     ※position:relativeを保つ（staticにすると::before/::afterの円と線が飛ぶ） */
  .news-band__more {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    transform: none;
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    --vm-circle: 44px;
    --vm-gap: 12px;
    font-size: 12px;
  }

  /* 線は円の右から出る短い接続線（--sm標準形・少し短め — 2026-07-14 林さんFB） */
  .news-band__more.btn-viewmore--sm::after {
    left: calc(var(--vm-circle) / 2);
    width: calc(var(--vm-circle) / 2 + var(--vm-gap) + 2px);
    transform-origin: left center;
  }

  /* ラベルはSPでは「More News」2行（PC=View More News） */
  .news-band__more .btn-viewmore__text-full {
    display: none;
  }

  .news-band__more .btn-viewmore__text-sp {
    display: inline-block;
    width: min-content;
    line-height: 1.5;
  }

  .news-band__more .btn-viewmore__text::before {
    content: "More News";
    width: min-content;
    line-height: 1.5;
  }

  .btn-viewmore {
    font-size: 12px;
    --vm-line: 60px;
  }

  .btn-viewmore--sm {
    font-size: 11px;
  }

  /* ----- CONCEPT ----- */
  .concept {
    aspect-ratio: auto;
    padding: 88px 7% 96px;
  }

  .concept__heading {
    position: static;
    transform: none;
    margin: 0 auto;
  }

  .concept__copy {
    position: static;
    transform: none;
    width: 100%;
    margin-top: 44px;
    gap: 28px;
  }

  .concept__copy-title {
    white-space: normal;
  }

  /* 改行はマークアップの .br-pc / .br-sp で制御（2026-07-13 CHUMさんFB指定の改行） */

  /* 写真3点は段違いに縦積み */
  .concept__photo-l,
  .concept__photo-r,
  .concept__photo-b {
    position: static;
    height: auto;
  }

  /* 写真の出現に流れを（SPは横からスライドイン — 2026-07-13 CHUMさんFB） */
  .concept__photo-l.reveal {
    transform: translateX(-44px);
  }

  .concept__photo-r.reveal {
    transform: translateX(44px);
  }

  .concept__photo-b.reveal {
    transform: translateY(36px);
  }

  .concept__photo-l.reveal.is-inview,
  .concept__photo-r.reveal.is-inview,
  .concept__photo-b.reveal.is-inview {
    transform: none;
  }

  .concept__photo-l {
    width: 58%;
    aspect-ratio: 257 / 377;
    margin: 52px auto 0 0;
  }

  .concept__photo-r {
    width: 58%;
    aspect-ratio: 257 / 377;
    margin: 28px 0 0 auto;
  }

  .concept__photo-b {
    width: 76%;
    aspect-ratio: 306 / 205;
    margin: 28px auto 0;
  }

  /* 回転二重丸は「写真と写真の間・左側」へ（2026-07-13 CHUMさんFB第4弾）
     photo-r（右寄せ）と photo-b の間の左の余白に重ねる。px固定でSVG比率(528:547)維持 */
  .concept__deco {
    left: -84px;
    right: auto;
    top: auto;
    bottom: 210px;
    width: 260px;
    height: 270px;
  }

  /* 文章終わりと1枚目写真の間の二重丸（2026-07-14 林さんFB）
     photo-l（左寄せ）と対になるよう右側へ・右端から少しはみ出す。SVG比率(528:547)維持 */
  .concept__deco-mid {
    display: block;
    width: 240px;
    height: 249px;
    margin: 44px -70px 0 auto;
  }

  /* ----- MENU導入部（2026-07-07 CHUMさん指示: 円を小さく・見出しを円の中心に・余白広く）
     2026-07-13 CHUMさんFB: 円まわりの上下余白をしっかり・導入文は円の下弧の内側へ ----- */
  .menu--intro {
    aspect-ratio: auto;
    padding: 128px 7% 56px;
  }

  /* 2円は見出しを囲む小さめサイズで、中心＝見出し中心
     （slow-spinのtransformと衝突しないようleftはcalcで中央寄せ。topはpadding-topと連動） */
  .menu__circles {
    left: calc(50% - 115px);
    top: 40px;
    width: 230px;
    height: 238px;
  }

  .menu__heading {
    position: static;
    width: max-content;
    margin: 0 auto;
  }

  .menu__lead {
    position: static;
    width: 100%;
    margin-top: 136px; /* 2026-07-14 林さんFB第2弾: 円の下弧(278px)からさらに余白を */
    text-align: center;
  }

  .menu__lead-title {
    font-size: 16px;
    white-space: normal;
    line-height: 1.7;
  }

  /* サブ2行は円の下弧の外へ（2026-07-13 CHUMさんFB: 円にかからない） */
  .menu__lead-sub {
    font-size: 12px;
    margin-top: 26px;
    line-height: 1.7;
  }

  /* ----- MENU本体 ----- */
  .menu--main {
    aspect-ratio: auto;
    padding: 72px 7% 96px;
  }

  .menu__block-head {
    position: static;
    width: 100%;
    gap: 18px;
  }

  .menu__block-head--savoury,
  .menu__block-head--crepe {
    width: 100%;
  }

  .menu__block-jp {
    margin-top: -14px;
  }

  .menu__block-desc {
    white-space: normal;
  }

  /* 筆記体はブロック見出しの下・右寄せに */
  /* 筆記体は英字見出しの右斜め上へ（PCと同じ言語 — 2026-07-13 CHUMさんFB第4弾）
     relative+topで流し込み位置から引き上げる（回転はPCの値を継承。
     PCの left:61.25% 等がrelativeでも効くため left:0 でリセット必須） */
  .menu__script {
    position: relative;
    left: 0;
    width: max-content;
    margin: 8px 7% 20px auto;
    top: -168px;
  }

  /* SPもPCと同じ王冠を代表写真の右上角に重ねる（2026-07-23 林さんFB）
     PC比率を踏襲: 幅≈写真の1/2・下半分が写真に重なり・右へ少しはみ出す。
     フロー上は直後の.menu__featuredを負マージンで引き上げて重ねる */
  .menu__arrow {
    position: relative;
    left: 0; /* PCの left:40%台 がrelativeでも効くためリセット必須（.menu__scriptと同じ罠） */
    top: 0;
    z-index: 1;
    pointer-events: none;
    width: min(148px, 40vw);
    margin: 0 -26px -72px auto; /* 右端を画面端まで寄せる（2026-07-23 CHUM微調整） */
  }

  .menu__featured {
    position: static;
    transform: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }

  .menu__featured-photo,
  .menu__featured-text {
    width: 100%;
  }

  .menu__item-title {
    margin-bottom: 10px;
  }

  .menu__card .menu__item-title,
  .menu__crepe-card .menu__item-title {
    font-size: 16px;
    white-space: normal;
  }

  .menu__card {
    position: static;
    width: 100%;
    margin-top: 44px;
  }

  .menu__card-photo {
    margin-bottom: 18px;
  }

  .menu__scroll-line {
    /* relative必須: staticにすると::after（光）の基準がセクションになり
       セクション幅の光がclip窓を通過して「線が太くなる」ように見える（2026-07-13根本修正） */
    position: relative;
    left: auto;
    top: auto;
    height: 110px;
    margin: 64px auto 56px;
  }

  /* SPはdrop-shadowがチラつくため、にじみ無しの柔らかいグラデ光に置換。
     幅1pxのまま「キラン」と流れる（2026-07-13 CHUMさんFB: 太くなって見える件の修正） */
  .scroll-line::after {
    filter: none;
    height: 44%;
    background: linear-gradient(
      to bottom,
      transparent,
      rgba(255, 255, 255, 0.95) 50%,
      transparent
    );
  }

  .menu__crepe-cards {
    position: static;
    width: 100%;
    margin-top: 44px;
  }

  .menu__crepe-row {
    flex-direction: column;
    gap: 44px;
  }

  .menu__crepe-card,
  .menu__crepe-card--wide {
    width: 100%;
  }

  .menu__crepe-card--matcha .menu__card-photo {
    aspect-ratio: 389 / 275;
  }

  .menu__crepe-card--chocolat {
    margin-top: 44px;
  }

  .menu__crepe-card .menu__card-photo {
    margin-bottom: 18px;
  }

  /* ----- SPECIALTY（円は見出しの背後・中心に） ----- */
  .specialty {
    aspect-ratio: auto;
    padding: 96px 7% 96px;
  }

  /* 円は見出しの左上（ヒーローSPと同じ言語・同じ迫力 — 2026-07-13 CHUMさんFB第4弾で拡大）
     2026-07-14 林さんFB: 左上の丸をもう少し上へ */
  .specialty__circles-tl {
    left: -34%;
    top: -80px;
    width: 330px;
    height: 322px;
  }

  /* 右の円: 文章の下・右寄せで、次の写真に少し被せる（2026-07-13 CHUMさんFB・第4弾で拡大）
     負のmargin-bottomで写真側へ食い込ませ、z-indexで線を写真の上に描く */
  /* 2026-07-14 林さんFB: もう少し右へ（半円が見える程度）・少し拡大 */
  .specialty__circles-r {
    position: relative;
    left: auto;
    top: auto;
    z-index: 1;
    width: 340px;
    height: 330px;
    margin: 32px -150px -140px auto;
    pointer-events: none;
  }

  .specialty__heading {
    position: static;
    transform: none;
    width: auto;
    margin: 0 auto;
  }

  .specialty__copy {
    position: static;
    transform: none;
    width: 100%;
    margin-top: 44px;
    gap: 28px;
  }

  .specialty__cards {
    position: static;
    width: 100%;
    margin-top: 56px;
    gap: 40px;
  }

  .specialty__row {
    flex-direction: column;
    gap: 40px;
  }

  .specialty__card {
    width: 100%;
  }

  /* ----- ACCESS（円は見出しの背後・中心に） ----- */
  .access {
    aspect-ratio: auto;
    padding: 96px 7% 96px;
  }

  .access__circles {
    left: calc(50% - 115px);
    top: 12px;
    width: 230px;
    height: 224px;
  }

  .access__heading {
    position: static;
    transform: none;
    width: max-content;
    margin: 0 auto;
  }

  .access__info {
    position: static;
    transform: none;
    width: 100%;
    margin-top: 128px; /* 見出し円(下端236px)と店名の間にもう少し余白（2026-07-14 林さんFB） */
    gap: 22px;
  }

  .access__shop-name {
    white-space: normal;
  }

  .access__hours {
    position: static;
    transform: none;
    width: 100%;
    margin-top: 36px;
    text-align: center;
  }

  .access__hours-info {
    margin-left: 0;
  }

  .access__hours-line {
    position: static;
    margin-top: 18px;
  }

  .access__hours .btn-calendar {
    /* ::before/::afterの円と線がボタン基準を保つよう relative で流し込みに */
    position: relative;
    left: auto;
    top: auto;
    margin-top: 18px;
  }

  .access__map {
    position: static;
    transform: none;
    width: 100%;
    height: 300px;
    margin-top: 40px;
  }

  /* ----- Reserve（円は見出しの背後・中心に） ----- */
  .reserve {
    aspect-ratio: auto;
    padding: 96px 7% 96px;
  }

  .reserve__circles {
    left: calc(50% - 115px);
    top: 12px;
    width: 230px;
    height: 238px;
  }

  .reserve__heading {
    position: static;
    width: auto;
    margin: 0 auto;
    gap: 28px;
  }

  /* 円下端(250px)→文章のギャップを「文章→食べログの丸」と同等に（2026-07-14 林さんFB） */
  .reserve__copy {
    margin-top: 120px;
  }

  .reserve__tabelog {
    position: static;
    width: 240px;
    margin: 48px auto 0;
  }

  .reserve__contact {
    /* circle-duoの文字（絶対配置）がボタン基準を保つよう relative で流し込みに */
    position: relative;
    left: auto;
    top: auto;
    display: block;
    margin: 56px auto 0;
    /* 輪郭円が左へズレるぶんシルエット中心が左に寄る→右へ補正して見た目を中央に
       （2026-07-13 CHUMさんFB） */
    transform: translateX(calc(var(--duo-size) * 0.275));
  }

  .reserve__links {
    position: static;
    transform: none;
    width: max-content;
    margin: 48px auto 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
  }

  /* ----- instagram帯（タイル2×2＋中央リンク） ----- */
  .instagram {
    aspect-ratio: auto;
    padding: 48px 7% 56px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 10px;
  }

  .instagram__tile {
    position: static;
    width: 48.6%;
    height: auto;
    aspect-ratio: 211 / 293;
  }

  .instagram__tile--1,
  .instagram__tile--2 {
    order: 1;
  }

  .instagram__center {
    position: static;
    transform: none;
    order: 2;
    width: 100%;
    margin: 22px 0;
  }

  .instagram__tile--3,
  .instagram__tile--4 {
    order: 3;
  }

  .instagram__deco {
    display: none;
  }

  /* ----- フッター ----- */
  .footer {
    aspect-ratio: auto;
    padding: 72px 7% 88px;
  }

  .footer__inner {
    position: static;
    transform: none;
    gap: 44px;
  }

  .footer__logo {
    width: 64vw;
  }

  .footer__nav {
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 18px;
  }

  .footer__privacy,
  .footer__copy {
    position: static;
    transform: none;
    text-align: center;
  }

  .footer__privacy {
    margin-top: 48px;
  }

  .footer__copy {
    margin-top: 14px;
  }

  /* ----- NEWS一覧ページ ----- */
  .news-hero--flow {
    padding: 110px 0 90px;
  }

  .news-hero--flow .news-hero__heading {
    margin-bottom: 56px;
  }

  .news-hero__deco-tl,
  .news-hero__deco-r {
    display: none;
  }

  .news-hero--flow .news-grid {
    width: 86%;
    grid-template-columns: 1fr;
    row-gap: 44px;
  }

  .news-card__date {
    font-size: 12px;
    margin-top: 12px;
  }

  /* ----- NEWS詳細ページ ----- */
  .single-hero--flow {
    padding: 110px 0 100px;
  }

  .single-hero__deco-tl,
  .single-hero__deco-r {
    display: none;
  }

  .single-hero--flow .single-hero__panel {
    width: 90%;
    padding: 48px 6% 64px;
  }

  .single-hero__title {
    white-space: normal;
  }

  .single-hero__meta {
    font-size: 12px;
  }

  .single-hero__content {
    margin-top: 36px;
  }

  /* ----- Contactページ ----- */
  .contact-hero {
    padding: 110px 0 90px;
  }

  .contact-hero__deco-tl,
  .contact-hero__deco-r {
    display: none;
  }

  .contact-panel-wrap {
    width: 90%;
    margin-top: 44px;
  }

  .contact-panel {
    padding: 56px 6% 72px;
  }

  .contact-panel__quick {
    flex-direction: column;
    align-items: center;
    gap: 30px;
    margin-top: 40px;
  }

  .contact-form {
    margin-top: 56px;
    gap: 34px;
  }

  .contact-form__label {
    font-size: 12px;
  }

  .contact-form__required {
    font-size: 10px;
  }

  .contact-form__consent {
    font-size: 12px;
  }

  .contact-form__send-wrap {
    padding-left: 30px;
  }
}

/* --------------------------------------------------------------------------
   SP FVの登場演出（写真スライドイン→ロゴ・文字フェード。767px以下でのみ使用）
   -------------------------------------------------------------------------- */
@keyframes fv-photo-slide {
  from {
    transform: translateX(14%);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

@keyframes fv-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fv__photo,
  .fv__logo,
  .fv__texts {
    animation: none \!important;
  }
}

/* ==========================================================================
   背景フェード（カーテン効果の置き換え — 2026-07-11 林さんFB）
   TOPの各セクションは背景を透明にし、bodyが一枚の背景として
   スクロール位置に応じてふわっと色が替わる。
   JS: main.js が [data-bg] セクションを見て body の data-page-bg を更新
   ========================================================================== */
body {
  transition: background-color 0.9s var(--ease-soft);
}

body[data-page-bg="white"] { background-color: var(--color-white); }
body[data-page-bg="light"] { background-color: var(--color-bg); }
body[data-page-bg="dark"]  { background-color: var(--color-navy); }

/* TOP（body.home）のみ透明化。下層ページ（NEWS/Contact/Drink）は従来どおり不透明 */
.home .news-band,
.home .concept,
.home .menu,
.home .course,
.home .specialty,
.home .access,
.home .reserve,
.home .instagram,
.home .footer {
  background-color: transparent;
  transition: color 0.9s var(--ease-soft); /* 文字色も背景と同期して反転 */
}

/* 境界の通過中も文字が背景に溶けないよう、
   背景色と同期してセクションの文字色を反転させる（フェードの一部として見える） */
body.home[data-page-bg="light"] .menu,
body.home[data-page-bg="white"] .menu,
body.home[data-page-bg="light"] .course,
body.home[data-page-bg="white"] .course,
body.home[data-page-bg="light"] .access,
body.home[data-page-bg="white"] .access,
body.home[data-page-bg="light"] .instagram,
body.home[data-page-bg="white"] .instagram,
body.home[data-page-bg="light"] .footer,
body.home[data-page-bg="white"] .footer {
  color: var(--color-navy);
}

body.home[data-page-bg="dark"] .news-band,
body.home[data-page-bg="dark"] .concept,
body.home[data-page-bg="dark"] .specialty,
body.home[data-page-bg="dark"] .reserve {
  color: var(--color-white);
}

/* 「ドリンクはこちら」ボタンは色指定が明示のため、明るい背景時はネイビー版へ反転 */
body.home[data-page-bg="light"] .menu__drink-cta .btn-viewmore--invert,
body.home[data-page-bg="white"] .menu__drink-cta .btn-viewmore--invert {
  color: var(--color-navy);
}

body.home[data-page-bg="light"] .menu__drink-cta .btn-viewmore--invert::after,
body.home[data-page-bg="white"] .menu__drink-cta .btn-viewmore--invert::after {
  background-color: var(--color-navy);
}

body.home[data-page-bg="light"] .menu__drink-cta .btn-viewmore--invert::before,
body.home[data-page-bg="white"] .menu__drink-cta .btn-viewmore--invert::before {
  border-color: var(--color-navy);
}

body.home[data-page-bg="light"] .menu__drink-cta .btn-viewmore--invert:hover::before,
body.home[data-page-bg="white"] .menu__drink-cta .btn-viewmore--invert:hover::before {
  background-color: var(--color-navy);
}

body.home[data-page-bg="light"] .menu__drink-cta .btn-viewmore--invert .btn-viewmore__text::before,
body.home[data-page-bg="white"] .menu__drink-cta .btn-viewmore--invert .btn-viewmore__text::before {
  color: var(--color-white);
}

@media (prefers-reduced-motion: reduce) {
  body {
    transition: none;
  }

  .home .news-band,
  .home .concept,
  .home .menu,
  .home .course,
  .home .specialty,
  .home .access,
  .home .reserve,
  .home .instagram,
  .home .footer {
    transition: none;
  }
}

/* ==========================================================================
   MENUナビのサブリンク（FOOD / DRINK — 2026-07-11 CHUMさん指示）
   PC: MENUホバーで小さなドロップダウン。SP: ハンバーガー内に常時展開
   ========================================================================== */
.top-header__nav-sub {
  position: absolute;
  left: 24.861%; /* MENUと頭揃え */
  top: 92px; /* MENU行（85px）の直下・ホバーが途切れない距離 */
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 22px 14px;
  background-color: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  pointer-events: auto; /* 非表示時はvisibility:hiddenがクリックも無効化する */
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--duration-hover) var(--ease-soft),
    visibility var(--duration-hover) var(--ease-soft),
    background-color var(--duration-hover) var(--ease-soft);
}

.top-header.is-on-dark .top-header__nav-sub {
  background-color: rgba(35, 74, 112, 0.55);
}

.top-header__nav-menu:hover + .top-header__nav-sub,
.top-header__nav-menu:focus-visible + .top-header__nav-sub,
.top-header__nav-sub:hover,
.top-header__nav-sub:focus-within {
  opacity: 1;
  visibility: visible;
}

.top-header__nav-sub a {
  position: static;
  transform: none;
}

/* ==========================================================================
   「ドリンクはこちら」ボタン（TOP デザートクレープの下 — 2026-07-11 林さんFB）
   ========================================================================== */
.menu__drink-cta {
  display: flex;
  justify-content: flex-end;
  margin-top: 72px;
}

.menu__drink-cta .btn-viewmore {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: var(--fs-body);
  letter-spacing: 1px;
}

/* ==========================================================================
   DRINKページ（2026-07-11 林さんFB — Contactページの白パネル様式を踏襲）
   固定ページのスラッグを「drink」にすると適用される（page-drink.php）
   ========================================================================== */
.drink-hero {
  position: relative;
  z-index: 1; /* 右下の円がフッターの上に描かれるように */
  background-color: var(--color-navy);
  color: var(--color-white);
  padding: 160px 0 120px;
}

.drink-hero img {
  display: block;
  width: 100%;
  height: 100%;
}

.drink-hero__heading {
  position: relative;
  margin: 0 auto;
}

/* 円装飾（Contactページと同じ配置言語） */
.drink-hero__deco-tl {
  position: absolute;
  left: -23%;
  top: -280px;
  width: 47%;
  aspect-ratio: 562.268 / 583;
  pointer-events: none;
}

.drink-hero__deco-r {
  position: absolute;
  right: -24%;
  bottom: -450px;
  width: 62%;
  aspect-ratio: 757.534 / 779.351;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.drink-hero__deco-r > div {
  width: 89.501%;
  aspect-ratio: 678 / 703;
  transform: rotate(-6.9deg);
}

/* 白パネル */
.drink-panel {
  position: relative;
  width: 100%;
  padding: 90px 8% 96px;
  background-color: var(--color-bg);
  color: var(--color-navy);
}

.drink-panel__lead {
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 2;
  text-align: center;
}

/* カテゴリ（Coffee / Tea / Alcohol / Soft Drink） */
.drink-cat {
  max-width: 680px;
  margin: 88px auto 0;
}

.drink-cat__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: normal;
}

.drink-cat__en {
  font-family: var(--font-en-heading);
  font-weight: 700;
  font-size: min(34px, 2.361vw);
}

.drink-cat__jp {
  margin-top: 8px;
  font-size: min(14px, 0.972vw);
  font-weight: 700;
}

.drink-cat__line {
  width: 120px;
  margin: 20px auto 0;
  border-top: 1px solid currentColor;
}

.drink-cat__note {
  margin-top: 30px;
  text-align: center;
  font-size: min(14px, 0.972vw);
  font-weight: 700;
}

/* サブグループ（Alcohol内の Beer / Wine / Cocktails） */
.drink-group {
  margin-top: 52px;
}

.drink-group__title {
  font-family: var(--font-en-serif);
  font-weight: 500;
  font-size: min(20px, 1.389vw);
  letter-spacing: var(--ls-nav);
  text-align: center;
  line-height: normal;
}

/* 品目リスト（名前 …… 価格） */
.drink-list {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.drink-group .drink-list {
  margin-top: 26px;
}

.drink-list__row {
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.drink-list__name {
  font-size: var(--fs-body);
  font-weight: 700;
}

.drink-list__leader {
  flex: 1;
  border-bottom: 1px dotted color-mix(in srgb, var(--color-navy) 45%, transparent);
  transform: translateY(-4px);
}

.drink-list__price {
  font-size: var(--fs-body);
  font-weight: 700;
  white-space: nowrap;
}

.drink-list__desc {
  margin-top: 8px;
  font-size: min(13px, 0.903vw);
  font-weight: 500;
  color: color-mix(in srgb, var(--color-navy) 78%, transparent);
}

.drink-panel__note {
  margin-top: 80px;
  text-align: center;
  font-size: min(13px, 0.903vw);
  font-weight: 700;
}

/* ----- SP ----- */
@media (max-width: 767px) {
  .menu__drink-cta {
    justify-content: center;
    margin-top: 48px;
  }

  .menu__drink-cta .btn-viewmore {
    font-size: 14px;
  }

  /* DRINKページ */
  .drink-hero {
    padding: 110px 0 90px;
  }

  .drink-hero__deco-tl,
  .drink-hero__deco-r {
    display: none;
  }

  .drink-panel {
    padding: 56px 7% 64px;
  }

  .drink-cat {
    margin: 64px auto 0;
  }

  .drink-cat__en {
    font-size: 24px;
  }

  .drink-cat__jp {
    font-size: 12px;
  }

  .drink-cat__note {
    font-size: 13px;
  }

  .drink-group__title {
    font-size: 16px;
  }

  .drink-list {
    gap: 26px;
  }

  .drink-list__desc {
    font-size: 12px;
  }

  .drink-panel__note {
    margin-top: 64px;
    font-size: 12px;
  }
}

/* ==========================================================================
   NEWS一覧の白パネル様式＋404ページ（2026-07-14 林さんFB）
   シェルは .drink-hero / .contact-panel-wrap / .drink-panel を共用
   ========================================================================== */
.news-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: 680px;
  margin: 0 auto;
}

.news-list__link {
  display: flex;
  align-items: baseline;
  gap: 16px;
  color: var(--color-navy);
}

.news-list__title {
  font-size: var(--fs-body);
  font-weight: 700;
  transition: color var(--duration-hover) var(--ease-soft);
}

.news-list__link:hover .news-list__title,
.news-list__link:focus-visible .news-list__title {
  color: var(--color-pink-gold);
}

.news-list__leader {
  flex: 1;
  border-bottom: 1px dotted color-mix(in srgb, var(--color-navy) 45%, transparent);
  transform: translateY(-4px);
}

.news-list__date {
  font-size: min(14px, 0.972vw);
  font-weight: 700;
  white-space: nowrap;
}

.news-list__empty {
  text-align: center;
  font-weight: 700;
}

/* パネル内のページ送り */
.news-panel .news-pagination {
  margin-top: 64px;
}

/* 404パネル */
.notfound-panel__lead {
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 2;
  text-align: center;
}

.notfound-panel__cta {
  margin-top: 56px;
  display: flex;
  justify-content: center;
}

.notfound-panel__cta .btn-viewmore {
  --vm-line: 60px;
}

@media (max-width: 767px) {
  .news-list {
    gap: 26px;
  }

  .news-list__date {
    font-size: 12px;
  }

  .notfound-panel__cta {
    margin-top: 44px;
  }

  .notfound-panel__cta .btn-viewmore {
    font-size: 14px;
    --vm-line: 40px;
  }
}

/* ==========================================================================
   instagram帯 v0.8.3: Smash Balloon本番対応（2026-07-18 CHUMさん指示）
   飾り（Instagram／アイコン／follow me／二重円）が写真に被らないよう、
   全幅（PC含む）で飾り一式を写真グリッドの「上」に出す。
   ========================================================================== */
.instagram {
  aspect-ratio: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: 10px;
  padding: 72px 0 0;
}

/* Smash Balloonのフィードは全幅1ブロックとして下段に */
.instagram #sb_instagram {
  flex: 0 0 100%;
  order: 1;
}

/* プレースホルダー（プラグイン無効時のフォールバック）も下段2×2 */
.instagram__tile {
  position: static;
  width: 49.4%;
  height: auto;
  aspect-ratio: 211 / 293;
  order: 1;
}

.instagram__center {
  position: static;
  transform: none;
  order: -1;
  width: 100%;
  margin: 0 0 80px;
}

/* 二重円は中央の飾りを囲むサイズで上部に重ねる（SP見出し円と同じ趣向） */
.instagram__deco {
  display: flex;
  left: 50%;
  top: 72px;
  width: 230px;
  height: 230px;
  transform: translate(-50%, -70px);
}