/* koll jiujitsu — 配色は公式ロゴ koll-jiu-jitsu_logo004.png の実測値。
   不透明ピクセルの92.9%が #5BB431 で、これがブランド色。
   柔術は「硬派だが敷居は低い」を出したいので、余白を広く、線は細く、色は緑1色に絞る。

   **--green に白文字を載せない。** 白とのコントラストが 2.62:1 しかなく、
   コンパス §11「4.5:1 以上」を満たさない。文字を載せる面は --green-dark（5.04:1）を使う。
   --green は面・線・下線など、文字を載せない装飾に限る。 */
:root{
  /* ── 配色の決まり（2026-09-16 作り直し）──────────────────────────
     TCD の MAXX(043) / FORCE(078) に倣い、**黒基調＋差し色1色**にした。
     緑を面に広く使わない。緑を広く敷くと、その上に置く緑（LINEの緑・
     ボタン・タグ）が沈んで「緑背景に緑」になる。実際にそうなって指摘を受けた。

     ・--ink 系 … 面。黒に近い地を作るのはここ
     ・--green … **文字・細い線・小さいラベルだけ。**背景に敷かない
     ・--line-green … LINEの指定色。**白か黒の上にだけ置く。緑の上に置かない**
     ・大きいボタンは黒（明るい地）か白（暗い地）。色ボタンを2つ並べない
     ────────────────────────────────────────────── */
  --green:#5BB431; --green-dark:#3F7D22; --green-light:#EEF7EA;
  --line-green:#06C755;
  --ink:#0F1310; --ink-2:#1A2116; --ink-soft:#4A4A4A; --line:#E2E2E2; --bg:#FFFFFF;
  --paper-2:#F6F7F4;
  --accent:#C8362B;
  --max:1080px; --gap:clamp(1rem,4vw,2.5rem);
  /* 見出しだけ1書体読む。本文は端末のゴシックのまま（Base.astro で読み込み） */
  --font-h:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,system-ui,sans-serif;
  line-height:1.9;font-size:16px;letter-spacing:.02em;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--green-dark);text-underline-offset:.2em}
.skip{position:absolute;left:-9999px}
.skip:focus{left:.5rem;top:.5rem;background:#fff;padding:.5rem 1rem;z-index:100}
/* 読み上げ専用 */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
         clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gap)}

/* ── ヘッダー ── */
.hd{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);
    backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.hd__in{display:flex;align-items:center;gap:1rem;min-height:64px}
.hd__logo{display:flex;align-items:center;gap:.6rem;font-weight:700;
          text-decoration:none;color:var(--ink);font-size:1.05rem;letter-spacing:.04em}
/* エンブレム（円形・縦横比 167:183）＋ワードマーク（530:102）の組み */
.hd__logo--img{gap:.5rem}
.hd__emblem{width:auto;height:40px;display:block;flex:none}
.hd__word{width:auto;height:26px;display:block}
.hd__nav{margin-left:auto;display:flex;gap:1.1rem;flex-wrap:wrap}
.hd__nav a{color:var(--ink-soft);text-decoration:none;font-size:.9rem;padding:.3rem 0;
           border-bottom:2px solid transparent}
.hd__nav a:hover,.hd__nav a[aria-current="page"]{color:var(--green-dark);border-color:var(--green)}
.hd__cta{background:var(--green-dark);color:#fff!important;padding:.55rem 1.1rem;border-radius:999px;
         font-weight:700;text-decoration:none;font-size:.9rem;white-space:nowrap}
.hd__cta:hover{background:#356819}
@media(max-width:820px){
  .hd__nav{display:none}
  .hd__in{min-height:56px}
}

/* ── ヒーロー ──
   写真を全面に敷き、上に暗い層を重ねて白文字を載せる。
   **写真の明るさは撮影ごとに違う**ので、可読性は overlay の濃さで担保する
   （文字に影を足して誤魔化さない）。 */
.hero{position:relative;isolation:isolate;min-height:clamp(420px,72vh,640px);
      display:grid;align-items:center;color:#fff;overflow:hidden}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
/* 覆いは**無彩色の黒**にする。緑を混ぜると写真全体が緑に転び、
   その上に置く緑の要素が沈む（2026-09-16 指摘を受けて変更） */
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(0,0,0,.66) 0%,rgba(0,0,0,.48) 45%,rgba(0,0,0,.78) 100%)}
/* .wrap の内側に置いて左揃えにする。.wrap と兼用すると margin-inline:auto で
   中央に寄り、左揃えの文字とちぐはぐになる（2026-09-16 スクショで発覚） */
.hero__in{padding-block:clamp(3rem,9vw,5.5rem);max-width:46rem}
.hero__badge{display:inline-block;background:var(--green);color:#0C2207;font-size:.78rem;
             padding:.3rem .9rem;border-radius:999px;font-weight:900;letter-spacing:.1em}
.hero h1{font-family:var(--font-h);font-size:clamp(1.75rem,5.6vw,3.1rem);line-height:1.42;
         margin:1.1rem 0 .9rem;font-weight:900;letter-spacing:.02em}
.hero h1 em{font-style:normal;color:#9BE06A}
.hero__sub{color:rgba(255,255,255,.88);margin:0 0 2rem;max-width:34em;font-size:1.02rem}
.hero__btns{display:flex;gap:.8rem;flex-wrap:wrap}
.hero__scroll{position:absolute;left:50%;bottom:1.1rem;transform:translateX(-50%);
  font-size:.66rem;letter-spacing:.3em;color:rgba(255,255,255,.75);writing-mode:horizontal-tb}
@media(max-width:560px){.hero__scroll{display:none}}

/* ── ボタン ──
   FORCE(tcd078) に倣って**主ボタンは黒**。色つきボタンを並べると
   どちらが主か分からなくなり、緑地の上では緑ボタンが沈む。
   色を使うのは LINE の1つだけ。 */
.btn{display:inline-block;padding:.9rem 1.9rem;border-radius:4px;font-weight:700;
     text-decoration:none;border:2px solid transparent;transition:.15s;
     font-family:var(--font-h);letter-spacing:.06em}
.btn--fill{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn--fill:hover{background:#000;border-color:#000}
/* LINEの緑。**白か黒の地の上でだけ使う**（緑の面に載せない） */
.btn--line{background:var(--line-green);border-color:var(--line-green);color:#fff}
.btn--line:hover{filter:brightness(.93)}
.btn--lg{padding:1.05rem 2.4rem;font-size:1.05rem}
.btn--ghost{color:var(--ink);border-color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff}
/* 暗い地の上に置く用 */
.btn--onDark{background:#fff;color:var(--ink);border-color:#fff}
.btn--onDark:hover{background:#E8E8E4;border-color:#E8E8E4}

/* ── セクション ── */
.sec{padding:clamp(3rem,8vw,5.5rem) 0}
.sec--tint{background:#F7FAF4}
/* 見出しの上に英字の小さいラベルを置いて字面を締める（涛士会の型） */
.sec__en{display:block;font-family:var(--font-h);font-size:.7rem;font-weight:700;
         letter-spacing:.28em;color:var(--green-dark);margin-bottom:.5rem}
.sec__h{font-family:var(--font-h);font-size:clamp(1.4rem,4.2vw,2.1rem);font-weight:900;
        margin:0 0 .4rem;line-height:1.45;letter-spacing:.03em}
.sec__lead{color:var(--ink-soft);margin:0 0 2.2rem}
.sec__h::after{content:"";display:block;width:2.5rem;height:3px;background:var(--green);
               margin-top:.8rem;border-radius:2px}

/* ── 数字・要点の帯 ── */
.stats{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;
       overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.stat{background:#fff;padding:1.5rem 1.3rem;text-align:center}
.stat__value{display:block;font-family:var(--font-h);font-weight:900;color:var(--green-dark);
             font-size:clamp(1.3rem,3.6vw,1.75rem);line-height:1.3;letter-spacing:.02em}
.stat__label{display:block;font-size:.78rem;color:var(--ink-soft);letter-spacing:.1em;margin-bottom:.4rem}
.stat__note{display:block;font-size:.82rem;color:var(--ink-soft);margin-top:.45rem}

/* ── カード ── */
.cards{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.card{border:1px solid var(--line);border-radius:12px;padding:1.4rem;background:#fff}
.card h3{margin:0 0 .5rem;font-size:1.05rem;color:var(--green-dark)}
.card p{margin:0;color:var(--ink-soft);font-size:.93rem}
.card__tag{display:inline-block;background:var(--green-light);color:var(--green-dark);
           font-size:.75rem;padding:.15rem .6rem;border-radius:4px;margin-bottom:.5rem;font-weight:700}

/* ── 写真の並び ── */
.shots{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.shots img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;border-radius:12px}

/* ── 表 ── */
.tbl{width:100%;border-collapse:collapse;font-size:.93rem}
.tbl th,.tbl td{border:1px solid var(--line);padding:.7rem .9rem;text-align:left;vertical-align:top}
.tbl th{background:var(--green-light);color:var(--green-dark);white-space:nowrap;font-weight:700}
.tbl--scroll{overflow-x:auto}

/* ── 未確定の印。**推測で埋めない**ための可視化 ── */
.tbd{background:#FFF6E5;border-left:4px solid #E9A23B;padding:.9rem 1.1rem;border-radius:0 8px 8px 0;
     font-size:.9rem;color:#6A4A12;margin:.8rem 0}
.tbd strong{color:#8A5A0E}

/* ── よくある質問 ── */
.qa{border-top:1px solid var(--line)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{padding:1.1rem .2rem;cursor:pointer;font-weight:700;list-style:none;
            display:flex;align-items:center;gap:.7rem}
.qa summary::-webkit-details-marker{display:none}
.qa summary::before{content:"Q";color:var(--green);font-weight:800;flex:none}
.qa div{padding:0 .2rem 1.2rem 1.9rem;color:var(--ink-soft);font-size:.95rem}

/* ── フッター ── */
.ft{background:var(--ink);color:#D6D6D6;padding:2.5rem 0 1.5rem;margin-top:3rem;font-size:.9rem}
.ft a{color:#fff}
.ft__grid{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
.ft h3{color:#fff;font-size:.95rem;margin:0 0 .6rem}
.ft__logo{width:auto;height:30px;margin:0 0 .8rem}
.ft ul{list-style:none;margin:0;padding:0}
.ft li{margin-bottom:.35rem}
.ft__copy{border-top:1px solid #333;margin-top:1.8rem;padding-top:1.2rem;color:#9A9A9A;font-size:.82rem}

/* ── 帯 ──
   緑地はやめた。写真＋黒の覆いにして、LINEの緑が沈まない地を作る。 */
.band{position:relative;isolation:isolate;color:#fff;text-align:center;overflow:hidden;
      padding:clamp(3rem,8vw,4.5rem) 0}
.band__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.band::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(0,0,0,.66)}
.band h2{margin:0 0 .6rem;font-family:var(--font-h);font-weight:900;
         font-size:clamp(1.3rem,4.2vw,2rem);letter-spacing:.04em}
.band p{margin:0 0 1.6rem;opacity:.92}

@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ── スマホのメニュー（JSなし・details で開閉） ──
   2026-09-16：ナビを display:none にするだけで代替を置いておらず、
   スマホから体験以外のページへ行けない状態だった。スクショで気づいて追加。 */
.hd__mb{display:none;margin-left:.4rem;position:relative}
.hd__mb>summary{list-style:none;cursor:pointer;width:42px;height:42px;
  display:flex;flex-direction:column;justify-content:center;gap:5px;padding:0 9px;
  border:1px solid var(--line);border-radius:8px;background:#fff}
.hd__mb>summary::-webkit-details-marker{display:none}
.hd__mb>summary span{display:block;height:2px;background:var(--ink);border-radius:2px}
.hd__mb[open]>summary{border-color:var(--green)}
.hd__mb-panel{position:absolute;right:0;top:calc(100% + .5rem);width:min(80vw,16rem);
  background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 12px 32px rgba(0,0,0,.14);overflow:hidden;z-index:60}
.hd__mb-panel nav{display:flex;flex-direction:column}
.hd__mb-panel a{padding:.85rem 1.1rem;text-decoration:none;color:var(--ink);
  border-bottom:1px solid var(--line);font-size:.95rem}
.hd__mb-panel a:last-child{border-bottom:none;color:#06C755;font-weight:700}
.hd__mb-panel a:hover,.hd__mb-panel a[aria-current="page"]{background:var(--green-light);color:var(--green-dark)}
@media(max-width:820px){
  .hd__mb{display:block}
  .hd__cta{padding:.5rem .9rem;font-size:.82rem}
  .hd__emblem{height:34px}
  .hd__word{height:22px}
}
@media(max-width:400px){
  /* ⚠ ここで以前 .hd__word{display:none} にしていたが、**実測すると横幅に余裕があり**
     消す必要はなかった。エンブレムだけになると何の店か分からない。
     ワードマークは小さくして残し、落とすのは補助のタグラインだけにする
     （C案の指定は下の「ヘッダーロゴ C案」にまとめてある） */
  .hd__cta{padding:.45rem .7rem;font-size:.78rem}
}

/* ── 確認用ビューア（コンパス §1.9 の4本）──
   涛士会サイト（~/sites/toshikai）の実装を移植したもの。
   公開するときは preview/ ごと消す。 */
.pv-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 12px var(--gap);
  background: var(--green-dark);
  color: #FFFFFF;
  font-size: 13px;
}
.pv-bar__title {
  font-family: inherit;
  letter-spacing: .08em;
  margin-right: auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pv-bar a, .pv-bar select {
  color: #FFFFFF;
  font-size: 12.5px;
  letter-spacing: .06em;
}
.pv-bar a {
  text-decoration: none;
  border: 1px solid rgba(248, 246, 240, .45);
  padding: 7px 14px;
  white-space: nowrap;
  transition: background-color .25s ease, border-color .25s ease;
}
.pv-bar a:hover { background: var(--green); border-color: var(--green); color: #fff; }
.pv-bar a[aria-current="true"] { background: var(--green); border-color: var(--green); color: #fff; }
.pv-bar select {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(248, 246, 240, .45);
  padding: 6px 10px;
  max-width: 46vw;
}
.pv-stage {
  background: #E9E6DF;
  display: flex;
  justify-content: center;
  padding: 18px var(--gap) 28px;
  min-height: 60vh;
}
.pv-scale { transform-origin: top center; }
.pv-frame {
  border: 0;
  display: block;
  background: #fff;
  box-shadow: 0 6px 30px rgba(37, 12, 71, .18);
}
.pv-phone {
  border: 10px solid #1C1A18;
  border-radius: 34px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 10px 40px rgba(37, 12, 71, .25);
}
.pv-phone .pv-frame { border-radius: 24px; }
.pv-shot {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
  box-shadow: 0 6px 30px rgba(37, 12, 71, .18);
}
.pv-shot-wrap { max-width: 1200px; width: 100%; }
.pv-shot-wrap--sp { max-width: 420px; }
.pv-msg {
  max-width: 680px;
  margin: 24px auto;
  border: 1px solid var(--green);
  background: rgba(199, 150, 55, .08);
  padding: 20px 22px;
  font-size: 14px;
  line-height: 1.9;
}
.pv-list { width: 100%; border-collapse: collapse; font-size: 14px; }
.pv-list th, .pv-list td { border-bottom: 1px solid var(--line); padding: 14px 12px; text-align: left; vertical-align: middle; }
.pv-list thead th { background: #FFFFFF; font-family: inherit; font-size: 13px; letter-spacing: .1em; color: var(--green-dark); border-bottom: 1px solid var(--green); white-space: nowrap; }
.pv-list td.pv-links { white-space: nowrap; }
.pv-link {
  display: inline-block;
  border: 1px solid var(--line);
  padding: 6px 13px;
  margin-right: 6px;
  font-size: 12.5px;
  letter-spacing: .06em;
  text-decoration: none;
  transition: border-color .25s ease, color .25s ease;
}
.pv-link:hover { border-color: var(--green); color: var(--gold-dark); }
.pv-link--real { border-style: dashed; }
.pv-note { font-size: 12.5px; color: var(--ink-soft); }

/* ── 時間割 ──
   出典は docs/source/IMG_0780.JPG。**画像貼りにしない**（スマホで読めず検索にも乗らない）。
   狭い画面では横スクロールさせるが、**ページ自体は横に伸ばさない**
   （コンパス §18.4「ボタンが右にはみ出した」と同じ事故を防ぐため overflow で閉じる）。 */
.sch__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:14px;background:#fff}
/* table-layout:fixed で曜日の列幅を揃える。既定の自動幅だと
   文字数の多い金曜だけ広がり、表が傾いて見える（2026-09-16 スクショで発覚） */
.sch__tbl{border-collapse:collapse;width:100%;min-width:46rem;font-size:.86rem;table-layout:fixed}
.sch__tbl col.sch__c-time{width:7.5rem}
.sch__tbl col.sch__c-sun{width:3.5rem}
.sch__tbl th,.sch__tbl td{border:1px solid var(--line);padding:.55rem .4rem;text-align:center}
.sch__tbl thead th{background:var(--green-dark);color:#fff;font-family:var(--font-h);
  font-weight:700;letter-spacing:.06em;padding-block:.7rem}
.sch__tbl thead th:first-child{background:#2F5E19}
.sch__time{white-space:nowrap;color:var(--ink-soft);font-weight:400;font-size:.78rem;
  background:#FAFBF8;font-variant-numeric:tabular-nums}
.sch__dash{opacity:.55;margin-inline:.1em}
.sch__off{background:#F4F4F2}
.sch__on{font-weight:700;line-height:1.35;color:#1B1B1B}
/* クラスの性格ごとに色を変える。元の時間割の色分けに合わせている */
.sch__on--kids  {background:#FFF3A8}
.sch__on--junior{background:#CDE8A6}
.sch__on--lesson{background:#F3A9A2}
.sch__on--spar  {background:#AFD5F0}
.sch__on--judo  {background:#F2CDB6}
.sch__on--open  {background:#EDEDE9;font-weight:400;color:var(--ink-soft)}
.sch__closed,.sch__closed-h{background:#3A3A38;color:#fff}
.sch__closed{font-family:var(--font-h);letter-spacing:.2em;font-size:.85rem}

.sch__legend{display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;list-style:none;margin:1rem 0 0;padding:0;
  font-size:.8rem;color:var(--ink-soft)}
.sch__legend li{display:flex;align-items:center;gap:.4rem}
.sch__chip{width:.85rem;height:.85rem;border-radius:3px;border:1px solid rgba(0,0,0,.12);flex:none}
.sch__chip--kids{background:#FFF3A8}
.sch__chip--junior{background:#CDE8A6}
.sch__chip--lesson{background:#F3A9A2}
.sch__chip--spar{background:#AFD5F0}
.sch__chip--judo{background:#F2CDB6}
.sch__chip--open{background:#EDEDE9}
.sch__note{margin:1rem 0 0;font-size:.85rem;color:var(--ink-soft)}

/* ── 指導者を推す帯 ── */
.stat--lead{background:var(--green-light)}
.stat--lead .stat__value{color:#2F5E19}
.coach{display:grid;gap:clamp(1.2rem,3vw,2.2rem);align-items:center}
@media(min-width:820px){.coach{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}}
.coach__img{border-radius:14px;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.coach__rank{display:inline-block;background:#2F5E19;color:#fff;font-family:var(--font-h);
  font-weight:700;font-size:.78rem;letter-spacing:.08em;padding:.35rem .9rem;border-radius:999px}
.coach__name{font-family:var(--font-h);font-weight:900;font-size:clamp(1.4rem,4vw,2rem);
  margin:.8rem 0 .2rem;letter-spacing:.04em}
.coach__en{color:var(--ink-soft);font-size:.85rem;letter-spacing:.12em}
.coach__src{font-size:.8rem;color:var(--ink-soft);margin-top:1rem}
/* 表が横に流れることの目印。表が収まる幅では出さない */
.sch__hint{display:none;margin:0 0 .5rem;font-size:.78rem;color:var(--ink-soft);
  letter-spacing:.06em;text-align:center}
@media(max-width:780px){.sch__hint{display:block}}
.sch__scroll:focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* ══ 2026-09-16 作り直し（TCD MAXX043 / FORCE078 を参考）══════════════
   黒基調＋差し色1色。緑は文字・細線・小ラベルだけに使う。 */

.wrap--narrow{max-width:820px}

/* 暗いセクション。白地と交互に置いてリズムを作る */
.sec--dark{background:var(--ink);color:#EDEFEA}
.sec--dark .sec__h{color:#fff}
.sec--dark .sec__lead{color:rgba(237,239,234,.72)}
.sec--dark .sec__en{color:var(--green)}
.sec--dark .sec__h::after{background:var(--green)}
.sec--dark a{color:#fff}

/* FORCE の型：大きな英字の上に日本語を重ねる見出し */
.display{font-family:var(--font-h);font-weight:900;letter-spacing:.06em;
  font-size:clamp(2rem,7vw,4.2rem);line-height:1.1;margin:0}
.display--hero{color:#fff}
.display__ja{display:block;font-size:clamp(1rem,2.4vw,1.35rem);letter-spacing:.14em;
  font-weight:700;margin-top:1rem;line-height:1.7}

/* 全幅の写真帯（FORCE の6枚並び） */
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(50%,12rem),1fr));gap:0}
.strip img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4;display:block}

/* LINEの申込ブロック。**申込導線はここだけ**（2026-09-16 高山さん指示） */
.linebox{border:1px solid var(--line);border-radius:14px;padding:clamp(1.5rem,4vw,2.4rem);
  text-align:center;background:var(--paper-2)}
.linebox__lead{margin:0 0 1.4rem;font-size:1.05rem}
.linebox__qr{width:min(200px,56vw);height:auto;margin:1.6rem auto .6rem;border-radius:10px;
  background:#fff;padding:.5rem;border:1px solid var(--line)}
.linebox__note{margin:0;font-size:.85rem;color:var(--ink-soft)}

/* 箇条書き。緑の細い印だけ使う */
.ticks{list-style:none;padding:0;margin:0 0 1.4rem}
.ticks li{position:relative;padding-left:1.4rem;margin-bottom:.5rem}
.ticks li::before{content:"";position:absolute;left:0;top:.75em;width:.6rem;height:2px;
  background:var(--green);border-radius:2px}

/* ヘッダーのCTAも黒に統一（緑ボタンを増やさない） */
.hd__cta{background:var(--ink)!important}
.hd__cta:hover{background:#000!important}

/* ⚠ .sec--dark a{color:#fff} が後から効き、白ボタンの文字まで白くしていた
   （2026-09-16 スクショで「白い空の箱」になって発覚）。ボタンだけ打ち消す */
.sec--dark .btn--onDark{color:var(--ink)}
.sec--dark .btn--onDark:hover{color:var(--ink)}
.sec--dark .btn--line{color:#fff}

/* 数字帯の1枠目。薄緑の地に緑文字＝「緑背景に緑」だったので黒地にする。
   緑は数字の色としてだけ残す */
.stat--lead{background:var(--ink)}
.stat--lead .stat__label{color:rgba(255,255,255,.66)}
.stat--lead .stat__value{color:#9BE06A;font-size:clamp(1.15rem,3vw,1.5rem)}
.stat--lead .stat__note{color:rgba(255,255,255,.62)}

/* ⚠ LINEの緑 #06C755 に白文字は **2.26:1** しかなく、コンパス §11（4.5:1以上）を満たさない。
   LINE公式のボタンは白文字だが、それをそのまま持ってくると読めない。
   **黒文字なら 8.30:1** になり、緑の鮮やかさも保てるのでこちらにする。 */
.btn--line{color:#0F1310}
.btn--line:hover{color:#0F1310}
.sec--dark .btn--line{color:#0F1310}

/* 暗い地の上の補助文字。--ink-soft(#4A4A4A) は 2.11:1 で読めなかった */
.sec--dark .coach__en,
.sec--dark .stat__note,
.sec--dark .coach__src{color:#A3AC9C}
.coach__en{color:var(--ink-soft)}
.sec--dark .coach__en{color:#A3AC9C}

/* ══ ファーストビュー 作り直し（2026-09-16）════════════════════════
   「日本一」の一点に絞り、中央構成にした。
   ⚠ .hero__in は .wrap と兼用して**中央寄せで正しい**（中央構成なので）。
      左揃えに戻すときは wrap を外側に分けること（前回そこで崩した）。 */
.hero__in{text-align:center;max-width:56rem;padding-block:clamp(3.5rem,10vw,6rem)}
.hero__mark{width:clamp(56px,7vw,76px);height:auto;margin:0 auto 1.4rem;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.45))}

/* 順位を「賞」として見せる。細い罫で肩書きらしくする */
.rank{display:flex;align-items:center;justify-content:center;gap:clamp(.7rem,2vw,1.4rem);
  margin:0 0 1.1rem}
.rank__rule{flex:1 1 auto;max-width:5.5rem;height:1px;background:rgba(255,255,255,.5)}
.rank__txt{display:flex;flex-direction:column;align-items:center;gap:.25rem;flex:none}
.rank__org{font-size:clamp(.62rem,1.7vw,.74rem);letter-spacing:.16em;
  color:rgba(255,255,255,.82);font-family:var(--font-h);font-weight:700}
.rank__no{font-family:var(--font-h);font-weight:900;color:#9BE06A;
  font-size:clamp(1.15rem,3.4vw,1.6rem);letter-spacing:.14em;line-height:1}

.hero__h1{font-family:var(--font-h);font-weight:900;color:#fff;
  font-size:clamp(1.9rem,6.4vw,3.6rem);line-height:1.34;letter-spacing:.04em;
  margin:0 0 1rem}
.hero .hero__sub{color:rgba(255,255,255,.88);margin:0 auto 2rem;max-width:32em;
  font-size:clamp(.92rem,2.2vw,1.02rem)}
.hero .hero__btns{display:flex;justify-content:center;margin:0}
.hero__note{margin:1rem 0 0;font-size:.82rem;color:rgba(255,255,255,.72)}

/* 中央構成なので覆いは上下より中央を薄く。写真の真ん中（指導の場面）を見せる */
.hero::after{background:
  linear-gradient(180deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.46) 42%,rgba(0,0,0,.62) 78%,rgba(0,0,0,.8) 100%)}

/* 順位の札。写真の明暗に左右されないよう、枠＋暗い下地を自前で持つ */
.rank{display:inline-flex;flex-direction:column;align-items:center;gap:.3rem;
  margin:0 0 1.3rem;padding:.7rem 1.5rem;border:1px solid rgba(255,255,255,.34);
  border-radius:6px;background:rgba(0,0,0,.42);backdrop-filter:blur(3px)}
.rank__org{font-size:clamp(.62rem,1.7vw,.74rem);letter-spacing:.14em;
  color:rgba(255,255,255,.88);font-family:var(--font-h);font-weight:700;line-height:1.5}
.rank__no{font-family:var(--font-h);font-weight:900;color:#9BE06A;
  font-size:clamp(1.2rem,3.6vw,1.7rem);letter-spacing:.18em;line-height:1}

/* スマホのヘッダー：CTAとメニューを右端に寄せる。
   ⚠ 右寄せしていたのは .hd__nav の margin-left:auto だったが、
      820px 以下ではそのナビ自体を display:none にしているため**押し出す力が消え**、
      ロゴ・CTA・メニューが左に固まっていた（2026-09-16 指摘を受けて修正）。 */
@media(max-width:820px){
  .hd__cta{margin-left:auto}
}

/* ── ヘッダーロゴ C案（2026-09-16 高山さん選定）──
   エンブレム＋ワードマーク＋英字タグライン。
   タグラインは**補助**なので、狭い画面では落として本体を残す。 */
.hd__stack{display:flex;flex-direction:column;gap:3px;line-height:1;min-width:0}
.hd__tag{font-family:var(--font-h);font-size:9px;font-weight:700;letter-spacing:.24em;
  color:#6B7266;white-space:nowrap}
@media(max-width:820px){
  .hd__tag{font-size:8px;letter-spacing:.18em}
}
@media(max-width:400px){
  /* 375px でも**店名は出す**。実測すると横幅に余裕があり、
     エンブレムだけにすると何の店か分からなくなる。
     落とすのは補助のタグラインだけにして、ワードマークは小さくして残す。 */
  .hd__tag{display:none}
  .hd__word{height:18px}
  .hd__emblem{height:30px}
  .hd__logo--img{gap:.4rem}
}