/* v4: 静止状態を基本に、対応環境だけ動きを追加する。 */
.hero-visual{overflow:hidden;isolation:isolate}
.hero h1>.hero-line{display:block;color:inherit}
.print-options{margin-top:32px}
.print-options>p{font-size:15px;color:var(--muted);margin-bottom:14px}
.options dl{font-size:15px}
.options dl>div{align-items:baseline}
.options dt{min-width:0;overflow-wrap:anywhere}
.options dd{text-align:right;font-variant-numeric:tabular-nums}
.print-options .print-note{font-size:12px;margin-top:16px;margin-bottom:0}
.support{align-self:start}
.flow-list li{border-top:0}
.flow-list li::before{content:'';position:absolute;top:0;left:0;width:100%;height:1px;background:#a6b6a1;transform-origin:left}
@keyframes curtain-open{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
@keyframes quiet-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes photo-drift{from{transform:scale(1.02) translateY(-1%)}to{transform:scale(1.09) translateY(1%)}}
@keyframes line-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:no-preference){
  .hero-visual{animation:curtain-open 1.4s cubic-bezier(.22,1,.36,1) both}
  .hero-line{animation:quiet-rise 1s .2s both}
  .hero-line:nth-child(2){animation-delay:.4s}
  .hero-description,.hero-actions{animation:quiet-rise 1s .55s both}
  @supports(animation-timeline:view()){
    .editorial-photo,.flow-photo,.contact-photo{animation:curtain-open linear both;animation-timeline:view();animation-range:entry 5% entry 85%}
    .flow-list li::before{animation:line-grow linear both;animation-timeline:view();animation-range:entry 0% entry 90%}
    .hero-visual img{animation:photo-drift linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
  }
  @supports not (animation-timeline:view()){
    .motion-photo{animation:curtain-open 1.1s cubic-bezier(.22,1,.36,1) both}
    .motion-enter.flow-list li::before,.flow-list li.motion-enter::before{animation:line-grow 1s both}
  }
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .sample-photo img{transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
  .sample-card:hover .sample-photo img{transform:scale(1.065) rotate(.5deg)}
  .button{position:relative;isolation:isolate;overflow:hidden;transition:transform .3s}
  .button::before{content:'';position:absolute;z-index:-1;inset:0;background:#ffffff20;transform:translateX(-101%);transition:transform .45s cubic-bezier(.22,1,.36,1)}
  .hero .button::before,.button-outline::before{background:#284f4012}
  .button:hover::before{transform:translateX(0)}
}
@media(max-width:760px){
  .options dl>div{gap:12px}
  .options dt{max-width:190px}
  .print-options{margin-top:28px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .sample-card:hover img,.button:hover{transform:none}
}
@media(hover:none),(pointer:coarse){
  .sample-card:hover img,.button:hover{transform:none}
}
/* 見えたら遅れてふわっと（アウリムと同じ動き。site.js が .rv と遅れ --rv-d を付ける） */
.has-rv .rv{opacity:0;transform:translateY(28px);transition:opacity 1.1s cubic-bezier(.22,1,.36,1),transform 1.1s cubic-bezier(.22,1,.36,1);transition-delay:var(--rv-d,0s)}
.has-rv .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.has-rv .rv{opacity:1;transform:none;transition:none}}