/* ========================================
   シナジムくずは店 LP - B案（A/Bテスト用）追加スタイル
   既存 css/style.css は変更せず、A案（index.html）はそのまま維持する。
   ここには B案（index-b.html）だけに適用する差分のみを書く。
   ======================================== */

/* ===== GOLD × CREAM パレット（B案 v2） =====
   synergym.jp/mikiono-mikishi-lp/ を配色サンプルに再構成。
   あのページは「暗い背景に白文字」を一切使わず、ベースは白〜クリームの
   グラデーションのみ、濃い茶色はごく小さな文字用アクセントとしてしか
   登場しない（ボタンも白文字×塗りではなく、明るいゴールドの塗り×濃い
   ブラウンの文字）。B案もこの構造に合わせ、ヘッダー・ヒーローの背景を
   「暗い茶色の面」から「白〜クリームの面＋小さな濃色テキスト」に変更する。
   :root変数はcss/style.cssの後に読み込まれるため、ここで再定義すれば
   B案側だけ上書きされる（A案 index.html には影響しない）。 */
:root {
  --primary: #E9A820;        /* ゴールドディープ（参考サイトの--gold-deep） */
  --primary-light: #FDE98A;  /* ゴールドライト */
  --primary-dark: #7A5010;   /* 文字用の濃いゴールドブラウン */
  --accent: #F4A030;         /* アンバー（アイコン・小さな差し色用） */
  /* --accent-darkは「ゴールドの塗りに乗せる濃色文字」用に選んだ色だが、白背景に
     直接文字として置く箇所（価格の"0円""2,980"、見出しアクセント等）にも流用しており、
     その用途では白背景とのコントラストが3.06:1しかなくAA基準(4.5:1)未達だった。
     同じ色相・彩度のまま明度だけ落として実測4.73:1を確保。 */
  --accent-dark: #9C6908;
  --yellow: #F3C94A;         /* ゴールド */
  --bg-dark: #FFFEF9;        /* 旧「暗い土台色」は廃止し、白に近いクリームへ（フォールバック用） */
  --bg-section: #FFF9E6;
  --brown-deep: #4E3C22;     /* 見出し等・濃い文字専用（背景には使わない） */
  --gold-text: #9A6E08;      /* ロゴ・ラベル等、中間の濃さの文字色 */
}

/* ヒーロー：写真の下に別カードを置く構成→写真に重ねるオーバーレイ形式に戻す。
   ただし「暗いトーン・茶色は使わない」の方針は維持し、オーバーレイは黒/ダーク
   ブラウンではなく白〜クリームの明るいグラデーションにする（文字は濃いブラウン）。
   画像は.hero全体を覆うposition:absoluteに戻し、hero-bodyをmargin-top:autoで
   下寄せにすることで、上部は写真がそのまま見え、下部だけ明るいグラデーションと
   カードで文字を読みやすくする。 */
.hero-overlay {
  display: block;
  position: absolute;
  inset: 0;
  /* hero-bodyはヒーロー高さの約31%地点(margin-top:autoの結果)から始まるため、
     そこに来る前からグラデーションを立ち上げておかないと見出しが写真に直乗りして
     読みにくくなる（実機確認で発覚）。31%より前の22%あたりから濃度を上げ始める。 */
  background: linear-gradient(
    to bottom,
    rgba(255,254,249,0) 0%,
    rgba(255,254,249,0.18) 20%,
    rgba(255,250,235,0.62) 33%,
    rgba(255,248,226,0.9) 52%,
    rgba(255,246,220,0.98) 100%
  );
}
.hero {
  background: var(--bg-warm);
  min-height: 480px; /* 内容が短い場合の最低保証のみ。基本はhero-bodyの自然な高さで決まる */
  padding: 0;
  justify-content: flex-start;
}
/* base側は白文字前提(rgba(255,255,255,.4))のため、明るいオーバーレイの上では
   ほぼ見えなくなる。フローティングCTA/クイックナビで導線は足りているため非表示に。 */
.hero-scroll-hint { display: none; }
.hero-slides, .hero-slide { position: absolute; inset: 0; }
.hero-slide {
  background-size: cover;
  background-position: center top;
  opacity: 0;
  transition: opacity 1s ease;
}
.hero-slide.active { opacity: 1; }

.hero-media-top {
  position: absolute;
  top: 126px; /* ヘッダー(72px)+クイックナビ(40px)+余白14px ぶん下げる */
  left: 16px;
  right: 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  /* space-betweenでスライドドットを右端に離していたが、機種幅によっては
     hero-title（特に長い見出し）と縦位置が重なり文字にかぶって見える不具合が
     発生していた。ピンバッジのすぐ右に寄せてまとめ、右端の空きスペースを
     無くすことで見出しと重なる余地をなくす。 */
  justify-content: flex-start;
  gap: 10px;
}
.hero-pin-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(255,252,242,0.9);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #7A5C10;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(100,70,10,0.16);
}
.hero-media-top .hca-dots { gap: 5px; }
.hero-media-top .hca-dot { background: rgba(255,255,255,0.55); box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
.hero-media-top .hca-dot.active { background: var(--primary); }

/* ヒーロー本文：写真の上に直接重ねる。オーバーレイのグラデーション自体が
   下部で十分明るく濃くなるため、hero-body自体には別カード背景を持たせない。
   ※以前は margin-top:auto + .hero{min-height:100vh} で下寄せしていたが、
   実機（幅の異なる端末）で hero-media-top のバッジ・ドットと hero-title が
   重なる不具合が発生した。auto marginは「.heroの高さ - hero-bodyの自然な高さ」の
   差分に依存するため、端末幅によるテキスト折り返しの変化やvh計算の差で
   余白が想定通りにならなかったと考えられる。より確実な固定オフセットに変更し、
   .heroのmin-heightも撤廃（hero-bodyの実際の内容量で自然に高さが決まる）。 */
.hero-body {
  position: relative;
  z-index: 2;
  flex: none;
  margin-top: 210px; /* hero-media-topのバッジ(top:126px、高さ約36px)より確実に下 */
  padding: 0 20px 28px;
  gap: 10px;
}
.hero-gym-name .hgn-en { color: var(--gold-text); }
.hero-gym-name .hgn-ja { color: var(--text-light); }
.hero-badge {
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(233,168,32,0.35);
  color: #7A5010;
}
/* 写真の内容次第でグラデーションだけでは背景コントラストが不安定なため、
   白いグローのtext-shadowを保険として追加（どんな写真の上でも視認性を確保） */
.hero-title, .hero-sub, .hero-badge-wrap { text-shadow: 0 1px 2px rgba(255,255,255,0.7), 0 0 16px rgba(255,255,255,0.6); }
.hero-title { color: var(--brown-deep); }
.hero-title-accent { color: var(--accent-dark); }
.hero-sub { color: var(--text-mid); }
.hero-sub strong { color: var(--brown-deep); }
.accent-color { color: var(--accent-dark); }

/* 主要CTAボタン・バッジ：白文字×塗りだった構成を、参考サイトと同じ
   「明るいゴールドの塗り × 濃いブラウンの文字」に統一。彩度の高い塗りを
   保ったまま文字コントラストを確保できる（白文字だと同系色の塗りでは
   AA基準の4.5:1を満たしにくい）。 */
.btn-primary, .btn-hero, .btn-campaign, .btn-cta-main, .btn-personal-cta,
.btn-plan-best, .btn-float, .hero-badge-orange, .hcb-save,
.plan-best-badge, .feat-badge, .phi-badge {
  background: linear-gradient(170deg, #FFD95C 0%, #F0B820 100%);
  color: #4A3208;
  border-color: transparent;
  box-shadow: 0 8px 22px rgba(220,170,30,0.35), inset 0 1px 0 rgba(255,255,255,0.45);
}
.btn-primary:hover, .btn-primary:active,
.btn-hero:active, .btn-campaign:active, .btn-cta-main:active, .btn-personal-cta:active,
.btn-plan-best:hover {
  filter: brightness(0.96);
  box-shadow: 0 6px 16px rgba(220,170,30,0.4), inset 0 1px 0 rgba(255,255,255,0.4);
}
.hcb-save strong { color: #3E2800; }
.pcb-badge { background: rgba(233,168,32,0.12); border-color: rgba(233,168,32,0.35); color: var(--accent-dark); }
.cta-badge { background: rgba(233,168,32,0.1); border-color: rgba(233,168,32,0.3); color: var(--accent-dark); }
/* 文章が長いバナーなので、中央揃え・1行前提のレイアウトをやめて
   アイコン先頭固定＋左揃えの折り返しに変更（スマホ幅での可読性優先） */
.plan-campaign-banner {
  background: linear-gradient(135deg, #FFD95C, #F0B820);
  color: #4A3208;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  font-size: 0.85rem;
  line-height: 1.6;
  padding: 12px 14px;
}
.plan-campaign-banner i { margin-top: 3px; flex-shrink: 0; }
.btn-float-sub { color: rgba(74,50,8,0.75); }

/* ===== 小見出し・ラベルテキストのコントラスト修正 =====
   全セクション共通の.sec-labelや.plan-tag等、"文字として読む"要素に
   var(--primary)(#E9A820)を直接使っていたため、白背景との実測コントラストが
   2.08:1（WCAG AA基準4.5:1を大幅未達）だった。アイコン等の装飾用途は
   var(--primary)のまま明るく残し、実際に文章として読む箇所だけ
   var(--primary-dark)（#7A5010・実測7:1超）に差し替える。 */
.sec-label,
.title-accent,
.plan-tag,
.plan-card-best .plan-name span,
.plan-card-best .plan-price {
  color: var(--primary-dark);
}
.sec-label { border-bottom-color: var(--primary-dark); }
.btn-plan:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.voice-map-link a { color: var(--primary-dark); border-color: var(--primary-dark); }
.voice-map-link a:hover { background: var(--primary-dark); }
.camp-save-num { color: var(--accent-dark); }
/* var(--primary-light)（薄いゴールド #FDE98A）を、それ自体も薄い塗り
   （rgba(...,0.12〜0.15)）の上に文字色として直接使っている箇所が複数あり、
   ほぼ同系色同士でテキストが読めなくなっていた（#medicalのSTEPバッジで発覚、
   #guidanceのSTEPバッジ・ガイダンス安心ポイントのアイコンも同様の問題）。
   濃い文字色に差し替えて視認性を確保。 */
.mstep-num, .gf-num { color: var(--primary-dark); }
.gp-icon i, .plan-note-box i { color: var(--primary-dark); }

/* ===== フッターを暗色(#1a1200)→ライトゴールド系に変更 =====
   フッターだけ「暗いトーン・茶色」のA案そのままだったため、白文字前提の
   色（white系rgba）を全て濃色文字に置き換える。白背景での不透明度の強弱は
   そのまま「情報の重要度」の強弱として濃色側にも踏襲する。 */
.site-footer {
  background: var(--bg-section);
  border-top: 1px solid #F0E2B2;
}
.footer-divider { background: #F0E2B2; }
.footer-logo-en { color: var(--primary-dark); }
.footer-logo-ja { color: rgba(78,60,34,0.5); }
.fi-addr { color: var(--text-mid); }
.fi-tel { color: var(--text); }
.fi-tel a { color: var(--primary-dark); }
.fi-hours { color: var(--text-mid); }
.fi-hours strong { color: var(--brown-deep); }
.fi-staff { color: rgba(78,60,34,0.55); }
.footer-cert-badge { color: rgba(78,60,34,0.75); }
.footer-cert-badge i { color: var(--primary-dark); }
.footer-links a { color: var(--primary-dark); }
.footer-links a:hover { color: var(--primary-dark); }
.footer-link-sep { color: rgba(78,60,34,0.25); }
.footer-copy { color: rgba(78,60,34,0.45); }

/* #campaign（ヒーローではなく本体の入会キャンペーンセクション）内の価格表示。
   「2,980円」(3rem)と「で通い放題！」が横並びのまま幅に収まらず、hero側と同じ
   「で通い放/題！」という崩れ方をしていたため、同じ理由・同じ対処で縦積みにする。
   align-itemsは横並び用のbaselineが残ったままだと左寄りになるためcenterに変更。 */
.camp-twomonth-main { flex-direction: column; align-items: center; gap: 2px; }
/* 「入会金 5,500円→0円」の行もspace-between（両端揃え）だったのを中央揃えに */
.camp-item { justify-content: center; gap: 16px; }

/* ヒーローの価格カード（旧：白半透明×白文字→新：白カード×濃色文字） */
.hero-campaign-box {
  background: #FFFFFF;
  border: 1px solid #F0E4B0;
  padding: 14px;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(160,120,30,0.08);
}
.hcb-label { color: var(--gold-text); }
.hcb-row { }
.hcb-old, .hcb-old s { color: #9A8060; }
.hcb-arrow { color: var(--accent-dark); }
.hcb-new { color: var(--brown-deep); }
.hcb-new strong { color: var(--accent-dark); }
.hcb-camp-price-block { background: linear-gradient(135deg,#FFF6D0 0%, #FFE899 100%); border: 1px solid #F0D870; }
.hcb-camp-label { color: #9A8060; }
/* 「2,980円」と「で通い放題！」が横並びのままだと箱の幅に収まらず
   「で通い放/題！」のように不格好に折り返していたため、縦積みに変更。
   align-itemsは元々横並び用のbaselineが残っていて左寄りになっていたため、
   centerに変更して枠（.hcb-camp-price-block）に対して中央揃えにする。 */
.hcb-camp-main { flex-direction: column; align-items: center; gap: 2px; }
.hcb-camp-main strong { color: var(--accent-dark); }
.hcb-camp-unit { color: var(--brown-deep); }

/* ヘッダー・クイックナビの背景も白〜クリーム系に統一 */
.site-header { background: rgba(255,255,255,0.92); border-bottom: 1px solid #F0E2B2; }
.site-header.scrolled { background: rgba(255,255,255,0.98); box-shadow: 0 2px 16px rgba(160,120,30,0.10); }
.header-logo { border-right-color: rgba(233,168,32,0.25); }
.logo-en { color: var(--gold-text); }
.logo-ja { color: var(--text-light); }
.hc-row { color: #7A5010; }
.hc-row i { color: var(--primary); }
.hamburger { background: rgba(233,168,32,0.12); border-color: rgba(233,168,32,0.3); }
.hamburger span { background: var(--accent-dark); }
.quick-nav { background: rgba(255,255,255,0.94); border-top-color: #F0E2B2; box-shadow: 0 2px 10px rgba(160,120,30,0.08); }
.qn-link { color: #7A5010; border-right-color: rgba(233,168,32,0.18); }
.qn-link:active { background: rgba(233,168,32,0.10); }

/* ===== QUICK NAV =====
   ヒートマップ分析：モバイルの58%が上部5%しか見ずに離脱し、#hamburgerを
   最初にタップする傾向があった。ハンバーガーを開かずに主要情報へ直接
   ジャンプできる導線を、ヘッダー直下に固定表示する。
   #quickNavVisible クラスはjs/main-b.jsがヒーロー通過で自動的に外し、
   後続セクションの見出しに常時かぶらないようにする。 */
.quick-nav {
  position: fixed;
  top: 72px;
  left: 0;
  right: 0;
  z-index: 890;
  display: flex;
  height: 40px;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-top: 1px solid #F0E2B2;
  box-shadow: 0 2px 10px rgba(160,120,30,0.08);
  transform: translateY(0);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.quick-nav.qn-hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}
@media (min-width: 768px) {
  .quick-nav { max-width: 520px; left: 50%; transform: translateX(-50%); }
  .quick-nav.qn-hidden { transform: translateX(-50%) translateY(-100%); }
}
.qn-link {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 4px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #7A5010;
  border-right: 1px solid rgba(233,168,32,0.18);
  white-space: nowrap;
}
.qn-link:last-child { border-right: none; }
.qn-link i { font-size: 0.78rem; }
.qn-link:active { background: rgba(233,168,32,0.10); }

/* ヒーロー画像がヘッダー(72px)+クイックナビ(40px)の下に隠れないよう、
   hero-media側に上余白を追加（hero-bodyは写真の下に続くので影響なし）。 */
.hero-media { margin-top: 112px; }

/* ===== WORRY CTA ボタン =====
   離脱の6割弱が起きる直前、#worry末尾の説得文をタップ可能なCTAに変更。
   既存の.btn-primaryを流用し、余白のみ追加。 */
.worry-cta-btn { margin-top: 16px; }
.worry-cta-note {
  margin-top: 10px;
  font-size: 0.78rem;
  color: var(--text-light);
}

/* ===== HERO 見学無料・体験550円バッジ =====
   広告で最大ボリュームを獲得した説明文をhero-note（小さい1行）から格上げ。
   ただし枠+角丸ピル+背景塗りの「ボタン風」見た目はbtn-heroと紛らわしく
   デッドクリックを誘発しやすいため、枠・背景・角丸は持たせずフラットな
   テキスト行として表現する（アイコンも「タップ喚起」を連想させる
   fa-hand-sparklesから、情報性の高いfa-circle-checkに変更）。 */
.hero-trial-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 4px;
  text-align: center;
}
.hero-trial-badge i { color: var(--accent-dark); font-size: 0.85rem; flex-shrink: 0; }
.hero-trial-badge span {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--brown-deep);
  line-height: 1.4;
}

/* ===== CAMPAIGN 紹介・ペア割ボックス =====
   広告見出し「紹介キャンペーン中」「紹介・ペア割キャンペーン実施中」は成果十分だったが
   LP本体に記載が無かった。広告と同じ言葉をLPにも明記する。 */
.camp-referral-box {
  background: rgba(233,168,32,0.08);
  border: 1px dashed rgba(233,168,32,0.4);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.crb-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 900;
  color: var(--accent-dark);
}
.crb-text {
  font-size: 0.8rem;
  color: var(--text-mid);
  line-height: 1.6;
}
.crb-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  list-style: none;
  padding: 0;
}
.crb-list li {
  font-size: 0.82rem;
  color: var(--text-mid);
  line-height: 1.6;
}
.crb-list strong { color: var(--accent-dark); }
.crb-note {
  font-size: 0.72rem;
  color: var(--text-light);
  margin-top: 2px;
}

/* ===== ヘッダーロゴ・認定バッジのリンク化 =====
   タグを div/span → a に変更したことで生じる見た目の差分（下線・カーソル等）を打ち消す。
   flexレイアウト自体は元のクラス（.header-logo / .hc-row）のスタイルをそのまま継承する。 */
.header-logo, .hc-row { cursor: pointer; }
.header-logo:active, .hc-row:active { opacity: 0.7; }

/* ===== WORRY 横スワイプカルーセル化 =====
   ヒートマップで#worry区間の離脱が最も急で滞在時間も短かった。6項目の縦積みが
   読まれずに素通りされている可能性が高いため、横スクロール式に変更してスキャン
   負荷を下げる（既存の.ws-item自体は悩み→解決策のカードとして完結しているため、
   親要素のflex方向を変えるだけでカード化できる）。 */
.worry-solve-list {
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  margin: 20px -20px 0;
  padding: 0 20px 6px;
  scrollbar-width: none;
}
.worry-solve-list::-webkit-scrollbar { display: none; }
.ws-item {
  flex: 0 0 82%;
  max-width: 300px;
  scroll-snap-align: start;
}
.worry-swipe-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 0.72rem;
  color: var(--text-light);
}

/* ===== フローティングCTA 訴求強化 =====
   タップ数がハンバーガーメニューの1/6以下だったため、行動喚起文言だけでなく
   「何が得られるか」を常時見せる。 */
.btn-float-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.3;
}
.btn-float-main { font-size: 1.02rem; }
.btn-float-sub {
  font-size: 0.68rem;
  font-weight: 700;
  color: rgba(74,50,8,0.75);
}