/* =========================================================
   v26: 各ページに独自個性を持たせる
   - 各 page-template-page-* クラスでカラー・装飾を変化
   - ヒーローに固有の SIGNATURE 要素
   - セクション背景・アクセントカラーをページ別に
   ========================================================= */

/* ===== ページ別アクセントカラー変数 ===== */
.page-template-page-feature,
.page-template-page-feature .pr-hero {
	--pr-accent: #a00000;
	--pr-accent-soft: rgba(160, 0, 0, .14);
	--pr-mood-label: "MANIFESTO";
}

.page-template-page-flow,
.page-template-page-flow .pr-hero {
	--pr-accent: #b9965b;
	--pr-accent-soft: rgba(185, 150, 91, .18);
	--pr-mood-label: "DAILY";
}

.page-template-page-admission,
.page-template-page-admission .pr-hero {
	--pr-accent: #b40000;
	--pr-accent-soft: rgba(180, 0, 0, .12);
	--pr-mood-label: "JOIN US";
}

.page-template-page-meal,
.page-template-page-meal .pr-hero {
	--pr-accent: #c45a1a;
	--pr-accent-soft: rgba(196, 90, 26, .14);
	--pr-mood-label: "MENU";
}

.page-template-page-health,
.page-template-page-health .pr-hero {
	--pr-accent: #98001f;
	--pr-accent-soft: rgba(152, 0, 31, .14);
	--pr-mood-label: "CARE +";
}

.page-template-page-facilities,
.page-template-page-facilities .pr-hero {
	--pr-accent: #b9965b;
	--pr-accent-soft: rgba(185, 150, 91, .18);
	--pr-mood-label: "MAP / 4 SITES";
}

.page-template-page-faq,
.page-template-page-faq .pr-hero {
	--pr-accent: #8a4838;
	--pr-accent-soft: rgba(138, 72, 56, .15);
	--pr-mood-label: "ASK / Q&A";
}

.page-template-page-contact,
.page-template-page-contact .pr-hero {
	--pr-accent: #b40000;
	--pr-accent-soft: rgba(180, 0, 0, .15);
	--pr-mood-label: "REACH OUT";
}

.page-template-page-vacancy,
.page-template-page-vacancy .pr-hero {
	--pr-accent: #b40000;
	--pr-accent-soft: rgba(180, 0, 0, .14);
	--pr-mood-label: "VACANCY";
}
/* ヒーローの見た目は他ページと統一（独自調整は撤去）。
   画像差し替え＋object-position は page-rich-fx.css 側で他ページと同じ流儀で指定。 */

.page-template-page-blog,
.page-template-page-blog .pr-hero,
.blog .pr-hero {
	--pr-accent: #8a0010;
	--pr-accent-soft: rgba(138, 0, 16, .12);
	--pr-mood-label: "NEWSROOM";
}

/* ===== ヒーロー固有 SIGNATURE バッジ ===== */
/* 各ページの右上に小さな個性ラベルを追加（ナビと重ならない位置） */
.pr-hero__inner > h1 + .pr-hero__lead::after {
	content: var(--pr-mood-label, "PAGE");
	position: absolute;
	right: -2vw;
	bottom: -36px;
	color: rgba(228, 196, 140, .42);
	font-family: var(--hp-roman, "Times New Roman");
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .36em;
}

/* ===== ヒーロー赤帯の色をページアクセントに ===== */
.pr-hero__inner::before {
	background: linear-gradient(180deg,
		transparent 0%,
		var(--pr-accent, var(--hp-red-line, #d80008)) 20%,
		var(--pr-accent, var(--hp-red-line, #d80008)) 80%,
		transparent 100%) !important;
	box-shadow: 0 0 12px var(--pr-accent-soft, rgba(216, 0, 8, .5)) !important;
}

/* ===== キッカー色もアクセントに ===== */
.page-template-page-feature .pr-section__kicker,
.page-template-page-flow .pr-section__kicker,
.page-template-page-admission .pr-section__kicker,
.page-template-page-meal .pr-section__kicker,
.page-template-page-health .pr-section__kicker,
.page-template-page-facilities .pr-section__kicker,
.page-template-page-faq .pr-section__kicker,
.page-template-page-contact .pr-section__kicker,
.page-template-page-blog .pr-section__kicker {
	color: var(--pr-accent, var(--hp-red-line, #d80008));
}

.page-template-page-feature .pr-section__kicker::before,
.page-template-page-flow .pr-section__kicker::before,
.page-template-page-admission .pr-section__kicker::before,
.page-template-page-meal .pr-section__kicker::before,
.page-template-page-health .pr-section__kicker::before,
.page-template-page-facilities .pr-section__kicker::before,
.page-template-page-faq .pr-section__kicker::before,
.page-template-page-contact .pr-section__kicker::before,
.page-template-page-blog .pr-section__kicker::before {
	background: var(--pr-accent, var(--hp-red-line, #d80008));
}

/* ===== ページ固有: feature - 哲学的、引用ブロックを強調 ===== */
.page-template-page-feature .pr-section--cream {
	background: #f8f3eb;
}

.page-template-page-feature .pr-quote {
	padding: 36px 24px;
	background: rgba(160, 0, 0, .03);
	border-left: 2px solid var(--pr-accent);
	border-right: 2px solid var(--pr-accent);
}

/* ===== ページ固有: flow - 時間軸を強調、時計風のリング装飾 ===== */
.page-template-page-flow .pr-hero::after {
	content: "08:30 — 18:30";
	position: absolute;
	right: clamp(110px, 11vw, 180px);
	bottom: clamp(40px, 5vh, 80px);
	color: rgba(185, 150, 91, .6);
	font-family: var(--hp-roman, "Times New Roman");
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .26em;
	z-index: 4;
	pointer-events: none;
}

.page-template-page-flow .pr-section--cream {
	background: #fbf8f3;
}

/* ===== ページ固有: admission - 入園感を歓迎で ===== */
.page-template-page-admission .pr-section--cream {
	background: #f8f3e9;
}

.page-template-page-admission .pr-steps::before {
	background: var(--pr-accent);
}

/* ===== ページ固有: meal - 暖色系で食欲を ===== */
.page-template-page-meal {
	--pr-meal-warm: #fff5ec;
}

.page-template-page-meal .pr-section--cream {
	background: #fbece0;
}

.page-template-page-meal .pr-section--paper {
	background: #fffaf0;
}

/* ===== ページ固有: health - 清潔感、白基調 ===== */
.page-template-page-health .pr-section--cream {
	background: #f5f4f3;
}

.page-template-page-health .pr-section--paper {
	background: #fbfbfa;
}

.page-template-page-health .pr-card__num {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.page-template-page-health .pr-card__num::before {
	content: "+";
	display: inline-grid;
	place-items: center;
	width: 18px;
	height: 18px;
	background: var(--pr-accent);
	color: #fff;
	font-size: 12px;
	border-radius: 50%;
	line-height: 1;
}

/* ===== ページ固有: facilities - 地図的、整然 ===== */
.page-template-page-facilities .pr-section--cream {
	background: #f7f4ef;
}

.page-template-page-facilities .pr-section--dark {
	background: #16110e;
}

/* facility 番号にプリントヘッド風サブラベル */
.page-template-page-facilities .pr-split__media-num::before {
	content: "SITE";
	display: block;
	font-size: .14em;
	letter-spacing: .26em;
	color: rgba(228, 196, 140, .85);
	margin-bottom: 4px;
	text-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}

/* ===== ページ固有: faq - 質問の色合い ===== */
.page-template-page-faq .pr-section--cream {
	background: #fbf6ef;
}

.page-template-page-faq .pr-hero::after {
	content: "?";
	position: absolute;
	right: clamp(60px, 8vw, 120px);
	top: clamp(150px, 18vh, 220px);
	font-family: var(--hp-serif, "Noto Serif JP");
	font-size: clamp(140px, 18vw, 280px);
	font-weight: 400;
	color: rgba(228, 196, 140, .07);
	line-height: 1;
	pointer-events: none;
	z-index: 1;
}

/* ===== ページ固有: contact - 即対応感、TELが目立つ ===== */
.page-template-page-contact .pr-section--cream {
	background: #faf6f1;
}

.page-template-page-contact .pr-hero::after {
	content: "TEL  029-835-3003";
	position: absolute;
	right: clamp(60px, 8vw, 120px);
	top: clamp(160px, 20vh, 240px);
	color: rgba(255, 255, 255, .9);
	font-family: var(--hp-roman, "Times New Roman");
	font-size: 18px;
	font-weight: 600;
	letter-spacing: .12em;
	z-index: 4;
	pointer-events: none;
	padding: 14px 22px;
	background: rgba(180, 0, 0, .25);
	backdrop-filter: blur(4px);
	border: 1px solid rgba(255, 255, 255, .3);
}

/* ===== ページ固有: blog - 雑誌的、ISSUE 表記 ===== */
.page-template-page-blog .pr-section--cream {
	background: #fbf7f1;
}

.page-template-page-blog .pr-hero::after {
	content: "ISSUE / 2026";
	position: absolute;
	right: clamp(60px, 8vw, 120px);
	top: clamp(150px, 18vh, 220px);
	color: rgba(228, 196, 140, .7);
	font-family: var(--hp-roman, "Times New Roman");
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .32em;
	z-index: 4;
	pointer-events: none;
	border: 1px solid rgba(228, 196, 140, .6);
	padding: 10px 18px;
}

/* ===== 各ページの赤CTAセクションはブランドレッドで統一（単色） ===== */
.page-template-page-feature .pr-section--red,
.page-template-page-flow .pr-section--red,
.page-template-page-admission .pr-section--red,
.page-template-page-meal .pr-section--red,
.page-template-page-health .pr-section--red,
.page-template-page-facilities .pr-section--red,
.page-template-page-faq .pr-section--red,
.page-template-page-contact .pr-section--red,
.page-template-page-blog .pr-section--red {
	background: #a00000;
}

/* ===== モバイル対応: 装飾を控えめに ===== */
@media (max-width: 700px) {
	.pr-hero__inner > h1 + .pr-hero__lead::after,
	.page-template-page-flow .pr-hero::after,
	.page-template-page-faq .pr-hero::after,
	.page-template-page-contact .pr-hero::after,
	.page-template-page-blog .pr-hero::after {
		display: none;
	}
}

/* =========================================================
   v27: /feature/ の保育理念に「車輪」モチーフ装飾
   ========================================================= */

.hp-wheel-stage {
	position: relative;
	margin: 64px auto;
	width: 100%;
	min-height: 540px;
	display: grid;
	place-items: center;
	isolation: isolate;
	overflow: hidden;
}

/* 引用テキストを中央に */
.hp-wheel-stage > .pr-quote {
	position: relative;
	z-index: 5;
	padding: 36px 48px;
	background: transparent;
	border: none;
	max-width: 480px;
	text-align: center;
}

.hp-wheel-stage > .pr-quote::before,
.hp-wheel-stage > .pr-quote::after {
	display: none;
}

.hp-wheel-stage > .pr-quote p {
	font-family: var(--hp-serif, "Noto Serif JP");
	font-size: clamp(18px, 2vw, 24px);
	font-weight: 500;
	line-height: 2.2;
	letter-spacing: .14em;
	color: #1f1714;
}

/* === 外側リング === */
.hp-wheel-ring {
	position: absolute;
	top: 50%;
	left: 50%;
	border-radius: 50%;
	pointer-events: none;
}

.hp-wheel-ring--outer {
	width: clamp(360px, 48vw, 560px);
	height: clamp(360px, 48vw, 560px);
	transform: translate(-50%, -50%);
	border: 1px dashed rgba(160, 0, 0, .22);
	animation: hp-wheel-spin 90s linear infinite;
	z-index: 1;
}

.hp-wheel-ring--mid {
	width: clamp(260px, 36vw, 420px);
	height: clamp(260px, 36vw, 420px);
	transform: translate(-50%, -50%);
	border: 1px solid rgba(160, 0, 0, .3);
	animation: hp-wheel-spin 70s linear infinite reverse;
	z-index: 2;
}

/* === 8 本のスポーク（中央から放射状） === */
.hp-wheel-spokes {
	position: absolute;
	top: 50%;
	left: 50%;
	width: clamp(360px, 48vw, 560px);
	height: clamp(360px, 48vw, 560px);
	transform: translate(-50%, -50%);
	pointer-events: none;
	z-index: 1;
	animation: hp-wheel-spin 90s linear infinite;
}

.hp-wheel-spokes span {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1px;
	height: 50%;
	background: linear-gradient(180deg,
		rgba(160, 0, 0, .35) 0%,
		rgba(160, 0, 0, .15) 70%,
		transparent 100%);
	transform-origin: top center;
}

.hp-wheel-spokes span:nth-child(1) { transform: rotate(0deg); }
.hp-wheel-spokes span:nth-child(2) { transform: rotate(45deg); }
.hp-wheel-spokes span:nth-child(3) { transform: rotate(90deg); }
.hp-wheel-spokes span:nth-child(4) { transform: rotate(135deg); }
.hp-wheel-spokes span:nth-child(5) { transform: rotate(180deg); }
.hp-wheel-spokes span:nth-child(6) { transform: rotate(225deg); }
.hp-wheel-spokes span:nth-child(7) { transform: rotate(270deg); }
.hp-wheel-spokes span:nth-child(8) { transform: rotate(315deg); }

/* === 外周の小さなドット（手をつないでいるイメージ） === */
.hp-wheel-dots {
	position: absolute;
	top: 50%;
	left: 50%;
	--wheel-r: clamp(180px, 24vw, 280px);
	width: 16px;
	height: 16px;
	transform: translate(-50%, -50%);
	pointer-events: none;
	z-index: 3;
	animation: hp-wheel-spin 90s linear infinite;
}

.hp-wheel-dots span {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	margin: -4px 0 0 -4px;
	border-radius: 50%;
	background: var(--pr-accent, #a00000);
	box-shadow: 0 0 8px rgba(160, 0, 0, .45);
}

/* 8 つのドットを 45 度ごとに外周へ配置 */
.hp-wheel-dots span:nth-child(1) { transform: rotate(0deg)   translateY(calc(-1 * var(--wheel-r))); }
.hp-wheel-dots span:nth-child(2) { transform: rotate(45deg)  translateY(calc(-1 * var(--wheel-r))); }
.hp-wheel-dots span:nth-child(3) { transform: rotate(90deg)  translateY(calc(-1 * var(--wheel-r))); }
.hp-wheel-dots span:nth-child(4) { transform: rotate(135deg) translateY(calc(-1 * var(--wheel-r))); }
.hp-wheel-dots span:nth-child(5) { transform: rotate(180deg) translateY(calc(-1 * var(--wheel-r))); }
.hp-wheel-dots span:nth-child(6) { transform: rotate(225deg) translateY(calc(-1 * var(--wheel-r))); }
.hp-wheel-dots span:nth-child(7) { transform: rotate(270deg) translateY(calc(-1 * var(--wheel-r))); }
.hp-wheel-dots span:nth-child(8) { transform: rotate(315deg) translateY(calc(-1 * var(--wheel-r))); }

/* === 中央ハブ === */
.hp-wheel-hub {
	position: absolute;
	top: 50%;
	left: 50%;
	width: clamp(72px, 8vw, 100px);
	height: clamp(72px, 8vw, 100px);
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: #f8f3eb;
	box-shadow:
		inset 0 0 0 1px rgba(160, 0, 0, .5),
		0 0 0 3px #f8f3eb,
		0 0 0 4px rgba(160, 0, 0, .15);
	pointer-events: none;
	z-index: 4;
}

/* hub の中の小さなドット */
.hp-wheel-hub::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--pr-accent, #a00000);
	transform: translate(-50%, -50%);
	box-shadow: 0 0 14px rgba(160, 0, 0, .5);
}

@keyframes hp-wheel-spin {
	to {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

/* feature ページのみ既存の引用枠を無効化 */
.page-template-page-feature .hp-wheel-stage .pr-quote {
	background: transparent !important;
	border: none !important;
	padding: 36px 48px !important;
}

/* page-rich-fx.css の .pr-quote p { opacity: 0 } 設定を無効化（reveal クラスが無い） */
.hp-wheel-stage .pr-quote p,
.hp-wheel-stage .pr-quote::before,
.hp-wheel-stage .pr-quote::after {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}

.hp-wheel-stage .pr-quote::before,
.hp-wheel-stage .pr-quote::after {
	display: none !important;
}

/* レスポンシブ */
@media (max-width: 700px) {
	.hp-wheel-stage {
		min-height: 420px;
		margin: 36px auto;
	}
	.hp-wheel-stage > .pr-quote {
		padding: 18px 16px;
	}
	.hp-wheel-stage > .pr-quote p {
		font-size: 15px;
		line-height: 2;
		letter-spacing: .1em;
	}
	.hp-wheel-dots span {
		width: 5px; height: 5px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hp-wheel-ring,
	.hp-wheel-spokes,
	.hp-wheel-dots {
		animation: none !important;
	}
}

/* =========================================================
   v28: 車輪に文字演出 + halo + ドット脈動
   ========================================================= */

/* 中央のテキストを 1 文字ずつ cascade */
.hp-wheel-stage .pr-quote p .hp-char {
	display: inline-block;
	opacity: 0;
	transform: translateY(14px);
	filter: blur(4px);
	transition:
		opacity .9s cubic-bezier(.22, 1, .25, 1),
		transform .9s cubic-bezier(.22, 1, .25, 1),
		filter .9s cubic-bezier(.22, 1, .25, 1);
	transition-delay: calc(var(--char-delay, 0) * .05s + .3s);
}

.hp-wheel-stage.is-revealed .pr-quote p .hp-char,
.hp-wheel-stage.is-pr-entered .pr-quote p .hp-char {
	opacity: 1;
	transform: translateY(0);
	filter: blur(0);
}

/* 「車輪」「手をつないで」など強調したい単語の文字色 */
.hp-wheel-stage .pr-quote p {
	max-width: 360px;
	margin: 0 auto;
}

/* テキスト幅を調整して 2 行に綺麗に収める */
.hp-wheel-stage > .pr-quote {
	max-width: 460px !important;
}

/* 中央エリアに halo（赤い光の輪） */
.hp-wheel-stage::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: clamp(380px, 50vw, 580px);
	height: clamp(380px, 50vw, 580px);
	transform: translate(-50%, -50%);
	background: radial-gradient(circle,
		rgba(160, 0, 0, .08) 0%,
		rgba(160, 0, 0, .03) 35%,
		transparent 65%);
	pointer-events: none;
	z-index: 0;
	animation: hp-wheel-halo 5s ease-in-out infinite;
}

@keyframes hp-wheel-halo {
	0%, 100% { opacity: .85; transform: translate(-50%, -50%) scale(1); }
	50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.04); }
}

/* ドットを脈動させる */
.hp-wheel-dots span {
	animation: hp-wheel-dot-pulse 3.6s ease-in-out infinite;
}

.hp-wheel-dots span:nth-child(1) { animation-delay: 0s; }
.hp-wheel-dots span:nth-child(2) { animation-delay: .35s; }
.hp-wheel-dots span:nth-child(3) { animation-delay: .7s; }
.hp-wheel-dots span:nth-child(4) { animation-delay: 1.05s; }
.hp-wheel-dots span:nth-child(5) { animation-delay: 1.4s; }
.hp-wheel-dots span:nth-child(6) { animation-delay: 1.75s; }
.hp-wheel-dots span:nth-child(7) { animation-delay: 2.1s; }
.hp-wheel-dots span:nth-child(8) { animation-delay: 2.45s; }

@keyframes hp-wheel-dot-pulse {
	0%, 100% {
		box-shadow: 0 0 6px rgba(160, 0, 0, .35);
	}
	50% {
		box-shadow: 0 0 16px rgba(160, 0, 0, .85), 0 0 32px rgba(160, 0, 0, .35);
	}
}

/* 中央ハブの中の赤い点が脈動 */
.hp-wheel-hub::before {
	animation: hp-wheel-core-pulse 2.2s ease-in-out infinite;
}

@keyframes hp-wheel-core-pulse {
	0%, 100% {
		box-shadow: 0 0 14px rgba(160, 0, 0, .5);
		transform: translate(-50%, -50%) scale(1);
	}
	50% {
		box-shadow: 0 0 24px rgba(160, 0, 0, .8), 0 0 48px rgba(160, 0, 0, .3);
		transform: translate(-50%, -50%) scale(1.18);
	}
}

/* タイトル「保育理念」にも letter cascade */
.page-template-page-feature .pr-section__title .hp-char {
	display: inline-block;
	opacity: 0;
	transform: translateY(20px);
	filter: blur(6px);
	transition:
		opacity 1s cubic-bezier(.22, 1, .25, 1),
		transform 1s cubic-bezier(.22, 1, .25, 1),
		filter 1s cubic-bezier(.22, 1, .25, 1);
	transition-delay: calc(var(--char-delay, 0) * .08s + .25s);
}

.pr-section.is-pr-entered .pr-section__title .hp-char {
	opacity: 1;
	transform: translateY(0);
	filter: blur(0);
}

/* =========================================================
   v29: 車輪を「精密歯車 × 紋章」風に上品化
   ※ v27/v28 のルールを上書きする
   ========================================================= */

:root {
	--wheel-red:  #8a0c0c;
	--wheel-gold: #b29156;
	--wheel-ink:  #1f1714;
}

/* ステージ全体 */
.hp-wheel-stage {
	min-height: clamp(560px, 64vw, 720px) !important;
	margin: 72px auto 64px !important;
}

/* === 外周リング（4 層）=== */
.hp-wheel-ring--outer {
	width:  clamp(440px, 58vw, 660px);
	height: clamp(440px, 58vw, 660px);
	border: 1px dashed rgba(178, 145, 86, .55);
	animation: hp-wheel-spin 180s linear infinite;
}

.hp-wheel-ring--mid {
	width:  clamp(380px, 50vw, 580px);
	height: clamp(380px, 50vw, 580px);
	border: 1px solid rgba(138, 12, 12, .35);
	animation: hp-wheel-spin 140s linear infinite reverse;
}

.hp-wheel-ring--inner {
	position: absolute;
	top: 50%; left: 50%;
	width:  clamp(300px, 40vw, 470px);
	height: clamp(300px, 40vw, 470px);
	transform: translate(-50%, -50%);
	border: 1px solid rgba(178, 145, 86, .45);
	border-radius: 50%;
	pointer-events: none;
	z-index: 2;
	animation: hp-wheel-spin 220s linear infinite;
}

.hp-wheel-ring--core {
	position: absolute;
	top: 50%; left: 50%;
	width:  clamp(190px, 26vw, 300px);
	height: clamp(190px, 26vw, 300px);
	transform: translate(-50%, -50%);
	border: 1px dashed rgba(138, 12, 12, .25);
	border-radius: 50%;
	pointer-events: none;
	z-index: 2;
	animation: hp-wheel-spin 100s linear infinite reverse;
}

/* === 外周 60 ティック（時計の目盛り風） === */
.hp-wheel-ticks {
	position: absolute;
	top: 50%; left: 50%;
	width:  clamp(440px, 58vw, 660px);
	height: clamp(440px, 58vw, 660px);
	transform: translate(-50%, -50%);
	pointer-events: none;
	z-index: 1;
	animation: hp-wheel-spin 360s linear infinite;
}

.hp-wheel-ticks span {
	position: absolute;
	top: 0;
	left: 50%;
	width: 1px;
	height: 6px;
	background: rgba(178, 145, 86, .55);
	transform-origin: 0 calc(50% * (var(--ring-d, 1)));
	transform: rotate(calc(var(--ti) * 6deg)) translateY(0);
}

/* 5 の倍数は長く + 赤色に */
.hp-wheel-ticks span:nth-child(5n+1) {
	height: 12px;
	width: 1.5px;
	background: rgba(138, 12, 12, .65);
}

/* 動かないように個別 transform（CSS変数 trick） */
.hp-wheel-ticks span {
	top: 50%;
	left: 50%;
	margin: 0;
	transform-origin: 50% 50%;
	transform:
		rotate(calc(var(--ti) * 6deg))
		translateY(calc(-1 * clamp(220px, 29vw, 330px)));
}

/* === 12 本スポーク（より繊細） === */
.hp-wheel-spokes {
	width:  clamp(380px, 50vw, 580px);
	height: clamp(380px, 50vw, 580px);
	animation: hp-wheel-spin 200s linear infinite;
}

.hp-wheel-spokes span {
	width: 1px;
	height: 50%;
	background: linear-gradient(180deg,
		rgba(138, 12, 12, .42) 0%,
		rgba(178, 145, 86, .25) 50%,
		transparent 100%);
}

.hp-wheel-spokes span:nth-child(1)  { transform: rotate(0deg); }
.hp-wheel-spokes span:nth-child(2)  { transform: rotate(30deg); }
.hp-wheel-spokes span:nth-child(3)  { transform: rotate(60deg); }
.hp-wheel-spokes span:nth-child(4)  { transform: rotate(90deg); }
.hp-wheel-spokes span:nth-child(5)  { transform: rotate(120deg); }
.hp-wheel-spokes span:nth-child(6)  { transform: rotate(150deg); }
.hp-wheel-spokes span:nth-child(7)  { transform: rotate(180deg); }
.hp-wheel-spokes span:nth-child(8)  { transform: rotate(210deg); }
.hp-wheel-spokes span:nth-child(9)  { transform: rotate(240deg); }
.hp-wheel-spokes span:nth-child(10) { transform: rotate(270deg); }
.hp-wheel-spokes span:nth-child(11) { transform: rotate(300deg); }
.hp-wheel-spokes span:nth-child(12) { transform: rotate(330deg); }

/* === 外周ドット 12 個（手をつなぐイメージ） === */
.hp-wheel-dots {
	--wheel-r: clamp(190px, 25vw, 290px);
	animation: hp-wheel-spin 200s linear infinite;
}

.hp-wheel-dots span {
	width: 6px;
	height: 6px;
	margin: -3px 0 0 -3px;
	background: var(--wheel-red, #8a0c0c);
	box-shadow:
		0 0 0 2px rgba(248, 243, 235, 1),
		0 0 0 3px rgba(178, 145, 86, .5),
		0 0 10px rgba(138, 12, 12, .45);
}

.hp-wheel-dots span:nth-child(1)  { transform: rotate(0deg)   translateY(calc(-1 * var(--wheel-r))); }
.hp-wheel-dots span:nth-child(2)  { transform: rotate(30deg)  translateY(calc(-1 * var(--wheel-r))); }
.hp-wheel-dots span:nth-child(3)  { transform: rotate(60deg)  translateY(calc(-1 * var(--wheel-r))); }
.hp-wheel-dots span:nth-child(4)  { transform: rotate(90deg)  translateY(calc(-1 * var(--wheel-r))); }
.hp-wheel-dots span:nth-child(5)  { transform: rotate(120deg) translateY(calc(-1 * var(--wheel-r))); }
.hp-wheel-dots span:nth-child(6)  { transform: rotate(150deg) translateY(calc(-1 * var(--wheel-r))); }
.hp-wheel-dots span:nth-child(7)  { transform: rotate(180deg) translateY(calc(-1 * var(--wheel-r))); }
.hp-wheel-dots span:nth-child(8)  { transform: rotate(210deg) translateY(calc(-1 * var(--wheel-r))); }
.hp-wheel-dots span:nth-child(9)  { transform: rotate(240deg) translateY(calc(-1 * var(--wheel-r))); }
.hp-wheel-dots span:nth-child(10) { transform: rotate(270deg) translateY(calc(-1 * var(--wheel-r))); }
.hp-wheel-dots span:nth-child(11) { transform: rotate(300deg) translateY(calc(-1 * var(--wheel-r))); }
.hp-wheel-dots span:nth-child(12) { transform: rotate(330deg) translateY(calc(-1 * var(--wheel-r))); }

/* ドット脈動を v28 から再定義（12 個分） */
.hp-wheel-dots span {
	animation: hp-wheel-dot-pulse 5.4s ease-in-out infinite;
}
.hp-wheel-dots span:nth-child(1)  { animation-delay: 0s; }
.hp-wheel-dots span:nth-child(2)  { animation-delay: .35s; }
.hp-wheel-dots span:nth-child(3)  { animation-delay: .7s; }
.hp-wheel-dots span:nth-child(4)  { animation-delay: 1.05s; }
.hp-wheel-dots span:nth-child(5)  { animation-delay: 1.4s; }
.hp-wheel-dots span:nth-child(6)  { animation-delay: 1.75s; }
.hp-wheel-dots span:nth-child(7)  { animation-delay: 2.1s; }
.hp-wheel-dots span:nth-child(8)  { animation-delay: 2.45s; }
.hp-wheel-dots span:nth-child(9)  { animation-delay: 2.8s; }
.hp-wheel-dots span:nth-child(10) { animation-delay: 3.15s; }
.hp-wheel-dots span:nth-child(11) { animation-delay: 3.5s; }
.hp-wheel-dots span:nth-child(12) { animation-delay: 3.85s; }

/* === 中間軌道（4 つの小さなオーブ） === */
.hp-wheel-orbit {
	position: absolute;
	top: 50%; left: 50%;
	--orb-r: clamp(150px, 20vw, 230px);
	width:  clamp(300px, 40vw, 470px);
	height: clamp(300px, 40vw, 470px);
	transform: translate(-50%, -50%);
	pointer-events: none;
	z-index: 2;
	animation: hp-wheel-spin 110s linear infinite reverse;
}

.hp-wheel-orbit span {
	position: absolute;
	top: 50%; left: 50%;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wheel-gold, #b29156);
	box-shadow:
		0 0 0 1.5px rgba(248, 243, 235, 1),
		0 0 6px rgba(178, 145, 86, .55);
	margin: -3.5px 0 0 -3.5px;
}

.hp-wheel-orbit span:nth-child(1) { transform: rotate(45deg)  translateY(calc(-1 * var(--orb-r))); }
.hp-wheel-orbit span:nth-child(2) { transform: rotate(135deg) translateY(calc(-1 * var(--orb-r))); }
.hp-wheel-orbit span:nth-child(3) { transform: rotate(225deg) translateY(calc(-1 * var(--orb-r))); }
.hp-wheel-orbit span:nth-child(4) { transform: rotate(315deg) translateY(calc(-1 * var(--orb-r))); }

/* === 4 方位ラベル（NSEW = 5理念の対応） === */
.hp-wheel-cardinals {
	position: absolute;
	top: 50%; left: 50%;
	--card-r: clamp(240px, 31vw, 360px);
	width: 1px;
	height: 1px;
	pointer-events: none;
	z-index: 3;
}

.hp-wheel-cardinals span {
	position: absolute;
	top: 50%; left: 50%;
	font-family: "Cormorant Garamond", "Noto Serif JP", serif;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .32em;
	color: rgba(138, 12, 12, .72);
	white-space: nowrap;
	transform-origin: 50% 50%;
}

.hp-wheel-cardinals span::after {
	content: attr(data-label);
	display: block;
	margin-top: 3px;
	font-size: 8.5px;
	letter-spacing: .26em;
	color: rgba(178, 145, 86, .85);
}

.hp-wheel-cardinals span:nth-child(1) {
	transform: translate(-50%, calc(-1 * var(--card-r))) translateY(-12px);
	text-align: center;
}
.hp-wheel-cardinals span:nth-child(2) {
	transform: translate(calc(var(--card-r) - 50%), -50%) translateX(8px);
}
.hp-wheel-cardinals span:nth-child(3) {
	transform: translate(-50%, calc(var(--card-r) - 50%)) translateY(8px);
	text-align: center;
}
.hp-wheel-cardinals span:nth-child(4) {
	transform: translate(calc(-1 * var(--card-r) - 50%), -50%) translateX(-8px);
}

/* === 中央ハブ（多層 + エンブレム）=== */
.hp-wheel-hub {
	width:  clamp(120px, 14vw, 168px);
	height: clamp(120px, 14vw, 168px);
	background:
		radial-gradient(circle at 50% 35%, #fdfaf3 0%, #f3ead8 60%, #ead9b6 100%);
	box-shadow:
		inset 0 0 0 1px rgba(178, 145, 86, .65),
		inset 0 0 0 6px rgba(248, 243, 235, 1),
		inset 0 0 0 7px rgba(138, 12, 12, .35),
		0 0 0 1px rgba(178, 145, 86, .35),
		0 18px 40px -18px rgba(138, 12, 12, .35);
	display: grid;
	place-items: center;
	z-index: 4;
}

.hp-wheel-hub::before {
	display: none;
}

/* === 中央エンブレム（5 つの理念を表現する 5 つの粒）=== */
.hp-wheel-emblem {
	position: relative;
	width: clamp(64px, 7.5vw, 92px);
	height: clamp(64px, 7.5vw, 92px);
	display: grid;
	place-items: center;
}

.hp-wheel-emblem::before {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid rgba(138, 12, 12, .35);
	border-radius: 50%;
}

.hp-wheel-emblem::after {
	content: "";
	position: absolute;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--wheel-red, #8a0c0c);
	box-shadow:
		0 0 0 2px #fdfaf3,
		0 0 0 3px rgba(178, 145, 86, .7),
		0 0 14px rgba(138, 12, 12, .55);
	animation: hp-wheel-core-pulse 2.4s ease-in-out infinite;
}

.hp-wheel-emblem span {
	position: absolute;
	top: 50%; left: 50%;
	width: 4px;
	height: 4px;
	margin: -2px 0 0 -2px;
	border-radius: 50%;
	background: var(--wheel-gold, #b29156);
	box-shadow: 0 0 4px rgba(178, 145, 86, .8);
}

/* 5 つの粒を五角形に配置 */
.hp-wheel-emblem span:nth-child(1) { transform: rotate(0deg)   translateY(calc(-1 * clamp(28px, 3.4vw, 40px))); }
.hp-wheel-emblem span:nth-child(2) { transform: rotate(72deg)  translateY(calc(-1 * clamp(28px, 3.4vw, 40px))); }
.hp-wheel-emblem span:nth-child(3) { transform: rotate(144deg) translateY(calc(-1 * clamp(28px, 3.4vw, 40px))); }
.hp-wheel-emblem span:nth-child(4) { transform: rotate(216deg) translateY(calc(-1 * clamp(28px, 3.4vw, 40px))); }
.hp-wheel-emblem span:nth-child(5) { transform: rotate(288deg) translateY(calc(-1 * clamp(28px, 3.4vw, 40px))); }

/* === 中央テキスト周りの装飾コーナー === */
.hp-wheel-stage > .pr-quote {
	position: relative;
	max-width: 440px !important;
	padding: 96px 40px 96px !important;
	z-index: 5;
}

.hp-wheel-quote-mark {
	position: absolute;
	left: 50%;
	width: 28px;
	height: 1px;
	background: rgba(178, 145, 86, .7);
	transform: translateX(-50%);
}

.hp-wheel-quote-mark::before,
.hp-wheel-quote-mark::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 5px;
	height: 5px;
	border: 1px solid rgba(138, 12, 12, .55);
	border-radius: 50%;
	background: #fdfaf3;
	transform: translateY(-50%);
}

.hp-wheel-quote-mark::before { left: -16px; }
.hp-wheel-quote-mark::after  { right: -16px; }

.hp-wheel-quote-mark--top    { top: 32px; }
.hp-wheel-quote-mark--bottom { bottom: 32px; }

.hp-wheel-stage > .pr-quote p {
	font-family: var(--hp-serif, "Noto Serif JP", serif);
	font-size: clamp(15px, 1.6vw, 19px);
	font-weight: 500;
	line-height: 2.4;
	letter-spacing: .18em;
	color: var(--wheel-ink, #1f1714);
}

/* halo を金色寄りに微調整 */
.hp-wheel-stage::before {
	background: radial-gradient(circle,
		rgba(178, 145, 86, .12) 0%,
		rgba(138, 12, 12, .04) 35%,
		transparent 65%) !important;
	animation: hp-wheel-halo 7s ease-in-out infinite !important;
}

/* ドット脈動を金色光まで含めて再定義 */
@keyframes hp-wheel-dot-pulse {
	0%, 100% {
		box-shadow:
			0 0 0 2px rgba(248, 243, 235, 1),
			0 0 0 3px rgba(178, 145, 86, .5),
			0 0 8px rgba(138, 12, 12, .35);
	}
	50% {
		box-shadow:
			0 0 0 2px rgba(248, 243, 235, 1),
			0 0 0 3px rgba(178, 145, 86, .85),
			0 0 18px rgba(138, 12, 12, .8),
			0 0 36px rgba(178, 145, 86, .35);
	}
}

@keyframes hp-wheel-core-pulse {
	0%, 100% {
		box-shadow:
			0 0 0 2px #fdfaf3,
			0 0 0 3px rgba(178, 145, 86, .55),
			0 0 14px rgba(138, 12, 12, .55);
		transform: scale(1);
	}
	50% {
		box-shadow:
			0 0 0 2px #fdfaf3,
			0 0 0 3px rgba(178, 145, 86, .9),
			0 0 24px rgba(138, 12, 12, .85),
			0 0 48px rgba(178, 145, 86, .25);
		transform: scale(1.18);
	}
}

/* === レスポンシブ === */
@media (max-width: 780px) {
	.hp-wheel-cardinals span {
		font-size: 10px;
	}
	.hp-wheel-cardinals span::after {
		font-size: 7px;
	}
	.hp-wheel-stage > .pr-quote {
		padding: 64px 16px !important;
	}
	.hp-wheel-stage > .pr-quote p {
		font-size: 14px;
		line-height: 2.1;
		letter-spacing: .14em;
	}
}

@media (max-width: 560px) {
	.hp-wheel-cardinals {
		display: none;
	}
	.hp-wheel-orbit span {
		width: 5px; height: 5px;
		margin: -2.5px 0 0 -2.5px;
	}
	.hp-wheel-ticks span:nth-child(5n+1) {
		height: 9px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hp-wheel-ring,
	.hp-wheel-spokes,
	.hp-wheel-dots,
	.hp-wheel-ticks,
	.hp-wheel-orbit {
		animation: none !important;
	}
}

/* =========================================================
   v33: 車輪の引用文（中央寄せ・ハブを挟む上下 2 段）
   ========================================================= */

.hp-wheel-stage {
	min-height: clamp(540px, 62vw, 720px) !important;
}

/* 引用ラッパーを車輪と同じ中央に */
.hp-wheel-stage > .pr-quote {
	position: absolute;
	inset: 0;
	width: 100%;
	max-width: none !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	display: block;
}

/* 引用文の各行：ハブの直上 / 直下に配置（確実に中央寄せ） */
.hp-wheel-line {
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto !important;
	padding: 0 !important;
	width: 100%;
	font-family: var(--hp-serif, "Noto Serif JP", serif);
	font-size: clamp(15px, 1.8vw, 20px) !important;
	font-weight: 500;
	line-height: 1.6 !important;
	letter-spacing: .14em !important;
	color: var(--wheel-ink, #1f1714) !important;
	text-align: center;
	white-space: nowrap;
	z-index: 6;
}

/* ハブの中心からの距離を %（ステージ高に対する比率） で指定 */
.hp-wheel-line--top {
	top: clamp(120px, 20%, 180px);
}

.hp-wheel-line--bottom {
	bottom: clamp(120px, 20%, 180px);
}

/* 行間装飾：細い金線（消す。装飾線はステージのマークに任せる） */
.hp-wheel-line::after { display: none; }

/* 引用記号「」を装飾化 */
.hp-wheel-mark {
	display: inline-block;
	font-family: var(--hp-serif, "Noto Serif JP", serif);
	font-size: 1.4em;
	font-weight: 400;
	color: rgba(138, 12, 12, .85);
	line-height: 0;
	vertical-align: -.06em;
	letter-spacing: 0 !important;
	margin: 0 .08em;
}

/* 文字 cascade のフォントサイズも継承 */
.hp-wheel-line .hp-char {
	font-size: inherit !important;
	letter-spacing: inherit !important;
	font-weight: inherit !important;
	color: inherit !important;
}

/* 中央上下の装飾マーク（線 + 両端ドット） */
.hp-wheel-quote-mark {
	left: 50%;
	width: 64px;
	height: 1px;
	background: linear-gradient(90deg,
		transparent 0%,
		rgba(178, 145, 86, .65) 30%,
		rgba(138, 12, 12, .55) 50%,
		rgba(178, 145, 86, .65) 70%,
		transparent 100%);
	transform: translateX(-50%);
	z-index: 5;
}

.hp-wheel-quote-mark::before,
.hp-wheel-quote-mark::after {
	top: 50%;
	width: 4px;
	height: 4px;
	background: var(--wheel-red, #8a0c0c);
	border: none;
	transform: translateY(-50%);
	border-radius: 50%;
	box-shadow: 0 0 0 1.5px #fdfaf3, 0 0 0 2.5px rgba(178, 145, 86, .5);
}

.hp-wheel-quote-mark--top {
	top: calc(clamp(130px, 22%, 200px) - 30px);
}

.hp-wheel-quote-mark--bottom {
	bottom: calc(clamp(130px, 22%, 200px) - 30px);
}

/* 中央ハブをコンパクトに */
.hp-wheel-hub {
	width:  clamp(108px, 12vw, 142px);
	height: clamp(108px, 12vw, 142px);
}

.hp-wheel-emblem {
	width: clamp(58px, 6.4vw, 78px);
	height: clamp(58px, 6.4vw, 78px);
}

/* レスポンシブ */
@media (max-width: 880px) {
	.hp-wheel-line {
		font-size: clamp(14px, 2.6vw, 18px) !important;
		letter-spacing: .12em !important;
		width: min(440px, 88%);
	}
	.hp-wheel-line--top    { top: clamp(96px, 18%, 150px); }
	.hp-wheel-line--bottom { bottom: clamp(96px, 18%, 150px); }
	.hp-wheel-quote-mark--top    { top: calc(clamp(96px, 18%, 150px) - 26px); }
	.hp-wheel-quote-mark--bottom { bottom: calc(clamp(96px, 18%, 150px) - 26px); }
}

@media (max-width: 560px) {
	.hp-wheel-line {
		font-size: 13px !important;
		letter-spacing: .08em !important;
		white-space: normal;
	}
	.hp-wheel-line--top    { top: 80px; }
	.hp-wheel-line--bottom { bottom: 80px; }
}

/* =========================================================
   v35: 保育理念を「引用カード」型に作り直し（車輪は廃止）
   ========================================================= */

.hp-philosophy {
	position: relative;
	margin: 72px auto 56px;
	max-width: 880px;
	padding: 88px 64px 96px;
	text-align: center;
	background: rgba(253, 250, 243, .55);
	border-top: 1px solid rgba(178, 145, 86, .55);
	border-bottom: 1px solid rgba(178, 145, 86, .55);
}

/* 4 隅のコーナーマーク */
.hp-philosophy__corner {
	position: absolute;
	width: 22px;
	height: 22px;
	border: 1px solid rgba(178, 145, 86, .65);
	pointer-events: none;
}

.hp-philosophy__corner--tl { top: -1px; left: -1px;  border-right: none; border-bottom: none; }
.hp-philosophy__corner--tr { top: -1px; right: -1px; border-left: none;  border-bottom: none; }
.hp-philosophy__corner--bl { bottom: -1px; left: -1px;  border-right: none; border-top: none; }
.hp-philosophy__corner--br { bottom: -1px; right: -1px; border-left: none;  border-top: none; }

/* 上のラベル */
.hp-philosophy__label {
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
	display: inline-block;
	padding: 0 18px;
	background: #fbf6ec;
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .42em;
	color: #8a0c0c;
}

/* 引用本文 */
.hp-philosophy__quote {
	position: relative;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
}

.hp-philosophy__mark {
	position: absolute;
	/* Cormorant Garamond は本サイトに読み込まれていない場合があるので Times 系を確実に当てる */
	font-family: Georgia, "Times New Roman", "游明朝", "Yu Mincho", serif;
	font-style: italic;
	font-size: clamp(110px, 12vw, 170px);
	font-weight: 400;
	color: rgba(160, 0, 0, .85);
	line-height: 1;
}

.hp-philosophy__mark--open {
	top: -36px;
	left: -8px;
}

.hp-philosophy__mark--close {
	bottom: -88px;
	right: -8px;
}

.hp-philosophy__line {
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--hp-serif, "Noto Serif JP", serif);
	font-size: clamp(20px, 2.6vw, 30px) !important;
	font-weight: 500;
	line-height: 1.7 !important;
	letter-spacing: .22em !important;
	color: #1f1714 !important;
	opacity: 1 !important;
	transform: none !important;
}

.hp-philosophy__line--top {
	margin-bottom: 20px !important;
}

/* 文字 cascade を保持（既存の hp-char セレクタが効くため） */
.hp-philosophy__line .hp-char {
	font-size: inherit !important;
	letter-spacing: inherit !important;
	color: inherit !important;
}

/* 中央下の車輪エンブレム（理念の象徴・回転） */
.hp-philosophy__emblem {
	position: absolute;
	bottom: -36px;
	left: 50%;
	transform: translateX(-50%);
	width: 72px;
	height: 72px;
	background: #fbf6ec;
	border-radius: 50%;
	border: 1px solid rgba(160, 122, 58, .65);
	display: grid;
	place-items: center;
	box-shadow:
		0 0 0 3px #fbf6ec,
		0 0 0 4px rgba(160, 0, 0, .18),
		0 6px 18px rgba(160, 0, 0, .18);
	z-index: 3;
}

/* 外周を回る 8 ドット軌道 */
.hp-philosophy__emblem-orbit {
	position: absolute;
	inset: 4px;
	border-radius: 50%;
	animation: hp-philosophy-spin 8s linear infinite;
	transform-origin: 50% 50%;
}

.hp-philosophy__emblem-orbit span {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 3px;
	height: 3px;
	margin: -1.5px;
	border-radius: 50%;
	background: var(--rondo-red, #a00000);
	box-shadow: 0 0 6px rgba(160, 0, 0, .6);
}

.hp-philosophy__emblem-orbit span:nth-child(1) { transform: rotate(0deg)   translateY(-30px); }
.hp-philosophy__emblem-orbit span:nth-child(2) { transform: rotate(45deg)  translateY(-30px); }
.hp-philosophy__emblem-orbit span:nth-child(3) { transform: rotate(90deg)  translateY(-30px); }
.hp-philosophy__emblem-orbit span:nth-child(4) { transform: rotate(135deg) translateY(-30px); }
.hp-philosophy__emblem-orbit span:nth-child(5) { transform: rotate(180deg) translateY(-30px); }
.hp-philosophy__emblem-orbit span:nth-child(6) { transform: rotate(225deg) translateY(-30px); }
.hp-philosophy__emblem-orbit span:nth-child(7) { transform: rotate(270deg) translateY(-30px); }
.hp-philosophy__emblem-orbit span:nth-child(8) { transform: rotate(315deg) translateY(-30px); }

/* 中間リング（点線、逆回転） */
.hp-philosophy__emblem-ring {
	position: absolute;
	inset: 10px;
	border-radius: 50%;
	border: 1px dashed rgba(160, 0, 0, .55);
	animation: hp-philosophy-spin 12s linear infinite reverse;
}

/* 4 本スポーク（少し早く回転） */
.hp-philosophy__emblem-spokes {
	position: absolute;
	inset: 14px;
	border-radius: 50%;
	animation: hp-philosophy-spin 6s linear infinite;
	transform-origin: 50% 50%;
}

.hp-philosophy__emblem-spokes span {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1px;
	height: 100%;
	background: linear-gradient(180deg,
		transparent 0%,
		rgba(160, 122, 58, .85) 30%,
		rgba(160, 0, 0, .85) 50%,
		rgba(160, 122, 58, .85) 70%,
		transparent 100%);
	transform-origin: 50% 50%;
}

.hp-philosophy__emblem-spokes span:nth-child(1) { transform: translate(-50%, -50%) rotate(0deg); }
.hp-philosophy__emblem-spokes span:nth-child(2) { transform: translate(-50%, -50%) rotate(45deg); }
.hp-philosophy__emblem-spokes span:nth-child(3) { transform: translate(-50%, -50%) rotate(90deg); }
.hp-philosophy__emblem-spokes span:nth-child(4) { transform: translate(-50%, -50%) rotate(135deg); }

/* 中央の赤コア */
.hp-philosophy__emblem-core {
	position: relative;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--rondo-red, #a00000);
	z-index: 3;
	box-shadow:
		0 0 0 2px #fbf6ec,
		0 0 0 3px rgba(160, 122, 58, .7),
		0 0 10px rgba(160, 0, 0, .55);
}

/* キャプション */
.hp-philosophy__caption {
	margin-top: 56px;
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .32em;
	color: rgba(31, 23, 20, .55);
}

.hp-philosophy__caption i {
	font-style: normal;
	margin: 0 8px;
	color: rgba(178, 145, 86, .8);
}

/* レスポンシブ */
@media (max-width: 720px) {
	.hp-philosophy {
		padding: 64px 24px 72px;
		margin: 48px auto;
	}
	.hp-philosophy__line {
		font-size: clamp(16px, 4.2vw, 22px) !important;
		letter-spacing: .14em !important;
	}
	.hp-philosophy__mark {
		font-size: clamp(64px, 16vw, 96px);
	}
	.hp-philosophy__mark--open  { top: -22px; left: -4px; }
	.hp-philosophy__mark--close { bottom: -60px; right: -4px; }
}

@media (max-width: 460px) {
	.hp-philosophy__line {
		font-size: 15px !important;
		letter-spacing: .08em !important;
	}
}

/* =========================================================
   v35.1: 保育理念セクションの演出 / アニメーション
   ========================================================= */

/* --- 初期状態：上下の枠線を伸びる演出 --- */
.hp-philosophy {
	border-top-color: transparent !important;
	border-bottom-color: transparent !important;
	overflow: visible;
}

.hp-philosophy::before,
.hp-philosophy::after {
	content: "";
	position: absolute;
	left: 50%;
	width: 0;
	height: 1px;
	background: rgba(178, 145, 86, .65);
	transform: translateX(-50%);
	transition: width 1.4s cubic-bezier(.22, 1, .25, 1) .15s;
}

.hp-philosophy::before { top: -1px; }
.hp-philosophy::after  { bottom: -1px; }

.hp-philosophy.is-revealed::before,
.hp-philosophy.is-revealed::after,
.hp-philosophy.is-pr-entered::before,
.hp-philosophy.is-pr-entered::after {
	width: calc(100% + 2px);
}

/* --- コーナーマーク：枠線が伸びた後にフェードイン + 微移動 --- */
.hp-philosophy__corner {
	opacity: 0;
	transition: opacity .6s ease 1.2s, transform .6s cubic-bezier(.22, 1, .25, 1) 1.2s;
}

.hp-philosophy__corner--tl { transform: translate(6px, 6px); }
.hp-philosophy__corner--tr { transform: translate(-6px, 6px); }
.hp-philosophy__corner--bl { transform: translate(6px, -6px); }
.hp-philosophy__corner--br { transform: translate(-6px, -6px); }

.hp-philosophy.is-revealed .hp-philosophy__corner,
.hp-philosophy.is-pr-entered .hp-philosophy__corner {
	opacity: 1;
	transform: translate(0, 0);
}

/* --- ラベルが上から降りてくる --- */
.hp-philosophy__label {
	opacity: 0;
	transform: translate(-50%, -10px);
	transition: opacity .6s ease .9s, transform .8s cubic-bezier(.22, 1, .25, 1) .9s;
}

.hp-philosophy.is-revealed .hp-philosophy__label,
.hp-philosophy.is-pr-entered .hp-philosophy__label {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* --- 引用記号：拡大しながらフェードイン + 微回転 --- */
.hp-philosophy__mark {
	opacity: 0;
	transition: opacity 1s ease .6s, transform 1.2s cubic-bezier(.22, 1, .25, 1) .6s;
}

.hp-philosophy__mark--open  { transform: translate(-12px, 8px) scale(.7) rotate(-8deg); }
.hp-philosophy__mark--close { transform: translate(12px, -8px) scale(.7) rotate(8deg); }

.hp-philosophy.is-revealed .hp-philosophy__mark,
.hp-philosophy.is-pr-entered .hp-philosophy__mark {
	opacity: 1;
	transform: translate(0, 0) scale(1) rotate(0deg);
}

/* --- 引用文：文字 cascade（hp-char）で1文字ずつ表示 --- */
.hp-philosophy__line .hp-char {
	display: inline-block;
	opacity: 0;
	transform: translateY(16px);
	filter: blur(4px);
	transition:
		opacity .9s cubic-bezier(.22, 1, .25, 1),
		transform .9s cubic-bezier(.22, 1, .25, 1),
		filter .9s cubic-bezier(.22, 1, .25, 1);
	transition-delay: calc(var(--char-delay, 0) * .045s + .4s);
}

.hp-philosophy.is-revealed .hp-philosophy__line .hp-char,
.hp-philosophy.is-pr-entered .hp-philosophy__line .hp-char {
	opacity: 1;
	transform: translateY(0);
	filter: blur(0);
}

/* 2 行目はさらに遅延 */
.hp-philosophy__line--bottom .hp-char {
	transition-delay: calc(var(--char-delay, 0) * .045s + 1.2s);
}

/* --- エンブレム：下から立ち上がる + リング/スポークが回転 --- */
.hp-philosophy__emblem {
	opacity: 0;
	transform: translate(-50%, 20px) scale(.5);
	transition: opacity .8s ease 1.5s, transform .9s cubic-bezier(.22, 1, .25, 1) 1.5s;
}

.hp-philosophy.is-revealed .hp-philosophy__emblem,
.hp-philosophy.is-pr-entered .hp-philosophy__emblem {
	opacity: 1;
	transform: translate(-50%, 0) scale(1);
}

/* コア（赤いドット）が脈動 */
.hp-philosophy__emblem-core {
	animation: hp-philosophy-pulse 2.4s ease-in-out infinite;
}

@keyframes hp-philosophy-spin {
	to { transform: rotate(360deg); }
}

@keyframes hp-philosophy-pulse {
	0%, 100% {
		box-shadow:
			0 0 0 2px #fbf6ec,
			0 0 0 3px rgba(160, 122, 58, .7),
			0 0 8px rgba(160, 0, 0, .4);
	}
	50% {
		box-shadow:
			0 0 0 2px #fbf6ec,
			0 0 0 4px rgba(160, 122, 58, .95),
			0 0 18px rgba(160, 0, 0, .8),
			0 0 32px rgba(160, 122, 58, .3);
	}
}

/* --- キャプション：最後にフェードイン --- */
.hp-philosophy__caption {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .7s ease 1.8s, transform .7s cubic-bezier(.22, 1, .25, 1) 1.8s;
}

.hp-philosophy.is-revealed .hp-philosophy__caption,
.hp-philosophy.is-pr-entered .hp-philosophy__caption {
	opacity: 1;
	transform: translateY(0);
}

/* --- 全体の背景にうっすら光彩が流れる --- */
.hp-philosophy::after {
	z-index: 0;
}

.hp-philosophy > * {
	position: relative;
	z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
	.hp-philosophy__emblem-orbit,
	.hp-philosophy__emblem-ring,
	.hp-philosophy__emblem-spokes,
	.hp-philosophy__emblem-core {
		animation: none !important;
	}
}

/* =========================================================
   v30: /contact/ メガ TEL バナー + 受付フロー + アクセス
   ========================================================= */

/* ----- メガ TEL バナー ----- */
.hp-contact-megatel {
	position: relative;
	padding: 56px 64px;
	background: #fdfaf3;
	border: 1px solid rgba(178, 145, 86, .35);
	box-shadow:
		0 1px 0 rgba(178, 145, 86, .25),
		0 36px 60px -48px rgba(138, 12, 12, .35);
	overflow: hidden;
}

.hp-contact-megatel::before,
.hp-contact-megatel::after {
	content: "";
	position: absolute;
	width: 64px;
	height: 64px;
	border: 1px solid rgba(138, 12, 12, .35);
	pointer-events: none;
}

.hp-contact-megatel::before {
	top: 16px;
	left: 16px;
	border-right: none;
	border-bottom: none;
}

.hp-contact-megatel::after {
	bottom: 16px;
	right: 16px;
	border-left: none;
	border-top: none;
}

.hp-contact-megatel__inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-rows: auto auto;
	gap: 6px 36px;
	align-items: center;
}

.hp-contact-megatel__tag {
	grid-column: 1;
	grid-row: 1;
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .28em;
	color: #8a0c0c;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	padding-block: 6px;
}

.hp-contact-megatel__main {
	grid-column: 2;
	grid-row: 1;
	font-family: var(--hp-serif, "Noto Serif JP", serif);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .22em;
	color: rgba(31, 23, 20, .68);
}

.hp-contact-megatel__num {
	grid-column: 2;
	grid-row: 2;
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	font-size: clamp(40px, 6.4vw, 78px);
	font-weight: 600;
	letter-spacing: .04em;
	color: #1f1714;
	text-decoration: none;
	line-height: 1;
	display: inline-block;
	position: relative;
}

.hp-contact-megatel__num::before {
	content: "TEL";
	position: absolute;
	left: -2px;
	top: -22px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .28em;
	color: rgba(178, 145, 86, .9);
}

.hp-contact-megatel__hours {
	grid-column: 3;
	grid-row: 1 / 3;
	display: inline-flex;
	flex-direction: column;
	gap: 8px;
	padding-left: 28px;
	border-left: 1px solid rgba(178, 145, 86, .4);
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	font-size: 13px;
	letter-spacing: .18em;
	color: rgba(31, 23, 20, .72);
}

.hp-contact-megatel__hours i {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #6dbf6d;
	box-shadow: 0 0 0 3px rgba(109, 191, 109, .25), 0 0 8px rgba(109, 191, 109, .6);
	animation: hp-megatel-online 2.2s ease-in-out infinite;
}

@keyframes hp-megatel-online {
	0%, 100% { box-shadow: 0 0 0 3px rgba(109, 191, 109, .25), 0 0 8px rgba(109, 191, 109, .6); }
	50%      { box-shadow: 0 0 0 6px rgba(109, 191, 109, .12), 0 0 14px rgba(109, 191, 109, .9); }
}

.hp-contact-megatel__deco {
	position: absolute;
	top: 50%;
	right: -40px;
	transform: translateY(-50%) rotate(45deg);
	width: 180px;
	height: 180px;
	pointer-events: none;
	z-index: 1;
	opacity: .12;
}

.hp-contact-megatel__deco span {
	position: absolute;
	inset: 0;
	border: 1px solid #8a0c0c;
}

.hp-contact-megatel__deco span:nth-child(2) { inset: 20px; }
.hp-contact-megatel__deco span:nth-child(3) { inset: 40px; }
.hp-contact-megatel__deco span:nth-child(4) { inset: 60px; }

@media (max-width: 760px) {
	.hp-contact-megatel {
		padding: 40px 24px;
	}
	.hp-contact-megatel__inner {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto auto;
		gap: 6px;
		text-align: center;
	}
	.hp-contact-megatel__tag {
		grid-column: 1;
		grid-row: 1;
		writing-mode: horizontal-tb;
		transform: none;
		padding: 0;
	}
	.hp-contact-megatel__main {
		grid-column: 1;
		grid-row: 2;
	}
	.hp-contact-megatel__num {
		grid-column: 1;
		grid-row: 3;
		margin-top: 24px;
	}
	.hp-contact-megatel__num::before {
		left: 50%;
		transform: translateX(-50%);
	}
	.hp-contact-megatel__hours {
		grid-column: 1;
		grid-row: 4;
		border-left: none;
		border-top: 1px solid rgba(178, 145, 86, .35);
		padding: 14px 0 0;
		margin-top: 20px;
		align-items: center;
	}
	.hp-contact-megatel__deco {
		display: none;
	}
}

/* ----- 受付フロー（4 ステップ） ----- */
.hp-contact-flow {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	position: relative;
	counter-reset: flow;
}

.hp-contact-flow::before {
	content: "";
	position: absolute;
	top: 64px;
	left: 12.5%;
	right: 12.5%;
	height: 1px;
	background: repeating-linear-gradient(90deg,
		rgba(178, 145, 86, .55) 0 6px,
		transparent 6px 12px);
	z-index: 0;
}

.hp-contact-flow li {
	position: relative;
	z-index: 1;
	padding: 0 20px;
	text-align: center;
}

.hp-contact-flow__num {
	position: relative;
	display: grid;
	place-items: center;
	width: 92px;
	height: 92px;
	margin: 0 auto 24px;
	border-radius: 50%;
	background: #fdfaf3;
	border: 1px solid rgba(138, 12, 12, .35);
	box-shadow:
		inset 0 0 0 5px #fdfaf3,
		inset 0 0 0 6px rgba(178, 145, 86, .45),
		0 14px 30px -18px rgba(138, 12, 12, .45);
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	font-size: 30px;
	font-weight: 600;
	letter-spacing: .04em;
	color: #8a0c0c;
}

.hp-contact-flow__tag {
	display: block;
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .28em;
	color: rgba(178, 145, 86, .95);
	margin-bottom: 8px;
}

.hp-contact-flow h3 {
	margin: 0 0 12px;
	font-family: var(--hp-serif, "Noto Serif JP", serif);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: .08em;
	color: #1f1714;
}

.hp-contact-flow p {
	margin: 0;
	color: rgba(31, 23, 20, .68);
	font-size: 13px;
	line-height: 1.8;
	letter-spacing: .04em;
}

@media (max-width: 780px) {
	.hp-contact-flow {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	.hp-contact-flow::before {
		display: none;
	}
	.hp-contact-flow li {
		display: grid;
		grid-template-columns: 76px 1fr;
		align-items: center;
		text-align: left;
		gap: 0 20px;
		padding: 0;
	}
	.hp-contact-flow__num {
		grid-row: 1 / 3;
		width: 72px;
		height: 72px;
		margin: 0;
		font-size: 22px;
	}
	.hp-contact-flow__tag {
		margin: 0;
	}
}

/* ----- アクセスリスト ----- */
.hp-contact-access {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0;
	border-top: 1px solid rgba(178, 145, 86, .3);
}

.hp-contact-access__item {
	position: relative;
	display: grid;
	grid-template-columns: 56px 1fr 32px;
	align-items: center;
	gap: 24px;
	padding: 28px 28px;
	background: transparent;
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid rgba(178, 145, 86, .3);
	transition: background .35s ease, transform .45s cubic-bezier(.22, 1, .25, 1);
}

.hp-contact-access__item:nth-child(odd) {
	border-right: 1px solid rgba(178, 145, 86, .3);
}

.hp-contact-access__item:hover {
	background: rgba(253, 250, 243, .8);
	transform: translateX(4px);
}

.hp-contact-access__pin {
	position: relative;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: 1px solid rgba(138, 12, 12, .4);
	background: #fdfaf3;
}

.hp-contact-access__pin::before {
	content: "";
	position: absolute;
	width: 20px;
	height: 20px;
	background: #8a0c0c;
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg) translate(-2px, 2px);
	box-shadow: 0 4px 8px rgba(138, 12, 12, .35);
}

.hp-contact-access__pin span {
	position: relative;
	width: 6px;
	height: 6px;
	background: #fdfaf3;
	border-radius: 50%;
	z-index: 2;
	margin-bottom: 2px;
}

.hp-contact-access__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.hp-contact-access__tag {
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .28em;
	color: rgba(178, 145, 86, .95);
}

.hp-contact-access__name {
	font-family: var(--hp-serif, "Noto Serif JP", serif);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: .06em;
	color: #1f1714;
}

.hp-contact-access__addr {
	font-size: 12.5px;
	color: rgba(31, 23, 20, .65);
	letter-spacing: .04em;
}

.hp-contact-access__arrow {
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	font-size: 18px;
	color: #8a0c0c;
	transition: transform .35s ease;
}

.hp-contact-access__item:hover .hp-contact-access__arrow {
	transform: translate(4px, -4px);
}

@media (max-width: 780px) {
	.hp-contact-access {
		grid-template-columns: 1fr;
	}
	.hp-contact-access__item {
		grid-template-columns: 48px 1fr 24px;
		gap: 18px;
		padding: 22px 14px;
	}
	.hp-contact-access__item:nth-child(odd) {
		border-right: none;
	}
	.hp-contact-access__pin {
		width: 48px;
		height: 48px;
	}
}

/* =========================================================
   v31: /flow/ 24 時間クロックビジュアライザー
   ========================================================= */

.hp-clock {
	position: relative;
	width: min(640px, 86vw);
	--clock-r: calc(min(640px, 86vw) / 2);
	margin: 88px auto 96px;
	aspect-ratio: 1 / 1;
	isolation: isolate;
}

.hp-clock__face {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* リング 3 層 */
.hp-clock__ring {
	position: absolute;
	border-radius: 50%;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
}

.hp-clock__ring--outer {
	width: 100%;
	height: 100%;
	border: 1px dashed rgba(178, 145, 86, .55);
	animation: hp-wheel-spin 240s linear infinite;
}

.hp-clock__ring--mid {
	width: 82%;
	height: 82%;
	border: 1px solid rgba(138, 12, 12, .35);
}

.hp-clock__ring--inner {
	width: 52%;
	height: 52%;
	border: 1px dashed rgba(178, 145, 86, .4);
	animation: hp-wheel-spin 180s linear infinite reverse;
}

/* 24 ティック */
.hp-clock__ticks {
	position: absolute;
	inset: 0;
}

.hp-clock__tick {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1px;
	height: 10px;
	background: rgba(178, 145, 86, .5);
	margin: -5px 0 0 -0.5px;
	transform-origin: 50% 50%;
	transform: rotate(var(--ang)) translateY(calc(-1 * var(--clock-r) + 5px));
}

.hp-clock__tick.is-major {
	height: 16px;
	width: 1.5px;
	background: rgba(138, 12, 12, .7);
	margin: -8px 0 0 -0.75px;
	transform: rotate(var(--ang)) translateY(calc(-1 * var(--clock-r) + 8px));
}

/* 主要時刻ラベル（0/6/12/18） */
.hp-clock__hours {
	position: absolute;
	inset: 0;
}

.hp-clock__hour {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	display: grid;
	place-items: center;
	transform-origin: 0 0;
	transform: rotate(var(--ang)) translateY(calc(-1 * var(--clock-r) + 28px)) rotate(calc(-1 * var(--ang)));
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	color: rgba(31, 23, 20, .65);
	white-space: nowrap;
}

.hp-clock__hour::after {
	content: "h";
	font-size: 9px;
	margin-left: 2px;
	color: rgba(178, 145, 86, .85);
}

/* AM / PM ラベル */
.hp-clock__ampm {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.hp-clock__ampm-am,
.hp-clock__ampm-pm {
	position: absolute;
	top: 50%;
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .26em;
	color: rgba(178, 145, 86, .9);
	transform: translateY(-50%);
}

.hp-clock__ampm-am {
	left: -8px;
	writing-mode: vertical-rl;
	transform: translateY(-50%) rotate(180deg);
}

.hp-clock__ampm-pm {
	right: -8px;
	writing-mode: vertical-rl;
	transform: translateY(-50%);
}

/* 時計の中央：シンプルなミニハブ（24 HOURS の刻印） */
.hp-clock__hub--mini {
	position: absolute;
	top: 50%;
	left: 50%;
	width: clamp(110px, 16%, 160px);
	height: clamp(110px, 16%, 160px);
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background:
		radial-gradient(circle at 50% 35%, #fdfaf3 0%, #f3ead8 60%, #ead9b6 100%);
	box-shadow:
		inset 0 0 0 1px rgba(178, 145, 86, .65),
		inset 0 0 0 5px #fdfaf3,
		inset 0 0 0 6px rgba(138, 12, 12, .3),
		0 14px 36px -20px rgba(138, 12, 12, .45);
	display: grid;
	place-items: center;
	gap: 4px;
	text-align: center;
	z-index: 4;
	pointer-events: none;
}

.hp-clock__hub-mini-num {
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	font-size: clamp(28px, 3.6vw, 40px);
	font-weight: 600;
	color: #8a0c0c;
	letter-spacing: .02em;
	line-height: 1;
}

.hp-clock__hub-mini-sub {
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .32em;
	color: rgba(178, 145, 86, .95);
}

/* =========================================================
   v31.1: /flow/ 2 列レイアウト：左=画像パネル / 右=時計
   ========================================================= */

.hp-flow-stage {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(40px, 5vw, 80px);
	align-items: center;
	margin: 64px auto 48px;
	max-width: 1200px;
}

/* ----- 左：画像パネル ----- */
.hp-flow-photo {
	position: relative;
}

.hp-flow-photo__frame {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: #15110f;
	box-shadow: 0 30px 70px -30px rgba(31, 23, 20, .35);
}

.hp-flow-photo__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transform: scale(1.06);
	transition: opacity 1s cubic-bezier(.22, 1, .25, 1), transform 1.8s cubic-bezier(.22, 1, .25, 1);
	filter: saturate(.94) brightness(.94);
}

.hp-flow-photo__img.is-active {
	opacity: 1;
	transform: scale(1);
}

.hp-flow-photo__grain {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .06), transparent 50%),
		radial-gradient(circle at 50% 100%, rgba(15, 10, 8, .55), transparent 60%);
	pointer-events: none;
	z-index: 2;
}

.hp-flow-photo__veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(15, 10, 8, 0) 38%, rgba(15, 10, 8, .82) 100%);
	pointer-events: none;
	z-index: 3;
}

/* 4 隅のコーナーマーク */
.hp-flow-photo__corner {
	position: absolute;
	width: 22px;
	height: 22px;
	border: 1px solid rgba(253, 250, 243, .7);
	z-index: 4;
	pointer-events: none;
}

.hp-flow-photo__corner--tl { top: 16px; left: 16px; border-right: none; border-bottom: none; }
.hp-flow-photo__corner--tr { top: 16px; right: 16px; border-left: none; border-bottom: none; }
.hp-flow-photo__corner--bl { bottom: 16px; left: 16px; border-right: none; border-top: none; }
.hp-flow-photo__corner--br { bottom: 16px; right: 16px; border-left: none; border-top: none; }

/* 画像上のキャプション（時刻 + タグ + タイトル + 説明） */
.hp-flow-photo__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 28px 32px 32px;
	color: #fdfaf3;
	z-index: 5;
}

.hp-flow-photo__index {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .3em;
	color: rgba(228, 196, 140, .95);
	margin-bottom: 12px;
}

.hp-flow-photo__index span:first-child {
	font-size: 24px;
	font-weight: 600;
	color: #fdfaf3;
	letter-spacing: .02em;
}

.hp-flow-photo__index i {
	font-style: normal;
	color: rgba(253, 250, 243, .5);
	font-size: 14px;
	padding: 0 2px;
}

.hp-flow-photo__tag {
	display: inline-block;
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .36em;
	color: rgba(228, 196, 140, .98);
	padding: 5px 14px;
	border: 1px solid rgba(228, 196, 140, .55);
	border-radius: 999px;
	background: rgba(15, 10, 8, .35);
	margin-left: 10px;
}

.hp-flow-photo__time {
	display: block;
	margin: 16px 0 6px;
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	font-size: clamp(36px, 4.6vw, 56px);
	font-weight: 600;
	color: #fdfaf3;
	letter-spacing: .03em;
	line-height: 1;
	text-shadow: 0 4px 18px rgba(0, 0, 0, .5);
	transition: opacity .35s ease;
}

.hp-flow-photo__title {
	margin: 8px 0 12px;
	font-family: var(--hp-serif, "Noto Serif JP", serif);
	font-size: clamp(18px, 2vw, 22px);
	font-weight: 600;
	letter-spacing: .14em;
	color: #fdfaf3;
	transition: opacity .35s ease;
}

.hp-flow-photo__desc {
	margin: 0;
	max-width: 36em;
	font-size: 13px;
	line-height: 1.9;
	letter-spacing: .06em;
	color: rgba(253, 250, 243, .88);
	transition: opacity .35s ease;
}

.hp-flow-stage.is-swapping .hp-flow-photo__time,
.hp-flow-stage.is-swapping .hp-flow-photo__title,
.hp-flow-stage.is-swapping .hp-flow-photo__desc,
.hp-flow-stage.is-swapping .hp-flow-photo__index {
	opacity: .25;
}

/* 画像下のヒント */
.hp-flow-photo__hint {
	margin: 18px 4px 0;
	font-size: 11.5px;
	letter-spacing: .08em;
	color: rgba(31, 23, 20, .6);
	text-align: right;
}

/* ----- 右：時計サイズ調整 ----- */
.hp-flow-stage .hp-clock {
	width: 100%;
	max-width: 560px;
	--clock-r: calc(min(560px, 100%) / 2);
	margin: 0;
}

/* レスポンシブ：モバイルは縦積み */
@media (max-width: 980px) {
	.hp-flow-stage {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.hp-flow-photo__caption {
		padding: 20px 22px 24px;
	}
	.hp-flow-photo__time {
		font-size: 38px;
	}
	.hp-flow-stage .hp-clock {
		max-width: 480px;
		--clock-r: calc(min(480px, 86vw) / 2);
		margin: 0 auto;
	}
}

/* =========================================================
   v34: /flow/ 0 から作り直し — 「針が回って画像が切り替わる」体験
   ========================================================= */

.hp-dial {
	--dial-size: min(520px, 48vw);
	--dial-r: calc(var(--dial-size) / 2);
	--dial-red:  #8a0c0c;
	--dial-gold: #b29156;
	--dial-ink:  #1f1714;

	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(40px, 5vw, 80px);
	align-items: center;
	margin: 64px auto 56px;
	max-width: 1200px;
}

/* ----- 左：ビジュアル + 情報 ----- */
.hp-dial__visual {
	display: grid;
	gap: 32px;
}

.hp-dial__photo {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: #15110f;
	box-shadow: 0 28px 70px -34px rgba(31, 23, 20, .45);
}

.hp-dial__photo-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transform: scale(1.06);
	transition:
		opacity .9s cubic-bezier(.22, 1, .25, 1),
		transform 1.6s cubic-bezier(.22, 1, .25, 1);
	filter: saturate(.94) brightness(.94);
}

.hp-dial__photo-img.is-active {
	opacity: 1;
	transform: scale(1);
}

.hp-dial__photo-shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(15, 10, 8, 0) 55%, rgba(15, 10, 8, .55) 100%);
	pointer-events: none;
}

.hp-dial__photo-count {
	position: absolute;
	top: 20px;
	left: 22px;
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	color: #fdfaf3;
	pointer-events: none;
	z-index: 2;
}

.hp-dial__photo-count span:first-child {
	font-size: 32px;
	font-weight: 600;
	letter-spacing: .02em;
	line-height: 1;
	transition: opacity .35s ease;
}

.hp-dial__photo-count i {
	font-style: normal;
	font-size: 16px;
	color: rgba(253, 250, 243, .55);
	padding: 0 4px;
}

.hp-dial__photo-count span:last-child {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .14em;
	color: rgba(253, 250, 243, .65);
}

/* ----- 情報エリア ----- */
.hp-dial__info {
	padding: 0;
}

.hp-dial__info-top {
	display: flex;
	align-items: baseline;
	gap: 22px;
	margin-bottom: 14px;
	padding-bottom: 18px;
	border-bottom: 1px solid rgba(178, 145, 86, .35);
}

.hp-dial__time {
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	font-size: clamp(44px, 5.4vw, 68px);
	font-weight: 600;
	color: var(--dial-red);
	letter-spacing: .04em;
	line-height: 1;
	transition: opacity .35s ease;
}

.hp-dial__tag {
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .36em;
	color: rgba(178, 145, 86, .98);
	padding: 6px 16px;
	border: 1px solid rgba(178, 145, 86, .55);
	border-radius: 999px;
	transition: opacity .35s ease;
}

.hp-dial__title {
	margin: 0 0 14px;
	font-family: var(--hp-serif, "Noto Serif JP", serif);
	font-size: clamp(20px, 2.3vw, 28px);
	font-weight: 600;
	letter-spacing: .12em;
	color: var(--dial-ink);
	transition: opacity .35s ease;
}

.hp-dial__desc {
	margin: 0;
	max-width: 32em;
	font-size: 14px;
	line-height: 2;
	letter-spacing: .06em;
	color: rgba(31, 23, 20, .7);
	transition: opacity .35s ease;
}

.hp-dial.is-swap .hp-dial__time,
.hp-dial.is-swap .hp-dial__tag,
.hp-dial.is-swap .hp-dial__title,
.hp-dial.is-swap .hp-dial__desc,
.hp-dial.is-swap .hp-dial__photo-count span:first-child {
	opacity: .2;
}

/* ----- 右：時計 ----- */
.hp-dial__clock {
	display: grid;
	place-items: center;
	gap: 22px;
}

.hp-dial__face {
	position: relative;
	width: var(--dial-size);
	height: var(--dial-size);
}

/* リング 3 層 */
.hp-dial__ring {
	position: absolute;
	top: 50%;
	left: 50%;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.hp-dial__ring--1 {
	width: 100%;
	height: 100%;
	border: 1px solid rgba(178, 145, 86, .55);
}

.hp-dial__ring--2 {
	width: 82%;
	height: 82%;
	border: 1px dashed rgba(178, 145, 86, .4);
}

.hp-dial__ring--3 {
	width: 38%;
	height: 38%;
	border: 1px solid rgba(178, 145, 86, .3);
}

/* ティック */
.hp-dial__tick {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1px;
	height: 8px;
	background: rgba(178, 145, 86, .55);
	margin: -4px 0 0 -0.5px;
	transform-origin: 50% 50%;
	transform: rotate(var(--ang)) translateY(calc(-1 * var(--dial-r) + 4px));
}

.hp-dial__tick.is-major {
	height: 14px;
	width: 1.5px;
	background: var(--dial-red);
	margin: -7px 0 0 -0.75px;
	transform: rotate(var(--ang)) translateY(calc(-1 * var(--dial-r) + 7px));
}

/* 主要時刻数字（0/6/12/18） */
.hp-dial__num {
	position: absolute;
	top: 50%;
	left: 50%;
	transform-origin: 0 0;
	transform: rotate(var(--ang)) translateY(calc(-1 * var(--dial-r) + 30px)) rotate(calc(-1 * var(--ang)));
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	font-size: 13px;
	font-weight: 700;
	color: rgba(31, 23, 20, .55);
	pointer-events: none;
	white-space: nowrap;
}

/* AM/PM */
.hp-dial__band {
	position: absolute;
	top: 50%;
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .3em;
	color: rgba(178, 145, 86, .9);
	transform: translateY(-50%);
	pointer-events: none;
}

.hp-dial__band--am { left: 12px; }
.hp-dial__band--pm { right: 12px; }

/* ===== 針 ===== */
.hp-dial__hand {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 4px;
	height: calc(var(--dial-r) - 36px);
	margin-left: -2px;
	transform-origin: 50% 100%;
	transform: rotate(calc(var(--ang) + 180deg));
	transition: transform 1s cubic-bezier(.62, .04, .25, 1);
	z-index: 5;
	pointer-events: none;
}

.hp-dial__hand-bar {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(0deg, var(--dial-red) 0%, var(--dial-red) 75%, rgba(138, 12, 12, .3) 100%);
	border-radius: 2px 2px 0 0;
	box-shadow: 0 0 8px rgba(138, 12, 12, .35);
}

.hp-dial__hand-tip {
	position: absolute;
	top: -10px;
	left: 50%;
	width: 14px;
	height: 18px;
	transform: translateX(-50%);
	background: var(--dial-red);
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
	filter: drop-shadow(0 2px 4px rgba(138, 12, 12, .35));
}

/* 反対側の小さな尾 */
.hp-dial__hand-tail {
	position: absolute;
	bottom: -20px;
	left: 50%;
	width: 3px;
	height: 18px;
	margin-left: -1.5px;
	background: var(--dial-red);
	border-radius: 0 0 3px 3px;
	opacity: .6;
}

/* ===== 中心ピン ===== */
.hp-dial__center {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
	border-radius: 50%;
	background: var(--dial-red);
	border: 3px solid #fdfaf3;
	box-shadow:
		0 0 0 1px rgba(138, 12, 12, .5),
		0 0 0 4px rgba(178, 145, 86, .3),
		0 6px 14px rgba(138, 12, 12, .35);
	z-index: 6;
	pointer-events: none;
}

/* ===== 時刻ドット（ボタン） ===== */
.hp-dial__dot {
	position: absolute;
	top: 50%;
	left: 50%;
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	transform-origin: 0 0;
	transform: rotate(var(--ang));
	z-index: 4;
}

.hp-dial__dot-mark {
	position: absolute;
	top: -9px;
	left: -9px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fdfaf3;
	border: 2px solid var(--dial-red);
	box-shadow: 0 0 0 3px #fdfaf3;
	transform: translateY(calc(-1 * (var(--dial-r) - 30px)));
	transition: background .25s ease, box-shadow .25s ease;
}

.hp-dial__dot:hover .hp-dial__dot-mark,
.hp-dial__dot:focus-visible .hp-dial__dot-mark,
.hp-dial__dot.is-active .hp-dial__dot-mark {
	background: var(--dial-red);
	box-shadow:
		0 0 0 3px #fdfaf3,
		0 0 0 5px rgba(138, 12, 12, .15),
		0 0 18px rgba(138, 12, 12, .55);
}

.hp-dial__dot-mark::after {
	content: "";
	position: absolute;
	inset: 4px;
	border-radius: 50%;
	background: var(--dial-red);
	opacity: 0;
	transition: opacity .25s ease;
}

.hp-dial__dot.is-active .hp-dial__dot-mark::after,
.hp-dial__dot:hover .hp-dial__dot-mark::after {
	opacity: 1;
}

/* ドットの時刻ラベル（外側に常時表示） */
.hp-dial__dot-label {
	position: absolute;
	left: -36px;
	width: 72px;
	text-align: center;
	transform: translateY(calc(-1 * (var(--dial-r) + 4px))) rotate(calc(-1 * var(--ang)));
	transform-origin: 50% 50%;
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .04em;
	color: rgba(31, 23, 20, .55);
	line-height: 1;
	transition: color .25s ease;
}

.hp-dial__dot.is-active .hp-dial__dot-label,
.hp-dial__dot:hover .hp-dial__dot-label {
	color: var(--dial-red);
}

/* ヒント */
.hp-dial__hint {
	margin: 0;
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .24em;
	color: rgba(31, 23, 20, .5);
}

/* ===== モバイル ===== */
.hp-dial__list {
	display: none;
	list-style: none;
	padding: 0;
	margin: 48px 0 0;
}

@media (max-width: 980px) {
	.hp-dial {
		grid-template-columns: 1fr;
		gap: 48px;
	}
	.hp-dial {
		--dial-size: min(420px, 78vw);
		--dial-r: calc(min(420px, 78vw) / 2);
	}
	.hp-dial__photo {
		aspect-ratio: 16 / 11;
	}
}

@media (max-width: 640px) {
	.hp-dial__clock {
		display: none;
	}
	.hp-dial__visual {
		gap: 24px;
	}
	.hp-dial__list {
		display: grid;
		gap: 18px;
	}
	.hp-dial__list li {
		display: grid;
		grid-template-columns: 70px 70px 1fr;
		gap: 14px;
		align-items: start;
		padding: 16px 0;
		border-top: 1px solid rgba(178, 145, 86, .3);
	}
	.hp-dial__list-time {
		font-family: var(--hp-roman, "Cormorant Garamond", serif);
		font-size: 18px;
		font-weight: 600;
		color: var(--dial-red);
	}
	.hp-dial__list-tag {
		font-family: var(--hp-roman, "Cormorant Garamond", serif);
		font-size: 9.5px;
		font-weight: 700;
		letter-spacing: .24em;
		color: rgba(178, 145, 86, .95);
		padding-top: 6px;
	}
	.hp-dial__list h3 {
		margin: 0 0 4px;
		font-size: 15px;
		font-weight: 600;
		letter-spacing: .04em;
	}
	.hp-dial__list p {
		margin: 0;
		font-size: 13px;
		line-height: 1.8;
		color: rgba(31, 23, 20, .68);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hp-dial__hand {
		transition: none !important;
	}
}

/* =========================================================
   v36: /flow/ 完全リデザイン — エディトリアル「RONDO」
   左:画像エディトリアル / 右:精密時計 / 下:水平タイムライン
   ========================================================= */

.hp-rondo {
	--rondo-red:  #a00000;
	--rondo-deep: #6e0606;
	--rondo-gold: #a07a3a;
	--rondo-ink:  #1f1714;
	--rondo-cream:#f6ecd6;
	--clock-size: min(480px, 42vw);
	--clock-r:    calc(min(480px, 42vw) / 2);

	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(40px, 5vw, 80px);
	align-items: start;
	margin: 56px auto 0;
	max-width: 1240px;
	position: relative;
}

/* 背景にうっすらと色のレイヤーを敷く（淡白さ解消） */
.hp-rondo::before {
	content: "";
	position: absolute;
	inset: -32px -8% -32px -8%;
	background:
		radial-gradient(ellipse at 75% 50%, rgba(160, 0, 0, .06), transparent 55%),
		radial-gradient(ellipse at 22% 30%, rgba(160, 122, 58, .08), transparent 60%);
	pointer-events: none;
	z-index: -1;
}

/* ============== 左：画像エディトリアル ============== */
.hp-rondo__photo {
	position: relative;
}

/* 画像上のメタ：SCENE タグ + N°インデックス */
.hp-rondo__photo-meta-top {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 18px;
	padding-bottom: 16px;
	border-bottom: 1px solid rgba(178, 145, 86, .4);
}

.hp-rondo__photo-tag {
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .42em;
	color: var(--rondo-red);
}

.hp-rondo__photo-count {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	font-size: 11px;
	letter-spacing: .22em;
	color: rgba(31, 23, 20, .6);
}

.hp-rondo__photo-count span[data-count] {
	font-size: 22px;
	font-weight: 600;
	color: var(--rondo-red);
	margin: 0 4px 0 6px;
	letter-spacing: .02em;
	transition: opacity .35s ease;
}

.hp-rondo__photo-count i {
	font-style: normal;
	color: rgba(178, 145, 86, .85);
}

/* フレーム本体 */
.hp-rondo__photo-frame {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: #15110f;
	box-shadow:
		0 0 0 1px rgba(178, 145, 86, .35),
		0 36px 80px -36px rgba(31, 23, 20, .55);
}

.hp-rondo__photo-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transform: scale(1.08);
	transition:
		opacity 1s cubic-bezier(.22, 1, .25, 1),
		transform 1.8s cubic-bezier(.22, 1, .25, 1);
	filter: saturate(.94) brightness(.93);
}

.hp-rondo__photo-img.is-active {
	opacity: 1;
	transform: scale(1);
}

.hp-rondo__photo-grain {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .06), transparent 50%),
		radial-gradient(circle at 50% 100%, rgba(15, 10, 8, .5), transparent 65%);
	pointer-events: none;
	z-index: 2;
	mix-blend-mode: overlay;
}

.hp-rondo__photo-shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(15, 10, 8, 0) 50%, rgba(15, 10, 8, .85) 100%);
	pointer-events: none;
	z-index: 3;
}

/* 4 隅コーナー */
.hp-rondo__photo-corner {
	position: absolute;
	width: 24px;
	height: 24px;
	border: 1px solid rgba(253, 250, 243, .75);
	z-index: 5;
	pointer-events: none;
}

.hp-rondo__photo-corner--tl { top: 18px; left: 18px;  border-right: none; border-bottom: none; }
.hp-rondo__photo-corner--tr { top: 18px; right: 18px; border-left: none;  border-bottom: none; }
.hp-rondo__photo-corner--bl { bottom: 18px; left: 18px;  border-right: none; border-top: none; }
.hp-rondo__photo-corner--br { bottom: 18px; right: 18px; border-left: none;  border-top: none; }

/* 画像内左下：時刻スタンプ */
.hp-rondo__photo-stamp {
	position: absolute;
	left: 28px;
	bottom: 26px;
	display: flex;
	align-items: baseline;
	gap: 16px;
	z-index: 5;
}

.hp-rondo__photo-stamp-time {
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	font-size: clamp(40px, 5.4vw, 64px);
	font-weight: 600;
	color: #fdfaf3;
	letter-spacing: .03em;
	line-height: 1;
	text-shadow: 0 4px 18px rgba(0, 0, 0, .6);
	transition: opacity .35s ease;
}

.hp-rondo__photo-stamp-divider {
	display: inline-block;
	width: 22px;
	height: 1px;
	background: rgba(228, 196, 140, .85);
	margin-bottom: 12px;
}

.hp-rondo__photo-stamp-tag {
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .42em;
	color: rgba(228, 196, 140, .98);
	transition: opacity .35s ease;
}

/* 画像右側：縦書きルーン */
.hp-rondo__photo-rune {
	position: absolute;
	top: 28px;
	right: 24px;
	z-index: 5;
	writing-mode: vertical-rl;
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .42em;
	color: rgba(253, 250, 243, .75);
}

/* 画像下：タイトル + 説明 */
.hp-rondo__photo-info {
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid rgba(178, 145, 86, .3);
}

.hp-rondo__photo-title {
	margin: 0 0 12px;
	font-family: var(--hp-serif, "Noto Serif JP", serif);
	font-size: clamp(20px, 2.2vw, 28px);
	font-weight: 600;
	letter-spacing: .14em;
	color: var(--rondo-ink);
	transition: opacity .35s ease;
}

.hp-rondo__photo-desc {
	margin: 0;
	font-size: 14px;
	line-height: 2;
	letter-spacing: .06em;
	color: rgba(31, 23, 20, .7);
	max-width: 32em;
	transition: opacity .35s ease;
}

/* 切替中のフェード（時刻はカウントアップで動的なのでフェードしない） */
.hp-rondo.is-swap .hp-rondo__photo-stamp-tag,
.hp-rondo.is-swap .hp-rondo__photo-title,
.hp-rondo.is-swap .hp-rondo__photo-desc,
.hp-rondo.is-swap .hp-rondo__photo-count span[data-count] {
	opacity: .15;
}

/* 時刻表示は等幅風で揃え、カウント変化が美しく見えるように */
.hp-rondo__photo-stamp-time {
	font-variant-numeric: tabular-nums;
}

/* ============== 右：時計 ============== */
.hp-rondo__clock {
	position: relative;
	display: grid;
	place-items: center;
	gap: 28px;
	padding-top: 12px;
}

.hp-rondo__clock-kicker {
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .42em;
	color: var(--rondo-red);
}

.hp-rondo__face {
	position: relative;
	width: var(--clock-size);
	height: var(--clock-size);
}

/* 多層リング */
.hp-rondo__ring {
	position: absolute;
	top: 50%;
	left: 50%;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.hp-rondo__ring--1 {
	width: 100%;
	height: 100%;
	border: 1.5px solid rgba(160, 122, 58, .8);
	box-shadow: inset 0 0 0 4px rgba(246, 236, 214, .5);
}

.hp-rondo__ring--2 {
	width: 90%;
	height: 90%;
	border: 1px dashed rgba(160, 122, 58, .55);
}

.hp-rondo__ring--3 {
	width: 56%;
	height: 56%;
	border: 1px solid rgba(160, 0, 0, .25);
}

.hp-rondo__ring--4 {
	width: 22%;
	height: 22%;
	border: 1px dashed rgba(160, 0, 0, .35);
}

/* ティック（60本） */
.hp-rondo__tick {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1px;
	height: 6px;
	background: rgba(160, 122, 58, .55);
	margin: -3px 0 0 -0.5px;
	transform-origin: 50% 50%;
	transform: rotate(var(--ang)) translateY(calc(-1 * var(--clock-r) + 3px));
}

.hp-rondo__tick.is-major {
	height: 14px;
	width: 1.5px;
	background: rgba(160, 0, 0, .8);
	margin: -7px 0 0 -0.75px;
	transform: rotate(var(--ang)) translateY(calc(-1 * var(--clock-r) + 7px));
}

/* 4 主要時刻数字（外周の内側、ティックとドットの間に配置） */
.hp-rondo__num {
	position: absolute;
	top: 50%;
	left: 50%;
	transform-origin: 0 0;
	transform: rotate(var(--ang)) translateY(calc(-1 * var(--clock-r) + 56px)) rotate(calc(-1 * var(--ang)));
	display: grid;
	place-items: center;
	gap: 3px;
	white-space: nowrap;
	pointer-events: none;
}

.hp-rondo__num i {
	display: block;
	font-style: normal;
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	font-size: 22px;
	font-weight: 700;
	color: var(--rondo-ink);
	letter-spacing: 0;
	line-height: 1;
}

.hp-rondo__num em {
	display: block;
	font-style: normal;
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	font-size: 8.5px;
	font-weight: 700;
	letter-spacing: .3em;
	color: var(--rondo-red);
}

/* AM/PM 縦書き */
.hp-rondo__band {
	position: absolute;
	top: 50%;
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .42em;
	color: var(--rondo-red);
	writing-mode: vertical-rl;
	transform: translateY(-50%);
	pointer-events: none;
}

.hp-rondo__band--am { left: -38px;  transform: translateY(-50%) rotate(180deg); }
.hp-rondo__band--pm { right: -38px; transform: translateY(-50%); }

/* ===== 針 ===== */
.hp-rondo__hand {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	z-index: 5;
	transform-origin: 50% 50%;
	transform: rotate(var(--ang));
	transition: transform 1.05s cubic-bezier(.62, .04, .25, 1);
	pointer-events: none;
}

/* 分針・時針はスマホ専用（PC・タブレットは従来どおり 24 時間時計＝時針 1 本のまま） */
.hp-rondo__hand--min,
.hp-rondo__hand--hour { display: none; }

.hp-rondo__hand-stem {
	position: absolute;
	left: -1.5px;
	top: calc(-1 * var(--clock-r) + 50px);
	width: 3px;
	height: calc(var(--clock-r) - 50px);
	background: linear-gradient(180deg, var(--rondo-deep) 0%, var(--rondo-red) 30%, var(--rondo-red) 80%, rgba(160, 0, 0, .35) 100%);
	border-radius: 2px 2px 0 0;
	box-shadow: 0 0 8px rgba(160, 0, 0, .45);
}

.hp-rondo__hand-tip {
	position: absolute;
	left: -8px;
	top: calc(-1 * var(--clock-r) + 38px);
	width: 16px;
	height: 18px;
	background: var(--rondo-deep);
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
	filter: drop-shadow(0 2px 6px rgba(160, 0, 0, .45));
}

.hp-rondo__hand-tail {
	position: absolute;
	left: -1px;
	top: 0;
	width: 2px;
	height: 28px;
	background: var(--rondo-red);
	opacity: .55;
	border-radius: 0 0 2px 2px;
}

/* 中心ピン（紋章風） */
.hp-rondo__pivot {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 30px;
	height: 30px;
	margin: -15px;
	border-radius: 50%;
	background:
		radial-gradient(circle at 50% 35%, #fdfaf3 0%, #f3ead8 60%, #e6d5b1 100%);
	box-shadow:
		inset 0 0 0 1px rgba(160, 122, 58, .8),
		0 0 0 3px #fbf6ec,
		0 0 0 4px rgba(160, 0, 0, .5),
		0 6px 16px rgba(160, 0, 0, .4);
	z-index: 6;
	display: grid;
	place-items: center;
	pointer-events: none;
}

.hp-rondo__pivot span {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--rondo-red);
	box-shadow: 0 0 0 2px rgba(110, 6, 6, .55);
}

/* ===== 時刻ドット ===== */
.hp-rondo__dot {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	transform-origin: 0 0;
	transform: rotate(var(--ang));
	z-index: 4;
}

.hp-rondo__dot-mark {
	position: absolute;
	top: -8px;
	left: -8px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fdfaf3;
	border: 1.5px solid var(--rondo-red);
	box-shadow:
		0 0 0 2px #fbf6ec,
		0 0 0 3px rgba(160, 122, 58, .45);
	transform: translateY(calc(-1 * (var(--clock-r) - 22px)));
	transition: background .25s ease, box-shadow .3s ease;
}

.hp-rondo__dot-mark::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var(--rondo-red);
	opacity: 0;
	transition: opacity .25s ease;
}

.hp-rondo__dot:hover .hp-rondo__dot-mark,
.hp-rondo__dot:focus-visible .hp-rondo__dot-mark,
.hp-rondo__dot.is-active .hp-rondo__dot-mark {
	background: var(--rondo-red);
	box-shadow:
		0 0 0 2px #fbf6ec,
		0 0 0 4px rgba(160, 0, 0, .3),
		0 0 22px rgba(160, 0, 0, .65);
}

.hp-rondo__dot:hover .hp-rondo__dot-mark::after,
.hp-rondo__dot.is-active .hp-rondo__dot-mark::after {
	opacity: 1;
	background: #fdfaf3;
}

/* 時刻ラベル（ドットの内側に水平表示） */
.hp-rondo__dot-time {
	position: absolute;
	left: -28px;
	width: 56px;
	text-align: center;
	transform-origin: 28px 0;
	transform: translateY(calc(-1 * (var(--clock-r) - 88px))) rotate(calc(-1 * var(--ang)));
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	font-size: 11px;
	font-weight: 700;
	color: rgba(31, 23, 20, .55);
	line-height: 1;
	letter-spacing: .04em;
	transition: color .25s ease;
}

.hp-rondo__dot:hover .hp-rondo__dot-time,
.hp-rondo__dot.is-active .hp-rondo__dot-time {
	color: var(--rondo-red);
}

.hp-rondo__hint {
	margin: 0;
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .42em;
	color: rgba(31, 23, 20, .45);
}

/* ============== 下：水平タイムライン ============== */
.hp-rondo__timeline {
	grid-column: 1 / -1;
	position: relative;
	margin: 56px 0 0;
	padding-top: 32px;
	border-top: 1px solid rgba(160, 122, 58, .5);
}

.hp-rondo__timeline-tag {
	position: absolute;
	top: -8px;
	left: 0;
	padding: 0 14px 0 0;
	background: #fbf6ec;
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .42em;
	color: var(--rondo-red);
}

.hp-rondo__timeline-track {
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	gap: 0;
	border-left: 1px solid rgba(178, 145, 86, .3);
}

.hp-rondo__chip {
	display: grid;
	gap: 6px;
	padding: 16px 12px 18px;
	background: transparent;
	border: none;
	border-right: 1px solid rgba(178, 145, 86, .3);
	border-top: 3px solid transparent;
	cursor: pointer;
	text-align: left;
	transition: background .25s ease, border-color .25s ease;
}

.hp-rondo__chip:hover {
	background: rgba(253, 250, 243, .55);
}

.hp-rondo__chip.is-active {
	border-top-color: var(--rondo-red);
	background: rgba(253, 250, 243, .85);
}

.hp-rondo__chip-num {
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .32em;
	color: rgba(178, 145, 86, .95);
}

.hp-rondo__chip-time {
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	font-size: clamp(18px, 1.7vw, 22px);
	font-weight: 600;
	color: var(--rondo-ink);
	letter-spacing: .04em;
	line-height: 1;
}

.hp-rondo__chip.is-active .hp-rondo__chip-time {
	color: var(--rondo-red);
}

.hp-rondo__chip-tag {
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .26em;
	color: rgba(31, 23, 20, .55);
}

/* ============== モバイル一覧 ============== */
.hp-rondo__list {
	display: none;
	list-style: none;
	padding: 0;
	margin: 40px 0 0;
}

@media (max-width: 1080px) {
	.hp-rondo {
		--clock-size: min(420px, 46vw);
		--clock-r: calc(min(420px, 46vw) / 2);
	}
}

@media (max-width: 880px) {
	.hp-rondo {
		/* minmax(0,1fr) でグリッド項目が中身の幅まで広がるのを防ぎ、
		   タイムラインの overflow-x スクロールを成立させる */
		grid-template-columns: minmax(0, 1fr);
		gap: 56px;
		--clock-size: min(380px, 78vw);
		--clock-r: calc(min(380px, 78vw) / 2);
	}
	.hp-rondo__photo-frame {
		aspect-ratio: 16 / 11;
	}
	.hp-rondo__photo-rune { display: none; }
	.hp-rondo__band--am { left: -16px; }
	.hp-rondo__band--pm { right: -16px; }
	.hp-rondo__timeline-track {
		grid-template-columns: repeat(10, minmax(110px, 1fr));
		overflow-x: auto;
	}
}

@media (max-width: 640px) {
	/* スマホ：時間帯の切り替えは下のタッチ式タイムライン（chip）で行う。
	   時計は写真の右上に小さく重ねる（リング＋針＋中心ピンのみ）。dot は
	   DOM 上に残るため chip タップで針が回る（JS 無変更で連動）。 */
	.hp-rondo__clock {
		position: absolute;
		top: 88px;        /* 左の時刻表示とほぼ同じ高さに合わせる */
		right: 14px;
		z-index: 7;
		display: block;
		margin: 0;
		padding: 0;
		gap: 0;
		pointer-events: none;   /* 時計はタップ不要。下のタイムラインのスワイプを妨げない */
		--clock-size: 70px;
		--clock-r: 35px;
	}
	/* 画像の上で見えつつ浮かない、ごく淡いすりガラスの円 */
	.hp-rondo__face::before {
		content: "";
		position: absolute;
		inset: -6px;
		border-radius: 50%;
		background: rgba(255, 255, 255, .4);
		-webkit-backdrop-filter: blur(4px);
		backdrop-filter: blur(4px);
		z-index: -1;
	}
	/* 多層リングは外周 1 本だけ、金色で締めて視認性を確保 */
	.hp-rondo__ring--2,
	.hp-rondo__ring--3,
	.hp-rondo__ring--4 { display: none; }
	.hp-rondo__ring--1 { box-shadow: none; border-color: rgba(160, 122, 58, .9); border-width: 1.5px; }
	/* 補助パーツは省略（針が主役） */
	.hp-rondo__clock-kicker,
	.hp-rondo__hint,
	.hp-rondo__num,
	.hp-rondo__dot,
	.hp-rondo__band { display: none; }
	/* 文字盤の主要目盛り（12 個）だけ小さく表示して時計らしさを出す */
	.hp-rondo__tick { display: none; }
	.hp-rondo__tick.is-major {
		display: block;
		width: 1px;
		height: 4px;
		margin: -2px 0 0 -0.5px;
		background: rgba(160, 122, 58, .8);
		transform: rotate(var(--ang)) translateY(calc(-1 * var(--clock-r) + 4px));
	}
	/* スマホは 12 時間アナログ時計（時針＋分針）。PC 用の 24h 時針は隠す */
	.hp-rondo__hand[data-hand] { display: none; }
	.hp-rondo__hand--hour,
	.hp-rondo__hand--min { display: block; }
	/* 時針：短く太め */
	.hp-rondo__hand--hour .hp-rondo__hand-stem {
		top: calc(-1 * var(--clock-r) + 15px);
		height: calc(var(--clock-r) - 15px);
		width: 2.5px;
		left: -1.25px;
		background: linear-gradient(180deg, var(--rondo-deep), var(--rondo-red));
		border-radius: 2px;
	}
	/* 分針：長く細め */
	.hp-rondo__hand--min .hp-rondo__hand-stem {
		top: calc(-1 * var(--clock-r) + 4px);
		height: calc(var(--clock-r) - 4px);
		width: 1.5px;
		left: -0.75px;
		background: var(--rondo-red);
		box-shadow: 0 0 5px rgba(160, 0, 0, .4);
	}
	.hp-rondo__pivot { width: 11px; height: 11px; margin: -5.5px; }
	.hp-rondo__pivot span { width: 3px; height: 3px; }

	/* 縦長写真を切らずに全体表示し、時刻は左上・タイトル/説明は下部に
	   グラデーションで重ねる（情報オーバーレイ・雑誌風）。時刻と情報を
	   別位置に置くことで、説明が何行でも重ならず崩れない。 */
	.hp-rondo__photo { position: relative; }
	.hp-rondo__photo-frame { aspect-ratio: 3 / 4; }   /* 素材は4:5、ほぼ切れない */
	.hp-rondo__photo-img { object-position: center; }

	/* 既存の下部シェードは info の背景グラデに統一するため隠す */
	.hp-rondo__photo-shade { display: none; }

	/* 時刻スタンプを左上へ（下部の info と干渉させない） */
	.hp-rondo__photo-stamp {
		top: 36px;
		left: 24px;
		bottom: auto;
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}
	.hp-rondo__photo-stamp-time { font-size: clamp(34px, 11vw, 48px); }
	.hp-rondo__photo-stamp-divider { display: none; }

	/* タイトル＋説明を写真下部にオーバーレイ */
	.hp-rondo__photo-info {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		margin: 0;
		padding: 64px 22px 22px;
		border-top: none;
		background: linear-gradient(180deg, rgba(15, 10, 8, 0) 0%, rgba(15, 10, 8, .45) 38%, rgba(15, 10, 8, .92) 100%);
		z-index: 6;
	}
	.hp-rondo__photo-title {
		margin: 0 0 6px;
		font-size: 21px;
		letter-spacing: .1em;
		color: #fdfaf3;
	}
	.hp-rondo__photo-desc {
		margin: 0;
		max-width: none;
		font-size: 13px;
		line-height: 1.75;
		color: rgba(253, 250, 243, .9);
	}

	.hp-rondo__timeline {
		display: block;
		min-width: 0;       /* グリッド項目を縮められるようにする（横スクロール成立の要） */
		margin-top: 28px;
		padding-top: 26px;
	}
	.hp-rondo__timeline-track {
		grid-auto-flow: column;
		grid-auto-columns: minmax(132px, 42%);
		grid-template-columns: none;
		gap: 10px;
		min-width: 0;
		overflow-x: auto;
		touch-action: pan-x pan-y;    /* 横スワイプ有効化（pan-y も許可して縦スクロールを妨げない） */
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		border-left: none;
		padding-bottom: 4px;
		scrollbar-width: none;
	}
	.hp-rondo__timeline-track::-webkit-scrollbar { display: none; }
	.hp-rondo__chip {
		scroll-snap-align: center;
		border: 1px solid rgba(178, 145, 86, .35);
		border-top: 3px solid transparent;
		border-radius: 12px;
		padding: 12px 14px 14px;
	}
	.hp-rondo__chip.is-active {
		background: rgba(253, 250, 243, .9);
	}
	/* 横スワイプできることを示すヒント */
	.hp-rondo__timeline::after {
		content: "← スワイプで時間帯を移動 →";
		display: block;
		margin-top: 12px;
		text-align: center;
		font-family: var(--hp-roman, "Cormorant Garamond", serif);
		font-size: 10px;
		letter-spacing: .18em;
		color: rgba(31, 23, 20, .42);
	}

	/* 静的リストはタッチ式タイムラインに統一したため非表示 */
	.hp-rondo__list { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.hp-rondo__hand {
		transition: none !important;
	}
}

/* 各エントリ（時計周りのドット＋カード） */
.hp-clock__entries {
	position: absolute;
	inset: 0;
}

.hp-clock__entry {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	margin: 0;
	transform-origin: 0 0;
	transform: rotate(var(--ang));
}

.hp-clock__entry-dot {
	position: absolute;
	top: -9px;
	left: -9px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fdfaf3;
	border: 2px solid #8a0c0c;
	box-shadow: 0 0 0 3px rgba(248, 243, 235, 1), 0 0 12px rgba(138, 12, 12, .35);
	/* ハブの中心からドットまで（半径 - 余白） */
	transform: translateY(calc(-1 * (var(--clock-r) - 56px)));
	transition: transform .35s cubic-bezier(.22, 1, .25, 1), background .25s ease, box-shadow .25s ease;
}

.hp-clock__entry-dot::before {
	content: "";
	position: absolute;
	inset: 4px;
	border-radius: 50%;
	background: #8a0c0c;
	opacity: 0;
	transition: opacity .25s ease;
}

.hp-clock__entry:hover .hp-clock__entry-dot::before,
.hp-clock__entry.is-active .hp-clock__entry-dot::before {
	opacity: 1;
}

.hp-clock__entry:hover .hp-clock__entry-dot,
.hp-clock__entry:focus-visible .hp-clock__entry-dot,
.hp-clock__entry.is-active .hp-clock__entry-dot {
	background: #8a0c0c;
	box-shadow:
		0 0 0 3px rgba(248, 243, 235, 1),
		0 0 18px rgba(138, 12, 12, .8),
		0 0 36px rgba(178, 145, 86, .4);
}

.hp-clock__entry-line {
	position: absolute;
	top: 0;
	left: -1px;
	width: 2px;
	height: 36px;
	background: linear-gradient(180deg, rgba(178, 145, 86, .6), rgba(138, 12, 12, .15));
	transform-origin: 0 0;
	transform: translateY(calc(-1 * (var(--clock-r) - 50px) - 36px));
	opacity: 0;
	transition: opacity .35s ease;
}

.hp-clock__entry:hover .hp-clock__entry-line,
.hp-clock__entry.is-active .hp-clock__entry-line {
	opacity: 1;
}

/* 各エントリのカード（時計の外側に出る） */
.hp-clock__entry-card {
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	gap: 2px;
	min-width: 130px;
	padding: 10px 14px;
	background: #fdfaf3;
	border: 1px solid rgba(178, 145, 86, .45);
	border-radius: 4px;
	box-shadow: 0 10px 22px -14px rgba(138, 12, 12, .35);
	transform: translate(-50%, calc(-1 * (var(--clock-r) + 8px))) rotate(calc(-1 * var(--ang)));
	opacity: 0;
	transition: opacity .3s ease, transform .35s cubic-bezier(.22, 1, .25, 1);
	pointer-events: none;
	text-align: center;
	z-index: 5;
}

.hp-clock__entry:hover .hp-clock__entry-card,
.hp-clock__entry.is-active .hp-clock__entry-card {
	opacity: 1;
	transform: translate(-50%, calc(-1 * (var(--clock-r) + 24px))) rotate(calc(-1 * var(--ang)));
}

/* 常時表示の時刻ラベル（ドットの外側） */
.hp-clock__entry-stamp {
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	gap: 2px;
	padding: 0;
	transform: translate(-50%, calc(-1 * (var(--clock-r) + 4px))) rotate(calc(-1 * var(--ang)));
	transform-origin: 50% 50%;
	text-align: center;
	white-space: nowrap;
	pointer-events: none;
	z-index: 3;
	transition: opacity .25s ease;
}

.hp-clock.is-active .hp-clock__entry:not(.is-active) .hp-clock__entry-stamp {
	opacity: .35;
}

.hp-clock__entry-stamp-time {
	display: block;
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	color: #8a0c0c;
	line-height: 1;
}

.hp-clock__entry-stamp-tag {
	display: block;
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	font-size: 8.5px;
	font-weight: 700;
	letter-spacing: .26em;
	color: rgba(178, 145, 86, .9);
	margin-top: 2px;
}

.hp-clock__entry-time {
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	font-size: 15px;
	font-weight: 600;
	color: #8a0c0c;
	letter-spacing: .04em;
	line-height: 1;
}

.hp-clock__entry-tag {
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	font-size: 8.5px;
	font-weight: 700;
	letter-spacing: .26em;
	color: rgba(178, 145, 86, .95);
}

.hp-clock__entry-title {
	font-family: var(--hp-serif, "Noto Serif JP", serif);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .06em;
	color: #1f1714;
	margin-top: 2px;
}

/* ----- モバイル：時計は非表示、一覧で表示 ----- */
.hp-clock__list {
	display: none;
	list-style: none;
	padding: 0;
	margin: 48px 0 0;
}

@media (max-width: 760px) {
	.hp-clock {
		display: none;
	}
	.hp-clock__list {
		display: grid;
		gap: 18px;
	}
}

.hp-clock__list li {
	display: grid;
	grid-template-columns: 70px 70px 1fr;
	gap: 16px;
	align-items: start;
	padding: 18px 0;
	border-top: 1px solid rgba(178, 145, 86, .3);
}

.hp-clock__list li:last-child {
	border-bottom: 1px solid rgba(178, 145, 86, .3);
}

.hp-clock__list-time {
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	font-size: 20px;
	font-weight: 600;
	color: #8a0c0c;
	letter-spacing: .04em;
}

.hp-clock__list-tag {
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .26em;
	color: rgba(178, 145, 86, .95);
	padding-top: 7px;
}

.hp-clock__list h3 {
	margin: 0 0 4px;
	font-family: var(--hp-serif, "Noto Serif JP", serif);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: .06em;
	color: #1f1714;
}

.hp-clock__list p {
	margin: 0;
	font-size: 13px;
	line-height: 1.8;
	color: rgba(31, 23, 20, .68);
	letter-spacing: .04em;
}

@media (prefers-reduced-motion: reduce) {
	.hp-clock__ring--outer,
	.hp-clock__ring--inner {
		animation: none !important;
	}
}

/* =========================================================
   v32: /facilities/ 各園ミニサイト風リファイン
   ========================================================= */

/* ----- ナビゲーター ----- */
.hp-fac-nav {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	border-top: 1px solid rgba(178, 145, 86, .35);
	border-bottom: 1px solid rgba(178, 145, 86, .35);
}

.hp-fac-nav__item {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 12px;
	padding: 18px 8px;
	color: rgba(31, 23, 20, .68);
	text-decoration: none;
	border-right: 1px solid rgba(178, 145, 86, .25);
	transition: background .3s ease, color .3s ease;
}

.hp-fac-nav__item:last-child {
	border-right: none;
}

.hp-fac-nav__item:hover {
	background: rgba(253, 250, 243, .8);
	color: #8a0c0c;
}

.hp-fac-nav__num {
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .04em;
	color: rgba(178, 145, 86, .95);
}

.hp-fac-nav__name {
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .28em;
}

@media (max-width: 720px) {
	.hp-fac-nav {
		grid-template-columns: repeat(2, 1fr);
	}
	.hp-fac-nav__item:nth-child(2n) {
		border-right: none;
	}
	.hp-fac-nav__item:nth-child(-n+2) {
		border-bottom: 1px solid rgba(178, 145, 86, .25);
	}
	.hp-fac-nav__name {
		font-size: 10.5px;
		letter-spacing: .22em;
	}
}

/* ----- セクション基本 ----- */
.hp-fac {
	scroll-margin-top: 80px;
}

.hp-fac__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	padding-bottom: 24px;
	margin-bottom: 48px;
	border-bottom: 1px solid rgba(178, 145, 86, .35);
}

.hp-fac.is-dark .hp-fac__head {
	border-bottom-color: rgba(228, 196, 140, .3);
}

.hp-fac__heading {
	display: flex;
	align-items: baseline;
	gap: 28px;
}

.hp-fac__num {
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	font-size: clamp(56px, 7vw, 88px);
	font-weight: 600;
	letter-spacing: .02em;
	line-height: 1;
	color: #8a0c0c;
}

.hp-fac.is-dark .hp-fac__num {
	color: rgba(228, 196, 140, .95);
}

.hp-fac__en {
	display: block;
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	font-size: clamp(20px, 2.4vw, 28px);
	font-weight: 600;
	letter-spacing: .12em;
	color: #1f1714;
	margin-bottom: 6px;
}

.hp-fac.is-dark .hp-fac__en {
	color: #fff;
}

.hp-fac__tag {
	display: block;
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .3em;
	color: rgba(178, 145, 86, .95);
}

.hp-fac__pager {
	display: flex;
	align-items: baseline;
	gap: 6px;
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	color: rgba(31, 23, 20, .55);
}

.hp-fac.is-dark .hp-fac__pager {
	color: rgba(255, 255, 255, .55);
}

.hp-fac__pager-curr {
	font-size: 24px;
	font-weight: 600;
	color: #8a0c0c;
}

.hp-fac.is-dark .hp-fac__pager-curr {
	color: rgba(228, 196, 140, 1);
}

.hp-fac__pager-sep {
	font-size: 18px;
}

.hp-fac__pager-total {
	font-size: 14px;
	letter-spacing: .08em;
}

/* ----- メインビジュアル ----- */
.hp-fac__hero {
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	gap: 56px;
	align-items: center;
	margin-bottom: 64px;
}

.hp-fac__hero.is-reverse {
	grid-template-columns: 1fr 1.25fr;
}

.hp-fac__hero.is-reverse .hp-fac__hero-media {
	order: 2;
}

.hp-fac__hero.is-reverse .hp-fac__hero-body {
	order: 1;
}

.hp-fac__hero-media {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: #1f1714;
}

.hp-fac__hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.4s cubic-bezier(.22, 1, .25, 1);
}

.hp-fac__hero-media:hover img {
	transform: scale(1.05);
}

.hp-fac__hero-num {
	position: absolute;
	top: 18px;
	left: 22px;
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	font-size: clamp(72px, 9vw, 124px);
	font-weight: 600;
	letter-spacing: .02em;
	color: #fdfaf3;
	line-height: 1;
	mix-blend-mode: difference;
	opacity: .9;
	pointer-events: none;
}

.hp-fac__hero-motto {
	position: absolute;
	bottom: 22px;
	right: 22px;
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .18em;
	color: rgba(253, 250, 243, .92);
	padding: 8px 14px;
	background: rgba(31, 23, 20, .55);
	backdrop-filter: blur(4px);
}

.hp-fac__name {
	margin: 0 0 18px;
	font-family: var(--hp-serif, "Noto Serif JP", serif);
	font-size: clamp(22px, 2.4vw, 30px);
	font-weight: 600;
	letter-spacing: .08em;
	color: #1f1714;
}

.hp-fac.is-dark .hp-fac__name {
	color: #fff;
}

.hp-fac__desc {
	margin: 0 0 28px;
	font-size: 14.5px;
	line-height: 2;
	letter-spacing: .04em;
	color: rgba(31, 23, 20, .72);
}

.hp-fac.is-dark .hp-fac__desc {
	color: rgba(255, 255, 255, .82);
}

/* ----- 特色チップ ----- */
.hp-fac__features {
	list-style: none;
	padding: 0;
	margin: 0 0 32px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.hp-fac__features li {
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .26em;
	padding: 7px 14px;
	border: 1px solid rgba(138, 12, 12, .45);
	color: #8a0c0c;
	background: rgba(253, 250, 243, .6);
}

.hp-fac.is-dark .hp-fac__features li {
	border-color: rgba(228, 196, 140, .55);
	color: rgba(228, 196, 140, .95);
	background: rgba(255, 255, 255, .04);
}

/* ----- TEL ボタン ----- */
.hp-fac__tel {
	display: inline-grid;
	grid-template-columns: auto 1fr;
	gap: 12px 18px;
	align-items: baseline;
	padding: 16px 24px;
	border: 1px solid rgba(138, 12, 12, .45);
	text-decoration: none;
	transition: background .3s ease;
}

.hp-fac.is-dark .hp-fac__tel {
	border-color: rgba(228, 196, 140, .5);
}

.hp-fac__tel:hover {
	background: rgba(138, 12, 12, .06);
}

.hp-fac__tel-label {
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .3em;
	color: rgba(178, 145, 86, .95);
}

.hp-fac__tel-num {
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	font-size: 24px;
	font-weight: 600;
	letter-spacing: .04em;
	color: #8a0c0c;
}

.hp-fac.is-dark .hp-fac__tel-num {
	color: #fff;
}

/* ----- 事実シート ----- */
.hp-fac__facts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	margin: 0 0 48px;
	border-top: 1px solid rgba(178, 145, 86, .35);
}

.hp-fac.is-dark .hp-fac__facts {
	border-top-color: rgba(228, 196, 140, .3);
}

.hp-fac__facts > div {
	padding: 22px 4px 18px;
	border-bottom: 1px solid rgba(178, 145, 86, .35);
	border-right: 1px solid rgba(178, 145, 86, .25);
}

.hp-fac.is-dark .hp-fac__facts > div {
	border-bottom-color: rgba(228, 196, 140, .3);
	border-right-color: rgba(228, 196, 140, .2);
}

.hp-fac__facts > div:nth-child(3n) {
	border-right: none;
}

.hp-fac__facts dt {
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .28em;
	color: rgba(178, 145, 86, .95);
	margin: 0 0 8px;
}

.hp-fac__facts dd {
	margin: 0;
	font-size: 14px;
	letter-spacing: .04em;
	color: #1f1714;
	line-height: 1.6;
}

.hp-fac.is-dark .hp-fac__facts dd {
	color: rgba(255, 255, 255, .88);
}

/* ----- アクセス CTA ----- */
.hp-fac__cta {
	text-align: right;
}

.hp-fac__cta a {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .3em;
	text-decoration: none;
	color: #8a0c0c;
	padding-bottom: 4px;
	border-bottom: 1px solid currentColor;
	transition: gap .3s ease;
}

.hp-fac.is-dark .hp-fac__cta a {
	color: rgba(228, 196, 140, 1);
}

.hp-fac__cta a:hover {
	gap: 24px;
}

.hp-fac__cta-arrow {
	font-size: 14px;
}

/* ----- レスポンシブ ----- */
@media (max-width: 880px) {
	.hp-fac__hero {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.hp-fac__hero.is-reverse {
		grid-template-columns: 1fr;
	}
	.hp-fac__hero.is-reverse .hp-fac__hero-media,
	.hp-fac__hero.is-reverse .hp-fac__hero-body {
		order: initial;
	}
	.hp-fac__hero-media {
		aspect-ratio: 16 / 11;
	}
	.hp-fac__facts {
		grid-template-columns: 1fr 1fr;
	}
	.hp-fac__facts > div:nth-child(3n) {
		border-right: 1px solid rgba(178, 145, 86, .25);
	}
	.hp-fac__facts > div:nth-child(2n) {
		border-right: none;
	}
	.hp-fac__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
}

@media (max-width: 560px) {
	.hp-fac__facts {
		grid-template-columns: 1fr;
	}
	.hp-fac__facts > div {
		border-right: none !important;
	}
	.hp-fac__heading {
		gap: 16px;
	}
	.hp-fac__hero-num {
		font-size: 56px;
	}
}

/* =========================================================
   v38: /vacancy/ 空き状況ページ
   ========================================================= */

.hp-vac-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	padding: 22px 28px;
	border-top: 1px solid rgba(178, 145, 86, .35);
	border-bottom: 1px solid rgba(178, 145, 86, .35);
}

.hp-vac-meta__tag {
	display: inline-block;
	margin-right: 14px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .32em;
	color: #a00000;
}

.hp-vac-meta__legend ul {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	color: rgba(31, 23, 20, .75);
	letter-spacing: .04em;
}

.hp-vac-meta__legend li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.hp-vac-meta__updated time {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: .04em;
	color: #1f1714;
}

/* ステータスマーク */
.hp-vac-status {
	display: inline-grid;
	place-items: center;
	width: 24px;
	height: 24px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
}

.hp-vac-status.is-open    { color: #a00000; }
.hp-vac-status.is-partial { color: #a00000; }
.hp-vac-status.is-wait    { color: #a07a3a; }
.hp-vac-status.is-full    { color: rgba(31, 23, 20, .3); font-weight: 400; }

/* マトリクス表 */
.hp-vac-table {
	display: grid;
	border-top: 1px solid rgba(178, 145, 86, .4);
}

.hp-vac-row {
	display: grid;
	grid-template-columns: minmax(220px, 1.4fr) repeat(6, 1fr);
	border-bottom: 1px solid rgba(178, 145, 86, .3);
	transition: background .25s ease;
}

.hp-vac-row:not(.hp-vac-row--head):hover {
	background: rgba(253, 250, 243, .65);
}

.hp-vac-row--head {
	background: rgba(160, 122, 58, .08);
	border-bottom: 1px solid rgba(178, 145, 86, .55);
}

.hp-vac-cell {
	padding: 18px 14px;
	border-right: 1px solid rgba(178, 145, 86, .22);
	display: grid;
	gap: 4px;
	align-content: center;
}

.hp-vac-cell:last-child {
	border-right: none;
}

.hp-vac-cell--name {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-left: 22px;
}

.hp-vac-name__num {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 22px;
	font-weight: 700;
	color: #a00000;
	letter-spacing: .02em;
	line-height: 1;
}

.hp-vac-name__en {
	display: block;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .28em;
	color: rgba(178, 145, 86, .95);
}

.hp-vac-name__jp {
	display: block;
	margin-top: 4px;
	font-family: var(--hp-serif, "Noto Serif JP", serif);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .06em;
	color: #1f1714;
}

.hp-vac-cell--age {
	text-align: center;
	gap: 2px;
}

.hp-vac-age-en {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .26em;
	color: #a00000;
}

.hp-vac-age-jp {
	font-size: 13px;
	font-weight: 600;
	color: #1f1714;
}

.hp-vac-cell--status {
	text-align: center;
	gap: 6px;
	justify-items: center;
}

.hp-vac-status-text {
	font-size: 11.5px;
	letter-spacing: .04em;
	color: rgba(31, 23, 20, .68);
}

.hp-vac-row .hp-vac-status.is-full ~ .hp-vac-status-text {
	color: rgba(31, 23, 20, .4);
}

.hp-vac-status-note {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .22em;
	color: #a00000;
	margin-top: 2px;
	padding: 2px 8px;
	border: 1px solid rgba(160, 0, 0, .45);
	border-radius: 999px;
}

.hp-vac-note {
	margin-top: 24px;
	font-size: 12.5px;
	line-height: 2;
	color: rgba(31, 23, 20, .6);
	letter-spacing: .04em;
}

/* 各園のお問い合わせカード */
.hp-vac-contact {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.hp-vac-contact__card {
	padding: 24px 28px;
	background: rgba(253, 250, 243, .65);
	border: 1px solid rgba(178, 145, 86, .35);
	display: grid;
	gap: 16px;
}

.hp-vac-contact__head {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 16px;
	align-items: start;
}

.hp-vac-contact__num {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 28px;
	font-weight: 700;
	color: #a00000;
	letter-spacing: .02em;
	line-height: 1;
}

.hp-vac-contact__tag {
	display: block;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .3em;
	color: rgba(178, 145, 86, .95);
	margin-bottom: 6px;
}

.hp-vac-contact__name {
	margin: 0 0 4px;
	font-family: var(--hp-serif, "Noto Serif JP", serif);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: .06em;
	color: #1f1714;
}

.hp-vac-contact__addr {
	font-size: 12.5px;
	color: rgba(31, 23, 20, .6);
	letter-spacing: .04em;
}

.hp-vac-contact__pill {
	align-self: start;
	padding: 5px 12px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .26em;
	color: #fdfaf3;
	background: #a00000;
	border-radius: 999px;
	white-space: nowrap;
}

.hp-vac-contact__pill.is-muted {
	color: rgba(31, 23, 20, .55);
	background: transparent;
	border: 1px solid rgba(178, 145, 86, .5);
}

.hp-vac-contact__tel {
	display: inline-grid;
	grid-template-columns: auto 1fr;
	gap: 12px 18px;
	align-items: baseline;
	padding: 12px 18px;
	border: 1px solid rgba(160, 0, 0, .35);
	text-decoration: none;
	transition: background .25s ease;
}

.hp-vac-contact__tel:hover {
	background: rgba(160, 0, 0, .06);
}

.hp-vac-contact__tel-label {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .3em;
	color: rgba(178, 145, 86, .95);
}

.hp-vac-contact__tel-num {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 22px;
	font-weight: 600;
	letter-spacing: .04em;
	color: #a00000;
}

/* =========================================================
   v39: モバイル ボトムナビ + フルスクリーンドロワー
   ========================================================= */

/* PC では非表示 */
.hp-bottom-nav,
.hp-drawer {
	display: none;
}

@media (max-width: 900px) {

	/* ===== ボトムナビ（モバイル） ===== */
	.hp-bottom-nav {
		display: grid;
		grid-template-columns: 1fr 1fr auto 1fr 1fr;
		align-items: end;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 68px;
		padding: 0 8px;
		background: rgba(253, 250, 243, .94);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		border-top: 1px solid rgba(160, 122, 58, .35);
		box-shadow: 0 -8px 24px -12px rgba(31, 23, 20, .25);
		z-index: 140;
	}

	.hp-bottom-nav__item {
		display: grid;
		place-items: center;
		gap: 2px;
		padding: 10px 4px 8px;
		text-decoration: none;
		color: rgba(31, 23, 20, .55);
		transition: color .2s ease;
	}

	.hp-bottom-nav__item:hover,
	.hp-bottom-nav__item:focus-visible {
		color: #a00000;
	}

	.hp-bottom-nav__icon {
		width: 22px;
		height: 22px;
	}

	.hp-bottom-nav__icon svg {
		width: 100%;
		height: 100%;
	}

	.hp-bottom-nav__label {
		font-size: 10px;
		font-weight: 600;
		letter-spacing: .04em;
		line-height: 1;
	}

	.hp-bottom-nav__en {
		font-family: Georgia, "Times New Roman", serif;
		font-size: 8px;
		font-weight: 700;
		letter-spacing: .2em;
		color: rgba(160, 122, 58, .8);
		line-height: 1;
	}

	/* 中央メニューボタン（円形・浮き上がる） */
	.hp-bottom-nav__menu {
		display: grid;
		place-items: center;
		gap: 4px;
		width: 60px;
		height: 60px;
		margin: 0 auto;
		padding: 0;
		border: none;
		border-radius: 50%;
		background: #a00000;
		color: #fdfaf3;
		cursor: pointer;
		transform: translateY(-18px);
		box-shadow: 0 8px 22px -6px rgba(160, 0, 0, .65), 0 0 0 4px #fdfaf3;
		transition: transform .35s cubic-bezier(.22, 1, .25, 1);
	}

	.hp-bottom-nav__menu:active {
		transform: translateY(-14px) scale(.95);
	}

	.hp-bottom-nav__menu-icon {
		display: grid;
		gap: 4px;
		width: 22px;
	}

	.hp-bottom-nav__menu-icon span {
		display: block;
		height: 1.5px;
		background: #fdfaf3;
		border-radius: 1px;
		transition: transform .35s ease, opacity .25s ease;
	}

	body.is-drawer-open .hp-bottom-nav__menu-icon span:nth-child(1) {
		transform: translateY(5px) rotate(45deg);
	}
	body.is-drawer-open .hp-bottom-nav__menu-icon span:nth-child(2) {
		opacity: 0;
	}
	body.is-drawer-open .hp-bottom-nav__menu-icon span:nth-child(3) {
		transform: translateY(-6px) rotate(-45deg);
	}

	.hp-bottom-nav__menu-label {
		font-family: Georgia, "Times New Roman", serif;
		font-size: 7.5px;
		font-weight: 700;
		letter-spacing: .22em;
		color: #fdfaf3;
	}

	/* ===== フルスクリーンドロワー ===== */
	.hp-drawer {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(15, 10, 8, .98);
		z-index: 150;
		padding: 80px 28px 90px;
		overflow-y: auto;
		opacity: 0;
		visibility: hidden;
		transform: translateY(20px);
		transition: opacity .4s ease, transform .5s cubic-bezier(.22, 1, .25, 1), visibility .4s;
	}

	body.is-drawer-open .hp-drawer {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	body.is-drawer-open {
		overflow: hidden;
	}

	.hp-drawer__close {
		position: absolute;
		top: 22px;
		right: 24px;
		width: 40px;
		height: 40px;
		background: none;
		border: 1px solid rgba(253, 250, 243, .5);
		color: #fdfaf3;
		font-size: 22px;
		cursor: pointer;
		border-radius: 50%;
		display: grid;
		place-items: center;
		transition: background .2s, transform .35s;
	}

	.hp-drawer__close:hover {
		background: rgba(160, 0, 0, .85);
		transform: rotate(90deg);
	}

	.hp-drawer__inner {
		max-width: 480px;
		margin: 0 auto;
	}

	.hp-drawer__kicker {
		margin: 0 0 6px;
		font-family: Georgia, "Times New Roman", serif;
		font-size: 10px;
		font-weight: 700;
		letter-spacing: .42em;
		color: rgba(228, 196, 140, .9);
	}

	.hp-drawer__title {
		margin: 0 0 32px;
		font-family: var(--hp-serif, "Noto Serif JP", serif);
		font-size: 28px;
		font-weight: 600;
		letter-spacing: .18em;
		color: #fdfaf3;
		padding-bottom: 16px;
		border-bottom: 1px solid rgba(228, 196, 140, .35);
	}

	.hp-drawer__list {
		list-style: none;
		padding: 0;
		margin: 0 0 40px;
	}

	.hp-drawer__list li {
		opacity: 0;
		transform: translateX(-12px);
		transition: opacity .5s ease, transform .5s cubic-bezier(.22, 1, .25, 1);
	}

	body.is-drawer-open .hp-drawer__list li {
		opacity: 1;
		transform: translateX(0);
	}

	.hp-drawer__list li:nth-child(1) { transition-delay: .15s; }
	.hp-drawer__list li:nth-child(2) { transition-delay: .2s; }
	.hp-drawer__list li:nth-child(3) { transition-delay: .25s; }
	.hp-drawer__list li:nth-child(4) { transition-delay: .3s; }
	.hp-drawer__list li:nth-child(5) { transition-delay: .35s; }
	.hp-drawer__list li:nth-child(6) { transition-delay: .4s; }
	.hp-drawer__list li:nth-child(7) { transition-delay: .45s; }
	.hp-drawer__list li:nth-child(8) { transition-delay: .5s; }
	.hp-drawer__list li:nth-child(9) { transition-delay: .55s; }

	.hp-drawer__list a {
		display: grid;
		grid-template-columns: auto 1fr auto;
		gap: 18px;
		align-items: baseline;
		padding: 16px 0;
		border-bottom: 1px solid rgba(228, 196, 140, .18);
		color: #fdfaf3;
		text-decoration: none;
		transition: padding-left .3s ease, color .2s ease;
	}

	.hp-drawer__list a:hover,
	.hp-drawer__list a:focus-visible {
		padding-left: 8px;
		color: rgba(228, 196, 140, 1);
	}

	.hp-drawer__num {
		font-family: Georgia, "Times New Roman", serif;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: .12em;
		color: rgba(160, 0, 0, 1);
	}

	.hp-drawer__en {
		font-family: Georgia, "Times New Roman", serif;
		font-size: 16px;
		font-weight: 700;
		letter-spacing: .22em;
	}

	.hp-drawer__jp {
		font-size: 11.5px;
		color: rgba(253, 250, 243, .6);
		letter-spacing: .08em;
		text-align: right;
	}

	.hp-drawer__foot {
		display: grid;
		gap: 24px;
		padding-top: 24px;
		border-top: 1px solid rgba(228, 196, 140, .25);
	}

	.hp-drawer__tel {
		display: grid;
		gap: 4px;
		padding: 16px 0;
		text-align: center;
		text-decoration: none;
		color: #fdfaf3;
	}

	.hp-drawer__tel-label {
		font-family: Georgia, "Times New Roman", serif;
		font-size: 10px;
		font-weight: 700;
		letter-spacing: .32em;
		color: rgba(228, 196, 140, .95);
	}

	.hp-drawer__tel-num {
		font-family: Georgia, "Times New Roman", serif;
		font-size: 32px;
		font-weight: 600;
		letter-spacing: .04em;
	}

	.hp-drawer__tel-hours {
		font-size: 11px;
		color: rgba(253, 250, 243, .6);
		letter-spacing: .08em;
	}

	.hp-drawer__copy {
		text-align: center;
		font-family: Georgia, "Times New Roman", serif;
		font-size: 10px;
		letter-spacing: .24em;
		color: rgba(253, 250, 243, .4);
	}

	/* ボトムナビ分の余白を main 末尾に確保 */
	.hp-main {
		padding-bottom: 68px;
	}

	/* お問い合わせの固定ボタン・ヘッダーバーガーは隠す */
	.hp-header__contact,
	.hp-header__burger {
		display: none !important;
	}
}

/* ===== OUR FACILITIES カード：空きステータス（スマート版） ===== */
.hp-facility-card__vac {
	display: inline-flex !important;
	align-items: center;
	gap: 10px !important;
	margin: 0 0 12px !important;
	padding: 5px 13px 5px 11px !important;
	font-family: Georgia, "Times New Roman", serif;
	line-height: 1;
	border-radius: 2px;
	background: transparent;
	border: 1px solid rgba(178, 145, 86, .45);
}

/* 空きあり：白背景に赤の細枠、赤文字でエレガントに */
.hp-facility-card--vac-partial .hp-facility-card__vac,
.hp-facility-card--vac-open .hp-facility-card__vac {
	background: #fdfaf3;
	border-color: #a00000;
}

/* 小さなドット */
.hp-facility-card__vac-dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(31, 23, 20, .25);
}

.hp-facility-card--vac-partial .hp-facility-card__vac-dot,
.hp-facility-card--vac-open .hp-facility-card__vac-dot {
	background: #a00000;
	box-shadow: 0 0 0 3px rgba(160, 0, 0, .12);
}

/* テキスト */
.hp-facility-card__vac-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .28em;
	color: rgba(31, 23, 20, .45);
}

.hp-facility-card--vac-partial .hp-facility-card__vac-label,
.hp-facility-card--vac-open .hp-facility-card__vac-label {
	color: #a00000;
}

.hp-facility-card__vac-note {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .1em;
	color: rgba(31, 23, 20, .6);
	padding-left: 10px;
	border-left: 1px solid rgba(178, 145, 86, .55);
}

/* ===== TOP の OUR FACILITIES から空き状況への誘導バナー ===== */
.hp-vac-banner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 28px;
	align-items: center;
	padding: 24px 32px;
	margin-top: 28px;
	background: rgba(253, 250, 243, .85);
	border: 1px solid rgba(178, 145, 86, .55);
	border-left: 4px solid #a00000;
	text-decoration: none;
	color: inherit;
	transition: background .25s ease, transform .35s ease;
	box-shadow: 0 12px 30px -22px rgba(31, 23, 20, .35);
}

.hp-vac-banner:hover {
	background: #fdfaf3;
	transform: translateX(2px);
}

.hp-vac-banner__icon {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #a00000;
	color: #fdfaf3;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: .04em;
}

.hp-vac-banner__body {
	display: grid;
	gap: 4px;
}

.hp-vac-banner__tag {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .32em;
	color: #a00000;
}

.hp-vac-banner__title {
	font-family: var(--hp-serif, "Noto Serif JP", serif);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: .06em;
	color: #1f1714;
}

.hp-vac-banner__desc {
	font-size: 12.5px;
	color: rgba(31, 23, 20, .65);
	letter-spacing: .04em;
}

.hp-vac-banner__arrow {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 18px;
	font-weight: 700;
	color: #a00000;
	letter-spacing: .04em;
	transition: transform .3s ease;
}

.hp-vac-banner:hover .hp-vac-banner__arrow {
	transform: translateX(6px);
}

/* レスポンシブ */
@media (max-width: 900px) {
	.hp-vac-meta {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}
	.hp-vac-row {
		grid-template-columns: 160px repeat(6, 1fr);
	}
	.hp-vac-cell--name {
		padding-left: 14px;
		gap: 10px;
	}
	.hp-vac-name__num { font-size: 18px; }
	.hp-vac-name__jp  { font-size: 12.5px; }
	.hp-vac-cell      { padding: 14px 6px; }
	.hp-vac-age-jp    { font-size: 11px; }
	.hp-vac-contact {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.hp-vac-row {
		grid-template-columns: 1fr;
		padding: 14px 0;
	}
	.hp-vac-row--head {
		display: none;
	}
	.hp-vac-cell {
		border-right: none;
		border-bottom: 1px dashed rgba(178, 145, 86, .25);
		grid-template-columns: 1fr auto;
		display: grid;
		align-items: center;
		padding: 10px 14px;
	}
	.hp-vac-cell--name {
		padding: 6px 14px 14px;
		border-bottom: 1px solid rgba(160, 0, 0, .35);
	}
	.hp-vac-cell--age {
		display: none;
	}
	.hp-vac-cell--status::before {
		content: attr(aria-label);
		font-size: 12px;
		color: rgba(31, 23, 20, .7);
	}
	.hp-vac-cell--status {
		justify-items: end;
	}
	.hp-vac-banner {
		grid-template-columns: auto 1fr;
		gap: 16px;
		padding: 18px 20px;
	}
	.hp-vac-banner__arrow {
		grid-column: 2;
		text-align: right;
	}
}

/* =========================================================
   1日の流れ：時計 / 一覧 の表示切替
   ========================================================= */
.hp-flow-viewtoggle {
	display: flex;
	justify-content: center;
	gap: 4px;
	width: -moz-max-content;
	width: max-content;
	margin: 4px auto 46px;
	padding: 5px;
	border: 1px solid rgba(178, 145, 86, .42);
	border-radius: 999px;
	background: rgba(253, 250, 243, .7);
}
.hp-flow-viewtoggle__btn {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 0;
	cursor: pointer;
	padding: 9px 22px;
	border-radius: 999px;
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	font-size: 13px;
	letter-spacing: .12em;
	color: rgba(31, 23, 20, .62);
	background: transparent;
	transition: background .25s ease, color .25s ease;
}
.hp-flow-viewtoggle__btn:hover { color: rgba(31, 23, 20, .9); }
.hp-flow-viewtoggle__btn.is-active {
	background: #8a0c0c;
	color: #fff;
}
.hp-flow-viewtoggle__ico { font-size: 14px; line-height: 1; }

/* 一覧表示：時計を隠してリストを表示 */
.hp-rondo-sec.is-listview .hp-rondo { display: none; }
.hp-rondo-sec.is-listview .hp-rondo__list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 54px;
	max-width: 1000px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}
.hp-rondo-sec.is-listview .hp-rondo__list li {
	display: grid;
	grid-template-columns: 78px 1fr;
	column-gap: 18px;
	row-gap: 3px;
	align-items: start;
	padding: 20px 2px;
	border-top: 1px solid rgba(178, 145, 86, .3);
}
.hp-rondo-sec.is-listview .hp-rondo__list-time {
	grid-column: 1; grid-row: 1;
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	font-size: 19px; font-weight: 700; line-height: 1.1;
	color: #8a0c0c;
}
.hp-rondo-sec.is-listview .hp-rondo__list-tag {
	grid-column: 1; grid-row: 2;
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	font-size: 9.5px; font-weight: 700; letter-spacing: .22em;
	color: rgba(31, 23, 20, .5);
}
.hp-rondo-sec.is-listview .hp-rondo__list li > div {
	grid-column: 2; grid-row: 1 / span 2;
}
.hp-rondo-sec.is-listview .hp-rondo__list h3 {
	margin: 0 0 5px; font-size: 17px; font-weight: 600; color: #1f1714;
}
.hp-rondo-sec.is-listview .hp-rondo__list p {
	margin: 0; font-size: 13px; line-height: 1.7; color: rgba(31, 23, 20, .7);
}
@media (max-width: 760px) {
	.hp-rondo-sec.is-listview .hp-rondo__list { grid-template-columns: 1fr; column-gap: 0; }
}

/* =========================================================
   1日の流れ（時計ビュー）PCレイアウト改修
   写真を横長・大きめに、時計はコンパクトにして
   タイムラインまで1画面に収まる縦リズムにする
   ========================================================= */
@media (min-width: 901px) {
	.hp-rondo {
		--clock-size: min(400px, 31vw);
		--clock-r: calc(min(400px, 31vw) / 2);
		grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
		gap: clamp(28px, 3.5vw, 48px);
		align-items: center;
		margin-top: 40px;
	}

	/* 写真を横長フレームに（実写真は 640x440 ≒ 16:11） */
	.hp-rondo__photo-frame {
		aspect-ratio: 16 / 10;
	}

	.hp-rondo__photo-meta-top {
		margin-bottom: 12px;
		padding-bottom: 10px;
	}

	.hp-rondo__photo-info {
		margin-top: 14px;
	}

	/* 時計まわりの余白を圧縮 */
	.hp-rondo__clock {
		padding-top: 0;
		gap: 14px;
	}

	.hp-rondo__hint {
		margin: 0;
	}

	/* タイムラインを近づけて全体をコンパクトに */
	.hp-rondo__timeline {
		margin-top: 34px;
		padding-top: 26px;
	}

	.hp-rondo__chip {
		padding: 12px 10px 14px;
	}
}

/* コンパクト時計では内周の時刻ラベルを少し外側へ */
@media (min-width: 901px) {
	.hp-rondo__dot-time {
		transform: translateY(calc(-1 * (var(--clock-r) - 70px))) rotate(calc(-1 * var(--ang)));
		font-size: 10px;
	}
}

/* =========================================================
   1日の流れ SP調整（実写真が横長 640x440 になったため）
   写真は 16:11 で切れなし表示。タイトル/説明はオーバーレイを
   やめて写真の下へ。写真上は時刻スタンプ＋ミニ時計のみ。
   ========================================================= */
@media (max-width: 640px) {
	.hp-rondo {
		gap: 32px;
	}

	/* 横長フレーム（素材と同比率 ≒ 切れない） */
	.hp-rondo__photo-frame {
		aspect-ratio: 16 / 11;
	}

	/* タイトル＋説明は写真の下に通常表示 */
	.hp-rondo__photo-info {
		position: static;
		margin: 0;
		padding: 14px 2px 0;
		background: none;
	}

	.hp-rondo__photo-title {
		margin: 0 0 5px;
		font-size: 19px;
		letter-spacing: .08em;
		color: var(--rondo-ink);
	}

	.hp-rondo__photo-desc {
		margin: 0;
		font-size: 12.5px;
		line-height: 1.8;
		color: rgba(31, 23, 20, .72);
	}

	/* 時刻の白文字が沈まないよう下部シェードを復活 */
	.hp-rondo__photo-shade {
		display: block;
	}

	/* 時刻スタンプは写真の左下・横並びに戻す */
	.hp-rondo__photo-stamp {
		top: auto;
		left: 18px;
		bottom: 14px;
		flex-direction: row;
		align-items: baseline;
		gap: 10px;
	}

	.hp-rondo__photo-stamp-time {
		font-size: clamp(28px, 8.5vw, 36px);
	}

	/* ミニ時計は写真フレーム内の右上へ・ひとまわり小さく
	   （基準は .hp-rondo。フレームはメタ行ぶん約72px下から始まる） */
	.hp-rondo__clock {
		top: 84px;
		right: 12px;
		--clock-size: 62px;
		--clock-r: 31px;
	}

	/* コーナー装飾も低いフレームに合わせて小さく */
	.hp-rondo__photo-corner {
		width: 16px;
		height: 16px;
	}

	.hp-rondo__photo-corner--tl { top: 10px; left: 10px; }
	.hp-rondo__photo-corner--tr { top: 10px; right: 10px; }
	.hp-rondo__photo-corner--bl { bottom: 10px; left: 10px; }
	.hp-rondo__photo-corner--br { bottom: 10px; right: 10px; }

	/* タイムラインを写真ブロックに寄せる */
	.hp-rondo__timeline {
		margin-top: 6px;
		padding-top: 22px;
	}
}

/* =========================================================
   1日の流れ 演出（レイアウトは2カラム版のまま）
   切替時: 軟焦点からすっと結像（レンズフォーカス風）
   表示中: Ken Burns のゆるやかなズーム
   ========================================================= */
@media (min-width: 901px) {
	.hp-rondo__photo-img.is-active {
		animation: hpRondoKen 18s cubic-bezier(.15, .55, .45, 1) both;
	}
}

@keyframes hpRondoKen {
	0%   { transform: scale(1.045); filter: blur(9px) saturate(.88) brightness(1.04); }
	7%   { filter: blur(0) saturate(.94) brightness(.93); }
	100% { transform: scale(1.1); filter: blur(0) saturate(.94) brightness(.93); }
}

@media (prefers-reduced-motion: reduce) {
	.hp-rondo__photo-img.is-active {
		animation: none !important;
	}
}

/* =========================================================
   /flow/ 1日の流れ：シアター化
   暗幕の上映室 × スポットライト × 金の文字盤
   ========================================================= */
/* 背景：暗幕＋スポットライト＋足元の緞帳（::before は入場スキャンラインが
   使用しているため、多層 background に統合。ページ固有の cream 上書きより
   詳細度を上げるため page-template 付きで指定） */
.page-template-page-flow .pr-section--cream.hp-rondo-sec,
.pr-section--cream.hp-rondo-sec {
	position: relative;
	background:
		radial-gradient(ellipse 120% 70% at 50% -18%, rgba(246, 236, 214, .09), transparent 62%),
		radial-gradient(90% 55% at 50% 0%, rgba(160, 0, 0, .2), transparent 62%),
		radial-gradient(60% 45% at 82% 58%, rgba(160, 0, 0, .1), transparent 60%),
		linear-gradient(0deg, rgba(110, 6, 6, .28), transparent 200px),
		linear-gradient(180deg, #191110 0%, #1e1411 46%, #140d0b 100%);
	overflow: hidden;
}

.hp-rondo-sec > .pr-container {
	position: relative;
	z-index: 2;
}

/* 見出しまわりを生成り×金に */
.hp-rondo-sec .pr-section__kicker { color: #e4c48c; }
.hp-rondo-sec .pr-section__title {
	color: #f6ecd6;
	text-shadow: 0 3px 28px rgba(0, 0, 0, .5);
}
.hp-rondo-sec .pr-section__lead { color: rgba(246, 236, 214, .62); }

/* 表示切替トグル */
.hp-rondo-sec .hp-flow-viewtoggle {
	border-color: rgba(228, 196, 140, .4);
	background: rgba(255, 255, 255, .05);
}
.hp-rondo-sec .hp-flow-viewtoggle__btn { color: rgba(246, 236, 214, .6); }
.hp-rondo-sec .hp-flow-viewtoggle__btn:hover { color: rgba(246, 236, 214, .95); }
.hp-rondo-sec .hp-flow-viewtoggle__btn.is-active {
	background: #b00007;
	color: #fdf7ea;
	box-shadow: 0 6px 18px rgba(120, 0, 6, .45);
}

/* パレットを暗幕用に反転（文字=生成り / 紅は明るく / 金は明るく） */
.hp-rondo-sec .hp-rondo {
	--rondo-red:  #e0555c;
	--rondo-deep: #a3282e;
	--rondo-gold: #e4c48c;
	--rondo-ink:  #f6ecd6;
}

/* 背景うっすらレイヤーは光のたまりに */
.hp-rondo-sec .hp-rondo::before {
	background:
		radial-gradient(ellipse at 75% 50%, rgba(160, 0, 0, .18), transparent 55%),
		radial-gradient(ellipse at 22% 30%, rgba(228, 196, 140, .07), transparent 60%);
}

/* ---- 左：写真パネル ---- */
.hp-rondo-sec .hp-rondo__photo-meta-top { border-bottom-color: rgba(228, 196, 140, .32); }
.hp-rondo-sec .hp-rondo__photo-count { color: rgba(246, 236, 214, .55); }
.hp-rondo-sec .hp-rondo__photo-count i { color: rgba(228, 196, 140, .8); }

.hp-rondo-sec .hp-rondo__photo-frame {
	box-shadow:
		0 0 0 1px rgba(228, 196, 140, .45),
		0 0 90px rgba(160, 0, 0, .25),
		0 50px 90px -32px rgba(0, 0, 0, .85);
}

.hp-rondo-sec .hp-rondo__photo-info { border-top-color: rgba(228, 196, 140, .25); }
.hp-rondo-sec .hp-rondo__photo-desc { color: rgba(246, 236, 214, .68); }

/* ---- 右：時計 ---- */
/* 文字盤の後ろで紅の光がゆっくり呼吸する */
.hp-rondo-sec .hp-rondo__face::after {
	content: "";
	position: absolute;
	inset: -14%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(160, 0, 0, .2), transparent 62%);
	z-index: -1;
	animation: hpRondoGlow 5.5s ease-in-out infinite;
}

@keyframes hpRondoGlow {
	0%, 100% { opacity: .65; transform: scale(1); }
	50%      { opacity: 1;   transform: scale(1.06); }
}

.hp-rondo-sec .hp-rondo__ring--1 {
	border-color: rgba(228, 196, 140, .8);
	box-shadow: inset 0 0 0 4px rgba(228, 196, 140, .1);
}
.hp-rondo-sec .hp-rondo__ring--2 { border-color: rgba(228, 196, 140, .42); }
.hp-rondo-sec .hp-rondo__ring--3 { border-color: rgba(224, 85, 92, .3); }
.hp-rondo-sec .hp-rondo__ring--4 { border-color: rgba(224, 85, 92, .4); }

.hp-rondo-sec .hp-rondo__tick { background: rgba(228, 196, 140, .45); }
.hp-rondo-sec .hp-rondo__tick.is-major { background: rgba(224, 85, 92, .9); }

.hp-rondo-sec .hp-rondo__dot-mark {
	background: #241713;
	border-color: rgba(224, 85, 92, .9);
	box-shadow:
		0 0 0 2px rgba(20, 13, 11, .9),
		0 0 0 3px rgba(228, 196, 140, .4);
}
.hp-rondo-sec .hp-rondo__dot:hover .hp-rondo__dot-mark,
.hp-rondo-sec .hp-rondo__dot:focus-visible .hp-rondo__dot-mark,
.hp-rondo-sec .hp-rondo__dot.is-active .hp-rondo__dot-mark {
	background: var(--rondo-red);
	box-shadow:
		0 0 0 2px rgba(20, 13, 11, .9),
		0 0 0 4px rgba(224, 85, 92, .35),
		0 0 26px rgba(224, 85, 92, .8);
}
.hp-rondo-sec .hp-rondo__dot-time { color: rgba(246, 236, 214, .5); }

.hp-rondo-sec .hp-rondo__pivot {
	background: radial-gradient(circle at 50% 35%, #3a2a22 0%, #241713 100%);
	box-shadow:
		inset 0 0 0 1px rgba(228, 196, 140, .75),
		0 0 0 3px #17100d,
		0 0 0 4px rgba(224, 85, 92, .5),
		0 6px 18px rgba(0, 0, 0, .65);
}

.hp-rondo-sec .hp-rondo__hint { color: rgba(246, 236, 214, .38); }

/* ---- 下：タイムライン ---- */
.hp-rondo-sec .hp-rondo__timeline { border-top-color: rgba(228, 196, 140, .35); }
.hp-rondo-sec .hp-rondo__timeline-tag {
	background: #1c1310;
	color: #e4c48c;
}
.hp-rondo-sec .hp-rondo__timeline-track { border-left-color: rgba(228, 196, 140, .25); }
.hp-rondo-sec .hp-rondo__chip { border-right-color: rgba(228, 196, 140, .22); }
.hp-rondo-sec .hp-rondo__chip:hover { background: rgba(246, 236, 214, .07); }
.hp-rondo-sec .hp-rondo__chip.is-active { background: rgba(246, 236, 214, .12); }
.hp-rondo-sec .hp-rondo__chip-num { color: rgba(228, 196, 140, .85); }
.hp-rondo-sec .hp-rondo__chip-tag { color: rgba(246, 236, 214, .5); }

/* ---- モバイル一覧・リスト表示 ---- */
.hp-rondo-sec .hp-rondo__list li h3 { color: #f6ecd6; }
.hp-rondo-sec .hp-rondo__list li p { color: rgba(246, 236, 214, .65); }
.hp-rondo-sec .hp-rondo__list-time { color: #e0555c; }
.hp-rondo-sec .hp-rondo__list-tag { color: rgba(228, 196, 140, .85); }

@media (max-width: 640px) {
	/* スマホの小さな時計：すりガラスを暗幕仕様に */
	.hp-rondo-sec .hp-rondo__face::before {
		background: rgba(20, 13, 11, .45);
	}
	.hp-rondo-sec .hp-rondo__face::after { display: none; }
	.hp-rondo-sec .hp-rondo__ring--1 { border-color: rgba(228, 196, 140, .9); }
	.hp-rondo-sec .hp-rondo__tick.is-major { background: rgba(228, 196, 140, .85); }

	/* スワイプヒント */
	.hp-rondo-sec .hp-rondo__timeline::after { color: rgba(246, 236, 214, .42); }

	/* スマホのチップ枠 */
	.hp-rondo-sec .hp-rondo__chip { border-color: rgba(228, 196, 140, .3); border-top-color: transparent; }
	.hp-rondo-sec .hp-rondo__chip.is-active { border-top-color: var(--rondo-red); background: rgba(246, 236, 214, .14); }
}

@media (prefers-reduced-motion: reduce) {
	.hp-rondo-sec .hp-rondo__face::after { animation: none; }
}

/* シアター化の追補：一覧表示（is-listview）の文字色を暗幕用に反転 */
.hp-rondo-sec.is-listview .hp-rondo__list-time { color: #e0555c; }
.hp-rondo-sec.is-listview .hp-rondo__list-tag { color: rgba(228, 196, 140, .85); }
.hp-rondo-sec.is-listview .hp-rondo__list h3 { color: #f6ecd6; }
.hp-rondo-sec.is-listview .hp-rondo__list p { color: rgba(246, 236, 214, .68); }
.hp-rondo-sec.is-listview .hp-rondo__list li { border-top-color: rgba(228, 196, 140, .28); }

/* シアター化 追補2：可読性チューニング（文字の明度を一段引き上げ） */
.hp-rondo-sec .pr-section__lead { color: rgba(246, 236, 214, .78); }
.hp-rondo-sec .hp-rondo__dot-time { color: rgba(246, 236, 214, .78); }
.hp-rondo-sec .hp-rondo__num em { color: #eecf9b; }
.hp-rondo-sec .hp-rondo__band { color: rgba(228, 196, 140, .95); }
.hp-rondo-sec .hp-rondo__photo-count { color: rgba(246, 236, 214, .72); }
.hp-rondo-sec .hp-rondo__photo-desc { color: rgba(246, 236, 214, .82); }
.hp-rondo-sec .hp-rondo__chip-num { color: rgba(228, 196, 140, .95); }
.hp-rondo-sec .hp-rondo__chip-tag { color: rgba(246, 236, 214, .72); }
.hp-rondo-sec .hp-rondo__hint { color: rgba(246, 236, 214, .5); }
.hp-rondo-sec .hp-rondo__timeline-tag { color: #eecf9b; }
.hp-rondo-sec .hp-rondo__chip.is-active { background: rgba(246, 236, 214, .16); }
.hp-rondo-sec .hp-rondo__chip:hover .hp-rondo__chip-time { color: var(--rondo-red); }

/* /flow/ 年間行事：4季節を2×2で整列（3+1の不揃い解消） */
@media (min-width: 861px) {
	.hp-page--flow .pr-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* =========================================================
   /flow/ 1日の流れ：シーン内スライドショー
   複数枚あるシーンでは写真が自動で流れ、右下のドットで
   現在枚数の表示と手動切替ができる
   ========================================================= */
.hp-rondo__slidenav {
	position: absolute;
	right: 16px;
	bottom: 16px;
	z-index: 3;
	display: none;
	align-items: center;
	gap: 7px;
	padding: 8px 12px;
	background: rgba(15, 10, 8, .55);
	border: 1px solid rgba(228, 196, 140, .35);
	border-radius: 999px;
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

.hp-rondo__slidenav.is-active { display: flex; }

.hp-rondo__slidenav-dot {
	width: 7px;
	height: 7px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(246, 236, 214, .4);
	cursor: pointer;
	transition:
		width .35s cubic-bezier(.22, 1, .25, 1),
		background .35s ease;
}

.hp-rondo__slidenav-dot.is-on {
	width: 18px;
	background: var(--rondo-gold, #e4c48c);
}

@media (max-width: 640px) {
	.hp-rondo__slidenav {
		right: 12px;
		bottom: 12px;
		padding: 7px 10px;
	}
}

/* ---- シーン内スライドショー：前後矢印（複数枚のシーンのみ表示） ---- */
.hp-rondo__slidearrow {
	position: absolute;
	top: 50%;
	z-index: 6;   /* 縦書きルーン(z:5)より前面に */
	display: none;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	transform: translateY(-50%);
	background: rgba(15, 10, 8, .68);
	border: 1px solid rgba(228, 196, 140, .55);
	border-radius: 50%;
	color: #f0d9ac;
	cursor: pointer;
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	transition: background .3s ease, color .3s ease, border-color .3s ease;
}

.hp-rondo__slidearrow.is-show { display: flex; }

.hp-rondo__slidearrow--prev { left: 14px; }
.hp-rondo__slidearrow--next { right: 14px; }

.hp-rondo__slidearrow:hover {
	background: rgba(216, 0, 8, .75);
	border-color: rgba(228, 196, 140, .7);
	color: #fdfaf3;
}

.hp-rondo__slidearrow svg { display: block; }

/* 矢印が出るシーンでは右側の縦書きラベルを引っ込める（重なり回避） */
.hp-rondo__photo-frame:has(.hp-rondo__slidearrow.is-show) .hp-rondo__photo-rune {
	opacity: 0;
	transition: opacity .3s ease;
}

@media (max-width: 640px) {
	.hp-rondo__slidearrow {
		width: 34px;
		height: 34px;
	}
	.hp-rondo__slidearrow--prev { left: 10px; }
	.hp-rondo__slidearrow--next { right: 10px; }
}

/* =========================================================
   /flow/ 1日の流れ：時刻連動の空（デイライト演出）
   選んだ時刻に応じて --sky-day / --sky-dusk が連続変化し、
   朝は明るい紙色 → 午後はだんだん傾き → 夕方は茜色 →
   夜はシアターの暗幕へとじわっと移り変わる。
   明るい時間帯（--sky-day >= .5）は is-sky-light で文字色を墨に反転。
   ========================================================= */
.hp-rondo-sky {
	position: absolute;
	inset: 0;
	z-index: 1;   /* 暗幕背景の上・.pr-container(z:2) の下 */
	pointer-events: none;
	transition: opacity 1.6s ease;
}

/* 昼：明るい紙色の陽だまり */
.hp-rondo-sky--day {
	opacity: var(--sky-day, 0);
	background:
		radial-gradient(ellipse 120% 70% at 50% -18%, rgba(255, 253, 244, .95), transparent 62%),
		radial-gradient(70% 50% at 80% 16%, rgba(247, 233, 142, .3), transparent 60%),
		linear-gradient(180deg, #fdf8ea 0%, #faf1dc 55%, #f0e3c4 100%);
}

/* 朝：金色の斜光。明るさは保ったまま色味で「朝→昼」の変化を出す */
.hp-rondo-sky--dawn {
	opacity: var(--sky-dawn, 0);
	background:
		radial-gradient(80% 55% at 16% 32%, rgba(255, 189, 96, .55), transparent 64%),
		radial-gradient(ellipse 120% 70% at 50% -10%, rgba(255, 226, 162, .8), transparent 72%),
		linear-gradient(180deg, #ffe6b0 0%, #ffdc9d 50%, #f6cd88 100%);
}

/* 夕：茜色の残照 */
.hp-rondo-sky--dusk {
	opacity: var(--sky-dusk, 0);
	background:
		radial-gradient(90% 60% at 50% 100%, rgba(158, 42, 10, .55), transparent 70%),
		radial-gradient(ellipse 120% 70% at 50% -10%, rgba(74, 20, 22, .9), transparent 78%),
		linear-gradient(180deg, #431a16 0%, #67281a 45%, #8a3d1c 80%, #a4562a 100%);
}

/* 文字色の切替がじわっと追従するように */
.hp-rondo-sec .pr-section__kicker,
.hp-rondo-sec .pr-section__title,
.hp-rondo-sec .pr-section__lead,
.hp-rondo-sec .hp-rondo__photo-count,
.hp-rondo-sec .hp-rondo__photo-title,
.hp-rondo-sec .hp-rondo__photo-desc,
.hp-rondo-sec .hp-rondo__num i,
.hp-rondo-sec .hp-rondo__num em,
.hp-rondo-sec .hp-rondo__band,
.hp-rondo-sec .hp-rondo__dot-time,
.hp-rondo-sec .hp-rondo__hint,
.hp-rondo-sec .hp-rondo__chip-num,
.hp-rondo-sec .hp-rondo__chip-time,
.hp-rondo-sec .hp-rondo__chip-tag,
.hp-rondo-sec .hp-rondo__timeline-tag,
.hp-rondo-sec .hp-flow-viewtoggle__btn {
	transition: color .9s ease;
}

/* ---- 明るい時間帯：シアター前の明色パレットへ反転 ---- */
.hp-rondo-sec.is-sky-light .pr-section__kicker { color: #8a0c0c; }
.hp-rondo-sec.is-sky-light .pr-section__title { color: #1f1714; text-shadow: none; }
.hp-rondo-sec.is-sky-light .pr-section__lead { color: rgba(31, 23, 20, .72); }

.hp-rondo-sec.is-sky-light .hp-flow-viewtoggle {
	border-color: rgba(178, 145, 86, .42);
	background: rgba(253, 250, 243, .7);
}
.hp-rondo-sec.is-sky-light .hp-flow-viewtoggle__btn { color: rgba(31, 23, 20, .62); }
.hp-rondo-sec.is-sky-light .hp-flow-viewtoggle__btn:hover { color: rgba(31, 23, 20, .9); }
.hp-rondo-sec.is-sky-light .hp-flow-viewtoggle__btn.is-active {
	background: #8a0c0c;
	color: #fff;
	box-shadow: 0 4px 12px rgba(120, 0, 6, .25);
}

.hp-rondo-sec.is-sky-light .hp-rondo {
	--rondo-red:  #a00000;
	--rondo-deep: #6e0606;
	--rondo-gold: #a07a3a;
	--rondo-ink:  #1f1714;
}

.hp-rondo-sec.is-sky-light .hp-rondo::before {
	background:
		radial-gradient(ellipse at 75% 50%, rgba(160, 0, 0, .05), transparent 55%),
		radial-gradient(ellipse at 22% 30%, rgba(178, 145, 86, .08), transparent 60%);
}

/* 写真パネル */
.hp-rondo-sec.is-sky-light .hp-rondo__photo-meta-top { border-bottom-color: rgba(178, 145, 86, .4); }
.hp-rondo-sec.is-sky-light .hp-rondo__photo-count { color: rgba(31, 23, 20, .6); }
.hp-rondo-sec.is-sky-light .hp-rondo__photo-count i { color: rgba(160, 122, 58, .9); }
.hp-rondo-sec.is-sky-light .hp-rondo__photo-frame {
	box-shadow:
		0 0 0 1px rgba(178, 145, 86, .35),
		0 36px 80px -36px rgba(31, 23, 20, .55);
}
.hp-rondo-sec.is-sky-light .hp-rondo__photo-info { border-top-color: rgba(178, 145, 86, .3); }
.hp-rondo-sec.is-sky-light .hp-rondo__photo-desc { color: rgba(31, 23, 20, .7); }

/* 時計 */
.hp-rondo-sec.is-sky-light .hp-rondo__face::after {
	background: radial-gradient(circle, rgba(160, 0, 0, .07), transparent 62%);
}
.hp-rondo-sec.is-sky-light .hp-rondo__ring--1 {
	border-color: rgba(160, 122, 58, .8);
	box-shadow: inset 0 0 0 4px rgba(246, 236, 214, .5);
}
.hp-rondo-sec.is-sky-light .hp-rondo__ring--2 { border-color: rgba(160, 122, 58, .55); }
.hp-rondo-sec.is-sky-light .hp-rondo__ring--3 { border-color: rgba(160, 0, 0, .25); }
.hp-rondo-sec.is-sky-light .hp-rondo__ring--4 { border-color: rgba(160, 0, 0, .35); }
.hp-rondo-sec.is-sky-light .hp-rondo__tick { background: rgba(160, 122, 58, .55); }
.hp-rondo-sec.is-sky-light .hp-rondo__tick.is-major { background: rgba(160, 0, 0, .8); }

.hp-rondo-sec.is-sky-light .hp-rondo__dot-mark {
	background: #fdfaf3;
	border-color: var(--rondo-red);
	box-shadow:
		0 0 0 2px #fbf6ec,
		0 0 0 3px rgba(160, 122, 58, .45);
}
.hp-rondo-sec.is-sky-light .hp-rondo__dot:hover .hp-rondo__dot-mark,
.hp-rondo-sec.is-sky-light .hp-rondo__dot:focus-visible .hp-rondo__dot-mark,
.hp-rondo-sec.is-sky-light .hp-rondo__dot.is-active .hp-rondo__dot-mark {
	background: var(--rondo-red);
	box-shadow:
		0 0 0 2px #fbf6ec,
		0 0 0 4px rgba(160, 0, 0, .3),
		0 0 22px rgba(160, 0, 0, .65);
}
.hp-rondo-sec.is-sky-light .hp-rondo__dot-time { color: rgba(31, 23, 20, .55); }
.hp-rondo-sec.is-sky-light .hp-rondo__dot:hover .hp-rondo__dot-time,
.hp-rondo-sec.is-sky-light .hp-rondo__dot.is-active .hp-rondo__dot-time { color: var(--rondo-red); }
.hp-rondo-sec.is-sky-light .hp-rondo__num em { color: var(--rondo-red); }
.hp-rondo-sec.is-sky-light .hp-rondo__band { color: var(--rondo-red); }

.hp-rondo-sec.is-sky-light .hp-rondo__pivot {
	background: radial-gradient(circle at 50% 35%, #fdfaf3 0%, #f3ead8 60%, #e6d5b1 100%);
	box-shadow:
		inset 0 0 0 1px rgba(160, 122, 58, .8),
		0 0 0 3px #fbf6ec,
		0 0 0 4px rgba(160, 0, 0, .5),
		0 6px 16px rgba(160, 0, 0, .4);
}
.hp-rondo-sec.is-sky-light .hp-rondo__hint { color: rgba(31, 23, 20, .45); }

/* タイムライン */
.hp-rondo-sec.is-sky-light .hp-rondo__timeline { border-top-color: rgba(160, 122, 58, .5); }
.hp-rondo-sec.is-sky-light .hp-rondo__timeline-tag {
	background: rgba(253, 250, 243, .85);
	color: var(--rondo-red);
}
.hp-rondo-sec.is-sky-light .hp-rondo__timeline-track { border-left-color: rgba(160, 122, 58, .4); }
.hp-rondo-sec.is-sky-light .hp-rondo__chip { border-right-color: rgba(160, 122, 58, .3); }
.hp-rondo-sec.is-sky-light .hp-rondo__chip:hover { background: rgba(31, 23, 20, .04); }
.hp-rondo-sec.is-sky-light .hp-rondo__chip.is-active { background: rgba(160, 0, 0, .07); }
.hp-rondo-sec.is-sky-light .hp-rondo__chip-num { color: rgba(178, 145, 86, .95); }
.hp-rondo-sec.is-sky-light .hp-rondo__chip-tag { color: rgba(31, 23, 20, .55); }
.hp-rondo-sec.is-sky-light .hp-rondo__chip:hover .hp-rondo__chip-time { color: var(--rondo-red); }

/* 一覧（リスト表示） */
.hp-rondo-sec.is-sky-light.is-listview .hp-rondo__list-time { color: #8a0c0c; }
.hp-rondo-sec.is-sky-light.is-listview .hp-rondo__list-tag { color: rgba(31, 23, 20, .5); }
.hp-rondo-sec.is-sky-light.is-listview .hp-rondo__list h3 { color: #1f1714; }
.hp-rondo-sec.is-sky-light.is-listview .hp-rondo__list p { color: rgba(31, 23, 20, .7); }
.hp-rondo-sec.is-sky-light.is-listview .hp-rondo__list li { border-top-color: rgba(178, 145, 86, .3); }

@media (max-width: 640px) {
	.hp-rondo-sec.is-sky-light .hp-rondo__face::before { background: rgba(255, 255, 255, .4); }
	.hp-rondo-sec.is-sky-light .hp-rondo__ring--1 { border-color: rgba(160, 122, 58, .9); box-shadow: none; }
	.hp-rondo-sec.is-sky-light .hp-rondo__tick.is-major { background: rgba(160, 0, 0, .8); }
	.hp-rondo-sec.is-sky-light .hp-rondo__timeline::after { color: rgba(31, 23, 20, .45); }
	.hp-rondo-sec.is-sky-light .hp-rondo__chip { border-color: rgba(160, 122, 58, .35); border-top-color: transparent; }
	.hp-rondo-sec.is-sky-light .hp-rondo__chip.is-active { border-top-color: var(--rondo-red); background: rgba(160, 0, 0, .07); }
}

/* ---- 太陽と月：時計の文字盤外周を時刻に合わせて回る ---- */
.hp-rondo-orbit {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	z-index: 3;
	transform: rotate(var(--cel-ang, -67.5deg));
	transition: transform 1.05s cubic-bezier(.62, .04, .25, 1);
	pointer-events: none;
}

.hp-rondo-celestial {
	position: absolute;
	left: -22px;
	top: -22px;
	width: 44px;
	height: 44px;
	/* 文字盤の縁から 26px 外側に置き、常に正立させる。
	   --cel-scale は日の高さ（朝は小さく・正午に大きく） */
	transform:
		translateY(calc(-1 * var(--clock-size, 480px) / 2 - 26px))
		rotate(calc(-1 * var(--cel-ang, -67.5deg)))
		scale(var(--cel-scale, 1));
	transition:
		transform 1.05s cubic-bezier(.62, .04, .25, 1),
		opacity 1.6s ease,
		color 1.6s ease,
		filter 1.6s ease;
}

.hp-rondo-celestial svg {
	display: block;
	width: 100%;
	height: 100%;
}

.hp-rondo-celestial--sun {
	opacity: var(--sun-op, 1);
	color: #f0b23e;
	filter: drop-shadow(0 0 var(--sun-glow, 16px) rgba(247, 205, 90, .85));
}

/* ゆっくり回る光条 */
.hp-rondo-celestial--sun svg {
	animation: hpSunSpin 48s linear infinite;
}

@keyframes hpSunSpin {
	to { transform: rotate(360deg); }
}

/* 夕方は夕日色に */
.hp-rondo-sec.is-sky-duskish .hp-rondo-celestial--sun {
	color: #ff7b3d;
	filter: drop-shadow(0 0 20px rgba(255, 118, 38, .8));
}

.hp-rondo-celestial--moon {
	opacity: var(--moon-op, 0);
	color: #f3e3b2;
	filter: drop-shadow(0 0 14px rgba(243, 227, 178, .6));
}

@media (max-width: 640px) {
	/* SP：PCと同じく時計の外周を太陽・月が回る（ユーザー確定 2026-07-16）。
	   ミニ時計(70px)に合わせて半径と天体サイズを小さくする。
	   写真端で一部見切れるのは許容 */
	.hp-rondo-celestial {
		width: 26px;
		height: 26px;
		left: -13px;
		top: -13px;
		transform:
			translateY(calc(-1 * var(--clock-size, 70px) / 2 - 16px))
			rotate(calc(-1 * var(--cel-ang, -67.5deg)))
			scale(var(--cel-scale, 1));
	}
}

@media (prefers-reduced-motion: reduce) {
	.hp-rondo-celestial--sun svg { animation: none; }
}

/* =========================================================
   /feature/ 園の特徴・保育方針：演出強化
   紙×赤×金の意匠で、目標カードと特色の段組をリッチに
   ========================================================= */

/* ---- 5つの保育目標（暗幕セクション）---- */
.hp-page--feature .pr-section--dark {
	background:
		radial-gradient(ellipse 110% 60% at 50% -12%, rgba(228, 196, 140, .08), transparent 60%),
		radial-gradient(70% 50% at 12% 80%, rgba(160, 0, 0, .18), transparent 62%),
		radial-gradient(60% 45% at 88% 30%, rgba(160, 0, 0, .12), transparent 60%),
		linear-gradient(180deg, #1c1310 0%, #221612 50%, #17100d 100%);
}

.hp-goalcard {
	overflow: hidden;
	transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

/* 金のヘアライン（上辺） */
.hp-goalcard::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, rgba(228, 196, 140, .85), transparent);
	opacity: .55;
	transition: opacity .35s ease;
}

.hp-goalcard:hover {
	border-color: rgba(228, 196, 140, .5);
	box-shadow:
		0 26px 50px rgba(0, 0, 0, .4),
		0 0 42px rgba(160, 0, 0, .22);
}

.hp-goalcard:hover::before { opacity: 1; }

/* 背景の大きな英語ゴースト */
.hp-goalcard__ghost {
	position: absolute;
	right: -6px;
	bottom: -14px;
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	font-size: 64px;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1px rgba(228, 196, 140, .16);
	pointer-events: none;
	transition: -webkit-text-stroke-color .35s ease, transform .5s cubic-bezier(.22, 1, .25, 1);
}

.hp-goalcard:hover .hp-goalcard__ghost {
	-webkit-text-stroke-color: rgba(228, 196, 140, .32);
	transform: translateX(-6px);
}

/* 番号メダル */
.hp-goalcard__medal {
	position: absolute;
	top: 22px;
	right: 22px;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(228, 196, 140, .45);
	border-radius: 50%;
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	font-size: 14px;
	font-weight: 700;
	color: #e4c48c;
	background: rgba(228, 196, 140, .06);
}

.hp-goalcard__medal::after {
	content: "";
	position: absolute;
	inset: 3px;
	border: 1px dashed rgba(228, 196, 140, .3);
	border-radius: 50%;
}

/* ---- 保育の特色（FEATURES）---- */
.hp-page--feature .pr-section--paper {
	overflow: hidden;
	background:
		radial-gradient(70% 46% at 8% 12%, rgba(216, 0, 8, .045), transparent 60%),
		radial-gradient(60% 42% at 94% 78%, rgba(178, 145, 86, .08), transparent 60%),
		#fbf6ec;
}

.hp-featrow {
	position: relative;
	margin-bottom: clamp(72px, 8vw, 120px);
}

.hp-featrow:last-of-type { margin-bottom: 0; }

/* 写真：赤のオフセット額縁（外側）＋四隅チック（内側）＋光沢スイープ */
.hp-featrow__mediawrap { position: relative; }

.hp-featrow__frame {
	position: absolute;
	top: 16px;
	left: 16px;
	right: -16px;
	bottom: -16px;
	border: 1.5px solid rgba(216, 0, 8, .45);
	pointer-events: none;
	transition: transform .5s cubic-bezier(.22, 1, .25, 1);
}

.pr-split--reverse .hp-featrow__frame {
	left: -16px;
	right: 16px;
}

.hp-featrow:hover .hp-featrow__frame { transform: translate(5px, 5px); }
.pr-split--reverse.hp-featrow:hover .hp-featrow__frame { transform: translate(-5px, 5px); }

.hp-featrow__corners { position: absolute; inset: 12px; pointer-events: none; z-index: 4; }
.hp-featrow__corners span {
	position: absolute;
	width: 22px;
	height: 22px;
	border: 1.5px solid rgba(253, 250, 243, .85);
}
.hp-featrow__corners span:nth-child(1) { top: 0; left: 0; border-right: none; border-bottom: none; }
.hp-featrow__corners span:nth-child(2) { top: 0; right: 0; border-left: none; border-bottom: none; }
.hp-featrow__corners span:nth-child(3) { bottom: 0; left: 0; border-right: none; border-top: none; }
.hp-featrow__corners span:nth-child(4) { bottom: 0; right: 0; border-left: none; border-top: none; }

/* ホバーで斜めに走る光 */
.hp-featrow__shine {
	position: absolute;
	top: -30%;
	bottom: -30%;
	left: -80%;
	width: 55%;
	background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .35), transparent);
	transform: skewX(-18deg);
	pointer-events: none;
	z-index: 3;
	transition: left .9s cubic-bezier(.3, .6, .3, 1);
}

.hp-featrow:hover .hp-featrow__shine { left: 130%; }

/* 本文：背景の大きな番号 */
.hp-featrow__body { position: relative; }

.hp-featrow__ghost {
	position: absolute;
	top: -46px;
	right: -8px;
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	font-size: clamp(96px, 11vw, 150px);
	font-weight: 700;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(178, 145, 86, .22);
	pointer-events: none;
}

.pr-split--reverse .hp-featrow__ghost {
	right: auto;
	left: -8px;
}

/* 見出し下の赤ヘアライン */
.hp-featrow__body h3 {
	position: relative;
	padding-bottom: 18px;
}

.hp-featrow__body h3::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 44px;
	height: 2px;
	background: linear-gradient(90deg, var(--hp-red-line, #d80008), rgba(216, 0, 8, .2));
	transition: width .45s cubic-bezier(.22, 1, .25, 1);
}

.hp-featrow:hover .hp-featrow__body h3::after { width: 76px; }

/* 「くわしく見る」リンク */
.hp-featrow__more {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 18px;
	padding: 11px 26px;
	border: 1px solid rgba(216, 0, 8, .5);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .12em;
	color: var(--hp-red-line, #d80008);
	text-decoration: none;
	transition: background .3s ease, color .3s ease, gap .3s ease;
}

.hp-featrow__more span { transition: transform .3s ease; }

.hp-featrow__more:hover {
	background: var(--hp-red-line, #d80008);
	color: #fdf7ea;
}

.hp-featrow__more:hover span { transform: translateX(4px); }

@media (max-width: 800px) {
	.hp-featrow__frame {
		top: 10px;
		left: 10px;
		right: -10px;
		bottom: -10px;
	}
	.pr-split--reverse .hp-featrow__frame { left: -10px; right: 10px; }
	.hp-featrow__ghost {
		top: -30px;
		right: 0;
		font-size: 76px;
	}
	.pr-split--reverse .hp-featrow__ghost { left: auto; right: 0; }
	.hp-goalcard__ghost { font-size: 48px; }
}

/* =========================================================
   /flow/ 写真の演出追加（2026-07-16）
   ①SPは写真を左右いっぱい+少し縦長にして大きく
   ②表示中の写真をゆっくりズーム（Ken Burns）
   ========================================================= */
@media (max-width: 640px) {
	/* 左右いっぱい+下に広げてバランスを取る（素材は640x440なので6:5でも画質は保てる） */
	.hp-rondo-sec .hp-rondo__photo-frame {
		margin-left: -16px;
		margin-right: -16px;
		aspect-ratio: 6 / 5;
	}
}

/* ※ゆっくりズーム(Ken Burns)は元の切り替え演出と干渉するため撤去（2026-07-16ユーザー指示） */

/* =========================================================
   /flow/ 全体の演出・デザイン強化（2026-07-16）
   ①PCバランス調整: 時計を左カラムに対して上下センターに
   ②シーン見出しを大きく+赤アクセントバーで存在感を出す
   ③夜シーン（18:30）に星がまたたく
   ④年間行事カードに季節カラーとホバー演出
   ========================================================= */

/* ① 右の時計が上寄りで下に余白が出ていたのを中央揃えに */
.hp-rondo {
	align-items: center;
}
.hp-rondo__timeline {
	margin-top: 40px;
}

/* ② シーン見出し */
.hp-rondo__photo-title {
	position: relative;
	padding-left: 18px;
	font-size: clamp(24px, 2.6vw, 34px);
}
.hp-rondo__photo-title::before {
	content: "";
	position: absolute;
	left: 0;
	top: .16em;
	bottom: .1em;
	width: 4px;
	background: linear-gradient(180deg, var(--hp-red-line, #b40000), rgba(180, 0, 0, .3));
}

/* ③ 夜空の星（月の出現と連動してまたたく） */
.hp-rondo-sky--dusk::after {
	content: "";
	position: absolute;
	inset: 0;
	opacity: var(--moon-op, 0);
	transition: opacity 1.6s ease;
	background-image:
		radial-gradient(1.6px 1.6px at 11% 18%, rgba(255, 246, 216, .95), transparent 60%),
		radial-gradient(1.2px 1.2px at 24% 9%,  rgba(255, 246, 216, .8),  transparent 60%),
		radial-gradient(1.8px 1.8px at 38% 22%, rgba(255, 246, 216, .9),  transparent 60%),
		radial-gradient(1.2px 1.2px at 55% 12%, rgba(255, 246, 216, .75), transparent 60%),
		radial-gradient(1.6px 1.6px at 68% 24%, rgba(255, 246, 216, .9),  transparent 60%),
		radial-gradient(1.2px 1.2px at 79% 8%,  rgba(255, 246, 216, .8),  transparent 60%),
		radial-gradient(1.8px 1.8px at 90% 19%, rgba(255, 246, 216, .95), transparent 60%),
		radial-gradient(1.2px 1.2px at 47% 32%, rgba(255, 246, 216, .6),  transparent 60%);
	animation: hpStarTwinkle 3.6s ease-in-out infinite alternate;
	pointer-events: none;
}
@keyframes hpStarTwinkle {
	from { filter: brightness(.85); }
	to   { filter: brightness(1.25); }
}

/* ④ 年間行事カード: 季節カラーの上辺ライン + ホバーで浮く */
.page-template-page-flow .pr-section--paper .pr-card {
	border-top: 3px solid var(--season-c, #b40000);
	transition: transform .45s cubic-bezier(.22, 1, .25, 1), box-shadow .45s ease;
}
.page-template-page-flow .pr-section--paper .pr-card:nth-child(1) { --season-c: #d886a0; } /* 春: 桜 */
.page-template-page-flow .pr-section--paper .pr-card:nth-child(2) { --season-c: #4fa3d8; } /* 夏: 空 */
.page-template-page-flow .pr-section--paper .pr-card:nth-child(3) { --season-c: #d97c2b; } /* 秋: 柿 */
.page-template-page-flow .pr-section--paper .pr-card:nth-child(4) { --season-c: #7286b5; } /* 冬: 藍 */
.page-template-page-flow .pr-section--paper .pr-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 44px rgba(31, 23, 20, .12);
}

@media (prefers-reduced-motion: reduce) {
	.hp-rondo-sky--dusk::after { animation: none; }
}

/* =========================================================
   1日の流れ: 19:30 閉園シーンの「おやすみ演出」（2026-07-22）
   is-sky-close は 19時以降のみ JS(updateSky) が付与
   ========================================================= */

/* ---- 専用夜空レイヤー（ふだんは透明） ---- */
.hp-rondo-sky--close {
	opacity: 0;
	transition: opacity 1.6s ease;
	background:
		radial-gradient(58% 44% at 84% 6%, rgba(255, 232, 170, .22), transparent 70%),
		radial-gradient(120% 85% at 50% 0%, rgba(30, 22, 52, .7), transparent 74%),
		linear-gradient(180deg, rgba(16, 12, 34, .46), transparent 58%);
}
.hp-rondo-sec.is-sky-close .hp-rondo-sky--close { opacity: 1; }

/* 星のまたたき: 明るい核 + 光の暈のペアで大きく光る（気づきやすさ優先） */
.hp-rondo-sky--close::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle 3px    at 8% 22%,  #fff 55%, transparent 62%),
		radial-gradient(circle 10px   at 8% 22%,  rgba(255, 255, 255, .3) 28%, transparent 62%),
		radial-gradient(circle 2px    at 16% 64%, rgba(255, 255, 255, .95) 55%, transparent 62%),
		radial-gradient(circle 3.5px  at 24% 34%, #ffe2a8 55%, transparent 62%),
		radial-gradient(circle 12px   at 24% 34%, rgba(255, 226, 168, .34) 28%, transparent 62%),
		radial-gradient(circle 2px    at 33% 15%, rgba(255, 255, 255, .9) 55%, transparent 62%),
		radial-gradient(circle 2.5px  at 41% 52%, #fff 55%, transparent 62%),
		radial-gradient(circle 2px    at 52% 27%, rgba(255, 255, 255, .85) 55%, transparent 62%),
		radial-gradient(circle 3.5px  at 61% 60%, #ffe2a8 55%, transparent 62%),
		radial-gradient(circle 12px   at 61% 60%, rgba(255, 226, 168, .34) 28%, transparent 62%),
		radial-gradient(circle 2px    at 68% 18%, #fff 55%, transparent 62%),
		radial-gradient(circle 3px    at 76% 44%, #fff 55%, transparent 62%),
		radial-gradient(circle 10px   at 76% 44%, rgba(255, 255, 255, .28) 28%, transparent 62%),
		radial-gradient(circle 2px    at 84% 68%, rgba(255, 255, 255, .8) 55%, transparent 62%),
		radial-gradient(circle 4px    at 91% 26%, #fff0c8 55%, transparent 62%),
		radial-gradient(circle 14px   at 91% 26%, rgba(255, 240, 200, .36) 28%, transparent 62%),
		radial-gradient(circle 2px    at 96% 55%, rgba(255, 255, 255, .85) 55%, transparent 62%),
		radial-gradient(circle 2.5px  at 46% 8%,  #fff 55%, transparent 62%),
		radial-gradient(circle 2px    at 12% 44%, rgba(255, 255, 255, .85) 55%, transparent 62%),
		radial-gradient(circle 2.5px  at 57% 12%, rgba(255, 255, 255, .95) 55%, transparent 62%),
		radial-gradient(circle 2.5px  at 94% 38%, #fff 55%, transparent 62%),
		radial-gradient(circle 10px   at 94% 38%, rgba(255, 255, 255, .28) 28%, transparent 62%),
		radial-gradient(circle 2px    at 89% 52%, rgba(255, 255, 255, .85) 55%, transparent 62%),
		radial-gradient(circle 3px    at 6% 58%,  #ffe2a8 55%, transparent 62%),
		radial-gradient(circle 11px   at 6% 58%,  rgba(255, 226, 168, .32) 28%, transparent 62%),
		radial-gradient(circle 2px    at 30% 73%, rgba(255, 255, 255, .8) 55%, transparent 62%),
		radial-gradient(circle 2.5px  at 68% 78%, #fff 55%, transparent 62%),
		radial-gradient(circle 10px   at 68% 78%, rgba(255, 255, 255, .26) 28%, transparent 62%),
		radial-gradient(circle 2px    at 50% 86%, rgba(255, 255, 255, .75) 55%, transparent 62%),
		radial-gradient(circle 3px    at 92% 82%, #fff0c8 55%, transparent 62%),
		radial-gradient(circle 12px   at 92% 82%, rgba(255, 240, 200, .3) 28%, transparent 62%),
		radial-gradient(circle 2px    at 14% 88%, rgba(255, 255, 255, .8) 55%, transparent 62%);
	animation: hpCloseTwinkle 2.6s ease-in-out infinite;
}

@keyframes hpCloseTwinkle {
	0%, 100% { opacity: .3; }
	50%      { opacity: 1; }
}

/* 流れ星（約5秒おきに右上→左下へ、太く明るい軌跡） */
.hp-rondo-sky--close::before {
	content: '';
	position: absolute;
	top: 7%;
	left: 84%;
	width: 180px;
	height: 3px;
	border-radius: 3px;
	background: linear-gradient(270deg, #fff, rgba(255, 240, 200, .65) 40%, transparent);
	filter: drop-shadow(0 0 7px rgba(255, 255, 255, .9));
	transform: rotate(-33deg);
	transform-origin: right center;
	opacity: 0;
	animation: hpShootingStar 4.8s ease-in 1.2s infinite;
	pointer-events: none;
}

@keyframes hpShootingStar {
	0%       { opacity: 0; translate: 0 0; }
	4%       { opacity: 1; }
	15%      { opacity: 0; translate: -480px 310px; }
	100%     { opacity: 0; translate: -480px 310px; }
}

/* ---- 写真: 玄関の灯りがふわっと息づく（窓明かりの余韻） ---- */
.hp-rondo-sec.is-sky-close .hp-rondo__photo-shade {
	background:
		radial-gradient(85% 72% at 50% 60%, rgba(255, 186, 106, .17), transparent 66%),
		linear-gradient(180deg, rgba(18, 13, 34, .24), transparent 42%);
	animation: hpCloseGlow 4.5s ease-in-out infinite;
}

@keyframes hpCloseGlow {
	0%, 100% { opacity: .8; }
	50%      { opacity: 1; }
}

/* ---- 「また あした」のひとこと（説明文の下にふわっと） ---- */
.hp-rondo-sec.is-sky-close .hp-rondo__photo-desc::after {
	content: '— おつかれさまでした。また あしたね ☽';
	display: block;
	margin-top: 10px;
	font-size: 12px;
	letter-spacing: .16em;
	color: rgba(255, 226, 178, .92);
	animation: hpCloseMsg 1.3s ease .5s both;
}

@keyframes hpCloseMsg {
	from { opacity: 0; translate: 0 8px; }
	to   { opacity: 1; translate: 0 0; }
}

/* ---- 月の暈（19時以降だけ月のグローを強める） ---- */
.hp-rondo-sec.is-sky-close .hp-rondo__cel-moon,
.hp-rondo-sec.is-sky-close [class*="moon"] {
	filter: drop-shadow(0 0 10px rgba(255, 240, 200, .55));
}

/* 動きを抑えたい環境では演出を止める */
@media (prefers-reduced-motion: reduce) {
	.hp-rondo-sky--close::before,
	.hp-rondo-sky--close::after,
	.hp-rondo-sec.is-sky-close .hp-rondo__photo-shade { animation: none; }
}


/* ---- 追加の流れ星: 時計まわり(a)とタイムライン上(b)にも流れる ---- */
.hp-rondo-shoot {
	position: absolute;
	width: 170px;
	height: 3px;
	border-radius: 3px;
	background: linear-gradient(270deg, #fff, rgba(255, 240, 200, .65) 40%, transparent);
	filter: drop-shadow(0 0 7px rgba(255, 255, 255, .9));
	transform: rotate(-33deg);
	transform-origin: right center;
	opacity: 0;
	pointer-events: none;
	z-index: 1;
}
.hp-rondo-sec.is-sky-close .hp-rondo-shoot--a { animation: hpShootingStar 5.6s ease-in 2.4s infinite; }
.hp-rondo-sec.is-sky-close .hp-rondo-shoot--b { animation: hpShootingStar 6.4s ease-in 4.1s infinite; }
.hp-rondo-shoot--a { top: 31%; left: 97%; }
.hp-rondo-shoot--b { top: 53%; left: 48%; }

/* 時計エリアの右にも月あかりのにじみを重ねる */
.hp-rondo-sec.is-sky-close .hp-rondo-sky--close {
	background:
		radial-gradient(58% 44% at 84% 6%, rgba(255, 232, 170, .22), transparent 70%),
		radial-gradient(34% 22% at 90% 40%, rgba(255, 232, 170, .15), transparent 72%),
		radial-gradient(120% 85% at 50% 0%, rgba(30, 22, 52, .7), transparent 74%),
		linear-gradient(180deg, rgba(16, 12, 34, .46), transparent 58%);
}

@media (prefers-reduced-motion: reduce) {
	.hp-rondo-shoot { animation: none !important; }
}

/* ---- SP: 閉園演出の調整（画面幅に合わせて流れ星を最適化） ---- */
@media (max-width: 768px) {
	.hp-rondo-shoot { width: 130px; height: 2.5px; }
	.hp-rondo-shoot--a { top: 44%; left: 94%; }
	.hp-rondo-shoot--b { top: 60%; left: 80%; }
	/* タイトル上の流れ星(::before)もSPの画面内に */
	.hp-rondo-sky--close::before { top: 4%; left: 92%; width: 130px; }
	/* 星のまたたきをSPでは少し強めに（小さい画面でも気づけるように） */
	@keyframes hpCloseTwinkle {
		0%, 100% { opacity: .25; }
		50%      { opacity: 1; }
	}
}

/* =========================================================
   閉園シーン 星空v3（2026-07-22）: もっと分かりやすく綺麗な星空
   藍色の夜 + 天の川 + 微細星の絨毯2層(位相ちがい) + 一番星✦
   ========================================================= */

/* ---- 夜空: 藍色を深く + 天の川 ---- */
.hp-rondo-sec.is-sky-close .hp-rondo-sky--close {
	background:
		radial-gradient(58% 44% at 84% 6%, rgba(255, 232, 170, .2), transparent 70%),
		radial-gradient(34% 22% at 90% 40%, rgba(255, 232, 170, .12), transparent 72%),
		radial-gradient(120% 85% at 50% 0%, rgba(22, 26, 66, .8), rgba(25, 20, 52, .42) 55%, transparent 80%),
		linear-gradient(180deg, rgba(10, 12, 38, .52), rgba(16, 12, 34, .3) 55%, transparent 72%);
}

/* ---- 微細星の絨毯（2層・位相ちがいでチラチラ瞬く） ---- */
.hp-rondo-stars {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.6s ease;
	pointer-events: none;
}
.hp-rondo-sec.is-sky-close .hp-rondo-stars { opacity: 1; }

/* 層1: ちいさな星をまんべんなく */
.hp-rondo-stars::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle 1.2px at 4% 9%,   rgba(255, 255, 255, .8) 55%, transparent 62%),
		radial-gradient(circle 1px   at 11% 31%, rgba(255, 255, 255, .65) 55%, transparent 62%),
		radial-gradient(circle 1.4px at 19% 12%, rgba(255, 255, 255, .85) 55%, transparent 62%),
		radial-gradient(circle 1px   at 27% 42%, rgba(210, 222, 255, .7) 55%, transparent 62%),
		radial-gradient(circle 1.2px at 36% 6%,  rgba(255, 255, 255, .75) 55%, transparent 62%),
		radial-gradient(circle 1px   at 44% 29%, rgba(255, 255, 255, .6) 55%, transparent 62%),
		radial-gradient(circle 1.4px at 52% 16%, rgba(210, 222, 255, .8) 55%, transparent 62%),
		radial-gradient(circle 1px   at 58% 38%, rgba(255, 255, 255, .65) 55%, transparent 62%),
		radial-gradient(circle 1.2px at 66% 8%,  rgba(255, 255, 255, .8) 55%, transparent 62%),
		radial-gradient(circle 1px   at 73% 33%, rgba(210, 222, 255, .65) 55%, transparent 62%),
		radial-gradient(circle 1.4px at 81% 14%, rgba(255, 255, 255, .85) 55%, transparent 62%),
		radial-gradient(circle 1px   at 88% 46%, rgba(255, 255, 255, .6) 55%, transparent 62%),
		radial-gradient(circle 1.2px at 95% 21%, rgba(255, 255, 255, .75) 55%, transparent 62%),
		radial-gradient(circle 1px   at 8% 55%,  rgba(255, 255, 255, .6) 55%, transparent 62%),
		radial-gradient(circle 1.2px at 22% 63%, rgba(210, 222, 255, .7) 55%, transparent 62%),
		radial-gradient(circle 1px   at 38% 57%, rgba(255, 255, 255, .6) 55%, transparent 62%),
		radial-gradient(circle 1.2px at 55% 66%, rgba(255, 255, 255, .7) 55%, transparent 62%),
		radial-gradient(circle 1px   at 71% 59%, rgba(210, 222, 255, .6) 55%, transparent 62%),
		radial-gradient(circle 1.2px at 86% 68%, rgba(255, 255, 255, .7) 55%, transparent 62%),
		radial-gradient(circle 1px   at 15% 82%, rgba(255, 255, 255, .55) 55%, transparent 62%),
		radial-gradient(circle 1.2px at 42% 86%, rgba(255, 255, 255, .6) 55%, transparent 62%),
		radial-gradient(circle 1px   at 64% 90%, rgba(210, 222, 255, .55) 55%, transparent 62%),
		radial-gradient(circle 1.2px at 90% 87%, rgba(255, 255, 255, .6) 55%, transparent 62%);
	animation: hpTwinkleB 3.8s ease-in-out infinite;
}
@keyframes hpTwinkleB {
	0%, 100% { opacity: .95; }
	50%      { opacity: .4; }
}

/* 層2: 中くらいの星（層1と逆位相） */
.hp-rondo-stars::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle 1.8px at 7% 19%,  #fff 55%, transparent 62%),
		radial-gradient(circle 1.6px at 17% 47%, rgba(255, 255, 255, .85) 55%, transparent 62%),
		radial-gradient(circle 2px   at 29% 24%, rgba(226, 234, 255, .9) 55%, transparent 62%),
		radial-gradient(circle 1.6px at 40% 44%, rgba(255, 255, 255, .8) 55%, transparent 62%),
		radial-gradient(circle 1.8px at 49% 10%, #fff 55%, transparent 62%),
		radial-gradient(circle 1.6px at 63% 27%, rgba(255, 255, 255, .8) 55%, transparent 62%),
		radial-gradient(circle 2px   at 74% 21%, rgba(226, 234, 255, .9) 55%, transparent 62%),
		radial-gradient(circle 1.6px at 85% 34%, rgba(255, 255, 255, .8) 55%, transparent 62%),
		radial-gradient(circle 1.8px at 93% 60%, #fff 55%, transparent 62%),
		radial-gradient(circle 1.6px at 30% 72%, rgba(255, 255, 255, .75) 55%, transparent 62%),
		radial-gradient(circle 1.8px at 52% 79%, rgba(226, 234, 255, .8) 55%, transparent 62%),
		radial-gradient(circle 1.6px at 78% 74%, rgba(255, 255, 255, .75) 55%, transparent 62%);
	animation: hpTwinkleB 3.2s ease-in-out -1.6s infinite;
}

/* ---- 一番星✦（きらりと明滅） ---- */
.hp-rondo-bigstar {
	position: absolute;
	z-index: 1;
	color: #fff;
	text-shadow:
		0 0 6px rgba(255, 255, 255, .9),
		0 0 16px rgba(210, 222, 255, .8),
		0 0 30px rgba(180, 200, 255, .5);
	opacity: 0;
	pointer-events: none;
	transition: opacity 1.6s ease;
}
.hp-rondo-sec.is-sky-close .hp-rondo-bigstar { opacity: 1; }
.hp-rondo-sec.is-sky-close .hp-rondo-bigstar--a { animation: hpBigStar 3.6s ease-in-out infinite; }
.hp-rondo-sec.is-sky-close .hp-rondo-bigstar--b { animation: hpBigStar 4.4s ease-in-out -1.4s infinite; }
.hp-rondo-sec.is-sky-close .hp-rondo-bigstar--c { animation: hpBigStar 4s ease-in-out -2.6s infinite; }
.hp-rondo-bigstar--a { top: 12%; left: 20%; font-size: 21px; }
.hp-rondo-bigstar--b {
	top: 26%;
	left: 88%;
	font-size: 15px;
	color: #ffe9bd;
	text-shadow:
		0 0 6px rgba(255, 234, 180, .9),
		0 0 16px rgba(255, 226, 168, .7),
		0 0 30px rgba(255, 216, 150, .45);
}
.hp-rondo-bigstar--c { top: 55%; left: 6%; font-size: 17px; }

@keyframes hpBigStar {
	0%, 100% { opacity: 1; scale: 1; }
	50%      { opacity: .55; scale: .82; }
}

/* ---- SP: 一番星の位置を暗色帯へ ---- */
@media (max-width: 768px) {
	.hp-rondo-bigstar--a { top: 8%; left: 12%; font-size: 17px; }
	.hp-rondo-bigstar--b { top: 46%; left: 88%; font-size: 13px; }
	.hp-rondo-bigstar--c { top: 62%; left: 8%; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
	.hp-rondo-stars::before,
	.hp-rondo-stars::after,
	.hp-rondo-bigstar { animation: none !important; }
}

/* =========================================================
   1日の流れ 空演出v4（2026-07-22）: 全時間帯の空を強化
   昼=青空+流れる雲 / 朝=金色の光条 / 夕=夕陽の玉+茜の帯雲
   （夜=星空v3は既存。すべて --sky-* 変数の透明度に連動、JS変更なし）
   ========================================================= */

/* ---- 昼: 紙色 → 青空へ（下端はサイトのクリームに溶ける） ---- */
.hp-rondo-sky--day {
	background:
		radial-gradient(ellipse 120% 60% at 50% -16%, rgba(255, 255, 255, .85), transparent 60%),
		radial-gradient(70% 46% at 80% 10%, rgba(255, 246, 200, .22), transparent 60%),
		linear-gradient(180deg, #9ccdee 0%, #b7dcf4 30%, #d8ecf6 55%, #efe9d2 80%, #f0e3c4 100%);
}

/* ---- 昼: ふわふわ流れる雲 ---- */
.hp-rondo-clouds { opacity: calc(var(--sky-day, 0) * .95 * (1 - var(--sky-dusk, 0) * .75)); }
.hp-rondo-clouds i {
	position: absolute;
	width: 360px;
	height: 48px;
	background:
		radial-gradient(ellipse 180px 22px at 50% 56%, rgba(255, 255, 255, .7), transparent 72%),
		radial-gradient(ellipse 120px 16px at 26% 40%, rgba(255, 255, 255, .5), transparent 72%),
		radial-gradient(ellipse 130px 18px at 74% 46%, rgba(255, 255, 255, .45), transparent 72%);
	filter: blur(7px);
	animation: hpCloudDrift 56s ease-in-out infinite alternate;
}
.hp-rondo-clouds i:nth-child(1) { left: 4%;  top: 4%;  scale: 1;   opacity: .5; }
.hp-rondo-clouds i:nth-child(2) { left: 46%; top: 2%;  scale: .8;  opacity: .42; animation-delay: -16s; animation-duration: 64s; }
.hp-rondo-clouds i:nth-child(3) { left: 86%; top: 22%; scale: .7;  opacity: .4;  animation-delay: -30s; animation-duration: 58s; }
.hp-rondo-clouds i:nth-child(4) { left: 1%;  top: 36%; scale: .6;  opacity: .34; animation-delay: -8s;  animation-duration: 70s; }

.hp-rondo-clouds i:nth-child(5) { left: 62%; top: 50%; scale: .65; opacity: .3;  animation-delay: -24s; animation-duration: 62s; }
.hp-rondo-clouds i:nth-child(6) { left: 18%; top: 60%; scale: .5;  opacity: .24; animation-delay: -42s; animation-duration: 76s; }

@keyframes hpCloudDrift {
	from { translate: 0 0; }
	to   { translate: 34px 5px; }
}

/* ---- 朝: 左上からさす金色の光条 ---- */
.hp-rondo-dawnrays {
	opacity: calc(var(--sky-dawn, 0) * .85);
	background: repeating-conic-gradient(from 100deg at 4% 26%,
		rgba(255, 236, 180, 0) 0deg 6deg,
		rgba(255, 236, 180, .15) 8deg 11deg,
		rgba(255, 236, 180, 0) 13deg 21deg);
	-webkit-mask-image: radial-gradient(85% 60% at 4% 26%, #000, transparent 74%);
	mask-image: radial-gradient(85% 60% at 4% 26%, #000, transparent 74%);
	animation: hpDawnBreath 7s ease-in-out infinite;
}
@keyframes hpDawnBreath {
	0%, 100% { filter: brightness(1); }
	50%      { filter: brightness(1.08); }
}

/* ---- 夕: 沈む夕陽の玉 + 茜の帯雲 + 上空の桃紫 ---- */
.hp-rondo-sunset {
	opacity: var(--sky-dusk, 0);
	background:
		radial-gradient(140% 52% at 50% 80%, rgba(255, 176, 80, .32), transparent 70%),
		radial-gradient(90% 34% at 70% 58%, rgba(255, 208, 130, .22), transparent 72%),
		linear-gradient(180deg,
			rgba(70, 40, 92, .34) 0%,
			rgba(140, 48, 60, .28) 26%,
			rgba(196, 84, 48, .24) 50%,
			rgba(255, 140, 60, .2) 72%,
			rgba(255, 190, 110, .16) 100%);
}
@keyframes hpSunsetGlow {
	0%, 100% { filter: brightness(1); }
	50%      { filter: brightness(1.04); }
}

@media (prefers-reduced-motion: reduce) {
	.hp-rondo-clouds i,
	.hp-rondo-dawnrays,
	.hp-rondo-sunset { animation: none; }
}

/* =========================================================
   空演出v6（2026-07-22）: 繊細な光の粒と小鳥
   （星空と同じ「小さく・淡く・きらめく」路線。大きな形は置かない）
   ========================================================= */

/* ---- 光の粒: 共通 ---- */
.hp-rondo-glints::before,
.hp-rondo-glints::after {
	content: '';
	position: absolute;
	inset: 0;
}

/* ---- 昼: 空気のきらめき（ごく小さな白い光点がちらちら） ---- */
.hp-rondo-glints--day { opacity: calc(var(--sky-day, 0) * .85 * (1 - var(--sky-dusk, 0))); }
.hp-rondo-glints--day::before {
	background-image:
		radial-gradient(circle 1.2px at 9% 14%,  rgba(255, 255, 255, .8) 55%, transparent 62%),
		radial-gradient(circle 1px   at 22% 30%, rgba(255, 255, 255, .6) 55%, transparent 62%),
		radial-gradient(circle 1.4px at 37% 10%, rgba(255, 255, 255, .75) 55%, transparent 62%),
		radial-gradient(circle 1px   at 55% 24%, rgba(255, 255, 255, .55) 55%, transparent 62%),
		radial-gradient(circle 1.2px at 71% 15%, rgba(255, 255, 255, .7) 55%, transparent 62%),
		radial-gradient(circle 1px   at 88% 27%, rgba(255, 255, 255, .55) 55%, transparent 62%),
		radial-gradient(circle 1.2px at 15% 46%, rgba(255, 255, 255, .55) 55%, transparent 62%),
		radial-gradient(circle 1px   at 47% 41%, rgba(255, 255, 255, .5) 55%, transparent 62%),
		radial-gradient(circle 1.2px at 80% 44%, rgba(255, 255, 255, .55) 55%, transparent 62%);
	animation: hpGlintTwinkle 4.6s ease-in-out infinite;
}
.hp-rondo-glints--day::after {
	background-image:
		radial-gradient(circle 1px   at 30% 20%, rgba(255, 255, 255, .6) 55%, transparent 62%),
		radial-gradient(circle 1.2px at 63% 8%,  rgba(255, 255, 255, .7) 55%, transparent 62%),
		radial-gradient(circle 1px   at 93% 12%, rgba(255, 255, 255, .55) 55%, transparent 62%),
		radial-gradient(circle 1.2px at 5% 33%,  rgba(255, 255, 255, .6) 55%, transparent 62%),
		radial-gradient(circle 1px   at 40% 55%, rgba(255, 255, 255, .45) 55%, transparent 62%),
		radial-gradient(circle 1.2px at 68% 50%, rgba(255, 255, 255, .5) 55%, transparent 62%),
		radial-gradient(circle 1px   at 92% 58%, rgba(255, 255, 255, .45) 55%, transparent 62%);
	animation: hpGlintTwinkle 3.8s ease-in-out -1.9s infinite;
}

@keyframes hpGlintTwinkle {
	0%, 100% { opacity: .9; }
	50%      { opacity: .25; }
}

/* ---- 朝: 立ちのぼる金色の光の粒 ---- */
.hp-rondo-glints--dawn { opacity: var(--sky-dawn, 0); }
.hp-rondo-glints--dawn::before {
	background-image:
		radial-gradient(circle 1.6px at 8% 30%,  rgba(255, 226, 168, .85) 55%, transparent 62%),
		radial-gradient(circle 1.2px at 18% 52%, rgba(255, 236, 190, .7) 55%, transparent 62%),
		radial-gradient(circle 1.8px at 27% 22%, rgba(255, 214, 140, .8) 55%, transparent 62%),
		radial-gradient(circle 1.2px at 38% 44%, rgba(255, 236, 190, .65) 55%, transparent 62%),
		radial-gradient(circle 1.6px at 12% 70%, rgba(255, 226, 168, .6) 55%, transparent 62%),
		radial-gradient(circle 1.2px at 31% 64%, rgba(255, 236, 190, .55) 55%, transparent 62%);
	animation: hpMoteRise 9s ease-in-out infinite;
}
.hp-rondo-glints--dawn::after {
	background-image:
		radial-gradient(circle 1.2px at 15% 40%, rgba(255, 236, 190, .7) 55%, transparent 62%),
		radial-gradient(circle 1.6px at 23% 58%, rgba(255, 226, 168, .65) 55%, transparent 62%),
		radial-gradient(circle 1.2px at 35% 32%, rgba(255, 236, 190, .6) 55%, transparent 62%),
		radial-gradient(circle 1.4px at 6% 55%,  rgba(255, 226, 168, .6) 55%, transparent 62%);
	animation: hpMoteRise 11s ease-in-out -5s infinite;
}

@keyframes hpMoteRise {
	0%   { translate: 0 14px; opacity: 0; }
	25%  { opacity: 1; }
	75%  { opacity: .6; }
	100% { translate: 0 -22px; opacity: 0; }
}

/* ---- 夕: 残照のきらめき（低い空に金の熾がまたたく） ---- */
.hp-rondo-glints--dusk { opacity: var(--sky-dusk, 0); }
.hp-rondo-glints--dusk::before {
	background-image:
		radial-gradient(circle 1.6px at 14% 56%, rgba(255, 196, 120, .85) 55%, transparent 62%),
		radial-gradient(circle 1.2px at 30% 66%, rgba(255, 214, 150, .7) 55%, transparent 62%),
		radial-gradient(circle 1.8px at 52% 60%, rgba(255, 186, 100, .75) 55%, transparent 62%),
		radial-gradient(circle 1.2px at 70% 70%, rgba(255, 214, 150, .65) 55%, transparent 62%),
		radial-gradient(circle 1.6px at 88% 62%, rgba(255, 196, 120, .7) 55%, transparent 62%),
		radial-gradient(circle 1.2px at 44% 76%, rgba(255, 214, 150, .55) 55%, transparent 62%);
	animation: hpGlintTwinkle 5.2s ease-in-out infinite;
}
.hp-rondo-glints--dusk::after {
	background-image:
		radial-gradient(circle 1.2px at 22% 74%, rgba(255, 214, 150, .6) 55%, transparent 62%),
		radial-gradient(circle 1.6px at 62% 68%, rgba(255, 196, 120, .6) 55%, transparent 62%),
		radial-gradient(circle 1.2px at 80% 78%, rgba(255, 214, 150, .55) 55%, transparent 62%),
		radial-gradient(circle 1.4px at 8% 68%,  rgba(255, 196, 120, .55) 55%, transparent 62%);
	animation: hpGlintTwinkle 4.4s ease-in-out -2.2s infinite;
}

@media (prefers-reduced-motion: reduce) {
	.hp-rondo-glints::before,
	.hp-rondo-glints::after { animation: none; }
}

/* =========================================================
   空演出v6.1: ✦のきらめき（はっきり見えるサイズ+光の暈）
   ========================================================= */
.hp-rondo-glints i {
	position: absolute;
	font-style: normal;
	animation: hpGlintStar 3.4s ease-in-out infinite;
}
@keyframes hpGlintStar {
	0%, 100% { opacity: 1; scale: 1; }
	50%      { opacity: .3; scale: .72; }
}

/* 昼: 白いきらめき（淡い空でも見えるよう青の暈で縁取る） */
.hp-rondo-glints--day i {
	color: #fff;
	text-shadow: 0 0 5px rgba(96, 150, 205, .95), 0 0 14px rgba(255, 255, 255, .9), 0 0 26px rgba(140, 190, 235, .6);
}
.hp-rondo-glints--day i:nth-child(1) { left: 7%;  top: 40%; font-size: 15px; }
.hp-rondo-glints--day i:nth-child(2) { left: 58%; top: 45%; font-size: 12px; animation-delay: -1.1s; }
.hp-rondo-glints--day i:nth-child(3) { left: 92%; top: 36%; font-size: 13px; animation-delay: -2.2s; }
.hp-rondo-glints--day i:nth-child(4) { left: 85%; top: 62%; font-size: 16px; animation-delay: -.6s; }
.hp-rondo-glints--day i:nth-child(5) { left: 40%; top: 70%; font-size: 11px; animation-delay: -2.8s; }
.hp-rondo-glints--day i:nth-child(6) { left: 13%; top: 56%; font-size: 12px; animation-delay: -1.7s; }

/* 朝: 金色のきらめき */
.hp-rondo-glints--dawn i {
	color: #ffe9bd;
	text-shadow: 0 0 5px rgba(214, 148, 40, .95), 0 0 14px rgba(255, 226, 168, .9), 0 0 26px rgba(255, 200, 110, .55);
}
.hp-rondo-glints--dawn i:nth-child(1) { left: 7%;  top: 40%; font-size: 15px; }
.hp-rondo-glints--dawn i:nth-child(2) { left: 58%; top: 45%; font-size: 12px; animation-delay: -1.1s; }
.hp-rondo-glints--dawn i:nth-child(3) { left: 92%; top: 36%; font-size: 13px; animation-delay: -2.2s; }
.hp-rondo-glints--dawn i:nth-child(4) { left: 85%; top: 62%; font-size: 16px; animation-delay: -.6s; }
.hp-rondo-glints--dawn i:nth-child(5) { left: 40%; top: 70%; font-size: 11px; animation-delay: -2.8s; }
.hp-rondo-glints--dawn i:nth-child(6) { left: 13%; top: 56%; font-size: 12px; animation-delay: -1.7s; }

/* 夕: 残照の金橙のきらめき */
.hp-rondo-glints--dusk i {
	color: #ffd694;
	text-shadow: 0 0 5px rgba(196, 92, 30, .95), 0 0 14px rgba(255, 196, 120, .9), 0 0 26px rgba(255, 160, 80, .55);
}
.hp-rondo-glints--dusk i:nth-child(1) { left: 7%;  top: 40%; font-size: 15px; }
.hp-rondo-glints--dusk i:nth-child(2) { left: 58%; top: 45%; font-size: 12px; animation-delay: -1.1s; }
.hp-rondo-glints--dusk i:nth-child(3) { left: 92%; top: 36%; font-size: 13px; animation-delay: -2.2s; }
.hp-rondo-glints--dusk i:nth-child(4) { left: 85%; top: 62%; font-size: 16px; animation-delay: -.6s; }
.hp-rondo-glints--dusk i:nth-child(5) { left: 40%; top: 70%; font-size: 11px; animation-delay: -2.8s; }
.hp-rondo-glints--dusk i:nth-child(6) { left: 13%; top: 56%; font-size: 12px; animation-delay: -1.7s; }

@media (max-width: 768px) {
	.hp-rondo-glints i { font-size: 11px !important; }
}
@media (prefers-reduced-motion: reduce) {
	.hp-rondo-glints i { animation: none; }
}