/* ===== Guide (dark & readable) ===== */
body.guide-page{
  --bg:#0f1821;
  --card:#172433;
  --card-hi:#1c2a3b;
  --line:#2b3b52;
  --text:#eaf2ff;
  --muted:#a8b3c2;
  --accent:#48b6ff;
  background:var(--bg);
  color:var(--text);
}

/* hero */
body.guide-page .guide-hero{
  position:relative; padding:72px 0; color:#fff;
  background:url('/images/guide.jpg') center/cover no-repeat;
}
body.guide-page .guide-hero .shade{ position:absolute; inset:0; background:rgba(0,0,0,.40); }
body.guide-page .guide-hero .inner{ position:relative; z-index:1; }

/* ===== Hero lead（読みやすい半透明カード） ===== */
body.guide-page .hero-lead{
  /* レイアウト */
  max-width: 62ch;            /* 長すぎる行を防ぐ */
  margin: 10px 0 18px;
  padding: 12px 14px;
  border-radius: 14px;

  /* タイポ */
  color: #f2f7ff;
  font-size: clamp(15px, 2.1vw, 18px);
  line-height: 1.8;
  text-wrap: balance;

  /* 背景（ガラス風＋グラデ） */
  background:
    linear-gradient(90deg, rgba(10,16,24,.72), rgba(10,16,24,.52) 55%, rgba(10,16,24,0) 100%);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  backdrop-filter: blur(5px); /* Safari含め対応良い */

  /* 微妙に沈む時の読みやすさ補助 */
  text-shadow: 0 1px 10px rgba(0,0,0,.35);
}

/* 見出しも少しだけエッジを立てる */
body.guide-page .guide-hero .section-title{
  text-shadow: 0 2px 18px rgba(0,0,0,.45);
}

/* モバイルは背景をもう少し暗くしてさらに視認性UP */
@media (max-width: 768px){
  body.guide-page .guide-hero .shade{ background: rgba(0,0,0,.55); } /* 元 .40 前後 → .55 */
  body.guide-page .hero-lead{
    max-width: 100%;
    padding: 12px 12px;
    background: rgba(10,16,24,.72); /* 全面カードにして確実に読める */
  }
}

/* さらにコントラストが必要な時は、.hero-lead にこのクラスを追加 */
body.guide-page .hero-lead.is-solid{
  background: rgba(8,12,18,.86);
  border-color: rgba(255,255,255,.16);
}

/* chips */
body.guide-page .chip-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
body.guide-page .chip{
  display:inline-block; padding:.38rem .7rem; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid #38506b; color:var(--text);
  font-size:.85rem; transition:.2s ease;
}
body.guide-page .chip:hover{ background:rgba(72,182,255,.15); border-color:#4ab8ff; }

/* sections */
body.guide-page .content-section{ padding:56px 0; }
body.guide-page .bg-light{ background:rgba(255,255,255,.02); }

/* toc (ダークカード) */
body.guide-page .toc{
  background:linear-gradient(180deg, rgba(23,36,51,.85), rgba(23,36,51,.75));
  border:1px solid var(--line); border-radius:14px; padding:16px 18px;
  box-shadow:0 10px 30px rgba(0,0,0,.35); color:var(--text);
}
body.guide-page .toc a{ display:inline-block; margin:6px 10px 0 0; color:#b9d6ff; }
body.guide-page .toc a:hover{ color:#eaf2ff; text-decoration:underline; }

/* layout helpers */
body.guide-page .two-col{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media (max-width:900px){ body.guide-page .two-col{ grid-template-columns:1fr; } }
body.guide-page .anchor{ scroll-margin-top:90px; }

/* info table（ダーク） */
body.guide-page .info-table{ width:100%; border-collapse:collapse; }
body.guide-page .info-table th,
body.guide-page .info-table td{
  border-top:1px solid var(--line); padding:10px 8px; vertical-align:top;
}
body.guide-page .info-table tr:nth-child(even){ background:rgba(255,255,255,.02); }
body.guide-page .badge{
  display:inline-block; font-size:.78rem; background:#203043; color:#d9ecff;
  border:1px solid #365274; border-radius:6px; padding:2px 8px; margin-left:6px;
}
body.guide-page .muted{ color:var(--muted); }

/* ===== FAQ: <details> アコーディオン（白→濃紺カード） ===== */
body.guide-page #faq .accordion details{
  background:var(--card); border:1px solid var(--line);
  border-radius:16px; margin:14px 0; overflow:hidden;
  box-shadow:0 8px 22px rgba(0,0,0,.35); transition:.25s ease;
}
body.guide-page #faq .accordion details:hover{
  transform:translateY(-1px); box-shadow:0 14px 32px rgba(0,0,0,.45);
  border-color:#355071;
}
body.guide-page #faq .accordion summary{
  cursor:pointer; list-style:none; padding:16px 18px; font-weight:700;
  color:var(--text); display:flex; align-items:center; justify-content:space-between;
}
body.guide-page #faq .accordion summary::-webkit-details-marker{ display:none; }
body.guide-page #faq .accordion .summary-icon{
  font-size:18px; color:var(--muted); transition:transform .2s ease, color .2s ease;
}
body.guide-page #faq .accordion details[open] .summary-icon{
  transform:rotate(90deg); color:var(--accent);
}
body.guide-page #faq .accordion .answer{
  color:var(--muted); padding:0 18px 16px 18px;
  border-top:1px solid rgba(255,255,255,.04);
}
body.guide-page #faq .accordion details[open]{
  background:var(--card-hi); border-color:#3b5678;
  box-shadow:0 18px 36px rgba(0,0,0,.5), 0 0 0 1px rgba(72,182,255,.12) inset;
}

/* headings / text color safety */
body.guide-page .section-title{ color:#fff; }
body.guide-page h3{ color:#e6f0ff; }
body.guide-page p, body.guide-page li{ color:var(--muted); }

/* small tweaks */
@media (max-width:768px){
  body.guide-page #faq .accordion summary{ padding:14px 16px; }
  body.guide-page #faq .accordion .answer{ padding:0 16px 14px 16px; }
}
/* ===== Pro tips callout v2 ===== */
:root{
  --accent: #2fd1ff;
  --accent-2: #5be2ff;
  --ink-strong: #eaf5ff;
  --ink-soft: #b8c7d8;
  --card-deep: linear-gradient(135deg,#0f1a25 0%,#0b2233 60%,#0d2b42 100%);
  --stroke: #253242;
}
body.guide-page .pro-callout.v2{
  display:grid; grid-template-columns: 64px 1fr; gap:18px;
  align-items:flex-start;
  background: var(--card-deep);
  border:1px solid var(--stroke);
  border-radius:16px;
  padding:20px;
  box-shadow: 0 14px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
  color: var(--ink-strong);
}
body.guide-page .pro-callout__icon{
  width:64px; height:64px; border-radius:14px;
  display:grid; place-items:center;
  font-size:28px;
  background: radial-gradient(120% 120% at 30% 20%, rgba(47,209,255,.35), transparent 60%),
              #0b1722;
  border:1px solid var(--stroke);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
body.guide-page .pro-callout__eyebrow{
  font-size:.8rem; letter-spacing:.08em;
  color: var(--accent-2); margin:2px 0 6px; font-weight:700;
}
body.guide-page .pro-callout__title{
  font-size:1.2rem; line-height:1.45; margin:0 0 6px 0;
}
body.guide-page .pro-callout__text{
  color: var(--ink-soft); margin:0 0 14px 0;
}
body.guide-page .pro-callout__link{
  color: var(--accent); text-decoration: underline;
  text-underline-offset: 3px;
}
body.guide-page .pro-callout__actions{ display:flex; flex-direction:column; gap:10px; }
body.guide-page .btn-primary{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:999px;
  background: linear-gradient(180deg, var(--accent) 0%, #1fb4ea 100%);
  color:#002332; font-weight:800; letter-spacing:.02em;
  border: none; box-shadow: 0 8px 20px rgba(47,209,255,.35);
}
body.guide-page .btn-primary:hover{ transform: translateY(-1px); }

body.guide-page .pro-callout__ctas{ display:flex; flex-wrap:wrap; gap:10px; }
body.guide-page .btn-chip{
  display:inline-flex; align-items:center; gap:.4em;
  padding:9px 14px; border-radius:999px;
  background:#112131; color:#e9f3ff; border:1px solid #2a3a4b;
  font-weight:700;
}
body.guide-page .btn-chip--ghost{
  background: transparent; border-color:#375066; color:#c9d9ea;
}
body.guide-page .btn-chip:hover{ transform: translateY(-1px); }

/* mobile */
@media (max-width: 720px){
  body.guide-page .pro-callout.v2{
    grid-template-columns: 48px 1fr; padding:16px; gap:14px;
  }
  body.guide-page .pro-callout__icon{ width:48px; height:48px; font-size:22px; }
  body.guide-page .pro-callout__title{ font-size:1.05rem; }
  body.guide-page .btn-primary{ width:100%; justify-content:center; }
}
/* ===== History timeline (読みやすく) ===== */
body.guide-page .history-timeline{ margin-top:12px; }

body.guide-page .history-timeline dl{
  display: grid;
  grid-template-columns: 8em 1fr;   /* 左: 年号 / 右: 内容 */
  column-gap: 18px;
  row-gap: 16px;                    /* 各項目の縦余白 */
  align-items: start;
}

/* 年号（左カラム） */
body.guide-page .history-timeline dt{
  grid-column: 1;
  font-weight: 800;
  color: #eaf5ff;
  letter-spacing: .02em;
  white-space: nowrap;              /* 年号は途中改行しない */
}

/* 内容（右カラム） */
body.guide-page .history-timeline dd{
  grid-column: 2;
  margin: 0;                        /* 既定の余白をリセット */
  line-height: 1.9;                 /* 行間をゆったり */
  color: var(--muted);
  padding-left: 14px;               /* 縦線からのインデント */
  border-left: 2px solid var(--line);  /* 視線ガイドの縦線 */
  position: relative;
}

/* 強調は少し明るく */
body.guide-page .history-timeline dd strong{
  color: #eaf5ff;
}

/* ドット（各項目の先頭） */
body.guide-page .history-timeline dd::before{
  content: "";
  position: absolute;
  left: -5px;                       /* 縦線上に重ねる */
  top: .95em;                       /* 1行目中央あたり */
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px rgba(72,182,255,.18);
}

/* モバイル最適化（年号カラムを少し細く） */
@media (max-width: 640px){
  body.guide-page .history-timeline dl{
    grid-template-columns: 6.5em 1fr;
    row-gap: 14px;
  }
}
/* === Guide: モバイルの横ガターと安全域（ノッチ） === */
:root{
  --page-max: 1080px;
  --page-gutter: clamp(14px, 5vw, 24px); /* 画面幅に応じて 14–24px */
}

/* 1) 全セクションの中身に一貫した左右余白を付与 */
body.guide-page .section-container,
body.guide-page .guide-hero .inner{
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline:
    calc(var(--page-gutter) + env(safe-area-inset-left))
    calc(var(--page-gutter) + env(safe-area-inset-right));
  box-sizing: border-box;
}

/* 2) section-container を入れ忘れた場合の保険（中身に横パディング） */
body.guide-page .content-section > :not(.section-container){
  padding-inline:
    calc(var(--page-gutter) + env(safe-area-inset-left))
    calc(var(--page-gutter) + env(safe-area-inset-right));
  box-sizing: border-box;
}

/* 3) モバイルは縦の詰まりも少しだけ緩める */
@media (max-width: 768px){
  body.guide-page .content-section{ padding: 44px 0; } /* 元: 56px 0 */
  body.guide-page .toc{ margin-top: 8px; }
}

/* 4) 横スクロールが出がちな表や長文カードのガード */
@media (max-width: 480px){
  body.guide-page .info-table{
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 10px;
    padding: 6px;
  }
  body.guide-page .pro-callout.v2{ padding:16px; }
  body.guide-page #faq .accordion summary{ padding:14px 16px; }
  body.guide-page #faq .accordion .answer{ padding:0 16px 14px 16px; }
}
/* ===== 7. 用語解説セクションの視認性向上 (レイアウト修正版) ===== */

/* --- セクション全体の調整 --- */
body.guide-page #terms .section-container {
  /* section-containerの基本スタイルは既存のものを流用 */
}

/* --- 大見出し (7. 得点・アワード等の用語) --- */
body.guide-page #terms .section-title {
  margin-bottom: 1.5em; 
  text-align: center;
}

/* --- 各項目の見出し (7-1. スコアの基本 など) --- */
body.guide-page #terms h3 {
  color: var(--text);
  font-size: clamp(1.2rem, 4vw, 1.4rem);
  padding-bottom: 0.6em;
  margin-top: 3.5em;
  margin-bottom: 1.5em;
  border-bottom: 1px solid var(--line);
}
body.guide-page #terms h3:first-of-type {
  margin-top: 1em;
}


/* --- 用語リスト全体のスタイル --- */
body.guide-page #terms > ul,
body.guide-page #terms ul ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* --- 各用語（リストの1行）のスタイル --- */
body.guide-page #terms ul ul li {
  position: relative;
  padding: 14px 0 14px 15em; /* ★変更点：左側のスペースを広げました (12em -> 15em) */
  border-bottom: 1px solid var(--line);
  line-height: 1.8;
  color: var(--muted);
}

body.guide-page #terms ul ul li:last-child {
  border-bottom: none;
}

/* --- 用語部分 (<strong>) のスタイル --- */
body.guide-page #terms li strong {
  position: absolute;
  top: 14px;
  left: 0;
  width: 16em; /* ★変更点：用語の幅を広げました (11em -> 14em) */
  padding-right: 1em; /* 説明文との間に隙間を確保 */
  text-align: right;
  
  color: var(--text);
  font-weight: 600;
  font-size: 0.95rem;
}


/* --- モバイル表示への最適化 (横幅768px以下) --- */
@media (max-width: 768px) {

  body.guide-page #terms ul {
    padding-left: 0 !important;
  }

  body.guide-page #terms ul ul li {
    padding: 12px 0;
  }

  body.guide-page #terms li strong {
    position: static;
    display: block;
    width: auto;
    text-align: left;
    margin-bottom: 0.4em;
    font-size: 1rem;
  }
  
  body.guide-page #terms h3 {
    margin-top: 3em;
  }
}
/* ===== 6. ゲーム紹介セクションの視認性向上 ===== */

/* --- セクションタイトル --- */
body.guide-page #games .section-title {
  margin-bottom: 2.5em; /* 見出しと内容リストの間に十分な余白を確保 */
  text-align: center;
}

/* --- 各ゲームのタイトル (h3) --- */
body.guide-page #games h3 {
  display: flex; /* タイトルとバッジを横並びにする */
  align-items: center; /* 上下中央揃え */
  gap: 0.8em; /* タイトルとバッジの間の隙間 */
  font-size: clamp(1.1rem, 3.5vw, 1.3rem); /* レスポンシブなフォントサイズ */
  margin-bottom: 0.8em; /* 説明文との間の余白 */
  color: var(--text);
}

/* --- ゲームの説明文 (p) --- */
body.guide-page #games p {
  color: var(--muted);
  line-height: 1.8;
  padding-bottom: 2em; /* 次の項目との区切りのための余白 */
  margin-bottom: 2em;
  border-bottom: 1px solid var(--line); /* 各項目の下に区切り線を追加 */
}

/* --- 最後の項目の区切り線は不要なので消す --- */
body.guide-page #games p:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* --- 「定番」バッジのスタイル --- */
body.guide-page #games h3 .badge {
  /* 既存のbadgeスタイルを流用しつつ微調整 */
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 6px;
  line-height: 1.2;
  color: var(--accent); /* アクセントカラーで見やすく */
  background-color: rgba(72, 182, 255, 0.1); /* アクセントカラーの薄い背景 */
  border: 1px solid rgba(72, 182, 255, 0.25); /* アクセントカラーの薄い枠線 */
}
/* ===== 5. 基本動作と距離セクションのスタイル ===== */

/* --- セクションタイトル --- */
body.guide-page #basics .section-title {
  text-align: center;
  margin-bottom: 2em;
}

/* --- リスト全体をグリッドコンテナにする --- */
body.guide-page #basics ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3つのカラムを作成 */
  gap: 20px; /* カード間の隙間 */
}

/* --- 各リスト項目をカードとしてスタイリング --- */
body.guide-page #basics li {
  background: var(--card); /* 既存のカード色を使用 */
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  line-height: 1.8;
  color: var(--muted);
  box-shadow: 0 8px 25px rgba(0,0,0,.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* カードにホバーエフェクトを追加 */
body.guide-page #basics li:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0,0,0,.4);
  border-color: #355071; /* 少し明るい枠線に */
}

/* --- カード内の太字テキストを強調 --- */
body.guide-page #basics li strong {
  color: var(--accent); /* アクセントカラーで目立たせる */
  font-weight: 700;
}

/* --- モバイル表示への最適化 (横幅800px以下) --- */
@media (max-width: 800px) {
  body.guide-page #basics ul {
    grid-template-columns: 1fr; /* カラムを1つにして縦積みに変更 */
    gap: 16px;
  }

  body.guide-page #basics li {
    padding: 20px;
  }
}
/* ===== 4. 道具セクションのスタイル (モバイル対応強化版) ===== */

/* --- セクションタイトル --- */
body.guide-page #equipment .section-title {
  text-align: center;
  margin-bottom: 2.5em;
}

/* --- 小見出し (h3) --- */
body.guide-page #equipment h3 {
  color: var(--text);
  font-size: clamp(1.2rem, 4vw, 1.4rem);
  margin-top: 3.5em;
  margin-bottom: 1.2em;
  padding-bottom: 0.5em;
  border-bottom: 1px solid var(--line);
}
body.guide-page #equipment h3:first-of-type {
  margin-top: 1em;
}

/* --- 1. パーツ構成のテーブル (.info-table) [デスクトップ] --- */
body.guide-page #equipment .info-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0,0,0,.3);
}

body.guide-page #equipment .info-table th,
body.guide-page #equipment .info-table td {
  padding: 16px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

body.guide-page #equipment .info-table th {
  background-color: rgba(255, 255, 255, .04);
  width: 10em;
  font-weight: 700;
  color: var(--text);
}

body.guide-page #equipment .info-table td {
  color: var(--muted);
  line-height: 1.8;
}

body.guide-page #equipment .info-table tr:last-child th,
body.guide-page #equipment .info-table tr:last-child td {
  border-bottom: none;
}

/* --- 2. ダーツボードのリスト (ul) --- */
body.guide-page #equipment ul {
  list-style: none;
  padding-left: 0;
}

body.guide-page #equipment ul li {
  position: relative;
  padding-left: 1.5em;
  margin-bottom: 1em;
  line-height: 1.8;
  color: var(--muted);
}

body.guide-page #equipment ul li::before {
  content: '◆';
  position: absolute;
  left: 0;
  top: 0.1em;
  color: var(--accent);
  font-size: 0.9em;
}

/* --- 3. ダーツマシンの段落 (p) --- */
body.guide-page #equipment p {
  line-height: 1.8;
  color: var(--muted);
}


/* ===== モバイル表示への最適化 (横幅768px以下) ===== */
@media (max-width: 768px) {
  
  /* --- テーブルを縦積みレイアウトに変更 --- */
  body.guide-page #equipment .info-table,
  body.guide-page #equipment .info-table tbody,
  body.guide-page #equipment .info-table tr,
  body.guide-page #equipment .info-table th,
  body.guide-page #equipment .info-table td {
    display: block; /* 全てのテーブル要素をブロックレベル要素に */
    width: 100% !important; /* 幅を100%に強制 */
  }

  body.guide-page #equipment .info-table {
    border-radius: 0;
    box-shadow: none;
  }
  
  body.guide-page #equipment .info-table tr {
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
  }
  
  /* 見出しセル(th)のスタイル調整 */
  body.guide-page #equipment .info-table th {
    background-color: transparent; /* 背景色をなくす */
    border-bottom: none; /* 下線をなくす */
    padding: 0 0 8px 0;  /* 説明文との間に余白 */
  }

  /* データセル(td)のスタイル調整 */
  body.guide-page #equipment .info-table td {
    padding: 0;
    border-bottom: none; /* 下線をなくす */
  }

  /* 最後の項目の下線を消す */
  body.guide-page #equipment .info-table tr:last-child {
    border-bottom: none;
  }
}
/* ===== 3. 違い比較セクションのスタイル ===== */

/* --- セクションタイトル --- */
body.guide-page #steel-soft .section-title {
  text-align: center;
  margin-bottom: 2.5em;
}

/* --- .two-colのコンテナ自体のスタイルは既存のものを流用 --- */
/* (display: grid; grid-template-columns: 1fr 1fr; gap: 24px;) */

/* --- .two-col内の各カラムをカードとしてデザイン --- */
body.guide-page #steel-soft .two-col > div {
  background: var(--card); /* 既存のカード色 */
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 8px 25px rgba(0,0,0,.3);
  display: flex; /* Flexboxで中の要素の高さを揃えやすくする */
  flex-direction: column;
}

/* --- カード内の見出し (h3) --- */
body.guide-page #steel-soft .two-col h3 {
  color: var(--text);
  font-size: 1.25rem;
  margin-top: 0;
  margin-bottom: 1em;
  padding-bottom: 0.6em;
  border-bottom: 1px solid var(--line);
}

/* --- カード内のリスト (ul) --- */
body.guide-page #steel-soft .two-col ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 1em;
}

body.guide-page #steel-soft .two-col li {
  position: relative;
  padding-left: 1.6em; /* カスタムマーカー用のスペース */
  margin-bottom: 1em;
  line-height: 1.8;
  color: var(--muted);
}

/* カスタムの箇条書きマーカー */
body.guide-page #steel-soft .two-col li::before {
  content: '›';
  position: absolute;
  left: 0.2em;
  top: 0;
  color: var(--accent);
  font-weight: 700;
  font-size: 1.2em;
}

/* --- 注釈 (.note) のスタイル --- */
body.guide-page #steel-soft .note {
  margin-top: auto; /* Flexboxの特性を活かして、注釈をカード下部に配置 */
  padding: 14px 16px;
  font-size: 0.85rem;
  color: var(--muted);
  background-color: rgba(0,0,0,0.25); /* 少し濃い背景で区別 */
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
}
/* ===== 目次 (TOC) のスタイル改善 ===== */

body.guide-page .toc {
  background: var(--card); /* 背景を単色カードに */
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent); /* 左側にアクセントラインを追加 */
  border-radius: 12px;
  padding: 24px 28px;
  margin-bottom: 8em; /* 最初のセクションとの間に十分な余白を確保 */
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* CSSで「目次」というタイトルを追加 */
body.guide-page .toc::before {
  content: '目次';
  display: block;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text);
  margin-bottom: 1em;
}

/* リンクのスタイル調整 */
body.guide-page .toc a {
  display: inline-block;
  margin: 4px 14px 4px 0;
  color: var(--muted); /* 通常時の色を少し落ち着かせる */
  text-decoration: none;
  transition: color 0.2s ease;
  font-size: 0.95rem;
}

body.guide-page .toc a:hover {
  color: var(--accent); /* ホバー時にアクセントカラーにする */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}


/* ===== 1. イントロセクション「ダーツとは？」のスタイル ===== */

/* --- セクション全体に演出を追加 --- */
body.guide-page #overview {
  position: relative; /* 背景のナンバリングの基準点 */
  padding: 4em 0 6em 0;
  text-align: center;
  overflow: hidden; /* はみ出したナンバリングを隠す */
  border-bottom: 1px solid var(--line); /* 次のセクションとの区切り */
}

/* --- 背景に巨大なナンバリングを配置 --- */
body.guide-page #overview::before {
  content: '01';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(200px, 40vw, 320px); /* 巨大なフォントサイズ */
  font-weight: 800;
  color: rgba(255, 255, 255, 0.03); /* ごく薄い色で背景に溶け込ませる */
  z-index: 0;
  line-height: 1;
}

/* --- セクションタイトル (h2) --- */
body.guide-page #overview .section-title {
  position: relative; /* 背景の数字より手前に表示 */
  z-index: 1;
  font-size: clamp(2.2rem, 8vw, 3.5rem); /* 存在感のある大きさに */
  font-weight: 800;
  color: #fff;
  margin-bottom: 1em;
}

/* --- リード文 (p) --- */
body.guide-page #overview p {
  position: relative; /* 背景の数字より手前に表示 */
  z-index: 1;
  max-width: 65ch; /* 読みやすいように一行の最大幅を制限 */
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(1rem, 2.5vw, 1.1rem);
  line-height: 2; /* ゆったりとした行間で読みやすく */
  color: var(--muted);
  text-align: left; /* 長文なので左揃えの方が可読性が高い */
  text-wrap: balance; /* 対応ブラウザで行の長さを自動で均等に */
}