@charset "utf-8"; /* ========================================================================== アニメーション 動きの言語をここ1枚にまとめる。レイアウトを持つプロパティは触らず、 transform / opacity / clip-path / filter だけで動かす（表示位置がずれないため）。 ルール - 本文・カードの登場は「下から少し上へ + フェード」 - 装飾の欧文（ウォーターマーク・ゴースト）は横方向にすべらせる - 写真は clip-path で開き、hover で少し寄る - 並んだ要素は --i の順に遅れて出る（js-stagger） - prefers-reduced-motion では全部止める（末尾） ========================================================================== */ :root { --e-out: cubic-bezier(0.16, 1, 0.3, 1); /* 出現用。最後がゆっくり止まる */ --e-soft: cubic-bezier(0.33, 1, 0.68, 1); /* hover 用 */ --dur-in: 0.9s; --dur-slow: 1.4s; --stagger: 70ms; } /* ========================================================================== 登場アニメーション（main.js が画面に入った要素へ .is-in を付ける） ========================================================================== */ /* html.js は のインラインスクリプトが付ける。 JSが動かない環境では要素を隠さない（本文が読めなくなるのを防ぐ）。 */ .js .js-anim, .js .js-fade { opacity: 0; transition: opacity var(--dur-in) var(--e-out), transform var(--dur-in) var(--e-out), clip-path var(--dur-in) var(--e-out), filter var(--dur-in) var(--e-out); } /* 既定（属性なし）は控えめな浮き上がり */ .js .js-anim, .js .js-fade { transform: translateY(24px); } .js .js-anim[data-anim="up"] { transform: translateY(38px); } .js .js-anim[data-anim="up-sm"] { transform: translateY(16px); } .js .js-anim[data-anim="left"] { transform: translateX(-44px); } .js .js-anim[data-anim="right"] { transform: translateX(44px); } .js .js-anim[data-anim="zoom"] { transform: scale(1.06); } /* 写真を左から開く。動く前の位置を占めたままなので行送りがずれない */ .js .js-anim[data-anim="clip"] { clip-path: inset(0 100% 0 0); transform: none; } .js .js-anim[data-anim="clip-up"] { clip-path: inset(100% 0 0 0); transform: none; } /* 写真の「開きながら少し引く」。ヒーロー級の1枚に使う */ .js .js-anim[data-anim="reveal"] { clip-path: inset(0 0 100% 0); transform: scale(1.05); transition-duration: var(--dur-slow); } /* 見出しの下線・区切り線 */ .js .js-anim[data-anim="line"] { transform: scaleX(0); transform-origin: left center; opacity: 1; } /* かすませてから寄る。リード文やキャッチに使う */ .js .js-anim[data-anim="line"].is-in { transform: scaleX(1); } .js .js-anim[data-anim="blur"] { transform: translateY(20px); filter: blur(6px); } /* 遅らせたいときは data-delay で段を指定する */ .js .js-anim[data-delay="1"] { transition-delay: 0.12s; } .js .js-anim[data-delay="2"] { transition-delay: 0.24s; } .js .js-anim[data-delay="3"] { transition-delay: 0.36s; } .js .js-anim[data-delay="4"] { transition-delay: 0.48s; } /* 画面に入ったら初期状態を解除する。 [data-anim] 側と詳細度をそろえ、必ず後ろに書いて勝たせる。 */ .js .js-anim.is-in, .js .js-fade.is-in { opacity: 1; transform: none; clip-path: inset(0 0 0 0); filter: none; } /* ========================================================================== 並んだ要素の順次表示 親に .js-stagger、子に main.js が --i を振る ========================================================================== */ .js .js-stagger__item { opacity: 0; transform: translateY(28px); transition: opacity 0.75s var(--e-out), transform 0.75s var(--e-out); } /* 横に流れるカード列は、横からすべらせたほうが並びが読みやすい */ .js .js-stagger[data-stagger-anim="side"] .js-stagger__item { transform: translateY(0) translateX(24px); } /* 数の多い一覧（診療案内23件など）は間隔を詰めて待たせない */ .js .js-stagger[data-stagger-anim="quick"] { --stagger: 36ms; } .js .js-stagger.is-in .js-stagger__item { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * var(--stagger)); } /* ========================================================================== FV（初回ロード） ここは JS に頼らない。main.js が落ちてもヒーロー画像が消えないよう、 CSSアニメーション + fill-mode: both で最終状態を必ず残す。 ========================================================================== */ @keyframes hdo-fv-img { from { opacity: 0; transform: scale(1.07); } to { opacity: 1; transform: none; } } @keyframes hdo-fv-cta { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } .p-fv__img { animation: hdo-fv-img 1.8s var(--e-out) both; } .p-fv__cta { animation: hdo-fv-cta 0.8s var(--e-out) 0.7s both; } /* ボタンは地色を左から流し込む */ .p-fv__btn { position: relative; overflow: hidden; z-index: 0; } .p-fv__btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c-ink); transform: translateX(-101%); transition: transform 0.5s var(--e-soft); } .p-fv__btn:hover::after { transform: none; } .p-fv__btn:hover { opacity: 1; } /* ========================================================================== 固定ヘッダー スクロールしたら影を落として、本文との境目をはっきりさせる 高さは変えない（アンカーのオフセットが狂うため） ========================================================================== */ .l-header { transition: box-shadow 0.4s var(--e-soft), border-color 0.4s var(--e-soft); } .l-header.is-scrolled { box-shadow: 0 6px 24px rgba(57, 53, 59, 0.08); } /* 電話番号は下線を伸ばして反応を返す */ .l-header__tel-num { position: relative; } .l-header__tel-num::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform 0.4s var(--e-soft); } .l-header__tel-num:hover::after { transform: scaleX(1); } /* グローバルナビはテキストの下に線を引く */ .l-header__list a { position: relative; display: inline-block; } .l-header__list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px; background: var(--c-gold-dark); transform: scaleX(0); transform-origin: center; transition: transform 0.35s var(--e-soft); } .l-header__list a:hover::after, .l-header__list .current-menu-item > a::after { transform: scaleX(1); } /* ========================================================================== 写真の hover 包む要素で切って、中の img を少し寄せる ========================================================================== */ .p-trouble__item, .p-pickup__photo, .p-case__ba, .p-info__photo, .p-price__photo, .p-doctor__photo { overflow: hidden; } /* REASONS のカードは金の番号がカード上端の外にはみ出す設計なので、 カード自体は切らずに写真の だけを切る。 */ .p-reasons__item > picture { display: block; overflow: hidden; line-height: 0; } .p-trouble__item img, .p-reasons__item > picture img, .p-pickup__photo img, .p-info__photo img, .p-price__photo img, .p-doctor__photo img { transition: transform 0.7s var(--e-soft); } .p-trouble__item:hover img, .p-reasons__item:hover > picture img, .p-pickup__item:hover .p-pickup__photo img { transform: scale(1.06); } /* 写真を持つカードは浮かせる */ .p-trouble__item, .p-reasons__item { transition: transform 0.45s var(--e-soft), box-shadow 0.45s var(--e-soft); } .p-trouble__item:hover, .p-reasons__item:hover { transform: translateY(-5px); box-shadow: 0 14px 30px rgba(57, 53, 59, 0.13); } /* ========================================================================== 診療案内カード ========================================================================== */ .p-menu__item { transition: background 0.4s var(--e-soft), transform 0.4s var(--e-soft), box-shadow 0.4s var(--e-soft); } .p-menu__item:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(57, 53, 59, 0.14); } .p-menu__icon { transition: transform 0.45s var(--e-soft), background-color 0.4s var(--e-soft); } .p-menu__item:hover .p-menu__icon { transform: translateY(-3px) scale(1.06); } .p-menu__more img { transition: transform 0.45s var(--e-soft); } .p-menu__more:hover img { transform: translateX(4px); } /* ========================================================================== お知らせ・ブログの一覧 ========================================================================== */ .c-postlist__item { transition: background 0.35s var(--e-soft); } .c-postlist__item:hover { background: rgba(226, 221, 213, 0.35); } .c-postlist__arrow { transition: transform 0.4s var(--e-soft); } .c-postlist__item:hover .c-postlist__arrow { transform: translateX(5px); } .c-postlist__title { transition: color 0.3s var(--e-soft); } .c-postlist__item:hover .c-postlist__title { color: var(--c-gold-dark); } /* ========================================================================== 症例（BEFORE / AFTER） hover で AFTER を左から出す ========================================================================== */ .p-case__ba { position: relative; } .p-case__ba img { transition: transform 0.7s var(--e-soft); } .p-case__ba:hover img { transform: scale(1.04); } .p-case__badge { transition: background 0.35s var(--e-soft), color 0.35s var(--e-soft); } .p-case__ba:hover .p-case__badge { background: var(--c-gold-dark); color: var(--c-wh); } /* ========================================================================== ボタン・リンクの共通挙動 ========================================================================== */ /* VIEW MORE の矢印は右へ */ .c-more img, .c-more::after { transition: transform 0.4s var(--e-soft); } .c-more:hover img { transform: translateX(5px); } /* 予約CTAは地色をなじませつつ少し浮かせる */ .c-cta { transition: transform 0.4s var(--e-soft), box-shadow 0.4s var(--e-soft), color 0.3s var(--e-soft); } .c-cta:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18); } /* SP追従CTAは指で押した感じを返す */ .l-float__btn { transition: opacity 0.3s var(--e-soft), transform 0.2s var(--e-soft); } .l-float__btn:active { transform: scale(0.97); } /* ========================================================================== 下層ページの部品 ========================================================================== */ .c-toc__list a { transition: color 0.3s var(--e-soft), transform 0.3s var(--e-soft); } .c-toc__list a:hover { transform: translateX(3px); } .c-menucard__icon { transition: transform 0.45s var(--e-soft); } .c-menucard:hover .c-menucard__icon { transform: translateY(-3px) scale(1.06); } .c-menucard__arrow, .p-related__arrow { transition: transform 0.4s var(--e-soft); } .c-menucard:hover .c-menucard__arrow, .p-related__item:hover .p-related__arrow { transform: translateX(4px); } .c-chip { transition: background 0.3s var(--e-soft), color 0.3s var(--e-soft), transform 0.3s var(--e-soft); } .c-chip:hover { transform: translateY(-2px); } .c-sec__fig img, .c-cols__fig img { transition: transform 0.8s var(--e-soft); } .c-sec__fig, .c-cols__fig { overflow: hidden; } .c-sec__fig:hover img, .c-cols__fig:hover img { transform: scale(1.03); } /* FAQの開閉をなめらかにする（高さは grid-template-rows で動かす） */ .c-faq__q { transition: background 0.3s var(--e-soft); } .c-faq__q:hover { background: rgba(168, 128, 63, 0.08); } /* ========================================================================== 動きを減らす設定のとき ========================================================================== */ @media (prefers-reduced-motion: reduce) { .js .js-anim, .js .js-fade, .js .js-stagger__item { opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; transition: none !important; } .p-fv__img, .p-fv__cta { animation: none !important; opacity: 1; transform: none; } .l-header, .l-header__tel-num::after, .l-header__list a::after, .p-fv__btn::after, .p-trouble__item, .p-reasons__item, .p-menu__item, .p-menu__icon, .c-postlist__item, .c-postlist__arrow, .c-cta, .c-chip, .c-menucard__icon, .c-sec__fig img, .c-cols__fig img, .p-case__ba img, .p-trouble__item img, .p-reasons__item > picture img, .p-pickup__photo img { transition: none !important; } } /* ========================================================================== TEAM の連携図 六角形が開いたあと、円が中央から時計回りに順番に現れる。 hover では円が浮き、金の輪が広がり、アイコンが跳ねてラベルが金色になる。 ========================================================================== */ /* 六角形は軽く引きながら現れる */ .js .p-team__hex { opacity: 0; transform: scale(0.94); transition: opacity 1s var(--e-out), transform 1.2s var(--e-out); } .js .p-team__fig.is-in .p-team__hex { opacity: 1; transform: none; } /* 円は時計回り（--i の順）にポップイン */ .js .p-team__node { opacity: 0; transform: scale(0.6); transition: opacity 0.6s var(--e-out), transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); } .js .p-team__fig.is-in .p-team__node { opacity: 1; transform: none; transition-delay: calc(0.28s + var(--i, 0) * 90ms); } /* ---- hover / focus ---- */ .p-team__node-link { transition: transform 0.45s var(--e-soft), box-shadow 0.45s var(--e-soft), color 0.3s var(--e-soft); } .p-team__node-link:hover, .p-team__node-link:focus-visible { transform: translateY(-1.1cqw) scale(1.05); box-shadow: 0 1.6cqw 3.2cqw rgba(57, 53, 59, 0.22); color: var(--c-gold-dark); outline: none; } /* 金の輪が外へ広がる */ .p-team__node-ring { transform: scale(0.86); transition: opacity 0.45s var(--e-soft), transform 0.55s var(--e-out); } .p-team__node-link:hover .p-team__node-ring, .p-team__node-link:focus-visible .p-team__node-ring { opacity: 1; transform: none; } /* アイコンは少し跳ねて、線を金色に寄せる */ .p-team__node-icon { transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } .p-team__node-icon path[fill="#39353B"], .p-team__node-icon path[fill="black"] { transition: fill 0.35s var(--e-soft); } .p-team__node-link:hover .p-team__node-icon, .p-team__node-link:focus-visible .p-team__node-icon { transform: translateY(-0.7cqw) scale(1.06); } .p-team__node-link:hover .p-team__node-icon path[fill="#39353B"], .p-team__node-link:focus-visible .p-team__node-icon path[fill="#39353B"] { fill: var(--c-gold-dark); } /* 触れていない円は少し引いて、選んでいる円を目立たせる */ .p-team__nodes:has(.p-team__node-link:hover) .p-team__node:not(:hover) .p-team__node-link { opacity: 0.72; } .p-team__node .p-team__node-link { opacity: 1; transition: opacity 0.4s var(--e-soft), transform 0.45s var(--e-soft), box-shadow 0.45s var(--e-soft), color 0.3s var(--e-soft); } @media (prefers-reduced-motion: reduce) { .js .p-team__hex, .js .p-team__node { opacity: 1 !important; transform: none !important; transition: none !important; } .p-team__node-link, .p-team__node-icon, .p-team__node-ring { transition: none !important; } } /* ヘッダーのWEB予約ボタン。地色を沈ませて押した感じを返す */ .l-header__cta { position: relative; overflow: hidden; z-index: 0; transition: color 0.3s var(--e-soft); } .l-header__cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c-ink); transform: translateY(101%); transition: transform 0.45s var(--e-soft); } .l-header__cta:hover::after, .l-header__cta:focus-visible::after { transform: none; } .l-header__cta-icon { transition: transform 0.45s var(--e-soft); } .l-header__cta:hover .l-header__cta-icon { transform: translateY(-2px) scale(1.08); } @media (prefers-reduced-motion: reduce) { .l-header__cta::after, .l-header__cta-icon { transition: none !important; } }