/* 女風16タイプ診断 / guide Ver.4.15.9 */
:root{font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;color:#33263a;background:#fcf8fb;--pink:#b33479;--muted:#746979;--line:#edd9e7;--shadow:0 10px 34px rgba(120,56,98,.07)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;line-height:1.7;-webkit-font-smoothing:antialiased}button,input,select{font:inherit}a{color:inherit}a:focus-visible,summary:focus-visible,select:focus-visible{outline:3px solid #a53b80;outline-offset:3px}a:hover{text-decoration-thickness:2px}img{max-width:100%}h1,h2,h3,h4,p{overflow-wrap:anywhere}.skip-link{position:absolute;left:12px;top:-80px;background:#fff;padding:12px;z-index:100}.skip-link:focus{top:12px}
.site-header{background:#fff;border-bottom:1px solid var(--line)}.header-inner{max-width:1120px;margin:auto;padding:11px 22px;min-height:68px;display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{font-size:17px;font-weight:900;color:#9e2d70;text-decoration:none;white-space:nowrap}.site-header nav{display:flex;align-items:center;gap:18px}.site-header nav a{font-size:13px;font-weight:800;text-decoration:none;color:#79536c;white-space:nowrap}.site-header nav .nav-cta{background:var(--pink);color:#fff;padding:10px 15px;border-radius:11px}
main{max-width:1120px;margin:auto;padding:24px 18px 60px}.hero{background:linear-gradient(110deg,#fff 10%,#fff0f8 75%,#f5edff);border:1px solid #eccce0;border-radius:26px;overflow:hidden;box-shadow:var(--shadow)}.hero-copy{padding:clamp(24px,4vw,48px) clamp(22px,4vw,46px) 22px}.eyebrow,.section-kicker{font-size:12px;font-weight:900;letter-spacing:.16em;color:#b43c80}.hero h1{font-size:clamp(33px,5.3vw,56px);line-height:1.23;letter-spacing:-.055em;margin:10px 0 17px}.hero h1 em{font-style:normal;color:#b33479}.hero-lead{font-size:clamp(16px,2vw,21px);line-height:1.8;margin:0 0 12px}.hero-caveat{font-size:12px;color:var(--muted);max-width:720px;margin:0 0 22px}.hero-cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:#b33479;color:#fff;text-decoration:none;font-size:14px;font-weight:900;padding:13px 19px;border-radius:12px;min-height:48px}.hero-art{width:100%;height:auto;display:block;aspect-ratio:1600/680;object-fit:contain}
.page-nav{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 0}.page-nav a,.type-jump a{display:inline-flex;align-items:center;justify-content:center;border:1px solid #e8cadd;border-radius:999px;background:#fff;color:#8d306b;padding:8px 14px;text-decoration:none;font-size:13px;font-weight:850;min-height:42px}.page-nav a:hover,.type-jump a:hover{background:#fff0f8}
.surface{margin-top:24px;background:#fff;border:1px solid var(--line);border-radius:24px;padding:clamp(20px,3.5vw,35px);box-shadow:var(--shadow)}.surface h2{font-size:clamp(22px,3.5vw,31px);line-height:1.38;letter-spacing:-.04em;margin:8px 0 12px}.section-desc{font-size:14px;color:var(--muted);margin:0 0 20px;line-height:1.85}.section-desc strong{color:#3b293d}
.decode-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:19px;align-items:stretch}.decode-steps{display:flex;flex-direction:column;gap:10px}.decode-step{display:grid;grid-template-columns:62px 62px minmax(0,1fr);gap:10px;align-items:center;padding:14px 12px;border-radius:15px;background:#fcf6fa;border:1px solid #f1e3ec}.step-index{font-size:12px;font-weight:850;color:#916c83}.step-letter{display:grid;place-items:center;width:60px;height:60px;border-radius:15px;font-size:34px;font-weight:950;background:#f8dbe9;color:#ac2b74}.step-style{background:#ece6fa;color:#7653a6}.decode-step strong{display:block;font-size:19px;line-height:1.4}.decode-step small{display:block;font-size:12px;color:var(--muted);line-height:1.6;margin-top:3px}.decode-picker{border:1px solid #ebd3e4;background:linear-gradient(135deg,#fff9fc,#f6f1fd);border-radius:18px;padding:17px;min-width:0}.decode-picker label{display:block;font-size:15px;font-weight:900;margin-bottom:8px}.decode-picker select{width:100%;background:#fff;border:2px solid #d8a3c3;border-radius:11px;min-height:48px;padding:10px 12px;font-size:16px;color:#37263c}.picker-help{font-size:11px;color:var(--muted);margin:8px 0 14px}.picker-preview{display:grid;grid-template-columns:44% minmax(0,1fr);gap:13px;align-items:center;background:#fff;border:1px solid #f0d9e8;border-radius:14px;padding:10px;min-width:0}.picker-preview img{width:100%;height:auto;aspect-ratio:960/681;object-fit:contain;border-radius:10px;background:#fbeaf4}.picker-text{min-width:0}.picker-code{display:inline-block;background:#b33479;color:#fff;border-radius:8px;padding:3px 10px;font-size:13px;font-weight:900}.picker-text h3{font-size:19px;line-height:1.4;margin:7px 0 3px}.picker-text p{font-size:12px;color:#82647a;margin:0 0 9px}.picker-text a{font-size:12px;color:#a62c75;font-weight:900}.read-note{background:#fff5fa;border-left:4px solid #d077a6;padding:15px 17px;border-radius:0 12px 12px 0;font-size:13px;color:#5b4b5e;line-height:1.8;margin:19px 0 0}
.core-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.core-card{border:1px solid #eed5e4;background:#fffafb;border-radius:18px;padding:20px;min-width:0;--accent:#b3357b;--soft:#fbe8f2}.core-I{--accent:#c24d87;--soft:#fff0f6}.core-H{--accent:#29885f;--soft:#eaf8f1}.core-E{--accent:#3579b9;--soft:#edf4ff}.core-top{display:flex;gap:14px;align-items:center;padding-bottom:12px;border-bottom:1px solid #eee2ea}.core-symbol{display:grid;place-items:center;flex:0 0 66px;height:66px;background:var(--soft);border-radius:17px;font-size:40px;font-weight:950;color:var(--accent)}.core-emoji{font-size:16px}.core-card h3{font-size:22px;line-height:1.4;margin:0}.core-sub{font-size:13px;color:var(--muted);margin:2px 0 0}.core-card dl{margin:12px 0 0}.core-card dl div{margin-top:12px}.core-card dt{font-size:12px;color:var(--accent);font-weight:900}.core-card dd{font-size:14px;margin:3px 0 0;line-height:1.75}.quote{font-weight:700;color:#6c3a5a}.core-note{font-size:12px;color:#756b76;background:var(--soft);padding:10px 12px;border-radius:10px;margin:16px 0 0}
.axis-card{border:1px solid #e8dbe8;border-radius:18px;padding:19px;margin-top:14px;background:#fcfaff}.axis-heading{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}.axis-num{font-size:11px;font-weight:900;color:#8254aa;background:#f0e6fa;padding:5px 10px;border-radius:999px}.axis-heading h3{font-size:19px;margin:0}.axis-hint{font-size:12px;color:#79558e;margin-left:auto;font-weight:900}.axis-pair{display:grid;grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr);gap:9px;align-items:stretch}.axis-side{background:#fff;border:1px solid #eadde9;border-radius:14px;padding:17px}.axis-badge{display:inline-grid;place-items:center;background:#8363b1;color:#fff;width:36px;height:36px;border-radius:10px;font-weight:900;font-size:20px}.axis-side h4{margin:8px 0 5px;font-size:18px}.axis-side p{font-size:14px;margin:0 0 11px}.axis-side small{display:block;font-size:12px;color:#765e7b;background:#faf4fd;border-radius:9px;padding:10px}.axis-versus{display:grid;place-items:center;font-size:25px;color:#957bb5}.score-note{margin-top:18px;background:#f7f3fc;border:1px solid #e6d9f2;border-radius:14px;padding:15px 18px}.score-note strong{color:#704a96}.score-note p{font-size:13px;margin:5px 0 0}
.type-jump{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 24px}.type-group{margin-top:30px;scroll-margin-top:90px}.type-group-head{display:flex;gap:9px;align-items:center;margin-bottom:12px;border-left:5px solid #bb397b;padding-left:12px}.type-group-I .type-group-head{border-color:#ce6a9b}.type-group-H .type-group-head{border-color:#32916b}.type-group-E .type-group-head{border-color:#4b82c8}.type-group-head h3{margin:0;font-size:21px}.type-group-head>span:last-child{font-size:11px;color:#98778c;font-weight:850;letter-spacing:.09em}.type-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.type-card{border:1px solid #eedbe8;border-radius:17px;background:#fff;overflow:hidden;display:grid;grid-template-columns:39% minmax(0,1fr);align-content:start;min-width:0;scroll-margin-top:100px}.type-card>img{width:100%;height:auto;aspect-ratio:960/681;object-fit:contain;background:#fff1f8;display:block}.type-card-main{padding:14px;min-width:0}.type-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.code-chip{display:inline-block;border-radius:8px;background:#b33479;color:#fff;font-size:12px;font-weight:900;padding:3px 9px}.type-I .code-chip{background:#c24586}.type-H .code-chip{background:#2c8b60}.type-E .code-chip{background:#397dc1}.axes-label{font-size:10.5px;color:#897488;font-weight:700}.type-card h4{font-size:18px;line-height:1.4;margin:8px 0 6px}.type-lead{font-size:13px;color:#625563;margin:0 0 12px;line-height:1.7}.type-card details{grid-column:1/-1;border-top:1px solid #f0e1ec;padding-top:10px}.type-card summary{list-style:none;cursor:pointer;color:#a72e75;font-size:12px;font-weight:900;display:flex;align-items:center;justify-content:space-between;gap:8px}.type-card summary::-webkit-details-marker{display:none}.type-card details[open] summary span{transform:rotate(45deg)}.type-details{font-size:12.5px;padding:10px 0 2px}.type-details p{margin:7px 0}.type-details strong{display:block;color:#a63c79;font-size:11px;margin-bottom:3px}.type-detail-link{display:inline-block;font-size:12px;font-weight:850;color:#a52f76;margin-top:10px;text-underline-offset:3px}
.how-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.how-card{background:#fff7fb;border:1px solid #efdbe8;border-radius:15px;padding:18px}.how-index{color:#b33479;font-size:25px;font-weight:950}.how-card h3{font-size:17px;line-height:1.45;margin:4px 0 8px}.how-card p{font-size:13px;margin:0;color:#655765}.role-boxes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin-top:19px}.role-boxes>div{background:#f7f3fa;border-radius:15px;padding:20px}.role-label{font-size:12px;font-weight:900;color:#a33d78}.role-boxes h3{font-size:17px;margin:4px 0 9px}.role-boxes p{font-size:14px;margin:0}.safety-note{font-size:12px;color:#756777;margin:19px 0 0;padding-left:12px;border-left:3px solid #d8b2ce}
.faq details{border-bottom:1px solid #eee0e9;padding:15px 0}.faq summary{cursor:pointer;font-size:15px;font-weight:850;padding-right:22px}.faq details p{font-size:14px;color:#655a68;margin:11px 0 0}.closing{margin-top:24px;background:linear-gradient(120deg,#fae5f1,#f3ebff);border:1px solid #e6c3da;border-radius:24px;padding:clamp(22px,4vw,35px);display:flex;justify-content:space-between;align-items:center;gap:20px}.closing h2{font-size:clamp(20px,2.8vw,27px);line-height:1.55;margin:7px 0}.closing p{font-size:13px;color:#675869;margin:0}.closing-actions{display:flex;flex-direction:column;gap:9px;min-width:230px}.closing-actions a{display:block;padding:13px 16px;text-align:center;text-decoration:none;border-radius:11px;font-size:13px;font-weight:900}.primary-link{background:#b33479;color:#fff}.secondary-link{background:#fff;color:#9e2f73;border:1px solid #dbb1cd}footer{max-width:1120px;margin:auto;padding:20px 18px 35px;display:flex;flex-wrap:wrap;gap:9px 16px;justify-content:center;font-size:11px;color:#827383}footer a{color:#9e3975}
@media(max-width:900px){.decode-layout{grid-template-columns:1fr}.core-grid{grid-template-columns:1fr 1fr}.type-grid{grid-template-columns:1fr}.type-card{grid-template-columns:34% minmax(0,1fr)}.closing{flex-direction:column;align-items:stretch}.closing-actions{min-width:0;flex-direction:row}.closing-actions a{flex:1}}
@media(max-width:640px){main{padding:12px 10px 40px}.header-inner{min-height:60px;padding:9px 12px}.brand{font-size:14px}.site-header nav{gap:9px}.site-header nav a{font-size:11px}.site-header nav .nav-cta{padding:8px 10px}.site-header nav a:nth-child(2){display:none}.hero{border-radius:19px}.hero-copy{padding:24px 19px 14px}.hero h1{font-size:35px}.hero-lead{font-size:16px}.hero-caveat{font-size:11px}.page-nav{gap:7px}.page-nav a,.type-jump a{font-size:11px;padding:7px 10px;min-height:37px}.surface{padding:20px 15px;margin-top:15px;border-radius:19px}.surface h2{font-size:22px}.section-desc{font-size:13px}.decode-step{grid-template-columns:54px 54px minmax(0,1fr);gap:8px;padding:10px 8px}.step-index{font-size:11px}.step-letter{width:53px;height:53px;font-size:31px}.decode-step strong{font-size:17px}.decode-step small{font-size:11px}.decode-picker{padding:13px}.picker-preview{grid-template-columns:42% minmax(0,1fr);gap:9px}.picker-text h3{font-size:17px}.picker-text p{font-size:11px}.core-grid{grid-template-columns:1fr}.core-card{padding:16px}.core-card h3{font-size:20px}.axis-pair{grid-template-columns:minmax(0,1fr) 17px minmax(0,1fr);gap:4px}.axis-card{padding:13px}.axis-side{padding:12px 10px}.axis-side h4{font-size:15px}.axis-side p{font-size:12px}.axis-side small{font-size:11px;padding:8px}.axis-versus{font-size:18px}.axis-hint{font-size:11px}.type-card{grid-template-columns:36% minmax(0,1fr)}.type-card-main{padding:12px}.type-card h4{font-size:16px}.type-lead{font-size:12px}.type-details{font-size:12px}.how-grid,.role-boxes{grid-template-columns:1fr}.how-card{padding:15px}.closing{padding:22px 17px}.closing-actions{flex-direction:column}}
@media(max-width:355px){.brand{font-size:12px}.site-header nav{gap:6px}.site-header nav a{font-size:10px}.decode-step{grid-template-columns:48px 48px minmax(0,1fr)}.step-letter{width:47px;height:47px;font-size:28px}.type-card{grid-template-columns:1fr}.type-card>img{max-width:100%;width:100%;height:auto}.type-card-main{padding:14px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
