@charset "utf-8";
/*-------anime------*/
.js-split span {
  opacity: 0;
  display: inline-block;
  transform: translateY(20px);
}

.js-split.is-active span {
  animation: fadeUp 0.6s forwards;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.a-ct {
  position: relative;
  z-index: 2;
  overflow: hidden;
}
.a-ct::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  display: inline-block;
  background: #fff;
  top: 0;
  z-index: 5;
  transition: 0.8s;
  transition-delay: 0.4s;
}
.a-left::after {
  left: 0;
}
.a-left.is-visible::after {
  left: -100vw;
}
.a-right::after {
  right: 0;
}
.a-right.is-visible::after {
  right: -100vw;
}
.fade-up {
  opacity: 0;
  transform: translateY(15%);
  transition: 0.3s;
}
.fade-up.is-visible {
  opacity: 1;
  transform: translateY(-0%);
}

/* =====================================================================
   歯科トキオクリニック：TOPのアニメーション
   指示書の「洗練された／柔らかい感じ」に合わせた設定
     ・移動量は小さく（24px）　→ 主張しすぎない
     ・時間は長め（1.1s）＋ 減速のゆるい easing → ふわっと止まる
     ・.js-anime を scroll-animation.js が監視して .is-visible を付ける
===================================================================== */
:root {
  --a-dur: 1.1s;
  --a-dur-img: 1.8s;
  --a-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --a-move: 24px;
}

/*-------スクロールで出てくる要素------*/
.a-fade,
.a-fade-up,
.a-fade-l,
.a-fade-r {
  opacity: 0;
  transition:
    opacity var(--a-dur) var(--a-ease),
    transform var(--a-dur) var(--a-ease);
}
.a-fade-up {
  transform: translateY(var(--a-move));
}
.a-fade-l {
  transform: translateX(calc(var(--a-move) * -1));
}
.a-fade-r {
  transform: translateX(var(--a-move));
}
.a-fade.is-visible,
.a-fade-up.is-visible,
.a-fade-l.is-visible,
.a-fade-r.is-visible {
  opacity: 1;
  transform: none;
}

/*-------子要素を少しずつ遅らせて出す（カード列・アイコン列）------*/
.a-stagger > * {
  opacity: 0;
  transform: translateY(var(--a-move));
  transition:
    opacity var(--a-dur) var(--a-ease),
    transform var(--a-dur) var(--a-ease);
}
.a-stagger.is-visible > * {
  opacity: 1;
  transform: none;
}
.a-stagger.is-visible > *:nth-child(2) { transition-delay: 0.09s; }
.a-stagger.is-visible > *:nth-child(3) { transition-delay: 0.18s; }
.a-stagger.is-visible > *:nth-child(4) { transition-delay: 0.27s; }
.a-stagger.is-visible > *:nth-child(5) { transition-delay: 0.36s; }
.a-stagger.is-visible > *:nth-child(6) { transition-delay: 0.45s; }
.a-stagger.is-visible > *:nth-child(7) { transition-delay: 0.54s; }
.a-stagger.is-visible > *:nth-child(8) { transition-delay: 0.63s; }
.a-stagger.is-visible > *:nth-child(9) { transition-delay: 0.72s; }
.a-stagger.is-visible > *:nth-child(10) { transition-delay: 0.81s; }

/*-------写真がゆっくり引いていく（親に overflow:hidden がある前提）------*/
.a-zoom img {
  transform: scale(1.06);
  transition: transform var(--a-dur-img) var(--a-ease);
}
.a-zoom.is-visible img {
  transform: none;
}

/*-------MV：読み込み時の導入。セルは overflow:hidden なので scale が外に出ない------*/
.p-index-fv__cell img {
  animation: a-mv-in 1.6s var(--a-ease) both;
}
.p-index-fv__cell--02 img { animation-delay: 0.1s; }
.p-index-fv__cell--03 img { animation-delay: 0.2s; }
.p-index-fv__cell--04 img { animation-delay: 0.15s; }
.p-index-fv__cell--05 img { animation-delay: 0.25s; }
.p-index-fv__cell--06 img { animation-delay: 0.35s; }
@keyframes a-mv-in {
  from {
    opacity: 0;
    transform: scale(1.08);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.p-index-fv__catch {
  animation: a-mv-catch 1.4s var(--a-ease) 0.45s both;
}
@keyframes a-mv-catch {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.p-index-fv__points > li,
.p-index-fv__bnrs > a {
  animation: a-mv-catch 1.1s var(--a-ease) both;
}
.p-index-fv__points > li:nth-child(1) { animation-delay: 0.85s; }
.p-index-fv__points > li:nth-child(2) { animation-delay: 0.94s; }
.p-index-fv__points > li:nth-child(3) { animation-delay: 1.03s; }
.p-index-fv__bnrs > a:nth-child(1) { animation-delay: 1.12s; }
.p-index-fv__bnrs > a:nth-child(2) { animation-delay: 1.21s; }

/*-------OSで「視差効果を減らす」にしている人には動きを出さない------*/
@media (prefers-reduced-motion: reduce) {
  .a-fade,
  .a-fade-up,
  .a-fade-l,
  .a-fade-r,
  .a-stagger > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .a-zoom img {
    transform: none;
  }
  .p-index-fv__cell img,
  .p-index-fv__catch,
  .p-index-fv__points > li,
  .p-index-fv__bnrs > a {
    animation: none;
  }
}