:root{
  --funnel-ink:#171b1a;
  --funnel-paper:#f7f5f0;
  --funnel-white:#fff;
  --funnel-line:#d8d1c7;
  --funnel-gold:#76551f;
  --funnel-deep:#27302d;
  --funnel-mist:#ebe7df;
}

body[data-b4-family="diagnosis"] main{
  width:min(1180px,calc(100% - 32px));
  padding-top:38px;
}

body[data-b4-family="diagnosis"] .diagnosis-hero{
  grid-template-columns:minmax(0,1.04fr) minmax(360px,.96fr);
  gap:clamp(28px,5vw,72px);
  align-items:center;
  padding:28px 0 48px;
}

.diagnosis-hero-copy{min-width:0}
body[data-b4-family="diagnosis"] .diagnosis-hero h1{max-width:none;font-size:clamp(46px,4.8vw,62px);letter-spacing:-.045em}
.diagnosis-hero-media{position:relative;margin:0;min-width:0}
.diagnosis-hero-media img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center;border-radius:2px}
.diagnosis-hero-media:after{content:"";position:absolute;inset:16px -16px -16px 16px;border:1px solid var(--funnel-gold);z-index:-1}
.diagnosis-hero-media figcaption{position:absolute;right:16px;bottom:16px;max-width:260px;padding:10px 14px;background:rgba(23,27,26,.88);color:#fff;font-size:12px;letter-spacing:.04em}
.diagnosis-note{grid-column:1/-1;display:grid;grid-template-columns:minmax(180px,.35fr) minmax(0,1fr);gap:28px;align-items:start;margin-top:8px;padding:22px 26px}
.diagnosis-note p{margin:0}

.diagnosis-hero-facts{display:flex;gap:0;margin:34px 0 0;padding:0;list-style:none;border-top:1px solid var(--funnel-line);border-bottom:1px solid var(--funnel-line)}
.diagnosis-hero-facts li{flex:1;display:flex;align-items:baseline;gap:7px;padding:14px 12px;border-right:1px solid var(--funnel-line)}
.diagnosis-hero-facts li:first-child{padding-left:0}
.diagnosis-hero-facts li:last-child{border-right:0}
.diagnosis-hero-facts strong{font:400 29px/1 Georgia,"Noto Serif JP",serif;color:var(--funnel-gold)}
.diagnosis-hero-facts span{font-size:11px;color:#555d59}

.diagnosis-concerns,.diagnosis-mechanism,.diagnosis-proof,.diagnosis-benefits{padding:clamp(64px,8vw,104px) 0;border-bottom:1px solid var(--funnel-line)}
.diagnosis-concerns>header,.diagnosis-mechanism>header,.diagnosis-proof>header,.diagnosis-benefits>header{max-width:760px;margin-bottom:34px}
.diagnosis-concerns>header>span,.diagnosis-mechanism>header>span,.diagnosis-proof>header>span,.diagnosis-benefits>header>span{color:var(--funnel-gold);font-size:11px;font-weight:700;letter-spacing:.14em}
.diagnosis-concerns h2,.diagnosis-mechanism h2,.diagnosis-proof h2,.diagnosis-benefits h2{margin:10px 0 14px;font:400 clamp(34px,5vw,58px)/1.15 Georgia,"Noto Serif JP",serif;letter-spacing:-.035em}
.diagnosis-concerns header p,.diagnosis-mechanism header p,.diagnosis-proof header p{max-width:64ch;color:#515956}

.diagnosis-concern-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--funnel-line);border:1px solid var(--funnel-line)}
.diagnosis-concern-card{min-height:250px;padding:clamp(24px,3vw,38px);background:var(--funnel-white)}
.diagnosis-concern-card small,.diagnosis-proof-card small{color:var(--funnel-gold);font-size:11px;font-weight:700;letter-spacing:.13em}
.diagnosis-concern-card h3{max-width:18ch;margin:32px 0 13px;font:400 clamp(24px,3vw,34px)/1.35 Georgia,"Noto Serif JP",serif}
.diagnosis-concern-card p{max-width:42ch;margin:0;color:#58605d;font-size:14px}

.diagnosis-section-cta{display:flex;width:min(420px,100%);min-height:58px;align-items:center;justify-content:center;margin:34px auto 0;padding:12px 24px;background:var(--funnel-deep);color:#fff;text-decoration:none;font-weight:600;letter-spacing:.04em}
.diagnosis-section-cta:hover,.diagnosis-section-cta:focus-visible{background:#111;color:#fff}

.diagnosis-mechanism{position:relative}
.diagnosis-mechanism-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.diagnosis-mechanism-step{position:relative;padding:30px 28px 34px;border-top:1px solid var(--funnel-ink);background:rgba(255,255,255,.42)}
.diagnosis-mechanism-step b,.diagnosis-benefit b{display:block;color:var(--funnel-gold);font:400 22px/1 Georgia,"Noto Serif JP",serif}
.diagnosis-mechanism-step h3{margin:28px 0 12px;font:400 27px/1.35 Georgia,"Noto Serif JP",serif}
.diagnosis-mechanism-step p{margin:0;color:#59615e;font-size:14px}
.diagnosis-before-after{display:grid;grid-template-columns:1fr 1fr;margin-top:38px;border:1px solid var(--funnel-line)}
.diagnosis-before-after>div{display:grid;gap:8px;padding:26px 30px;background:#eeeae3}
.diagnosis-before-after>div+div{border-left:1px solid var(--funnel-line);background:var(--funnel-deep);color:#fff}
.diagnosis-before-after small{font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--funnel-gold)}
.diagnosis-before-after>div+div small{color:#d8bf8f}
.diagnosis-before-after strong{font:400 23px/1.35 Georgia,"Noto Serif JP",serif}
.diagnosis-before-after span{font-size:13px;color:#616865}
.diagnosis-before-after>div+div span{color:#d8ddda}

.diagnosis-proof{margin-inline:calc(50% - 50vw);padding-inline:max(16px,calc((100vw - 1180px)/2));background:var(--funnel-deep);color:#fff}
.diagnosis-proof>header>span,.diagnosis-proof-card small{color:#d8bf8f}
.diagnosis-proof header p{color:#d4d9d6}
.diagnosis-proof-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:#515956;border:1px solid #515956}
.diagnosis-proof-card{min-height:330px;padding:28px;background:#303936}
.diagnosis-proof-card h3{margin:28px 0 16px;font:400 24px/1.42 Georgia,"Noto Serif JP",serif}
.diagnosis-proof-card p{margin:0;color:#e2e5e3;font-size:13px;line-height:1.9}
.diagnosis-text-link{display:inline-flex;margin-top:26px;color:#fff;text-underline-offset:5px}

.diagnosis-benefit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--funnel-line);border:1px solid var(--funnel-line)}
.diagnosis-benefit{min-height:230px;padding:28px;background:var(--funnel-white)}
.diagnosis-benefit h3{margin:24px 0 11px;font:400 23px/1.4 Georgia,"Noto Serif JP",serif}
.diagnosis-benefit p{margin:0;color:#59615e;font-size:13px}

body[data-b4-family="diagnosis"] .route-overview{padding-top:clamp(72px,9vw,112px)}
body[data-b4-family="diagnosis"] .diagnosis-form{scroll-margin-top:30px}
body[data-b4-family="diagnosis"] #check{scroll-margin-top:30px}

.diagnosis-sticky-cta{display:none}

@media(max-width:900px){
  body[data-b4-family="diagnosis"] .diagnosis-hero{grid-template-columns:1fr 1fr;gap:26px}
  .diagnosis-note{grid-template-columns:1fr;gap:8px}
  .diagnosis-proof-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .diagnosis-benefit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:760px){
  body[data-b4-family="diagnosis"]{padding-bottom:72px}
  body[data-b4-family="diagnosis"] main{width:min(100% - 24px,1180px);padding-top:20px}
  body[data-b4-family="diagnosis"] .diagnosis-hero{grid-template-columns:1fr;padding-top:18px}
  body[data-b4-family="diagnosis"] .diagnosis-hero h1{font-size:clamp(36px,9.5vw,40px);line-height:1.1}
  .diagnosis-hero-copy{order:1}
  .diagnosis-hero-media{order:2;margin-top:8px}
  .diagnosis-hero-media:after{inset:10px -8px -8px 10px}
  .diagnosis-hero-media figcaption{right:10px;bottom:10px;max-width:230px}
  .diagnosis-note{order:3;padding:20px}
  .diagnosis-hero-facts{margin-top:26px}
  .diagnosis-hero-facts li{display:grid;gap:5px;padding:12px 8px;text-align:center}
  .diagnosis-hero-facts li:first-child{padding-left:8px}
  .diagnosis-hero-facts strong{font-size:25px}
  .diagnosis-hero-facts span{font-size:9px;line-height:1.45}
  .diagnosis-concern-grid,.diagnosis-mechanism-grid,.diagnosis-before-after,.diagnosis-proof-grid,.diagnosis-benefit-grid{grid-template-columns:1fr}
  .diagnosis-concern-card{min-height:0}
  .diagnosis-concern-card h3{max-width:none;margin-top:20px}
  .diagnosis-mechanism-grid{gap:12px}
  .diagnosis-before-after>div+div{border-left:0;border-top:1px solid var(--funnel-line)}
  .diagnosis-proof{margin-inline:-12px;padding-inline:12px}
  .diagnosis-proof-card,.diagnosis-benefit{min-height:0}
  .diagnosis-sticky-cta{position:fixed;left:12px;right:12px;bottom:10px;z-index:1900;display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:56px;padding:9px 16px;border:1px solid rgba(255,255,255,.25);background:rgba(39,48,45,.96);box-shadow:0 10px 34px rgba(0,0,0,.22);color:#fff;text-decoration:none}
  .diagnosis-sticky-cta span{font-size:10px;letter-spacing:.08em;color:#d8bf8f}
  .diagnosis-sticky-cta strong{font-size:13px}
}

@media(prefers-reduced-motion:reduce){
  .diagnosis-sticky-cta{transition:none}
}