@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Noto+Sans+JP:wght@400;500;600;700;800&family=Zen+Old+Mincho:wght@400;500;600;700&display=swap');

:root{
  --ink:#102638;
  --paper:#eef2f3;
  --paper-strong:#e4ebed;
  --white:#fbfdfd;
  --teal:#0f7270;
  --teal-pale:#dceeed;
  --coral:#b9513c;
  --gold:#d6a439;
  --graphite:#26333b;
  --muted:#586871;
  --line:#bfcccf;
  --line-dark:#7c9199;
  --dark:#102638;
  --vermilion:#0f7270;
  --vermilion-soft:#b9513c;
  --serif:"Zen Old Mincho","Noto Serif CJK JP","Yu Mincho",serif;
  --sans:"Noto Sans JP","Noto Sans CJK JP","Yu Gothic",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --focus:3px solid var(--gold);
}

html{background:var(--paper)}
body{background:var(--paper);color:var(--graphite);font-family:var(--sans);font-size:16px;line-height:1.78}
body::before{content:"";position:fixed;z-index:-1;inset:0;pointer-events:none;opacity:.28;background-image:radial-gradient(rgba(16,38,56,.09) .55px,transparent .55px);background-size:5px 5px}
.wrap{width:min(100% - 48px,1240px)}
:focus-visible{outline:var(--focus);outline-offset:4px}

header{height:76px;border-bottom:1px solid rgba(124,145,153,.55);background:rgba(238,242,243,.94);backdrop-filter:blur(14px)}
.logo{color:var(--ink);font-family:var(--serif);font-size:1.23rem;font-weight:700;letter-spacing:-.04em}
.logo-mark{width:32px;height:32px;border:1px solid var(--teal);border-radius:0;color:var(--teal);font-family:var(--serif);font-size:14px}
.nav{gap:clamp(16px,2.2vw,30px);font-size:14px;font-weight:700;color:var(--ink)}
.nav a{text-decoration:none;border-bottom:1px solid transparent;padding-bottom:4px}
.nav a:hover{border-color:var(--teal);text-decoration:none}
.menu{color:var(--ink)}

.eyebrow,.guide-section-no,.guide-purchase-inner .eyebrow,.home-guide-card>span:not(.home-guide-icon),.home-buy-card>div:last-child>span,.related-card span{color:var(--teal);font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:.12em}
h1,h2,h3,.section-head h2,.guide-section h2,.guide-answer-head h2,.faq-section h2,.source-section h2,.related-section h2,.trust-main h2{color:var(--ink);font-family:var(--serif);font-weight:600;letter-spacing:-.045em}
p{color:var(--graphite)}

.hero{grid-template-columns:minmax(0,.93fr) minmax(420px,1.07fr);min-height:0;padding:clamp(58px,8vw,104px) 0;border-bottom:1px solid var(--line);overflow:visible}
.hero-copy{padding:0 clamp(28px,4vw,64px) 0 0}
.hero h1{font-size:clamp(3rem,5.5vw,5.2rem);line-height:1.1;letter-spacing:-.07em;margin:16px 0 24px}
.hero-lead{max-width:590px;color:var(--muted);font-size:1.08rem;line-height:1.95}
.hero-art{height:auto;min-height:470px;border:1px solid rgba(16,38,56,.25);background:var(--paper-strong);box-shadow:18px 20px 0 rgba(16,38,56,.08)}
.hero-art img{min-height:470px}
.entry-grid{max-width:560px;gap:1px;background:var(--line)}
.entry{min-height:58px;border:0;background:var(--white);color:var(--ink);font-weight:700}
.entry span{color:var(--teal);font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:.08em}
.entry:hover{background:var(--ink);color:#fff}
.entry:hover span{color:#a9d9d6}
.pr{color:var(--muted);font-size:14px}

section{padding:clamp(68px,8vw,106px) 0}
.section-head{align-items:end;gap:clamp(28px,5vw,70px);margin-bottom:38px}
.section-head h2{font-size:clamp(2.1rem,3.7vw,3.55rem);line-height:1.2}
.section-head p{max-width:520px;color:var(--muted);line-height:1.8}
.use,.materials,.check,.home-guides{background:var(--white)}
.sizes,.diagnose,.related-section{background:var(--paper)}
.roles,.typeface,.home-buy{background:var(--ink)}
.roles .section-head h2,.typeface .section-head h2,.home-buy .section-head h2,.roles h3,.typeface h3,.home-buy h3{color:#fff}
.roles .section-head p,.typeface .section-head p,.home-buy .section-head p,.role-card p,.type-lead p,.type-card p,.home-buy-card p{color:#c8d4d8}

.use-grid,.material-grid,.shop-grid,.guide-card-grid,.related-grid{gap:1px;background:var(--line)}
.use-card,.material,.shop,.home-guide-card,.related-card{border:0;background:var(--white)}
.use-card:hover,.use-card.is-selected,.home-guide-card:hover,.related-card:hover{background:var(--teal-pale);border-color:transparent}
.purpose-img,.material-visual,.home-guide-icon{border-color:var(--line)}
.use-card h3,.material h3,.shop h3,.home-guide-card strong,.related-card strong{color:var(--ink);font-family:var(--serif);font-weight:600}
.use-card p,.material p,.shop p,.home-guide-card p{color:var(--muted)}
.card-arrow,.home-guide-card em,.related-card em{color:var(--teal)}

.role-grid{gap:1px;background:var(--line-dark)}
.role-card{background:var(--ink)}
.role-note{color:#b8c7cc}
.seal-shape{border-radius:0;box-shadow:7px 8px 0 rgba(0,0,0,.18)}
.seal-shape.round,.seal-shape.bank{border-radius:0}

.size-visual,.guide-visual-board,.finish-visual{border:1px solid var(--line-dark);background:var(--paper-strong);box-shadow:10px 12px 0 rgba(16,38,56,.05)}
.circle,.guide-size-circle{border-color:var(--teal);background:rgba(19,122,120,.07)}
.guide-size-ratio{border-color:var(--line)}

.material{padding:16px}
.material-visual{background:var(--paper-strong)}
.material dt{color:var(--teal)}
.material dd{color:var(--graphite)}
.type-grid{gap:1px;background:var(--line-dark)}
.type-lead,.type-card{border:0;background:#163247}
.imprint{background:var(--paper)}
.imprint span{border-color:var(--teal);color:var(--teal);border-radius:0}
.imprint.round span,.imprint.soft span{border-radius:0}

.diag-box{border:1px solid var(--line-dark);background:var(--white);box-shadow:10px 12px 0 rgba(16,38,56,.05)}
.diag-btn{border:1px solid var(--ink);background:transparent;color:var(--ink)}
.diag-btn:hover,.diag-btn[aria-pressed=true]{background:var(--ink);color:#fff}
.merchant-cta,.home-buy-actions .merchant-cta,.guide-purchase-inner .merchant-cta,.guide-final-cta .merchant-cta{border:1px solid var(--ink);border-radius:0;background:var(--ink);color:#fff;font-weight:800;box-shadow:none}
.merchant-cta:hover,.home-buy-actions .merchant-cta:hover,.guide-purchase-inner .merchant-cta:hover,.guide-final-cta .merchant-cta:hover{border-color:var(--teal);background:var(--teal);color:#fff}

.shops{background:var(--paper-strong)}
.shop{border-top:2px solid var(--line-dark);min-height:220px}
.shop:nth-child(2),.shop:nth-child(3),.shop:nth-child(4){border-color:var(--teal)}
.check-grid{gap:1px;background:var(--line)}
.check-item{border:0;background:var(--white)}
.check-mark{border-color:var(--teal);border-radius:0;color:var(--teal)}

.home-guide-card{border-top:2px solid var(--line-dark)}
.home-guide-card:nth-child(2),.home-guide-card:nth-child(3),.home-guide-card:nth-child(4),.home-guide-card:nth-child(5){border-top-color:var(--teal)}
.home-guide-icon{background:var(--paper);color:var(--teal)}
.home-buy-grid{gap:1px;background:var(--line-dark)}
.home-buy-card{border:0;background:#163247}
.home-buy-icon{border-color:var(--teal);color:#a9d9d6}
.home-buy-card>div:last-child>span{color:#a9d9d6}
.home-buy-actions>a:not(.merchant-cta){color:#e8f0f2}

.guide-page{background:var(--paper)}
.guide-header{position:sticky;top:0;z-index:40;background:rgba(238,242,243,.94);backdrop-filter:blur(14px);border-bottom:1px solid rgba(124,145,153,.55)}
.breadcrumb{color:var(--muted);font-family:var(--mono);font-size:14px}
.guide-hero{padding-top:clamp(48px,7vw,88px);padding-bottom:clamp(58px,7vw,96px)}
.guide-hero-with-visual{grid-template-columns:minmax(0,1.06fr) minmax(360px,.94fr);gap:clamp(38px,5vw,72px)}
.guide-hero h1{font-size:clamp(2.8rem,5.2vw,5rem);line-height:1.12;letter-spacing:-.065em}
.guide-lead{color:var(--muted);font-size:1.08rem;line-height:1.95}
.guide-hero-visual img{border:1px solid var(--line-dark);background:var(--paper-strong);box-shadow:14px 16px 0 rgba(16,38,56,.07)}
.guide-hero-visual figcaption{color:var(--muted);font-family:var(--mono);font-size:14px}

.guide-answer{background:var(--ink)}
.guide-answer-head span{color:#a9d9d6;font-family:var(--mono);font-size:14px}
.guide-answer-head h2,.guide-point h2{color:#fff}
.guide-points{background:var(--line-dark)}
.guide-point{background:var(--ink)}
.guide-point>.semantic-icon{color:#a9d9d6}
.guide-point-no{border-color:#6f8c97;border-radius:0;color:#a9d9d6;font-family:var(--mono)}
.guide-point p{color:#c8d4d8}

.guide-purchase-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper-strong);color:var(--ink)}
.guide-purchase-inner .eyebrow{color:var(--teal)}
.guide-purchase-inner strong{color:var(--ink)}
.guide-layout{grid-template-columns:minmax(0,1fr) 310px;gap:clamp(42px,6vw,76px)}
.guide-section{border-color:var(--line)}
.guide-section-label{color:var(--teal)}
.guide-section>p{color:var(--graphite)}
.guide-note{border-left:3px solid var(--teal);background:var(--white)}
.guide-note strong{color:var(--teal)}
.side-card{border:1px solid var(--line-dark);background:var(--white)}
.side-card p{color:var(--muted)}
.side-card>a:not(.merchant-cta){color:var(--teal)}
.merchant-card{border-top:3px solid var(--teal)}

.guide-visual-grid{gap:1px;border-color:var(--line);background:var(--line)}
.guide-visual-step{background:var(--white)}
.guide-visual-step .semantic-icon{color:var(--teal)}
.guide-visual-no{color:var(--muted);font-family:var(--mono)}
.guide-visual-step strong{color:var(--ink);font-family:var(--serif);font-weight:600}
.guide-visual-step small{color:var(--muted);font-size:14px}
.finish-grid{gap:1px;background:var(--line)}
.finish-card{border:0;background:var(--white)}

.guide-final-cta{background:var(--ink)}
.guide-final-cta h2{color:#fff}
.guide-final-cta p{color:#c8d4d8}
.guide-final-cta .eyebrow{color:#a9d9d6}
.faq-section{background:var(--white)}
.source-section{background:var(--paper-strong)}
.source-list li{border-color:var(--line)}
.source-list span{color:var(--muted);font-family:var(--mono);font-size:14px}
.related-card{border:1px solid var(--line);background:var(--white)}

.trust-page{background:var(--paper)}
.trust-hero h1{font-size:clamp(2.8rem,5vw,4.8rem);line-height:1.12;letter-spacing:-.06em}
.trust-hero p,.trust-main p,.trust-main li{color:var(--graphite)}
.trust-main section,.trust-meta,.trust-meta dt,.trust-meta dd{border-color:var(--line)}
.trust-meta dd{color:var(--muted)}

footer{border-top:1px solid #345064;background:var(--ink);color:#c8d4d8}
footer .logo{color:#fff}
.footer-links a{color:#e8f0f2}
.footer-note{color:#c8d4d8}

@media(max-width:980px){
  .hero{grid-template-columns:minmax(0,1fr) minmax(340px,.9fr)}
  .guide-hero-with-visual{grid-template-columns:minmax(0,1fr) 360px}
  .guide-layout{grid-template-columns:minmax(0,1fr)}
}

@media(max-width:800px){
  .wrap{width:min(100% - 28px,1240px)}
  header{height:66px}
  .hero{display:flex;flex-direction:column-reverse;padding:0 0 54px}
  .hero-art{width:100%;min-height:300px;height:340px;box-shadow:none;border-right:0;border-left:0}
  .hero-art img{min-height:340px}
  .hero-copy{padding:42px 0 0}
  .hero h1{font-size:clamp(2.45rem,11vw,3.45rem)}
  .entry-grid{max-width:none}
  section{padding:64px 0}
  .guide-hero{padding-top:44px;padding-bottom:54px}
  .guide-hero-with-visual{grid-template-columns:minmax(0,1fr)}
  .guide-hero h1{font-size:clamp(2.35rem,10vw,3.45rem)}
  .guide-hero-visual img{box-shadow:8px 9px 0 rgba(16,38,56,.06)}
  .guide-answer-head h2{font-size:2rem}
  .guide-points{grid-template-columns:minmax(0,1fr)}
  .guide-purchase-inner{display:block}
  .guide-layout{grid-template-columns:minmax(0,1fr);padding-top:54px;padding-bottom:54px}
  .guide-side{grid-template-columns:minmax(0,1fr)}
  .source-list li{grid-template-columns:minmax(0,1fr)}
  .trust-meta{grid-template-columns:minmax(0,1fr)}
}

@media(max-width:520px){
  .entry-grid{grid-template-columns:minmax(0,1fr)}
  .material-grid,.type-grid,.shop-grid,.guide-card-grid,.related-grid{grid-template-columns:minmax(0,1fr)}
  .type-lead{grid-column:auto}
  .check-grid{grid-template-columns:minmax(0,1fr)}
  .check-item:last-child{grid-column:auto}
  .home-buy-card{grid-template-columns:minmax(0,1fr)}
  .guide-visual-grid{grid-template-columns:minmax(0,1fr)}
  .merchant-cta,.guide-final-cta .merchant-cta,.guide-purchase-inner .merchant-cta{width:100%;justify-content:center;text-align:center}
}