/* ============================================================
   CGRIT ゴルフデビュー完全ガイド — 共通デザインシステム
   （全章テンプレート。承認済みパイロット章＝第5章「どこでどのクラブを使うか」から抽出）

   このファイルに入れるもの＝全章で不変のブランド基盤＋ページ骨格:
     ・CSS変数（配色/寸法/フォント）
     ・リセット / body / 和文タイポ規律
     ・.wrap 誌面フレーム
     ・.topbar ブランドヘッダー
     ・.hero 章扉カバー（kicker/章番号/h1/lead/goal）
     ・.sec / .sec-h / .sec-note 章内セクション見出し
     ・.p-card 汎用「原則カード」
     ・.hero-msg 章の主役メッセージ枠（各章の“核”に再利用）
     ・.foot / .chnav フッター・章ナビ
     ・.reveal 演出土台 + reduced-motion + 768pxブレイク
   章固有のデータ可視化（早見表/距離バー等）は各章HTMLの<style>に置く。

   Palette:
     --paper  #F2F5EE  ペーパー(誌面地)
     --ink    #15211A  インク(黒に近い深緑)
     --turf   #14A04A  ターフグリーン(主役)
     --turf-d #0B5A2F  ディープターフ(帯・見出し)
     --sand   #E39A34  サンド(サブデータ)
     --flag   #E23A2E  フラッグレッド(警告色。安心メッセージには使わない)
     --pop    #FFD447  ポップイエロー(ハイライト/主役)
     --blue   #1893D1  CGRITブルー(ロゴのみ)
   ============================================================ */

:root{
  --paper:#F2F5EE;
  --paper-2:#E7ECE1;
  --card:#FFFFFF;
  --ink:#15211A;
  --ink-2:#3C4A42;
  --turf:#14A04A;
  --turf-d:#0B5A2F;
  --turf-l:#E4F3E7;
  --sand:#E39A34;
  --sand-l:#FBEED6;
  --flag:#E23A2E;
  --flag-l:#FBE3E0;
  --pop:#FFD447;
  --blue:#1893D1;
  --line:#D8DFD3;

  --wrap:460px;
  --gut:24px;

  --f-disp:"Zen Kaku Gothic New", system-ui, sans-serif;
  --f-data:"Anton", "Zen Kaku Gothic New", sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}

body{
  font-family:var(--f-disp);
  font-weight:500;
  color:var(--ink);
  background:var(--paper-2);
  line-height:1.75;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* 和文タイポ基本ルール ------------------------------------- */
p, h1, h2, h3, li, dt, dd, .jp{
  word-break:keep-all;
  overflow-wrap:break-word;
  line-break:strict;
}
.nowrap{white-space:nowrap;}

img{max-width:100%;display:block;}

/* 誌面(ヤーデージブック)フレーム --------------------------- */
.wrap{
  max-width:var(--wrap);
  margin-inline:auto;
  background:var(--paper);
  min-height:100vh;
  box-shadow:0 0 0 1px rgba(21,33,26,.05), 0 24px 60px -20px rgba(11,90,47,.35);
  overflow:hidden;
  position:relative;
}

/* ===== トップバー ===== */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;
  padding:11px var(--gut);
  background:var(--ink);
  color:#fff;
}
.brand{display:flex;align-items:baseline;gap:8px;min-width:0;}
.brand__mark{
  font-family:var(--f-data);
  font-size:19px;letter-spacing:.06em;line-height:1;
}
.brand__mark b{color:var(--blue);font-weight:400;}
.brand__sub{
  font-size:10px;letter-spacing:.02em;color:#A9BBAE;
  white-space:nowrap;
}
.topbar__chip{
  font-family:var(--f-data);
  font-size:12px;letter-spacing:.08em;
  color:var(--ink);
  background:var(--pop);
  padding:4px 9px;border-radius:5px;white-space:nowrap;
}

/* ===== ヒーロー(黒帯・攻略本カバー) ===== */
.hero{
  position:relative;
  background:
    radial-gradient(120% 90% at 82% 0%, #1c3327 0%, var(--ink) 55%) ,
    var(--ink);
  color:#fff;
  padding:30px var(--gut) 34px;
  overflow:hidden;
}
.hero::after{ /* 微粒子グレイン */
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity:.05;pointer-events:none;mix-blend-mode:screen;
}
.hero > *{position:relative;z-index:1;}

.hero__kicker{
  display:inline-flex;align-items:center;gap:7px;
  font-size:11.5px;font-weight:700;letter-spacing:.14em;
  color:#BFE9CC;
}
.hero__kicker::before{
  content:"";width:16px;height:2px;background:var(--turf);border-radius:2px;
}
.hero__ch{
  display:flex;align-items:flex-end;gap:10px;margin-top:16px;
}
.hero__ch b{
  font-family:var(--f-data);
  font-size:52px;line-height:.82;color:var(--turf);letter-spacing:.01em;
}
.hero__ch span{
  font-size:13px;font-weight:700;letter-spacing:.24em;color:#8FB49B;
  padding-bottom:5px;
}
.hero h1{
  font-weight:900;
  font-size:34px;line-height:1.24;letter-spacing:.005em;
  margin-top:6px;
}
.hero h1 .mk{
  display:inline-block;white-space:nowrap;
  background:var(--pop);color:var(--ink);font-weight:900;
  padding:0 9px 2px;margin:0 3px;border-radius:5px;
  transform:rotate(-1.4deg);
  box-shadow:0 3px 0 rgba(0,0,0,.22);
}
.hero__lead{
  font-size:16px;font-weight:700;line-height:1.8;
  color:#DCE7DF;margin-top:16px;
}
.hero__goal{
  display:flex;align-items:center;gap:11px;
  margin-top:22px;padding:13px 15px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.12);
  border-left:4px solid var(--pop);
  border-radius:11px;
}
.hero__goal .lbl{
  font-family:var(--f-data);font-size:11px;letter-spacing:.1em;
  color:var(--pop);line-height:1.2;flex-shrink:0;
  writing-mode:horizontal-tb;
}
.hero__goal .txt{font-size:13.5px;font-weight:700;line-height:1.55;color:#fff;}
.hero__goal .txt em{color:var(--pop);font-style:normal;}
.hero__goal .sec{font-family:var(--f-data);font-size:20px;letter-spacing:.02em;vertical-align:-1px;}

/* ===== 共通セクション ===== */
.sec{padding:38px var(--gut) 8px;}
.sec-h{display:flex;align-items:center;gap:11px;margin-bottom:6px;}
.sec-h .no{
  flex-shrink:0;
  width:30px;height:30px;border-radius:50%;
  background:var(--turf-d);color:#fff;
  font-family:var(--f-data);font-size:16px;letter-spacing:.02em;
  display:grid;place-items:center;line-height:1;padding-top:1px;
}
.sec-h h2{font-size:20px;font-weight:900;letter-spacing:.01em;line-height:1.3;}
.sec-note{
  font-size:12.5px;font-weight:700;color:var(--turf-d);
  margin:2px 0 0 41px;
}
.sec-note.muted{color:var(--ink-2);font-weight:500;}

/* ===== 汎用: 原則カード ===== */
.p-card{
  background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:16px 17px;margin-top:14px;
  display:flex;gap:13px;align-items:flex-start;
  box-shadow:0 6px 16px -12px rgba(21,33,26,.4);
}
.p-card .k{
  flex-shrink:0;font-family:var(--f-data);font-size:12px;letter-spacing:.06em;
  color:#fff;background:var(--turf);border-radius:6px;
  padding:5px 8px;line-height:1;margin-top:3px;
}
.p-card .b{font-size:16.5px;font-weight:700;line-height:1.65;}
.p-card .b strong{
  font-weight:900;
  background:linear-gradient(transparent 62%, var(--pop) 62%);
  padding:0 2px;
}
.p-card .b small{display:block;font-size:12.5px;font-weight:500;color:var(--ink-2);margin-top:2px;}

/* ===== 章の主役メッセージ枠 =====
   各章の“核”になる安心メッセージを載せる。警告色(赤)ではなく
   ブランドの主色ディープターフ(深緑=安全に前へ進める)を地色に。
   現在の使用箇所は第5章「迷ったら7番」のみ。第4章の救済ルールは
   構造が異なるため 04.html 内の .relief として同系の意匠を実装
   （深緑グラデ+ゴールド光の値が二重管理になっている。全章で
   再出するようなら .relief を本ファイルへ昇格して統合すること）。 */
.hero-msg{
  position:relative;margin-top:16px;
  background:
    radial-gradient(130% 100% at 85% -12%, #0f6e39 0%, var(--turf-d) 60%),
    var(--turf-d);
  color:#fff;border-radius:16px;
  padding:22px 20px 20px;overflow:hidden;
  box-shadow:0 14px 30px -16px rgba(11,90,47,.6);
}
.hero-msg::before{ /* 右上の光: ゴールドの淡い光(premium/安心) */
  content:"";position:absolute;right:-30px;top:-30px;
  width:130px;height:130px;border-radius:50%;
  background:radial-gradient(circle,var(--pop) 0%,rgba(255,212,71,0) 70%);
  opacity:.26;
}
.hero-msg .hm-tags{display:flex;gap:7px;align-items:center;flex-wrap:wrap;position:relative;z-index:1;}
.hero-msg .tag{ /* 「この章の主役」バッジ: ゴールド地×濃インクで高コントラスト */
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--f-data);font-size:11px;letter-spacing:.08em;
  background:var(--pop);color:var(--ink);padding:4px 9px;border-radius:5px;
}
.hero-msg .tag.ghost{
  background:transparent;border:1.5px solid rgba(255,255,255,.32);color:#CFE0D5;
}
.hero-msg .big{
  font-weight:900;line-height:1.28;margin-top:12px;
  font-size:26px;letter-spacing:.005em;position:relative;z-index:1;
}
.hero-msg .big u{ /* 補助語は白。ゴールドは主役の数字/語だけに集約 */
  text-decoration:none;color:#fff;
}
.hero-msg .big .num{ /* 章の答えとなる数字: 明るいゴールド。深緑地でコントラスト確保 */
  font-family:var(--f-data);font-size:38px;color:var(--pop);
  vertical-align:-3px;padding:0 2px;letter-spacing:.01em;
}
.hero-msg .sub{
  font-size:13.5px;font-weight:700;color:#C9D6CD;margin-top:11px;line-height:1.7;
}

/* ===== フッター ===== */
.foot{background:var(--ink);color:#fff;padding:26px var(--gut) 30px;}
.chnav{display:flex;gap:10px;}
.chnav a{
  flex:1;display:flex;flex-direction:column;gap:2px;
  padding:12px 14px;border-radius:11px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  text-decoration:none;color:#fff;
}
.chnav a.next{text-align:right;}
.chnav a.disabled{opacity:.4;pointer-events:none;}
.chnav small{font-family:var(--f-data);font-size:10px;letter-spacing:.1em;color:#8FB49B;}
.chnav b{font-size:13px;font-weight:700;}
.chnav .next small{color:var(--pop);}
.foot__brand{
  display:flex;align-items:center;gap:9px;margin-top:22px;
  padding-top:18px;border-top:1px solid rgba(255,255,255,.1);
}
.foot__brand .m{font-family:var(--f-data);font-size:18px;letter-spacing:.06em;}
.foot__brand .m b{color:var(--blue);font-weight:400;}
.foot__brand .s{font-size:11px;color:#A9BBAE;letter-spacing:.02em;}
.foot__note{font-size:10.5px;color:#7C9184;margin-top:10px;line-height:1.6;}

/* ===== スクロール演出 ===== */
/* 演出(reveal)は純粋な装飾にのみ限定する方針。
   核心コンテンツ(実データ・ルールカード等)には付けない。
   JSを完全無効にしても全コンテンツが表示されること。 */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .55s ease, transform .55s ease;}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
}

/* ===== 768px以上: 中央寄せ・見開き地 ===== */
@media (min-width:768px){
  body{background:
    radial-gradient(140% 100% at 50% 0%, #1a2b21 0%, #0d1712 70%);}
  .wrap{margin-block:34px;border-radius:20px;
    box-shadow:0 30px 80px -24px rgba(0,0,0,.6);}
}

/* ============================================================
   用語注釈（語注）＋ 画像スロット  ※全章共通コンポーネント
   2026-07-17 追加。クライアント方針「専門用語に注釈／画像で視覚的に」＋
   marketer確定方針に基づく。

   設計思想（学習レイヤーの部品）:
     ・注釈は "初出1回のみ・用語直後" に置く軽い定義。JSに依存せず常時表示。
     ・参照レイヤー（早見表・距離表）には置かない（1画面完結を死守）。
     ・白の本文カード／サンドの警告チップと色で差別化するため、
       語注は薄い緑地(--turf-l)＝「安全に理解を足す層」で統一。

   ■ .term          本文中の用語に付ける点線下線。「この語は下で定義」の合図
   ■ .term--dark    深緑ブロック内の用語（下線をゴールドに）
   ■ .gloss         語注ブロック（用語直後の定義。tag＋dl の語彙リスト）
   ■ .gloss--on-dark  relief / hero-msg など深緑ブロック内で使う暗地版
   ■ .imgslot       ChatGPT生成画像の差し込み枠（後工程で画像へ差し替え）
   ============================================================ */

/* --- 本文中の用語マーカー（幅指定なし＝display不要） --- */
.term{
  text-decoration:underline dotted var(--turf);
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}
.term--dark{ text-decoration-color:var(--pop); }

/* --- 語注ブロック（学習レイヤー） --- */
.gloss{
  position:relative;
  margin-top:11px;
  background:var(--turf-l);
  border:1px solid #C9E4CF;
  border-left:3px solid var(--turf);
  border-radius:11px;
  padding:11px 14px 12px;
}
.gloss__tag{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--f-data);font-size:10.5px;letter-spacing:.09em;
  color:var(--turf-d);line-height:1;
}
.gloss__tag svg{width:13px;height:13px;fill:var(--turf-d);flex-shrink:0;}
.gloss__note{
  font-size:12px;font-weight:700;color:var(--turf-d);
  line-height:1.65;margin-top:7px;
}
/* 見出し語ラン・イン：用語ピルを行頭に置き、定義文を全幅で回り込ませる
   （横並びflexだと長い用語で定義列が窮屈になるため） */
.gloss dl{margin-top:8px;}
.gloss dl > div{line-height:1.85;}
.gloss dl > div + div{margin-top:7px;padding-top:8px;border-top:1px dashed #C4DFCA;}
.gloss dt{
  display:inline-block;vertical-align:2px;
  font-weight:700;font-size:12px;color:#fff;
  background:var(--turf);border-radius:5px;
  padding:2px 8px;line-height:1.4;
  margin-right:8px;white-space:nowrap;
}
.gloss dd{display:inline;font-size:12.5px;font-weight:500;color:var(--ink-2);}
/* 語注本文もkeep-all(カタカナ語を割らない)。折り返し位置は<wbr>で明示指定する */

/* --- 暗地版（depth のある深緑ブロック内。ゴールド系アクセント） --- */
.gloss--on-dark{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  border-left:3px solid var(--pop);
}
.gloss--on-dark .gloss__tag{color:var(--pop);}
.gloss--on-dark .gloss__tag svg{fill:var(--pop);}
.gloss--on-dark .gloss__note{color:#DCE7DF;}
.gloss--on-dark dt{background:rgba(255,212,71,.16);color:var(--pop);}
.gloss--on-dark dd{color:#CFE0D5;}
.gloss--on-dark dl > div + div{border-top-color:rgba(255,255,255,.14);}

/* --- 画像スロット（プレースホルダ／後工程で画像へ差し替え） --- */
.imgslot{
  position:relative;width:100%;margin-top:16px;
  border:2px dashed var(--turf-d);border-radius:16px;
  background:
    repeating-linear-gradient(-45deg, rgba(11,90,47,.055) 0 9px, transparent 9px 18px),
    var(--turf-l);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:9px;text-align:center;padding:22px;overflow:hidden;
}
.imgslot__code{
  position:absolute;top:10px;left:10px;
  font-family:var(--f-data);font-size:11px;letter-spacing:.06em;
  color:#fff;background:var(--turf-d);
  padding:3px 8px;border-radius:6px;line-height:1;
}
.imgslot__eyebrow{
  position:absolute;top:13px;right:12px;
  font-family:var(--f-data);font-size:9.5px;letter-spacing:.16em;
  color:var(--turf-d);opacity:.55;
}
.imgslot__icon{width:40px;height:40px;fill:var(--turf-d);opacity:.85;flex-shrink:0;}
.imgslot__cap{
  font-size:13px;font-weight:900;color:var(--turf-d);
  line-height:1.55;max-width:32ch;
}
.imgslot__cap small{
  display:block;font-weight:500;color:var(--ink-2);
  font-size:11.5px;line-height:1.6;margin-top:5px;
}

/* ============================================================
   当日ナビ（.daynav）  ※全ページ共通コンポーネント（2026-07-18 追加）
   「当日はここだけ」— 本番中に指で最短到達したい3枚だけを集めた
   ショートカット。フッター直前に置く静的ブロック（position:fixedは
   使わない＝スクロールを塞がない・JS非依存）。

   意匠は relief / hero-msg と同じ深緑地×ゴールド光の“安心して前へ進める”
   トーンに揃え、直後の黒フッターとは面（明度）で切って独立させる。
   リンク先: クラブ早見表=05.html / トラブル対処=06.html /
             前日夜チェックリスト=checklist.html
   ============================================================ */
.daynav{padding:6px var(--gut) 32px;}
.daynav__card{
  position:relative;overflow:hidden;
  background:
    radial-gradient(130% 100% at 88% -12%, #0f6e39 0%, var(--turf-d) 62%),
    var(--turf-d);
  color:#fff;border-radius:18px;
  padding:16px 15px 15px;
  box-shadow:0 16px 34px -18px rgba(11,90,47,.6);
}
.daynav__card::before{ /* 右上ゴールドの淡い光（premium/安心） */
  content:"";position:absolute;right:-34px;top:-34px;
  width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle,var(--pop) 0%,rgba(255,212,71,0) 70%);
  opacity:.2;pointer-events:none;
}
.daynav__h{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
}
.daynav__h .tag{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--f-data);font-size:12px;letter-spacing:.06em;
  background:var(--pop);color:var(--ink);
  padding:4px 10px;border-radius:5px;line-height:1;
}
.daynav__h .tag svg{width:13px;height:13px;fill:var(--ink);}
.daynav__h .en{
  font-family:var(--f-data);font-size:10px;letter-spacing:.16em;color:#8FB49B;
}
.daynav__list{
  position:relative;z-index:1;
  display:flex;flex-direction:column;gap:8px;margin-top:12px;
}
.daynav__item{
  display:grid;grid-template-columns:40px 1fr 16px;gap:12px;align-items:center;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.15);
  border-radius:12px;padding:11px 13px;
  text-decoration:none;color:#fff;
}
.daynav__item[aria-current="page"]{
  background:rgba(255,212,71,.1);border-color:rgba(255,212,71,.32);
}
.daynav__ic{
  width:40px;height:40px;border-radius:11px;
  background:rgba(255,212,71,.14);border:1px solid rgba(255,212,71,.4);
  display:grid;place-items:center;
}
.daynav__ic svg{width:21px;height:21px;fill:var(--pop);}
.daynav__tx b{display:block;font-size:15px;font-weight:900;line-height:1.35;}
.daynav__tx small{
  display:block;font-family:var(--f-data);font-size:10px;letter-spacing:.12em;
  color:#8FB49B;margin-top:2px;
}
.daynav__go{width:16px;height:16px;fill:var(--pop);flex-shrink:0;}