:root{font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;color:#243e36;background:#f5f4ec;font-synthesis:none;--green:#285b4e;--muted:#728078;--gold:#ba9044;--line:#dce2d8}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 83% 20%,#e3ecdf80,transparent 45%);overflow-x:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{cursor:wait}button:focus-visible,a:focus-visible{outline:3px solid #b68a33;outline-offset:5px}button{touch-action:manipulation}a{color:inherit} .ambient{position:fixed;border:1px solid #d9dfd380;border-radius:50%;pointer-events:none;z-index:-1}.ambient-one{width:700px;height:700px;right:-360px;top:110px}.ambient-two{width:900px;height:900px;left:-630px;bottom:-350px}.site-header{max-width:1200px;margin:auto;padding:28px 40px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{text-decoration:none;font-family:Georgia,serif;font-size:24px;font-weight:bold;letter-spacing:2px;display:flex;align-items:center;gap:12px}.brand-mark{background:var(--green);color:#e5d5a3;border-radius:11px;width:38px;height:38px;display:grid;place-items:center;font-size:25px}.brand-sub{font:10px/1.5 sans-serif;letter-spacing:2px;margin-left:5px}.header-note{font-size:12px;color:var(--muted)}main{max-width:1000px;min-height:calc(100vh - 184px);margin:auto;padding:48px 36px 64px;outline:none}.screen{animation:arrive .35s ease both}.eyebrow{font:600 11px/1.6 sans-serif;letter-spacing:3px;color:var(--gold);text-transform:uppercase}.hero{text-align:center;padding:12px 0 0}.seal{position:relative;width:160px;height:160px;margin:20px auto 32px;display:grid;place-items:center;border:1px solid #c4cfbd;border-radius:50%;background:radial-gradient(circle,#fffdf6 15%,#e6ecdd 70%);box-shadow:0 0 0 9px #f5f4ec,0 0 0 10px #dce2d5}.seal:before{content:"";position:absolute;inset:20px;border:1px solid #c1ccba;transform:rotate(45deg);border-radius:12px}.seal svg{width:78px;height:78px;position:relative}.seal-star{position:absolute;right:4px;top:12px;background:#f5f4ec;color:var(--gold);font-size:30px}h1,h2,p{margin-top:0}h1{font-size:clamp(30px,5vw,48px);letter-spacing:.05em;line-height:1.4;margin-bottom:20px}.intro{font-size:15px;line-height:2;color:#67786e;margin-bottom:29px}.primary,.secondary{min-height:56px;padding:15px 28px;border-radius:12px;font-weight:bold;border:1px solid transparent;transition:transform .18s,background .18s}.primary{background:var(--green);color:white;box-shadow:0 5px 0 #1c4439}.primary:hover{background:#34715f;transform:translateY(-2px)}.primary:active{transform:translateY(2px);box-shadow:0 2px 0 #1c4439}.start{width:min(100%,330px);font-size:18px;display:inline-flex;justify-content:space-between;align-items:center}.secondary{background:#fffdf7;color:var(--green);border-color:#cbd5c9}.secondary:hover{background:#edf1e7}.tiny{font-size:12px;color:var(--muted);margin:18px 0 30px}.features{display:grid;grid-template-columns:repeat(3,1fr);max-width:660px;margin:36px auto 0;padding-top:26px;border-top:1px solid var(--line);gap:15px}.feature-icon{display:block;font-size:23px;color:var(--gold);margin-bottom:8px}.features strong{font-size:13px}.features p{font-size:11px;color:var(--muted);margin:7px 0}.question-shell{max-width:760px;margin:auto}.step-info{display:flex;align-items:center;justify-content:space-between;font-size:13px;margin:4px 0 14px}.step-info strong{font-size:21px}.step-info span{color:var(--muted)}.progress-track{height:6px;background:#e0e6dc;border-radius:9px;overflow:hidden}.progress-fill{height:100%;background:var(--green);transition:width .3s}.card{background:#fffef9;border:1px solid #dce2d6;border-radius:22px;box-shadow:0 16px 40px #31493706}.question-card{margin-top:28px;padding:36px 40px}.question-card h1{font-size:clamp(23px,3.5vw,31px);margin:14px 0 12px;letter-spacing:.01em}.question-hint{color:var(--muted);font-size:13px;margin-bottom:28px}.choices{display:grid;grid-template-columns:1fr 1fr;gap:14px}.choice{display:flex;align-items:center;gap:14px;text-align:left;min-height:78px;padding:18px;background:#fffef9;border:1px solid #d8dfd1;border-radius:12px;color:#2b473c;font-size:17px;font-weight:bold;transition:background .16s,border-color .16s,transform .16s}.choice:hover{background:#edf3e7;border-color:#688d74;transform:translateY(-2px)}.choice.selected{background:#e2eddc;border-color:var(--green)}.choice-letter{font:12px Georgia,serif;width:29px;height:29px;display:grid;place-items:center;border:1px solid #d6decf;border-radius:50%;color:#8a987f;flex-shrink:0}.choice.selected .choice-letter{background:var(--green);color:white}.question-bottom{display:flex;justify-content:space-between;align-items:center;margin:22px 2px;color:var(--muted);font-size:12px;gap:16px}.back{background:none;border:0;color:#63796b;padding:12px 0;font-size:13px}.analysis{max-width:650px;margin:30px auto;text-align:center;padding:38px}.spinner{display:inline-block;font-size:48px;color:var(--gold);animation:turn 3s linear infinite;margin-bottom:16px}.analysis h1{font-size:25px}.analysis p{font-size:13px;color:var(--muted)}.race-row{display:grid;grid-template-columns:80px 1fr 55px;align-items:center;gap:14px;margin:21px 0;text-align:left;font-size:13px}.race-row strong{text-align:right;font-variant-numeric:tabular-nums}.race-track{background:#ecede3;height:9px;border-radius:6px;overflow:hidden}.race-fill{height:100%;width:0;background:#9fb19a;transition:width .25s}.race-row:last-child .race-fill{background:var(--gold)}.result-top{text-align:center;position:relative;padding:34px 24px;background:radial-gradient(ellipse at top,#e8eedc,transparent 72%),#fffdf6;border:1px solid #ccd7c1;border-radius:24px}.result-top h1{font-size:clamp(56px,10vw,96px);line-height:1.2;color:var(--green);margin:12px 0 20px;font-weight:900;letter-spacing:.03em}.result-intro{margin:16px 0 0;font-size:16px}.result-badge{display:inline-block;background:#e9eddd;color:#52704b;border:1px solid #d5ddc2;border-radius:30px;padding:8px 17px;font-size:12px;letter-spacing:2px}.score-pill{display:inline-flex;gap:18px;align-items:center;padding:12px 24px;border-top:1px solid #ded7bf;border-bottom:1px solid #ded7bf;font-size:14px}.score-pill strong{font-family:Georgia,serif;font-size:39px;color:#a87a2d}.score-pill small{font-size:20px}.result-caption{font-size:13px;color:var(--muted);margin:18px 0 0}.result-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:22px;margin:24px 0}.reasons,.stats{padding:26px}.section-title{font-size:18px;line-height:1.7;margin:8px 0 22px}.reason{padding:17px 0;border-top:1px solid #e6e8dd}.answer-tag{font-size:11px;color:#69825d;background:#eef2e7;padding:4px 9px;border-radius:5px;display:inline-block;margin-bottom:9px}.reason p{font-size:13px;line-height:1.95;margin:0;color:#53685c}.stat{margin:20px 0}.stat-label{display:flex;justify-content:space-between;font-size:13px;margin-bottom:9px}.stat-label strong{font-size:16px;color:var(--green)}.stat-track{height:7px;background:#e9ece2;border-radius:5px;overflow:hidden}.stat-fill{height:100%;background:#8fa884;border-radius:5px}.negative strong{color:#a36d51}.negative .stat-fill{background:#ca9d78}.total{border-top:1px solid var(--line);margin-top:28px;padding-top:20px;font-size:13px;display:flex;justify-content:space-between;align-items:center;gap:10px}.total strong{font-size:27px;color:#a87a2d}.stat-note{font-size:11px;line-height:1.8;color:var(--muted);margin:14px 0 0}.alternatives{text-align:center;padding:25px;margin-top:22px;background:#f0f3e8;border:1px dashed #bdcbb2;border-radius:14px}.alternatives h2{font-size:36px;margin:7px 0 16px}.alternatives p{margin:7px 0;font-size:14px}.result-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:28px}.result-actions button{min-width:230px}.disclosure{text-align:center;font-size:11px;color:var(--muted);margin:26px 0 0}footer{max-width:1120px;margin:auto;border-top:1px solid var(--line);padding:24px 0;display:flex;justify-content:space-between;gap:15px;font-size:10px;color:#879186}footer span{font-family:Georgia,serif;font-style:italic}@keyframes arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes turn{to{transform:rotate(360deg)}}@media(max-width:650px){.site-header{padding:20px}.brand-sub{font-size:8px;letter-spacing:1px}.header-note{display:none}main{padding:30px 18px 44px}.hero{padding-top:0}.seal{width:130px;height:130px;margin:18px auto 30px}.intro{font-size:13px}.features{gap:8px}.features strong{font-size:12px}.features p{font-size:10px}.question-card{padding:26px 20px}.choices{grid-template-columns:1fr;gap:10px}.choice{min-height:62px;font-size:16px}.question-bottom{font-size:10px}.analysis{padding:28px 18px}.analysis h1{font-size:21px}.race-row{grid-template-columns:65px 1fr 45px;gap:10px}.result-grid{grid-template-columns:1fr}.stats{grid-row:1}.score-pill{gap:12px;padding:10px;font-size:12px}.score-pill strong{font-size:33px}.result-actions{flex-direction:column}.result-actions button{width:100%}footer{margin:0 20px;line-height:1.8}footer span{display:none}.result-top{padding:28px 12px}.result-caption{font-size:11px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* 結果が出てからキャラクターを登場させます。 */
.result-with-art{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center;gap:12px;padding:24px;background:#f5f4ec;overflow:hidden}
.result-character{margin:0;min-width:0;position:relative;animation:arrive .5s ease both}
.result-character img{display:block;width:100%;height:360px;object-fit:contain;mix-blend-mode:multiply}
.result-character figcaption,.candidate-style{display:inline-block;font-size:11px;letter-spacing:.08em;color:#647757;background:#e8eddf;padding:6px 12px;border-radius:20px}
.result-character figcaption{margin:8px 0 0}
.result-copy{min-width:0;padding:12px 0}
.result-with-art h1{font-size:clamp(48px,6.8vw,70px);white-space:nowrap}
.candidate-character{display:block;width:100%;height:230px;object-fit:contain;margin:14px auto 8px;mix-blend-mode:multiply}
@media(max-width:650px){.result-with-art{grid-template-columns:1fr;gap:4px;padding:22px 14px}.result-character img{height:240px}.result-character figcaption{margin-top:0}.result-copy{padding:8px 0}.result-with-art h1{font-size:clamp(48px,12vw,70px);margin:10px 0 16px}.candidate-character{height:250px}}
footer .yomogame-link{display:inline-block;font-size:13px;font-weight:bold;color:var(--green);text-decoration:none;padding:8px 0}footer .yomogame-link:hover,footer .tools-link:hover{text-decoration:underline}footer p{margin:6px 0 0}footer .tools-link{font-size:12px;color:var(--green);align-self:center;white-space:nowrap;padding:10px 0}@media(max-width:650px){footer{flex-direction:column;gap:4px}footer .tools-link{align-self:flex-start}}
.share-x{display:inline-flex;justify-content:center;align-items:center;gap:14px;min-height:56px;padding:15px 26px;border:1px solid #202523;border-radius:12px;background:#202523;color:white;font-size:16px;font-weight:bold;text-decoration:none;transition:background .18s,transform .18s}.share-x:hover{background:#3b443f;transform:translateY(-2px)}.result-share{margin-top:24px}.result-share p{font-size:11px;line-height:1.8;color:var(--muted);margin:10px 0 0}.result-actions .share-x{min-width:230px}@media(max-width:650px){.result-share .share-x{width:100%;max-width:330px}.result-actions .share-x{width:100%}}
