/* 価値訴求レッスン — 見た目の決めごとは docs/スタイルガイド.md に従う。 迷ったらあの1枚。ここはその実装。 */ :root{ color-scheme: light; /* OSのダークで勝手に反転させない */ --navy:#00469E; --navy-2:#003A85; --navy-line:#2E6FC0; --gold:#D8A537; --gold-ink:#8A6410; --gold-line:#B4862B; --on-gold:#12161F; --paper:#FFFFFF; --ink:#12161F; --ink-2:#555E6D; --line:#DFE3EA; --surface:#EDF0F7; --on-navy:#FFFFFF; --on-navy-2:#C6D2EE; --on-navy-3:#AEC0E4; --gold-on-navy:#E8C46A; --error:#B3261E; --f-g:"Zen Kaku Gothic New","Hiragino Sans",sans-serif; /* 本文・UI */ --f-m:"Zen Old Mincho","Hiragino Mincho ProN",serif; /* 見せ場・見出し */ --f-n:"IBM Plex Sans",sans-serif; /* 数字と英字 */ --in:260ms cubic-bezier(.2,0,0,1); --out:120ms cubic-bezier(.4,0,1,1); } *{box-sizing:border-box} html,body{margin:0} body{ background:var(--paper); color:var(--ink); font:400 16px/1.75 var(--f-g); -webkit-text-size-adjust:100%; } .wrap{max-width:640px; margin:0 auto; padding:0 20px 48px} /* 左右20px に統一 */ /* 数字は必ず欧文で組む（和文のままだと、そこだけ素人っぽくなる） */ .num{font-family:var(--f-n); font-weight:600; font-variant-numeric:tabular-nums} /* 日本語の組み方 */ .prose{word-break:auto-phrase} .mincho{font-family:var(--f-m); font-weight:700; font-feature-settings:'palt' 1} /* ---- 帯（画面の左上。® はここだけ） ---------------------------------- */ .top{background:var(--navy); color:var(--on-navy)} .top .wrap{padding-top:16px; padding-bottom:16px} .brand{font:700 14px/1.4 var(--f-g); letter-spacing:.1em; text-indent:.1em; color:var(--on-navy-3)} .title{font-family:var(--f-m); font-weight:900; font-size:20px; line-height:1.5; font-feature-settings:'palt' 1; margin:4px 0 0} /* ---- 見出し ---------------------------------------------------------- */ h2.lead{ /* その画面でいちばん見てほしい見出し */ font:700 24px/1.5 var(--f-g); margin:24px 0 16px; padding-top:16px; position:relative; } h2.lead::before{content:""; position:absolute; top:0; left:0; width:34px; height:3px; background:var(--gold)} .label{font:700 14px/1.7 var(--f-g); letter-spacing:.1em; text-indent:.1em; color:var(--ink-2); margin:0 0 8px} /* ---- 罫で仕切る（面で囲んだカードは作らない） ------------------------ */ .rule{border:0; border-top:1px solid var(--line); margin:24px 0} /* ---- 入力は下線だけ（枠で囲まない） ---------------------------------- */ textarea, input[type=text], input[type=password]{ width:100%; font:400 16px/1.75 var(--f-g); color:var(--ink); background:transparent; border:0; border-bottom:1px solid #8B939F; border-radius:0; padding:8px 0; resize:vertical; } textarea{min-height:184px} /* 送る文章。ここで直せる。入力欄より少し低くしておく */ #preview{min-height:132px; font-size:15px; line-height:1.85} textarea::placeholder, input::placeholder{color:var(--ink-2)} .err{color:var(--error); font-size:14px; margin:8px 0 0} .err:empty{display:none} input.bad{border-bottom-width:2px; border-bottom-color:var(--error)} /* ---- ボタン（重要度で大小を変える。等幅で3つ並べない） --------------- */ .go{ display:block; width:100%; min-height:56px; padding:16px; font:700 18px/1 var(--f-g); color:var(--on-gold); background:var(--gold); border:1px solid var(--gold-line); border-radius:4px; cursor:pointer; transition:transform var(--out), filter var(--out); } .go:hover{filter:brightness(.98)} .go:active{transform:scale(.985); filter:brightness(.98)} .go[disabled]{opacity:.5; cursor:default; transform:none} .sub{ /* 補助は枠を外して文字リンクに */ /* **押すところは44px以上**（スタイルガイド §9）。見た目は文字リンクのまま、当たりだけ広げる */ display:inline-flex; align-items:center; min-height:44px; background:none; border:0; padding:8px 0; cursor:pointer; font:700 16px/1.7 var(--f-g); color:var(--gold-ink); text-decoration:underline; text-underline-offset:3px; } .row-go{margin-top:24px} .row-sub{margin-top:16px; text-align:center} .subs{display:flex; flex-wrap:wrap; gap:8px 24px} /* 並べるときは、必ずアキを取る */ :focus-visible{outline:3px solid #F6CF00; outline-offset:1px; box-shadow:0 0 0 5px rgba(0,0,0,.85)} /* ---- 画面の上の「戻る」（3分ロープレと同じ作法） --------------------- */ .nav{display:flex; flex-wrap:wrap; gap:16px; margin:16px 0 0} /* **戻るは下に置く。** 他のツールでは左下にあることが多い（2026-09-21 ご指摘） */ .nav-bottom{margin:24px 0 0} .link{display:inline-flex; align-items:center; min-height:44px; /* 押すところは44px以上 */ background:none; border:0; padding:8px 2px; cursor:pointer; font:400 15px/1.7 var(--f-g); color:var(--ink-2); text-decoration:underline; text-underline-offset:4px} .link:hover{color:var(--ink)} /* ---- 声で入力する ---------------------------------------------------- */ .voice{display:flex; align-items:center; gap:16px; margin:8px 0 0; min-height:44px} /* **金の点には必ず文字を添える**（色だけで意味を伝えない。スタイルガイド §9） */ .hear{display:inline-flex; align-items:center; gap:8px; font:700 14px/1 var(--f-g); color:var(--ink-2)} .hear .dot{width:8px; height:8px; border-radius:999px; background:var(--gold); animation:blink 1.1s infinite} @keyframes blink{0%,100%{opacity:1}50%{opacity:.25}} /* **声が入っているか、目で分かるようにする。**（2026-09-21、実機で「できているか分からない」） 点が光るだけでは、機械が動いているのか自分の声が届いているのか区別できない。 自分の声で動くものが要る */ .hear .meter{display:inline-block; width:72px; height:6px; background:var(--line); border-radius:999px; overflow:hidden} .hear .meter i{display:block; height:100%; width:0; background:var(--gold); transition:width 80ms linear} /* 聞き取れた手応え。数秒で消える */ .said{font:700 14px/1.7 var(--f-g); color:var(--gold-ink); margin:8px 0 0} /* ---- 伏せ字のチップ（唯一まるくする形） ------------------------------ */ .chips{display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 0; padding:0; list-style:none} .chip{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:8px 16px; border:1px solid var(--line); border-radius:999px; background:var(--paper); font:400 16px/1 var(--f-g); color:var(--ink); cursor:pointer; transition:background var(--out), color var(--out), border-color var(--out); } .chip[aria-pressed=true]{background:var(--navy); border-color:var(--navy); color:var(--on-navy)} .chip .as{font:700 14px/1 var(--f-g); color:var(--ink-2)} .chip[aria-pressed=true] .as{color:var(--on-navy-3)} /* ---- 濃紺の面（囲みはこれ1種類だけ許す） ----------------------------- */ .panel{background:var(--navy); color:var(--on-navy); border-radius:4px; padding:24px} .panel .label{color:var(--on-navy-3)} .panel a{color:var(--gold-on-navy)} /* ---- 進み具合（金の細い線。秒数は出さない） -------------------------- */ .bar{height:2px; background:var(--line); margin:24px 0 0; overflow:hidden} .bar i{display:block; height:100%; width:0; background:var(--gold); transition:width 900ms linear} /* ---- 問題 ------------------------------------------------------------ */ .count{font:400 14px/1.7 var(--f-g); color:var(--ink-2); margin:24px 0 0} .q{font-family:var(--f-m); font-weight:700; font-size:20px; line-height:1.75; font-feature-settings:'palt' 1; margin:8px 0 24px} .opts{list-style:none; margin:0; padding:0} .opt{ display:block; width:100%; text-align:left; min-height:56px; padding:16px; margin:0 0 8px; background:var(--paper); color:var(--ink); border:1px solid var(--line); border-radius:4px; cursor:pointer; font:400 17px/1.6 var(--f-g); transition:border-color var(--out), background var(--out); } .opt:hover:not([disabled]){border-color:var(--navy-line)} .opt[disabled]{cursor:default} .opt .mk{font:700 14px/1 var(--f-n); color:var(--ink-2); margin-right:8px} /* 選んでいる最中は濃紺の面。**伏せ字のチップと同じ作法**にそろえる （囲みは濃紺の面1種類だけ許す。スタイルガイド §5） */ .opt.picked{background:var(--navy); border-color:var(--navy); color:var(--on-navy)} .opt.picked .mk{color:var(--on-navy-3)} .pickhint{font:700 14px/1.7 var(--f-g); color:var(--ink-2); margin:8px 0 0} /* 正誤は**色だけで伝えない**。必ず文字を添える。 緑と赤は使わない（赤は入力の誤りのために空けてある） */ .opt.correct{border-color:var(--gold-line); border-width:2px; background:#FFFDF6} .opt.chosen-wrong{border-color:var(--navy); border-width:2px} .verdict{font:700 16px/1.7 var(--f-g); margin:16px 0 0} .verdict.hit{color:var(--gold-ink)} .verdict.miss{color:var(--navy)} /* 解説が、この画面の見せ場 */ .why{font-family:var(--f-m); font-weight:700; font-size:18px; line-height:1.85; font-feature-settings:'palt' 1; margin:16px 0 0} .src{font-size:14px; margin:16px 0 0} .src a{color:var(--gold-ink)} /* 行頭の「をぶら下げる。**「で始まる文にだけ付ける。** いつも付けると、「で始まらない文の1行目だけが左へ飛び出す（2026-09-21 実機で確認） */ .hang{text-indent:-0.55em; padding-left:0.55em} /* ---- 終わり（見せ場は段の番号ではなく「例え」に置く） ---------------- */ .figure{font-family:var(--f-m); font-weight:900; font-size:25px; line-height:1.78; font-feature-settings:'palt' 1; margin:0} /* 段の行は**字間を開けない**。開けると折り返して、段の名前だけが行に取り残される （スタイルガイド §4 の「字間を開けてよい」は、短いラベルの話。2026-09-21 実機で確認） */ .grade{font:700 14px/1.7 var(--f-g); color:var(--on-navy-3); margin:0 0 8px} .next{margin:16px 0 0; color:var(--on-navy-2)} .review{list-style:none; margin:0; padding:0} .review li{border-top:1px solid var(--line); padding:16px 0} .review .rq{font:400 16px/1.75 var(--f-g); margin:0} .review .ra{font:400 14px/1.7 var(--f-g); color:var(--ink-2); margin:8px 0 0} .review .mark{font:700 14px/1 var(--f-g); margin-right:8px} .review .mark.hit{color:var(--gold-ink)} .review .mark.miss{color:var(--navy)} /* **選択肢を全部並べ、1行ずつ印を付ける。**（2026-09-21、実機で「何を間違えたか読み取れない」） 「答え」と「選んだ」を別のかたまりで並べると、対応が取れず読めない。 クイズ中と同じ並びのまま、印だけを足す */ .rows{list-style:none; margin:8px 0 0; padding:0} .rows li{border:0; padding:4px 0; font:400 15px/1.7 var(--f-g); color:var(--ink-2)} .rows .k{font:700 14px/1 var(--f-n); margin-right:8px; color:var(--ink-2)} .rows li.ans{color:var(--ink)} /* 正解だった選択肢は、本文の濃さ */ .rows li.ans .k{color:var(--gold-ink)} .rows .tag{font:700 13px/1 var(--f-g); margin-left:8px; white-space:nowrap} .rows .tag.ok{color:var(--gold-ink)} /* 正解 */ .rows .tag.no{color:var(--navy)} /* 選んだが違った */ .review .why{font-family:var(--f-g); font-weight:400; font-size:14px; line-height:1.7; color:var(--ink-2); margin:8px 0 0} .links{list-style:none; margin:16px 0 0; padding:0; font-size:14px} .links li{margin:0 0 8px} .links a{color:var(--gold-ink)} .note{font-size:14px; color:var(--ink-2); margin:16px 0 0} /* 情報の扱い。**読まれない前提だが、探せば必ずある場所**に置く（共通の決めごと §3） */ .terms{list-style:none; margin:8px 0 0; padding:0; font-size:14px; line-height:1.75; color:var(--ink-2)} .terms li{position:relative; padding-left:16px; margin:0 0 8px} .terms li::before{content:"・"; position:absolute; left:0} .foot{font-size:14px; color:var(--ink-2); margin:48px 0 0; border-top:1px solid var(--line); padding-top:16px} [hidden]{display:none !important} @media (prefers-reduced-motion: reduce){ .bar i{transition:none} *{animation:none !important} } /* ---- 終わりの画面の足元 ---------------------------------------------- **淡い色の下敷きを敷かない・左棒を立てない**（スタイルガイド）。区切りは罫だけ。 外すときは、この塊と index.html の