/* v26: F-inspired standard-width headings, with comfortable spacing. */
@font-face { font-family: 'LP Heading'; src: url('assets/fonts/ibm-plex-sans-jp-500.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'LP Heading'; src: url('assets/fonts/ibm-plex-sans-jp-600.ttf') format('truetype'); font-weight: 600 900; font-style: normal; font-display: swap; }
:root { --heading: 'LP Heading', 'Yu Gothic', 'Hiragino Kaku Gothic ProN', sans-serif; --serif: var(--heading); }
.section-title, #benefit-heading, #hero-heading, .consult h2, .sim-top h3 { font-family: var(--heading); font-weight: 500; font-feature-settings: 'palt' 0; letter-spacing: .012em; line-height: 1.55; text-wrap: pretty; }
.section-title { overflow-wrap: break-word; }
.heading-phrase { display: inline-block; }
.reading-phrase { display: inline-block; max-width: 100%; }
.problem-head .section-title { font-size: clamp(1.5rem,2.5vw,2.125rem); }
.renewal-head .section-title { margin-top: .25rem; }
.renewal-head > .kicker { display: none; }
.modal h2 { display: block; font-family: var(--heading); font-weight: 500; font-feature-settings: 'palt' 0; letter-spacing: .015em; color: #245f7a; font-size: 1.125rem; background: none; border: 0; padding: 0; margin: .2rem 42px .85rem 0; line-height: 1.7; }
.modal .modal-panel > p { margin-top: 0; line-height: 1.85; }

/* Notes in the dark problem section must be plainly visible. */
.problem .problem-conditions { margin-top: 1.5rem; border-top: 1px solid #7295a6; padding-top: .3rem; }
.problem .problem-conditions > summary { color: #edf7fc; font-weight: 500; }
.problem .problem-conditions > summary:hover { color: #fff; }
.problem .problem-conditions .disclosure-body { border-color: #8fb6c9; }
.problem .problem-conditions .disclosure-body p { color: #e0edf4; }

/* Matching photo frames keep one family and four business scenes balanced. */
.proof .usage-comparison-v3 { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; margin: 1.5rem 0 0; }
.proof .usage-comparison-v3 .usage-scene { display: flex; flex-direction: column; min-width: 0; min-height: 0; border: 0; border-radius: .3rem; box-shadow: none; background: #fff; overflow: hidden; }
.proof .usage-comparison-v3 .usage-scene.shop::after { display: none; }
.usage-label { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: .65rem .75rem; background: #e7f0f5; color: #244f65; font-size: .875rem; font-weight: 600; line-height: 1.7; text-align: center; }
.proof .usage-comparison-v3 .usage-scene img { display: block; width: 100%; height: auto; min-height: 0; aspect-ratio: 2/1; object-fit: contain; border-radius: 0; }
.usage-business-photo { position: relative; }
.usage-business-labels { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(2,1fr); grid-template-rows: repeat(2,1fr); pointer-events: none; }
.usage-business-labels span { justify-self: start; align-self: start; margin: .4rem; padding: .15rem .45rem; background: rgba(20,65,80,.86); color: #fff; font-size: .6875rem; font-weight: 500; line-height: 1.7; }
.proof .usage-comparison-v3 figcaption { position: static; display: flex; flex: 1; flex-direction: column; justify-content: center; padding: .8rem .75rem; background: #fff; text-align: center; }
.lp-finish .proof .usage-comparison-v3 .usage-scene figcaption strong { font-family: var(--sans); color: #173b4c; font-size: 1rem; font-weight: 500; line-height: 1.5; margin: 0; }
.proof .usage-comparison-v3 figcaption strong span { display: inline; color: #236d86; font-size: 2rem; font-weight: 600; letter-spacing: -.025em; }
.proof .usage-comparison-v3 figcaption strong em { font-size: .8125rem; font-style: normal; margin-left: .25rem; }
.proof .usage-comparison-v3 figcaption small { display: block; color: #5b717c; font-size: .6875rem; line-height: 1.7; margin-top: .25rem; }
.usage-frequency { margin: 1.25rem 0 .25rem; color: #284c60; font-size: 1.125rem; font-weight: 500; text-align: center; line-height: 1.9; }
.usage-frequency strong { color: #14788c; font-weight: 600; }
.proof .usage-comparison-v3 .shop figcaption strong span, .usage-frequency strong { color: #ac5145; }
.lp-finish .field-note { font-size: .9375rem; padding-top: .9rem; }
.field-note p { margin: 0 0 .5rem; }
.proof { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.proof .section-title { margin-bottom: 1rem; }
.proof .section-lead { font-size: .9375rem; line-height: 1.9; }

/* Amount accents follow displayed totals; separate disposal-cost notes remain. */
.lp-finish .simulator .sim-result .price-high { color: #ffb6ac; }
.lp-finish .simulator .sim-result .price-low { color: #a5e3cb; }
.lp-finish .simulator .sim-result .price-equal { color: #fff; }
.lp-finish .simulator .sim-result > div > span { display: block; margin-bottom: .7rem; }
.after-third-year .cost-increase { color: #a55346; font-weight: 600; }
.response-band-detail > p + p { margin-top: 1rem; }

/* Give all purchase/renewal conditions a clear reading structure. */
.renewal-conditions-content { border-left: 2px solid #cbdde6; padding: .2rem 0 .4rem 1.1rem; margin: .5rem 0; }
.renewal-conditions-content section + section { margin-top: 1.5rem; padding-top: 1.3rem; border-top: 1px solid #dce7ec; }
.renewal-conditions-content h4 { margin: 0 0 .7rem; color: #255f7b; font-family: var(--sans); font-weight: 600; font-size: .9375rem; line-height: 1.8; }
.lp-finish .renewal-conditions-content p, .renewal-conditions-content li { margin: 0 0 .75rem; font-size: .875rem; color: #405c69; line-height: 1.95; }
.renewal-change-breakdown { margin: .5rem 0 0; }
.renewal-change-breakdown > div { display: grid; grid-template-columns: 10rem minmax(0,1fr); gap: 1rem; padding: .8rem 0; border-top: 1px solid #dce7ec; font-size: .875rem; line-height: 1.9; }
.renewal-change-breakdown dt { color: #2b5b73; font-weight: 500; }
.renewal-change-breakdown dd { margin: 0; color: #405c69; }

/* Distinct but restrained tiers; retain the same product photography layout. */
.plan-example:nth-child(1) { --plan-ink: #426b81; --plan-highlight: #678da1; }
.plan-example:nth-child(2) { --plan-ink: #30766e; --plan-highlight: #5a9187; }
.plan-example:nth-child(3) { --plan-ink: #7e6540; --plan-highlight: #a0865d; }
.plan-example h3 { display: inline-block; color: var(--plan-ink); background: none; border: 0; padding: 0; min-width: 0; font-family: var(--heading); font-weight: 600; font-size: 1.5rem; letter-spacing: .015em; margin-bottom: .8rem; }
@supports (background-clip: text) {
 .plan-example h3 { background-image: linear-gradient(170deg,var(--plan-ink) 10%,var(--plan-highlight) 45%,var(--plan-ink) 75%); background-clip: text; -webkit-background-clip: text; color: transparent; }
}
.plan-example .plan-monthly strong { color: var(--plan-ink); }
@media(max-width:800px) {
 .problem-head .section-title { font-size: clamp(1.25rem,6vw,1.875rem); }
 .flow .section-title { font-size: clamp(1.125rem,5.65vw,1.625rem); }
 .title-line, .mobile-phrase { display: inline-block; }
 .proof { padding-top: 2.75rem; padding-bottom: 2.75rem; }
 .proof .section-title { font-size: 1.75rem; }
 .proof .usage-comparison-v3 { grid-template-columns: 1fr; gap: .9rem; margin-left: 0; margin-right: 0; }
 .proof .usage-comparison-v3 .usage-scene { border-radius: .25rem; }
 .usage-label { min-height: 40px; padding: .5rem .65rem; font-size: .8125rem; }
 .proof .usage-comparison-v3 figcaption { padding: .55rem .6rem; }
 .proof .usage-comparison-v3 figcaption strong span { font-size: 1.75rem; }
 .proof .usage-comparison-v3 figcaption small { margin-top: .1rem; }
 .usage-frequency { margin-top: 1rem; font-size: 1rem; }
 .proof .field-note { font-size: .875rem; }
 .renewal-change-breakdown > div { grid-template-columns: 1fr; gap: .25rem; }
 .renewal-conditions-content { padding-left: .9rem; }
}