/* 2026-10-09 UI balance review (findings S3-S15, tmn-kega). Loaded last on every page. */
/* S3: the first two top-page sections use the same section spacing as the rest (PC 40px; phones 24px between sections). */
@media (min-width:768px){#index #about.about{padding:4rem 0 2rem}#index #about .injury-cover-p{min-block-size:0}#index #coverage.coverage-summary{padding-top:4rem}}
@media (max-width:767px){main #about.about:has(+ #coverage){padding-top:24px!important;padding-bottom:12px!important}main #about.about + #coverage{padding-top:12px!important}}
/* S7: 768-1023px shows the three plans side by side instead of 2 + 1. */
@media (min-width:768px) and (max-width:1023px){
.plans-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
.plans-grid .plan-card{padding:1.2rem}
.plans-grid .feature-group{padding-inline:.8rem}
.plans-grid .toggle-text{font-size:1.4rem}
.plans-grid .group-title{font-size:1.7rem}
#index .plans-grid .group-sub{font-size:1.4rem}
#index .plans-grid .plan-features li,#index .plans-grid .feature-label{font-size:1.5rem}
.plans-grid .amount{flex:0 0 auto;font-size:1.5rem;min-width:0;white-space:nowrap}
}
/* S8: the start-date diagram is centred under the heading and text. */
.flow-grid{justify-content:center}
/* S11: PC notes band is full width with text on the content column; the 71+ notice box sits on the content column. */
@media (min-width:768px){.disclaimer{max-width:none;padding-inline:max(4rem,calc((100% - 1020px) / 2))}#notice-70plus{margin-inline:max(4rem,calc((100% - 1020px) / 2))}}
#notice-70plus :is(p,li){text-wrap:pretty}
@media (max-width:767px){main #coverage .coverage-content{padding-inline:0!important}}
/* S12: the two contact cards share one height and the same inner spacing. */
.contact-cards{align-items:stretch}
.contact-card{align-content:center}
.contact-card--accident{padding-block:2rem}
/* S15: plan names use one colour (the green used on phones); the index footer keeps the caption size of the other pages. */
.plan-card h3{color:#006b43}
#index .agency-insurer p{font-size:var(--fz-caption)}
/* S13: phone header gets an 8px side margin; the menu icon is a little smaller so it no longer touches the insurer mark. */
@media (max-width:767px){
.site-header .site-logo{width:calc(100% - 16px);margin-inline:8px auto}
.site-header .menu-toggle{right:8px;display:flex;justify-content:flex-end;align-items:center}
.site-header .menu-toggle img{width:32px}
}
/* S5: payments on phones - the illustration sits centred under the heading instead of squeezing the text beside it. */
@media (max-width:767px){
.page-payments #payments .payment-item{display:flex;flex-direction:column}
.page-payments #payments .payment-text{display:contents}
.page-payments #payments .payment-text>*{order:3}
.page-payments #payments .payment-text>h3{order:1}
.page-payments #payments .payment-icon{order:2;float:none;width:140px;margin:.4rem auto 1.2rem}
}
/* S6: coverage illustrations on phones are centred, one height, and grouped with their own heading. */
@media (max-width:600px){
.coverage-item .coverage-icon{float:none;width:auto;margin:2.4rem auto .4rem;padding:0}
.coverage-item .coverage-icon img{width:auto;max-width:100%;height:120px}
}
/* S1 (2026-10-09 22:4x, 河合さん決定): PC keeps only the menu band fixed; the logo scrolls away. main.js sets --site-logo-h and --fixed-header (= the band). Phones unchanged. */
@media (min-width:768px){
.site-header{top:calc(-1 * var(--site-logo-h, calc(min(100vw, 1100px) * .11703)))}
html{scroll-padding-top:var(--fixed-header, calc(59px + 1.2 * clamp(20px, 8.4px + 1.51vw, 25px)))}
}
@media (orientation:landscape) and (max-height:500px) and (pointer:coarse){html{scroll-padding-top:0}}
/* S9 (河合さん決定 a): the four policy pages use the same 1020px text column as the other pages (drops only their 840px cap from text-measure-20261009). */
@media (min-width:768px){main #handling>.container,main #policy>.container,main #salespolicy>.container,main #hikakusuishou>.container{max-width:var(--content-max-width,1100px)}}
/* 2026-10-10 (河合さん決定): PC after scrolling - one-row menu band about 54px (main.js toggles html.is-header-compact; a spacer keeps the full header height). Top of page, phones, landscape phones and no-JS are unchanged. */
:root{--header-band-h:54px}
.site-header-spacer{display:none}
@media (min-width:768px){
html.is-header-compact .site-header{position:fixed;top:0;left:0;right:0}
html.is-header-compact .site-header .site-logo{display:none}
html.is-header-compact .site-header .main-nav ul{flex-wrap:nowrap;align-items:center;min-height:calc(var(--header-band-h) - 1px);padding-block:0}
html.is-header-compact .site-header-spacer{display:block;height:var(--header-full-h,0px)}
html.js-enabled{scroll-padding-top:var(--header-band-h)}
}
@media (orientation:landscape) and (max-height:500px) and (pointer:coarse){html.js-enabled{scroll-padding-top:0}}