@charset "UTF-8";
/* ===============================================
   アニメーション
   - スクロール連動の登場（IntersectionObserver）
   - ホバー時の挙動
   - すべて transform / opacity のみで動かし、レイアウト再計算を起こさない
   - JSが無効なときは何も隠さない（htmlが付いたときだけ初期状態を適用）
   - prefers-reduced-motion: reduce では全停止
   =============================================== */

:root{
  --ease-out:cubic-bezier(.22,1,.36,1);   /* 減速。登場用 */
  --ease-soft:cubic-bezier(.4,0,.2,1);    /* ホバー用 */
  --anim-dur:.7s;
}

/* -----------------------------------------------
   1. スクロールで現れる
   ※ 既定では「普通に表示された状態」。画面に入ったとき .is-in を付けて
      キーフレームで出す。JSが動かなくても内容が隠れることはない。
   ----------------------------------------------- */
@keyframes kc-up   { from{opacity:0;transform:translateY(24px)}  to{opacity:1;transform:none} }
@keyframes kc-down { from{opacity:0;transform:translateY(-18px)} to{opacity:1;transform:none} }
@keyframes kc-left { from{opacity:0;transform:translateX(-32px)} to{opacity:1;transform:none} }
@keyframes kc-right{ from{opacity:0;transform:translateX(32px)}  to{opacity:1;transform:none} }
@keyframes kc-zoom { from{opacity:0;transform:scale(.95)}        to{opacity:1;transform:none} }
@keyframes kc-fade { from{opacity:0}                             to{opacity:1} }
@keyframes kc-photo{ from{opacity:0;transform:translateY(20px) scale(.99)} to{opacity:1;transform:none} }

[data-anim].is-in{
  animation-duration:var(--anim-dur);
  animation-timing-function:var(--ease-out);
  animation-fill-mode:both;
  animation-delay:calc(var(--i, 0) * 55ms + var(--d, 0ms));
}
[data-anim="up"].is-in   { animation-name:kc-up }
[data-anim="down"].is-in { animation-name:kc-down }
[data-anim="left"].is-in { animation-name:kc-left }
[data-anim="right"].is-in{ animation-name:kc-right }
[data-anim="zoom"].is-in { animation-name:kc-zoom }
[data-anim="fade"].is-in { animation-name:kc-fade }
[data-anim="photo"].is-in{ animation-name:kc-photo }

/* 見出しの英字ウォーターマークと黄色いラインを少し遅らせる */
.c-heading.is-in .c-heading__en{animation:kc-up .9s var(--ease-out) .18s both}
.c-heading.is-in .c-heading__ja::after,
.p-news__ja.is-in::after{animation:kc-line .7s var(--ease-out) .35s both}
@keyframes kc-line{from{transform:scaleX(0);transform-origin:left}to{transform:scaleX(1);transform-origin:left}}

/* -----------------------------------------------
   2. FV
   ----------------------------------------------- */
/* 表示中のスライドだけがゆっくり寄る（Ken Burns）。待機中の3枚は変形させない */
.p-fv__slide img{transform:scale(1.05);transition:none}
.p-fv__slide.is-active img{transform:scale(1);transition:transform 7s linear}

/* コピーは読み込み直後に順番に立ち上がる（CSSだけで完結。JSに依存しない） */
.p-fv__label   {animation:kc-up .9s var(--ease-out) .15s both}
.p-fv__title   {animation:kc-up .9s var(--ease-out) .30s both}
.p-fv__chips > li:nth-child(1){animation:kc-up .9s var(--ease-out) .50s both}
.p-fv__chips > li:nth-child(2){animation:kc-up .9s var(--ease-out) .60s both}
.p-fv__chips > li:nth-child(3){animation:kc-up .9s var(--ease-out) .70s both}
.p-fv__label::before{animation:kc-bar .5s var(--ease-out) .20s both}
@keyframes kc-bar{from{transform:scaleY(0);transform-origin:bottom}to{transform:scaleY(1);transform-origin:bottom}}

/* ドットは現在地だけ横に伸びて、残り時間がバーで見える。
   当たり判定は24px角のまま、見た目だけ ::before で描く */
.p-fv__dot{position:relative;transition:width .45s var(--ease-out)}
.p-fv__dot::before{transition:width .45s var(--ease-out), background-color .3s var(--ease-soft)}
.p-fv__dot:hover::before{background:rgba(0,91,171,.55)}
.p-fv__dot.is-active{width:52px}
.p-fv__dot.is-active::before{width:38px;background:rgba(0,91,171,.24)}
.p-fv__dot.is-active::after{
  content:"";position:absolute;left:7px;top:50%;width:38px;height:10px;margin-top:-5px;
  border-radius:999px;background:var(--c-blue);transform-origin:left;transform:scaleX(0);
}
.p-fv__dot.is-active.is-counting::after{
  animation:kc-dot-progress var(--fv-interval, 5000ms) linear forwards;
}
@keyframes kc-dot-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* スクロールを促すインジケーター */
.p-fv__scroll{
  position:absolute;right:40px;bottom:0;z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:11px;font-weight:700;letter-spacing:.22em;color:var(--c-blue);
  writing-mode:vertical-rl;
}
.p-fv__scroll{animation:kc-fade .8s var(--ease-out) 1s both}
.p-fv__scroll::after{
  content:"";width:1px;height:56px;background:currentColor;
  /* 無限には動かさない。最初の数回だけ流して、あとは静止させる */
  animation:kc-scroll 2.2s var(--ease-soft) 1s 4 both;
}
@keyframes kc-scroll{
  0%{transform:scaleY(0);transform-origin:top}
  45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}

/* -----------------------------------------------
   3. 読み進み具合のバー（ヘッダー下）
   ----------------------------------------------- */
.p-progress{
  position:absolute;left:0;right:0;bottom:-3px;height:3px;z-index:101;
  background:linear-gradient(90deg, var(--c-blue), var(--c-green));
  transform:scaleX(0);transform-origin:left;
  will-change:transform;
}
/* スクロールするとヘッダーに影が付いて浮く */
.p-header{transition:box-shadow .3s var(--ease-soft)}
.p-header.is-scrolled{box-shadow:0 4px 20px rgba(0,60,120,.08)}

/* -----------------------------------------------
   4. ホバー時の挙動
   ----------------------------------------------- */

/* 共通ボタン：矢印が右へ滑り、うっすら持ち上がる */
.c-btn{transition:transform .3s var(--ease-soft), box-shadow .3s var(--ease-soft), background-color .3s var(--ease-soft)}
.c-btn .c-btn__arrow{transition:transform .3s var(--ease-soft)}
.c-btn:hover{opacity:1;transform:translateY(-3px)}
.c-btn--blue:hover{box-shadow:0 10px 24px rgba(0,91,171,.28)}
.c-btn--white:hover{box-shadow:0 10px 24px rgba(0,0,0,.16)}
.c-btn:hover .c-btn__arrow{transform:translateX(5px)}

/* 電話／Web予約 */
.c-cta{transition:transform .3s var(--ease-soft), box-shadow .3s var(--ease-soft), filter .3s var(--ease-soft)}
.c-cta:hover{opacity:1;transform:translateY(-3px);filter:saturate(1.08)}
.c-cta--tel:hover{box-shadow:0 10px 24px rgba(0,91,171,.3)}
.c-cta--web:hover{box-shadow:0 10px 24px rgba(154,206,46,.38)}
.c-cta__icon{transition:transform .35s var(--ease-out)}
.c-cta:hover .c-cta__icon{transform:scale(1.12)}

/* 診療案内カード：浮き上がって、アイコンが回り込み、矢印が右へ */
.p-service__card{
  position:relative;overflow:hidden;
  transition:transform .32s var(--ease-soft), box-shadow .32s var(--ease-soft), border-color .32s var(--ease-soft);
}
.p-service__card::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(120deg, var(--c-bg-blue), #f6fbff);
  opacity:0;transition:opacity .32s var(--ease-soft);
}
.p-service__card > *{position:relative;z-index:1}
.p-service__card:hover{
  transform:translateY(-5px);border-color:var(--c-blue);
  box-shadow:0 14px 28px rgba(0,60,120,.13);
}
.p-service__card:hover::before{opacity:1}
.p-service__icon{transition:transform .38s var(--ease-out), background-color .32s var(--ease-soft)}
.p-service__card:hover .p-service__icon{transform:scale(1.1) rotate(-6deg);background:#fff}
.p-service__card .c-btn__arrow{transition:transform .32s var(--ease-soft)}
.p-service__card:hover .c-btn__arrow{transform:translateX(5px)}

/* 当院の特徴：写真がゆっくり寄る */
.p-feature__photo img{transition:transform .8s var(--ease-out)}
.p-feature__item:hover .p-feature__photo img{transform:scale(1.06)}
.p-feature__badge,.p-feature__num{transition:transform .35s var(--ease-out)}
.p-feature__item:hover .p-feature__num{transform:translateY(-2px)}

/* お悩みチップ：色が変わって少し持ち上がる */
.p-concern__chip{transition:transform .28s var(--ease-soft), box-shadow .28s var(--ease-soft), background-color .28s var(--ease-soft)}
.p-concern__chip svg{transition:transform .38s var(--ease-out)}
.p-concern__chip:hover{opacity:1;transform:translateY(-3px);background:#fff;box-shadow:0 10px 20px rgba(0,60,120,.12)}
.p-concern__chip:hover svg{transform:scale(1.18) rotate(-8deg)}
.p-concern__photo,.p-doctor__photo img,.p-about__photos img{transition:transform .8s var(--ease-out)}
.p-concern__photo:hover,.p-about__photos img:hover{transform:scale(1.02)}

/* NEWS / BLOG：内容が右にずれて、左に青いラインが出る */
.p-news__item{position:relative;overflow:hidden;transition:transform .3s var(--ease-soft), box-shadow .3s var(--ease-soft)}
.p-news__item::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--c-blue);transform:scaleY(0);transform-origin:bottom;
  transition:transform .35s var(--ease-out);
}
.p-news__item:hover{opacity:1;transform:translateX(4px);box-shadow:0 10px 22px rgba(0,60,120,.10)}
.p-news__item:hover::before{transform:scaleY(1);transform-origin:top}
.p-news__more{transition:transform .3s var(--ease-soft)}
.p-news__more:hover{opacity:1;transform:translateX(4px)}
.p-news__more svg{transition:transform .3s var(--ease-soft)}
.p-news__more:hover svg{transform:translateX(4px)}

/* 当院についてのチェックリスト：ホバーで少し右へ */
.p-about__list li{transition:transform .28s var(--ease-soft), background-color .28s var(--ease-soft)}
.p-about__list li:hover{transform:translateX(5px);background:#ddeeff}

/* 料金案内：背景写真がゆっくり寄る */
.p-price__band{overflow:hidden}
.p-price__bg{transition:transform 1.1s var(--ease-out)}
.p-price__band:hover .p-price__bg{transform:scale(1.04)}

/* 地図：読み込み後にふわっと出す */
.js-map{opacity:0;transition:opacity .7s var(--ease-out)}
.js-map.is-loaded{opacity:1}

/* -----------------------------------------------
   5. SP調整
   ----------------------------------------------- */
@media screen and (max-width:900px){
  /* 横スライドは画面幅を圧迫するので縦方向に差し替える */
  [data-anim="left"].is-in,
  [data-anim="right"].is-in{animation-name:kc-up}
  [data-anim].is-in{animation-duration:.55s;animation-delay:calc(var(--i, 0) * 40ms + var(--d, 0ms))}
  .p-fv__scroll{display:none}
  .p-fv__slide img{transition:transform 7s linear, opacity .6s}
}

/* -----------------------------------------------
   6. 動きを減らす設定の端末では止める
   ----------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  /* 動きを減らす設定の端末では、すべて即座に表示して動かさない */
  *,*::before,*::after{
    animation:none !important;
    transition-duration:.01ms !important;
  }
  [data-anim],[data-anim].is-in,
  .p-fv__label,.p-fv__title,.p-fv__chips > li,.p-fv__scroll{opacity:1 !important;transform:none !important}
  .p-fv__slide img{transform:none !important}
  .p-fv__dot.is-active::after{transform:scaleX(1)}
  .p-progress{display:none}
}

/* ===============================================
   下層ページのホバー
   =============================================== */

/* 目次：右へずれて、矢印が下を向いたまま滑る */
.p-svc__toclist a{transition:background-color .28s var(--ease-soft), transform .28s var(--ease-soft)}
.p-svc__toclist a:hover{transform:translateX(4px)}
.p-svc__tocarrow{transition:transform .28s var(--ease-soft)}
.p-svc__toclist a:hover .p-svc__tocarrow{transform:translateY(3px)}
.p-svc__tocno{transition:color .28s var(--ease-soft)}

/* 診療案内のメニュー：浮き上がり＋アイコン＋矢印 */
.p-svc__menuitem{
  transition:transform .32s var(--ease-soft), box-shadow .32s var(--ease-soft), border-color .32s var(--ease-soft);
}
.p-svc__menuitem:hover{
  opacity:1;transform:translateY(-4px);
  box-shadow:0 14px 26px rgba(0,60,120,.12);
}
.p-svc__menuicon{transition:transform .38s var(--ease-out)}
.p-svc__menuitem:hover .p-svc__menuicon{transform:scale(1.1) rotate(-6deg)}
.p-svc__menuitem .c-btn__arrow{transition:transform .3s var(--ease-soft)}
.p-svc__menuitem:hover .c-btn__arrow{transform:translateX(5px)}

/* 番号付きカード：うっすら浮かせる */
.p-svc__card{transition:transform .3s var(--ease-soft), box-shadow .3s var(--ease-soft)}
.p-svc__card:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(0,60,120,.09)}
.p-svc__cardno{transition:transform .3s var(--ease-out)}
.p-svc__card:hover .p-svc__cardno{transform:translateY(-2px)}

/* よくある質問：左端に色が差す */
.p-svc__faqitem{position:relative;overflow:hidden;transition:box-shadow .3s var(--ease-soft)}
.p-svc__faqitem::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--c-blue);transform:scaleY(0);transform-origin:bottom;
  transition:transform .35s var(--ease-out);
}
.p-svc__faqitem:hover{box-shadow:0 10px 22px rgba(0,60,120,.08)}
.p-svc__faqitem:hover::before{transform:scaleY(1);transform-origin:top}

/* 箇条書き：右へ少し */
.p-svc__list li{transition:transform .26s var(--ease-soft)}
.p-svc__list li:hover{transform:translateX(4px)}

/* 表：行にマウスを乗せると色が付く */
.p-svc__table tbody tr{transition:background-color .2s var(--ease-soft)}
.p-svc__table tbody tr:hover{background:var(--c-bg-blue)}

/* 投稿本文の見出し（記事ページ） */
.p-post__body h2,.p-post__body h3{scroll-margin-top:calc(var(--header-h) + 16px)}

/* ===============================================
   印刷（アクセス・診療時間・料金を紙に控える方向け）
   =============================================== */
@media print{
  /* 画面用の装飾・操作要素は印刷しない */
  .p-header__nav,.p-megamenu,.p-drawer,.p-drawer-btn,.p-progress,
  .p-fv__scroll,.p-fv__dots,.c-skip,.p-svc__toc,.p-post__nav,
  .p-footer__nav,.p-news,.p-svc__map,.p-info__map,.p-footer__map,
  .c-heading__en,.p-svc__figscroll .p-svc__fignote{display:none !important}

  html,body{background:#fff !important;color:#000 !important;font-size:11pt}
  .p-header{position:static !important;box-shadow:none !important;height:auto}
  .p-header__inner{padding:8mm 0 4mm}
  .p-header__logo img{width:52mm}
  main{padding-top:0 !important}

  /* 背景色はインク節約のため落とし、枠線で区切る */
  .p-svc__sec,.p-about,.p-concern,.p-info,.p-feature,.p-doctor,.p-service,.p-price,
  .p-svc__head,.p-svc__note,.p-svc__card,.p-svc__faqitem{
    background:#fff !important;padding-block:6mm;box-shadow:none !important;
  }
  .p-price__band::before{display:none}
  .p-price__band,.p-price__inner *{color:#000 !important}

  /* リンクは印刷しても行き先が分かるようにURLを添える */
  .p-svc__prose a[href^="http"]::after,
  .p-post__body a[href^="http"]::after{content:" （" attr(href) "）";font-size:9pt;word-break:break-all}

  /* 表と見出しがページ途中で割れないように */
  table,.p-svc__card,.p-svc__faqitem,figure{break-inside:avoid}
  h1,h2,h3{break-after:avoid}
  .p-svc__table,.p-info__table{width:100% !important;min-width:0 !important}
  .p-svc__tablewrap{overflow:visible !important}

  /* 画像は大きくしすぎない */
  img{max-height:70mm;width:auto !important}
  [data-anim]{animation:none !important;opacity:1 !important;transform:none !important}
}