:root{color-scheme:light;--paper:#faf7f1;--ink:#392b26;--muted:#6e5b52;--accent:#8b5044;--pink:#f1e3dc;--line:#e7dbcf;--white:#fffdf9;--serif:"Hiragino Mincho ProN","Yu Mincho","Noto Serif CJK JP",serif;--sans:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",Meiryo,sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.75 var(--sans);min-height:100vh;display:flex;flex-direction:column}main{flex:1}button,textarea{font:inherit}button{cursor:pointer;touch-action:manipulation}button:disabled{cursor:wait}img{display:block;max-width:100%}h1,h2,p,figure{margin:0}h1,h2{font-family:var(--serif);line-height:1.5}button:focus-visible,a:focus-visible,textarea:focus-visible{outline:3px solid #755148;outline-offset:4px}[tabindex="-1"]:focus{outline:none}
.top{border-bottom:1px solid var(--line);background:var(--white)}.top-inner{max-width:1170px;margin:auto;padding:14px 25px;display:flex;justify-content:space-between;align-items:center;gap:12px}.brand{display:flex;align-items:center;gap:9px;font-family:var(--serif);font-size:15px;font-weight:bold}.edition{border:1px solid var(--line);border-radius:100px;padding:3px 11px;color:var(--muted);font-size:11px;letter-spacing:.1em;white-space:nowrap}
.shell{max-width:1080px;margin:auto;padding:0 24px}.home{padding-top:32px;padding-bottom:34px}.hero{display:grid;grid-template-columns:minmax(0,1fr);gap:0;background:var(--white);border:1px solid var(--line);border-radius:22px;overflow:hidden}.hero-photo{position:relative;order:-1;background:#e5d3be}.hero-photo img{width:100%;height:100%;aspect-ratio:16/8;object-fit:cover}.photo-label{position:absolute;right:12px;bottom:11px;background:var(--white);color:var(--muted);padding:3px 9px;border-radius:5px;font-size:10px}.hero-copy{padding:24px 21px 25px}.kicker{font-size:11px;font-weight:750;letter-spacing:.16em;color:var(--accent);display:flex;align-items:center;gap:10px}.kicker::before{content:"";width:21px;height:1px;background:currentColor}.hero h1{font-size:clamp(24px,6.4vw,44px);letter-spacing:.025em;margin:10px 0 12px}.hero h1 span{display:block;color:var(--accent)}.lead{font-size:14px;color:var(--muted);margin-bottom:21px}.primary,.secondary,.option,.text-btn{border-radius:10px;min-height:46px;line-height:1.5}.primary{border:1px solid var(--accent);background:var(--accent);color:white;font-weight:750;padding:14px 19px}.start{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:350px}.secondary{padding:10px 15px;background:var(--white);border:1px solid var(--line);color:var(--ink);font-weight:650}.text-btn{padding:6px 9px;border:0;background:transparent;color:var(--accent);text-decoration:underline;text-underline-offset:4px}.small{font-size:12px;color:var(--muted);margin-top:11px}.preview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:16px;border:1px solid var(--line);border-radius:15px;background:#f5eee5}.preview div{padding:13px 4px;text-align:center;font-size:12px;font-weight:bold}.preview div+div{border-left:1px solid var(--line)}.preview span{display:block;color:var(--accent);font:italic 17px Georgia,serif;margin-bottom:4px}
.flow{max-width:720px;padding-top:30px;padding-bottom:42px}.progress-head{display:flex;justify-content:space-between;align-items:end;color:var(--accent);font-weight:750;margin-bottom:7px}.progress-head strong{font:26px/1 Georgia,serif}.progress-head small{font-size:13px;color:var(--muted)}.bar{height:6px;background:#eaded2;border-radius:8px;overflow:hidden}.bar div{height:100%;background:var(--accent);border-radius:8px}.question{margin-top:20px;background:var(--white);border:1px solid var(--line);border-radius:19px;padding:19px 15px}.question h1{font-size:clamp(21px,5.7vw,30px);margin-bottom:15px}.options{display:grid;gap:8px}.option{background:#fcf8f3;border:1px solid var(--line);padding:10px 12px;display:flex;align-items:center;text-align:left;gap:10px;width:100%;color:var(--ink);font-size:14px;font-weight:650;min-height:48px}.option .letter{display:grid;place-items:center;flex:0 0 27px;height:27px;border-radius:50%;background:#f1e5db;color:var(--accent);font:14px Georgia,serif}.option .arrow{margin-left:auto;color:var(--accent)}.option.selected{border-color:var(--accent);background:var(--pink)}.question-nav{margin-top:10px;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.result{max-width:900px;padding-top:28px;padding-bottom:43px}.result-hero{background:var(--white);border:1px solid var(--line);border-radius:20px;overflow:hidden;display:grid}.result-hero img{width:100%;height:100%;aspect-ratio:16/8;object-fit:cover}.result-head{padding:22px}.result-head h1{font-size:clamp(24px,6vw,37px);margin:10px 0}.result-head h1 span{display:block;color:var(--accent)}.result-head p,.card p{color:var(--muted)}.result-grid{display:grid;gap:10px;margin-top:14px}.card{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:18px}.card h2{font-size:18px;margin-bottom:8px}.card h2 span{display:inline-block;color:var(--accent);font:italic 17px Georgia,serif;margin-right:8px}.card p{font-size:14px}.card strong{display:block;margin-bottom:4px}.stack{margin-top:13px}.advice{background:#f3e6df;border-color:#ead9ce}.advice .kicker{margin-bottom:7px}.paragraphs p+p{margin-top:10px}.steps{padding-left:25px;margin:8px 0 0;font-size:14px}.steps li{padding-left:4px;margin:6px 0}.steps li::marker{color:var(--accent);font-weight:bold}.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.actions button{flex:1 1 auto;font-size:13px}.note{font-size:12px;color:var(--muted);margin:15px 0}.footer{border-top:1px solid var(--line);text-align:center;font-size:11px;color:var(--muted);padding:15px 12px calc(15px + env(safe-area-inset-bottom))}.footer span{margin:0 4px}
dialog{padding:21px;border:1px solid var(--line);border-radius:16px;background:var(--white);color:var(--ink);max-width:min(90%,520px);width:100%;max-height:85vh;overflow:auto}dialog::backdrop{background:#392b2680}dialog h2{font-size:20px;margin-bottom:10px}dialog textarea{width:100%;min-height:125px;padding:8px;font-size:16px;color:var(--ink);border:1px solid var(--line);border-radius:8px}dialog img{width:min(100%,265px);margin:9px auto}dialog .secondary{display:inline-flex;align-items:center;text-decoration:none}.enter{animation:appear .24s ease-out both}@keyframes appear{from{opacity:.55;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(hover:hover){.primary:hover{background:#743f35}.secondary:hover,.option:hover{border-color:#b98c7b;background:#f5ebe3}}@media(min-width:670px){.home{padding-top:61px;padding-bottom:55px}.hero{grid-template-columns:1fr 1.05fr;min-height:479px}.hero-photo{order:0}.hero-copy{align-self:center;padding:35px clamp(25px,5vw,60px)}.hero-photo img{position:absolute;inset:0}.lead{font-size:16px}.preview{margin-top:22px}.preview div{font-size:14px;padding:17px}.flow{padding-top:44px}.question{padding:26px}.option{font-size:16px}.result-hero{grid-template-columns:1fr 1fr}.result-head{padding:27px;align-self:center}.result-grid{grid-template-columns:1fr 1fr}.card{padding:22px}.card p,.steps{font-size:15px}}@media(max-width:360px){.shell{padding-left:14px;padding-right:14px}}@media(prefers-reduced-motion:reduce){.enter{animation:none}}

/* 見出しの大きさを、画像を除いた本文欄の幅に合わせる。 */
.hero-copy { container-type: inline-size; }
.hero h1 { font-size: clamp(22px, 6.4vw, 28px); }
.hero h1 span { white-space: nowrap; }
@supports (font-size: 1cqi) {
  .hero h1 { font-size: min(42px, 9.6cqi); }
}
.brand img { flex-shrink: 0; }
@media (max-width: 390px) {
  .top-inner { padding-inline: 14px; }
  .brand { font-size: 13px; }
}