@charset "UTF-8";
/* =========================================================
   モーション
   ---------------------------------------------------------
   方針
   - 動かすのは transform と opacity と clip-path だけ。
     レイアウトに関わるプロパティは触らないので、どの画面幅でもズレない。
   - 横方向の移動は使わない。translateX を入れると狭い画面で横スクロールが
     生まれるため、方向を出したいときは clip-path のワイプで表現する。
   - JS が動いたときだけ <html> に .js-motion が付く。付いていない環境
     （JS 無効・prefers-reduced-motion）では最初からすべて表示される。
   ========================================================= */

:root{
  --m-dur:.8s;
  --m-ease:cubic-bezier(.22,.68,.36,1);      /* すっと出て静かに止まる */
  --m-ease-pop:cubic-bezier(.34,1.4,.5,1);   /* 少しだけ跳ねる */
}

/* ---------------------------------------------------------
   共通のあらわれ方
   --------------------------------------------------------- */
.js-motion [data-m]{
  opacity:0;
  transition:
    opacity var(--m-dur) var(--m-ease) var(--m-d,0s),
    transform var(--m-dur) var(--m-ease) var(--m-d,0s),
    clip-path var(--m-dur) var(--m-ease) var(--m-d,0s);
}
.js-motion [data-m].is-in{opacity:1;transform:none;clip-path:none}

.js-motion [data-m="up"]{transform:translate3d(0,38px,0)}
.js-motion [data-m="up-s"]{transform:translate3d(0,22px,0)}
.js-motion [data-m="fade"]{transform:none}
.js-motion [data-m="zoom-in"]{transform:scale(.965)}

/* 少しだけ跳ねる。アイコンやカードなど四角い要素向け */
.js-motion [data-m="pop"]{
  transform:scale(.86);
  transition-timing-function:var(--m-ease-pop);
  transition-duration:.7s;
}

/* 写真や帯は「拭き取る」ように出す。横移動しないので溢れない */
.js-motion [data-m="wipe-l"]{clip-path:inset(0 100% 0 0);transform:none}
.js-motion [data-m="wipe-r"]{clip-path:inset(0 0 0 100%);transform:none}
.js-motion [data-m="wipe-u"]{clip-path:inset(100% 0 0 0);transform:none}
.js-motion [data-m^="wipe"]{transition-duration:1s}

/* ---------------------------------------------------------
   メインビジュアル（スクロールを待たず、読み込み直後から動く）
   --------------------------------------------------------- */
.js-motion .p-mv__photo img{
  animation:mvKen 30s var(--m-ease) both;
}
@keyframes mvKen{
  0%{transform:scale(1.09)}
  16%{transform:scale(1.02)}
  100%{transform:scale(1.06)}
}

.js-motion .p-mv__line1,
.js-motion .p-mv__line2,
.js-motion .p-mv__line3{
  animation:mvLine .95s var(--m-ease) both;
}
.js-motion .p-mv__line1{animation-delay:.20s}
.js-motion .p-mv__line2{animation-delay:.36s}
.js-motion .p-mv__line3{animation-delay:.52s}
@keyframes mvLine{
  from{opacity:0;transform:translate3d(0,30px,0)}
  to{opacity:1;transform:none}
}

.js-motion .p-mv__badge{animation:mvBadge .8s var(--m-ease-pop) both}
.js-motion .p-mv__badge--a{animation-delay:.72s}
.js-motion .p-mv__badge--b{animation-delay:.84s}
.js-motion .p-mv__badge--c{animation-delay:.96s}
.js-motion .p-mv__badge--d{animation-delay:1.08s}
@keyframes mvBadge{
  from{opacity:0;transform:translate3d(0,20px,0) scale(.82)}
  to{opacity:1;transform:none}
}

/* ---------------------------------------------------------
   飾りの動物・葉・花
   あらわれ方は opacity だけ、浮遊は transform だけにしてある。
   別のプロパティなので 2 つのアニメーションを同時にかけても衝突しない。
   --------------------------------------------------------- */
.js-motion .p-mv__animal,
.js-motion .p-about__flower,
.js-motion .p-trouble__animal,
.js-motion .p-trouble__leaf,
.js-motion .p-reason__animal,
.js-motion .p-doctor__leaf,
.js-motion .p-recommend__leaf,
.js-motion .p-blog__animal,
.js-motion .p-blog__leaf,
.js-motion .p-reserve__leaf,
.js-motion .p-clinic__garland{
  animation:decoIn 1.1s var(--m-ease) both, decoFloat 6s ease-in-out infinite;
  animation-delay:1.1s, 2.1s;
}
@keyframes decoIn{from{opacity:0}to{opacity:1}}
@keyframes decoFloat{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  50%{transform:translate3d(0,-9px,0) rotate(-1.6deg)}
}

/* 揺れ方に差をつけて、機械的に見えないようにする */
.js-motion .p-mv__animal--chick,
.js-motion .p-trouble__animal--fox,
.js-motion .p-reason__animal--rabbit,
.js-motion .p-about__flower--b,
.js-motion .p-doctor__leaf--b{animation-duration:1.1s,7.4s;animation-delay:1.3s,2.4s}

.js-motion .p-trouble__leaf,
.js-motion .p-recommend__leaf,
.js-motion .p-blog__leaf,
.js-motion .p-reserve__leaf{animation-duration:1.1s,9s}

/* 右側のガーランドは元から左右反転しているので、その分を含めた動きにする */
.js-motion .p-clinic__garland--r{animation-name:decoIn,decoFloatFlip}
@keyframes decoFloatFlip{
  0%,100%{transform:scaleX(-1) translate3d(0,0,0) rotate(0deg)}
  50%{transform:scaleX(-1) translate3d(0,-9px,0) rotate(-1.6deg)}
}

/* ---------------------------------------------------------
   セクションごとの味つけ
   --------------------------------------------------------- */

/* お悩みアイコン：出たあとにゆっくり呼吸する */
.js-motion .p-trouble__item.is-in .p-trouble__icon{animation:breathe 5.5s ease-in-out 1s infinite}
@keyframes breathe{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.05)}
}

/* 診療時間表の●：左から順に灯る */
.js-motion .p-hours tbody tr.is-in .is-open{animation:markIn .5s var(--m-ease-pop) both}
.js-motion .p-hours tbody tr.is-in td:nth-child(2) .is-open{animation-delay:.05s}
.js-motion .p-hours tbody tr.is-in td:nth-child(3) .is-open{animation-delay:.11s}
.js-motion .p-hours tbody tr.is-in td:nth-child(4) .is-open{animation-delay:.17s}
.js-motion .p-hours tbody tr.is-in td:nth-child(5) .is-open{animation-delay:.23s}
.js-motion .p-hours tbody tr.is-in td:nth-child(6) .is-open{animation-delay:.29s}
.js-motion .p-hours tbody tr.is-in td:nth-child(7) .is-open{animation-delay:.35s}
.js-motion .p-hours tbody tr.is-in td:nth-child(8) .is-open{animation-delay:.41s}
@keyframes markIn{
  from{opacity:0;transform:scale(.3)}
  to{opacity:1;transform:none}
}

/* POINT バッジ：くるっと入る */
.js-motion .p-reason__item [data-m].is-in .p-reason__point{animation:pointIn .8s var(--m-ease-pop) .25s both}
@keyframes pointIn{
  from{opacity:0;transform:scale(.6) rotate(-14deg)}
  to{opacity:1;transform:none}
}

/* ---------------------------------------------------------
   ホバー時の反応
   --------------------------------------------------------- */
.c-btn{transition:background .3s,opacity .25s,transform .3s var(--m-ease),box-shadow .3s}
.c-btn i{transition:transform .3s var(--m-ease)}
@media (hover:hover){
  .c-btn:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(200,8,82,.22)}
  .c-btn:hover i{transform:translate(4px,-50%) rotate(45deg)}
  .l-entry .c-btn:hover i{transform:translate(4px,-50%) rotate(45deg)}
}
.c-btn:active{transform:translateY(-1px)}

/* 矢印つきのリンク */
.p-news__list a i,
.p-recommend__link i,
.p-medical__grid a i,
.p-list__item i{transition:transform .3s var(--m-ease)}
@media (hover:hover){
  .p-news__list a:hover i,
  .p-recommend__link:hover i,
  .p-list__item a:hover i{transform:translateX(5px)}
}

/* 診療案内のアイコンカード */
.p-medical__grid a{transition:transform .3s var(--m-ease)}
.p-medical__grid .p-medical__icon{transition:transform .35s var(--m-ease-pop)}
@media (hover:hover){
  .p-medical__grid a:hover{transform:translateY(-5px)}
  .p-medical__grid a:hover .p-medical__icon{transform:scale(1.12) rotate(-4deg)}
}

/* 写真カードは枠内でゆっくり寄る */
.p-recommend__photo,
.p-blog__thumb{overflow:hidden}
.p-recommend__photo img,
.p-blog__thumb img{transition:transform .7s var(--m-ease)}
.p-recommend__item,
.p-blog__item{transition:transform .35s var(--m-ease)}
@media (hover:hover){
  .p-recommend__item:hover img,
  .p-blog__item:hover img{transform:scale(1.07)}
  .p-recommend__item:hover,
  .p-blog__item:hover{transform:translateY(-5px)}
}

/* 院内ツアーのカード */
.p-tour__item{transition:transform .35s var(--m-ease)}
.p-tour__item img{transition:box-shadow .35s}
@media (hover:hover){
  .p-tour__item:hover{transform:translateY(-5px)}
  .p-tour__item:hover img{box-shadow:0 12px 24px rgba(200,8,82,.16)}
}

/* お知らせの行 */
.p-news__list a{transition:background .3s,padding-left .3s var(--m-ease)}
@media (hover:hover){
  .p-news__list a:hover{background:#fff2f6}
}

/* 目次 */
.p-toc__item a{transition:color .25s,transform .25s var(--m-ease);display:inline-block}
@media (hover:hover){
  .p-toc__item a:hover{color:var(--main);transform:translateX(3px)}
}

/* ---------------------------------------------------------
   ヘッダー：スクロールしたら影をつけ、ロゴをわずかに詰める。
   高さは変えない（sticky の高さを変えると本文が飛ぶため）。
   --------------------------------------------------------- */
.l-header{transition:box-shadow .35s var(--m-ease),background .35s}
.l-header__logo img{transition:transform .35s var(--m-ease);transform-origin:left center}
.l-header.is-scrolled{box-shadow:0 4px 20px rgba(0,0,0,.07)}
.l-header.is-scrolled .l-header__logo img{transform:scale(.92)}

/* ---------------------------------------------------------
   院内ツアーのスライダー：切り替えをなめらかに
   --------------------------------------------------------- */
.p-gallery__slide{
  transition:flex-basis .6s var(--m-ease),opacity .6s var(--m-ease),transform .6s var(--m-ease);
  transform:scale(.96);
}
.p-gallery__slide.is-current{transform:scale(1)}
.p-gallery__slider{touch-action:pan-y}
.p-gallery__nav{transition:transform .3s var(--m-ease),box-shadow .3s}
@media (hover:hover){
  .p-gallery__nav:hover{transform:translateY(-50%) scale(1.12);box-shadow:0 6px 18px rgba(0,0,0,.14)}
}

/* ---------------------------------------------------------
   下層ページ
   --------------------------------------------------------- */
.js-motion .p-pagemv__photo img{animation:mvKen 30s var(--m-ease) both}

/* 見出しの左バーが伸びてから文字が出る */
.js-motion .l-entry > h2[data-m].is-in{animation:none}
.js-motion .l-entry > h3[data-m]{transition-duration:.65s}

/* 目次のリンクは順番に灯す */
.js-motion .p-toc.is-in .p-toc__item{animation:tocIn .5s var(--m-ease) both}
.js-motion .p-toc.is-in .p-toc__item:nth-child(1){animation-delay:.12s}
.js-motion .p-toc.is-in .p-toc__item:nth-child(2){animation-delay:.17s}
.js-motion .p-toc.is-in .p-toc__item:nth-child(3){animation-delay:.22s}
.js-motion .p-toc.is-in .p-toc__item:nth-child(4){animation-delay:.27s}
.js-motion .p-toc.is-in .p-toc__item:nth-child(5){animation-delay:.32s}
.js-motion .p-toc.is-in .p-toc__item:nth-child(6){animation-delay:.37s}
.js-motion .p-toc.is-in .p-toc__item:nth-child(n+7){animation-delay:.42s}
@keyframes tocIn{
  from{opacity:0;transform:translate3d(0,10px,0)}
  to{opacity:1;transform:none}
}

/* ---------------------------------------------------------
   ページ内リンク
   sticky ヘッダーの下に見出しが潜り込まないよう余白を確保する。
   --------------------------------------------------------- */
[id]{scroll-margin-top:calc(var(--header-h) + 24px)}
.js-motion:not(.is-reduced){scroll-behavior:smooth}

/* ---------------------------------------------------------
   動きを減らす設定の端末では、すべて静止させる
   --------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .js-motion [data-m],
  .js-motion [data-m].is-in{
    opacity:1 !important;
    transform:none !important;
    clip-path:none !important;
    transition:none !important;
  }
  .js-motion *,
  .js-motion *::before,
  .js-motion *::after{
    animation:none !important;
    transition-duration:.01ms !important;
  }
  .js-motion{scroll-behavior:auto}
}