/* トップページの動き。
   精神科の病院なので、目を引くより「落ち着いていて上質」に寄せる。
   ・移動量は小さく（最大 32px）、時間は長め（0.7〜0.9s）、イージングは減速のみ
   ・動かすのは transform / opacity / clip-path だけ（レイアウトを再計算させない）
   ・prefers-reduced-motion では登場アニメを一切かけない（.nkb-motion が付かない）

   `.nkb-motion` は header.php のインラインスクリプトが <html> に付ける。
   JS が動かない環境では付かないので、要素は最初から見えたままになる。 */

/* ===== 登場（スクロール連動） ===== */
.nkb-motion [data-anim] {
  opacity: 0;
  transition:
    opacity .8s cubic-bezier(.22, .61, .36, 1) var(--anim-delay, 0ms),
    translate .8s cubic-bezier(.22, .61, .36, 1) var(--anim-delay, 0ms),
    scale .8s cubic-bezier(.22, .61, .36, 1) var(--anim-delay, 0ms),
    clip-path .9s cubic-bezier(.22, .61, .36, 1) var(--anim-delay, 0ms);
}
.nkb-motion [data-anim="up"]    { translate: 0 32px; }
.nkb-motion [data-anim="left"]  { translate: -40px 0; }
.nkb-motion [data-anim="right"] { translate: 40px 0; }
.nkb-motion [data-anim="zoom"]  { scale: .96; }
/* 写真も文字と同じ「ふわっと浮き上がる」出し方にそろえる。
   以前は下から布をめくる（clip-path）動きで、文字のフェードと揃わず
   ちぐはぐに見えるとの指摘があったため。 */
.nkb-motion [data-anim="wipe"] { opacity: 0; translate: 0 24px; }

.nkb-motion [data-anim].is-in {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  clip-path: inset(0 0 0 0);
}

/* 見出しの罫線は中央から左右へ伸ばす。
   JS が対象にした見出し（data-anim が付いたもの）だけを縮めておく。
   対象外の見出しまで縮めると、is-in が付かず罫線が出ないままになる。 */
.nkb-motion .c-heading--center[data-anim] .c-heading__ja::before,
.nkb-motion .c-heading--center[data-anim] .c-heading__ja::after {
  scale: 0 1;
  transition: scale .9s cubic-bezier(.22, .61, .36, 1) calc(var(--anim-delay, 0ms) + 150ms);
}
.nkb-motion .c-heading--center[data-anim] .c-heading__ja::before { transform-origin: right center; }
.nkb-motion .c-heading--center[data-anim] .c-heading__ja::after { transform-origin: left center; }
.nkb-motion .c-heading--center[data-anim].is-in .c-heading__ja::before,
.nkb-motion .c-heading--center[data-anim].is-in .c-heading__ja::after { scale: 1 1; }

/* 下層ページの見出し（c-h2）も同じ考え方で */
.nkb-motion .c-h2[data-anim]::before,
.nkb-motion .c-h2[data-anim]::after { scale: 0 1; transition: scale .9s cubic-bezier(.22, .61, .36, 1) 150ms; }
.nkb-motion .c-h2[data-anim]::before { transform-origin: right center; }
.nkb-motion .c-h2[data-anim]::after { transform-origin: left center; }
.nkb-motion .c-h2[data-anim].is-in::before,
.nkb-motion .c-h2[data-anim].is-in::after { scale: 1 1; }

/* ===== FV ===== */
/* コピーは読み込み直後にゆっくり上がる */
.nkb-motion .p-fv__title,
.nkb-motion .p-fv__lead {
  opacity: 0;
  translate: 0 22px;
  animation: nkb-fv-in 1.1s cubic-bezier(.22, .61, .36, 1) forwards;
}
.nkb-motion .p-fv__lead { animation-delay: .25s; }
@keyframes nkb-fv-in {
  to { opacity: 1; translate: 0 0; }
}

/* スライドの現在位置。棒が左から伸びて次に進む合図になる。 */
.p-fv__dots {
  position: absolute;
  left: 50%;
  bottom: 34px;
  translate: -50% 0;
  z-index: 3;
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.p-fv__dot {
  position: relative;
  width: 46px;
  height: 3px;
  padding: 12px 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.p-fv__dot::before,
.p-fv__dot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  height: 3px;
  border-radius: 3px;
  translate: 0 -50%;
}
.p-fv__dot::before { width: 100%; background: rgba(255, 255, 255, .45); }
.p-fv__dot::after { width: 0; background: var(--c-wh); transition: width .3s linear; }
.p-fv__dot[aria-current="true"]::after { width: 100%; transition: width var(--fv-duration, 6s) linear; }
.p-fv__dot:hover::before { background: rgba(255, 255, 255, .7); }

/* ===== ヘッダー ===== */
/* 少しスクロールしたら高さを詰めて影を出す。本文の邪魔をしない。 */
.l-header {
  transition: height .35s ease, box-shadow .35s ease, background-color .35s ease;
}
.l-header__inner { transition: height .35s cubic-bezier(.22, .61, .36, 1); }
.l-header.is-scrolled {
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 2px 16px rgba(8, 76, 38, .08);
}
.l-header.is-scrolled .l-header__inner { height: 74px; }
/* 2 段目も一緒に詰める。SNS は残したままにしたいので消さずに縮める。 */
.l-header__sub { transition: height .35s cubic-bezier(.22, .61, .36, 1); }
.l-header.is-scrolled .l-header__sub { height: 34px; }
.l-header.is-scrolled .l-gnav__item > a { padding-block: 25px; }
.l-header__logo,
.l-header__tel-num { transition: scale .35s cubic-bezier(.22, .61, .36, 1); }
.l-header.is-scrolled .l-header__logo { scale: .92; transform-origin: left center; }

/* グローバルナビ：下線が中央から伸びる */
.l-gnav__item > a { position: relative; }
.l-gnav__item > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 26px;
  height: 1.5px;
  background: var(--c-green-sns);
  scale: 0 1;
  transition: scale .3s cubic-bezier(.22, .61, .36, 1);
}
.l-gnav__item:hover > a::after,
.l-gnav__item.is-current > a::after { scale: 1 1; }
.l-header.is-scrolled .l-gnav__item > a::after { bottom: 13px; }
.l-gnav__caret { transition: rotate .3s ease, opacity .3s ease; }
.l-gnav__item:hover .l-gnav__caret { rotate: 225deg; translate: 0 1px; opacity: 1; }
/* パネルはふわっと下りてくる */
.l-gnav__panel { translate: -50% -8px; transition: opacity .25s, visibility .25s, translate .25s cubic-bezier(.22, .61, .36, 1); }
.l-gnav__item--has-child:hover .l-gnav__panel,
.l-gnav__item--has-child:focus-within .l-gnav__panel { translate: -50% 0; }
.l-gnav__child a { transition: background .2s, padding-left .2s; }
.l-gnav__child > li > a:hover { padding-left: 27px; }

/* ===== ホバー：共通 =====
   base.css の「リンクは薄くなる」だけだと、どこを触っても同じ反応で安く見える。
   面を持つものは浮かせ、写真は寄り、矢印は進む——役割ごとに反応を変える。 */
a { transition: opacity .25s, color .25s; }

.p-news__item a,
.p-service__card,
.p-service__item a,
.p-disease__item a,
.p-support__item a,
.p-info__item a,
.p-links__item img,
.p-banner__list a,
.p-popular__item a { transition: translate .35s cubic-bezier(.22, .61, .36, 1), box-shadow .35s ease, background-color .3s ease; }

/* 個別の反応を付けた要素は、既定の「薄くする」を止める */
.p-news__item a:hover,
.p-service__card a:hover,
.p-service__item a:hover,
.p-disease__item a:hover,
.p-support__item a:hover,
.p-info__item a:hover,
.p-links__item a:hover,
.p-banner__list a:hover,
.p-popular__item a:hover,
.p-first__card a:hover,
.p-feature__body a:hover,
.p-hours__tel a:hover,
.l-gnav__item > a:hover,
.l-gnav__child a:hover { opacity: 1; }

/* 丸矢印：円が塗られて矢印が右へ進む */
.c-link__arrow { transition: background-color .3s ease, border-color .3s ease; }
.c-link__arrow::before,
.c-link__arrow::after { transition: background-color .3s ease, translate .3s cubic-bezier(.22, .61, .36, 1); }
a:hover .c-link__arrow,
.p-service__item a:hover .c-link__arrow { background: var(--c-green-mid); border-color: var(--c-green-mid); }
a:hover .c-link__arrow::before,
a:hover .c-link__arrow::after { background: var(--c-wh); }
a:hover .c-link__arrow::before { translate: 2px -50%; }
a:hover .c-link__arrow::after { translate: 2px -50%; }

/* ===== ホバー：セクションごと ===== */

/* お知らせ：行が右へ少し送られ、タイトルに下線が伸びる */
.p-news__item a:hover { translate: 6px 0; }
.p-news__title { background-image: linear-gradient(var(--c-green-mid), var(--c-green-mid)); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .4s cubic-bezier(.22, .61, .36, 1); }
.p-news__item a:hover .p-news__title { background-size: 100% 1px; }

/* 診療案内（大カード）：写真が寄り、バッジが少し持ち上がる */
/* 写真のはみ出しは内側の .p-service__thumb-media で切る。
   .p-service__thumb 自体に overflow:hidden を掛けると、下端をまたぐように
   配置した .p-service__badge の丸が半分切れてしまう。 */
.p-service__thumb-media { overflow: hidden; }
.p-service__thumb img { transition: scale .6s cubic-bezier(.22, .61, .36, 1); }
.p-service__card:hover { translate: 0 -6px; box-shadow: 0 14px 32px rgba(8, 76, 38, .13); }
.p-service__card:hover .p-service__thumb img { scale: 1.06; }
.p-service__badge { transition: translate .35s cubic-bezier(.22, .61, .36, 1), background-color .3s ease; }
.p-service__card:hover .p-service__badge { translate: -50% calc(50% - 4px); background: #0a6432; }

/* 診療案内（小カード）：アイコンの円が塗られる */
.p-service__icon { transition: background-color .3s ease, color .3s ease, border-color .3s ease, rotate .5s cubic-bezier(.22, .61, .36, 1); }
.p-service__item a:hover { translate: 0 -4px; box-shadow: 0 12px 26px rgba(8, 76, 38, .12); }
.p-service__item a:hover .p-service__icon { background: var(--c-green-mid); border-color: var(--c-green-mid); color: var(--c-wh); }
.p-service__item--outline a:hover { background: rgba(255, 255, 255, .7); }

/* 対応疾患：数が多いので反応は控えめに。アイコンだけ軽く弾ませる。 */
.p-disease__icon { transition: scale .35s cubic-bezier(.34, 1.56, .64, 1); }
.p-disease__item a:hover { translate: 0 -4px; box-shadow: 0 12px 24px rgba(8, 76, 38, .12); }
.p-disease__item a:hover .p-disease__icon { scale: 1.12; }

/* 病院案内：暗幕が薄まり写真が寄る。ラベルの下に線が伸びる。 */
.p-info__item img { transition: scale .6s cubic-bezier(.22, .61, .36, 1); }
.p-info__item a::after { transition: background-color .4s ease; }
.p-info__item a:hover img { scale: 1.07; }
.p-info__item a:hover::after { background: rgba(0, 0, 0, .18); }
/* ラベルは top.css で position:absolute / inset:0 が当たっている。
   ここで position を上書きすると写真の外に落ちるので触らない。 */
.p-info__label::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(50% - 22px);
  width: 0;
  height: 1px;
  background: var(--c-wh);
  translate: -50% 0;
  transition: width .4s cubic-bezier(.22, .61, .36, 1);
}
.p-info__item a:hover .p-info__label::after { width: 64px; }

/* 初めての方へ：背景写真がゆっくり寄る（カードの上では止める） */
.p-first { overflow: hidden; }
.p-first__bg { transition: scale 1.2s cubic-bezier(.22, .61, .36, 1); }
.p-first:hover .p-first__bg { scale: 1.04; }

/* 特徴：写真が寄る */
.p-feature__thumb { overflow: hidden; border-radius: 4px; }
.p-feature__thumb img { transition: scale .7s cubic-bezier(.22, .61, .36, 1); }
.p-feature__row:hover .p-feature__thumb img { scale: 1.05; }

/* 公的支援・関連施設・よくアクセス */
.p-support__item a:hover { translate: 0 -5px; box-shadow: 0 14px 28px rgba(8, 76, 38, .13); }
.p-links__item img { border-radius: 4px; }
.p-links__item a:hover { opacity: 1; }
.p-popular__item a:hover { translate: 0 -4px; }
.p-popular__icon--outline { transition: background-color .3s ease, color .3s ease, border-color .3s ease; }
.p-popular__item a:hover .p-popular__icon--outline { background: var(--c-green-mid); border-color: var(--c-green-mid); color: var(--c-wh); }
.p-popular__item a { border-top-color: var(--c-green-mid); transition: translate .35s cubic-bezier(.22, .61, .36, 1), border-top-color .3s ease; }
.p-popular__item a:hover { border-top-color: var(--c-green-deep); }

/* バナー：わずかに浮かせて影を足す */
.p-banner__list a { display: block; border-radius: 4px; overflow: hidden; }
.p-banner__list a:hover { translate: 0 -4px; box-shadow: 0 12px 26px rgba(8, 76, 38, .16); }

/* 電話番号：下線が伸びる */
.p-hours__tel a { display: inline-flex; }
.p-hours__tel a svg { transition: rotate .5s cubic-bezier(.34, 1.56, .64, 1); }
.p-hours__tel a:hover svg { rotate: -12deg; }

/* フッター：リンクの下線が左から伸びる */
.l-footer__col a,
.l-footer__addr a {
  background-image: linear-gradient(var(--c-green-mid), var(--c-green-mid));
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .35s cubic-bezier(.22, .61, .36, 1);
}
.l-footer__col a:hover,
.l-footer__addr a:hover { background-size: 100% 1px; opacity: 1; }

/* ===== ページ先頭へ戻る ===== */
.c-totop {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 80;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--c-green-mid);
  box-shadow: 0 6px 18px rgba(8, 76, 38, .14);
  color: var(--c-green-deep);
  opacity: 0;
  visibility: hidden;
  translate: 0 12px;
  transition: opacity .35s ease, visibility .35s ease, translate .35s cubic-bezier(.22, .61, .36, 1), background-color .3s ease;
}
.c-totop.is-shown { opacity: 1; visibility: visible; translate: 0 0; }
.c-totop:hover { background: var(--c-green-deep); color: var(--c-wh); opacity: 1; }
.c-totop svg { width: 20px; height: 20px; }

@media (max-width: 767px) {
  .c-totop { right: 14px; bottom: 78px; width: 44px; height: 44px; }
  .p-fv__dots { bottom: 10px; gap: 8px; }
  /* 指で押せるよう、見た目の棒は同じでも上下の余白で 44px を確保する */
  .p-fv__dot { width: 44px; padding-block: 21px; }
  /* スマホは指で触れた瞬間に浮くと落ち着かないので、面の移動は止める */
  .nkb-motion [data-anim="up"] { translate: 0 22px; }
  .p-news__item a:hover,
  .p-service__item a:hover,
  .p-disease__item a:hover,
  .p-support__item a:hover,
  .p-popular__item a:hover,
  .p-banner__list a:hover,
  .p-service__card:hover { translate: 0 0; }
}

/* ===== SP の横スクロール防止 =====
   375px 幅では translate: ±40px のぶん本文が画面外にはみ出し、
   スクロールして is-in が付くまで横スクロールバーが出てしまう
   （トップの「当院の特徴」= .p-feature__row--rev）。
   SP では横移動をやめて、ほかと同じ縦の登場にそろえる。
   ※ 視差を抑える設定の指定より前に置くこと（あちらで打ち消せるように）。 */
@media (max-width: 767px) {
  .nkb-motion [data-anim="left"],
  .nkb-motion [data-anim="right"] { translate: 0 24px; }
}

/* 視差を抑える設定のときは、登場も移動も一切させない */
@media (prefers-reduced-motion: reduce) {
  .nkb-motion [data-anim],
  .nkb-motion [data-anim].is-in {
    opacity: 1;
    translate: none;
    scale: none;
    clip-path: none;
    transition: none;
  }
  .nkb-motion .p-fv__title,
  .nkb-motion .p-fv__lead { opacity: 1; translate: none; animation: none; }
  .p-fv__dot::after { transition: none; }
}