@charset "UTF-8";
/* ==========================================================================
   Animation — スクロール連動・ホバー・ロード演出

   設計方針
   - 動きの「量」ではなく「質」で上質さを出す。移動距離は最大32pxまで。
   - イージングは expo-out 系（最初に速く、最後に長く減速）で統一する。
     これが高級感の正体で、linear や ease だと安っぽくなる。
   - スクロールで戻ったときの再生はしない（何度も動くと鬱陶しいため）。
   - prefers-reduced-motion では全て無効化する。前庭障害のある方には
     実害があるので、これは装飾ではなく必須要件。

   使い方
     <div data-anim="fade-up">      … 単体要素
     <ul data-anim-group>            … 子要素を順にずらして出す
       <li data-anim="fade-up">
   JSが .is-inview を付けた時点で最終状態へ遷移する。
   ========================================================================== */

:root {
  /* expo-out。全アニメーションの基準カーブ */
  --e-out: cubic-bezier(.16, 1, .3, 1);
  /* ホバーの戻り。離脱時にもたつかないよう少し速い */
  --e-back: cubic-bezier(.4, 0, .2, 1);

  --anim-dur: .9s;
  --anim-dur-short: .6s;
  --hover-dur: .45s;
  --hover-dur-back: .3s;
}

/* --------------------------------------------------------------------------
   初期状態の隠蔽
   JSが有効なときだけ隠す。JSが落ちても内容は必ず見える状態を保つ。
   -------------------------------------------------------------------------- */
/* ---- fade-up: 基本形。下から浮上しながらフェードイン ---- */
.js [data-anim="fade-up"] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity var(--anim-dur) var(--e-out),
    transform var(--anim-dur) var(--e-out);
}

/* ---- fade: 移動なし。写真の上に重なるテキストなど ---- */
.js [data-anim="fade"] {
  opacity: 0;
  transition: opacity var(--anim-dur) var(--e-out);
}

/* ---- fade-left / right: 左右から。2カラムの片側に使う ---- */
.js [data-anim="fade-left"] {
  opacity: 0;
  transform: translate3d(-32px, 0, 0);
  transition:
    opacity var(--anim-dur) var(--e-out),
    transform var(--anim-dur) var(--e-out);
}
.js [data-anim="fade-right"] {
  opacity: 0;
  transform: translate3d(32px, 0, 0);
  transition:
    opacity var(--anim-dur) var(--e-out),
    transform var(--anim-dur) var(--e-out);
}

/* ---- clip-up: 下から現れるマスク。写真に最も効く ----
   画像そのものは少し拡大した状態から等倍へ戻すことで、
   マスクが上がる動きと連動して奥行きが出る。 */
.js [data-anim="clip-up"] {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.2s var(--e-out);
}
.js [data-anim="clip-up"] > img,
.js [data-anim="clip-up"] img {
  transform: scale(1.12);
  transition: transform 1.4s var(--e-out);
}
.js [data-anim="clip-up"].is-inview {
  clip-path: inset(0 0 0 0);
}
.js [data-anim="clip-up"].is-inview > img,
.js [data-anim="clip-up"].is-inview img {
  transform: scale(1);
}

/* ---- line-grow: 区切り線が中心から伸びる ---- */
.js [data-anim="line-grow"] {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1s var(--e-out);
}
.js [data-anim="line-grow"].is-inview {
  transform: scaleX(1);
}

/* ---- scale-in: バッジ・アイコンなど。わずかに小さい状態から ---- */
.js [data-anim="scale-in"] {
  opacity: 0;
  transform: scale(.88);
  transition:
    opacity var(--anim-dur-short) var(--e-out),
    transform var(--anim-dur-short) var(--e-out);
}

/* ---- 発火後の最終状態（共通） ---- */
.js [data-anim].is-inview {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}
.js [data-anim="line-grow"].is-inview {
  transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   stagger（子要素を順にずらす）
   JS が --anim-i に連番を入れるので、それを遅延に換算する。
   段数が増えても最後の要素が遅れすぎないよう、上限を設ける。
   -------------------------------------------------------------------------- */
.js [data-anim-group] > * [data-anim],
.js [data-anim-group] > [data-anim] {
  transition-delay: calc(var(--anim-i, 0) * 65ms);
}

/* 段数が多いグリッド（MENU 25点など）は間隔を詰める */
.js [data-anim-group="dense"] > * [data-anim],
.js [data-anim-group="dense"] > [data-anim] {
  transition-delay: calc(var(--anim-i, 0) * 38ms);
}

/* --------------------------------------------------------------------------
   ヒーロー（ロード時演出）
   -------------------------------------------------------------------------- */

/* 背景写真：わずかに寄った状態から等倍へ。8秒かけてゆっくり引く。
   「動いている」と気づかせず、奥行きだけを感じさせる速度。 */
.js .p-hero__media img,
.js .p-hero__media picture {
  transform: scale(1.08);
  transition: transform 8s var(--e-out);
}
.js.is-loaded .p-hero__media img,
.js.is-loaded .p-hero__media picture {
  transform: scale(1);
}

/* キャッチコピー：1行ずつ順に浮上する。
   蛍光ペンの背景ごと動かすため span 単位で扱う。 */
.js .p-hero__catch span {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition:
    opacity .9s var(--e-out),
    transform .9s var(--e-out);
}
.js.is-loaded .p-hero__catch span {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.js .p-hero__catch span:nth-child(1) { transition-delay: .25s; }
.js .p-hero__catch span:nth-child(2) { transition-delay: .37s; }
.js .p-hero__catch span:nth-child(3) { transition-delay: .49s; }
.js .p-hero__catch span:nth-child(4) { transition-delay: .61s; }

/* 月桂冠バッジ：コピーの後に、少し跳ねる感じで */
.js .p-hero__badge {
  opacity: 0;
  transform: translate3d(0, 20px, 0) scale(.92);
  transition:
    opacity .8s var(--e-out),
    transform .8s var(--e-out);
}
.js.is-loaded .p-hero__badge {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}
.js .p-hero__badge:nth-child(1) { transition-delay: .8s; }
.js .p-hero__badge:nth-child(2) { transition-delay: .9s; }
.js .p-hero__badge:nth-child(3) { transition-delay: 1s; }

/* ヒーローの視差。JSが --hero-shift を更新する。
   画像だけを動かし、テキストは動かさない（読みづらくなるため）。 */
.js .p-hero__media {
  transform: translate3d(0, var(--hero-shift, 0px), 0);
}

/* --------------------------------------------------------------------------
   ホバー
   共通ルール: 出は .45s、戻りは .3s。枠は動かさず中身を動かす。
   -------------------------------------------------------------------------- */

/* ---- カード共通：浮上 + 影 ---- */
.p-trouble__card,
.p-features__card,
.p-pickup__card,
.p-posts__item,
.p-equip__item {
  transition:
    transform var(--hover-dur-back) var(--e-back),
    box-shadow var(--hover-dur-back) var(--e-back);
}
.p-trouble__card:hover,
.p-features__card:hover,
.p-pickup__card:hover,
.p-posts__item:hover,
.p-equip__item:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 34px rgba(30, 39, 39, .13);
  transition:
    transform var(--hover-dur) var(--e-out),
    box-shadow var(--hover-dur) var(--e-out);
}

/* ---- カード内の画像だけズーム（枠は動かさない） ---- */
.p-trouble__card-img,
.p-features__card-img,
.p-pickup__card-img,
.p-posts__thumb,
.p-equip__img,
.p-case__img,
.p-media__hero {
  overflow: hidden;
}
.p-trouble__card-img img,
.p-features__card-img img,
.p-pickup__card-img img,
.p-posts__thumb img,
.p-equip__img img,
.p-media__hero img {
  transition: transform var(--hover-dur-back) var(--e-back);
}
.p-trouble__card:hover .p-trouble__card-img img,
.p-features__card:hover .p-features__card-img img,
.p-pickup__card:hover .p-pickup__card-img img,
.p-posts__item:hover .p-posts__thumb img,
.p-equip__item:hover .p-equip__img img,
.p-media__hero:hover img {
  transform: scale(1.07);
  transition: transform .7s var(--e-out);
}

/* ---- ボタン：背景を左から流し込む ---- */
.c-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--hover-dur-back) var(--e-back);
}
.c-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: currentColor;
  opacity: .12;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--hover-dur-back) var(--e-back);
}
.c-btn:hover::before {
  transform: scaleX(1);
  transition: transform var(--hover-dur) var(--e-out);
}

/* ---- 診療メニューのアイコングリッド ---- */
.c-menugrid__item {
  transition:
    background-color var(--hover-dur-back) var(--e-back),
    transform var(--hover-dur-back) var(--e-back);
}
.c-menugrid__item:hover {
  transform: translateY(-4px);
  transition:
    background-color var(--hover-dur) var(--e-out),
    transform var(--hover-dur) var(--e-out);
}
.c-menugrid__icon {
  transition: transform var(--hover-dur-back) var(--e-back);
}
.c-menugrid__item:hover .c-menugrid__icon {
  transform: scale(1.12) rotate(-6deg);
  transition: transform var(--hover-dur) var(--e-out);
}

/* ---- TOPのMENUセクション ---- */
.p-menu__item {
  transition:
    background-color var(--hover-dur-back) var(--e-back),
    transform var(--hover-dur-back) var(--e-back);
}
.p-menu__item:hover {
  transform: translateY(-3px);
  transition:
    background-color var(--hover-dur) var(--e-out),
    transform var(--hover-dur) var(--e-out);
}
.p-menu__icon {
  transition: transform var(--hover-dur-back) var(--e-back);
}
.p-menu__item:hover .p-menu__icon {
  transform: scale(1.1) rotate(-6deg);
  transition: transform var(--hover-dur) var(--e-out);
}

/* ---- テキストリンク：下線が左から伸びる ---- */
.c-textlink {
  position: relative;
}
.c-textlink::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--hover-dur-back) var(--e-back);
}
.c-textlink:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform var(--hover-dur) var(--e-out);
}

/* ---- 目次・リンク一覧の矢印 ---- */
.c-linklist > li > a::after {
  transition: transform var(--hover-dur-back) var(--e-back);
}
.c-linklist > li > a:hover::after {
  transform: translateX(4px) rotate(45deg);
  transition: transform var(--hover-dur) var(--e-out);
}

/* ---- グローバルナビ：下線が中央から伸びる ---- */
.l-gnav__link {
  position: relative;
}
.l-gnav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: var(--color-t-main01);
  transform: scaleX(0);
  transition: transform var(--hover-dur-back) var(--e-back);
}
.l-gnav__link:hover::after {
  transform: scaleX(1);
  transition: transform var(--hover-dur) var(--e-out);
}

/* ---- ヘッダーCTA：わずかに浮く ---- */
.l-header__line,
.l-header__reserve {
  transition:
    transform var(--hover-dur-back) var(--e-back),
    box-shadow var(--hover-dur-back) var(--e-back);
}
.l-header__line:hover,
.l-header__reserve:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
  transition:
    transform var(--hover-dur) var(--e-out),
    box-shadow var(--hover-dur) var(--e-out);
}

/* --------------------------------------------------------------------------
   ヘッダーのスクロール連動
   -------------------------------------------------------------------------- */
.l-header {
  transition:
    transform .45s var(--e-out),
    box-shadow .45s var(--e-out),
    height .45s var(--e-out);
}

/* スクロールを始めたら影を落とす */
.js.is-scrolled .l-header {
  box-shadow: 0 2px 18px rgba(30, 39, 39, .10);
}

/* 下方向スクロール中は隠す。上に戻したら即出す。 */
.js.is-nav-hidden .l-header {
  transform: translateY(-100%);
}

/* --------------------------------------------------------------------------
   下層ページ
   -------------------------------------------------------------------------- */

/* ページタイトル部：緑のボックスが左から出る */
.js .p-pagehead__box {
  opacity: 0;
  transform: translate3d(-28px, 0, 0);
  transition:
    opacity 1s var(--e-out),
    transform 1s var(--e-out);
}
.js.is-loaded .p-pagehead__box {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* ページタイトル部の背景写真：ゆっくり引く */
.js .p-pagehead__media img {
  transform: scale(1.08);
  transition: transform 6s var(--e-out);
}
.js.is-loaded .p-pagehead__media img {
  transform: scale(1);
}

/* h2 の下線：発火時に左から伸びる。
   ::after は data-anim を付けられないので、親の .is-inview で制御する。 */
.js .c-under-h2::after {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.1s var(--e-out) .1s;
}
.js .c-under-h2.is-inview::after {
  transform: scaleX(1);
}

/* h3 の縦バー：上から伸びる */
.js .c-under-h3::before {
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform .7s var(--e-out) .1s;
}
.js .c-under-h3.is-inview::before {
  transform: scaleY(1);
}

/* FAQ：Q/Aの丸がわずかに遅れて出る */
.js .c-faq__q::before,
.js .c-faq__a::before {
  opacity: 0;
  transform: scale(.7);
  transition:
    opacity .5s var(--e-out) .15s,
    transform .5s var(--e-out) .15s;
}
.js .c-faq__item.is-inview .c-faq__q::before,
.js .c-faq__item.is-inview .c-faq__a::before {
  opacity: 1;
  transform: scale(1);
}

/* 表：行を順に出す */
.js .c-table tbody tr {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity .6s var(--e-out),
    transform .6s var(--e-out);
}
.js .c-table-wrap.is-inview tbody tr {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.js .c-table-wrap.is-inview tbody tr:nth-child(1) { transition-delay: .05s; }
.js .c-table-wrap.is-inview tbody tr:nth-child(2) { transition-delay: .1s; }
.js .c-table-wrap.is-inview tbody tr:nth-child(3) { transition-delay: .15s; }
.js .c-table-wrap.is-inview tbody tr:nth-child(4) { transition-delay: .2s; }
.js .c-table-wrap.is-inview tbody tr:nth-child(5) { transition-delay: .25s; }
.js .c-table-wrap.is-inview tbody tr:nth-child(n+6) { transition-delay: .3s; }

/* 症例の治療前/治療後ギャラリー */
.js .c-imagegrid figure {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition:
    opacity .7s var(--e-out),
    transform .7s var(--e-out);
}
.js .c-imagegrid.is-inview figure {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.js .c-imagegrid.is-inview figure:nth-child(1) { transition-delay: 0s; }
.js .c-imagegrid.is-inview figure:nth-child(2) { transition-delay: .06s; }
.js .c-imagegrid.is-inview figure:nth-child(3) { transition-delay: .12s; }
.js .c-imagegrid.is-inview figure:nth-child(4) { transition-delay: .18s; }
.js .c-imagegrid.is-inview figure:nth-child(5) { transition-delay: .24s; }
.js .c-imagegrid.is-inview figure:nth-child(n+6) { transition-delay: .3s; }

/* 目次：項目が順に出る */
.js .c-toc li {
  opacity: 0;
  transform: translate3d(-10px, 0, 0);
  transition:
    opacity .5s var(--e-out),
    transform .5s var(--e-out);
}
.js .c-toc.is-inview li {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.js .c-toc.is-inview li:nth-child(1) { transition-delay: .04s; }
.js .c-toc.is-inview li:nth-child(2) { transition-delay: .08s; }
.js .c-toc.is-inview li:nth-child(3) { transition-delay: .12s; }
.js .c-toc.is-inview li:nth-child(4) { transition-delay: .16s; }
.js .c-toc.is-inview li:nth-child(5) { transition-delay: .2s; }
.js .c-toc.is-inview li:nth-child(n+6) { transition-delay: .24s; }

/* --------------------------------------------------------------------------
   モーション低減設定
   OSで「視差効果を減らす」を有効にしている利用者には全て無効化する。
   装飾ではなく必須要件（前庭障害への配慮）。
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .js [data-anim],
  .js [data-anim].is-inview,
  .js .p-hero__catch span,
  .js .p-hero__badge,
  .js .p-pagehead__box,
  .js .c-table tbody tr,
  .js .c-imagegrid figure,
  .js .c-toc li {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }

  .js .p-hero__media,
  .js .p-hero__media img,
  .js .p-hero__media picture,
  .js .p-pagehead__media img,
  .js [data-anim="clip-up"] img {
    transform: none !important;
    transition: none !important;
  }

  .js .c-under-h2::after,
  .js .c-under-h3::before,
  .js .c-faq__q::before,
  .js .c-faq__a::before {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* ホバーの移動もなくす。色変化だけ残す。 */
  .p-trouble__card:hover,
  .p-features__card:hover,
  .p-pickup__card:hover,
  .p-posts__item:hover,
  .p-equip__item:hover,
  .c-menugrid__item:hover,
  .p-menu__item:hover,
  .l-header__line:hover,
  .l-header__reserve:hover {
    transform: none !important;
  }

  .l-header {
    transition: none !important;
  }
  .js.is-nav-hidden .l-header {
    transform: none !important;
  }

  * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}