/* ============================================================
   DTx FIT — アニメーション層（元サイトのレイアウト・配色は一切変更しない）
   styles.css の後に読み込む。構造に触らず「動き」だけ足す。
   ============================================================ */
:root{--a-ease:cubic-bezier(.22,.7,.2,1);--a-out:cubic-bezier(.16,1,.3,1)}

/* ---- 一発リビール（下から浮き上がる） ---- */
.a-up{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s var(--a-ease);will-change:opacity,transform}
.a-up.in{opacity:1;transform:none}
.a-left{opacity:0;transform:translateX(-36px);transition:opacity .9s ease,transform .9s var(--a-ease)}
.a-right{opacity:0;transform:translateX(36px);transition:opacity .9s ease,transform .9s var(--a-ease)}
.a-left.in,.a-right.in{opacity:1;transform:none}
.a-pop{opacity:0;transform:scale(.94);transition:opacity .8s ease,transform .8s var(--a-out)}
.a-pop.in{opacity:1;transform:none}
[data-ad="1"]{transition-delay:.08s}[data-ad="2"]{transition-delay:.16s}[data-ad="3"]{transition-delay:.24s}[data-ad="4"]{transition-delay:.32s}[data-ad="5"]{transition-delay:.40s}[data-ad="6"]{transition-delay:.48s}[data-ad="7"]{transition-delay:.56s}[data-ad="8"]{transition-delay:.64s}[data-ad="9"]{transition-delay:.72s}[data-ad="10"]{transition-delay:.80s}[data-ad="11"]{transition-delay:.88s}[data-ad="12"]{transition-delay:.96s}[data-ad="13"]{transition-delay:1.04s}

/* ---- 写真：下からクリップで開き、わずかに引き ---- */
.a-fig{clip-path:inset(0 0 100% 0);transition:clip-path 1.15s var(--a-out)}
.a-fig.in{clip-path:inset(0 0 0 0)}
.a-fig img{transform:scale(1.08);transition:transform 1.5s var(--a-out);will-change:transform}
.a-fig.in img{transform:none}

/* ---- 見出しの赤い下線が中央から伸びる（元CSSの ::after を利用） ---- */
.a-head::after{transform:scaleX(0);transform-origin:center;transition:transform .9s var(--a-ease) .25s}
.a-head.in::after{transform:scaleX(1)}
h3.a-head::after,.about-block-01 h3.a-head::after{transform-origin:left}

/* ---- KV：アクティブスライドはゆっくり寄る／キャプションは時間差で浮上 ---- */
.kv-swipe figure{overflow:hidden}
.kv-swipe .swiper-slide picture img{transform:scale(1)}
.kv-swipe .swiper-slide-active picture img{animation:a-kb 7s ease-out forwards}
@keyframes a-kb{from{transform:scale(1)}to{transform:scale(1.08)}}
/* KVが沈む時に次セクションが上に被さる（見た目は元と同じ） */
.pickup{position:relative;z-index:2;background:#EFEFEF}

/* ---- ヘッダー：ナビに下線、ボタンは浮く ---- */
#gnav ul li.is-current a::after{transform:scale(1,1);transform-origin:left top}
.header-btn-area a{transition:transform .3s var(--a-ease),box-shadow .3s,filter .3s}
.header-btn-area a:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(180,0,25,.3);filter:brightness(1.06)}

/* ---- ボタン：浮き上がり＋影 ---- */
.intro-btn a,.all-btn a,.banner-btn a,.reserve-btn a,.header-btn a{transition:transform .3s var(--a-ease),box-shadow .3s,background-color .3s,color .3s}
.intro-btn a:hover,.banner-btn a:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,0,0,.25)}
.all-btn a:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.25)}
.a-mag{will-change:transform}

/* ---- 写真ホバー：じわっと寄る ---- */
.top-intro figure,.top-banner li a figure .img,.top-banner li a figure,.pickup li a,.machine-list li figure,.trial-list figure,.about-block-02 figure{overflow:hidden}
.top-intro figure img,.top-banner li a img,.pickup li a img,.machine-list li img,.trial-list figure img,.about-block-02 figure img{transition:transform 1.1s var(--a-out)}
.top-intro figure:hover img,.top-banner li a:hover img,.pickup li a:hover img,.trial-list li:hover figure img,.about-block-02 li:hover figure img{transform:scale(1.05)}
.machine-list li:hover img{transform:translateY(-6px) scale(1.04)}
.machine-list li{transition:transform .5s var(--a-ease)}

/* ---- 下層タイトル帯：背景写真がスクロールで流れる（JSがbackground-positionを動かす） ---- */
.title-area,.about-tit{will-change:background-position}

/* ---- NEWS：行がスライドイン ---- */
.top-news-right ul li{opacity:0;transform:translateX(24px);transition:opacity .8s ease,transform .8s var(--a-ease)}
.top-news-right ul li.in{opacity:1;transform:none}

/* ---- ページ最上部のロード演出（ロゴ→ナビ→KV） ---- */
header h1{opacity:0;transform:translateY(-10px);transition:opacity .8s ease,transform .8s var(--a-ease)}
#gnav ul li{opacity:0;transform:translateY(-8px);transition:opacity .6s ease,transform .6s var(--a-ease)}
.header-btn-area{opacity:0;transition:opacity .8s ease .5s}
body.a-ready header h1{opacity:1;transform:none}
body.a-ready #gnav ul li{opacity:1;transform:none}
body.a-ready #gnav ul li:nth-child(1){transition-delay:.15s}body.a-ready #gnav ul li:nth-child(2){transition-delay:.21s}body.a-ready #gnav ul li:nth-child(3){transition-delay:.27s}body.a-ready #gnav ul li:nth-child(4){transition-delay:.33s}body.a-ready #gnav ul li:nth-child(5){transition-delay:.39s}body.a-ready #gnav ul li:nth-child(6){transition-delay:.45s}
body.a-ready .header-btn-area{opacity:1}
.kv{opacity:0;transition:opacity 1.2s ease .2s}
body.a-ready .kv{opacity:1}

/* ---- 予約フォーム：dtx-fit.com 以外では別窓リンクに切替（フォーム側CSP対応） ---- */
.a-form-fallback{display:none;text-align:center;padding:30px 0 10px}
.a-form-fallback p{margin-bottom:18px;font-size:14px}
.a-form-fallback a{display:inline-block;background:#B40019;color:#fff;font-weight:700;padding:1em 2.4em;border-radius:50px;text-decoration:none;transition:transform .3s var(--a-ease),box-shadow .3s}
.a-form-fallback a:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(180,0,25,.3)}
.a-form-ext iframe{display:none}
.a-form-ext .a-form-fallback{display:block}

/* ---- オープニング（トップのみ）：黒画面のロゴ → スクロールでヘッダー位置へ飛び、サイトが下からせり上がる ---- */
.a-intro-space{height:100vh;background:#000}
.a-intro-layer{position:fixed;inset:0;z-index:150;color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent}
.a-intro-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.a-intro-ph{width:min(58vw,420px);aspect-ratio:206.596/79.878;visibility:hidden}
.a-intro-bar{display:block;width:0;height:2px;background:#B40019;margin:34px 0 22px;animation:a-intro-bar .8s var(--a-ease) 1.05s forwards}
@keyframes a-intro-bar{to{width:44px}}
.a-intro-tag{margin:0;font-size:min(max(12px,1.1vw),15px);letter-spacing:.22em;line-height:2;color:#d6d6d6;opacity:0;transform:translateY(8px);animation:a-intro-in .9s var(--a-ease) 1.2s forwards}
.a-intro-tag br{display:none}
.a-intro-logo{position:absolute;left:50%;top:50%;width:min(58vw,420px);line-height:0;will-change:transform;transform:translate(-50%,-50%)}
.a-intro-logo img{width:100%;height:auto;opacity:0;transform:scale(.9);animation:a-intro-in 1.1s var(--a-out) .25s forwards}
@keyframes a-intro-in{to{opacity:1;transform:none}}
.a-intro-hint{position:absolute;left:0;right:0;bottom:36px;display:flex;justify-content:center}
.a-intro-hint > div{display:flex;flex-direction:column;align-items:center;gap:10px;opacity:0;animation:a-intro-fade .8s ease 1.9s forwards}
@keyframes a-intro-fade{to{opacity:1}}
.a-intro-hint span{font-size:10px;letter-spacing:.3em;color:#aaa}
.a-intro-hint i{display:block;width:1px;height:54px;background:rgba(255,255,255,.22);position:relative;overflow:hidden}
.a-intro-hint i::after{content:"";position:absolute;left:0;top:-100%;width:100%;height:100%;background:#fff;animation:a-intro-line 1.6s ease-in-out infinite}
@keyframes a-intro-line{to{top:100%}}
header{transition:opacity .5s ease}
body.a-intro-on header{opacity:0;pointer-events:none}
body.a-intro-on header h1,body.a-intro-on #gnav ul li,body.a-intro-on .header-btn-area{opacity:1;transform:none;transition:none}
body.a-intro-on #nav-toggle{opacity:0;pointer-events:none}
#nav-toggle{transition:opacity .4s ease}
body.a-intro-done .a-intro-layer{visibility:hidden}
body.a-intro-off .a-intro-space,body.a-intro-off .a-intro-layer{display:none}
@media (max-width:768px){
  .a-intro-ph,.a-intro-logo{width:min(62vw,300px)}
  .a-intro-tag br{display:inline}
  .a-intro-tag{line-height:1.9}
}
/* JSが動かない場合は3秒後にオープニングを畳む */
@keyframes a-intro-kill{to{display:none;height:0;visibility:hidden}}
body:not(.a-js) .a-intro-space,body:not(.a-js) .a-intro-layer{animation:a-intro-kill .01s linear 3s forwards}

/* ---- JSが動かない場合のフェイルセーフ（3秒後に表示） ---- */
@keyframes a-fs{to{opacity:1;transform:none}}
body:not(.a-js) header h1,body:not(.a-js) #gnav ul li,body:not(.a-js) .header-btn-area,body:not(.a-js) .kv,body:not(.a-js) .top-news-right ul li{animation:a-fs .01s linear 3s forwards}

/* ---- 視差効果を減らす設定：全停止＆完成状態 ---- */
@media (prefers-reduced-motion: reduce){
  .a-up,.a-left,.a-right,.a-pop,.top-news-right ul li,header h1,#gnav ul li,.header-btn-area,.kv{opacity:1!important;transform:none!important;transition:none!important}
  .a-fig{clip-path:none!important}.a-fig img{transform:none!important;transition:none!important}
  .a-head::after{transform:none!important;transition:none!important}
  .kv-swipe .swiper-slide-active picture img{animation:none!important}
  .a-intro-space,.a-intro-layer{display:none!important}
  body.a-intro-on header{opacity:1!important;pointer-events:auto!important}
}