/* 読む・比較する・相談する操作に役割を持たせる確認用の動き。 */
:root{--header-height:110px;--settle:cubic-bezier(.22,.72,.2,1)}
html{scroll-padding-top:calc(var(--header-height) + 24px)}
.skip{z-index:100}
.site-header{position:sticky;top:0;z-index:50;padding-block:13px;min-height:104px}
.site-header:after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:0 7px 18px #25292510;border-bottom:1px solid #25292518;opacity:0;transition:opacity 180ms}
.site-header.is-scrolled:after{opacity:1}
.site-header nav{position:relative}
.site-header nav>a:not(.button){position:relative;display:flex;align-items:center;min-height:44px;transition:color 160ms}
.site-header nav>a:not(.button):before{content:"";position:absolute;left:0;right:0;bottom:3px;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform 180ms var(--settle)}
.site-header nav>a:not(.button):focus-visible:before{transform:scaleX(1)}
.site-header nav>a[aria-current="location"]{color:#1d211d}
.nav-position{position:absolute;left:0;bottom:3px;width:1px;height:4px;background:var(--yellow);transform-origin:left;pointer-events:none;opacity:0;transition:transform 260ms var(--settle),opacity 160ms}
.button{isolation:isolate;box-shadow:0 3px 0 #25292535;transition:transform 180ms var(--settle),box-shadow 180ms var(--settle),background-color 180ms,color 180ms}
.button:focus-visible{transform:translateY(-2px);box-shadow:0 5px 0 #25292535}
.button:active{transform:translateY(1px);box-shadow:0 1px 0 #25292535;transition-duration:80ms}
.button:disabled{transform:none;box-shadow:none}
.comparison-controls button{transition:background-color 160ms,border-color 160ms}
.comparison-controls button[aria-pressed="true"]{background:#f4c84335;border-bottom-color:var(--ink)}
.motion-accent{position:relative;isolation:isolate;background:none}
.motion-marker{position:absolute;left:0;right:0;top:76%;height:20%;z-index:-1;background:var(--yellow);transform-origin:left;pointer-events:none}
.motion-line-host{position:relative}
.motion-rule{position:absolute;left:0;right:0;top:-1px;height:1px;background:currentColor;opacity:.4;transform-origin:left;pointer-events:none}
.faq details[open]>p{animation:answer-arrives 230ms var(--settle)}
.faq summary:after{content:"開く";font-size:11px;font-weight:500;color:var(--muted);display:block;line-height:1.6;margin-top:7px}
.faq details[open] summary:after{content:"閉じる"}
#confirmation:not([hidden]){animation:confirmation-arrives 280ms var(--settle)}
@keyframes answer-arrives{from{opacity:.4;transform:translateY(-5px)}to{opacity:1;transform:none}}
@keyframes confirmation-arrives{from{opacity:.4;transform:translateX(12px)}to{opacity:1;transform:none}}
@media(hover:hover) and (pointer:fine){
 .button:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 5px 0 #25292535}
 .button:not(:disabled):active{transform:translateY(1px);box-shadow:0 1px 0 #25292535}
 .site-header nav>a:not(.button):hover:before{transform:scaleX(1)}
}
@media(min-width:768px){.case-visual,.quotation figure{top:calc(var(--header-height) + 24px)}}
@media(max-width:1000px){.site-header nav>a:not(.button),.nav-position{display:none}}
@media(max-width:767px){
 .site-header{padding:12px 20px;min-height:80px;gap:12px}
 .site-header .button{box-shadow:0 2px 0 #25292535}
}
@media(max-width:359px){.site-header{padding-inline:16px;gap:10px}}
html.motion-off{scroll-behavior:auto!important}
body.motion-off *,body.motion-off *:before,body.motion-off *:after{animation:none!important;transition:none!important}
body.motion-off .button{transform:none!important}
@media(prefers-reduced-motion:reduce){.button{transform:none!important}}