@charset "UTF-8";

/* =========================================================
   GOODLIFE GYM LP  /  style.css
   設計方針：モバイルファースト（375px〜）、CSS変数でトンマナ管理
   ブレイクポイント： 768px（タブレット） / 1024px（PC）
   ========================================================= */

/* ---------- 1. デザイントークン ---------- */
:root {
  /* Color */
  --navy:        #0f2745;
  --navy-deep:   #081a30;
  --navy-soft:   #1c3a63;
  --orange:      #ff6b1a;
  --orange-dark: #e15400;
  --orange-soft: #fff3ec;
  /* 青（キャンペーンの「初期費用」・FVの「それが」に使用） */
  --blue:        #1667d8;
  --blue-dark:   #0d4ea8;
  --blue-light:  #5cb4ff;
  --white:       #ffffff;
  --gray-bg:     #f5f7fa;
  --gray-line:   #dfe4ec;
  --gray-text:   #5b6675;
  --text:        #14202f;

  /* Layout */
  --container: 1120px;
  --pad-x: 20px;
  --radius: 14px;
  --radius-lg: 22px;

  /* Effect */
  --shadow-sm: 0 2px 10px rgba(15, 39, 69, .07);
  --shadow-md: 0 10px 30px rgba(15, 39, 69, .12);
  --shadow-lg: 0 18px 50px rgba(15, 39, 69, .18);

  /* Typography */
  --font: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans",
          "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --font-en: "Barlow Condensed", var(--font);

  /* 追従CTAの高さ分の余白（PC・スマホ共通で表示するため両方で確保する） */
  --fixed-cta-h: 76px;
  --header-h: 92px; /* ロゴと、その右に置く店舗名（2行）が収まる高さ */
  /* 上部告知バー（ヘッダーの上に固定） */
  --topbar-h: 34px;
}
@media (min-width: 768px)  { :root { --header-h: 104px; --topbar-h: 42px; --fixed-cta-h: 84px; } }
@media (min-width: 1024px) { :root { --header-h: 116px; } }

/* ヘッダーまわりの固定要素の合計高さ */
:root { --chrome-h: calc(var(--topbar-h) + var(--header-h)); }

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.85;
  color: var(--text);
  background: var(--white);
  letter-spacing: .02em;
  overflow-wrap: anywhere;
  padding-bottom: var(--fixed-cta-h); /* 追従CTA分 */
}
@media (min-width: 768px) {
  body { font-size: 16px; }
}

h1, h2, h3, h4, p, figure, dl, dd, ol, ul { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: opacity .2s, color .2s, background-color .2s; }
a:hover { opacity: .85; }
:where(a, button, summary, input, select, textarea):focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

/* アンカーリンクのスクロール位置調整（固定ヘッダー対策） */
[id] { scroll-margin-top: calc(var(--chrome-h) + 12px); }

/* ---------- 3. 共通パーツ ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.container--narrow { max-width: 760px; }

.section { padding: 56px 0; }
.section--light { background: var(--gray-bg); }
@media (min-width: 768px) { .section { padding: 88px 0; } }

.section__title {
  font-size: clamp(22px, 5.6vw, 34px);
  font-weight: 900;
  line-height: 1.45;
  text-align: center;
  letter-spacing: .04em;
  margin-bottom: 28px;
}
.section__title-en {
  display: block;
  font-family: var(--font-en);
  font-size: clamp(12px, 3vw, 15px);
  font-weight: 700;
  letter-spacing: .28em;
  color: var(--orange);
  margin-bottom: 6px;
}
.section__lead {
  text-align: center;
  font-size: 14px;
  color: var(--gray-text);
  margin-bottom: 32px;
  line-height: 2;
}
/* アクセントカラー統一（.reason__num と同色）。対象＝「先着5名限定のキャンペーン価格」「残りわずか」 */
.section__lead strong { color: var(--orange); font-weight: 700; }

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

/* 汎用：この class を付けた要素をページから非表示にする。
   例）入会キャンペーンを一時的に消したいとき、該当 section の class に is-hidden を足す */
.is-hidden { display: none !important; }

/* --- ボタン --- */
.btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  max-width: 440px;
  margin-inline: auto;
  padding: 16px 22px;
  border: none;
  border-radius: 999px;
  font-family: var(--font);
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  background: var(--navy);
  color: var(--white);
  box-shadow: var(--shadow-md);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); opacity: 1; }
.btn:active { transform: translateY(0); }

.btn__label { font-size: 17px; letter-spacing: .04em; line-height: 1.4; }
.btn__sub   { font-size: 11px; font-weight: 500; opacity: .9; letter-spacing: .06em; }
.btn__micro {
  display: inline-block;
  margin-bottom: 4px;
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
}
.btn__micro strong { color: #ffe27a; }

.btn--primary { background: var(--orange); }
.btn--primary:hover { background: var(--orange-dark); }

.btn--outline {
  background: transparent;
  color: var(--navy);
  border: 2px solid var(--navy);
  box-shadow: none;
  padding: 13px 22px;
}
.btn--outline:hover { background: var(--navy); color: var(--white); }
.btn--outline .btn__label { font-size: 15px; }

.btn--lg { padding: 20px 24px; }
.btn--lg .btn__label { font-size: clamp(17px, 4.6vw, 21px); }

/* 光るアニメーション付きCTA */
.btn--glow {
  background: linear-gradient(100deg, var(--orange) 0%, #ff8a3d 50%, var(--orange) 100%);
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
  animation: pulse 2.4s ease-in-out infinite;
}
.btn--glow::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -80%;
  width: 55%;
  height: 220%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%);
  transform: rotate(18deg);
  animation: shine 3.2s ease-in-out infinite;
  z-index: -1;
}
@keyframes shine {
  0%   { left: -80%; }
  55%  { left: 130%; }
  100% { left: 130%; }
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 10px 26px rgba(255, 107, 26, .35), 0 0 0 0 rgba(255, 107, 26, .45); }
  50%      { box-shadow: 0 14px 34px rgba(255, 107, 26, .5),  0 0 0 14px rgba(255, 107, 26, 0); }
}

/* --- バッジ --- */
.badge {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.4;
  white-space: nowrap; /* バッジ内で語中改行させない */
}
.badge--cheap {
  background: var(--orange);
  color: var(--white);
  font-size: clamp(16px, 4.6vw, 19px);
  font-weight: 900;
  padding: 9px 22px;
  letter-spacing: .08em;
  box-shadow: 0 8px 22px rgba(255, 107, 26, .5);
  animation: badgeBeat 2.6s ease-in-out infinite;
}
@keyframes badgeBeat {
  0%, 100% { transform: scale(1) rotate(-10deg); }
  50%      { transform: scale(1.06) rotate(-10deg); }
}
.badge--outline {
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .55);
  color: var(--white);
  backdrop-filter: blur(4px);
}
/* 実績数値バッジ（数字だけ一段大きく見せる） */
.badge--stat {
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .5);
  color: var(--white);
  backdrop-filter: blur(4px);
  letter-spacing: .04em;
}
.badge--stat strong {
  font-size: 1.28em;
  font-weight: 900;
  color: #ffc79b;
  padding-inline: 2px;
}

/* ---------- 4. 上部告知バー ---------- */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--topbar-h);
  padding-inline: 10px;
  background: linear-gradient(90deg, var(--orange-dark) 0%, var(--orange) 50%, var(--orange-dark) 100%);
  color: var(--white);
}
.topbar__inner {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(11px, 3.1vw, 14px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .02em;
  white-space: nowrap;
}
/* 「残り5名」バッジ：心臓の鼓動のように2回脈打ちながら、パキッと発光して強く目を引く */
.topbar__count {
  position: relative;
  padding: 2px 10px;
  border-radius: 999px;
  background: #ffe27a;
  color: var(--navy-deep);
  font-weight: 900;
  letter-spacing: .04em;
  transform-origin: center;
  animation: countBeat 1.5s cubic-bezier(.36, .07, .19, .97) infinite;
  will-change: transform, box-shadow, background-color;
}
.topbar__count strong { font-size: 1.15em; }
/* 拡大の中心がずれないよう、発光リングは疑似要素で重ねる */
.topbar__count::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  animation: countRing 1.5s ease-out infinite;
}
@keyframes countBeat {
  0%   { transform: scale(1);    background: #ffe27a; box-shadow: 0 0 0 rgba(255, 226, 122, 0); }
  12%  { transform: scale(1.32); background: #fffdf0; box-shadow: 0 0 22px 8px rgba(255, 233, 150, .95); }
  24%  { transform: scale(1.04); background: #ffe27a; box-shadow: 0 0 8px 2px rgba(255, 226, 122, .5); }
  36%  { transform: scale(1.22); background: #fff8d8; box-shadow: 0 0 18px 6px rgba(255, 233, 150, .8); }
  52%  { transform: scale(1);    background: #ffe27a; box-shadow: 0 0 0 rgba(255, 226, 122, 0); }
  100% { transform: scale(1);    background: #ffe27a; box-shadow: 0 0 0 rgba(255, 226, 122, 0); }
}
@keyframes countRing {
  0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, .9); opacity: 1; }
  55%  { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); opacity: 0; }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); opacity: 0; }
}

/* ---------- 5. ヘッダー ---------- */
.header {
  position: fixed;
  inset: var(--topbar-h) 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--gray-line);
}
.header__inner {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
@media (min-width: 600px) { .header__inner { gap: 16px; } }
/* ロゴは正方形（1024×1024・上下左右に余白あり）のため、
   幅指定＋object-fit で外周の余白をトリミングし、ヘッダー高を抑えたまま大きく見せる */
.header__logo img {
  width: 88px;
  height: auto;
  aspect-ratio: 1 / .72;
  object-fit: cover;
}
@media (min-width: 600px)  { .header__logo img { width: 112px; } }
@media (min-width: 768px)  { .header__logo img { width: 124px; } }
@media (min-width: 1024px) { .header__logo img { width: 140px; } }

/* ロゴ＋店舗名。スマホ・PCとも、ロゴの右のスペースに店舗名を並べる */
.header__brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
@media (min-width: 600px) { .header__brand { gap: 16px; } }

/* 店舗名は2行（池袋東口店・大塚店／上板橋店・成増店）で表示する */
.header__shops {
  display: grid;
  gap: 1px;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .01em;
  color: var(--navy);
}
.header__shops span { display: block; white-space: nowrap; }
@media (max-width: 360px)  { .header__shops { font-size: 12.5px; letter-spacing: 0; } }
@media (min-width: 600px)  { .header__shops { font-size: 17px; letter-spacing: .02em; } }
@media (min-width: 1024px) { .header__shops { font-size: 20px; } }

/* --- ハンバーガーボタン（PC・スマホ共通で右上に表示） --- */
.header__menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: none;
  margin-left: auto;
  width: 64px;
  height: 64px;
  padding: 0;
  border: none;
  border-radius: 14px;
  background: transparent;
  color: var(--navy);
  cursor: pointer;
  transition: background-color .2s ease;
}
.header__menu:hover { background: var(--gray-bg); }
@media (min-width: 768px)  { .header__menu { width: 72px; height: 72px; gap: 7px; } }
@media (min-width: 1024px) { .header__menu { width: 78px; height: 78px; } }

.header__menu-bars {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  width: 34px;
}
@media (min-width: 768px) { .header__menu-bars { width: 40px; gap: 8px; } }
.header__menu-bars span {
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 3px;
  background: currentColor;
}
.header__menu-text {
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1;
}
@media (min-width: 768px) { .header__menu-text { font-size: 15px; } }

/* --- ドロワーメニュー --- */
.drawer { position: fixed; inset: 0; z-index: 200; }
.drawer[hidden] { display: none; }

.drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 26, 48, .55);
  animation: drawerFade .25s ease;
}
@keyframes drawerFade { from { opacity: 0; } to { opacity: 1; } }

.drawer__panel {
  position: absolute;
  inset: 0 0 0 auto;
  display: flex;
  flex-direction: column;
  width: min(84vw, 340px);
  padding: 20px 22px calc(28px + env(safe-area-inset-bottom));
  background: var(--white);
  box-shadow: -12px 0 40px rgba(15, 39, 69, .28);
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: drawerIn .28s ease;
}
@keyframes drawerIn { from { transform: translateX(100%); } to { transform: none; } }

.drawer__close {
  position: relative;
  align-self: flex-end;
  width: 44px;
  height: 44px;
  margin-bottom: 10px;
  padding: 0;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--navy);
  cursor: pointer;
  transition: background-color .2s ease;
}
.drawer__close:hover { background: var(--gray-bg); }
.drawer__close::before,
.drawer__close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  translate: -50% -50%;
}
.drawer__close::before { rotate: 45deg; }
.drawer__close::after  { rotate: -45deg; }

.drawer__nav { display: grid; }
.drawer__nav a {
  padding: 16px 4px;
  border-bottom: 1px solid var(--gray-line);
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
}
.drawer__nav a:hover { color: var(--orange); opacity: 1; }

.drawer__cta {
  display: grid;
  gap: 2px;
  margin-top: 24px;
  padding: 14px 16px;
  border-radius: 999px;
  background: linear-gradient(100deg, var(--orange), #ff8a3d);
  color: var(--white);
  text-align: center;
  box-shadow: 0 8px 20px rgba(255, 107, 26, .35);
}
.drawer__cta span  { font-size: 15px; font-weight: 900; letter-spacing: .04em; }
.drawer__cta small { font-size: 11px; font-weight: 700; opacity: .95; }

/* ドロワー表示中は背面のスクロールを止める */
body.is-drawer-open { overflow: hidden; }

/* ---------- 6. ファーストビュー ---------- */
.fv {
  position: relative;
  display: flex;
  align-items: center;
  /* 下のスクロール矢印の直径と、矢印の上にあるテキストとの最低余白。
     この2つから下パディングを自動計算するので、矢印サイズを変えても被らない
     （+11px = 画面下からの距離8px＋フワフワで上に浮く分3px） */
  --scroll-size: 48px;
  --scroll-gap: 20px;
  min-height: min(760px, 100svh);
  padding: calc(var(--chrome-h) + 30px) 0 calc(var(--scroll-size) + var(--scroll-gap) + 11px);
  background: var(--navy-deep);
  overflow: hidden;
  color: var(--white);
}
/* 背景写真は2枚並び。スマホ＝上下2分割／768px以上＝左右2分割 */
.fv__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-rows: 1fr 1fr;
}
@media (min-width: 768px) {
  .fv__bg { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
}
.fv__bg-cell {
  position: relative;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
}
.fv__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
}

/* スマホ（上下2分割）は写真が横長・セルが縦長のため、cover では横しかトリミングされず
   object-position の縦指定が効かない（＝人物の高さを動かせない）。
   そこで height を100%超に伸ばして縦のトリミング代を作り、top で焦点を上下に調整する。
   height を大きくして top:0 にすると人物は下がり、top をマイナスにすると上がる。
   ・上（女性）：顔がバッジ列とメインコピー「今日、身体が変わる。」の間の余白に来る位置
   ・下（男性2名）：顔がオレンジのCTAボタンより上に来る位置 */
@media (max-width: 767px) {
  .fv__bg-img {
    position: absolute;
    left: 0;
    width: 100%;
  }
  .fv__bg-img--woman { height: 175%; top: 0;    object-position: 62% center; }
  .fv__bg-img--men   { height: 125%; top: -25%; object-position: 54% center; }
}
.fv::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* コピーが乗る中央帯だけを少し濃くして、写真を残したまま可読性を確保する */
  background:
    radial-gradient(125% 64% at 50% 46%, rgba(8, 26, 48, .36) 0%, rgba(8, 26, 48, 0) 74%),
    linear-gradient(180deg,
      rgba(8, 26, 48, .88) 0%,
      rgba(8, 26, 48, .60) 24%,
      rgba(8, 26, 48, .60) 66%,
      rgba(8, 26, 48, .93) 100%);
}
.fv__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 12px; /* 見出しを画面幅いっぱいに見せるため FV だけ狭く */
  text-align: center;
}
@media (min-width: 768px) { .fv__inner { padding-inline: var(--pad-x); } }

/* スマホは「業界最安級＋実績」／「補足2つ」の2段、768px以上は1段に */
.fv__badges {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 26px;
}
.fv__badges-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.fv__badges .badge--stat,
.fv__badges .badge--outline {
  font-size: clamp(11px, 3.1vw, 13px);
  padding: 7px 14px;
}
@media (min-width: 768px) {
  .fv__badges { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 32px; }
  .fv__badges-row { gap: 10px; }
}

.fv__title { font-weight: 900; line-height: 1.4; letter-spacing: .02em; margin-bottom: 22px; }
/* メインコピーの上に置くリード。目立たせるため大きめに */
.fv__title-lead {
  display: block;
  font-size: clamp(22px, 7vw, 40px);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: .08em;
  color: var(--white);
  margin-bottom: 8px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .6), 0 8px 26px rgba(0, 0, 0, .4);
}
.fv__title-main {
  display: block;
  font-size: clamp(36px, 12vw, 66px);
  line-height: 1.22;
  letter-spacing: 0; /* 画面幅いっぱいまで文字を大きくするため詰める */
  text-shadow: 0 2px 10px rgba(0, 0, 0, .5), 0 10px 32px rgba(0, 0, 0, .38);
}
@media (min-width: 768px) { .fv__title-main { letter-spacing: .02em; } }
.fv__title-main em {
  font-style: normal;
  white-space: nowrap;
  color: #ffb27a;
  background: linear-gradient(transparent 68%, rgba(255, 107, 26, .5) 68%);
  padding-inline: 2px;
}

/* メインコピー直下のサブキャッチ。単位ごとに折り返し、語中で切れないようにする */
.fv__catch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .1em .45em;
  font-size: clamp(15px, 4.3vw, 23px);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.5;
  margin-bottom: 22px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .55);
}
.fv__catch em {
  font-style: normal;
  font-size: .92em;
  color: #ffb27a;
}

/* サブキャッチ直下の継続率コピー＋ブランド名 */
.fv__retention {
  font-size: clamp(13px, 3.7vw, 18px);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.65;
  margin-bottom: 16px;
  color: rgba(255, 255, 255, .96);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .55);
}
.fv__retention em {
  font-style: normal;
  font-size: 1.24em;
  font-weight: 900;
  color: #ffb27a;
  padding-inline: 1px;
}
/* 継続率コピー直下の「それが」（周囲と同じ白文字） */
.fv__sorega {
  margin: 6px 0 2px;
  font-size: clamp(15px, 4.4vw, 21px);
  font-weight: 900;
  letter-spacing: .16em;
  line-height: 1.5;
  color: rgba(255, 255, 255, .96);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .55);
}
/* 「それが」の下に続くブランド名 */
.fv__brand {
  margin-bottom: 16px;
  font-family: var(--font-en);
  font-size: clamp(15px, 4.3vw, 21px);
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.5;
  color: rgba(255, 255, 255, .96);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .55);
}
@media (min-width: 768px) {
  .fv__retention { margin-bottom: 6px; }
  .fv__brand { margin-bottom: 18px; }
}

/* CTA下のチェックアイコン2点＋注記。常に中央揃え */
.fv__points {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 20px;
  margin-top: 16px;
  font-size: clamp(12px, 3.3vw, 15px);
  font-weight: 700;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}
.fv__points li {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.fv__points li::before {
  content: "";
  flex: none;
  width: 1.15em;
  height: 1.15em;
  border-radius: 50%;
  background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / .72em .72em no-repeat;
  box-shadow: 0 2px 8px rgba(255, 107, 26, .5);
}
.fv__note {
  margin-top: 10px;
  font-size: clamp(10px, 2.9vw, 12px);
  font-weight: 500;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .78);
  text-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}

/* FVのCTAは存在感を強めに */
.fv__cta { margin-top: 0; }
.fv__cta .btn {
  max-width: 480px;
  padding: 20px 20px 18px;
  gap: 3px;
}
.fv__cta .btn__micro { font-size: 12px; padding: 4px 14px; margin-bottom: 6px; }
.fv__cta .btn__label { font-size: clamp(20px, 5.9vw, 26px); font-weight: 900; }
.fv__cta .btn__sub { font-size: 12px; }

/* iPhone SE など縦の短い端末では、CTAが確実に画面内に収まるよう全体を詰める */
@media (max-width: 599px) and (max-height: 720px) {
  /* 矢印も一回り小さくする（下パディングは .fv の calc が自動で追従する） */
  .fv { padding-top: calc(var(--chrome-h) + 14px); --scroll-size: 42px; --scroll-gap: 14px; }
  .fv__badges { margin-bottom: 12px; }
  .fv__title { margin-bottom: 10px; }
  .fv__title-lead { font-size: 14px; margin-bottom: 8px; }
  .fv__title-main { font-size: clamp(32px, 10.4vw, 44px); }
  .fv__catch { font-size: 14px; margin-bottom: 10px; }
  .fv__retention { font-size: 12px; margin-bottom: 2px; line-height: 1.55; }
  .fv__sorega { font-size: 14px; margin: 2px 0 0; }
  .fv__brand { font-size: 14px; margin-bottom: 8px; }
  .fv__cta .btn { padding: 15px 18px 13px; }
  .fv__points { margin-top: 12px; }
  .fv__note { margin-top: 8px; }
}

/* スクロールインジケーター：下矢印アイコンを上下にフワフワ動かす */
.fv__scroll {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 8px;
  translate: -50% 0;   /* 中央寄せは translate、フワフワは transform で分担させる */
  display: grid;
  place-items: center;
  width: var(--scroll-size);
  height: var(--scroll-size);
  border-radius: 50%;
  color: var(--white);
  background: rgba(8, 26, 48, .38);
  border: 2px solid rgba(255, 255, 255, .75);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
  backdrop-filter: blur(3px);
  animation: scrollFloat 1.6s ease-in-out infinite;
}
.fv__scroll:hover {
  opacity: 1;
  background: var(--orange);
  border-color: var(--orange);
}
.fv__scroll-arrow {
  width: 58%;
  height: 58%;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .45));
}
/* 上に浮く量（3px）は .fv の下パディングの計算に含めてあるので、変更時は揃える */
@keyframes scrollFloat {
  0%, 100% { transform: translateY(-3px); }
  50%      { transform: translateY(5px); }
}

/* ---------- 7. 悩み共感 ---------- */
/* ★背景色：クライアント確定＝薄いオレンジ★
   色を変えたいときは下の .worry { } の中の5行（--worry-*）を差し替えてください。
   ・薄いオレンジ（現在適用中／確定）
       --worry-bg: #fff4e6;  --worry-accent: #c14400;
       --worry-card: #ffffff; --worry-border: rgba(255, 107, 26, .3); --worry-check: var(--orange);
   ・薄い水色
       --worry-bg: #e6f2ff;  --worry-accent: #0d4ea8;
       --worry-card: #ffffff; --worry-border: rgba(22, 103, 216, .25); --worry-check: var(--blue);
   ・薄い紺色
       --worry-bg: #d9e2ec;  --worry-accent: #17427a;
       --worry-card: #ffffff; --worry-border: rgba(15, 39, 69, .22);  --worry-check: var(--navy);
   ※文字色（--worry-text）はどのパターンでも濃紺のままで読みやすさを確保しています。 */
.worry {
  --worry-bg:     #fff4e6;                  /* セクションの背景色 */
  --worry-accent: #c14400;                  /* 英字見出し・強調文字の色 */
  --worry-card:   #ffffff;                  /* お悩みカードの背景 */
  --worry-border: rgba(255, 107, 26, .3);   /* お悩みカードの枠線 */
  --worry-check:  var(--orange);            /* チェックアイコンの丸の色 */
  --worry-text:   var(--text);
  background: var(--worry-bg);
  color: var(--worry-text);
}
.worry .section__title-en { color: var(--worry-accent); }

.worry__list {
  display: grid;
  gap: 10px;
  max-width: 860px;
  margin-inline: auto;
}
@media (min-width: 768px) { .worry__list { grid-template-columns: 1fr 1fr; gap: 14px; } }

.worry__list li {
  position: relative;
  padding: 14px 16px 14px 46px;
  border-radius: var(--radius);
  background: var(--worry-card);
  border: 1px solid var(--worry-border);
  box-shadow: var(--shadow-sm);
  font-size: 14px;
  line-height: 1.7;
}
.worry__list li::before {
  content: "✓";
  position: absolute;
  left: 16px;
  top: 50%;
  translate: 0 -50%;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--worry-check);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.worry__list strong { color: var(--worry-accent); }

.worry__answer {
  margin-top: 28px;
  text-align: center;
  font-size: clamp(17px, 5vw, 26px);
  font-weight: 900;
  line-height: 1.6;
}
.worry__answer em {
  font-style: normal;
  /* アクセントカラー統一：「01/02/03」（.reason__num）と同じ var(--orange) に揃える */
  color: var(--orange);
}

/* ---------- 8. 選ばれる理由 ---------- */
.reason__item {
  display: grid;
  gap: 16px;
  padding: 18px 18px 24px;
  margin-bottom: 20px;
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 768px) {
  .reason__item {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 40px;
    padding: 32px;
    margin-bottom: 28px;
  }
  .reason__item--rev .reason__figure { order: 2; }
}

.reason__figure { border-radius: var(--radius); overflow: hidden; }
/* スマホでは写真をやや低くして、テキストとのバランスを取る */
.reason__figure img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: center 35%; }
@media (min-width: 768px) { .reason__figure img { aspect-ratio: 4 / 3; } }

.reason__num {
  font-family: var(--font-en);
  font-size: clamp(32px, 9vw, 42px);
  font-weight: 700;
  line-height: 1;
  color: var(--orange);
  letter-spacing: .04em;
  margin-bottom: 4px;
}
.reason__heading {
  font-size: clamp(18px, 4.8vw, 24px);
  font-weight: 900;
  line-height: 1.5;
  color: var(--navy);
  margin-bottom: 10px;
}
.reason__text { font-size: 14px; color: var(--gray-text); line-height: 1.95; }
.reason__text strong { color: var(--orange-dark); }

.reason__points {
  display: grid;
  gap: 12px;
  margin-top: 8px;
}
@media (min-width: 768px) { .reason__points { grid-template-columns: repeat(3, 1fr); } }

.reason__points li {
  padding: 16px 18px;
  border-radius: var(--radius);
  background: var(--white);
  border: 2px solid var(--navy);
  font-size: 13px;
  color: var(--gray-text);
  line-height: 1.7;
}
.reason__points span {
  display: block;
  font-size: 15px;
  font-weight: 900;
  color: var(--navy);
  margin-bottom: 2px;
}

/* ---------- 9. 料金プラン ---------- */
/* プラン間の区切りを明確にするため、スマホでは余白を大きく取る */
.price { padding: 68px 0 72px; }
@media (min-width: 768px) { .price { padding: 96px 0; } }

/* --- コース切り替えタブ --- */
.price__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  max-width: 560px;
  margin: 0 auto 34px;
  padding: 6px;
  border-radius: 999px;
  background: var(--gray-bg);
  border: 1px solid var(--gray-line);
}
.price__tab {
  padding: 13px 10px;
  border: none;
  border-radius: 999px;
  background: transparent;
  font-family: var(--font);
  font-size: clamp(13px, 3.7vw, 16px);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.4;
  color: var(--gray-text);
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.price__tab:hover { color: var(--navy); }
.price__tab.is-active {
  background: var(--navy);
  color: var(--white);
  font-weight: 900;
  box-shadow: var(--shadow-sm);
}
@media (min-width: 768px) {
  .price__tabs { margin-bottom: 42px; }
  .price__tab { padding: 15px 12px; }
}

/* --- タブパネル --- */
.price__panel { outline: none; }
.price__panel[hidden] { display: none; }
.price__panel:not([hidden]) { animation: panelIn .3s ease; }
@keyframes panelIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.price__list { display: grid; gap: 40px; }
@media (min-width: 768px) {
  .price__list { grid-template-columns: repeat(2, 1fr); align-items: start; gap: 26px; }
}
/* 各コースともPCでも横並びにせず、上下に積んで表示する */
.price__list--stack { max-width: 460px; margin-inline: auto; }
@media (min-width: 768px) { .price__list--stack { grid-template-columns: 1fr; gap: 44px; } }

/* 全プラン共通でオレンジのカード（背景色は4プランとも統一） */
.plan {
  position: relative;
  padding: 30px 22px 28px;
  border: 2px solid var(--orange);
  border-radius: var(--radius-lg);
  background: var(--orange-soft);
  box-shadow: var(--shadow-md);
  text-align: center;
}
.plan__name {
  font-size: 17px;
  font-weight: 900;
  color: var(--navy);
  letter-spacing: .04em;
  margin-bottom: 12px;
}
.plan__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  color: var(--orange); /* アクセントカラー統一（.reason__num と同色） */
  margin-bottom: 16px;
  line-height: 1.1;
}
.plan__yen  { font-size: 20px; font-weight: 700; }
.plan__num  { font-family: var(--font-en); font-size: 46px; font-weight: 700; letter-spacing: .01em; }
.plan__unit { font-size: 12px; font-weight: 700; color: var(--gray-text); }

.plan__spec {
  display: grid;
  gap: 8px;
  padding: 16px 0;
  margin-bottom: 14px;
  border-top: 1px dashed rgba(255, 107, 26, .35);
  border-bottom: 1px dashed rgba(255, 107, 26, .35);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
}
/* 「1回◯◯円」など、特に見せたい項目 */
.plan__spec-strong { font-weight: 900; color: var(--orange-dark); }
.plan__spec li { position: relative; padding-left: 24px; line-height: 1.6; }
.plan__spec li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .55em;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  rotate: -45deg;
}
.plan__note { font-size: 12px; color: var(--gray-text); text-align: left; margin-bottom: 18px; line-height: 1.8; }

/* リボン付きカードはリボンの分だけ上に余白を足す */
.plan--featured { box-shadow: var(--shadow-lg); padding-top: 38px; }
.plan__ribbon {
  position: absolute;
  top: -14px;
  left: 50%;
  translate: -50% 0;
  padding: 6px 22px;
  border-radius: 999px;
  background: var(--orange);
  color: var(--white);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .08em;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(255, 107, 26, .4);
}

/* 人気NO.2（週1回コース） */
.plan--pickup { padding-top: 38px; }
.plan__ribbon--sub {
  background: var(--navy);
  box-shadow: 0 6px 16px rgba(15, 39, 69, .3);
}

/* ---------- 10. 入会キャンペーン ---------- */
.campaign { background: var(--orange-soft); }

.campaign__box {
  max-width: 640px;
  margin-inline: auto;
  padding: 28px 18px 24px;
  border: 2px solid var(--orange);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-md);
  text-align: center;
}
@media (min-width: 768px) { .campaign__box { padding: 36px 40px 32px; } }

/* 「今だけ！入会応援キャンペーン」バッジ */
.campaign__badge {
  display: inline-block;
  padding: 7px 20px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: linear-gradient(100deg, var(--orange-dark), var(--orange));
  color: var(--white);
  font-size: clamp(12px, 3.5vw, 15px);
  font-weight: 900;
  letter-spacing: .06em;
  line-height: 1.4;
  box-shadow: 0 6px 16px rgba(255, 107, 26, .35);
}
/* キャンペーン期間（ACFの cp_period に入力があるときだけ表示される。空欄なら出力自体されない） */
.campaign__period {
  margin: -6px 0 10px;
  font-size: clamp(13px, 3.6vw, 15px);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.5;
  color: var(--orange-dark);
}
/* 「体験から入会で」見出し */
.campaign__lead {
  font-size: clamp(16px, 4.6vw, 22px);
  font-weight: 900;
  letter-spacing: .06em;
  line-height: 1.5;
  color: var(--navy);
}
/* 「合計／¥25,300／お得に」を単位ごとに折り返す（語中で切れないように） */
.campaign__total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0 .15em;
  font-size: clamp(17px, 5.4vw, 26px);
  font-weight: 900;
  line-height: 1.3;
  color: var(--navy);
  margin-top: 4px;
}
.campaign__total strong {
  font-size: clamp(30px, 9.6vw, 48px);
  color: var(--orange); /* アクセントカラー統一（.reason__num と同色） */
  letter-spacing: -.02em;
}

.campaign__items {
  display: grid;
  gap: 10px;
  margin-top: 22px;
  text-align: left;
}
.campaign__item {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--gray-bg);
}
/* 幅に余裕があれば「項目名｜金額」の2カラムに */
@media (min-width: 560px) {
  .campaign__item {
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 16px;
  }
  .campaign__item-value { justify-content: flex-end; }
}
.campaign__item-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
}
.campaign__item-value {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 8px;
}
.campaign__item-before {
  font-size: 14px;
  color: var(--gray-text);
  text-decoration: line-through;
  text-decoration-color: rgba(91, 102, 117, .6);
}
.campaign__item-arrow { font-size: 13px; color: var(--gray-text); }
.campaign__item-after {
  font-size: clamp(18px, 5vw, 22px);
  font-weight: 900;
  color: var(--orange); /* アクセントカラー統一（.reason__num と同色） */
  line-height: 1.2;
}

.campaign__note {
  margin-top: 14px;
  font-size: 11px;
  line-height: 1.7;
  color: var(--gray-text);
  text-align: left;
}
.campaign__btn { margin-top: 20px; }
.campaign__btn .btn { max-width: 420px; margin-inline: auto; }

/* ---------- 11. 予約の方法は？（HOW TO START） ---------- */
.howto { background: linear-gradient(180deg, var(--white) 0%, var(--orange-soft) 100%); }

/* 4ステップは常に縦並び。左のオレンジ丸数字で流れを見せる */
.howto__list {
  display: grid;
  gap: 20px;
  max-width: 640px;
  margin-inline: auto;
}
@media (min-width: 768px) { .howto__list { gap: 24px; } }

.howto__step {
  --circle: 58px;
  --pad-l: 18px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px 16px var(--pad-l);
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 2px solid rgba(255, 107, 26, .22);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 768px) {
  .howto__step {
    --circle: 68px;
    --pad-l: 24px;
    gap: 22px;
    padding: 20px 26px 20px var(--pad-l);
  }
}
/* ステップ同士をつなぐ縦線（丸数字の中心に合わせる） */
.howto__step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(var(--pad-l) + var(--circle) / 2);
  top: 100%;
  width: 3px;
  height: 20px;
  translate: -50% 0;
  border-radius: 2px;
  background: rgba(255, 107, 26, .45);
}
@media (min-width: 768px) { .howto__step:not(:last-child)::after { height: 24px; } }

/* オレンジの円形背景＋白文字の数字 */
.howto__step-num {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--circle);
  height: var(--circle);
  border-radius: 50%;
  background: linear-gradient(140deg, var(--orange) 0%, #ff8f45 100%);
  color: var(--white);
  font-family: var(--font-en);
  font-size: calc(var(--circle) * .48);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
  box-shadow: 0 6px 16px rgba(255, 107, 26, .38);
}
.howto__step-title {
  font-size: clamp(15px, 4.2vw, 19px);
  font-weight: 900;
  line-height: 1.6;
  color: var(--navy);
}
.howto__step-time {
  display: inline-block;
  font-size: .86em;
  font-weight: 700;
  color: var(--orange-dark);
}

.howto__btn { margin-top: 32px; }
.howto__btn .btn { max-width: 420px; }

/* ---------- 12. FAQ ---------- */
.faq__list { display: grid; gap: 12px; }
.faq__item {
  border: 1px solid var(--gray-line);
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
}
.faq__item summary {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 16px 48px 16px 16px;
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.7;
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::before {
  content: "Q.";
  flex-shrink: 0;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 900;
  color: var(--orange);
  line-height: 1.7;
}
.faq__item summary::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 24px;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--navy);
  border-bottom: 2px solid var(--navy);
  rotate: 45deg;
  transition: rotate .25s ease;
}
.faq__item[open] summary::after { rotate: -135deg; }
/* 回答は「A.」マーク（青）付き。Q.と対になるように配置する */
.faq__item p {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 0 16px 18px;
  font-size: 14px;
  color: var(--gray-text);
  line-height: 1.95;
}
.faq__item p::before {
  content: "A.";
  flex-shrink: 0;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.7;
  color: var(--blue);
}

/* FAQ直下のCTAボタン */
.faq__cta { margin-top: 34px; }
.faq__cta .btn { max-width: 460px; }
@media (min-width: 768px) { .faq__cta { margin-top: 44px; } }

/* ---------- 13. メインCTA ---------- */
.cta {
  padding: 52px 0;
  background:
    linear-gradient(180deg, rgba(8, 26, 48, .9), rgba(15, 39, 69, .95)),
    url("../img/image_14.webp") center / cover no-repeat fixed;
  color: var(--white);
  text-align: center;
}
@media (max-width: 767px) {
  /* iOS で background-attachment: fixed が不安定なため解除 */
  .cta { background-attachment: scroll; }
}
@media (min-width: 768px) { .cta { padding: 80px 0; } }

.cta__limited {
  display: inline-block;
  padding: 6px 18px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: var(--orange);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
}
.cta__limited strong { font-size: 1.2em; }
.cta__title {
  font-size: clamp(22px, 6.4vw, 38px);
  font-weight: 900;
  line-height: 1.5;
  margin-bottom: 12px;
  text-shadow: 0 3px 16px rgba(0, 0, 0, .4);
}
.cta__title em {
  font-style: normal;
  color: #ffb27a;
  background: linear-gradient(transparent 62%, rgba(255, 107, 26, .5) 62%);
}
.cta__micro { font-size: 14px; font-weight: 700; margin-bottom: 22px; line-height: 1.9; }
.cta__micro strong { color: #ffe27a; }
.cta__btn { margin-bottom: 14px; }
.cta__caption { font-size: 12px; opacity: .8; }

/* --- 黒背景CTA（店舗・アクセスの直上） --- */
.cta--dark {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .94) 0%, rgba(24, 26, 30, .92) 55%, rgba(0, 0, 0, .95) 100%),
    url("../img/image_14.webp") center / cover no-repeat;
  border-top: 3px solid var(--orange);
}
@media (max-width: 767px) { .cta--dark { background-attachment: scroll; } }
.cta--dark .cta__title { margin-bottom: 16px; color: var(--white); }
/* 「1年後も続きます。」だけをアクセントカラーで強調 */
.cta--dark .cta__title em {
  font-style: normal;
  color: var(--orange);
  background: none;
  text-shadow: 0 0 24px rgba(255, 107, 26, .45);
}
.cta--dark .cta__micro { color: rgba(255, 255, 255, .88); font-weight: 500; }
.cta--dark .cta__micro strong { font-weight: 900; color: #ffe27a; }
/* ボタン下の注記はオファーそのものなので、他のcaptionより強めに見せる */
.cta--dark .cta__caption {
  font-size: clamp(13px, 3.6vw, 15px);
  font-weight: 700;
  opacity: 1;
  color: rgba(255, 255, 255, .9);
}
.cta--dark .cta__caption strong { color: var(--orange); font-weight: 900; }

/* ---------- 14. 店舗・アクセス ---------- */
/* 文字サイズは変えず、行間・余白を詰めて全体をコンパクトにまとめる */
.access__list { display: grid; gap: 14px; }
@media (min-width: 768px)  { .access__list { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (min-width: 1024px) { .access__list { grid-template-columns: repeat(4, 1fr); } }

/* 店舗ごとの区切りを明確にする：白背景＋軽い枠線＋上部にネイビーのライン */
.shop {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 14px 16px 14px;
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid var(--gray-line);
  border-top: 5px solid var(--navy);
  box-shadow: var(--shadow-sm);
}
.shop__no {
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .2em;
  color: var(--orange);
}
.shop__name {
  font-size: clamp(19px, 5.2vw, 22px);
  font-weight: 900;
  color: var(--navy);
  line-height: 1.3;
  margin-bottom: 8px;
}

/* 各店舗の予約ボタン（→ #reservation-form へスムーススクロール） */
.shop__btn {
  display: block;
  padding: 11px 12px;
  margin-top: 10px; /* 住所・マップの下に配置 */
  border-radius: 999px;
  background: var(--orange);
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  letter-spacing: .02em;
  box-shadow: 0 6px 16px rgba(255, 107, 26, .32);
  transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.shop__btn:hover {
  background: var(--orange-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(255, 107, 26, .42);
  opacity: 1;
}

.shop__info { display: grid; gap: 6px; font-size: 13px; line-height: 1.5; }
.shop__info div { display: grid; gap: 0; }
.shop__info dt {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .1em;
  color: var(--orange-dark);
}
.shop__info dd { color: var(--gray-text); }

.shop__map {
  margin-top: auto;
  padding-top: 10px;
  line-height: 1.5;
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 15. 予約フォーム（formrun 埋め込み） ---------- */

.form { background: var(--gray-bg); }
.form__body {
  padding: 0px 20px;
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 768px) { .form__body { padding: 0px 40px; } }

/* formrun の SDK は iframe の高さを後から書き込むため、
   読み込み中（高さ0）でも枠が潰れないよう最低限の高さを確保しておく */

.formrun-embed { min-height: 420px; }
.formrun-embed iframe { width: 100%; min-height: 420px; border: 0; }

.form__row { margin-bottom: 0px; }
.form__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0px;
}
/* 必須ラベルは赤字で明示する */
.req {
  padding: 2px 8px;
  border-radius: 4px;
  background: #ffecec;
  border: 1px solid #ffc4c4;
  color: #d81f1f;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
}

.form__control {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--gray-line);
  border-radius: 10px;
  background: var(--white);
  font-family: var(--font);
  font-size: 16px; /* iOS の自動ズーム防止 */
  line-height: 1.6;
  color: var(--text);
  transition: border-color .2s, box-shadow .2s;
}
.form__control:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255, 107, 26, .15);
  outline: none;
}
select.form__control {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--navy) 50%),
                    linear-gradient(135deg, var(--navy) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}
textarea.form__control { resize: vertical; }

.form__row--check { margin: 22px 0; text-align: center; }
.form__check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
}
.form__check input { width: 20px; height: 20px; accent-color: var(--orange); flex-shrink: 0; }
.form__check a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.form__check .req { margin-left: 6px; }

.form__submit { margin-top: 8px; }
.form__privacy { margin-top: 14px; font-size: 11px; color: var(--gray-text); text-align: center; }

/* 店舗ボタン経由で来たときのハイライト */
.form__control.is-highlight {
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(255, 107, 26, .18);
  animation: fieldFlash 1.4s ease 2;
}
@keyframes fieldFlash {
  0%, 100% { background-color: var(--white); }
  50%      { background-color: var(--orange-soft); }
}

/* ---------- 16. フッター ---------- */
/* 文字は黒すぎない柔らかいダークグレーで統一し、太字は使わず細身の印象にする */
.footer {
  padding: 40px 0 32px;
  background: var(--white);
  color: #555;
  font-weight: 400;
  text-align: center;
}
/* ロゴはヘッダーと同じ本来のカラーで表示（白背景なので加工なし） */
.footer__logo {
  width: 150px;
  height: auto;
  aspect-ratio: 1 / .72;   /* ヘッダーと同じく正方形画像の余白をトリミング */
  object-fit: cover;
  margin: 0 auto 12px;
}
/* ロゴ直下のブランド表記 */
.footer__brand {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 2px 8px;
  margin-bottom: 22px;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .04em;
}
.footer__brand strong { font-size: 14px; font-weight: 400; color: inherit; }
.footer__brand span { color: inherit; }

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 20px;
  font-size: 12px;
  font-weight: 400;
  margin-bottom: 20px;
}
.footer__nav a:hover { color: var(--orange); opacity: 1; }
.footer__copy { font-size: 11px; font-weight: 400; color: inherit; }

/* ---------- 17. 追従CTA（PC・スマホ共通） ---------- */
.fixed-cta {
  position: fixed;
  z-index: 90;
  inset: auto 0 0 0;
  display: flex;
  align-items: center;
  /* 下側はセーフエリアと余白の大きい方を採用し、上下の余白を均等に見せる */
  padding: 12px 14px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  background: rgba(10, 11, 14, .95);
  backdrop-filter: blur(8px);
  border-top: 2px solid var(--orange);
  animation: slideUp .3s ease;
}
.fixed-cta[hidden] { display: none; }
@keyframes slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@media (min-width: 768px) {
  .fixed-cta { padding: 14px 24px; padding-bottom: max(14px, env(safe-area-inset-bottom)); }
}

.fixed-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}
@media (min-width: 768px) { .fixed-cta__inner { gap: 24px; justify-content: center; } }

.fixed-cta__text {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.fixed-cta__limit {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .04em;
  color: var(--white);
}
.fixed-cta__price {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .6);
}
@media (min-width: 768px) {
  .fixed-cta__limit { font-size: 17px; }
  .fixed-cta__price { font-size: 13px; }
}

.fixed-cta__btn {
  flex: none;
  padding: 12px 18px;
  border-radius: 999px;
  background: linear-gradient(100deg, var(--orange), #ff8a3d);
  color: var(--white);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .04em;
  white-space: nowrap;
  text-align: center;
  box-shadow: 0 8px 20px rgba(255, 107, 26, .38);
  animation: pulse 2.4s ease-in-out infinite;
}
.fixed-cta__btn:hover { opacity: 1; background: linear-gradient(100deg, var(--orange-dark), var(--orange)); }
@media (min-width: 768px) {
  .fixed-cta__btn { padding: 15px 40px; font-size: 17px; }
}

/* ---------- 18. スクロール連動フェードイン（JSで付与） ---------- */
.js-fade {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s ease, transform .7s ease;
}
.js-fade.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-fade { opacity: 1; transform: none; }
}

/* ---------- 19. WordPress管理バー対策（静的HTMLでは無効） ----------
   WordPressにログインしている間だけ body に .admin-bar が付き、
   画面上部に管理バー（32px / スマホ46px）が固定表示される。
   その分だけ、上部告知バーとヘッダーの位置を下げる。
   ※.admin-bar が無い環境（＝この静的HTML）では一切効かないので、
     デザインには影響しません。 */
.admin-bar .topbar { top: 32px; }
.admin-bar .header { top: calc(32px + var(--topbar-h)); }
@media screen and (max-width: 782px) {
  .admin-bar .topbar { top: 46px; }
  .admin-bar .header { top: calc(46px + var(--topbar-h)); }
}
@media screen and (max-width: 600px) {
  /* 600px以下は管理バーがスクロールで流れる仕様のため相殺しない */
  .admin-bar .topbar { top: 0; }
  .admin-bar .header { top: var(--topbar-h); }
}