/* 街の世界観を主役にした試作第2版。外部フォント・画像は使用しない。 */
:root{--paper:#fff9ee;--white:#fffefa;--ink:#203c35;--muted:#58665e;--green:#255c49;--line:#dedecb;--peach:#f0ad8e;--sage:#dfebd3;--yellow:#f4d97e}
body{background:var(--paper)}img{height:auto}
.town-scene .town-person{filter:drop-shadow(0 8px 7px #203c3526)}.resident-portrait img,.result-portrait img{filter:drop-shadow(0 8px 5px #264b3420)}
.prototype-strip{background:#203e33;color:#fff9ee;font-size:10px;letter-spacing:.09em;padding:6px 12px}.prototype-strip span{opacity:.8}
.header{max-width:1440px;padding:24px 5%;border-bottom:1px solid #d9decd}.brand{font-size:23px;letter-spacing:.015em}.brand-icon{background:transparent;color:var(--green);border:2px solid var(--green);border-radius:50%;width:47px;height:47px}.brand-icon svg{width:31px;height:31px}.brand small{letter-spacing:.18em;font-size:9px}.header nav{font-size:12px;gap:32px}.nav-start{background:var(--green);color:#fffefa;padding:12px 22px;box-shadow:0 3px 0 #143b2e}
.wrap{width:min(1200px,90%)}.hero{grid-template-columns:.85fr 1.25fr;gap:0;padding-top:60px;padding-bottom:72px;position:relative;min-height:650px}.hero-content{position:relative;z-index:2;padding-bottom:20px}.hero .eyebrow{font-size:11px;letter-spacing:.12em;margin-bottom:25px}.hero h1{font-family:var(--sans);font-weight:800;font-size:clamp(37px,4.2vw,58px);line-height:1.58;letter-spacing:.02em;margin-bottom:26px}.hero h1 .title-highlight{position:relative;display:inline-block;isolation:isolate}.title-highlight:after{content:"";position:absolute;inset:auto -6px 7px;height:15px;z-index:-1;background:#f4d97e;transform:rotate(-2deg);border-radius:50% 15% 40% 15%}.hero-copy{font-size:14px;line-height:2.15;max-width:420px}.hero .button{margin-top:7px;background:var(--green);box-shadow:0 5px 0 #173f30;padding:18px 30px;font-size:15px;gap:35px}.hero .button:hover{transform:translateY(-2px);box-shadow:0 7px 0 #173f30}.hero-meta{font-size:10px;margin-top:19px}.hero-welcome{display:inline-flex;align-items:center;gap:9px;background:#f6e8b8;border:1px solid #dccc8a;padding:5px 13px;border-radius:100px;font-size:10px;letter-spacing:.08em;margin-bottom:22px}.hero-welcome:before{content:"";width:7px;height:7px;background:#6a8252;border-radius:50%}.town-scene{position:relative;width:112%;margin-left:-3%;aspect-ratio:1.23;align-self:center;isolation:isolate}.town-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:-2}.town-person{position:absolute;filter:drop-shadow(0 7px 2px #203c3515);transition:transform .25s}.town-person.cat{width:25%;left:37%;bottom:6%;transform:rotate(-3deg)}.town-person.rabbit{width:21%;right:11%;bottom:18%;transform:rotate(3deg)}.town-person.beaver{width:22%;left:8%;bottom:15%}.town-person:hover{transform:translateY(-7px)}.town-caption{position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:.12em;white-space:nowrap;color:var(--muted)}.town-stamp{position:absolute;top:1%;right:4%;width:96px;height:96px;background:#efb99a;color:#25483c;border:1px solid #c98d6f;border-radius:50%;display:flex;flex-direction:column;justify-content:center;text-align:center;font-size:10px;line-height:1.5;transform:rotate(12deg);box-shadow:inset 0 0 0 5px #f8d4b5}.town-stamp strong{font-family:Georgia,serif;font-size:33px;line-height:1.1}.town-sign{position:absolute;left:8%;top:9%;background:var(--white);padding:9px 15px;border:1px solid #bac8ad;border-radius:4px;box-shadow:3px 4px 0 #d8dfc6;transform:rotate(-6deg);font-size:11px;line-height:1.7}.town-sign span{font-size:9px;letter-spacing:.16em;display:block;color:var(--muted)}
.ticker{background:#f1e5b7;border-top:1px solid #ddd09d;border-bottom:1px solid #ddd09d;gap:65px;padding:20px 15px;position:relative;font-size:12px}.ticker span:before{color:#527350}.section{padding:85px 0}.section-head{align-items:center;margin-bottom:34px}.section-head h2{font-family:var(--sans);font-size:32px;font-weight:800;letter-spacing:.02em}.section-head .eyebrow{font-size:10px;letter-spacing:.2em;color:#66775a}.section-head a{background:#fffefa;border:1px solid #aebba3;border-radius:100px;padding:11px 20px;text-decoration:none;font-size:12px;min-height:44px}.section-head p{font-size:13px}.intro-card{border:0;background:#f1edda;border-radius:12px;padding:27px 24px;min-height:240px;box-shadow:none}.intro-card:nth-child(2){background:#ebddd2}.intro-card:nth-child(3){background:#deeadc}.intro-card:nth-child(4){background:#dce8e7}.intro-card .number{font-family:Georgia,serif;font-size:32px;color:#465c45;font-style:italic}.intro-card h3{font-size:16px}.intro-card p{font-size:12px}.intro-card .axis-poles{font-size:10px;color:#344e3e;border-top:1px solid #8b9d823f;padding-top:13px;line-height:1.9}.residents{background:#e7edda;border-top:0;border-bottom:0;position:relative}.residents:before{content:"";height:14px;background:radial-gradient(ellipse at 50% 100%,#e7edda 68%,transparent 72%) 0 0/40px 16px;position:absolute;left:0;right:0;top:-13px}.residents .eyebrow{color:#52684a}.type-grid{gap:23px}.type-card{padding:0 0 24px;border:1px solid #d2d8c2;border-radius:90px 90px 13px 13px;background:var(--white);overflow:hidden;text-align:center;position:relative;box-shadow:0 5px 0 #71835c12}.resident-portrait{background:#f3dfc1;position:relative;margin:10px 10px 17px;border-radius:80px 80px 8px 8px;overflow:hidden}.resident-portrait:before{content:"";position:absolute;width:70%;height:45%;bottom:-15%;left:15%;background:#d3bd9033;border-radius:50%}.resident-portrait img{position:relative;width:90%;max-width:210px;margin:0 auto;transition:transform .3s}.type-card:nth-child(4n+2) .resident-portrait{background:#dfe6c9}.type-card:nth-child(4n+3) .resident-portrait{background:#ead4c9}.type-card:nth-child(4n+4) .resident-portrait{background:#d5e5e2}.resident-no{position:absolute;top:14px;left:50%;transform:translateX(-50%);font-size:9px;color:#526148;letter-spacing:.16em;z-index:1}.type-card img{padding-top:18px}.type-card small{font-size:9px;display:block;margin:0 12px;letter-spacing:.03em}.type-card h3{font-size:16px;font-weight:800;letter-spacing:.025em;margin:7px 12px 9px}.type-card p{font-size:11px;margin:0 14px}.resident-arrow{display:grid;place-items:center;margin:17px auto 0;width:30px;height:30px;border:1px solid #b8c8ac;border-radius:50%;font-size:13px;color:var(--green)}.type-card:hover{transform:translateY(-6px);border-color:#759568;box-shadow:0 10px 0 #71835c12}.type-card:hover img{transform:rotate(-4deg) scale(1.025)}.soft-panel{background:#285b48;color:#fff9ee;padding:38px 42px;border-radius:16px;position:relative;overflow:hidden}.soft-panel:after{content:"✳";position:absolute;right:10px;bottom:-80px;color:#466e51;font-size:250px;line-height:1;pointer-events:none;opacity:.5}.soft-panel>div,.soft-panel>.button{z-index:1;position:relative}.soft-panel h2{font-family:var(--sans);font-weight:700;font-size:27px}.soft-panel p{color:#e3ead8}.soft-panel .button{background:#f4d97e;color:#254b38;border-color:#e3c66c;white-space:nowrap}.qa-note{background:#fffefa;border-style:dashed}.footer{max-width:1440px;background:#f0eedf;padding-top:50px}.footer .brand{font-size:21px}.page-top .eyebrow{color:#5b7757}.page-top h1{font-family:var(--sans);font-weight:800;letter-spacing:.02em}.page-top{padding-top:55px}.paper{border-radius:18px;border-color:#d9dfcc;box-shadow:0 6px 0 #203c3506}.check-label{background:#eff4e6;border-color:#b5c7a6;border-radius:11px}.quiz-card{border-radius:20px;box-shadow:0 7px 0 #203c3509;border-color:#d4ddc9;padding:36px 42px}.quiz-aside h1{font-size:17px;font-weight:800}.quiz-aside ol{border-left:2px solid #d4ddc9;padding-left:17px}.quiz-aside li{border-bottom:0}.quiz-aside li.active{position:relative}.quiz-aside li.active:before{content:"";width:10px;height:10px;background:#376846;position:absolute;left:-23px;top:21px;border-radius:50%;box-shadow:0 0 0 5px var(--paper)}.quiz-card .progress-row{font-weight:600;letter-spacing:.07em}.quiz-card legend{font-size:24px}.answer-option{border-radius:10px;padding:15px 18px;border-color:#bdcbb5}.answer-option:has(input:checked){background:#e9f1d9;box-shadow:inset 0 0 0 1px #46704f,3px 3px 0 #46704f12}.question-buttons .button{border-radius:10px}.result-top{background:#e8edda;border-radius:24px;margin-top:35px;padding:38px 45px;position:relative;overflow:hidden}.result-top:after{content:"";position:absolute;right:-50px;bottom:-100px;width:410px;height:410px;border:1px dashed #a9bb98;border-radius:50%;pointer-events:none}.result-top h1{font-family:var(--sans);font-weight:800;font-size:42px;letter-spacing:.02em}.result-portrait{background:#f3d3ab;border-radius:50% 50% 12px 12px;position:relative;z-index:1;border:6px solid #fff9ee;transform:rotate(3deg);box-shadow:6px 7px 0 #7f93611a}.result-portrait small{font-size:9px;padding-bottom:7px}.result-layout{padding-top:30px;gap:45px}.result-toc{background:#f0f0e3;border-radius:12px;padding:22px 19px}.result-toc a{border-bottom:1px solid #dce1cf;font-size:11px;line-height:1.9}.result-toc a:last-child{border:0}.reading-section{padding:35px 0 16px}.reading-section h2{font-weight:800;letter-spacing:.01em;font-size:24px}.section-number{color:#4f6d43!important}.axis-card{border-radius:14px;box-shadow:0 4px 0 #203c3505}.action-card{background:#f3e7b9;border-color:#ddd09c;border-radius:13px}.action-card:nth-child(2){background:#e5edd7;border-color:#cad5b9}.action-card:nth-child(3){background:#e1eae8;border-color:#c5d4cd}.action-card>span{font-size:12px}.badge{background:#fffefa;border-color:#b3c5a6;padding:4px 12px}.badge.warm{background:#f8e6cc;border-color:#dfbf92}.share-preview{background:#e3ebd5;border-radius:15px;padding:16px}
@media(min-width:1450px){.hero{min-height:700px;padding-top:70px;padding-bottom:85px}}
@media(max-width:1000px){.hero{grid-template-columns:1fr 1.15fr;min-height:560px;padding-top:45px;padding-bottom:55px}.hero h1{font-size:42px}.town-scene{width:111%;margin-left:-6%}.hero-copy{font-size:13px}.hero .button{padding:16px 22px;font-size:13px;gap:20px}.town-stamp{width:75px;height:75px;font-size:8px}.town-stamp strong{font-size:25px}.town-sign{font-size:9px;padding:6px 11px}.town-sign span{font-size:7px}.intro-card{padding:23px 20px}.section-head h2{font-size:28px}.result-top h1{font-size:35px}}
@media(max-width:650px){.header{padding:17px 5%}.brand{font-size:18px}.brand-icon{width:38px;height:38px}.brand-icon svg{width:25px;height:25px}.brand small{font-size:8px}.header nav{gap:0}.nav-start{font-size:10px;padding:10px 12px;min-height:43px}.prototype-strip{font-size:8px;letter-spacing:.02em}.hero{display:flex;flex-direction:column;gap:0;padding-top:30px;padding-bottom:35px;min-height:0;text-align:center}.hero-content{padding-bottom:0;width:100%}.hero-welcome{font-size:9px;margin-bottom:18px;padding:5px 11px}.hero .eyebrow{justify-content:center;font-size:9px;margin-bottom:17px}.hero h1{font-size:36px;line-height:1.6;margin-bottom:18px}.hero-copy{font-size:13px;max-width:100%;line-height:2}.hero .button{font-size:14px;padding:16px 25px;margin-top:4px;gap:27px}.hero-meta{font-size:9px;margin-top:15px}.town-scene{width:110%;margin:10px -5% 0;aspect-ratio:1.23}.town-caption{font-size:8px;bottom:-3px}.town-stamp{right:7%;top:3%;width:67px;height:67px;font-size:7px}.town-stamp strong{font-size:23px}.town-sign{top:8%;left:10%;font-size:9px}.town-sign span{font-size:7px}.ticker{gap:14px;font-size:9px;padding:16px 5px}.section{padding:52px 0}.section-head{margin-bottom:25px}.section-head h2{font-size:25px}.section-head p{font-size:12px}.section-head a{font-size:11px;padding:8px 15px}.intro-card{padding:19px 15px;min-height:220px;border-radius:10px}.intro-card h3{font-size:14px}.intro-card p{font-size:11px}.intro-card .number{font-size:27px}.intro-card .axis-poles{font-size:10px}.type-grid{gap:15px 12px}.type-card{border-radius:70px 70px 11px 11px;padding-bottom:18px}.resident-portrait{margin:7px 7px 13px;border-radius:65px 65px 7px 7px}.resident-no{font-size:7px;top:11px;letter-spacing:.1em}.resident-portrait img{padding-top:20px;width:100%}.type-card small{font-size:8px;margin:0 9px}.type-card h3{font-size:14px;line-height:1.6;margin:6px 8px}.type-card p{font-size:10px;margin:0 9px;line-height:1.8}.resident-arrow{width:26px;height:26px;margin-top:13px;font-size:12px}.soft-panel{padding:27px 25px;border-radius:14px;text-align:left}.soft-panel h2{font-size:23px}.soft-panel p{font-size:12px}.soft-panel .button{margin-top:22px;font-size:12px}.soft-panel:after{font-size:180px;bottom:-55px}.footer{padding-top:35px}.page-top{padding-top:35px}.page-top h1{font-size:30px}.paper{padding:25px 20px;border-radius:15px}.quiz-card{padding:25px 20px;border-radius:16px}.quiz-card legend{font-size:21px}.quiz-aside h1{font-size:15px}.answer-option{padding:14px 15px;font-size:15px}.result-top{margin-top:20px;padding:25px 23px 28px;border-radius:18px;gap:26px}.result-top h1{font-size:30px}.result-portrait{width:200px;border-width:5px}.result-top:after{right:-75px;top:35px;width:340px;height:340px}.result-layout{padding-top:22px}.result-toc{padding:17px 18px;border:0;gap:4px 15px}.result-toc a{border-bottom:0;font-size:10px}.reading-section h2{font-size:22px}.share-preview{padding:9px}}
@media(max-width:360px){.hero h1{font-size:31px}.hero-copy{font-size:12px}.hero .button{font-size:13px;padding:15px 20px}.hero-meta{font-size:8px}.hero-welcome{font-size:8px}.brand{font-size:16px}.brand-icon{width:32px;height:32px}.brand-icon svg{width:22px;height:22px}.header{gap:7px}.nav-start{padding:9px 10px;font-size:9px}.ticker{font-size:8px;gap:9px}.section-head h2{font-size:23px}.town-stamp{width:58px;height:58px;right:7%;font-size:6px}.town-stamp strong{font-size:20px}.town-sign{padding:5px 8px;font-size:8px}.intro-card{min-height:0}.type-card h3{font-size:12px}.type-card p{font-size:9px}.result-top{padding:23px 18px}.result-top h1{font-size:27px}}
@media(prefers-reduced-motion:reduce){.town-person,.hero .button,.resident-portrait img,.type-card{transition:none!important}.town-person:hover,.type-card:hover,.type-card:hover img{transform:none!important}}