/* AI活用タイプ診断・教材ロードマップ共通CSS。トークンは andanteliberal.com（ops/rondo/site/index.html）と同じ。
   フォントは本番と同じセルフホスト。../fonts/ は本番（/shindan/）では /fonts/、下書きでは content/lp/fonts（シンボリックリンク）に解決する＝file:// で開いても見える。 */
@font-face{font-family:"DotGothic16";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/DotGothic16-Regular.subset.woff2") format("woff2")}
@font-face{font-family:"Zen Kaku Gothic New";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ZenKakuGothicNew-Regular.subset.woff2") format("woff2")}
@font-face{font-family:"Zen Kaku Gothic New";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/ZenKakuGothicNew-Bold.subset.woff2") format("woff2")}
:root{color-scheme:dark;--bg:#15111e;--bg2:#1b1530;--surface:#1e1930;--line:#352c52;--ink:#ece8f4;--muted:#a79dbf;--accent:#b18cff;--btn:#7a5cd8;--btn-hover:#8d70e6;
  --hero:linear-gradient(160deg,#3b2a73 0%,#2a1e55 45%,#1b1530 100%)}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",system-ui,sans-serif;line-height:1.9}
a{color:var(--accent)}
.dot{font-family:DotGothic16,"Zen Kaku Gothic New",monospace;font-weight:400;letter-spacing:.04em}
.hide{display:none!important}
.sp{display:none}
@media(max-width:480px){.sp{display:inline}}
.kicker{letter-spacing:.24em;font-size:12px;color:var(--accent);opacity:.85;margin-bottom:12px}
h1{font-size:clamp(30px,6.5vw,52px);line-height:1.35;margin:0 0 18px;color:#fff;text-shadow:0 0 28px rgba(177,140,255,.45)}
h2{font-size:1.1rem;margin:48px 0 16px;color:var(--accent)}
h2::before{content:"▶\00a0"}
.lead{font-size:clamp(15px,2.4vw,18px);margin:0 0 10px;max-width:34em;color:var(--ink)}
.meta{font-size:14px;color:var(--muted);margin:0 0 32px}
.meta span+span:before{content:"｜";margin:0 .4em;opacity:.6}
/* ボタン */
.btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--btn);color:#fff;font-weight:700;border:0;border-radius:999px;padding:16px 36px;font-size:17px;cursor:pointer;text-decoration:none;box-shadow:0 10px 30px rgba(122,92,216,.35);transition:.15s;font-family:inherit}
.btn:hover{background:var(--btn-hover)}
.btn.ghost{background:transparent;color:var(--accent);border:1px solid var(--line);box-shadow:none;font-size:14px;padding:10px 20px}
.btn.ghost:hover{background:rgba(177,140,255,.08)}
.btn.sm{padding:12px 22px;font-size:15px}
/* トップ＝ヒーロー＋3枚カードを1画面（PC）に収める。スマホは自然な縦流れ */
.first{min-height:100svh;display:flex;flex-direction:column;background:var(--hero);position:relative;overflow:hidden}
.first:before,.first:after{content:"";position:absolute;border:1px solid rgba(177,140,255,.18);border-radius:10px;transform:rotate(25deg);pointer-events:none}
.first:before{right:-10%;top:6%;width:60vmin;height:60vmin}
.first:after{right:-6%;top:14%;width:44vmin;height:44vmin;border-color:rgba(177,140,255,.12)}
#hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:56px 20px 28px;position:relative}
#hero h1{margin-bottom:14px}
#hero .meta{margin-bottom:24px}
.wrap{max-width:960px;margin:0 auto;padding:0 16px 28px;position:relative;width:100%}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:720px){.cards{grid-template-columns:1fr}#hero{padding-top:64px}}
.card{background:rgba(30,25,48,.85);border:1px solid var(--line);border-radius:10px;padding:18px 18px 16px}
.card h3{margin:0 0 4px;font-size:15px;display:flex;align-items:center;gap:8px;color:#fff}
.card p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.75}
.ic{width:26px;height:26px;border-radius:8px;background:rgba(177,140,255,.14);color:var(--accent);display:inline-flex;align-items:center;justify-content:center;font-size:13px;flex:none}
.about-road{text-align:center;margin:14px 0 0}
/* 設問 */
#quiz{min-height:100svh;display:flex;align-items:flex-start;justify-content:center;padding:max(32px,12svh) 16px 32px;background:var(--hero)} /* 上端固定：選択肢の数（2〜5）で箱の高さが変わっても、進捗と質問文の位置は動かさない（2026-09-27 CEO指摘） */
.qbox{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:26px 22px;max-width:600px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.prog{display:flex;gap:6px;margin-bottom:16px}
.prog i{flex:1;height:5px;border-radius:3px;background:var(--line)}
.prog i.on{background:var(--accent)}
.qn{font-size:12px;color:var(--muted);letter-spacing:.1em}
.q{font-size:19px;font-weight:700;margin:4px 0 14px;color:#fff;line-height:1.6}
.choice{display:block;width:100%;text-align:left;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:13px 16px;margin:8px 0;font-size:15px;cursor:pointer;transition:.15s;font-family:inherit;line-height:1.6}
.choice:hover{border-color:var(--accent);background:rgba(177,140,255,.08)}
/* 結果 */
#result .top{background:var(--hero);padding:56px 16px 72px;text-align:center}
.type{font-size:12px;letter-spacing:.24em;color:var(--accent);opacity:.85}
.tname{font-size:clamp(26px,6vw,38px);margin:6px 0 8px;color:#fff;text-shadow:0 0 28px rgba(177,140,255,.45)}
.tname .nw{display:inline-block;white-space:nowrap}
.lv{font-size:14px;color:var(--muted)}
.lv b{color:var(--ink)}
.tmsg{max-width:36em;margin:14px auto 0;color:var(--ink)}
.rwrap{max-width:720px;margin:-40px auto 0;padding:0 16px 40px;position:relative}
.kyozai{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px;margin:0 0 16px;box-shadow:0 12px 40px rgba(0,0,0,.3)}
.kyozai .label{font-size:12px;color:var(--accent);letter-spacing:.14em;font-weight:700}
.kyozai p{margin:10px 0 14px;font-size:15px}
/* リンクカード（OGP＝X・LINEの共有プレビューと同じ扱い。画像は複製せず Brain の og:image を参照） */
.lc{display:block;text-decoration:none;color:inherit;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg);margin-top:8px;transition:.15s}
.lc:hover{border-color:var(--accent)}
.lc img{display:block;width:100%;aspect-ratio:1200/630;object-fit:cover;background:#221b3a}
.lc-body{padding:12px 14px}
.lc-title{font-weight:700;color:#fff;line-height:1.5;font-size:16px}
.lc-sub{font-size:13px;color:var(--muted);margin-top:2px}
.lc-host{font-size:12px;color:var(--muted);margin-top:4px;opacity:.8}
.mail{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px;margin-top:8px}
.mail h3{margin:0 0 4px;font-size:17px;color:#fff}
.mail p{margin:0 0 10px;font-size:14px;color:var(--muted)}
/* あんだ通信の登録枠（本サイト ops/rondo/site/index.html の .signup と同じ作り） */
form{margin:8px 0 0}
form label{display:block;font-weight:700;margin-bottom:6px;font-size:14px}
input[type=email]{width:100%;padding:12px;font-size:16px;color:var(--ink);background:#120e1c;border:1px solid var(--line);border-radius:6px;margin-bottom:14px;font-family:inherit}
.cf-turnstile{margin-bottom:14px;min-height:65px}
.consent{display:flex!important;gap:10px;align-items:flex-start;font-size:13px!important;font-weight:400!important;color:var(--muted);background:rgba(21,17,30,.6);border-radius:6px;padding:12px 14px;margin-bottom:16px!important;line-height:1.8}
.consent input{margin-top:6px;flex:none}
form button[type=submit]{width:100%;border-radius:8px}
form button[type=submit]:disabled{opacity:.6;cursor:default}
#rondo-status{min-height:1.5em;font-size:14px;margin:8px 0 0!important;color:var(--ink)!important}
.about-me{margin:14px 0 0!important;font-size:14px!important;text-align:center}
.road-mail{margin-top:48px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.more{text-align:center;margin:24px 0 8px}
.more p{font-size:14px;color:var(--muted);margin:0 0 10px}
footer{font-size:12px;color:var(--muted);max-width:720px;margin:0 auto;padding:24px 16px 48px;border-top:1px solid var(--line);line-height:1.8}
footer p{margin:4px 0}
/* ロードマップ */
.road{max-width:720px;margin:0 auto;padding:0 16px 48px}
.road-hero{background:var(--hero);padding:56px 16px 40px;text-align:center}
.road-hero .lead{margin:0 auto 10px}
.step{margin-top:40px}
.step h2{margin:0 0 6px}
.step .goal{font-size:14px;color:var(--muted);margin:0 0 14px}
.tag{display:inline-block;font-size:.75rem;color:var(--accent);border:1px solid var(--line);background:rgba(177,140,255,.08);border-radius:4px;padding:1px 10px;margin:0 6px 6px 0;line-height:1.7}
.work{display:flex;gap:14px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px;margin:0 0 12px;text-decoration:none;color:inherit;transition:.15s}
.work:hover{border-color:var(--accent)}
.work img{width:124px;aspect-ratio:1200/630;object-fit:cover;border-radius:6px;flex:none;background:#221b3a}
.work-body{min-width:0}
.work-body h3{font-size:1rem;margin:0 0 4px;line-height:1.5;color:#fff}
.work-body p{font-size:.9rem;margin:0 0 4px;color:var(--muted);line-height:1.7}
.work-body .pr{font-size:.8rem;color:var(--accent);font-weight:700}
@media(max-width:480px){.work{flex-direction:column}.work img{width:100%}}
.genre{font-size:.95rem;color:#fff;margin:18px 0 8px;padding-left:10px;border-left:3px solid var(--accent);line-height:1.6}

/* ══ 金継ぎ 追補CSS（AI活用タイプ診断LP・2026-09-26）══
   2026-09-26 CEO承認により shindan.css の末尾に統合（原本は kintsugi/kintsugi-repair.css・診断書 kintsugi/SHINDAN-20260926.md）。
   :root のトークンは触らない・新しい色は発明しない・文言とDOMは不変。
   台帳（kintsugi/measure/*.txt）の行に対応する順で並べる。 */

/* ── 1. 画素検査の違反2件（768/390・ヒーローの飾り枠の線が文字の裏を横切り、最悪画素が床4.5を割る）
      キッカーの薄め（opacity .85）をやめて素の --accent に、狭い幅では飾り枠の線を淡くする */
.kicker,.type{opacity:1}
@media(max-width:480px){.kicker{margin-bottom:20px}} /* 390では h1 の光（text-shadow 28px）がキッカーの裏まで届く＝4px離す */
@media(max-width:1024px){
  .first:before{border-color:rgba(177,140,255,.08)}
  .first:after{border-color:rgba(177,140,255,.06)}
}
@media(max-width:480px){.first:before,.first:after{display:none}} /* 390では枠線が見出し・キッカーの真裏を通る＝地の最も明るい角と重なり床を割る。飾りはスマホでは消す */

/* ── 2. 似て非なる色（画像の下敷き #221B3A は読み込み前しか見えない地＝置かれる面と同じ色へ） */
.lc img{background:var(--bg)}
.work img{background:var(--surface)}

/* ── 3. 文字サイズの段（役割内の割れ）
      本文=14/16、補足=12、ボタン=15（.sm と .ghost を1本に）、リンクカードの題=15、小見出し h3=16 */
.card p{font-size:14px}                    /* 13.5 → 14（トップの3枚カード） */
.kyozai p{font-size:16px}                  /* 15 → 16（結果画面の一言） */
.work-body p{font-size:14px}               /* .9rem=14.4 → 14（ロードマップの一言） */
.work-body .pr{font-size:14px}             /* .8rem=12.8 → 14（「販売ページを見る →」） */
.btn.ghost{font-size:15px}                 /* 14 → 15（.btn.sm と同じ段へ） */
.lc-title{font-size:15px}                  /* 16 → 15（長い教材名の行数を1行減らす） */
.mail h3{font-size:16px}                   /* 17 → 16（小見出しを16に統一） */
.genre{font-size:15px}                     /* .95rem=15.2 → 15 */

/* ── 4. 角丸を「小=8・面=10・板=12・丸=999」の4役に整理（1ページ内は3種以内） */
.qbox{border-radius:12px}                  /* 14 → 12（.kyozai・.mail と同じ「板」） */
.prog i{border-radius:999px}               /* 3 → 999（5px高の進捗バーは丸で足りる） */
.work img{border-radius:8px}               /* 6 → 8（.ic と同じ「小」） */

/* ── 5. 泣き別れ（カタカナ語の行またぎ・そろい台帳）＝文節で折る。文言は変えない */
.work-body h3,.work-body p,.lc-title,.card p,.tmsg{word-break:auto-phrase}

/* 2026-09-26 検品・反証の反映：結果とロードマップ冒頭のPR注記・プログラムでのフォーカス移動・作者表記 */
.pr-note{font-size:12.5px;color:var(--muted);margin:0 0 14px;text-align:center}
.road-hero .pr-note{margin:4px auto 12px}
[tabindex="-1"]:focus{outline:none}
.meta a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.meta a:hover{color:var(--ink)}
#result .top .pr-note{margin:14px 0 0}
/* 結果の共有（2026-09-30）：結果画面のXボタン・共有用ページ（share/<key>.html）の画像 */
#result .top .share{margin:18px 0 0}
.share-x{background:var(--bg);border:1px solid var(--line);box-shadow:0 8px 24px rgba(8,4,20,.45)}
.share-x:hover{background:var(--bg2)}
.share-x svg{width:15px;height:15px;flex:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.share-card{display:block;width:min(640px,100%);height:auto;border-radius:12px;border:1px solid var(--line);box-shadow:0 24px 60px rgba(8,4,20,.55);margin:6px auto 22px}
.btn.ghost{white-space:normal;max-width:100%;text-align:center}  /* 横320pxで長い文言（教材一覧へのボタン）がはみ出して横スクロールが出ていた */