/* Preserve each element's responsive standard size, then scale text only. */
:root{--text-multiplier:1}
:root[data-text-size=large]{--text-multiplier:1.5;--reading-size:18px}
:root[data-text-size=largest]{--text-multiplier:2;--reading-size:18px}
.scalable-type{font-size:calc(var(--standard-type-size) * var(--text-multiplier))!important}
.reading-options{gap:4px}
.header .reading-tools button{min-width:40px;padding-left:7px;padding-right:7px}
/* Enlarged reading uses content height so no text is clipped to a viewport. */
:root[data-text-size=large] main,:root[data-text-size=largest] main{overflow-wrap:break-word}
:root[data-text-size=large] .hero,:root[data-text-size=largest] .hero{height:auto;min-height:0;overflow:visible}
:root[data-text-size=large] .hero-inner,:root[data-text-size=largest] .hero-inner{height:auto;min-height:0}
:root[data-text-size=large] .hero h1,:root[data-text-size=largest] .hero h1{white-space:normal}
:root[data-text-size=large] .trial-main,:root[data-text-size=largest] .trial-main{white-space:normal;flex-wrap:wrap}
:root[data-text-size=large] .trial-bold,:root[data-text-size=largest] .trial-bold{white-space:normal}
:root[data-text-size=large] .hero-grandfather,:root[data-text-size=largest] .hero-grandfather{display:flex;flex-direction:column-reverse}
:root[data-text-size=large] .hero-grandfather>figcaption,:root[data-text-size=largest] .hero-grandfather>figcaption{width:100%;padding:18px;overflow:visible}
:root[data-text-size=large] .hero-grandfather>img,:root[data-text-size=largest] .hero-grandfather>img{width:100%;height:220px;flex-shrink:0;object-position:center 20%}
:root[data-text-size=large] .hero-visual,:root[data-text-size=largest] .hero-visual{height:auto;display:block;overflow:visible}
:root[data-text-size=large] .hero-visual .hero-photo,:root[data-text-size=largest] .hero-visual .hero-photo{height:auto;aspect-ratio:3/2!important;overflow:hidden}
:root[data-text-size=large] .hero-visual .hero-photo>img,:root[data-text-size=largest] .hero-visual .hero-photo>img{height:auto!important;aspect-ratio:3/2;object-fit:contain!important}
:root[data-text-size=large] .price-main,:root[data-text-size=largest] .price-main{flex-wrap:wrap}
:root[data-text-size=large] .price-main>div,:root[data-text-size=largest] .price-main>div{min-width:0;max-width:100%}
:root[data-text-size=large] .price-range,:root[data-text-size=largest] .price-range{overflow-wrap:anywhere;white-space:normal;line-height:1.5}
:root[data-text-size=large] .button,:root[data-text-size=largest] .button{flex-wrap:wrap;height:auto}
:root[data-text-size=large] .phone-contact,:root[data-text-size=largest] .phone-contact{flex-wrap:wrap}
:root[data-text-size=large] .phone-contact strong,:root[data-text-size=largest] .phone-contact strong{overflow-wrap:anywhere}
:root[data-text-size=large] .contact-panel,:root[data-text-size=largest] .contact-panel{min-width:0}
:root[data-text-size=large] .faq summary,:root[data-text-size=largest] .faq summary{align-items:flex-start}
:root[data-text-size=largest] .care-grid,:root[data-text-size=largest] .price-layout,:root[data-text-size=largest] .contact-section,:root[data-text-size=largest] .staff-section{grid-template-columns:minmax(0,1fr)}
@media(max-width:1100px){.header .reading-tools button{min-width:36px;padding-left:6px;padding-right:6px}}
@media(max-width:800px){
  .header{gap:6px;padding-left:8px;padding-right:8px}
  .header .brand,.header .brand img{width:69px}
  .header .brand-service{padding-left:6px;font-size:9px}
  .header .brand-service span{font-size:16px}
  .header .reading-tools{gap:3px}
  .header .reading-tools button{font-size:13px;min-width:34px;min-height:38px;padding:3px 5px}
  .header .reading-tools>span{font-size:11px}
  .header .menu-toggle{min-width:39px}
  :root[data-text-size=large] .hero .hero-inner,:root[data-text-size=largest] .hero .hero-inner{grid-template-rows:auto auto auto;gap:19px}
  :root[data-text-size=large] .hero .hero-visual,:root[data-text-size=largest] .hero .hero-visual{height:auto}
  :root[data-text-size=large] .hero .hero-action,:root[data-text-size=largest] .hero .hero-action{margin-bottom:8px}
  :root[data-text-size=large] .hero-grandfather>figcaption,:root[data-text-size=largest] .hero-grandfather>figcaption{padding:17px 15px}
  :root[data-text-size=large] .care-item,:root[data-text-size=largest] .care-item{display:block}
  :root[data-text-size=large] .flow-list li,:root[data-text-size=largest] .flow-list li{gap:12px}
  :root[data-text-size=largest] .flow-list li{display:block}
  :root[data-text-size=largest] .flow-list li:after{display:none}
  :root[data-text-size=largest] .flow-list .step{margin-bottom:12px}
  :root[data-text-size=largest] .concern-list li{display:block}
  :root[data-text-size=largest] .concern-num{display:block;margin-bottom:10px}
  :root[data-text-size=largest] .answer-line{flex-direction:column;text-align:center}
  :root[data-text-size=largest] .staff-label{position:static;display:block;padding:13px 17px}
  :root[data-text-size=largest] .staff-photo{aspect-ratio:auto}
  :root[data-text-size=largest] .staff-photo>img{height:auto}
}
@media(max-width:359px){
  .header{gap:4px;padding-left:6px;padding-right:6px}
  .header .brand,.header .brand img{width:58px}
  .header .brand-service{padding-left:4px;font-size:8px}
  .header .brand-service span{font-size:14px;letter-spacing:0}
  .header .reading-tools button{min-width:32px;font-size:12px;padding-left:4px;padding-right:4px}
  .header .reading-tools>span{font-size:10px}
  .header .menu-toggle{min-width:37px}
}