/* =========================================================
   NAGI ｜ マルチページ用 追加コンポーネント
   （styles.css〔案1 Founder Luxury〕の後に読み込む）
   初版プロトタイプ・静的／データは暫定
   ========================================================= */

/* ---------- 画面IDバッジ（柏崎さんとの打ち合わせ用） ---------- */
/* ---------- 更新番号バッジ（管理用・pushごとにインクリメント） ---------- */
.build-version{position:fixed;right:8px;bottom:6px;z-index:60;
  font-family:var(--sans);font-size:.62rem;letter-spacing:.04em;color:#8a8375;
  background:rgba(255,255,255,.72);border-radius:3px;padding:.15em .5em;
  pointer-events:none;opacity:.75}
@media(prefers-color-scheme:dark){.build-version{background:rgba(0,0,0,.35);color:#c9c2b4}}

/* ---------- モバイル：ナビを消さず横スクロール行にする（Instagram流入対策） ---------- */
@media (max-width:820px){
  .site-header .bar{flex-wrap:wrap;height:auto;padding-top:.65rem;row-gap:.15rem}
  /* 横スクロールできる行にしても、flexの子は最小幅を下回れないので
     min-width:0 がないとページ全体が横にはみ出す（320px幅で13px） */
  .site-header .nav{display:flex;order:3;width:100%;min-width:0;overflow-x:auto;gap:1.5rem;
    padding:.5rem .2rem .75rem;font-size:.8rem;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .site-header .nav::-webkit-scrollbar{display:none}
  .site-header .nav a{white-space:nowrap;flex:none}
  .site-header .bar .header-cta{width:auto;margin-left:auto;font-size:.7rem;padding:.7em 1.2em}
}
/* 2026-08-03 実機で発見：320px級の幅（iPhoneの「画面表示を拡大」設定を含む）で
   ロゴ横の英字タグラインが198pxもあり、ロゴ＋「支援する」が横一列に収まらず、
   「支援する」だけが2段目に落ちてヘッダーが3段になっていた。
   タグラインの字間と大きさを詰めて、1段目に収める。 */
@media (max-width:400px){
  .site-header .brand-sub{letter-spacing:.1em;font-size:.48rem}
  /* ロゴと「支援する」の間の余白も詰める。これが22.4pxあり、
     タグラインを縮めただけでは3.4px足りずに折り返していた */
  .site-header .bar{column-gap:.6rem}
}
@media (max-width:620px){
  section.page-hero h1{font-size:1.8rem;line-height:1.3}  /* 語の途中改行を防ぐ */
  section.page-hero .page-hero-inner p{font-size:.96rem}
}

/* ---------- 写真プレースホルダー（撮影指示・打ち合わせ用） ---------- */
.photo-slot{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.6rem;aspect-ratio:4/3;border:2px dashed #d4b800;border-radius:6px;padding:1.2rem;text-align:center;
  background:repeating-linear-gradient(45deg,#fdf6d8,#fdf6d8 12px,#faf0c4 12px,#faf0c4 24px)}
.photo-slot.mini{aspect-ratio:auto;min-height:96px;padding:.8rem 1rem;flex-direction:row;justify-content:flex-start;
  gap:.9rem;text-align:left}
.photo-slot .ps-icon{font-size:1.5rem;line-height:1}
.photo-slot .ps-num{font-family:var(--sans);font-weight:700;font-size:.76rem;letter-spacing:.12em;
  color:#c40000;background:#ffe600;border:1px solid #d4b800;border-radius:40px;padding:.35em 1em;white-space:nowrap}
.photo-slot .ps-desc{font-size:.8rem;line-height:1.7;color:#8a6d00;max-width:40ch;margin:0}
.photo-grid-mini{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-top:1.3rem}
@media(max-width:620px){.photo-grid-mini{grid-template-columns:1fr}}
/* 既存ダミー画像の上に貼る番号チップ */
.photo-chip{position:absolute;top:10px;left:10px;z-index:5;display:flex;flex-direction:column;gap:.3em;
  align-items:flex-start;max-width:88%;pointer-events:none}
.photo-chip b{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.1em;color:#c40000;
  background:#ffe600;border:1px solid #d4b800;border-radius:40px;padding:.3em .9em}
.photo-chip span{font-family:var(--sans);font-size:.64rem;line-height:1.5;color:#c40000;
  background:rgba(255,230,0,.95);border:1px solid #d4b800;border-radius:4px;padding:.3em .6em;text-align:left}

/* ---------- ページ内リンク・戻り導線 ---------- */
.nav a.is-cta{color:var(--teal-deep)}
.crumb{width:92%;max-width:1280px;margin:1.6rem auto 0;
  font-family:var(--sans);font-size:.74rem;letter-spacing:.14em;color:var(--ink-soft)}
.crumb a{color:var(--gold-deep);border-bottom:1px solid transparent;transition:border-color .3s}
.crumb a:hover{border-color:var(--gold)}
.crumb span{margin:0 .6em;color:var(--greige)}
.backlink{display:inline-flex;align-items:center;gap:.6em;font-family:var(--sans);
  font-size:.78rem;letter-spacing:.14em;color:var(--ink-soft);margin-top:3rem;transition:color .3s}
.backlink:hover{color:var(--teal-deep)}
.backlink .arw{font-family:var(--serif);font-size:1.1em}

/* ---------- ページ・ヘッダー（下層ページの導入部） ---------- */
.page-hero{position:relative;text-align:center;color:var(--ivory);
  padding:clamp(120px,17vw,190px) 6% clamp(64px,9vw,104px);overflow:hidden;
  background:radial-gradient(120% 100% at 50% 0%, #1d2c27 0%, var(--dark) 52%, var(--dark-2) 100%)}
.page-hero.support-hero{background:radial-gradient(120% 100% at 50% 0%, #24302a 0%, #16211d 55%, #101815 100%)}
.page-hero .hero-grain{opacity:.05}
.page-hero-inner{position:relative;max-width:760px;margin-inline:auto}
.page-hero .kicker{justify-content:center;color:var(--gold)}
.page-hero h1{font-family:var(--serif);font-weight:400;
  font-size:clamp(2.2rem,6vw,4rem);line-height:1.16;letter-spacing:.02em;color:var(--paper);margin-bottom:1.5rem}
.page-hero p{font-size:1.05rem;line-height:2.05;color:#e2d8ca;max-width:46ch;margin:0 auto}
.page-hero .seal{width:clamp(78px,11vw,104px);height:clamp(78px,11vw,104px);margin:0 auto 2rem;
  border-radius:50%;overflow:hidden;border:1px solid rgba(196,183,144,.7);
  box-shadow:0 0 0 6px rgba(196,183,144,.08),0 18px 44px -18px rgba(0,0,0,.7),0 0 50px rgba(33,131,106,.3)}
.page-hero .seal img{width:100%;height:100%;object-fit:cover}

/* ---------- にぎわい効果（応援状況メーター） ---------- */
.buzz{background:#141d1a;color:var(--ivory);padding:clamp(48px,7vw,76px) 0;position:relative;overflow:hidden}
.buzz .buzz-glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(50% 60% at 20% 20%,rgba(33,131,106,.28),transparent 70%)}
.buzz-inner{position:relative;display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.buzz-figures{display:flex;flex-direction:column;gap:1.6rem}
.buzz-stat{display:flex;align-items:baseline;gap:1rem}
.buzz-num{font-family:var(--serif);font-size:clamp(2.4rem,6vw,3.7rem);color:var(--gold);line-height:1}
.buzz-unit{font-family:var(--body);font-size:1rem;color:#d8cfc0}
.buzz-label{font-family:var(--sans);font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--teal-soft);display:block;margin-bottom:.5rem}
.buzz-meter{margin-top:.4rem}
.buzz-track{height:6px;background:rgba(196,183,144,.16);border-radius:40px;overflow:hidden}
/* 2026-08-18：span は display:inline のため width/height が効かず、
   達成率のバーが実寸0pxで一度も描画されていなかった。block にして直す。
   幅は buzz.js が達成率（0.1%きざみ）で毎回上書きする。 */
.buzz-fill{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--teal),var(--gold));
  border-radius:40px;transition:width .8s cubic-bezier(.4,0,.2,1)}
.buzz-goal{display:flex;justify-content:space-between;margin-top:.8rem;
  font-family:var(--sans);font-size:.74rem;letter-spacing:.08em;color:#ccc4b6}
.buzz-comments{border-left:1px solid rgba(196,183,144,.28);padding-left:clamp(1.4rem,3vw,2.4rem)}
.buzz-comments .buzz-label{margin-bottom:1.2rem}
/* 2026-08-18 ほりけん指示：overflow:hidden だと3件目以降のコメントが
   切り落とされて読む手段が無かった。スクロールで覗けるようにする。
   下端のフェード（mask）は「まだ続きがある」合図としてそのまま残す */
.buzz-feed{list-style:none;display:flex;flex-direction:column;gap:1rem;max-height:230px;overflow-y:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(196,183,144,.45) transparent;
  padding-right:.5rem;padding-bottom:4rem;  /* 末尾のコメントがフェードに掛からず読み切れるように */
  -webkit-mask-image:linear-gradient(#000 74%,transparent);mask-image:linear-gradient(#000 74%,transparent)}
.buzz-feed::-webkit-scrollbar{width:5px}
.buzz-feed::-webkit-scrollbar-thumb{background:rgba(196,183,144,.45);border-radius:40px}
.buzz-feed::-webkit-scrollbar-track{background:transparent}
.buzz-feed li{background:rgba(255,255,255,.03);border:1px solid rgba(196,183,144,.14);
  border-radius:5px;padding:.95rem 1.2rem}
.buzz-feed p{font-size:.92rem;color:#e4dccd;line-height:1.7}
.buzz-feed .who{display:block;margin-top:.5rem;font-family:var(--sans);font-size:.68rem;
  letter-spacing:.14em;color:var(--gold-deep)}
.demo-flag{display:inline-block;font-family:var(--sans);font-size:.6rem;letter-spacing:.22em;
  text-transform:uppercase;color:#8a8375;border:1px solid rgba(196,183,144,.3);
  border-radius:40px;padding:.35em .9em;margin-left:.8em;vertical-align:middle}

/* ---------- 2分岐（参加の入口）＝クラファン本編の入口。テイストを変えて強調（2026-07-16打ち合わせ） ---------- */
.fork{
  background:
    radial-gradient(90% 55% at 50% 0%, rgba(196,183,144,.30), transparent 72%),
    linear-gradient(180deg,#efe5cb,#f4edda 55%,#f0e8d1);
  border-top:1px solid var(--gold);
  border-bottom:1px solid var(--gold);
}
.fork-band-label{
  display:inline-block;font-family:var(--sans);font-size:.68rem;letter-spacing:.5em;text-transform:uppercase;
  color:#2a2417;background:linear-gradient(135deg,#d8cba0,#c4b790 55%,#b39f6e);
  padding:.65em 1.4em .65em 1.9em;border-radius:30px;margin-bottom:1.8rem;
  box-shadow:0 10px 26px -14px rgba(120,100,50,.65);
}
.fork-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;margin-top:3.6rem}
.fork-card{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:6px;
  border:1px solid var(--greige);background:#fff;min-height:440px;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
.fork-card:hover{transform:translateY(-7px);box-shadow:0 40px 70px -38px rgba(40,60,52,.55)}
.fork-media{position:relative;height:210px;overflow:hidden}
.fork-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.fork-card:hover .fork-media img{transform:scale(1.06)}
.fork-media::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 30%,rgba(16,24,20,.7))}
.fork-tag{position:absolute;left:0;bottom:0;z-index:2;font-family:var(--serif);font-style:italic;
  color:var(--gold);font-size:1.2rem;padding:1.1rem 1.4rem}
.fork-body{padding:2.2rem 2rem 2.4rem;display:flex;flex-direction:column;flex:1}
.fork-body h3{font-family:var(--serif);font-size:1.7rem;font-weight:400;color:var(--ink);margin-bottom:.5rem}
.fork-for{font-family:var(--sans);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal-deep);margin-bottom:1.2rem}
.fork-body p{font-size:.98rem;color:#4a514c;flex:1;margin-bottom:1.7rem}
.fork-range{font-family:var(--serif);font-size:1.05rem;color:var(--gold-deep);margin-bottom:1.4rem}
.fork-card .btn{align-self:flex-start}

/* ---------- 2分岐の下の副リンク ---------- */
.fork-sub{display:flex;gap:2.4rem;justify-content:center;flex-wrap:wrap;margin-top:3rem}
.fork-sublink{font-family:var(--sans);font-size:.82rem;letter-spacing:.1em;color:var(--gold-deep);
  border-bottom:1px solid transparent;padding-bottom:2px;transition:border-color .3s,color .3s}
.fork-sublink:hover{border-color:var(--gold);color:var(--teal-deep)}

/* ---------- 共通コンテンツページ（about / terms） ---------- */
.doc{background:var(--ivory)}
.doc .wrap{max-width:860px}
.doc h2.h-serif{margin-top:3.4rem}
.doc h2.h-serif:first-of-type{margin-top:0}
.doc-block{margin-top:1.4rem;font-size:1rem;color:#3c443f;line-height:2}
.doc-table{width:100%;border-collapse:collapse;margin-top:1.6rem;font-size:.94rem}
.doc-table th,.doc-table td{text-align:left;padding:1rem 1.1rem;border-bottom:1px solid var(--greige);vertical-align:top}
.doc-table th{font-family:var(--sans);font-size:.76rem;letter-spacing:.1em;color:var(--gold-deep);
  white-space:nowrap;width:12em}
.doc-note{font-size:.84rem;color:var(--ink-soft);margin-top:1rem;line-height:1.8}
/* 2026-07-28：ページ頭のラベルが長いと、スマホで折り返して
   「RETURN-／TYPE SUPPORT」のようにハイフンで割れる。
   狭い画面では字間を詰めて1行に収める */
@media (max-width:520px){
  .page-hero .kicker{font-size:.62rem;letter-spacing:.24em}
}


/* 2026-07-28：狭い画面（〜370px）で表が画面幅を超え、右側が読めなくなっていた。
   項目名が折り返さない指定（nowrap・12em）で最低幅が決まってしまうため。
   スマホでは項目名を上、内容を下の縦積みにする */
@media (max-width:520px){
  .doc-table, .doc-table tbody, .doc-table tr, .doc-table th, .doc-table td{
    display:block;width:auto}
  .doc-table tr{border-bottom:1px solid var(--greige);padding:.2rem 0}
  .doc-table tr:last-child{border-bottom:none}
  .doc-table th{white-space:normal;border-bottom:none;padding:.9rem 0 .15rem}
  .doc-table td{padding:0 0 .9rem;border-bottom:none}
}



/* ---------- リターン詳細（下層ページ） ---------- */
.tiers{background:linear-gradient(var(--ivory-2),var(--ivory))}
/* 2026-08-02 柏崎さんご指示：コースの切れ目が分かりにくかったので、
   1本の線ではなく「1枚ずつのカード」に見せる。間隔もはっきり空ける。 */
.tier{display:grid;grid-template-columns:.5fr 1.5fr;gap:clamp(1.4rem,4vw,3.2rem);
  padding:clamp(1.8rem,4vw,2.6rem) clamp(1.1rem,3vw,2rem);
  margin-bottom:clamp(1.4rem,3vw,2rem);
  background:var(--paper);border:1px solid var(--greige);border-radius:6px;
  align-items:start}
.tier:last-child{margin-bottom:0}
.tier-head .t-amt{font-family:var(--serif);font-size:clamp(1.9rem,4.4vw,2.7rem);color:var(--teal-deep);line-height:1}
.tier-head .t-amt span{font-size:1rem;color:var(--gold-deep);margin-left:.15em}
.tier-head .t-name{font-family:var(--sans);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-deep);margin-top:.9rem;display:block}
.tier-head .t-plate{margin-top:.8rem;display:inline-block;font-family:var(--sans);font-size:.64rem;
  letter-spacing:.16em;padding:.4em .9em;border-radius:40px}
.t-plate.gold{background:linear-gradient(135deg,#e6d8ab,#c4b790);color:#4a3f1e}
.t-plate.silver{background:linear-gradient(135deg,#e9e6df,#cfccc4);color:#4a4a44}
.tier-body h3{font-family:var(--serif);font-size:1.4rem;font-weight:400;color:var(--ink);margin-bottom:1rem}
.tier-benefits{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.4rem 1.8rem}
.tier-benefits li{font-size:.94rem;padding:.55em 0 .55em 1.5em;position:relative;color:#454c47;
  border-bottom:1px dotted #e6ddcd}
.tier-benefits li::before{content:"";position:absolute;left:0;top:1em;width:6px;height:6px;
  border:1px solid var(--teal);transform:rotate(45deg)}
.tier-benefits li.hero-benefit{color:var(--teal-deep)}
.tier-benefits li.hero-benefit::before{background:var(--gold);border-color:var(--gold)}

/* ---- 2026-07-27 会議：支援コースの見せ方 ---- */
/* 特典名の途中で折り返して意味が切れないよう、意味のかたまりで行を分ける
   （例：「パーソナルトレーニング／1回60分・月4回 1年間無料」） */
.tier-benefits .bl{display:block}
/* 品目に添える補足（「デザインをお選びいただけます」など） */
.tier-benefits .tiny{display:block;font-size:.78em;color:var(--ink-soft);margin-top:.15em}
/* 特典に紐づく注釈。全体注釈と見分けがつくよう、直前の項目にぶら下げる */
.tier-benefits .benefit-note{grid-column:1/-1;margin:-.35em 0 .35em 1.5em;padding:0;
  font-family:var(--sans);font-size:.72rem;line-height:1.7;color:var(--ink-soft)}
.tier-benefits .benefit-note::before{display:none}
/* 注釈の番号と本文が続けて読めてしまう（「※1 1年間」が「※11年間」に見える）。
   番号を切り離して、間をはっきり空ける */
.tier-benefits .note-mark{display:inline-block;margin-right:.5em;font-weight:700}
/* その金額から付く特典の見せ方。
   2026-08-01 柏崎さんご指示：金額名のバッジ表示自体をやめ、
   本文そのものを太字にして強調する。
   （「ボタン無し・太文字」＝印を消して文字で見せる、の意） */
.tier-benefits li.perk{font-weight:700;color:var(--ink)}
/* 狭い画面では、本文の下に落として読みやすくする */
@media (max-width:420px){
  .tier-benefits li.perk::after{display:block;margin:.45em 0 0;width:fit-content}
}
.tier-cta{margin-top:1.6rem;display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.tier-note{font-size:.8rem;color:var(--ink-soft)}
.tier.is-feature{background:linear-gradient(150deg,rgba(33,131,106,.05),transparent);
  border-radius:8px;padding-inline:clamp(1rem,3vw,2rem)}

/* ---------- 資金の使い道（応援型ページ） ---------- */
.use-band{background:#171f1c;color:#e8ddcf}
.use-band .h-serif{color:var(--paper)}
.use-band .kicker{color:var(--gold)}
.use-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.3rem;margin-top:3.2rem}
.use-card{background:rgba(255,255,255,.03);border:1px solid rgba(196,183,144,.2);border-radius:6px;
  padding:2rem 1.8rem;transition:transform .5s var(--ease),background .5s}
.use-card:hover{transform:translateY(-5px);background:rgba(255,255,255,.06)}
.use-card b{font-family:var(--serif);font-weight:400;font-size:1.24rem;color:var(--gold);display:block;margin-bottom:.7rem}
.use-card p{font-size:.93rem;color:#cfc6b8;line-height:1.8}
.use-quote{font-family:var(--serif);font-style:italic;font-size:clamp(1.2rem,2.8vw,1.7rem);
  line-height:1.8;color:var(--gold);text-align:center;max-width:34ch;margin:3.6rem auto 0}

/* ---------- アンバサダー会員（最下層の独立枠） ---------- */
.amb-band{padding:0;background:var(--ivory)}
.amb-frame{position:relative;overflow:hidden;color:var(--ivory);
  background:radial-gradient(90% 130% at 15% 0%, #22322b 0%, #131d1a 55%, #0d1512 100%);
  padding:clamp(64px,9vw,116px) 0}
.amb-frame::before{content:"";position:absolute;inset:20px;border:1px solid rgba(196,183,144,.32);pointer-events:none}
.amb-inner{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:center}
/* 2026-08-03 柏崎さんご指摘のレイアウト崩れ。
   格子の子は既定で min-width:auto のため、折り返さない文字が入ると
   その幅まで枠が広がり、カードが画面からはみ出していた。
   0 を指定して、枠の幅を超えないようにする。 */
.amb-inner > *{min-width:0}
.amb-copy .kicker{color:var(--gold)}
.amb-copy h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,4.4vw,2.9rem);
  color:var(--paper);line-height:1.24;margin-bottom:1.5rem;max-width:16ch}
.amb-copy p{color:#d6cdbf;font-size:1.03rem;line-height:2;max-width:48ch;margin-bottom:1rem}
.amb-prices{list-style:none;display:flex;flex-direction:column;gap:1rem}
.amb-price{background:rgba(255,255,255,.04);border:1px solid rgba(196,183,144,.24);border-radius:7px;
  padding:1.6rem 1.8rem;display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.amb-price .p-for{font-family:var(--sans);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--teal-soft)}
.amb-price .p-name{font-family:var(--serif);font-size:1.24rem;color:var(--paper);margin-top:.4rem}
.amb-price .p-val{font-family:var(--serif);font-size:1.9rem;color:var(--gold);line-height:1;white-space:nowrap}
.amb-price .p-val small{font-size:.9rem;color:#d8cfc0}
.amb-price .p-old{font-size:.8rem;color:#9a9284;text-decoration:line-through;margin-right:.5em}

/* ---------- ゲストチケット等の帯 ---------- */
.mini-note-band{background:var(--paper);text-align:center}
.mini-note-band .h-serif{max-width:24ch;margin-inline:auto}

/* ---------- 責任範囲・仮表記の注記 ---------- */
.provisional{background:var(--ivory-2);border-top:1px solid var(--greige)}
.provisional .wrap{max-width:820px}
.provisional h2{font-family:var(--serif);font-size:1.3rem;font-weight:400;color:var(--ink);margin-bottom:1.2rem}
.provisional ul{list-style:none;font-size:.9rem;color:#4a514c;line-height:1.9}
.provisional li{padding:.3em 0 .3em 1.4em;position:relative}
.provisional li::before{content:"※";position:absolute;left:0;color:var(--gold-deep)}

/* ---------- 追加のレスポンシブ ---------- */
@media (max-width:960px){
  .buzz-inner{grid-template-columns:1fr;gap:2.4rem}
  .buzz-comments{border-left:none;border-top:1px solid rgba(196,183,144,.28);padding-left:0;padding-top:1.8rem}
  .fork-grid{grid-template-columns:1fr}
  .amb-inner{grid-template-columns:1fr}
  .tier{grid-template-columns:1fr;gap:1.2rem}
  .tier-benefits{grid-template-columns:1fr}
}

/* ============ 50万コース：リターン品リストのプルダウン（2026-07-17 柏崎さん要望） ============ */
.tier-acc summary{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;cursor:pointer;
  list-style:none;font-family:var(--sans);font-size:.86rem;font-weight:600;letter-spacing:.04em;
  padding:.95em 1.3em;border-radius:6px;color:#fff;
  background:linear-gradient(135deg,var(--teal-deep),#124635);
  box-shadow:0 12px 26px -16px rgba(18,63,49,.9);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.tier-acc summary::-webkit-details-marker{display:none}
.tier-acc summary::after{content:"▾";font-size:.9em;transition:transform .3s}
.tier-acc[open] summary::after{transform:rotate(180deg)}
.tier-acc summary:hover{transform:translateY(-2px);box-shadow:0 16px 30px -14px rgba(18,63,49,.95)}
.tier-acc .tier-benefits{margin-top:1.2rem}

/* ============ アンバサダー価格カード：詳細価格行（2026-07-17 柏崎さん要望） ============ */
.amb-price .p-detail{font-size:.86rem;color:#cfc6b8;margin-top:.5rem;line-height:1.8}
.amb-price .p-detail b{color:var(--gold);font-weight:400}

/* SPACEタグリストは 2026-07-18 に全面削除（当初はスマホ非表示のみだった） */

/* ============ 価格の根拠注記（オープン前のため「予定」である旨を明示・2026-07-18） ============ */
.price-basis{
  font-family:var(--sans);font-size:.62rem;line-height:1.6;letter-spacing:.02em;
  color:var(--ink-soft);opacity:.72;margin-top:.6rem;
}
/* 打ち消し線の金額に添える参照記号（説明文は下部に「※ …」で最小限） */
.ref{font-size:.6em;color:var(--ink-soft);opacity:.7;margin-left:.1em;vertical-align:super;line-height:0}
.amb-price .ref,.amb-frame .ref{color:#b7af9f}
/* 暗い背景のセクション上では明度を上げる */
.fork .price-basis{color:#7d7561}
.tiers .price-basis{color:var(--ink-soft)}

/* ============ 申込ボタン強調（NAGI-015・2026-07-24）＝ページ内で最も目立つ色。ゴールド(ヘッダー)と別のティール系 ============ */
.btn-apply{background:var(--teal-deep);color:#fff;border-color:var(--teal-deep);
  box-shadow:0 12px 30px -14px rgba(24,91,73,.7)}
.btn-apply:hover{background:#124635;border-color:#124635;color:#fff;transform:translateY(-2px)}
/* 先行利用などの小さめ補足注釈 */
.tier-subnote{font-family:var(--sans);font-size:.72rem;line-height:1.7;color:var(--ink-soft);margin-top:1rem}

/* ============ アンバサダー価格カードに申込ボタンを内包（NAGI-032・2026-07-24） ============ */
.amb-price.has-cta{flex-direction:column;align-items:stretch;gap:1.2rem}
.amb-price.has-cta .amb-price-row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;width:100%}
.amb-price.has-cta .btn{align-self:flex-start}
@media (max-width:520px){
  .amb-price.has-cta .amb-price-row{flex-direction:column;gap:.4rem}
}

/* ============ 画像注釈（完成イメージ）＝本文より小さく控えめに・2026-07-25 ============ */
.img-note{font-family:var(--sans);font-size:.7rem;letter-spacing:.02em;color:var(--ink-soft);opacity:.85}

/* ============ 会員名の折返し調整（NAGI-004/修正4）＝「グループパーソナルトレーニング」を1行に収める ============ */
.amb-price .p-name{font-size:clamp(.95rem,4.1vw,1.24rem);line-height:1.45}
@media (min-width:521px){ .amb-price .p-name{font-size:1.24rem} }

/* ============ 資金の使い道カードの実写（2026-07-25 本体HPの撮影素材を組み込み） ============ */
.use-photo{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:5px;margin-bottom:1.1rem;
  border:1px solid rgba(196,183,144,.28)}

/* ============ 外観写真（2026-07-25 実写を追加） ============ */
.facade-fig{margin:0 0 2rem}
.facade-fig img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:5px;
  border:1px solid rgba(196,183,144,.35);box-shadow:0 22px 46px -30px rgba(40,60,52,.5)}
.facade-fig figcaption{font-family:var(--sans);font-size:.76rem;letter-spacing:.04em;
  color:var(--ink-soft);text-align:center;margin-top:.9rem;line-height:1.8}
.use-band .facade-fig figcaption,.tiers .facade-fig figcaption{color:#a49c8d}

/* ============ リターンカード内の物撮り（2026-07-26 追加） ============ */
.tier-fig{margin:1.4rem 0 0;max-width:380px}
/* 本番の写真がまだ用意できていない枠。柏崎さんが見て分かるように印を出す
   （撮影素材が届いたら need-shot を外すだけでよい） */
.tier-fig.need-shot{position:relative}
.tier-fig.need-shot::before{content:"撮影予定";position:absolute;top:.5rem;left:.5rem;z-index:2;
  font-family:var(--sans);font-size:.6rem;letter-spacing:.1em;padding:.35em .7em;border-radius:40px;
  background:rgba(24,36,31,.82);color:#f3efe6}
.tier-fig img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:5px;
  border:1px solid rgba(196,183,144,.3)}
.tier-fig figcaption{font-family:var(--sans);font-size:.7rem;letter-spacing:.03em;
  color:var(--ink-soft);margin-top:.6rem;opacity:.85}

/* ============ 泣き別れ防止（2026-07-26 シミュレーター検証で発見） ============
   最終行に「す。」等が1文字だけ残るのを防ぐ。非対応ブラウザでは無視される */
.page-hero p,.lead-col p,.lead-col.single,.message-quote p,
.fork-body p,.tier-benefits li,.p-detail,.note{text-wrap:pretty}
/* 2026-07-28：スマホで最終行に1〜2文字だけ落ちる問題への根本対応。
   7/27の会議の指摘41件のうち16件が改行で、そのほとんどがこの症状だった。
   auto-phrase は日本語の文節で折り返す（対応ブラウザで 27箇所→4箇所に減った）。
   非対応の iOS 向けには assets/wrap-guard.js が受け皿になる */
p, li, dd, dt, td, th, figcaption,
h1, h2, h3, h4,
.p-detail, .note, .sent-lines > span, .bl{
  word-break: auto-phrase;
  text-wrap: pretty;
  line-break: strict;
}
/* 末尾がひとかたまりで落ちるよう束ねる（記号や単位が独りにならないように） */
.nb{white-space:nowrap}

/* 会員名だけ中央に置く（2026-07-31 柏崎さんのご指示）。
   金額の行は左のままにして、名前だけを真ん中に見せる。 */
.p-name.p-name-center{text-align:center}

/* リターン品についての但し書き。コース一覧の下に一度だけ出す。
   本文より一段落として、静かに置く（2026-07-31）。 */
.tier-footnote{
  margin:2.2rem auto 0;max-width:34em;
  font-family:var(--sans);font-size:.82rem;line-height:2;
  color:var(--ink-soft);text-align:center;
}
.tier-footnote > span{display:block}
@media (max-width:640px){
  .tier-footnote{margin-top:1.8rem;font-size:.78rem;text-align:left}
}

/* 中央揃えの節の中でも、この段落だけは左に寄せる
   （2026-08-01 柏崎さんご指示 P2-49・P2-50） */
.lead-col.lead-left, .lead-col.lead-left p{text-align:left}

/* 設備の説明で、器具名の行だけ中央に置く（P2-56） */
.use-card .sent-lines > span.c{display:block;text-align:center}

/* 会員カードの中身を中央に揃える（2026-08-01 柏崎さんご指示 P5-11/12/15/16）。
   会員名（P5-10/14）はすでに中央なので、説明文と金額も揃えて
   カード全体を1本の中心線に乗せる。
   価格の行は flex なので、縦積みになる狭い画面では中央に寄せ、
   横並びのままの広い画面では従来どおり左右に振り分ける */
.amb-price .p-detail{text-align:center}
.amb-price .p-val{text-align:center}
@media (max-width:520px){
  .amb-price.has-cta .amb-price-row{align-items:center}
  .amb-price.has-cta .amb-price-row > div{width:100%}
  .amb-price .p-for{display:block;text-align:center}
  .amb-price.has-cta .btn{align-self:stretch}
}

/* 最後のご挨拶（P1-33）。3つの段落を1つにまとめて表示（2026-08-02）。
   2026-08-03: fit-lines（1文=1行固定）は最長の文に合わせて全体が
   縮み過ぎ、短い文の右に余白が目立ったため、通常の折り返しに戻した */
/* 最後のご挨拶（P1-33）。3つの段落を1つにまとめ、1文＝1行・左よせで見せる。
   入らない幅では fit-lines が字を縮める（2026-08-02）。
   2026-08-03: max-width は em で持たない。字が縮むと枠まで縮んで
   さらに字が縮む堂々巡りになり、10.5px まで落ちていたため。 */
.closing-note{margin-inline:auto;line-height:2.1;text-align:left}
.closing-note > span{display:block}

/* 「正直に、お伝えいたします」の一文（P2-49）。
   2つの段落を1つにまとめ、字を小さくして短く見せる（2026-08-02） */
.honest-note{max-width:36em;margin-inline:auto;line-height:2.05;text-align:left}
.honest-note > span{display:block}
.honest-note > span.gap{margin-top:1.1em}

/* 資金の使い道カードの説明（P2-56・P2-58）。3行に揃える */
.use-note > span{display:block}

/* よくあるご質問の区切り（2026-08-02 で36問に増えたため）。
   探しているものに辿り着けるよう、内容ごとにまとめる。 */
.faq-group{
  font-family:var(--serif);font-size:1.02rem;font-weight:400;
  color:var(--teal-deep);margin:2.6rem 0 .9rem;padding-bottom:.5rem;
  border-bottom:1px solid var(--gold);letter-spacing:.04em;
}
.faq-list > .faq-group:first-child{margin-top:2rem}