@charset "utf-8";

/* =========================================================
   アニメーション層
   ---------------------------------------------------------
   方針（整形外科サイトなので「静か・上品・読みやすい」を最優先）
   1. 文字は必ず「動き終わりが完全不透明・静止」。読んでいる最中に動かさない。
   2. 使うのは opacity / transform / clip-path のみ（描画が軽い）。
   3. 初期状態を隠すのは JS が動いているときだけ（html.js-anim）。
      JSが無い・失敗した場合は最初から全部見える。
   4. OS で「視差効果を減らす」にしている人には一切動かさない
      （html.js-anim を付けない ＋ 下の @media でも二重に無効化）。
   5. ホバーは「色を薄くする」のをやめ、下線・淡い背景・矢印の移動で
      押せることを伝える。文字色は変えない＝コントラストを落とさない。
   ========================================================= */

:root {
  /* 減速しながら止まる。行き過ぎない上品な曲線 */
  --fh-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --fh-ease-back: cubic-bezier(0.34, 1.4, 0.64, 1);
  --fh-dur: 0.9s;
}

/* ===== 1. スクロールで現れる共通処理 ===== */

.js-anim .fh-r {
  opacity: 0;
  transition:
    opacity var(--fh-dur) var(--fh-ease) var(--fh-delay, 0s),
    transform var(--fh-dur) var(--fh-ease) var(--fh-delay, 0s),
    clip-path var(--fh-dur) var(--fh-ease) var(--fh-delay, 0s);
}

.js-anim .fh-r.is-in {
  opacity: 1;
  transform: none;
  clip-path: inset(0);
}

/* 現れ方のバリエーション */
.js-anim .fh-r--up      { transform: translateY(28px); }
.js-anim .fh-r--up-sm   { transform: translateY(14px); }
.js-anim .fh-r--scale   { transform: scale(1.03); }

.js-anim .fh-r--pop {
  transform: scale(0.72);
  --fh-dur: 0.7s;
  --fh-ease: var(--fh-ease-back);
}

/* 下から立ち上がるワイプ（写真向き） */
.js-anim .fh-r--wipe {
  clip-path: inset(0 0 100% 0);
}

/* 左から現れるワイプ（画面左端まで抜けている写真向き） */
.js-anim .fh-r--wipe-left {
  clip-path: inset(0 100% 0 0);
}

/* ===== 2. セクション見出し：英字の字間がすっと締まる ===== */

.js-anim .c-heading.fh-r .c-heading__en {
  letter-spacing: 0.3em;
  transition: letter-spacing 1s var(--fh-ease) 0.15s;
}

.js-anim .c-heading.fh-r.is-in .c-heading__en {
  letter-spacing: 0.1em;
}

/* ===== 3. MV：表示直後の一連の流れ =====
   JS のクラス付与に頼らず CSS アニメーションで完結させている。
   （JSが失敗しても MV が消えたままにならないようにするため） */

.js-anim .p-mv__img {
  animation: fh-mv-img 1.8s var(--fh-ease) both;
}

@keyframes fh-mv-img {
  from { opacity: 0; transform: scale(1.06); }
  to   { opacity: 1; transform: none; }
}

/* キャッチコピー：1行ずつワイプ（PCは左から／SPは上から） */
.js-anim .p-mv__catch-line {
  animation: fh-mv-catch 1.1s var(--fh-ease) var(--d, 0s) both;
}

.js-anim .p-mv__catch-line:nth-child(1) { --d: 0.35s; }
.js-anim .p-mv__catch-line:nth-child(2) { --d: 0.5s; }

@keyframes fh-mv-catch {
  from {
    opacity: 0;
    clip-path: var(--fh-mv-wipe, inset(0 100% 0 0));
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    clip-path: inset(0);
    transform: none;
  }
}

/* 開業予定バッジ・最寄駅ボックス・リード文
   （PCでは画像に焼き込みのため非表示なのでSPで効く） */
.js-anim .p-mv__badge {
  animation: fh-mv-down 0.8s var(--fh-ease) 0.1s both;
}

.js-anim .p-mv__access {
  animation: fh-mv-up 0.8s var(--fh-ease) 0.75s both;
}

.js-anim .p-mv__lead {
  animation: fh-mv-fade 0.8s ease 0.95s both;
}

@keyframes fh-mv-down {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

@keyframes fh-mv-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@keyframes fh-mv-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ===== 4. 当院の特徴：写真がワイプで立ち上がり、中の写真はゆっくり寄りが戻る ===== */

.p-features__figure {
  overflow: hidden;
  border-radius: var(--r-sm);
}

.js-anim .p-features__item.fh-r img {
  transform: scale(1.08);
  transition: transform 1.4s var(--fh-ease) var(--fh-delay, 0s);
}

.js-anim .p-features__item.fh-r.is-in img {
  transform: none;
}

/* ===== 5. 写真バナー：ゆっくり流れ続ける（ホバー・画面外で停止） ===== */

.js-anim .p-gallery--marquee .p-gallery__row {
  justify-content: flex-start;
  width: max-content;
  /* デザイン同様「左右で写真が見切れている」状態から流れ始めるように半枚ずらす */
  --fh-marquee-offset: -200px;
  animation: fh-marquee 60s linear infinite;
  will-change: transform;
}

.js-anim .p-gallery--marquee:hover .p-gallery__row,
.js-anim .p-gallery--marquee:focus-within .p-gallery__row,
.js-anim .p-gallery--marquee.is-paused .p-gallery__row {
  animation-play-state: paused;
}

@keyframes fh-marquee {
  from { transform: translateX(var(--fh-marquee-offset, 0px)); }
  to { transform: translateX(calc(-50% + var(--fh-marquee-offset, 0px))); }
}

/* ===== 6. ホバー・フォーカス ===== */

a {
  transition:
    opacity 0.25s ease,
    color 0.25s ease,
    background-color 0.25s ease,
    border-color 0.25s ease,
    transform 0.3s var(--fh-ease),
    box-shadow 0.3s ease;
}

/* 既定の「薄くする」は弱める（読みづらさ対策） */
a:hover {
  opacity: 0.82;
}

/* キーボード操作の人に必ず現在位置が分かるように */
a:focus-visible,
button:focus-visible {
  outline: 3px solid rgba(0, 164, 205, 0.55);
  outline-offset: 3px;
  border-radius: 6px;
}

/* --- ヘッダー --- */

.l-header__logo a:hover { opacity: 0.75; }

.l-nav__item:not(.l-nav__item--panel) .l-nav__link::before {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: var(--c-cyan);
  transition: left 0.3s var(--fh-ease), right 0.3s var(--fh-ease);
}

.l-nav__item:not(.l-nav__item--panel) .l-nav__link:hover::before,
.l-nav__item:not(.l-nav__item--panel) .l-nav__link:focus-visible::before {
  left: 0;
  right: 0;
}

.l-nav__link:hover { opacity: 1; }

.l-nav__access:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.l-header__tel:hover,
.l-header__reserve:hover {
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(3, 9, 70, 0.2);
}

.l-header__tel-icon,
.l-header__reserve-icon {
  transition: transform 0.3s var(--fh-ease);
}

.l-header__tel:hover .l-header__tel-icon,
.l-header__reserve:hover .l-header__reserve-icon {
  transform: scale(1.1);
}

/* --- メガメニュー --- */

.l-mega {
  transition:
    opacity 0.28s ease,
    transform 0.28s var(--fh-ease),
    visibility 0.28s;
}

.js-anim .l-mega__list > li {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.3s ease var(--d, 0s),
    transform 0.3s var(--fh-ease) var(--d, 0s);
}

.js-anim .l-nav__item--panel:hover .l-mega__list > li,
.js-anim .l-nav__item--panel:focus-within .l-mega__list > li,
.js-anim .l-nav__item--panel.is-open .l-mega__list > li {
  opacity: 1;
  transform: none;
}

.l-mega__chip {
  transition:
    background-color 0.25s ease,
    transform 0.3s var(--fh-ease),
    box-shadow 0.3s ease;
}

.l-mega__chip:hover {
  opacity: 1;
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(3, 9, 70, 0.1);
}

/* --- 矢印つきテキストリンク --- */

.c-more {
  padding: 6px 12px;
  margin: -6px -12px;
  border-radius: 999px;
  transition: background-color 0.25s ease;
}

.c-more:hover {
  opacity: 1;
  background: rgba(0, 164, 205, 0.1);
}

.c-arrow {
  transition: transform 0.3s var(--fh-ease), box-shadow 0.3s ease;
}

.c-more:hover .c-arrow {
  transform: translateX(4px);
  box-shadow: 0 0 0 4px rgba(0, 164, 205, 0.16);
}

/* --- お知らせの行 --- */

.p-news__link {
  border-radius: 10px;
  transition: background-color 0.25s ease;
}

a.p-news__link:hover {
  opacity: 1;
  background: rgba(0, 164, 205, 0.07);
}

a.p-news__link:hover .p-news__text {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.p-news__cat {
  transition: background-color 0.25s ease;
}

/* --- 診療案内のカード（カード全体がリンク） --- */

.p-medical__item {
  transition:
    transform 0.3s var(--fh-ease),
    box-shadow 0.3s ease,
    background-color 0.25s ease;
}

.p-medical__item:hover {
  opacity: 1;
  transform: translateY(-4px);
  background: #fffdf4;
  box-shadow: 0 14px 28px rgba(3, 9, 70, 0.12);
}

.p-medical__icon {
  transition: transform 0.3s var(--fh-ease), box-shadow 0.3s ease;
}

.p-medical__item:hover .p-medical__icon {
  transform: scale(1.07);
  box-shadow: 0 0 0 5px rgba(0, 164, 205, 0.12);
}

/* 押せることが分かるように、ホバー中だけ見出しに下線 */
.p-medical__item:hover .p-medical__title {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* --- 症状・疾患のチップ --- */

.p-symptoms__chip {
  transition:
    background-color 0.25s ease,
    transform 0.3s var(--fh-ease),
    box-shadow 0.3s ease;
}

.p-symptoms__chip:hover {
  opacity: 1;
  transform: translateY(-3px);
  background: #e2f3f8;
  box-shadow: 0 10px 20px rgba(3, 9, 70, 0.1);
}

/* --- ご予約ボタン --- */

.p-contact__btn {
  transition:
    transform 0.3s var(--fh-ease),
    box-shadow 0.3s ease,
    border-color 0.25s ease;
}

.p-contact__btn:hover {
  opacity: 1;
  transform: translateY(-3px);
  border-color: rgba(3, 9, 70, 0.22);
  box-shadow: 0 14px 30px rgba(3, 9, 70, 0.14);
}

.p-contact__icon {
  transition: transform 0.3s var(--fh-ease);
}

.p-contact__btn:hover .p-contact__icon {
  transform: scale(1.08);
}

/* --- フッター --- */

.l-footer__list a:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ===== 7. SP：ドロワー ===== */

@media (max-width: 767px) {
  .l-header__burger-bars,
  .l-header__burger-bars::before,
  .l-header__burger-bars::after {
    transition: transform 0.3s var(--fh-ease), opacity 0.2s ease;
  }

  .l-header__burger:hover .l-header__burger-bars::before { transform: translateY(-1px); }
  .l-header__burger:hover .l-header__burger-bars::after { transform: translateY(1px); }

  .js-anim .l-drawer {
    transform: translateX(100%);
    transition: transform 0.45s var(--fh-ease);
  }

  .js-anim .l-drawer.is-open {
    transform: none;
  }

  .js-anim .l-drawer__item {
    opacity: 0;
    transform: translateY(12px);
    transition:
      opacity 0.5s ease var(--d, 0s),
      transform 0.5s var(--fh-ease) var(--d, 0s);
  }

  .js-anim .l-drawer.is-open .l-drawer__item {
    opacity: 1;
    transform: none;
  }

  .js-anim .l-drawer__cta {
    transform: translateY(100%);
    transition: transform 0.45s var(--fh-ease) 0.15s;
  }

  .js-anim .l-drawer.is-open .l-drawer__cta {
    transform: none;
  }

  .l-drawer__close {
    transition: transform 0.3s var(--fh-ease);
  }

  .l-drawer__close:hover {
    transform: rotate(90deg);
  }

  /* アコーディオン（高さを 0fr → 1fr で滑らかに開く） */
  .l-drawer__subwrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s var(--fh-ease);
  }

  .l-drawer__subwrap.is-open {
    grid-template-rows: 1fr;
  }

  .l-drawer__sub {
    overflow: hidden;
    visibility: hidden;
    transition: visibility 0.4s;
  }

  .l-drawer__subwrap.is-open .l-drawer__sub {
    visibility: visible;
  }

  .l-drawer__sub a:hover {
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* SPのキャッチコピーは縦書きなので上から下へワイプ */
  .js-anim .p-mv__catch-line {
    --fh-mv-wipe: inset(0 0 100% 0);
  }

  /* 写真バナーはSPの写真幅（276px）に合わせてずらす */
  .js-anim .p-gallery--marquee .p-gallery__row {
    --fh-marquee-offset: -138px;
  }
}

/* ===== 8. 「視差効果を減らす」設定への配慮（二重の保険） ===== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .js-anim .fh-r,
  .js-anim .p-mv__img,
  .js-anim .p-mv__catch-line,
  .js-anim .p-mv__badge,
  .js-anim .p-mv__access,
  .js-anim .p-mv__lead,
  .js-anim .l-mega__list > li,
  .js-anim .l-drawer__item {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}