/* プライバシーポリシー・利用規約の共通スタイル（アプリと同じ暗い配色。長文なので本文は大きめ・行間広め） */
:root { --bg:#0b0e0c; --card:#151a18; --line:#262e2a; --ink:#e6ebe8; --soft:#b3bcb7; --faint:#858f8a; --green:#00e614; --green-d:#66ff66; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:-apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Segoe UI", sans-serif; font-size:15px; line-height:1.85; text-wrap:pretty; line-break:strict; }
a { color:var(--green-d); text-underline-offset:3px; }
/* 改行: 日本語は文節で折る（Chrome系）。文節で折れないブラウザ（Safari）では pretty を使わない（全部の行を短く詰めて「公式ア／プリ」のように語の途中で折れた） */
html[lang="ja"] body { word-break:auto-phrase; }
@supports not (word-break:auto-phrase) { body { text-wrap:wrap; } }
/* 下のタブ（アプリと同じ5画面へ戻る。フッターからこのページに来ても下のタブが消えないように） */
body.lg-has-tabs { padding-bottom:calc(70px + env(safe-area-inset-bottom)); }
#lg-tabs { position:fixed; left:0; right:0; bottom:0; z-index:20; display:grid; grid-template-columns:repeat(5, 1fr); background:rgba(12,16,14,0.95); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom); }
#lg-tabs a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:58px; font-size:11px; font-weight:800; color:var(--faint); text-decoration:none; -webkit-tap-highlight-color:transparent; }
#lg-tabs a svg { width:22px; height:22px; }
#lg-tabs a:focus-visible { outline:2px solid var(--green); outline-offset:-4px; border-radius:12px; }
@media (min-width:769px) { #lg-tabs { left:50%; right:auto; bottom:14px; transform:translateX(-50%); width:min(560px, 94vw); border:1px solid var(--line); border-radius:18px; box-shadow:0 10px 32px rgba(0,0,0,0.55); padding-bottom:0; } body.lg-has-tabs { padding-bottom:96px; } }
.lg-head { position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:12px; justify-content:space-between; padding:10px 18px; background:rgba(11,14,12,0.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.lg-brand { display:flex; align-items:center; gap:8px; color:var(--ink); text-decoration:none; font-weight:800; letter-spacing:0.12em; font-size:13px; }
.lg-brand img { width:28px; height:28px; border-radius:8px; }
.lg-lang { display:flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; }
.lg-lang button { background:none; border:0; color:var(--soft); font:inherit; font-size:12.5px; font-weight:700; padding:6px 13px; min-height:36px; cursor:pointer; }
.lg-lang button.on { background:rgba(0,230,20,0.14); color:var(--green-d); }
.lg-main { max-width:760px; margin:0 auto; padding:24px 20px 60px; }
h1 { font-size:26px; line-height:1.35; margin:10px 0 4px; }
h2 { font-size:18px; margin:36px 0 8px; padding-top:14px; border-top:1px solid var(--line); scroll-margin-top:70px; }
h3 { font-size:15px; margin:20px 0 4px; color:var(--green-d); }
p, li { color:var(--ink); }
ul, ol { padding-left:1.4em; margin:6px 0; }
li { margin:3px 0; }
.lg-meta { color:var(--faint); font-size:13px; margin:0 0 16px; }
.lg-toc { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px 16px; margin:18px 0; font-size:14px; }
.lg-toc ol { margin:0; columns:2; column-gap:24px; }
@media (max-width:560px) { .lg-toc ol { columns:1; } }
.lg-table { width:100%; border-collapse:collapse; margin:10px 0; font-size:13.5px; line-height:1.6; }
.lg-table th, .lg-table td { border:1px solid var(--line); padding:8px 10px; text-align:left; vertical-align:top; }
.lg-table th { background:var(--card); color:var(--soft); font-weight:700; white-space:nowrap; }
.lg-todo { color:#fbbf24; font-weight:700; }
.lg-contact { display:inline-flex; align-items:center; min-height:44px; padding:8px 18px; border:1px solid var(--green); border-radius:12px; text-decoration:none; font-weight:800; background:rgba(0,230,20,0.10); }
.lg-contact.pending { border-color:var(--line); color:var(--faint); background:none; pointer-events:none; }
.lg-foot { margin-top:40px; padding-top:16px; border-top:1px solid var(--line); font-size:13.5px; color:var(--faint); }
/* スマホでは表を行ごとのカードにする（3列だと1列が数文字幅になり読みにくい）。見出しは legal.js が data-label に写す */
@media (max-width:560px) {
  .lg-table thead { display:none; }
  .lg-table, .lg-table tbody, .lg-table tr, .lg-table td { display:block; width:100%; }
  .lg-table tr { border:1px solid var(--line); border-radius:12px; padding:8px 12px; margin:10px 0; background:var(--card); }
  .lg-table td { border:0; padding:3px 0; }
  .lg-table td::before { content:attr(data-label); display:block; font-size:11.5px; font-weight:700; color:var(--faint); }
}
/* お問い合わせフォーム */
.ct-form { margin:18px 0 0; display:flex; flex-direction:column; gap:14px; }
.ct-l { display:flex; flex-direction:column; gap:6px; font-weight:700; font-size:14px; }
.ct-l small { font-weight:400; color:var(--faint); font-size:12.5px; }
.ct-form select, .ct-form textarea, .ct-form input[type=text] { font:inherit; font-size:16px; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px 12px; min-height:44px; width:100%; }
.ct-form textarea { resize:vertical; line-height:1.6; }
.ct-form select:focus, .ct-form textarea:focus, .ct-form input:focus { outline:none; border-color:var(--green); }
.ct-form button.lg-contact { align-self:flex-start; cursor:pointer; color:var(--green-d); font-size:15px; }
.ct-form button[disabled] { opacity:0.5; cursor:default; }
.ct-hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.ct-status { min-height:1.5em; margin:0; color:var(--green-d); font-weight:700; }
/* よくある質問（開閉） */
.faq { border:1px solid var(--line); border-radius:12px; background:var(--card); margin:8px 0; padding:0 14px; }
/* ▶は枠の内側に描く（以前は list-style-position:outside で、印がカードの枠線に重なっていた） */
.faq summary { cursor:pointer; font-weight:700; padding:12px 0 12px 22px; min-height:44px; list-style:none; position:relative; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::before { content:""; position:absolute; left:2px; top:21px; border-left:8px solid currentColor; border-top:5px solid transparent; border-bottom:5px solid transparent; transition:transform .15s; }
.faq[open] summary { color:var(--green-d); }
.faq[open] summary::before { transform:rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .faq summary::before { transition:none; } }
.faq p { margin:0 0 12px; }
/* 返信先が空のときの控えめな案内（2026-10-04 要望が「不具合」・返信先空欄で届き、返せなかった） */
.ct-l small.ct-hint { color:var(--soft); padding:4px 8px; border-left:3px solid var(--green); background:rgba(0,230,20,0.06); border-radius:4px; }
.ct-l small[hidden] { display:none; }
/* 大会ごとの公開ページ（race/*.html。tools/build-race-pages.js が作る。2026-10-10） */
.rp-head-cta { color:var(--soft); font-size:13px; font-weight:700; text-decoration:none; padding:8px 4px; }
.rp-crumb { font-size:12.5px; color:var(--faint); margin:0 0 4px; }
.rp-crumb a { color:var(--soft); }
.rp-alias { font-size:13px; color:var(--soft); margin:-8px 0 12px; }
.rp-cta { background:rgba(0,230,20,0.07); border:1px solid rgba(0,230,20,0.35); border-radius:14px; padding:14px 16px; margin:18px 0; }
.rp-cta p { margin:0 0 10px; }
.rp-note { font-size:13px; color:var(--soft); }
.rp-dl { display:grid; grid-template-columns:auto 1fr; gap:0; margin:10px 0; border:1px solid var(--line); border-radius:12px; overflow:hidden; font-size:14px; }
.rp-dl dt, .rp-dl dd { margin:0; padding:9px 12px; border-top:1px solid var(--line); }
.rp-dl dt { color:var(--soft); font-weight:700; background:var(--card); white-space:nowrap; }
.rp-dl dt:first-of-type, .rp-dl dt:first-of-type + dd { border-top:0; }
.rp-dl dd { overflow-wrap:anywhere; }
.rp-scroll { overflow-x:auto; margin:10px 0; border:1px solid var(--line); border-radius:12px; }
.rp-tbl { width:100%; border-collapse:collapse; font-size:13.5px; line-height:1.5; }
.rp-tbl th, .rp-tbl td { padding:8px 10px; text-align:left; border-top:1px solid var(--line); vertical-align:top; }
.rp-tbl thead th { border-top:0; background:var(--card); color:var(--soft); font-size:12.5px; white-space:nowrap; }
.rp-tbl td:nth-child(2), .rp-tbl td:nth-child(4), .rp-tbl td:nth-child(5) { white-space:nowrap; }
.rp-tbl td small { display:block; font-size:12px; color:var(--faint); }
@media (max-width:560px) { .rp-tbl .rp-n, .rp-tbl .rp-seg { display:none; } .rp-tbl th, .rp-tbl td { padding:8px 7px; } .rp-tbl { font-size:13px; } }
.rp-fig { margin:8px 0 4px; }
.rp-fig svg { width:100%; height:auto; display:block; background:var(--card); border:1px solid var(--line); border-radius:12px; }
.rp-fig figcaption { font-size:12px; color:var(--faint); margin-top:6px; }
.rp-area { fill:rgba(0,230,20,0.16); }
.rp-line { fill:none; stroke:var(--green); stroke-width:1.6; stroke-linejoin:round; }
.rp-grid { stroke:var(--line); stroke-width:1; }
.rp-aid { stroke:#fbbf24; stroke-width:1; stroke-dasharray:3 3; opacity:0.7; }
.rp-aidn { fill:#fbbf24; font-size:14px; font-weight:700; }
.rp-ax { fill:var(--faint); font-size:14px; }
.rp-rel { list-style:none; padding:0; }
.rp-rel li { margin:0; padding:9px 0; border-bottom:1px solid var(--line); }
.rp-rel li a { font-weight:700; }
.rp-rel li span { display:block; font-size:12.5px; color:var(--faint); margin-top:2px; }
.rp-intro { font-size:16px; line-height:1.8; margin:4px 0 12px; }
.rp-cdesc { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin:0 0 14px; }
.rp-cdesc b { display:block; font-size:12px; letter-spacing:0.06em; color:var(--green-d); margin-bottom:4px; }
.rp-cdesc p { margin:0; font-size:14px; line-height:1.8; }
/* EN 2026-10-11: 大会ページの上の言語の切り替え（日本語版 ⇄ 英語版 en/race/） */
.rp-head-r { display:flex; align-items:center; gap:6px; }
.rp-lang { display:inline-flex; align-items:center; min-height:40px; padding:0 12px; border:1px solid var(--line); border-radius:999px; color:var(--soft); font-size:12.5px; font-weight:700; text-decoration:none; }
.rp-lang:hover { color:var(--green-d); border-color:rgba(0,230,20,0.45); }
.rp-head-cta { display:inline-flex; align-items:center; min-height:40px; }
/* PAGES 2026-10-11: 大会ページの「ITRA 指数で予測」（race/predict.js）。フォーム → 完走予測・エイドの通過と関門の余裕の表 → アプリへ */
.rpp { background:var(--card); border:1px solid rgba(0,230,20,0.35); border-radius:14px; padding:4px 16px 2px; margin:18px 0; }
.rpp .rpp-h { border-top:0; margin:10px 0 4px; padding-top:0; font-size:17px; }
.rpp-lead { font-size:14px; color:var(--soft); margin:0 0 10px; line-height:1.7; }
.rpp-form label { display:block; font-size:12.5px; font-weight:800; letter-spacing:0.04em; color:var(--soft); margin-bottom:4px; }
.rpp-row { display:flex; gap:8px; flex-wrap:wrap; }
.rpp-row input { flex:1 1 140px; min-width:0; min-height:44px; padding:8px 12px; border:1px solid var(--line); border-radius:12px; background:var(--bg); color:var(--ink); font:inherit; font-size:18px; font-weight:700; }
.rpp-row input:focus { outline:2px solid var(--green); outline-offset:1px; }
.rpp-row button.lg-contact { cursor:pointer; color:var(--green-d); font:inherit; font-weight:800; font-size:15px; }
.rpp-row button.lg-contact:disabled { opacity:0.6; cursor:progress; }
.rpp-err { color:#ff8a7a; font-size:13px; margin:6px 0 0; }
.rpp-out { margin:14px 0 4px; }
.rpp-total { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px; padding:10px 14px; border-radius:12px; background:rgba(0,230,20,0.10); border:1px solid rgba(0,230,20,0.45); }
.rpp-total span { font-size:12.5px; font-weight:800; color:var(--soft); letter-spacing:0.06em; }
.rpp-total b { font-size:30px; line-height:1.2; color:var(--green-d); font-variant-numeric:tabular-nums; }
.rpp-total small { font-size:13px; color:var(--soft); }
.rpp-m { font-size:13.5px; margin:8px 0 0; }
.rpp-tbl td small { display:block; }
.rpp-tbl .rpp-t, .rpp-tbl .rpp-c { white-space:nowrap; font-variant-numeric:tabular-nums; }
.rpp-tbl .rpp-c b { display:block; font-size:12.5px; }
.rpp-ok { color:var(--green-d); } .rpp-warn { color:#fbbf24; } .rpp-ng { color:#ff8a7a; }
.rpp-cta { margin:12px 0 14px; }
/* LANG 2026-10-11: 大会ページの上の言語の切り替え（5言語の小さなメニュー。<details> なので JS なし）。狭い画面では地球の印だけ */
.rp-langs { position:relative; }
.rp-langs > summary { list-style:none; display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:0 12px; border:1px solid var(--line); border-radius:999px; color:var(--soft); font-size:12.5px; font-weight:700; cursor:pointer; white-space:nowrap; }
.rp-langs > summary::-webkit-details-marker { display:none; }
.rp-langs > summary:hover, .rp-langs[open] > summary { color:var(--green-d); border-color:rgba(0,230,20,0.45); }
.rp-langs-m { position:absolute; right:0; top:calc(100% + 6px); z-index:10; display:flex; flex-direction:column; min-width:168px; padding:6px; background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:0 10px 28px rgba(0,0,0,0.55); }
.rp-langs-m .rp-lang, .rp-lang-cur { display:flex; align-items:center; min-height:40px; padding:0 12px; border:0; border-radius:8px; font-size:14px; }
.rp-langs-m .rp-lang:hover { background:rgba(255,255,255,0.06); }
.rp-lang-cur { color:var(--green-d); font-weight:800; }
.rp-lang-cur::after { content:"✓"; margin-left:auto; padding-left:12px; }
@media (max-width:380px) { .rp-langs > summary span { display:none; } .rp-langs > summary { padding:0 11px; } }
/* PRED 2026-10-11: 完走者データの無い大会の「目安（この大会の完走者データなし）」の印（大会ページの予測。race/predict.js） */
.rpp-est { display:inline-block; margin:2px 0 8px; padding:3px 10px; border-radius:999px; font-size:12.5px; font-weight:800; color:#fbbf24; background:rgba(251,191,36,0.12); border:1px solid rgba(251,191,36,0.45); }
.rpp-out .rpp-est { margin:10px 0 0; }

/* COUNT 2026-10-11 */
/* 大会ページの「アプリで◯人がこの大会を目標にしています」（race/count.js が見出しの下に足す。3人以上のときだけ） */
.rp-count { display:inline-flex; align-items:center; gap:6px; margin:-8px 0 14px; padding:3px 11px; border-radius:999px; font-size:13px; font-weight:700; line-height:1.6; color:var(--green-d); background:rgba(0,230,20,0.10); border:1px solid rgba(0,230,20,0.28); }
.rp-count::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--green); flex:0 0 auto; }


/* BRIEF 2026-10-11 */
.rp-rn { margin:6px 0 10px; }
.rp-rn a { display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border:1px solid var(--green); border-radius:999px; font-weight:800; text-decoration:none; }
.rp-rn a:focus-visible { outline:2px solid var(--green); outline-offset:2px; }