/* ============================================================
   日本語音読検定 一般受検ページ（/ondokukentei/）
   astra-child/ondoku-kentei.css   v1.0
   色は音読道場（ondoku-dojo/assets/ondoku-dojo.css）の実値のみ
   本文フォントは公開ページのスタック（page-map.php と同じ Meiryo 系）
   すべて .okg 配下にスコープ。Astra や他ページに影響しない
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* 音読道場の実値（ondoku-dojo/assets/ondoku-dojo.css） */
  --brand:#e8473f;--brand-d:#c5392f;--brand-l:#FFEDEA;
  --ink:#3d2a20;--ink-2:#7A6A5D;--faint:#C3B3A6;
  --line:#f0e2d6;--line-2:rgba(240,226,214,.55);--cream:#fff7f0;--surface:#fff;
  --r-md:12px;--r-sm:8px;
  --soft:0 1px 3px rgba(61,42,32,.05);
  /* 公開ページの本文スタック。page-map.php と同じ（丸ゴシックはこども向け画面のみ） */
  --fr:Meiryo,"Hiragino Sans","Noto Sans JP",system-ui,sans-serif;
  --fn:var(--fr);
}
body{background:var(--cream);color:var(--ink);font-family:var(--fr);font-size:16px;line-height:1.95;-webkit-font-smoothing:antialiased}
a{color:var(--brand-d)}a:hover{color:var(--brand)}
/* Astra のコンテンツ領域（.ast-container）は flex なので、幅を指定しないと
   .okg が中身なりに縮んで左に寄る。全幅にしてから .okg-in を中央寄せする。 */
.okg{width:100%}
.okg-in{width:100%;max-width:780px;margin:0 auto;padding:0 22px}
.okg h1,.okg h2,.okg h3{line-height:1.5;font-weight:700}

/* ---- ヘッダー（白地・細い罫線） ---- */
.okg-hero{background:var(--surface);border-bottom:1px solid var(--line);padding:40px 0 32px}
.okg-eyebrow{display:inline-block;font-size:12px;font-weight:700;color:var(--brand-d);margin-bottom:10px}
.okg-h1{font-size:clamp(24px,4.4vw,34px);letter-spacing:.01em}
.okg-h1 small{display:none}
.okg-lead{font-size:14px;color:var(--ink-2);margin-top:12px;max-width:38em}
.okg-facts{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}
.okg-fact{background:var(--cream);border:1px solid var(--line);border-radius:var(--r-sm);padding:5px 11px;font-size:12px;color:var(--ink-2)}
.okg-fact b{font-weight:700;color:var(--brand-d)}

/* ---- セクション ---- */
.okg-sec{padding:38px 0}
.okg-sec+.okg-sec{border-top:1px solid var(--line-2)}
.okg-sec.on-white{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.okg-sec-hd{margin-bottom:20px}
.okg-kicker{display:none}
.okg-h2{font-size:clamp(18px,2.6vw,21px);font-weight:700;padding-bottom:8px;border-bottom:1px solid var(--line);display:block}
.okg-sub{font-size:13px;font-weight:700;color:var(--ink-2);margin-top:10px;max-width:42em}

/* ---- 申込み ---- */
.okg-apply{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.okg-apply-hd{padding:18px 22px 14px;border-bottom:1px solid var(--line)}
.okg-apply-hd h2{font-size:18px;font-weight:700}
.okg-apply-hd p{font-size:13px;color:var(--ink-2);margin-top:4px}
.okg-apply-bd{padding:18px 22px 22px}
.okg-grades{border-top:1px solid var(--line)}
.okg-grade{display:flex;align-items:center;gap:14px;padding:15px 2px;border-bottom:1px solid var(--line);background:none;text-decoration:none;color:var(--ink);transition:background .14s}
.okg-grade:hover{background:var(--brand-l);color:var(--ink)}
.okg-grade-kyu{min-width:52px;color:var(--brand-d);flex-shrink:0;font-size:15px;font-weight:700;line-height:1.4}
.okg-grade-body{flex:1;min-width:0}
.okg-grade-name{display:block;font-size:15px;font-weight:700;line-height:1.4}
.okg-grade-price{display:block;font-size:13px;color:var(--ink-2);margin-top:2px}
.okg-grade-price b{font-weight:700;color:var(--ink)}
.okg-grade-arrow{flex-shrink:0;font-size:20px;color:var(--faint);font-weight:900}
.okg-grade:hover .okg-grade-arrow{color:var(--brand)}

/* 未ログイン時（本番 [hhv_kentei_ctas] の灰→赤を踏襲） */
.okg-gate{display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center;padding:24px 20px;background:var(--cream);border:1px dashed var(--line);border-radius:var(--r-md)}
.okg-gate-t{font-size:15px;font-weight:700}
.okg-gate-s{font-size:13px;color:var(--ink-2);line-height:1.95;max-width:34em}
.hhv-kentei-ctas{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;margin:.3rem 0 0;width:100%}
.hhv-kentei-ctas a.hhv-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.65rem 1.2rem;border-radius:var(--r-md);background:#e5e7eb;color:#111!important;font-weight:700;text-decoration:none!important;box-shadow:var(--soft);transition:all .2s ease}
.hhv-kentei-ctas a.hhv-btn:hover{background:var(--brand);color:#fff!important;box-shadow:0 6px 18px rgba(232,71,63,.22)}
@media(max-width:480px){.hhv-kentei-ctas a.hhv-btn{width:100%}}

/* 有料会員向けの注記 */
.okg-note{display:flex;gap:12px;align-items:flex-start;margin-top:16px;padding:13px 15px;background:var(--cream);border-left:3px solid var(--line);font-size:13px;line-height:1.95;color:var(--ink-2)}
.okg-note.is-course{border-left-color:var(--brand)}
.okg-note b{color:var(--ink);font-weight:700}
.okg-note.is-course b{color:var(--brand-d)}

/* ---- 定義リスト ---- */
.okg-defs{border-top:1px solid var(--line)}
.okg-def{padding:14px 2px;display:grid;grid-template-columns:1fr;gap:2px;border-bottom:1px solid var(--line)}
@media(min-width:620px){.okg-def{grid-template-columns:110px 1fr;gap:18px;align-items:baseline}}
.okg-def dt{font-size:13px;font-weight:700;color:var(--brand-d)}
.okg-def dd{font-size:14px;color:var(--ink-2);line-height:1.95}

/* ---- 料金表 ---- */
.okg-fees{border-top:1px solid var(--line)}
.okg-fee-row{display:grid;grid-template-columns:72px 1fr 1fr 1fr;gap:10px;align-items:center;padding:12px 2px;border-bottom:1px solid var(--line);font-size:14px}
.okg-fee-row.is-head{font-size:12px;font-weight:700;color:var(--ink-2);padding:9px 2px}
.okg-fee-kyu{font-weight:700;font-size:15px}
.okg-fee-n{color:var(--ink-2);text-align:right}
.okg-fee-n.total{font-weight:700;color:var(--ink)}
.okg-fee-n.time{color:var(--ink-2);font-size:13px}
.okg-fee-row.is-head span{text-align:right}
.okg-fee-row.is-head span:first-child{text-align:left}
@media(max-width:560px){
  .okg-fee-row{grid-template-columns:60px 1fr 1fr}
  .okg-fee-row span:nth-of-type(4){display:none}
  .okg-fee-row.is-head span:nth-child(4){display:none}
}
.okg-fee-note{font-size:13px;color:var(--ink-2);margin-top:11px;line-height:1.95}

/* ---- 手順（番号つき） ---- */
.okg-steps{border-top:1px solid var(--line)}
.okg-step{display:flex;gap:14px;padding:15px 2px;border-bottom:1px solid var(--line)}
.okg-step-n{min-width:20px;color:var(--brand-d);font-size:14px;font-weight:700;flex-shrink:0}
.okg-step-b{flex:1;min-width:0}
.okg-step-t{font-size:15px;font-weight:700;line-height:1.5}
.okg-step-s{font-size:13px;color:var(--ink-2);line-height:1.95;margin-top:3px}

/* ---- 箇条書き（共通） ---- */
.okg-list{display:flex;flex-direction:column;gap:9px}
.okg-li{display:flex;gap:11px;align-items:flex-start;font-size:14px;line-height:1.95;color:var(--ink-2)}
.okg-li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--brand);flex-shrink:0;margin-top:.72em}
.okg-li b{color:var(--ink);font-weight:700}


/* ---- 合否（3状態） ---- */
.okg-results{border-top:1px solid var(--line)}
.okg-result{padding:14px 2px;border-bottom:1px solid var(--line)}
.okg-result-t{font-size:14px;font-weight:700;margin-bottom:3px}
.okg-result.pass .okg-result-t{color:var(--brand-d)}
.okg-result-s{font-size:13px;color:var(--ink-2);line-height:1.95}

/* ---- 注意（キャンセル） ---- */
.okg-warn{background:var(--cream);border-left:3px solid var(--brand);padding:15px 17px}
.okg-warn .okg-li::before{background:var(--brand)}
.okg-warn .okg-li b{color:var(--brand-d);font-weight:700}

/* ---- FAQ ---- */
.okg-faq-empty{font-size:13px;color:var(--ink-2);line-height:1.95}

/* ---- 末尾 ---- */
.okg-end{background:var(--surface);border-top:1px solid var(--line);padding:36px 0;text-align:center}
.okg-end h2{font-size:17px;font-weight:700;margin-bottom:6px;border:none;padding:0;display:block}
.okg-end p{font-size:13px;color:var(--ink-2);margin-bottom:18px}
.okg-back{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:13px 26px;border-radius:999px;background:var(--brand-d);color:#fff!important;font-size:15px;font-weight:700;text-decoration:none!important;box-shadow:0 3px 0 #a72d25;transition:filter .14s}
.okg-back:hover{filter:brightness(1.04)}
.okg-back:active{transform:translateY(2px);box-shadow:0 1px 0 #a72d25}
.okg-contact{font-size:13px;color:var(--ink-2);margin-top:16px}