:root { --ink:#14352f; --green:#1f5b4d; --deep:#123e35; --mint:#dcebe5; --cream:#f7f4ec; --gold:#c79c55; --paper:#fffef9; }
* { box-sizing:border-box; }
html { background:var(--cream); }
body { margin:0; color:var(--ink); font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif; background:radial-gradient(circle at 12% 8%,rgba(255,255,255,.9),transparent 30%),var(--cream); }
button { font:inherit; }
.shell { min-height:100vh; position:relative; overflow:hidden; }
.shell:before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.22; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E"); }
.brand { display:flex; align-items:center; gap:12px; letter-spacing:.18em; font-family:Arial,sans-serif; font-size:12px; font-weight:700; position:relative; z-index:2; }
.brand-mark { width:40px; height:40px; display:grid; place-items:center; background:var(--green); color:white; border-radius:50% 50% 46% 54%; font:20px serif; box-shadow:inset 0 0 0 1px rgba(255,255,255,.25); }
.landing > header { position:absolute; top:42px; left:6vw; }
.hero { min-height:76vh; padding:150px 8vw 90px; display:flex; flex-direction:column; justify-content:center; position:relative; }
.hero:after { content:"信"; position:absolute; right:6vw; top:7vh; font-size:min(36vw,500px); line-height:1; color:rgba(31,91,77,.045); font-weight:700; }
.eyebrow { width:max-content; color:var(--green); font-family:Arial,"Hiragino Kaku Gothic ProN",sans-serif; font-size:13px; letter-spacing:.18em; border-bottom:1px solid var(--gold); padding:0 2px 8px; font-weight:700; }
.hero h1 { font-size:clamp(42px,6vw,86px); line-height:1.28; letter-spacing:.04em; font-weight:500; margin:25px 0 22px; position:relative; z-index:1; }
.hero h1 em { font-style:normal; color:var(--green); background:linear-gradient(transparent 78%,rgba(199,156,85,.28) 0); }
.lead { font-family:"Hiragino Kaku Gothic ProN",sans-serif; font-size:clamp(14px,1.5vw,18px); line-height:2; color:#4e625d; margin:0 0 34px; }
.primary { border:0; background:var(--green); color:white; width:min(320px,100%); padding:19px 25px; display:flex; justify-content:center; gap:42px; cursor:pointer; border-radius:2px; box-shadow:0 12px 30px rgba(20,53,47,.2); transition:.2s; }
.primary:hover { transform:translateY(-2px); background:var(--deep); }
.primary span { font-family:Arial,sans-serif; }
.note { font:11px/1.6 "Hiragino Kaku Gothic ProN",sans-serif; color:#7d8b87; margin:12px 0 0 22px; }
.philosophy { background:var(--deep); color:white; min-height:340px; padding:75px 10vw; position:relative; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:10vw; }
.quote-mark { position:absolute; font-size:150px; color:rgba(255,255,255,.07); top:16px; left:7vw; }
.philosophy blockquote { font-size:clamp(25px,3vw,42px); line-height:1.7; margin:0; letter-spacing:.08em; }
.philosophy p { font:14px/2.2 "Hiragino Kaku Gothic ProN",sans-serif; color:#cbd9d5; }
.signature { color:#d9bd87; font-size:12px; letter-spacing:.15em; margin-top:22px; }
.quiz-page { padding:35px max(5vw,25px) 80px; }
.quiz-header { max-width:980px; margin:auto; display:flex; justify-content:space-between; align-items:center; }
.count { font:13px Arial,sans-serif; letter-spacing:.18em; color:#80908c; }.count b { font-size:22px; color:var(--green); }
.progress { height:2px; background:#d8ded9; max-width:980px; margin:26px auto 0; }.progress i { height:100%; display:block; background:var(--gold); transition:width .35s; }
.question-card { max-width:800px; margin:65px auto 35px; }
.scene { display:flex; align-items:center; gap:14px; font:12px "Hiragino Kaku Gothic ProN",sans-serif; letter-spacing:.12em; }.scene span { background:var(--green); color:white; padding:7px 15px; }.scene small { color:#6e817c; }
.question-card h1 { font-weight:500; font-size:clamp(27px,4vw,42px); line-height:1.55; margin:24px 0 38px; }
.question-guide { margin:24px 0 -10px; color:#6e817c; font:12px/1.8 "Hiragino Kaku Gothic ProN",sans-serif; }
.choices { display:grid; gap:12px; }.choices button { border:1px solid #d9ded8; background:rgba(255,254,249,.75); color:var(--ink); padding:18px 20px; display:grid; grid-template-columns:42px 1fr 30px; gap:14px; text-align:left; align-items:center; cursor:pointer; transition:.2s; font-family:"Hiragino Kaku Gothic ProN",sans-serif; font-size:14px; line-height:1.65; }.choices button:hover { border-color:var(--green); background:white; transform:translateX(5px); box-shadow:0 8px 24px rgba(20,53,47,.08); }.choices button b { font-family:Arial,sans-serif; font-weight:400; color:var(--gold); }.choice-letter { width:32px; height:32px; border:1px solid #b8c6c1; border-radius:50%; display:grid; place-items:center; font:12px Arial,sans-serif; }
.back { border:0; background:none; color:#7b8985; margin-top:24px; cursor:pointer; font:12px "Hiragino Kaku Gothic ProN",sans-serif; }
.choice-number { width:32px; height:32px; border:1px solid #b8c6c1; border-radius:50%; display:grid; place-items:center; font:12px Arial,sans-serif; }
.takeuchi-note { max-width:800px; margin:35px auto 0; padding:20px 25px; border-left:2px solid var(--gold); background:rgba(255,255,255,.45); }.takeuchi-note span { color:var(--gold); font:700 11px "Hiragino Kaku Gothic ProN",sans-serif; letter-spacing:.13em; }.takeuchi-note p { margin:8px 0 0; font:13px/1.8 "Hiragino Kaku Gothic ProN",sans-serif; color:#5c6e69; }
.result-page { padding:35px 5vw 60px; }.result-page > .brand { max-width:980px; margin:auto; }.result-card { max-width:880px; margin:50px auto; text-align:center; }.result-card > .eyebrow { margin:auto; }.score-ring { --score:0deg; width:180px; height:180px; margin:35px auto 25px; border-radius:50%; display:grid; place-items:center; background:conic-gradient(var(--gold) var(--score),#dce5e1 0); position:relative; }.score-ring:before { content:""; position:absolute; inset:9px; border-radius:50%; background:var(--cream); }.score-ring div { position:relative; display:flex; align-items:baseline; }.score-ring strong { font:64px Georgia,serif; color:var(--green); }.score-ring span { font-size:15px; margin-left:5px; }.result-card > h1 { font-size:clamp(30px,5vw,48px); font-weight:500; margin:12px 0; }.result-message { color:#536762; font:14px/2 "Hiragino Kaku Gothic ProN",sans-serif; max-width:620px; margin:0 auto 38px; }
.insight-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; text-align:left; }.insight-grid article { background:var(--paper); border:1px solid #dce3df; padding:25px; display:flex; gap:18px; }.insight-icon { flex:0 0 38px; width:38px; height:38px; display:grid; place-items:center; border-radius:50%; background:var(--green); color:white; }.insight-icon.growth { background:var(--gold); }.insight-grid small { color:#8a9994; font:11px "Hiragino Kaku Gothic ProN",sans-serif; }.insight-grid h2 { font-size:20px; margin:5px 0; }.insight-grid p { font:12px/1.7 "Hiragino Kaku Gothic ProN",sans-serif; color:#687a75; margin:0; }
.categories { background:white; border:1px solid #e1e5e1; padding:28px 35px; margin-top:18px; text-align:left; }.categories h2 { font-size:16px; margin:0 0 22px; }.bar-row { display:grid; grid-template-columns:130px 1fr 35px; gap:14px; align-items:center; margin:13px 0; font:12px "Hiragino Kaku Gothic ProN",sans-serif; }.bar { height:5px; background:#e5ebe8; }.bar i { display:block; height:100%; background:linear-gradient(90deg,var(--green),#5f927f); }.bar-row strong { font:13px Arial,sans-serif; color:var(--green); }
.action-box { background:var(--deep); color:white; text-align:left; padding:35px 40px; margin-top:18px; position:relative; overflow:hidden; }.action-box:after { content:"一"; position:absolute; right:10px; top:-60px; font-size:180px; color:rgba(255,255,255,.04); }.action-box span { color:#d9bd87; font:700 11px "Hiragino Kaku Gothic ProN",sans-serif; letter-spacing:.14em; }.action-box h2 { font-size:23px; line-height:1.6; margin:10px 0; }.action-box p { font:12px/1.9 "Hiragino Kaku Gothic ProN",sans-serif; color:#cbd9d5; margin:0; }.secondary { background:none; border:1px solid #aab8b3; padding:14px 35px; color:var(--green); margin-top:25px; cursor:pointer; }.result-page footer { text-align:center; color:#7c8b87; font-size:12px; letter-spacing:.08em; }
@media(max-width:700px){.landing>header{top:25px;left:24px}.hero{min-height:auto;padding:130px 24px 70px}.hero h1{font-size:40px}.lead br{display:none}.philosophy{grid-template-columns:1fr;padding:60px 25px;gap:20px}.philosophy blockquote{font-size:27px}.quiz-page{padding:25px 18px 60px}.question-card{margin-top:45px}.choices button{padding:15px 12px;grid-template-columns:34px 1fr 20px}.insight-grid{grid-template-columns:1fr}.bar-row{grid-template-columns:95px 1fr 28px}.categories{padding:25px 18px}.action-box{padding:28px 22px}.result-page{padding:25px 18px 50px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}