:root{color-scheme:dark;--bg:#07111e;--panel:#0e2031;--ink:#edf6fa;--muted:#acc0ce;--cyan:#83ede4;--amber:#ffd07d;--line:#294154;--font:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.85 var(--font);line-break:strict;overflow-wrap:anywhere}a{color:var(--cyan);text-underline-offset:5px}button,input{font:inherit}button,.button{display:inline-flex;align-items:center;justify-content:center;gap:32px;min-height:54px;border:1px solid var(--cyan);border-radius:2px;background:var(--cyan);color:#092127;padding:15px 26px;font-size:16px;font-weight:700;text-decoration:none;cursor:pointer;transition:background .2s,transform .2s}button:hover,.button:hover{background:#b2fff5;transform:translateY(-2px)}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--amber);outline-offset:5px}.secondary{background:transparent;color:var(--cyan);border-color:#547f89}.secondary:hover{background:#143542}.text-button{background:none;border:0;color:var(--muted);text-decoration:underline;padding:12px 0}.text-button:hover{background:none;color:#fff}h1,h2,h3,p{margin-top:0}h2{font-size:clamp(25px,3vw,36px);line-height:1.6;letter-spacing:.015em}h3{font-size:23px;line-height:1.55}.eyebrow{font-size:12px;letter-spacing:.15em;color:var(--cyan);font-weight:700}.small,small{font-size:13px;line-height:1.8}.skip{position:absolute;z-index:10;top:-90px;padding:16px;background:var(--bg)}.skip:focus{top:0}.site-header{max-width:1480px;margin:auto;min-height:88px;padding:20px 5%;display:flex;align-items:center;gap:26px;border-bottom:1px solid var(--line)}.brand{display:flex;background:#fbfaf5;padding:10px 16px;border-radius:2px}.brand img{width:144px;height:auto}.header-caption{letter-spacing:.15em;font-size:12px;flex:1}.header-caption small{display:block;color:var(--muted);letter-spacing:0}.motion-toggle{padding:8px 12px;background:none;color:var(--muted);font-size:12px;min-height:44px;border-color:var(--line)}.motion-toggle:hover{background:var(--panel)} .hero{position:relative;max-width:1680px;margin:auto;min-height:730px;isolation:isolate;overflow:hidden}.hero-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2}.hero:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(7,17,30,.72),rgba(7,17,30,0) 65%),linear-gradient(0deg,var(--bg),transparent 22%)}.hero-copy{position:relative;padding:66px 6% 96px;max-width:900px}.hero .eyebrow{margin-bottom:28px}.status-dot{display:inline-block;width:7px;height:7px;background:var(--cyan);border-radius:50%;margin-right:10px;box-shadow:0 0 15px #83ede488}.hero-en{font:800 clamp(28px,3.6vw,56px)/1.05 Arial,sans-serif;letter-spacing:-.015em;margin-bottom:25px}.hero-en span{font-weight:400;color:#96b4c5;letter-spacing:.06em;font-size:.68em}h1{font-size:clamp(38px,4.8vw,74px);line-height:1.4;letter-spacing:.015em;margin:0 0 22px;font-weight:800}h1 em{font-style:normal;color:var(--cyan)}.lead{color:#d5e3eb;font-size:18px;line-height:1.95}.hero-cta{margin-top:10px;min-width:270px}.hero-meta{font-size:12px;color:var(--muted);margin:18px 0 0}.hero-meta span{margin:0 9px;color:#4b7185}.hero-coordinate{position:absolute;right:4%;bottom:35px;font:10px/1.5 monospace;color:#8dacbe;letter-spacing:.14em}.mission-strip{border-block:1px solid var(--line);display:flex;justify-content:center;gap:9vw;padding:23px;background:#0b1a28;color:var(--cyan);font:15px/1.7 monospace}.mission-strip b{font:500 15px var(--font);color:#d0dce4;margin-left:18px} .course-section{max-width:1320px;padding:84px 5% 64px;margin:auto}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:28px}.section-heading h2{margin:10px 0}.section-heading>p{color:var(--muted);font-size:14px;margin-bottom:10px}fieldset{border:0;padding:0;margin:20px 0}legend{font-size:14px;color:var(--muted);margin-bottom:14px}#courses{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}#courses legend{float:none;grid-column:1/-1}label{position:relative;display:flex;align-items:flex-start;gap:14px;padding:19px 20px;margin:10px 0;border:1px solid var(--line);background:#0a1927;cursor:pointer}label:hover{border-color:#618893}label:has(input:checked){border-color:var(--cyan);background:#112f3b;box-shadow:inset 3px 0 var(--cyan)}input[type=radio],input[type=checkbox]{width:20px;height:20px;flex-shrink:0;margin:4px 0;accent-color:var(--cyan)}.course-card{margin:0;padding:28px 24px 24px;display:block;background:linear-gradient(160deg,#152a3c,#091621);border-top:2px solid #405568}.course-card>input{position:absolute;right:20px;top:21px}.course-body{display:block}.course-level{color:var(--cyan);font:11px/1.4 monospace;letter-spacing:.06em;display:block;padding-right:26px;margin-bottom:24px}.course-body>strong{font-size:22px;display:block}.course-number{display:block;font:500 84px/1.35 Arial,sans-serif;letter-spacing:-.05em;margin-top:8px}.course-number small{font:14px var(--font);margin-left:9px;letter-spacing:0;color:var(--muted)}.course-description{display:block;font-size:14px;color:var(--muted);line-height:1.9;margin:12px 0 27px}.course-foot{font-size:11px;border-top:1px solid #335064;padding-top:18px;display:flex;justify-content:space-between;gap:8px;color:#c8dce6}.course-foot>span{color:var(--cyan);white-space:nowrap}.start-row{display:flex;justify-content:space-between;align-items:center;gap:30px;margin-top:30px}.start-row strong{font-size:19px}.start-row p{font-size:13px;color:var(--muted);margin:8px 0}.self-check-entry{margin-top:60px;padding:32px 0;border-block:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:30px}.self-check-entry h3{margin-bottom:10px}.self-check-entry p:last-child{color:var(--muted);font-size:14px;margin:0}.privacy-note{font-size:12px;color:var(--muted);margin:24px 0 0} .panel-page{max-width:840px;margin:55px auto 80px;padding:0 30px}.panel-page>p{color:var(--muted)}.controls{display:flex;justify-content:space-between;gap:18px;margin:26px 0}.question-layout{max-width:1280px;margin:48px auto 70px;padding:0 5%;display:grid;grid-template-columns:300px minmax(0,1fr);gap:60px}.mission-visual{position:sticky;top:35px;align-self:start;overflow:hidden;height:540px;background:#0a1a29;border-bottom:1px solid var(--line)}.mission-visual p{position:absolute;z-index:1;top:28px;left:25px;font:700 24px/1.3 Arial,sans-serif;color:#c4dde6;letter-spacing:.04em}.mission-visual img{width:100%;height:100%;object-fit:cover;object-position:68%;opacity:.7}.mission-visual span{position:absolute;bottom:30px;left:25px;font-size:13px;color:var(--cyan)}.question-console{min-width:0}.progress-row{display:flex;justify-content:space-between;gap:15px;color:var(--muted);font-size:12px}progress{appearance:none;display:block;width:100%;height:3px;border:0;background:#263d4d;color:var(--cyan);margin:18px 0 38px}progress::-webkit-progress-bar{background:#263d4d}progress::-webkit-progress-value{background:var(--cyan);transition:width .3s}progress::-moz-progress-bar{background:var(--cyan)}#question-title{font-size:clamp(22px,2.2vw,30px);line-height:1.65}#answers label{font-size:15px;padding:19px 18px}#answers label span{flex:1}.option-key{font:14px/24px monospace!important;flex:0 0 26px!important;color:var(--cyan)}.criterion{border-left:3px solid var(--cyan);padding:16px 20px;background:#132d3c;font-size:14px}.question-note{color:var(--muted)}#answer-error{color:var(--amber)}#answer-error:empty{display:none} .result-stage{position:relative;display:grid;grid-template-columns:1.05fr 1fr;max-width:1360px;margin:30px auto 0;isolation:isolate;min-height:650px}.result-visual{position:relative;min-width:0;overflow:hidden}.result-visual>img{width:100%;height:100%;object-fit:cover;mask-image:linear-gradient(to bottom,#000 85%,transparent)}.result-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 70%,var(--bg))}.result-copy{padding:38px 7% 30px 30px}.result-copy .eyebrow{font-size:11px;letter-spacing:.035em}.result-kicker{font:700 clamp(23px,3.3vw,47px)/1.1 Arial,sans-serif;color:var(--cyan);margin:25px 0 14px;letter-spacing:.01em}#result-title{font-size:30px;margin-bottom:15px}#result-message{color:var(--muted);font-size:15px}.score-panel{margin:25px 0 20px}.score-panel p{margin:0}.score-panel #score-label{font-size:12px;color:var(--muted)}.score-line{display:flex;align-items:baseline;gap:12px}.score-line strong{font:500 100px/1.2 Arial,sans-serif;letter-spacing:-.06em;color:#fff}.score-line>span{color:var(--muted);font:20px Arial,sans-serif}#score-meter{margin:16px 0 22px;height:4px}#rank{color:var(--cyan);font-size:23px;margin:0 0 8px}#counts{font-size:13px;color:var(--muted)}#score-note{color:var(--muted);margin:18px 0}#results[data-outcome=retry]{--cyan:var(--amber)}.result-details{max-width:1040px;margin:0 auto 80px;padding:0 5%}#scope-note{font-size:13px;color:var(--muted);padding-bottom:22px;border-bottom:1px solid var(--line)}.priority-note{border-left:3px solid var(--amber);background:#2b251c;padding:20px 24px;margin:25px 0}.priority-note h3{font-size:18px;color:var(--amber);margin-bottom:10px}.priority-note p{font-size:14px;margin:0}.debrief-heading{margin:40px 0 24px}.debrief-heading h3{font-size:26px}#actions{padding-left:25px;color:#d2e2ea}#actions li{margin-bottom:18px;padding-left:8px}.result-controls{flex-wrap:wrap;justify-content:flex-start}.result-controls .text-button{margin-left:auto}details{margin:24px 0;border-block:1px solid var(--line);padding:18px 0}summary{display:flex;justify-content:space-between;gap:20px;cursor:pointer;min-height:44px;align-items:center;color:var(--cyan);font-size:14px;list-style:none}summary::-webkit-details-marker{display:none}summary:after{content:""}details[open]>summary{margin-bottom:20px}#answer-review article{padding:24px 0;border-top:1px solid var(--line)}#answer-review h3{font-size:19px}#answer-review p,#answer-review li{font-size:14px;color:#bed1dd}#answer-review li{margin-bottom:14px}.about{max-width:1280px;margin:0 auto;padding:65px 5%;display:grid;grid-template-columns:1fr 1.35fr;gap:65px;border-top:1px solid var(--line)}.about h2{font-size:28px}.about>div>p:not(.eyebrow){font-size:13px;color:var(--muted)}.about details p,.about li{font-size:13px}.about li p{margin-bottom:10px}footer{max-width:1280px;margin:auto;border-top:1px solid var(--line);padding:28px 5%;display:flex;justify-content:space-between;gap:20px;color:#90abba;font-size:11px;letter-spacing:.06em}[hidden]{display:none!important} @media(prefers-reduced-motion:no-preference){html:not([data-motion=off]) .hero-art{animation:hero-arrive 1.3s ease-out both}html:not([data-motion=off]) #results[data-outcome=pass] .result-visual img{animation:shield-reveal 1.1s ease-out both}html:not([data-motion=off]) #results[data-outcome=retry] .result-visual img{animation:shield-reveal 1s ease-out both}html:not([data-motion=off]) .result-copy{animation:result-reveal .6s ease-out both}html:not([data-motion=off]) #results[data-outcome=pass] .result-wave{position:absolute;width:70%;aspect-ratio:1;left:15%;top:15%;border:1px solid #83ede4aa;border-radius:50%;animation:defense-wave 1.5s ease-out both;pointer-events:none}html:not([data-motion=off]) #results[data-outcome=pass] .result-sparks i{position:absolute;top:60%;width:3px;height:9px;background:var(--amber);left:25%;animation:spark-rise 1.5s ease-out both;pointer-events:none}html:not([data-motion=off]) #results[data-outcome=pass] .result-sparks i:nth-child(2){left:35%;animation-delay:.1s}html:not([data-motion=off]) #results[data-outcome=pass] .result-sparks i:nth-child(3){left:45%;animation-delay:.25s}html:not([data-motion=off]) #results[data-outcome=pass] .result-sparks i:nth-child(4){left:55%;animation-delay:.15s}html:not([data-motion=off]) #results[data-outcome=pass] .result-sparks i:nth-child(5){left:65%;animation-delay:.3s}html:not([data-motion=off]) #results[data-outcome=pass] .result-sparks i:nth-child(6){left:75%;animation-delay:.05s}} @keyframes hero-arrive{from{transform:scale(1.045);opacity:.6}to{transform:scale(1);opacity:1}}@keyframes shield-reveal{from{transform:translateY(22px) scale(.94);opacity:.2}to{transform:none;opacity:1}}@keyframes result-reveal{from{transform:translateY(14px);opacity:.4}to{transform:none;opacity:1}}@keyframes defense-wave{from{transform:scale(.45);opacity:.9}to{transform:scale(1.5);opacity:0}}@keyframes spark-rise{0%{opacity:0;transform:translateY(0)}35%{opacity:1}100%{opacity:0;transform:translateY(-220px) rotate(50deg)}}html[data-motion=off]{scroll-behavior:auto}html[data-motion=off] *,html[data-motion=off] *:before,html[data-motion=off] *:after{animation:none!important;transition:none!important} @media(max-width:1000px){.hero{min-height:660px}.hero-copy{padding-left:5%;padding-top:55px}.hero:after{background:linear-gradient(90deg,rgba(7,17,30,.9),rgba(7,17,30,.08)),linear-gradient(0deg,var(--bg),transparent 30%)}.course-card{padding:24px 16px}.course-body>strong{font-size:19px}.course-foot{display:block}.course-foot>span{display:block;margin-top:6px}.question-layout{grid-template-columns:220px minmax(0,1fr);gap:28px}.mission-visual{height:460px}.mission-visual p{font-size:19px}.result-stage{min-height:550px}.result-copy{padding:24px 5% 25px 15px}.result-kicker{font-size:31px}.score-line strong{font-size:80px}.section-heading{display:block}.section-heading>p{margin-top:16px}} @media(max-width:700px){.site-header{min-height:76px;padding:15px 20px;gap:14px}.brand{padding:9px 10px}.brand img{width:116px}.header-caption{font-size:9px;letter-spacing:.03em}.header-caption small{font-size:10px}.motion-toggle{padding:6px 8px;font-size:10px;max-width:76px}.hero{min-height:780px}.hero-art{height:470px;object-fit:cover;object-position:66% 50%;top:0}.hero:after{background:linear-gradient(0deg,var(--bg) 37%,rgba(7,17,30,.06) 71%,rgba(7,17,30,.15));inset:0}.hero-copy{padding:32px 24px 45px;max-width:none}.hero .eyebrow{font-size:10px;letter-spacing:.09em;margin-bottom:18px}.hero-en{font-size:32px;margin-bottom:265px}.hero-en span{font-size:.65em}h1{font-size:40px;line-height:1.4;margin-bottom:17px}.lead{font-size:16px;line-height:1.9;margin-bottom:18px}.hero-cta{width:100%;margin-top:0}.hero-meta{font-size:10px;text-align:center;margin-top:15px}.hero-meta span{margin:0 5px}.hero-coordinate{display:none}.mission-strip{gap:18px;padding:17px 10px;font-size:11px}.mission-strip b{font-size:11px;margin-left:6px}.course-section{padding:46px 22px}.section-heading h2{font-size:26px}.section-heading>p{font-size:13px}#courses{grid-template-columns:1fr;gap:14px}.course-card{padding:24px}.course-body{display:grid;grid-template-columns:1fr 83px;column-gap:15px}.course-level{grid-column:1/-1;margin-bottom:13px}.course-body>strong{font-size:20px;align-self:center}.course-number{grid-column:2;grid-row:2/4;font-size:62px;margin:0;text-align:right}.course-number small{font-size:12px;margin-left:3px}.course-description{grid-column:1;font-size:12px;margin:10px 0 19px}.course-foot{grid-column:1/-1;display:flex;font-size:10px;padding-top:14px}.course-foot>span{margin:0}.start-row,.self-check-entry{display:block}.start-row>button,.self-check-entry>button{width:100%;margin-top:18px}.start-row strong{font-size:17px}.start-row p{font-size:12px}.self-check-entry{margin-top:35px;padding-block:27px}.self-check-entry h3{font-size:22px}.privacy-note{font-size:11px}.question-layout{display:block;padding:0 20px;margin:30px auto 50px}.mission-visual{display:none}.progress-row{font-size:11px}.question-console progress{margin:15px 0 27px}#question-title{font-size:22px}#answers label{padding:16px 13px;gap:10px;font-size:14px;line-height:1.8}.option-key{flex-basis:19px!important}.controls{gap:12px}.controls button{padding:13px 17px;font-size:14px}.panel-page{padding:0 20px;margin-top:35px}.panel-page label{font-size:14px}.result-stage{display:flex;flex-direction:column;margin:0;min-height:0}.result-visual{height:330px}.result-visual>img{object-fit:contain;object-position:50% 50%;mask-image:linear-gradient(to bottom,#000 60%,transparent)}.result-visual:after{display:none}.result-copy{padding:0 24px 25px;margin-top:-25px;z-index:1}.result-copy .eyebrow{font-size:10px;margin:0}.result-kicker{font-size:36px;margin:20px 0 12px}#result-title{font-size:27px}#result-message{font-size:14px}.score-panel{margin:20px 0}.score-line strong{font-size:94px}.result-details{padding:0 24px;margin-bottom:45px}.debrief-heading h3{font-size:23px}#actions{font-size:14px}.result-controls{display:flex;flex-direction:column;align-items:stretch}.result-controls .text-button{margin:0}.priority-note{padding:17px}.priority-note h3{font-size:16px}.about{display:block;padding:38px 24px}.about h2{font-size:24px;margin-bottom:25px}footer{padding:24px;font-size:9px}footer small{font-size:10px}} @media(max-width:359px){.site-header{padding:12px;gap:9px}.header-caption{font-size:8px}.brand img{width:102px}.hero-copy{padding-inline:20px}h1{font-size:34px}.hero-en{font-size:28px}.course-section{padding-inline:18px}.course-card{padding:20px 16px}.course-body{grid-template-columns:1fr 70px;gap:8px}.course-body>strong{font-size:18px}.course-number{font-size:54px}.course-description{font-size:11px}.course-foot{font-size:9px}.section-heading h2{font-size:23px}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}} .title-part{display:inline-block}.motion-toggle{white-space:nowrap} #pace-options{display:flex;gap:18px;margin:28px 0 12px;padding:0;border:0}#pace-options legend{margin-bottom:12px;color:var(--muted)}#pace-options label{display:flex;flex:1;align-items:center;gap:12px;padding:18px;border:1px solid var(--line);cursor:pointer}#pace-options label:has(input:checked){border-color:var(--cyan);background:#12303b}#pace-options input{accent-color:var(--cyan)}#pace-options strong,#pace-options small{display:block}#pace-options small{margin-top:6px;color:var(--muted)}#timing-help{max-width:760px;color:var(--muted);line-height:1.8}#timer{position:sticky;top:12px;z-index:3;background:var(--bg);padding:8px 12px;border:1px solid var(--line);width:fit-content;margin-left:auto;font-variant-numeric:tabular-nums;color:var(--cyan);text-align:right;margin:12px 0 0 auto}#time-left{font-size:26px}#timer[data-urgent=true]{color:var(--amber)}#timer-notice:empty{display:none}@media(max-width:600px){#pace-options{flex-direction:column;gap:10px}#pace-options label{padding:16px}#timing-help{font-size:12px}} #answers .unknown-option{margin-top:24px;border-style:dashed;background:transparent}#answers .unknown-option:has(input:checked){background:#12303b;border-style:solid} /* 2026-09-28 M1: immediate feedback, judgment map, consult row, phone ergonomics */ .progress-row #tally{margin-left:auto;margin-right:16px;color:var(--cyan)}.progress-row #tally:empty{display:none} #answers label[data-state]{cursor:default;flex-wrap:wrap}#answers label[data-state=correct]{border-color:var(--cyan);background:#10313a;box-shadow:inset 3px 0 var(--cyan)}#answers label[data-state=chosen]{border-color:var(--amber);background:#2b251c;box-shadow:inset 3px 0 var(--amber)}#answers input:disabled{opacity:.6}#answers label:has(input:disabled):not([data-state]){opacity:.62} .option-tag{flex-basis:100%;margin-left:46px;font-size:12px;letter-spacing:.04em;color:var(--cyan)}label[data-state=chosen] .option-tag{color:var(--amber)} .feedback{margin:20px 0 4px;padding:20px 22px;border:1px solid var(--line);border-left:3px solid var(--cyan);background:#0c2533}.feedback:focus{outline:none}.feedback:focus-visible{outline:3px solid var(--amber);outline-offset:4px}.feedback[data-result=wrong],.feedback[data-result=unknown]{border-left-color:var(--amber);background:#221f1a}.feedback p{font-size:15px;margin:0 0 10px}.feedback .feedback-head{font-size:19px;font-weight:700;color:var(--cyan);letter-spacing:.04em}.feedback[data-result=wrong] .feedback-head,.feedback[data-result=unknown] .feedback-head{color:var(--amber)}.feedback .source-line{font-size:13px;color:var(--muted);margin:12px 0 0} html:not([data-motion=off]) .feedback:not([hidden]){animation:result-reveal .35s ease-out both} .domain-map{margin:30px 0 10px}.domain-map h3{font-size:24px;margin:6px 0 18px}.domain-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 28px}.domain-list li{padding:18px 20px;border:1px solid var(--line);background:#0a1927}.domain-list li[data-full=true]{border-color:#3f6f76}.domain-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0}.domain-head strong{font-size:17px}.domain-head span{font:500 22px Arial,sans-serif;color:var(--cyan)}.domain-list progress{margin:12px 0 10px;height:6px}.domain-next{font-size:14px;color:#d2e2ea;margin:8px 0 6px}.domain-list .source-line{font-size:12px;color:var(--muted);margin:0} #actions{padding-left:22px}#actions strong{display:block;font-size:16px;line-height:1.7;margin-bottom:6px}#actions p{font-size:14px;color:var(--muted);margin:0 0 4px}#actions .missed-answer{color:#d2e2ea} #answer-review li[data-state=correct]{color:var(--ink);border-left:3px solid var(--cyan);padding-left:10px;list-style:none;margin-left:-16px}#answer-review li[data-state=chosen]{border-left:3px solid var(--amber);padding-left:10px;list-style:none;margin-left:-16px}#answer-review article[data-result=missed] h3:before{content:"要復習　";color:var(--amber);font-size:14px} .consult-row{margin:8px 0 0;padding:22px 0 0;border-top:1px solid var(--line)}.consult-row a{font-weight:700;font-size:15px}.consult-row p{color:var(--muted);margin:8px 0 0}.consult-row .consult-cta{margin:0;color:inherit} .source-line a{display:inline-block;padding:4px 0} footer{flex-wrap:wrap}footer small{white-space:nowrap} @media(max-width:700px){ .header-caption{font-size:10px;letter-spacing:.04em;white-space:nowrap;min-width:0}.header-caption small{display:none}.motion-toggle{font-size:12px}.hero .eyebrow{font-size:11px}.hero-meta{font-size:12px}.course-foot{font-size:12px}.privacy-note{font-size:12px}.progress-row{font-size:12px}.course-level{font-size:12px}footer{font-size:12px}footer small{font-size:12px} .question-layout:before{content:"";display:block;height:64px;margin:-30px -20px 22px;background:url(./assets/security-core-sunburst-glass-v2.webp) 66% 44%/cover;opacity:.55;-webkit-mask-image:linear-gradient(to bottom,#000 30%,transparent);mask-image:linear-gradient(to bottom,#000 30%,transparent)} .question-controls{position:sticky;bottom:0;z-index:2;margin:18px -20px 0;padding:14px 20px calc(14px + env(safe-area-inset-bottom));background:linear-gradient(to bottom,rgba(7,17,30,.82),var(--bg) 35%);border-top:1px solid var(--line)} #timer{position:sticky;top:0;width:100%;margin:10px 0 0;padding:6px 12px;text-align:right}#time-left{font-size:20px} .option-tag{margin-left:39px}.feedback{padding:16px;scroll-margin-bottom:120px}.feedback p{font-size:14px}.feedback .feedback-head{font-size:17px} .domain-list{grid-template-columns:1fr}.domain-map h3{font-size:21px} } /* 2026-09-28 M2: fictional screen excerpts for screen-reading scenarios */ .scenario-screen{margin:6px 0 24px;border:1px solid var(--line);background:#040b14;box-shadow:inset 0 1px #ffffff0d}.scenario-screen figcaption{font:12px/1.6 ui-monospace,Menlo,monospace;letter-spacing:.04em;color:var(--muted);padding:9px 16px;border-bottom:1px solid var(--line);background:#0a1624}.scenario-screen pre{margin:0;padding:14px 16px;font:13px/1.75 ui-monospace,Menlo,Consolas,monospace;color:#d3e4ec;white-space:pre-wrap;overflow-wrap:anywhere}.screen-line{display:inline-block;width:calc(100% + 16px);margin:0 -8px;padding:0 8px}.screen-line[data-flag]{background:#ffd07d1f;box-shadow:inset 3px 0 var(--amber)}.scenario-screen[data-safe=true] .screen-line[data-flag]{background:#83ede41a;box-shadow:inset 3px 0 var(--cyan)}.screen-note{font:12px var(--font);color:var(--amber)}.scenario-screen[data-safe=true] .screen-note{color:var(--cyan)} @media(max-width:700px){.scenario-screen pre{font-size:12px;padding:12px}.scenario-screen figcaption{font-size:12px}} /* 2026-09-28 M3: share panel, title collection board, share landing pages */ .share-panel{margin:34px 0 10px;padding:26px 0 0;border-top:1px solid var(--line)}.share-panel h3{font-size:24px;margin:6px 0 18px}.share-row{display:grid;grid-template-columns:minmax(0,440px) 1fr;gap:28px;align-items:start}.share-row img{width:100%;height:auto;display:block;border:1px solid var(--line)}.share-actions{display:flex;flex-direction:column;gap:12px}.share-actions .button,.share-actions button{justify-content:space-between;width:100%}.share-actions .small{color:var(--muted);margin:0}#share-status:empty{display:none}#share-status{color:var(--cyan)} .title-board{margin:30px 0 10px;padding:22px 24px;border:1px solid var(--line);background:#0a1927}.title-board h3{font-size:22px;margin:4px 0 14px}.board-count{font:500 18px Arial,sans-serif;color:var(--cyan);margin-left:12px}.board-fresh{color:var(--cyan);font-size:14px;margin:0 0 10px}.board-row{border-top:1px solid var(--line);padding:12px 0}.board-row>p{margin:0 0 8px;font-weight:700;font-size:15px}.board-row small{font:700 12px ui-monospace,Menlo,monospace;color:var(--cyan);margin-right:12px;letter-spacing:.1em}.board-cells{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.board-cells li{text-align:center;padding:4px 2px}.board-cells svg{display:block;margin:auto;width:56px;height:56px}.board-cells span{display:block;font-size:12px;line-height:1.4;color:var(--muted);margin-top:4px}.board-cells li[data-fresh=true] svg{filter:drop-shadow(0 0 10px var(--cyan))}.board-complete{color:var(--amber);font-weight:700;margin:10px 0 0}.board-foot{color:var(--muted);margin:12px 0 0}.board-foot .text-button{margin-left:10px;padding:8px 0;min-height:auto;font-size:13px} .title-board.compact{margin:0 0 34px} html:not([data-motion=off]) .board-cells li[data-fresh=true] svg{animation:shield-reveal .9s ease-out both} .share-landing{max-width:880px;margin:48px auto 80px;padding:0 5%}.share-landing h1{font-size:clamp(26px,4vw,48px);margin:8px 0 12px;line-height:1.35}.share-landing h1 small{display:block;font-size:.5em;color:var(--muted);letter-spacing:.1em}.nowrap{display:inline-block}.share-landing-lead{color:var(--muted)}.share-landing-card{width:100%;height:auto;display:block;border:1px solid var(--line);margin:22px 0}.share-landing .button{margin-top:10px;min-width:260px} @media(max-width:700px){.share-row{grid-template-columns:1fr}.title-board{padding:18px 14px}.board-cells svg{width:48px;height:48px}.board-cells span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.board-cells li{padding:2px 0}.share-landing{margin-top:30px;padding:0 20px}.share-landing .button{width:100%}} .domain-article{font-size:13px;color:var(--muted);margin:6px 0 0}.domain-article a{display:inline-block;padding:4px 0} /* 2026-09-30: verdict feedback — an unmistakable ○/× on the chosen option, a glow on the right answer, a shake on a miss. Animations run once, right after answering, and never with reduced motion or 演出オフ. */ .verdict-badge{position:absolute;top:-13px;right:14px;z-index:1;padding:3px 12px;font:800 14px/1.4 var(--font);letter-spacing:.06em;color:#07111e;background:var(--cyan);box-shadow:0 0 16px #83ede466} .verdict-badge[data-kind=wrong]{background:var(--amber);box-shadow:0 0 16px #ffd07d55} .feedback .feedback-head{font-size:22px} @media(prefers-reduced-motion:no-preference){ html:not([data-motion=off]) #answers.just-revealed .verdict-badge{animation:verdict-pop .42s cubic-bezier(.2,.9,.3,1.3) both} html:not([data-motion=off]) #answers.just-revealed[data-verdict=correct] label[data-state=correct]{animation:correct-glow .9s ease-out both} html:not([data-motion=off]) #answers.just-revealed[data-verdict=wrong] label[data-state=chosen]{animation:choice-shake .42s ease-in-out both} html:not([data-motion=off]) #answers.just-revealed:not([data-verdict=correct]) label[data-state=correct]{animation:correct-glow .9s ease-out .35s both} html:not([data-motion=off]) .feedback.just-revealed .feedback-head{animation:verdict-pop .42s cubic-bezier(.2,.9,.3,1.3) both} } @keyframes verdict-pop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.12);opacity:1}100%{transform:scale(1);opacity:1}} @keyframes correct-glow{0%{box-shadow:inset 3px 0 var(--cyan),0 0 0 0 #83ede4cc}100%{box-shadow:inset 3px 0 var(--cyan),0 0 0 16px #83ede400}} @keyframes choice-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}} @media(max-width:700px){.header-caption{display:none}.sound-toggle{margin-left:auto}.verdict-badge{font-size:13px;right:10px}.feedback .feedback-head{font-size:20px}} /* 2026-09-30: fit a question on one screen — the repeated instruction becomes screen-reader only, tighter spacing. */ #answers>legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .question-layout{margin-top:28px} .question-console progress{margin:12px 0 22px} #question-title{font-size:clamp(20px,1.9vw,26px);line-height:1.55;margin-bottom:14px} #answers{margin:8px 0 0} #answers label{margin:6px 0;padding:13px 16px;line-height:1.6} #answers .unknown-option{margin-top:12px} .feedback{margin-top:14px} @media(max-width:700px){ .question-layout{margin-top:14px} .question-layout:before{height:34px;margin:-14px -20px 12px} .question-console progress{margin:10px 0 16px} #area{margin-bottom:6px} #question-title{font-size:19px;line-height:1.55;margin-bottom:10px} #answers label{padding:10px 12px;margin:5px 0;line-height:1.55} #answers .unknown-option{margin-top:8px} .feedback{padding:14px 14px 12px} .feedback p{margin-bottom:8px} } /* Three header toggles (sound, BGM, motion) must fit a 320px phone. */ @media(max-width:700px){.site-header{gap:6px}.site-header .motion-toggle{padding:6px 7px;font-size:11px}} @media(max-width:359px){.site-header{padding-inline:10px;gap:4px}.brand{padding:8px}.brand img{width:84px}.site-header .motion-toggle{padding:5px 5px;font-size:10px}} /* 2026-09-30: louder verdict — a full-screen ○ / × stamp with a flash, a shockwave and (on a right answer) a burst of light. */ .verdict-burst{position:fixed;inset:0;z-index:50;pointer-events:none;display:grid;place-items:center;overflow:hidden;--c:var(--cyan)} .verdict-burst[data-kind=wrong],.verdict-burst[data-kind=unknown]{--c:var(--amber)} .verdict-burst>*{grid-area:1/1} .burst-flash{position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--c) 38%,transparent),transparent 62%);box-shadow:inset 0 0 90px color-mix(in srgb,var(--c) 70%,transparent);animation:burst-flash 1.1s ease-out both} .burst-mark{width:min(50vw,290px);height:auto;fill:none;stroke:var(--c);stroke-width:13;stroke-linecap:round;filter:drop-shadow(0 0 14px var(--c)) drop-shadow(0 0 34px var(--c));animation:burst-stamp 1.15s cubic-bezier(.2,.9,.3,1.25) both} .burst-mark circle,.burst-mark path{stroke-dasharray:300;stroke-dashoffset:300;animation:burst-draw .24s .04s ease-out forwards} .burst-ring{width:min(50vw,290px);aspect-ratio:1;border-radius:50%;border:3px solid var(--c);animation:burst-ring .8s .08s ease-out both} .verdict-burst i{width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 10px var(--c),0 0 22px var(--c);animation:burst-spark .85s .1s cubic-bezier(.1,.7,.3,1) both} .verdict-burst[data-kind=wrong] .burst-mark{animation:burst-stamp 1.15s cubic-bezier(.2,.9,.3,1.25) both,burst-shake .4s .18s ease-in-out} @keyframes burst-flash{0%{opacity:0}12%{opacity:1}100%{opacity:0}} @keyframes burst-stamp{0%{transform:scale(1.9);opacity:0}18%{transform:scale(.92);opacity:1}30%{transform:scale(1.04)}72%{transform:scale(1);opacity:1}100%{transform:scale(1.08);opacity:0}} @keyframes burst-draw{to{stroke-dashoffset:0}} @keyframes burst-ring{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.3);opacity:0}} @keyframes burst-spark{0%{transform:rotate(var(--a)) translateX(0) scale(1.4);opacity:1}100%{transform:rotate(var(--a)) translateX(var(--d)) scale(.2);opacity:0}} @keyframes burst-shake{0%,100%{translate:0}20%{translate:-14px}40%{translate:14px}60%{translate:-9px}80%{translate:9px}} html:not([data-motion=off]) #answers.just-revealed .verdict-badge{animation:verdict-pop .5s .35s cubic-bezier(.2,.9,.3,1.3) both} .verdict-badge{font-size:16px;padding:4px 14px;top:-16px} @media(prefers-reduced-motion:reduce){.verdict-burst{display:none}} /* 2026-09-30: mission moods. basic = calm (cyan, slow breathing light), advanced = focused (blue-indigo, a scan line), expert = final battle (violet and gold, light rising from below). Verdict colors (cyan ○ / amber ×) stay the same in every mood. */ body[data-tier]{--tier:var(--cyan);--tier-2:#2f8f9a;--tier-hue:0deg} body[data-tier=advanced]{--tier:#7fa6ff;--tier-2:#3b4fc4;--tier-hue:38deg} body[data-tier=expert]{--tier:#c9a2ff;--tier-2:#6a2bb8;--tier-hue:75deg;--tier-gold:#f3c86a} body[data-tier]:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background:radial-gradient(60% 45% at 78% 12%,color-mix(in srgb,var(--tier-2) 32%,transparent),transparent 70%),radial-gradient(50% 40% at 10% 95%,color-mix(in srgb,var(--tier-2) 22%,transparent),transparent 70%); animation:tier-breathe 7s ease-in-out infinite alternate} body[data-tier=advanced]:after{content:"";position:fixed;left:0;right:0;top:0;height:140px;z-index:-1;pointer-events:none; background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--tier) 16%,transparent) 85%,color-mix(in srgb,var(--tier) 45%,transparent) 100%); animation:tier-scan 5.5s linear infinite} body[data-tier=expert]:after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background:radial-gradient(75% 50% at 50% 106%,color-mix(in srgb,var(--tier-gold) 55%,transparent),transparent 72%),radial-gradient(100% 70% at 50% 112%,color-mix(in srgb,var(--tier-2) 75%,transparent),transparent 76%); animation:tier-rise 6s ease-in-out infinite} body[data-tier=expert]:before{background: radial-gradient(2px 2px at 12% 20%,var(--tier-gold),transparent),radial-gradient(3px 3px at 34% 55%,#fff8e0,transparent),radial-gradient(2px 2px at 58% 12%,var(--tier),transparent), radial-gradient(3px 3px at 76% 68%,var(--tier-gold),transparent),radial-gradient(2px 2px at 90% 35%,#fff,transparent),radial-gradient(2px 2px at 22% 85%,var(--tier),transparent),radial-gradient(3px 3px at 64% 92%,var(--tier-gold),transparent); background-size:100% 55vh;background-repeat:repeat;animation:sparks-rise 10s linear infinite;opacity:.85} @keyframes sparks-rise{from{background-position:0 0}to{background-position:0 -55vh}} @keyframes tier-breathe{from{opacity:.55}to{opacity:1}} @keyframes tier-scan{from{transform:translateY(-140px)}to{transform:translateY(100vh)}} @keyframes tier-rise{0%{transform:translateY(0);opacity:.7}50%{transform:translateY(-3%);opacity:1}100%{transform:translateY(0);opacity:.7}} body[data-tier] progress{color:var(--tier)} body[data-tier] progress::-webkit-progress-value{background:var(--tier);box-shadow:0 0 12px var(--tier)} body[data-tier] progress::-moz-progress-bar{background:var(--tier)} body[data-tier] .mission-visual img,body[data-tier] .question-layout:before{filter:hue-rotate(var(--tier-hue)) saturate(1.15)} body[data-tier] .mission-visual span,body[data-tier] #area{color:var(--tier)} body[data-tier] .mission-visual{border-bottom-color:var(--tier);box-shadow:0 0 40px color-mix(in srgb,var(--tier-2) 35%,transparent)} html[data-motion=off] body[data-tier]:before,html[data-motion=off] body[data-tier]:after{animation:none} @media(prefers-reduced-motion:reduce){body[data-tier]:before,body[data-tier]:after{animation:none}body[data-tier=advanced]:after{display:none}} /* 2026-10-01: five levels. Five cards in one row on wide screens, then 3 + 2, then a single column on phones. */ #courses{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px} #courses .course-card{padding:22px 20px} #courses .course-number{font-size:clamp(44px,4vw,62px)} @media(max-width:1180px){#courses{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:700px){#courses{grid-template-columns:1fr}} .board-levels .board-cells li small{display:block;color:var(--muted);font-size:11px;letter-spacing:.08em} /* 2026-10-08: five domains as a pentagon (radar) chart; the shape built up across plays and this play on top. */ .domain-map{--shape:#83ede4;--now:#ffd07d} .radar{display:grid;grid-template-columns:minmax(0,460px) minmax(0,1fr);gap:12px 40px;align-items:center;margin:0 0 26px;padding-bottom:22px;border-bottom:1px solid var(--line)} .radar-chart{display:block;width:100%;height:auto;overflow:visible} .radar-ring{fill:none;stroke:var(--line);stroke-width:1}.radar-edge{stroke:#3c5a6e}.radar-axis{stroke:var(--line);stroke-width:1} .radar-shape{fill:var(--shape);fill-opacity:.26;stroke:var(--shape);stroke-width:2.5;stroke-linejoin:round} .radar-now{fill:none;stroke:var(--now);stroke-width:2;stroke-dasharray:6 5;stroke-linejoin:round}.radar-now-dot{fill:var(--now);stroke:var(--bg);stroke-width:2} .radar-label{font:700 17px/1 var(--font);fill:var(--ink)}.radar-value{font:500 15px/1 Arial,sans-serif;fill:var(--muted)}.radar-grew{fill:var(--shape);font-weight:700} .radar-side{display:flex;flex-direction:column;gap:16px;min-width:0} .radar-legend{list-style:none;padding:0;margin:0;font-size:14px;color:#d2e2ea} .radar-legend li{display:flex;align-items:center;gap:10px;margin:0 0 8px} .radar-legend li:before{content:"";flex:0 0 22px;height:12px;border:2px solid var(--shape);background:rgba(131,237,228,.26)} .radar-legend .legend-now:before{border:2px dashed var(--now);background:none} .radar-grew-note{margin:0;font-size:15px;color:var(--shape);font-weight:700} .radar-note{margin:-6px 0 0;color:var(--muted)} @media(max-width:960px){.radar{grid-template-columns:1fr}.radar-chart{max-width:460px;margin:0 auto}} .practice-row{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding-top:16px;border-top:1px solid var(--line)} .practice-row .small{margin:0;color:var(--muted);font-size:14px} .domain-total{font-size:13px;color:var(--muted);margin:6px 0 0} .domain-list li:last-child:nth-child(odd){grid-column:1/-1} #results[data-outcome=practice] .result-kicker{color:var(--amber)} @media(max-width:700px){ .radar{grid-template-columns:1fr;gap:6px;padding-bottom:18px;margin-bottom:20px}.radar-chart{max-width:420px;margin:0 auto} .radar-label{font-size:19px}.radar-value{font-size:16px} .radar-side{gap:12px}.radar-legend{font-size:13px}.radar-legend li{margin-bottom:4px} .practice-row{padding-top:14px}.practice-row button{width:100%} } /* 2026-10-08: the site-wide /scripts/jp-linebreak.js breaks Japanese only between words. Its own