@charset "UTF-8";
/* =========================================================
   新宿フロントタワー歯科 anim.css — TOP のモーションとホバー
   - 動かすのは transform / translate / scale / opacity / clip-path / filter のみ（実測で合わせた位置を崩さない）
   - 初期非表示は html.js 配下だけ。main.js が .is-in を付ける（対象は main.js の REVEAL と同じ）
   - prefers-reduced-motion では全演出を止めて即表示
   - 2026-10-16 医院のご要望（画面を見ていて酔う）: ズーム・パララックス・マウス追従・ぼかし・横移動をやめ、
     出現は短いフェード＋8px 以内の縦移動に。MV・下層ヒーローの写真はフェードのみ
   ========================================================= */

:root {
	--ease-out: cubic-bezier(.16, 1, .3, 1);
	--ease-soft: cubic-bezier(.33, 1, .68, 1);
	--ease-io: cubic-bezier(.77, 0, .18, 1);
	--gold-shine: linear-gradient(100deg, #e8ce9d 0%, #e8ce9d 42%, #fff6e0 50%, #e8ce9d 58%, #e8ce9d 100%);
}

/* ---------------------------------------------------------
   0. 共通の出現（.js 配下で :not(.is-in) のときだけ初期状態）
   --------------------------------------------------------- */
.js .a-up,
.js .p-posts__title,
.js .p-access__title,
.js .p-price__head,
.js .p-menu__group-title,
.js .l-main .p-posts .c-btn,
.js .l-footer__inner {
	transition: opacity .45s var(--ease-out), transform .54s var(--ease-out);
}
.js .p-posts__title:not(.is-in),
.js .p-access__title:not(.is-in),
.js .p-price__head:not(.is-in),
.js .p-menu__group-title:not(.is-in),
.js .l-main .p-posts .c-btn:not(.is-in) {
	opacity: 0;
	transform: translate3d(0, 8px, 0);
}
.js .l-footer__inner:not(.is-in) {
	opacity: 0;
	transform: translate3d(0, 8px, 0);
}

/* 見出し: 2色の四角が上下からすれ違って揃い、欧文はぼかし＋広い字間から締まる */
.js .c-ico::before,
.js .c-ico::after {
	transition: transform .45s var(--ease-out), opacity .27s;
}
.js .c-title:not(.is-in) .c-ico::before,
.js .c-head:not(.is-in) .c-ico::before,
.js .p-posts__title:not(.is-in) .c-ico::before,
.js .p-menu__group-title:not(.is-in) .c-ico::before {
	opacity: 0;
	transform: translate3d(0, -8px, 0);
}
.js .c-title:not(.is-in) .c-ico::after,
.js .c-head:not(.is-in) .c-ico::after,
.js .p-posts__title:not(.is-in) .c-ico::after,
.js .p-menu__group-title:not(.is-in) .c-ico::after {
	opacity: 0;
	transform: translate3d(0, 8px, 0);
}
.js .c-title__en,
.js .c-head__en {
	transition: opacity .54s var(--ease-out) .2s, filter .54s var(--ease-out) .2s, letter-spacing .72s var(--ease-out) .2s;
}
.js .c-title:not(.is-in) .c-title__en {
	opacity: 0;
}
.js .c-head:not(.is-in) .c-head__en {
	opacity: 0;
}
.js .c-title__ja,
.js .c-head__title {
	transition: opacity .45s var(--ease-out) .2s, transform .54s var(--ease-out) .2s, filter .54s var(--ease-out) .2s;
}
.js .c-title:not(.is-in) .c-title__ja,
.js .c-head:not(.is-in) .c-head__title {
	opacity: 0;
	transform: translate3d(0, 8px, 0);
}

/* 並んだ要素を順番に（main.js がグループの出現時に子へ --i と .is-in を付ける） */
.js .a-item {
	transition: opacity .41s var(--ease-out), transform .5s var(--ease-out);
	transition-delay: calc(var(--i, 0) * 35ms);
}
.js .a-item:not(.is-in) {
	opacity: 0;
	transform: translate3d(0, 8px, 0);
}

/* 写真: 幕が左から開く（curtain）／下から開く（rise） */
.js .p-info__photo,
.js .p-info__sp-photo,
.js .p-access__map,
.js .p-pickup__photo,
.js .p-feature__photo,
.js .p-equip__photo img,
.js .p-greeting__photo {
	transition: clip-path .63s var(--ease-io), filter .72s var(--ease-out), object-view-box .41s var(--ease-out);
	clip-path: inset(0 0 0 0);
}
.js .p-info__photo:not(.is-in),
.js .p-info__sp-photo:not(.is-in),
.js .p-access__map:not(.is-in),
.js .p-pickup__item:not(.is-in) .p-pickup__photo {
	clip-path: inset(0 100% 0 0);
	filter: brightness(1.25) saturate(.7);
}
.js .p-feature__item:not(.is-in) .p-feature__photo,
.js .p-equip__item:not(.is-in) .p-equip__photo img,
.js .p-greeting__photo:not(.is-in) {
	clip-path: inset(100% 0 0 0);
	filter: brightness(1.25) saturate(.7);
}
.js .p-info__photo--2 {
	transition-delay: .2s;
}

/* ---------------------------------------------------------
   1. ヘッダー・スクロール進捗
   --------------------------------------------------------- */
@keyframes sftFadeDown { from { opacity: 0; transform: translate3d(0, -8px, 0); } to { opacity: 1; transform: none; } }
@keyframes sftUp { from { opacity: 0; transform: translate3d(0, 8px, 0); } to { opacity: 1; transform: none; } }
@keyframes sftLineUp { from { transform: translate3d(0, 110%, 0); } to { transform: none; } }
@keyframes sftShine { from { background-position: 120% 0; } to { background-position: -20% 0; } }

.l-header__logo,
.l-header__nav,
.l-header__cta,
.l-header__toggle {
	/* fill は backwards のみ。終了後も transform を残すと（both / forwards）、
	   nav が位置の基準になってホバーメニューがヘッダー幅に広がらない */
	animation: sftFadeDown .45s var(--ease-out) backwards .2s;
}
.l-header__nav { animation-delay: .2s; }
.l-header__cta,
.l-header__toggle { animation-delay: .23s; }
.l-header {
	transition: background-color .2s, transform .27s var(--ease-out);
}
/* PC: 下スクロールで隠れ、上スクロールで戻る */
@media (min-width: 1024px) {
	.l-header.is-hidden {
		transform: translate3d(0, -100%, 0);
	}
}

.l-progress {
	position: fixed;
	z-index: 120;
	inset: 0 0 auto;
	height: 2px;
	background: linear-gradient(90deg, #c90413, #e97c1d);
	transform: scaleX(var(--progress, 0));
	transform-origin: left;
	pointer-events: none;
}

/* ---------------------------------------------------------
   2. MV（CSS アニメーションのみ。非アクティブタブでも完走する）
   --------------------------------------------------------- */
@keyframes sftWipeL { from { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); } }
@keyframes sftWipeR { from { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); } }
@keyframes sftDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes sftSeam { 0% { opacity: 1; } 100% { opacity: .75; } }

@keyframes sftFade { from { opacity: 0; } }
.p-mv__photo { animation: sftFade .5s ease both; }
.p-mv__photos::before,
.p-mv__photos::after {
	animation: sftUp .54s ease both .2s;
}

/* 斜めの継ぎ目を金の光の線が上から描く */
.p-mv__seam {
	position: absolute;
	z-index: 2;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: visible;
}
.p-mv__seam line {
	stroke: url(#sftSeamGrad);
	stroke-width: 2;
	stroke-dasharray: 1;
	vector-effect: non-scaling-stroke;
	animation: sftDraw .72s var(--ease-io) both .5s, sftSeam .54s ease both 1.22s;
}
.p-mv__seam--sp { display: none; }

/* キャッチ: 1 行ずつせり上がり、金の光が一度走る */
.u-line {
	display: block;
	overflow: hidden;
	padding-bottom: .08em;
	margin-bottom: -.08em;
}
.u-line > span {
	display: inline-block;
}
.p-mv__title .u-line > span {
	background: var(--gold-shine);
	background-size: 250% 100%;
	background-position: -20% 0;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: sftLineUp .59s var(--ease-out) both, sftShine 1.08s var(--ease-soft) both;
	animation-delay: calc(.32s + var(--l, 0) * .2s), calc(.85s + var(--l, 0) * .2s);
}
.p-mv__lead { animation: sftUp .5s var(--ease-out) both .52s; }
.p-mv__text { animation: sftUp .5s var(--ease-out) both .59s; }
.p-mv__point {
	animation: sftUp .45s var(--ease-out) both;
	animation-delay: calc(.65s + var(--i, 0) * .2s);
}
.p-mv__point:nth-child(2) { --i: 1; }
.p-mv__point:nth-child(3) { --i: 2; }
/* バッジの金枠に光が一度走る */
.p-mv__point::before {
	background-size: 250% 100%;
	animation: sftShine .99s var(--ease-soft) both;
	animation-delay: calc(.9s + var(--i, 0) * .2s);
}
@media (max-width: 1023px) {
	.p-mv__seam--pc { display: none; }
	.p-mv__seam--sp { display: block; height: calc(400 * var(--s)); }
}

/* ---------------------------------------------------------
   3. セクションごとの出現
   --------------------------------------------------------- */
/* INFORMATION: ベージュ地が左から、縦書き帯は上から読み下ろすように */
.js .p-info__box {
	transition: clip-path .68s var(--ease-io);
	clip-path: inset(0 0 0 0);
}
.js .p-info__box:not(.is-in) { clip-path: inset(0 100% 0 0); }
.js .p-info__list li { transition-delay: calc(.2s + var(--i, 0) * 70ms); }
.js .p-info__tate {
	transition: clip-path .72s var(--ease-io);
	clip-path: inset(0 0 0 0);
}
.js .p-info__tate:not(.is-in) { clip-path: inset(0 0 100% 0); }
.js .p-info__tate--red { transition-delay: .2s; }

/* お悩み: カードが順に、チェックが弾む */
@keyframes sftPop { 0% { scale: 0; } 70% { scale: 1.25; } 100% { scale: 1; } }
.js .p-concerns__list.is-in img {
	animation: sftPop .27s var(--ease-out) both;
	animation-delay: calc(.2s + var(--i, 0) * 70ms);
}
.js .p-concerns__list:not(.is-in) img { scale: 0; }

/* 医院情報: 行が順に */
.js .p-access__info .a-item { transform-origin: left; }

/* ご予約: グラデーションがゆっくり流れる */
@keyframes sftFlow { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
.p-reserve {
	background-size: 160% 100%;
	animation: sftFlow 12s ease-in-out infinite alternate;
}

/* FEATURE: 列ごとに時間差、番号はぼかしから */
.js .p-feature__item { --d: 0s; }
.js .p-feature__item:nth-child(4n+2) { --d: .1s; }
.js .p-feature__item:nth-child(4n+3) { --d: .2s; }
.js .p-feature__item:nth-child(4n) { --d: .3s; }
@media (max-width: 1023px) {
	.js .p-feature__item:nth-child(n) { --d: 0s; }
	.js .p-feature__item:nth-child(even) { --d: .12s; }
}
.js .p-feature__num,
.js .p-feature__title {
	transition: opacity .45s var(--ease-out), transform .54s var(--ease-out), filter .54s var(--ease-out);
}
.js .p-feature__num { transition-delay: var(--d); }
.js .p-feature__photo { transition-delay: calc(var(--d) + .2s); }
.js .p-feature__title { transition-delay: calc(var(--d) + .2s); }
.js .p-feature__item:not(.is-in) .p-feature__num {
	opacity: 0;
	transform: translate3d(0, 8px, 0);
}
.js .p-feature__item:not(.is-in) .p-feature__title {
	opacity: 0;
	transform: translate3d(0, 8px, 0);
}

/* PICKUP: 色帯が上から降り、写真が開き、見出し枠が中央から広がる */
.js .p-pickup__bar,
.js .p-pickup__title,
.js .p-pickup__desc {
	transition: clip-path .54s var(--ease-io), opacity .45s var(--ease-out), transform .5s var(--ease-out);
	clip-path: inset(0 0 0 0);
}
.js .p-pickup__photo { transition-delay: .2s; }
.js .p-pickup__title { transition-delay: .2s; }
.js .p-pickup__desc { transition-delay: .29s; }
.js .p-pickup__item:not(.is-in) .p-pickup__bar { clip-path: inset(0 0 100% 0); }
.js .p-pickup__item:not(.is-in) .p-pickup__title { clip-path: inset(0 50% 0 50%); }
.js .p-pickup__item:not(.is-in) .p-pickup__desc {
	opacity: 0;
	transform: translate3d(0, 8px, 0);
}

/* GREETING: 写真が下から、枠の中身が順に */
.js .p-greeting__box .a-item { transition-delay: calc(.2s + var(--i, 0) * 110ms); }
.js .p-greeting__license li {
	transition: opacity .36s var(--ease-out), transform .41s var(--ease-out);
	transition-delay: calc(.27s + var(--i, 0) * 60ms);
}
.js .p-greeting__box:not(.is-in) .p-greeting__license li {
	opacity: 0;
	transform: translate3d(0, 0, 0);
}

/* MENU: カードが順に */
.js .p-menu__list .a-item { transition-delay: calc(var(--i, 0) * 22ms); }

/* PRICE: 背景が少しずつ寄り（＋パララックス用に上下へ余白）、白い枠が右から */
.p-price__bg {
	inset: -8% 0 auto;
	height: 116%;
}
.js .p-price__bg {
	transition: scale 1.17s var(--ease-out);
}
.js .p-price__box {
	transition: opacity .5s var(--ease-out) .2s, transform .59s var(--ease-out) .2s;
}
.js .p-price__box:not(.is-in) {
	opacity: 0;
	transform: translate3d(0, 0, 0);
}
@media (max-width: 1023px) {
	.js .p-price__box:not(.is-in) { transform: translate3d(0, 8px, 0); }
}

/* 最新設備: 列ごとに時間差 */
.js .p-equip__item:nth-child(2) { --d: .12s; }
.js .p-equip__item:nth-child(3) { --d: .24s; }
.js .p-equip__photo img { transition-delay: var(--d, 0s); }
.js .p-equip__num,
.js .p-equip__title,
.js .p-equip__text {
	transition: opacity .45s var(--ease-out), transform .5s var(--ease-out), filter .54s var(--ease-out);
}
.js .p-equip__num { transition-delay: calc(var(--d, 0s) + .23s); }
.js .p-equip__title { transition-delay: calc(var(--d, 0s) + .2s); }
.js .p-equip__text { transition-delay: calc(var(--d, 0s) + .2s); }
.js .p-equip__item:not(.is-in) .p-equip__num {
	opacity: 0;
}
.js .p-equip__item:not(.is-in) .p-equip__title,
.js .p-equip__item:not(.is-in) .p-equip__text {
	opacity: 0;
	transform: translate3d(0, 8px, 0);
}
@media (max-width: 1023px) {
	.js .p-equip__item:nth-child(n) { --d: 0s; }
}

/* お知らせ・ブログ: 行が右から順に */
.js .p-posts__list .a-item { transition-delay: calc(.2s + var(--i, 0) * 90ms); }
.js .p-posts__list .a-item:not(.is-in) { transform: translate3d(0, 0, 0); }

/* ---------------------------------------------------------
   4. SP ドロワー
   --------------------------------------------------------- */
@keyframes sftDrawerIn { from { opacity: 0; transform: translate3d(0, 8px, 0); } to { opacity: 1; transform: none; } }
.l-drawer:not([hidden]) {
	animation: sftFadeDown .2s var(--ease-out) both;
}
.l-drawer:not([hidden]) .c-acc,
.l-drawer:not([hidden]) .l-drawer__nav li,
.l-drawer:not([hidden]) .p-reserve__inner > * {
	animation: sftDrawerIn .27s var(--ease-out) both;
	animation-delay: calc(.2s + var(--i, 0) * 40ms);
}
.c-acc__body:not([hidden]) .c-acc__list li,
.c-acc__body:not([hidden]) .c-acc__top {
	animation: sftDrawerIn .2s var(--ease-out) both;
	animation-delay: calc(var(--i, 0) * 20ms);
}

/* ---------------------------------------------------------
   5. ホバー（マウス操作の端末だけ）
   --------------------------------------------------------- */
.c-btn,
.p-menu__card,
.p-reserve__btn,
.l-header__btn,
.l-fixbar__btn,
.c-acc__head,
.c-acc__top,
.p-pickup__item {
	-webkit-tap-highlight-color: transparent;
}
.p-pickup__item.is-link {
	cursor: pointer;
}
/* 押したとき少し沈む */
.c-btn:active,
.p-menu__card:active,
.p-reserve__btn:active,
.l-fixbar__btn:active,
.c-acc__top:active {
	transform: scale(.97);
	transition-duration: .1s;
}
.c-btn__label,
.c-btn__arrow,
.p-menu__card img,
.p-menu__card span,
.p-posts__name,
.p-posts__thumb img,
.p-pickup__title a {
	transition: color .2s, translate .23s var(--ease-out), scale .27s var(--ease-out), filter .2s, object-view-box .41s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
	/* 枠線ボタン: グラデーションが左から満ち、文字と矢印が白に */
	.c-btn {
		isolation: isolate;
		transition: transform .2s var(--ease-out), box-shadow .2s;
	}
	.c-btn::after {
		content: "";
		position: absolute;
		z-index: -1;
		inset: 0;
		border-radius: inherit;
		background: linear-gradient(90deg, #c90413, #e97c1d);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform .27s var(--ease-out);
	}
	.c-btn:hover {
		transform: translateY(-2px);
		box-shadow: 0 14px 26px -14px rgba(201, 4, 19, .55);
	}
	.c-btn:hover::after { transform: scaleX(1); }
	.c-btn:hover .c-btn__label { color: #fff; }
	.c-btn:hover .c-btn__arrow {
		filter: brightness(0) invert(1);
		translate: 4px 0;
	}

	/* グローバルナビ: 金の下線が左から */
	.l-gnav__link {
		position: relative;
		transition: opacity .2s, color .2s;
	}
	.l-gnav__link::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: -6px;
		height: 1px;
		background: var(--c-gold);
		transform: scaleX(0);
		transform-origin: right;
		transition: transform .23s var(--ease-out);
	}
	.l-gnav__link:hover {
		opacity: 1 !important;
		color: var(--c-gold);
	}
	.l-gnav__link:hover::after {
		transform: scaleX(1);
		transform-origin: left;
	}

	/* ヘッダーの予約ボタン: 光が走り、アイコンが弾む */
	.l-header__btn,
	.p-reserve__btn {
		position: relative;
		overflow: hidden;
		isolation: isolate;
	}
	.l-header__btn::before,
	.p-reserve__btn::before {
		content: "";
		position: absolute;
		z-index: -1;
		inset: 0;
		background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
		translate: -100% 0;
		transition: translate .41s var(--ease-out);
	}
	.l-header__btn:hover { opacity: 1; filter: saturate(1.15); }
	.l-header__btn:hover::before { translate: 100% 0; }
	.l-header__btn img { transition: transform .23s var(--ease-out); }
	.l-header__btn:hover img { transform: translateY(-3px) rotate(-8deg); }

	/* 予約の大ボタン: 白で満ちて文字が赤に */
	.p-reserve__btn::after {
		content: "";
		position: absolute;
		z-index: -2;
		inset: 0;
		background: #fff;
		transform: scaleX(0);
		transform-origin: left;
		transition: transform .27s var(--ease-out);
	}
	.p-reserve__btn {
		transition: color .2s, transform .2s var(--ease-out), box-shadow .2s;
	}
	.p-reserve__btn img { transition: filter .2s, transform .23s var(--ease-out); }
	.p-reserve__btn:hover {
		background: none;
		color: var(--c-red);
		transform: translateY(-3px);
		box-shadow: 0 16px 30px -16px rgba(0, 0, 0, .45);
	}
	.p-reserve__btn:hover::after { transform: scaleX(1); }
	.p-reserve__btn:hover::before { translate: 100% 0; }
	.p-reserve__btn:hover img {
		filter: brightness(0) saturate(100%) invert(10%) sepia(97%) saturate(5000%) hue-rotate(350deg) brightness(85%);
		transform: rotate(-8deg) scale(1.08);
	}

	/* MENU カード: 浮いてアイコンが跳ね、下辺にグラデーションの線 */
	.p-menu__card {
		position: relative;
		overflow: hidden;
		transition: transform .23s var(--ease-out), box-shadow .23s var(--ease-out), background-color .2s, border-color .2s;
	}
	.p-menu__card::after {
		content: "";
		position: absolute;
		inset: auto 0 0;
		height: 3px;
		background: linear-gradient(90deg, #c90413, #e97c1d);
		transform: scaleX(0);
		transition: transform .27s var(--ease-out);
	}
	.p-menu__card:hover {
		transform: translateY(-5px);
		box-shadow: 0 18px 32px -18px rgba(179, 0, 14, .45);
	}
	.p-menu__card:hover::after { transform: scaleX(1); }
	.p-menu__card:hover img { translate: 0 -4px; scale: 1.1; }
	.p-menu__card:hover span { color: var(--c-red); }

	/* PICKUP: カード全体がリンク（main.js）。浮いて写真が寄る */
	.p-pickup__item {
		transition: transform .27s var(--ease-out), box-shadow .27s var(--ease-out);
	}
	.p-pickup__item:hover {
		transform: translateY(-4px);
		box-shadow: 0 24px 44px -26px rgba(42, 42, 42, .35);
	}
	.p-pickup__item:hover .p-pickup__photo {
		object-view-box: inset(3% 3% 3% 3%);
		filter: saturate(1.08);
	}
	.p-pickup__title a:hover { opacity: 1; }
	.p-pickup__item:hover .p-pickup__title a { color: #8f000b; }

	/* お知らせ・ブログ: 行に淡い地が流れ、題名が右へ */
	.p-posts__item {
		position: relative;
		isolation: isolate;
	}
	a.p-posts__item::before {
		content: "";
		position: absolute;
		z-index: -1;
		inset: 0;
		background: linear-gradient(90deg, rgba(201, 4, 19, .06), rgba(233, 124, 29, 0));
		transform: scaleX(0);
		transform-origin: left;
		transition: transform .27s var(--ease-out);
	}
	a.p-posts__item:hover { opacity: 1; }
	a.p-posts__item:hover::before { transform: scaleX(1); }
	a.p-posts__item:hover .p-posts__name { color: var(--c-red); translate: 8px 0; }
	a.p-posts__item:hover .p-posts__thumb img { scale: 1.08; }
	.p-posts__thumb { overflow: hidden; }

	/* 医院情報: 電話番号 */
	.p-access__row--tel a img { transition: transform .23s var(--ease-out); }
	.p-access__row--tel a:hover { opacity: 1; }
	.p-access__row--tel a:hover img { transform: rotate(-12deg) scale(1.1); }

	/* フッター: 下線が左から */
	.l-footer a {
		background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
		transition: background-size .23s var(--ease-out), opacity .2s;
	}
	.l-footer a:hover {
		opacity: 1 !important;
		background-size: 100% 1px;
	}
	.l-footer__logo,
	.l-footer__logo:hover { background: none; }

	/* ロゴ */
	.l-header__logo img { transition: filter .2s; }
	.l-header__logo:hover { opacity: 1; }
	.l-header__logo:hover img { filter: brightness(1.12); }
}

/* ---------------------------------------------------------
   7. 下層ページ
   --------------------------------------------------------- */
/* ヒーロー: 写真が引きながら現れ、文字が順に */
@keyframes sftHeroZoom { from { scale: 1.12; filter: brightness(1.3) saturate(.7); } to { scale: 1; filter: none; } }
@keyframes sftBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.c-hero__bg { animation: sftFade .5s ease both; }
.c-hero::after { transform-origin: left; animation: sftBar .63s var(--ease-io) both .23s; }
.c-hero__en { animation: sftUp .45s var(--ease-out) both .2s; }
.c-hero__cat { animation: sftUp .45s var(--ease-out) both .23s; }
.c-hero__title { animation: sftUp .54s var(--ease-out) both .28s; }

/* 出現: 下からふわっと */
.js .c-lead,
.js .c-toc,
.js .c-point,
.js .c-table-wrap,
.js .c-sec > p,
.js .c-sub,
.js .c-interview,
.js .c-map,
.js .c-inlink,
.js .p-related__list {
	transition: opacity .45s var(--ease-out), transform .5s var(--ease-out);
}
.js .c-lead:not(.is-in),
.js .c-toc:not(.is-in),
.js .c-point:not(.is-in),
.js .c-table-wrap:not(.is-in),
.js .c-sec > p:not(.is-in),
.js .c-sub:not(.is-in),
.js .c-interview:not(.is-in),
.js .c-map:not(.is-in) {
	opacity: 0;
	transform: translate3d(0, 8px, 0);
}
.js .c-inlink:not(.is-in) {
	opacity: 0;
	transform: translate3d(0, 8px, 0);
}
/* リードの縦線が上から伸びる */
.js .c-lead::before {
	transition: transform .54s var(--ease-io) .2s;
	transform-origin: top;
}
.js .c-lead:not(.is-in)::before { transform: scaleY(0); }

/* セクション見出し: 番号がぼかしから、下線のグラデーションが伸びる */
.js .c-sec__num,
.js .c-sec__text {
	transition: opacity .45s var(--ease-out), transform .5s var(--ease-out), filter .5s var(--ease-out);
}
.js .c-sec__text { transition-delay: .2s; }
.js .c-sec__title:not(.is-in) .c-sec__num { opacity: 0; transform: translate3d(0, 0, 0); }
.js .c-sec__title:not(.is-in) .c-sec__text { opacity: 0; transform: translate3d(0, 8px, 0); }
.js .c-sec__title::after {
	transition: transform .54s var(--ease-io) .2s;
	transform-origin: left;
}
.js .c-sec__title:not(.is-in)::after { transform: scaleX(0); }

/* 図: 幕が左から開く */
.js .c-fig {
	transition: clip-path .63s var(--ease-io), filter .72s var(--ease-out);
	clip-path: inset(0 0 0 0);
}
.js .c-fig:not(.is-in) {
	clip-path: inset(0 100% 0 0);
	filter: brightness(1.25) saturate(.7);
}

/* 特徴の番号 */
.js .c-point__num { transition: filter .54s var(--ease-out) .2s, opacity .45s var(--ease-out) .2s; }
.js .c-point:not(.is-in) .c-point__num { opacity: 0; }

/* メリット/注意点・流れ・Q&A・関連は順に（main.js の GROUPS） */
.js .c-steps .a-item { transition-delay: calc(var(--i, 0) * 55ms); }
.js .c-steps .a-item:not(.is-in) { transform: translate3d(0, 0, 0); }
.js .c-faq .a-item { transition-delay: calc(var(--i, 0) * 30ms); }
.js .c-toc .a-item { transition-delay: calc(.2s + var(--i, 0) * 45ms); }
.js .c-checklist .a-item,
.js .c-numlist .a-item { transition-delay: calc(var(--i, 0) * 30ms); }
.js .c-checklist .a-item:not(.is-in) { transform: translate3d(0, 8px, 0); }

@media (hover: hover) and (pointer: fine) {
	/* 本文内のリンクカード: 淡い地が左から満ち、矢印が前へ */
	.c-inlink__card { transition: border-color .2s, box-shadow .23s var(--ease-out), transform .23s var(--ease-out); }
	.c-inlink__card::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, #fcf4f2, #fff); transform: scaleX(0); transform-origin: left; transition: transform .27s var(--ease-out); }
	.c-inlink__card:hover { opacity: 1; border-color: #e9b9a0; transform: translateY(-2px); box-shadow: 0 16px 30px -20px rgba(179, 0, 14, .5); }
	.c-inlink__card:hover::after { transform: scaleX(1); }
	.c-inlink__arrow { transition: translate .23s var(--ease-out); }
	.c-inlink__card:hover .c-inlink__arrow { translate: 4px 0; }
	.c-inlink__card:hover .c-inlink__name { color: var(--c-red); }
	.c-inlink__name { transition: color .2s; }
	/* メニューカード: 浮いて、アイコンが傾き、下線が伸びる */
	.c-mcard { transition: transform .23s var(--ease-out), box-shadow .23s var(--ease-out), border-color .2s; }
	.c-mcard:hover { opacity: 1; transform: translateY(-4px); border-color: #e9b9a0; box-shadow: 0 18px 32px -22px rgba(179, 0, 14, .5); }
	.c-mcard__icon { transition: transform .23s var(--ease-out), border-color .2s; }
	.c-mcard:hover .c-mcard__icon { transform: rotate(-6deg) scale(1.06); border-color: var(--c-orange); }
	.c-mcard:hover .c-mcard__more::after { width: 36px; }
	/* 写真カード */
	.c-gallery__fig { overflow: hidden; }
	.c-gallery__fig img { transition: scale .41s var(--ease-out); }
	.c-gallery__item:hover .c-gallery__fig img { scale: 1.05; }
	/* 目次: 番号が前に、文字が赤に */
	.c-toc__list a:hover { opacity: 1; color: var(--c-red); }
	.c-toc__num { transition: translate .23s var(--ease-out); }
	.c-toc__list a:hover .c-toc__num { translate: 4px 0; }
	.c-sidetoc a:hover { opacity: 1; color: var(--c-red); }
	/* Q&A: 質問の行に淡い地 */
	.c-faq__q { transition: background-color .2s; }
	.c-faq__q:hover { background: rgba(248, 245, 241, .8); }
	.c-faq__q:hover .c-faq__text { color: var(--c-red); }
	.c-faq__text { transition: color .2s; }
	/* サイドの予約 */
	.c-sidecta__web { position: relative; overflow: hidden; isolation: isolate; transition: transform .2s var(--ease-out), box-shadow .2s; }
	.c-sidecta__web::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%); translate: -100% 0; transition: translate .41s var(--ease-out); }
	.c-sidecta__web:hover { opacity: 1; transform: translateY(-2px); box-shadow: 0 12px 24px -14px rgba(201, 4, 19, .6); }
	.c-sidecta__web:hover::before { translate: 100% 0; }
	.c-sidecta__tel:hover { opacity: 1; }
	.c-sidecta__tel img { transition: transform .23s var(--ease-out); }
	.c-sidecta__tel:hover img { transform: rotate(-12deg) scale(1.1); }
	/* パンくず */
	.c-breadcrumb a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .2s var(--ease-out), color .2s; }
	.c-breadcrumb a:hover { opacity: 1; color: var(--c-red); background-size: 100% 1px; }
	/* 先頭へ戻る */
	.c-totop:hover { transform: translateY(-4px); box-shadow: 0 14px 26px -12px rgba(201, 4, 19, .6); }
	.c-totop:hover span { translate: 0 -3px; }
}

/* ---------------------------------------------------------
   6. 動きを減らす設定のとき
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-delay: 0s !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		transition-delay: 0s !important;
	}
	.p-mv__photos,
	.p-mv__copy,
	[data-parallax] {
		translate: none !important;
	}
}

/* 画面の動きで酔うとのご意見で、トップの「8つの特徴」と地図は動かさず最初から表示（2026-10-23） */
.js .p-feature__item .p-feature__num,
.js .p-feature__item .p-feature__title,
.js .p-feature__item .p-feature__photo,
.js .p-access__map {
	opacity: 1 !important;
	transform: none !important;
	clip-path: none !important;
	filter: none !important;
	transition: none !important;
}