@charset "UTF-8";
/* =========================================================
   やましろ内科クリニック anim.css — TOP のモーションとホバー
   - 動かすのは transform / translate / scale / opacity / clip-path / filter のみ（実測で合わせた位置を崩さない）
   - 初期非表示は html.js 配下だけ（JS が動かない環境では最初から全部見える）
   - prefers-reduced-motion では全演出を止めて即表示
   ========================================================= */

:root {
	--ease-out: cubic-bezier(.16, 1, .3, 1);      /* 余韻の長い減速（主役） */
	--ease-soft: cubic-bezier(.33, 1, .68, 1);
	--ease-io: cubic-bezier(.65, 0, .35, 1);
	--d-reveal: 1.1s;
}

/* ---------------------------------------------------------
   1. スクロールで現れる（.js-anim / .js-stagger は main.js が .is-in を付ける）
   --------------------------------------------------------- */
.js .js-anim { transition: opacity var(--d-reveal) var(--ease-out), transform var(--d-reveal) var(--ease-out), clip-path 1.3s var(--ease-io), filter var(--d-reveal) var(--ease-out); }
.js .js-anim[data-delay="1"] { transition-delay: .12s; }
.js .js-anim[data-delay="2"] { transition-delay: .24s; }
.js .js-anim[data-delay="3"] { transition-delay: .36s; }

/* up: 下からふわっと */
.js [data-anim="up"]:not(.is-in) { opacity: 0; transform: translate3d(0, 28px, 0); }

/* curtain: 写真・地図が左から幕を開けるように */
.js [data-anim="curtain"]:not(.is-in) { clip-path: inset(0 100% 0 0); }
.js [data-anim="curtain"] { clip-path: inset(0 0 0 0); }
.js [data-anim="curtain"] img { transition: scale 2.2s var(--ease-out); }
.js [data-anim="curtain"]:not(.is-in) img { scale: 1.12; }

/* photo: 下から開く＋ズームアウト */
.js [data-anim="photo"] { clip-path: inset(0 0 0 0); }
.js [data-anim="photo"]:not(.is-in) { clip-path: inset(100% 0 0 0); }
.js [data-anim="photo"] img { transition: scale 2s var(--ease-out); }
.js [data-anim="photo"]:not(.is-in) img { scale: 1.15; }

/* head: セクション見出し（月アイコン→和文がせり上がる→欧文が字間を詰めながら） */
.u-mask { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.u-mask > span { display: inline-block; }
.js [data-anim="head"] .c-heading__icon { transition: opacity .8s var(--ease-out), transform 1.2s var(--ease-out); }
.js [data-anim="head"] .u-mask > span { transition: transform 1.1s var(--ease-out) .12s; }
.js [data-anim="head"] .c-heading__en { transition: opacity 1.2s var(--ease-out) .35s, letter-spacing 1.4s var(--ease-out) .35s; }
.js [data-anim="head"]:not(.is-in) .c-heading__icon { opacity: 0; transform: translateY(-10px) rotate(-30deg) scale(.6); }
.js [data-anim="head"]:not(.is-in) .u-mask > span { transform: translateY(105%); }
.js [data-anim="head"]:not(.is-in) .c-heading__en { opacity: 0; letter-spacing: .3em; }

/* lines: 行ごとにマスクからせり上がる（院長のキャッチ） */
.u-line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.u-line > span { display: inline-block; }
.js [data-anim="lines"] .u-line > span { transition: transform 1.1s var(--ease-out); transition-delay: calc(var(--l, 0) * .14s); }
.js [data-anim="lines"]:not(.is-in) .u-line > span { transform: translateY(110%); }

/* chars: 「Our Features」を 1 文字ずつ */
.u-char { display: inline-block; }
.js [data-anim="chars"] .u-char { transition: opacity .9s var(--ease-out), transform 1.2s var(--ease-out), filter 1s var(--ease-out); transition-delay: calc(var(--c, 0) * .045s); }
.js [data-anim="chars"]:not(.is-in) .u-char { opacity: 0; transform: translate3d(0, .35em, 0) rotate(6deg); filter: blur(6px); }

/* panel: 特徴セクションのベージュ地が右から伸びる */
.js [data-anim="panel"]::before { transition: clip-path 1.6s var(--ease-io); clip-path: inset(0 0 0 0); }
.js [data-anim="panel"]:not(.is-in)::before { clip-path: inset(0 0 0 100%); }

/* feature: 写真→番号→ラベル→見出し→本文 の順で */
.js [data-anim="feature"] .p-feature__img { transition: opacity 1.2s var(--ease-out), scale 1.8s var(--ease-out); }
.js [data-anim="feature"] .p-feature__wave { transition: clip-path 1.4s var(--ease-io) .25s; clip-path: inset(0 0 0 0); }
.js [data-anim="feature"] .p-feature__num { transition: opacity 1s var(--ease-out) .35s, filter 1.2s var(--ease-out) .35s, transform 1.2s var(--ease-out) .35s; }
.js [data-anim="feature"] .p-feature__label { transition: opacity .8s var(--ease-out) .45s, transform .9s var(--ease-out) .45s; }
.js [data-anim="feature"] .p-feature__title { transition: opacity 1s var(--ease-out) .55s, transform 1.1s var(--ease-out) .55s; }
.js [data-anim="feature"] .p-feature__text { transition: opacity 1s var(--ease-out) .7s, transform 1.1s var(--ease-out) .7s; }
.js [data-anim="feature"]:not(.is-in) .p-feature__img { opacity: 0; scale: 1.08; }
.js [data-anim="feature"]:not(.is-in) .p-feature__wave { clip-path: inset(0 100% 0 0); }
.js [data-anim="feature"]:not(.is-in) .p-feature__num { opacity: 0; filter: blur(8px); transform: translate3d(0, 20px, 0); }
.js [data-anim="feature"]:not(.is-in) .p-feature__label { opacity: 0; transform: scale(.85); }
.js [data-anim="feature"]:not(.is-in) .p-feature__title,
.js [data-anim="feature"]:not(.is-in) .p-feature__text { opacity: 0; transform: translate3d(0, 24px, 0); }
.p-feature__label { transform-origin: left center; }

/* license: 資格の罫線が伸び、項目が順番に */
.js [data-anim="license"] { transition: none; }
.js [data-anim="license"] li { transition: opacity .8s var(--ease-out), transform .9s var(--ease-out); transition-delay: calc(.15s + var(--i, 0) * .07s); }
.js [data-anim="license"]:not(.is-in) li { opacity: 0; transform: translate3d(12px, 0, 0); }

/* stagger: 並んだ要素を順番に（main.js が --i と .js-stagger__item を付ける） */
.js .js-stagger__item { transition: opacity .9s var(--ease-out), transform 1s var(--ease-out); transition-delay: calc(var(--i, 0) * .07s); }
.js .js-stagger:not(.is-in) .js-stagger__item { opacity: 0; transform: translate3d(0, 24px, 0); }
.js [data-stagger-anim="row"] .js-stagger__item { transition: opacity .8s var(--ease-out), transform .9s var(--ease-out); transition-delay: calc(var(--i, 0) * .06s); }
.js [data-stagger-anim="row"]:not(.is-in) .js-stagger__item { transform: translate3d(-16px, 0, 0); }

/* 解除（:not(.is-in) で初期値を持たせているので、is-in 側は既定値に戻るだけ） */

/* ---------------------------------------------------------
   2. ファーストビュー（CSS アニメーションのみ。非アクティブタブでも完走する）
   --------------------------------------------------------- */
@keyframes ymsFadeDown { from { opacity: 0; transform: translate3d(0, -14px, 0); } to { opacity: 1; transform: none; } }
@keyframes ymsLineUp { from { transform: translateY(110%); } to { transform: none; } }
@keyframes ymsPhotoWipe { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes ymsUp { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }
@keyframes ymsFloat { 0%, 100% { rotate: 0deg; scale: 1; } 50% { rotate: 8deg; scale: 1.04; } }
@keyframes ymsBreath { 0%, 100% { scale: 1; } 50% { scale: 1.06; } }
@keyframes ymsProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.l-header__inner > * { animation: ymsFadeDown 1s var(--ease-out) both .15s; }
.l-header__nav { animation-delay: .3s; }
.l-header__cta { animation-delay: .45s; }

/* 背景はゆっくり呼吸、リングは漂う（＋マウス位置で少し動く: --mx/--my は main.js） */
.p-mv__bg-img { animation: ymsBreath 18s ease-in-out infinite; translate: calc(var(--mx, 0) * -10px) calc(var(--my, 0) * -10px); transition: translate 1.2s var(--ease-soft); }
.p-mv__ring { animation: ymsFloat 16s ease-in-out infinite; translate: calc(var(--mx, 0) * 28px) calc(var(--my, 0) * 22px); transition: translate 1.4s var(--ease-soft); }

/* スライド切替: 写真はワイプ＋ズームアウト、見出しは行ごとにせり上がる */
.p-mv__title .u-line > span { will-change: transform; }
.p-mv__slide.is-active .p-mv__photo { animation: ymsPhotoWipe 1.5s var(--ease-io) both; }
.p-mv__slide.is-active .p-mv__text > * { animation: none; }
.p-mv__slide.is-active .p-mv__label { animation: ymsUp 1s var(--ease-out) both .35s; }
.p-mv__slide.is-active .p-mv__title .u-line > span { animation: ymsLineUp 1.1s var(--ease-out) both; animation-delay: calc(.5s + var(--l, 0) * .13s); }
.p-mv__slide.is-active .p-mv__tags { animation: ymsUp 1s var(--ease-out) both .85s; }
.p-mv__slide.is-active .p-mv__lead { animation: ymsUp 1s var(--ease-out) both 1s; }
.p-mv__points { animation: ymsUp 1.2s var(--ease-out) both 1.15s; }
.p-mv__photo img { transition: translate 1.2s var(--ease-soft); translate: calc(var(--mx, 0) * 8px) calc(var(--my, 0) * 6px); }

/* ドット → 進行バー付きのピル（自動送りの残り時間が見える） */
.p-mv__dots { animation: ymsUp 1s var(--ease-out) both 1.4s; }
.p-mv__dot { position: relative; overflow: hidden; transition: width .5s var(--ease-out), background-color .3s; }
.p-mv__dot.is-active { width: 34px; border-radius: 99px; background: rgba(255, 255, 255, .75); }
.p-mv__dot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--c-gold); transform: scaleX(0); transform-origin: left; }
.p-mv__dot.is-active::after { animation: ymsProgress var(--mv-dur, 6.5s) linear both; }
.p-mv.is-paused .p-mv__dot.is-active::after { animation-play-state: paused; }
@media (max-width: 1023px) { .p-mv__dot.is-active { width: 24px; } }

/* SP 下部バーは少し遅れて下から */
.l-spbar { animation: ymsUp .9s var(--ease-out) both 1.2s; }

/* ---------------------------------------------------------
   3. ヘッダー: 下スクロールで隠れ、上スクロールで戻る
   --------------------------------------------------------- */
.l-header { transition: background-color .4s, box-shadow .4s, transform .5s var(--ease-out); }
.l-header.is-hidden { transform: translate3d(0, -100%, 0); }
.is-drawer-open .l-header.is-hidden { transform: none; }

/* ドロワー: 開くときに項目が順に */
@keyframes ymsDrawerIn { from { opacity: 0; transform: translate3d(0, 12px, 0); } to { opacity: 1; transform: none; } }
.l-drawer:not([hidden]) { animation: ymsFadeDown .45s var(--ease-out) both; }
.l-drawer:not([hidden]) .l-drawer__acc,
.l-drawer:not([hidden]) .l-drawer__links li,
.l-drawer:not([hidden]) .l-drawer__reserve > * { animation: ymsDrawerIn .6s var(--ease-out) both; }
.l-drawer:not([hidden]) .l-drawer__acc:nth-child(2) { animation-delay: .05s; }
.l-drawer:not([hidden]) .l-drawer__acc:nth-child(3) { animation-delay: .1s; }
.l-drawer:not([hidden]) .l-drawer__links li { animation-delay: .15s; }
.l-drawer:not([hidden]) .l-drawer__reserve > * { animation-delay: .22s; }
.l-drawer__acc-list { overflow: hidden; }
.l-drawer__acc[open] .l-drawer__acc-list li { animation: ymsDrawerIn .45s var(--ease-out) both; }
.l-drawer__acc[open] .l-drawer__acc-list li:nth-child(n+2) { animation-delay: .03s; }
.l-drawer__acc[open] .l-drawer__acc-list li:nth-child(n+4) { animation-delay: .06s; }
.l-drawer__acc[open] .l-drawer__acc-list li:nth-child(n+6) { animation-delay: .09s; }
.l-drawer__acc[open] .l-drawer__acc-list li:nth-child(n+8) { animation-delay: .12s; }

/* タブ: 黒い下地がスライドして切り替わる（PC/SP 共通） */
.p-search__tabs { position: relative; }
.p-search__tab { position: relative; z-index: 1; transition: color .45s var(--ease-out), border-color .45s; }
.p-search__tab-bg { position: absolute; z-index: 0; top: 0; left: 0; height: 100%; width: calc((100% - var(--tab-gap, 14px)) / 2); background: var(--c-text); transition: translate .6s var(--ease-out); pointer-events: none; }
.p-search__tab-bg::after { content: ""; position: absolute; left: 50%; top: 100%; translate: -50% 0; border: 11px solid transparent; border-top-color: var(--c-text); border-bottom: 0; }
.p-search__tabs[data-active="1"] .p-search__tab-bg { translate: calc(100% + var(--tab-gap, 14px)) 0; }
.js .p-search__tab.is-active { background: transparent; }
.js .p-search__tab.is-active::after { display: none; }
.js .p-search__tab:not(.is-active) { border-color: var(--c-gray); }
@media (min-width: 1024px) { .p-search__tabs { --tab-gap: calc(14 * var(--u)); } }
@media (max-width: 1023px) { .p-search__tabs { --tab-gap: calc(10 * var(--s)); } .p-search__tab-bg::after { border-width: calc(8 * var(--s)); border-bottom-width: 0; } }
.p-search__panel.is-switched .c-pill { animation: ymsUp .6s var(--ease-out) both; animation-delay: calc(var(--i, 0) * .035s); }

/* 診療案内の写真: パララックス用に上下へ余白を持たせる（枠の大きさは変えない） */
.p-menu__visual img[data-parallax] { position: relative; top: -12%; height: 124%; }

/* ---------------------------------------------------------
   4. ホバー（マウス操作の端末だけ）
   --------------------------------------------------------- */
.c-btn, .c-pill, .c-mcard, .p-reserve__btn, .l-header__btn, .l-footer__btn, .c-cta, .p-blog__insta a { -webkit-tap-highlight-color: transparent; }
.c-btn__arrow, .c-arrow, .c-mcard__icon, .c-bcard__img img, .p-feature__img, .p-doctor__photo img, .p-banners img { transition: transform .5s var(--ease-out), scale .8s var(--ease-out), translate .5s var(--ease-out), filter .5s; }

/* 共通: 押したとき少し沈む */
.c-btn:active, .c-pill:active, .c-mcard:active, .p-reserve__btn:active, .l-spbar a:active, .c-cta:active { transform: scale(.97); transition-duration: .1s; }

@media (hover: hover) and (pointer: fine) {
	/* ボタン: 光がすっと走り、矢印が前へ */
	.c-btn { overflow: hidden; isolation: isolate; transition: background-color .4s, box-shadow .4s, transform .4s var(--ease-out); }
	.c-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%); translate: -100% 0; transition: translate .9s var(--ease-out); }
	.c-btn:hover { opacity: 1; background: #9f8268; box-shadow: 0 10px 24px -10px rgba(122, 94, 69, .6); transform: translateY(-2px); }
	.c-btn:hover::before { translate: 100% 0; }
	.c-btn:hover .c-btn__arrow { translate: 4px -50%; }

	/* 症状ピル: 金の地が左から満ちる */
	.c-pill { overflow: hidden; isolation: isolate; transition: color .4s, border-color .4s, box-shadow .4s; }
	.c-pill::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #fbf1e4, #f6e2c8); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-out); }
	.c-pill:hover { background: #fff; border-color: var(--c-orange); box-shadow: 0 8px 20px -12px rgba(213, 160, 98, .9); }
	.c-pill:hover::before { transform: scaleX(1); }
	.c-pill:hover .c-arrow { translate: 4px -50%; }

	/* 診療カード: 浮いて、アイコンが少し大きく、矢印が前へ */
	.c-mcard { transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .4s; }
	.c-mcard:hover { transform: translateY(-6px); box-shadow: 0 18px 36px -18px rgba(53, 45, 37, .35); }
	.c-mcard--big:hover { border-color: var(--c-gold); }
	.c-mcard:hover .c-mcard__icon { scale: 1.08; }
	.c-mcard:hover .c-mcard__arrow { translate: 4px 0; }
	.c-mcard:hover .c-mcard__title { color: #8a6c4f; }
	.c-mcard__title { transition: color .4s; }

	/* グローバルナビ: 金の下線が中央から伸びる */
	.l-gnav__link { position: relative; }
	.l-gnav__link::after { content: ""; position: absolute; left: 17.5%; right: 17.5%; bottom: 0; height: 1px; background: var(--c-gold); transform: scaleX(0); transition: transform .5s var(--ease-out); }
	.l-gnav__item:hover > .l-gnav__link::after, .l-gnav__link:focus-visible::after { transform: scaleX(1); }
	.l-gnav__item:hover > .l-gnav__link { color: var(--c-brown); }
	.l-gnav__item:hover .c-caret { rotate: 180deg; }
	.c-caret { transition: rotate .4s var(--ease-out); }
	.l-gnav__sub a { transition: background-color .3s, color .3s, padding-left .4s var(--ease-out); }
	.l-gnav__sub a:hover { padding-left: calc(30 * var(--u)); }

	/* ヘッダー・予約ボタン: 持ち上がって影 */
	.l-header__btn, .p-reserve__btn, .l-footer__btn, .c-cta { position: relative; overflow: hidden; isolation: isolate; transition: transform .4s var(--ease-out), box-shadow .4s, filter .4s; }
	.l-header__btn::before, .p-reserve__btn::before, .l-footer__btn::before, .c-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .3) 50%, transparent 70%); translate: -100% 0; transition: translate .9s var(--ease-out); }
	.l-header__btn:hover, .p-reserve__btn:hover, .l-footer__btn:hover, .c-cta:hover { opacity: 1; transform: translateY(-3px); box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .45); filter: saturate(1.08); }
	.l-header__btn:hover::before, .p-reserve__btn:hover::before, .l-footer__btn:hover::before, .c-cta:hover::before { translate: 100% 0; }
	.l-header__insta img, .l-footer__insta img { transition: transform .5s var(--ease-out); }
	.l-header__insta:hover img, .l-footer__insta:hover img { transform: rotate(-10deg) scale(1.12); }
	.l-header__tel:hover .l-header__tel-num { color: var(--c-brown); }
	.l-header__tel-num { transition: color .3s; }

	/* 特徴・院長の写真: ゆっくり寄る */
	.p-feature__photo:hover .p-feature__img { scale: 1.04; }
	.p-doctor__photo { overflow: hidden; }
	.p-doctor__photo:hover img { scale: 1.03; }

	/* お知らせ: 行に淡い地が流れ、タイトルが少し右へ */
	.p-news__list a { position: relative; isolation: isolate; }
	.p-news__list a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(213, 160, 98, .1), rgba(213, 160, 98, 0)); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-out); }
	.p-news__list a:hover::before { transform: scaleX(1); }
	.p-news__list a span { transition: color .3s, translate .5s var(--ease-out); }
	.p-news__list a:hover span { translate: 8px 0; }

	/* ブログカード: 画像がズーム、題名の色が変わる */
	.c-bcard__img { position: relative; }
	.c-bcard__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(53, 45, 37, 0) 55%, rgba(53, 45, 37, .25)); opacity: 0; transition: opacity .5s; }
	.c-bcard:hover .c-bcard__img::after { opacity: 1; }
	.c-bcard:hover .c-bcard__img img { scale: 1.06; }
	.c-bcard__title { transition: color .3s; }
	.c-bcard:hover .c-bcard__title { color: #8a6c4f; }

	/* Instagram バナー: 枠がグラデーションに、矢印が前へ */
	.p-blog__insta a { transition: border-color .4s, box-shadow .4s, transform .4s var(--ease-out); }
	.p-blog__insta a:hover { opacity: 1; border-color: transparent; border-image: linear-gradient(135deg, #feda75, #fa7e1e 25%, #d62976 50%, #962fbf 75%, #4f5bd5) 1; box-shadow: 0 14px 30px -16px rgba(214, 41, 118, .55); transform: translateY(-3px); }
	.p-blog__insta a:hover .p-blog__insta-arrow { translate: 4px 0; }
	.p-blog__insta-icon { transition: transform .6s var(--ease-out); }
	.p-blog__insta a:hover .p-blog__insta-icon { transform: rotate(-8deg) scale(1.06); }

	/* 外部バナー: 浮く */
	.p-banners a { display: block; transition: transform .4s var(--ease-out), box-shadow .4s; }
	.p-banners a:hover { opacity: 1; transform: translateY(-4px); box-shadow: 0 12px 24px -14px rgba(53, 45, 37, .5); }

	/* フッターのリンク: 下線 */
	.l-footer__nav a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ease-out), opacity .3s; }
	.l-footer__nav a:hover { opacity: 1; background-size: 100% 1px; }

	/* ドロワー */
	.l-drawer__links a, .l-drawer__acc-list a { transition: color .3s, padding-left .4s var(--ease-out); }
	.l-drawer__links a:hover, .l-drawer__acc-list a:hover { color: var(--c-brown); padding-left: 6px; }
	.l-drawer__acc-head { transition: filter .3s; }
	.l-drawer__acc-head:hover { filter: brightness(1.06); }

	/* MV ドット */
	.p-mv__dot:hover { background: #fff; }
}

/* ---------------------------------------------------------
   5. 動きを減らす設定のとき
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.js .js-anim, .js .js-anim *, .js .js-stagger__item { opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; scale: none !important; }
	.js [data-anim="panel"]::before { clip-path: none !important; }
	.p-mv__bg-img, .p-mv__ring { animation: none !important; translate: none !important; }
	[data-parallax] { translate: none !important; }
}