/* FV / A5 / B3: text, layout, cards and buttons are native HTML/CSS. Images contain artwork only. */
body{background:#fbfaf7;color:#101010;font-family:"Noto Sans JP","Hiragino Sans",sans-serif}
.hero,.landing-section{container-type:inline-size}
.hero{max-width:640px;margin:0 auto;padding:0;overflow:hidden}
.hero-copy{padding:4.2cqw 5.3cqw 0}
.hero .brand{margin:0 0 6.4cqw;color:#60605e;font-size:3.6cqw;font-weight:600;line-height:1.5;letter-spacing:.12em;margin-bottom:5.6cqw}
.hero .eyebrow{margin:0 0 2.1cqw;font-size:5.6cqw;line-height:1.4;font-weight:400;letter-spacing:0;color:#373735;margin-bottom:1.3cqw}
.hero h1{margin:0;font-size:11.65cqw;line-height:1.12;font-weight:900;letter-spacing:-.055em;color:#080808}
.hero h1 span{display:block;white-space:nowrap}
.benefits{display:grid;grid-template-columns:.85fr 1.12fr 1.04fr 1.04fr;gap:1.9cqw;margin:4.8cqw 0 5.5cqw;padding:0;list-style:none}
.benefits li{display:flex;align-items:center;justify-content:center;white-space:nowrap;margin:0;height:10cqw;border:1px solid #e2ded6;border-radius:99px;background:#f3f0ea;color:#686762;font-size:4.15cqw;line-height:1;font-weight:800;letter-spacing:0}
.benefits b{color:#cf2e19;font-weight:900}
.benefits .time{font-size:5.1cqw}
.start-button{display:flex;align-items:center;justify-content:center;gap:2.3cqw;width:100%;min-height:44px;height:13.6cqw;padding:0 3cqw;border:0;border-radius:5.2cqw;background:#d92f1b;color:#fff;font:inherit;font-size:5.8cqw;font-weight:700;line-height:1.2;letter-spacing:-.035em;cursor:pointer;transition:background-color .15s}
.start-button::after{content:"";width:5.2cqw;height:5.2cqw;flex:0 0 auto;background:currentColor;mask:url('./img/arrow-right.svg') center/contain no-repeat}
.start-button:hover{background:#c12a18}
.start-button:active{background:#ae2515}
.start-button:focus-visible{outline:3px solid #111;outline-offset:4px}
.hero .reassurance{margin:2.3cqw 0 0;text-align:center;font-size:3.3cqw;line-height:1.6;color:#686762;letter-spacing:-.065em;white-space:nowrap}
.hero-scene{position:relative;margin:3cqw 0 0;aspect-ratio:1671/941;overflow:hidden}
.hero-scene img{display:block;width:100%;height:auto;mix-blend-mode:multiply;transform:scale(1.07);transform-origin:bottom center}
.hero-message{position:absolute;left:8.4%;top:13%;margin:0;font-family:"Klee One",cursive;font-size:5.7cqw;font-weight:600;line-height:1.55;letter-spacing:.05em;transform:rotate(-11deg);color:#272725}
.hero-message span{display:block}
.quiz-header{display:none}
body[data-view="quiz"] .hero,body[data-view="result"] .hero{display:none}
body[data-view="quiz"] .quiz-header,body[data-view="result"] .quiz-header{display:block}
main{padding:0 0 64px}
#quiz,#result{padding:8px 16px 0}
.landing-section{position:relative;padding:32px 0 0}
.landing-section h2{border:0;padding:0;color:#0b0b0b;letter-spacing:-.065em;font-weight:900}
.mistakes-copy{padding:0 6.2cqw}
.mistakes h2{margin:0;font-size:7.4cqw;line-height:1.28}
.mistakes h2 span{display:block;white-space:nowrap;font-size:7cqw;letter-spacing:-.07em;margin-left:-.25em}
.section-lead{margin:1.8cqw 0 0;font-size:4cqw;line-height:1.5;font-weight:500;letter-spacing:-.065em;white-space:nowrap}
.mistakes-scene{position:relative;margin:1cqw 0 0}
.mistakes-scene img{display:block;width:100%;height:auto;mix-blend-mode:multiply}
.mistakes-question{position:absolute;right:5%;top:45%;margin:0;transform:rotate(-8deg);font-family:"Klee One",cursive;font-weight:600;font-size:4.25cqw;line-height:1.5;letter-spacing:0}
.mistake-list{position:relative;list-style:none;padding:0;margin:-2.5cqw 6.2cqw 0;display:grid;gap:1.8cqw}
.mistake-list li{display:grid;grid-template-columns:8.5cqw 1fr;gap:2.5cqw;align-items:start;margin:0;padding:2.8cqw 3.3cqw;background:#faeae4;border-radius:5.3cqw}
.mistake-mark{display:grid;place-items:center;width:8.5cqw;aspect-ratio:1;background:#d6351d;border-radius:50%}
.mistake-mark::after{content:"";width:5.5cqw;height:5.5cqw;background:white;mask:url('./img/x.svg') center/contain no-repeat}
.mistake-list h3{margin:0 0 .7cqw;font-size:4.4cqw;line-height:1.4;font-weight:800;letter-spacing:-.045em;white-space:nowrap}
.mistake-list p{margin:0;font-size:3.45cqw;line-height:1.5;letter-spacing:-.04em}
.mistakes-takeaway{display:flex;align-items:center;justify-content:center;min-height:18.5cqw;margin:1.7cqw 4cqw 0;padding:3cqw 2cqw;color:#fff;background:url('./img/red-brush.png') center/100% 100% no-repeat;font-family:"Klee One",cursive;font-size:5.7cqw;font-weight:600;line-height:1.4;letter-spacing:-.055em;white-space:nowrap;background-size:100% 165%}
.axes{padding-top:40px}
.axes-inner{padding:0 5.4cqw}
.axes h2{margin:0 0 3.9cqw;text-align:center;font-size:8.8cqw;line-height:1.3;white-space:nowrap}
.axis-cards{list-style:none;margin:0 0 5cqw;padding:0;display:grid;gap:4.2cqw}
.axis-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 32%;align-items:center;min-height:36.5cqw;margin:0;padding:3.8cqw 2.8cqw 3.5cqw 5cqw;border:1px solid #e3ded2;background:#fffefb;box-shadow:0 1cqw 1.2cqw -.7cqw #8f85766b;transform:rotate(-1.5deg);border-radius:.7cqw}
.axis-card:nth-child(2){transform:rotate(1deg)}
.axis-card:nth-child(3){transform:rotate(-.6deg)}
.axis-card::before{content:"";position:absolute;left:-.5cqw;top:1.5cqw;width:2cqw;height:2.8cqw;border-radius:50%;background:#d9d4c8;opacity:.75}
.axis-card h3{display:flex;align-items:baseline;gap:2cqw;margin:0 0 1.3cqw;font-size:6.1cqw;font-weight:800;line-height:1.3;letter-spacing:-.055em;white-space:nowrap}
.axis-number{color:#d32b18;font-size:9cqw;font-weight:900;line-height:1;letter-spacing:-.04em}
.axis-card p{margin:0;font-size:4.45cqw;font-weight:400;line-height:1.65;letter-spacing:-.055em}
.axis-icon{display:block;width:112%;height:auto;mix-blend-mode:multiply;max-width:none;justify-self:end}
.axes .start-button{height:15.2cqw;border-radius:99px;font-size:6cqw}
.axes-note{margin:1.6cqw 0 0;text-align:center;font-size:3.65cqw;font-weight:600;line-height:1.6;color:#4b4a46}
.landing-section h2:first-child{margin-top:0}
.hero-message::after{content:"";display:block;width:110%;height:3.2cqw;margin-top:3cqw;border-top:1px solid #a2998b;border-radius:50%;transform:rotate(-7deg)}
@media(prefers-reduced-motion:reduce){.start-button{transition:none}}
@media(forced-colors:active){.start-button{border:2px solid ButtonText}.mistakes-takeaway{color:CanvasText}.axis-card{border:1px solid CanvasText}}