/* ===== 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; }
}