/* Fluid canvas and intermediate-width layout. Mobile-specific rules remain in responsive.css. */
.page[data-page]{
  --page-content-max:1280px;
  --page-content-gutter:clamp(24px,5.625vw,72px);
  --page-content-inset:clamp(48px,11.25vw,144px);
  width:100%;
  max-width:none;
  overflow-x:hidden;
  overflow-x:clip;
}

.page[data-page] :where(.container,.section,.page-hero__inner,.article-top){width:min(var(--page-content-max),calc(100% - var(--page-content-inset)))}
.page[data-page] :where(.article-body-wrap,.form-grid,.policy){width:min(760px,100%)}
.page[data-page] .site-footer__inner{width:min(var(--page-content-max),100%)}
.page[data-page] .cta-section{width:min(1160px,calc(100% - 64px))}
.page[data-page] :where(.hero__entry,.hero__actions){width:70%}
.page[data-page] .trust{width:min(1000px,calc(100% - 64px))}
.page[data-page] .cta-actions{width:min(820px,100%)}
.page[data-page]{font-size:clamp(16px,1.18vw,17px)}
.page[data-page] .sec-title{font-size:clamp(58px,9.45vw,136px)}
.page[data-page] .sec-sub{font-size:clamp(16px,1.25vw,18px)}
.page[data-page] .page-hero__lead{font-size:clamp(16px,1.18vw,17px)}
.page[data-page] .page-hero .sec-title{font-size:clamp(62px,7.7vw,112px);line-height:.9;white-space:nowrap}
.page[data-page="chintai-kanri"] .page-hero .sec-title{font-size:clamp(56px,6.65vw,96px);letter-spacing:0}
.page[data-page] .section .sec-sub{
  font-size:clamp(20px,1.67vw,24px);
}
.page[data-page="main"] .reason h3{font-size:clamp(22px,1.95vw,28px)}

.page[data-page="main"] .hero__grid{grid-template-columns:minmax(0,1fr) minmax(420px,51%)}
.page[data-page="main"] .hero h1{font-size:clamp(30px,2.78vw,40px)}
.page[data-page="main"] .hero-h1-sub{font-size:clamp(27px,2.5vw,36px)}
.page[data-page="main"] .hero__label{font-size:clamp(15px,1.32vw,19px)}
.page[data-page="main"] .hero__entry{font-size:clamp(16px,1.39vw,20px)}
.page[data-page="main"] .hero__actions{
  padding:clamp(30px,2.5vw,40px) clamp(44px,4.5vw,72px);
  grid-template-columns:minmax(0,1fr) minmax(280px,40%);
  gap:clamp(28px,3vw,44px);
}
.page[data-page="main"] .hero-tel{gap:clamp(7px,.7vw,10px)}
.page[data-page="main"] .hero-tel__label{font-size:clamp(14px,1.04vw,16px)}
.page[data-page="main"] .hero-tel__num{font-size:clamp(34px,2.64vw,40px)}
.page[data-page="main"] .hero-tel__num svg{width:1em;height:1em}
.page[data-page="main"] .hero-tel__note{font-size:clamp(12px,.9vw,14px)}
.page[data-page="main"] .hero__actions .hero-btns{gap:clamp(10px,.85vw,14px)}
.page[data-page="main"] .hero__actions .btn{
  min-height:clamp(54px,4.15vw,60px);
  font-size:clamp(16px,1.25vw,20px);
}
.page[data-page="main"] .mv-strip{width:100%}
.page[data-page] .room-band{width:100%}
.page[data-page="main"] .room-band + .section{
  width:100%;
  padding-inline:var(--page-content-gutter);
}

.page[data-page] .section[data-tone="tint"]::before,
.page[data-page] .section[data-tone="worry"]::before{
  left:calc(50% - 50vw);
  width:calc(50vw + 240px);
}
.page[data-page] .section[data-tint="right"]::before{
  right:calc(50% - 50vw);
  left:auto;
}
.page[data-page] .section[data-tint="full"]::before{
  left:calc(50% - 50vw);
  width:100vw;
}

@media (max-width:1180px){
  .page[data-page] .site-header__inner{height:86px;padding-inline:32px}
  .page[data-page] .brand-mark{width:64px;height:64px;transform:translateY(-2px)}
  .page[data-page] .brand-word{width:180px;height:56px;padding:0}
  .page[data-page] .nav{display:none}
  .page[data-page] .sp-menu{display:flex}
  .page[data-page="souzoku"] [data-section="05-section-2"],
  .page[data-page="contact"] [data-section="04-section-2"],
  .page[data-page="souzoku"] .diag-cta{height:auto}
}

@media (max-width:1024px){
  .page[data-page="company"] .letter{display:block}
  .page[data-page="company"] .letter__side{position:static}
  .page[data-page="company"] .letter__main{margin-top:56px;padding-left:0}
  .page[data-page="company"] .profile-grid{grid-template-columns:260px minmax(0,1fr);gap:40px}

  .page[data-page="contact"] .contact-card{
    grid-template-columns:minmax(0,1fr) 210px 96px;
    gap:16px;
    padding:30px 28px;
  }
  .page[data-page="contact"] .contact-qr img{width:112px;height:112px}

  .page[data-page] .footer-grid{
    grid-template-columns:minmax(0,1.2fr) repeat(2,minmax(120px,.6fr));
    gap:36px;
  }
  .page[data-page] .footer-brand__logo img.mark{width:62px;height:62px}
  .page[data-page] .footer-brand__logo img.word{width:210px;height:64px}
  .page[data-page] .cta-card{padding-inline:64px}
}

@media (min-width:769px) and (max-width:960px){
  .page[data-page="main"] .hero__grid{grid-template-columns:1fr}
  .page[data-page="main"] .hero h1{width:auto}
  .page[data-page="main"] .hero__photo{width:min(520px,82%);margin:56px auto 0;padding-right:64px}
  .page[data-page="main"] .photo-frame{left:32px}
  .page[data-page="main"] .photo-echo{width:calc(100% - 64px)}
  .page[data-page="main"] .hero__entry{margin-top:48px}
  .page[data-page="main"] .trust{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 20px}
  .page[data-page="main"] .trust > span:nth-child(3){border-left:0}

  .page[data-page="contact"] .contact-card{display:grid;grid-template-columns:1fr 1fr}
  .page[data-page="contact"] .contact-qr{grid-column:1 / -1;margin-top:20px}

  .page[data-page] .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page[data-page] .footer-brand{grid-column:1 / -1}
}

@media (min-width:769px) and (max-width:1100px){
  .page[data-page="main"] :where(.hero__entry,.hero__actions){width:100%}
}

@media (min-width:1181px){
  .page[data-page] .site-header__inner{width:min(var(--page-content-max),calc(100% - 100px));margin-inline:auto;padding-inline:0}
  .page[data-page="chintai-kanri"] .worry-foot--owner{width:fit-content;max-width:100%}
  .page[data-page="chintai-kanri"] .worry-foot--owner .bubble{flex:0 1 auto;width:max-content;max-width:calc(100% - 130px)}
  .page[data-page="chintai-kanri"] .worry-foot--owner .bubble p{white-space:nowrap}
}