/* =========================================================
   Plumeria top redesign
   ========================================================= */

:root {
	--hp-serif: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
	--hp-roman: "Times New Roman", Georgia, serif;
	--hp-red: #b40000;
	--hp-red-2: #d80008;
	--hp-gold: #b9965b;
	--hp-ink: #181411;
	--hp-paper: #f5f2ed;
	--hp-line: rgba(95, 68, 44, .2);
}

body.home {
	background: var(--hp-paper);
	color: #1f1714;
	font-family: var(--hp-serif);
}

.hp-header {
	position: fixed;
	inset: 0 auto auto 0;
	z-index: 120;
	width: 96px;
	height: 100vh;
	background:
		linear-gradient(180deg, rgba(95,0,0,.98), rgba(156,0,0,.95));
	background-size: cover;
	border: 0;
	border-radius: 0;
	box-shadow: 18px 0 40px rgba(0,0,0,.24);
}

.hp-header::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(255,255,255,.06), transparent 45%),
		radial-gradient(circle at 50% 18%, rgba(255,255,255,.08), transparent 22%),
		radial-gradient(circle at 50% 86%, rgba(0,0,0,.18), transparent 34%);
	pointer-events: none;
}

.hp-header::after {
	content: none;
	display: none;
}

.hp-header__inner {
	position: relative;
	z-index: 1;
	min-height: 100%;
	padding: 28px 16px;
	flex-direction: column;
	align-items: center;
	gap: 32px;
}

.hp-header__logo {
	flex-direction: column;
	gap: 10px;
	color: #fff;
	text-align: center;
}

.hp-header__logo-mark,
.hp-header__logo-mark img {
	width: 50px;
	height: 50px;
	object-fit: contain;
}

.hp-header__catch {
	display: none;
}

.hp-header__site-name {
	color: #fff;
	font-family: var(--hp-roman);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: .16em;
}

.hp-header__nav {
	position: fixed;
	top: 28px;
	right: 172px;
	z-index: 130;
	margin: 0;
}

.hp-header__menu {
	display: flex;
	gap: 54px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hp-header__menu a {
	position: relative;
	display: block;
	min-width: 74px;
	padding: 8px 0 12px;
	color: rgba(255,255,255,.9);
	font-family: var(--hp-serif);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-decoration: none;
	text-align: center;
	text-shadow: 0 2px 18px rgba(0,0,0,.52);
}

.hp-header__menu a::before,
.hp-header__menu a::after {
	content: "";
	position: absolute;
	left: 50%;
	pointer-events: none;
	opacity: 0;
	transition: opacity .28s ease, transform .36s ease;
}

.hp-header__menu a::before {
	top: -10px;
	width: 104px;
	height: 58px;
	transform: translateX(-50%) scale(.72) rotate(-12deg);
	background:
		radial-gradient(circle at 18% 50%, rgba(236,196,116,.95) 0 2px, transparent 3px),
		radial-gradient(circle at 77% 22%, rgba(236,196,116,.85) 0 2px, transparent 3px),
		linear-gradient(32deg, transparent 0 49%, rgba(207,170,104,.55) 49.3% 50.1%, transparent 50.4% 100%),
		conic-gradient(from 18deg at 50% 50%, transparent 0 30deg, rgba(207,170,104,.7) 31deg 76deg, transparent 77deg 208deg, rgba(207,170,104,.5) 209deg 232deg, transparent 233deg 360deg);
	-webkit-mask: radial-gradient(ellipse at center, transparent 0 52%, #000 53% 58%, transparent 59% 100%);
	mask: radial-gradient(ellipse at center, transparent 0 52%, #000 53% 58%, transparent 59% 100%);
}

.hp-header__menu a::after {
	top: 8px;
	width: 76px;
	height: 44px;
	transform: translateX(-50%) scale(.72) rotate(45deg);
	background:
		linear-gradient(90deg, rgba(207,170,104,.8), rgba(207,170,104,.8)) top left / 100% 1px no-repeat,
		linear-gradient(90deg, rgba(207,170,104,.56), rgba(207,170,104,.56)) bottom left / 100% 1px no-repeat,
		linear-gradient(180deg, rgba(207,170,104,.74), rgba(207,170,104,.74)) top left / 1px 100% no-repeat,
		linear-gradient(180deg, rgba(207,170,104,.52), rgba(207,170,104,.52)) top right / 1px 100% no-repeat;
}

.hp-header__menu a:hover,
.hp-header__menu a:focus-visible {
	color: #fff;
}

.hp-header__menu a:hover::before,
.hp-header__menu a:focus-visible::before {
	opacity: 1;
	transform: translateX(-50%) scale(1) rotate(-12deg);
}

.hp-header__menu a:hover::after,
.hp-header__menu a:focus-visible::after {
	opacity: 1;
	transform: translateX(-50%) scale(1) rotate(45deg);
}

.hp-header__menu a span,
.hp-header__menu a small {
	position: relative;
	z-index: 1;
	display: block;
}

.hp-header__menu a span::before,
.hp-header__menu a span::after,
.hp-header__menu a small::before,
.hp-header__menu a small::after {
	content: "";
	position: absolute;
	left: 50%;
	pointer-events: none;
	opacity: 0;
	transition: opacity .28s ease, transform .36s ease;
}

.hp-header__menu a span::before {
	top: -17px;
	width: 118px;
	height: 1px;
	transform: translateX(-50%) scaleX(.25);
	background: linear-gradient(90deg, transparent, rgba(207,170,104,.84), transparent);
}

.hp-header__menu a span::after {
	top: -22px;
	width: 4px;
	height: 4px;
	transform: translateX(30px) scale(.3);
	border-radius: 50%;
	background: rgba(236,196,116,.95);
	box-shadow:
		-58px 19px 0 rgba(236,196,116,.78),
		-9px 44px 0 rgba(236,196,116,.72),
		0 0 12px rgba(236,196,116,.75);
}

.hp-header__menu a small::before {
	top: -4px;
	width: 92px;
	height: 30px;
	transform: translateX(-50%) scale(.7);
	background:
		linear-gradient(24deg, transparent 0 47%, rgba(207,170,104,.48) 47.5% 48.5%, transparent 49% 100%),
		linear-gradient(156deg, transparent 0 54%, rgba(207,170,104,.42) 54.5% 55.5%, transparent 56% 100%);
}

.hp-header__menu a small::after {
	top: 18px;
	width: 64px;
	height: 1px;
	transform: translateX(-50%) scaleX(.18);
	background: linear-gradient(90deg, transparent, rgba(236,196,116,.9), transparent);
	box-shadow: 0 0 8px rgba(236,196,116,.42);
}

.hp-header__menu a:hover span::before,
.hp-header__menu a:hover span::after,
.hp-header__menu a:hover small::before,
.hp-header__menu a:hover small::after,
.hp-header__menu a:focus-visible span::before,
.hp-header__menu a:focus-visible span::after,
.hp-header__menu a:focus-visible small::before,
.hp-header__menu a:focus-visible small::after {
	opacity: 1;
}

.hp-header__menu a:hover span::before,
.hp-header__menu a:focus-visible span::before,
.hp-header__menu a:hover small::after,
.hp-header__menu a:focus-visible small::after {
	transform: translateX(-50%) scaleX(1);
}

.hp-header__menu a:hover span::after,
.hp-header__menu a:focus-visible span::after {
	transform: translateX(30px) scale(1);
}

.hp-header__menu a:hover small::before,
.hp-header__menu a:focus-visible small::before {
	transform: translateX(-50%) scale(1);
}

.hp-header__menu a small {
	margin-top: 7px;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .08em;
	opacity: .86;
}

.hp-header__contact {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 132;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 132px;
	height: 118px;
	padding: 0;
	gap: 9px;
	background: #b90000;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: #fff;
	font-family: var(--hp-serif);
	font-size: 12px;
	letter-spacing: .06em;
}

.hp-header__contact-icon {
	font-size: 25px;
	line-height: 1;
}

.hp-header__burger {
	display: none;
}

.hp-home--redesign {
	background:
		radial-gradient(circle at 12% 12%, rgba(178,0,0,.08), transparent 30%),
		var(--hp-paper);
	overflow: hidden;
}

.hp-story-hero {
	position: relative;
	min-height: 100vh;
	overflow: hidden;
	background: #0f0d0c;
}

.hp-story-hero__media,
.hp-story-hero__video,
.hp-story-hero__shade {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.hp-story-hero__video {
	display: block;
	object-fit: cover;
	object-position: center 46%;
	transform: none;
	filter: brightness(1.06) saturate(1.03);
}

.hp-story-hero__shade {
	z-index: 1;
	background:
		linear-gradient(90deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.25) 38%, rgba(0,0,0,.16) 68%, rgba(0,0,0,.42) 100%),
		linear-gradient(180deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.08) 42%, rgba(0,0,0,.66) 100%);
}

.hp-story-hero__shade::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 21%;
	background: linear-gradient(90deg, rgba(154,0,0,.5), rgba(154,0,0,.07), transparent);
}

.hp-story-hero__shade::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 38%;
	background: linear-gradient(180deg, transparent, rgba(0,0,0,.42));
}

.hp-hero-orbit {
	position: absolute;
	z-index: 2;
	pointer-events: none;
	border: 1px solid rgba(185,150,91,.32);
	border-radius: 50%;
	filter: drop-shadow(0 0 8px rgba(185,150,91,.16));
}

.hp-hero-orbit::before,
.hp-hero-orbit::after {
	content: "";
	position: absolute;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: rgba(236,196,116,.92);
	box-shadow: 0 0 12px rgba(236,196,116,.78);
}

.hp-hero-orbit::before {
	top: 14%;
	left: 18%;
}

.hp-hero-orbit::after {
	right: 10%;
	bottom: 28%;
}

.hp-hero-orbit--large {
	right: -86px;
	top: 76px;
	width: 500px;
	height: 500px;
}

.hp-hero-orbit--small {
	right: 104px;
	top: 248px;
	width: 178px;
	height: 178px;
	border-color: rgba(185,150,91,.45);
}

.hp-story-hero__content {
	position: relative;
	z-index: 3;
	width: min(620px, 48vw);
	min-height: 100vh;
	margin-left: clamp(136px, 11.6vw, 186px);
	padding-top: clamp(148px, 17vh, 202px);
	padding-bottom: 280px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.hp-story-hero__eyebrow {
	margin: 0 0 26px;
	color: rgba(255,255,255,.86);
	font-family: var(--hp-roman);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: .22em;
}

.hp-story-hero__title {
	margin: 0;
	color: #fff;
	font-family: var(--hp-roman);
	font-size: clamp(76px, 7.4vw, 122px);
	font-weight: 400;
	line-height: .88;
	letter-spacing: -.035em;
	text-shadow: 0 12px 34px rgba(0,0,0,.42);
}

.hp-story-hero__title span {
	display: block;
}

.hp-story-hero__title span + span {
	color: #e00008;
	text-shadow: 0 8px 30px rgba(158,0,0,.34);
}

.hp-story-hero__lead {
	margin: 32px 0 28px;
	color: #fff;
	font-family: var(--hp-serif);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.9;
	letter-spacing: .07em;
}

.hp-story-hero__note {
	position: relative;
	margin: 0;
	padding-top: 28px;
	color: rgba(255,255,255,.78);
	font-family: var(--hp-serif);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .05em;
}

.hp-story-hero__note::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 70px;
	border-top: 1px solid rgba(255,255,255,.42);
}

.hp-hero-message {
	position: absolute;
	right: clamp(88px, 10vw, 150px);
	top: clamp(230px, 32vh, 318px);
	z-index: 3;
	display: grid;
	place-items: center;
	width: 188px;
	height: 188px;
	border: 1px solid rgba(207,170,104,.78);
	border-radius: 50%;
	background:
		linear-gradient(135deg, rgba(207,170,104,.16), transparent 42%),
		radial-gradient(circle at 50% 50%, rgba(0,0,0,.26), rgba(0,0,0,.08) 68%, transparent 69%);
	color: #fff;
	text-align: center;
	box-shadow:
		inset 0 0 0 1px rgba(255,255,255,.08),
		0 0 26px rgba(185,150,91,.12);
}

.hp-hero-message::before,
.hp-hero-message::after {
	content: "";
	position: absolute;
	pointer-events: none;
}

.hp-hero-message::before {
	inset: -38px;
	border: 1px solid rgba(207,170,104,.18);
	transform: rotate(18deg);
	background:
		linear-gradient(90deg, rgba(207,170,104,.56), rgba(207,170,104,.56)) 50% 0 / 64px 1px no-repeat,
		linear-gradient(90deg, rgba(207,170,104,.44), rgba(207,170,104,.44)) 50% 100% / 64px 1px no-repeat,
		linear-gradient(180deg, rgba(207,170,104,.5), rgba(207,170,104,.5)) 0 50% / 1px 64px no-repeat,
		linear-gradient(180deg, rgba(207,170,104,.42), rgba(207,170,104,.42)) 100% 50% / 1px 64px no-repeat,
		linear-gradient(38deg, transparent 0 49.6%, rgba(207,170,104,.34) 49.8% 50.2%, transparent 50.4% 100%),
		linear-gradient(142deg, transparent 0 49.6%, rgba(207,170,104,.26) 49.8% 50.2%, transparent 50.4% 100%);
	box-shadow: 0 0 28px rgba(185,150,91,.08);
}

.hp-hero-message::after {
	inset: -58px;
	border-radius: 50%;
	background:
		radial-gradient(circle at 20% 34%, rgba(236,196,116,.96) 0 2px, transparent 3px),
		radial-gradient(circle at 76% 18%, rgba(236,196,116,.78) 0 2px, transparent 3px),
		radial-gradient(circle at 88% 66%, rgba(236,196,116,.86) 0 2px, transparent 3px),
		radial-gradient(circle at 33% 83%, rgba(236,196,116,.62) 0 1.5px, transparent 3px),
		conic-gradient(from 308deg, transparent 0 26deg, rgba(207,170,104,.55) 27deg 36deg, transparent 37deg 118deg, rgba(207,170,104,.36) 119deg 127deg, transparent 128deg 360deg);
	-webkit-mask: radial-gradient(circle, transparent 0 57%, #000 58% 60%, transparent 61% 100%);
	mask: radial-gradient(circle, transparent 0 57%, #000 58% 60%, transparent 61% 100%);
	opacity: .96;
}

.hp-hero-message p {
	position: relative;
	z-index: 1;
	margin: 0;
	font-size: 15px;
	font-weight: 500;
	line-height: 2.12;
	letter-spacing: .06em;
	text-shadow: 0 2px 16px rgba(0,0,0,.7);
}

.hp-hero-message p::before,
.hp-hero-message p::after {
	content: "";
	position: absolute;
	left: 50%;
	pointer-events: none;
}

.hp-hero-message p::before {
	top: 50%;
	width: 235px;
	height: 1px;
	transform: translate(-50%, -50%) rotate(19deg);
	background: linear-gradient(90deg, transparent, rgba(207,170,104,.42), transparent);
}

.hp-hero-message p::after {
	top: 50%;
	width: 92px;
	height: 92px;
	transform: translate(-50%, -50%) rotate(45deg);
	border: 1px solid rgba(207,170,104,.22);
}

.hp-story-hero > .hp-age-story {
	position: absolute;
	left: clamp(126px, 9.4vw, 154px);
	right: clamp(30px, 3.2vw, 52px);
	bottom: clamp(40px, 6.2vh, 70px);
	z-index: 4;
	width: auto;
	max-width: none;
	height: 174px;
	margin: 0;
	padding-right: 118px;
	background: transparent;
	border: 0;
	box-shadow: none;
}

.hp-story-hero > .hp-age-story::before,
.hp-story-hero > .hp-age-story::after {
	display: none;
	content: none;
}

.hp-story-hero > .hp-age-story .hp-age-story__line {
	position: relative;
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	height: 96px;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: visible;
}

.hp-story-hero > .hp-age-story .hp-age-story__line::before,
.hp-story-hero > .hp-age-story .hp-age-story__line::after {
	content: "";
	position: absolute;
	top: 49px;
	left: calc(100% / 12);
	pointer-events: none;
}

.hp-story-hero > .hp-age-story .hp-age-story__line::before {
	right: calc(100% / 12);
	height: 1px;
	background:
		linear-gradient(90deg, rgba(185,150,91,0), rgba(228,205,160,.68) 9%, rgba(255,255,255,.76) 50%, rgba(228,205,160,.68) 91%, rgba(185,150,91,0));
	box-shadow:
		0 1px 0 rgba(0,0,0,.52),
		0 0 11px rgba(255,255,255,.14);
}

.hp-story-hero > .hp-age-story .hp-age-story__line::after {
	width: calc((100% - (100% / 6)) * var(--active-ratio, 0));
	height: 2px;
	margin-top: -1px;
	background: linear-gradient(90deg, rgba(165,0,5,0), rgba(207,0,8,.48) 25%, rgba(255,45,54,.96) 100%);
	box-shadow:
		0 0 5px rgba(255,45,54,.75),
		0 0 15px rgba(207,0,8,.62),
		0 0 34px rgba(207,0,8,.34);
}

.hp-story-hero > .hp-age-story .hp-age-story__item,
.hp-story-hero > .hp-age-story .hp-age-story__btn {
	position: relative;
	min-width: 0;
	width: 100%;
	height: 96px;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
}

.hp-story-hero > .hp-age-story .hp-age-story__item::before,
.hp-story-hero > .hp-age-story .hp-age-story__item::after,
.hp-story-hero > .hp-age-story .hp-age-story__btn::before,
.hp-story-hero > .hp-age-story .hp-age-story__btn::after {
	display: none;
	content: none;
}

.hp-story-hero > .hp-age-story .hp-age-story__dot {
	position: absolute;
	top: 49px;
	left: 50%;
	z-index: 3;
	width: 7px;
	height: 7px;
	margin: -3.5px 0 0 -3.5px;
	/* 白い芯は元のバランス（約28%）。面は広げず、光だけ強く発光させる */
	background: radial-gradient(circle, #fff 0 28%, rgba(255,255,255,.38) 52%, rgba(255,255,255,0) 100%);
	border: 0;
	border-radius: 50%;
	box-shadow:
		0 0 4px #fff,
		0 0 11px rgba(255,255,255,.98),
		0 0 20px rgba(255,255,255,.7),
		0 0 32px rgba(255,255,255,.4);
	/* main.css 側の translateX(-50%) を打ち消す（中央寄せは margin に統一）。
	   二重補正で点が左に半幅ずれる問題の解消 */
	transform: none;
	transition: all .24s ease;
}

.hp-story-hero > .hp-age-story .hp-age-story__item.is-active .hp-age-story__dot {
	width: 25px;
	height: 25px;
	margin: -12.5px 0 0 -12.5px;
	background: radial-gradient(circle, #fff 0 20%, #ff3f48 22% 52%, #b90008 54% 100%);
	border: 3px solid #fff;
	box-shadow:
		0 0 0 1px rgba(143,0,4,.9),
		0 0 9px rgba(255,56,64,.95),
		0 0 25px rgba(216,0,8,.68);
}

.hp-story-hero > .hp-age-story .hp-age-story__item.is-active .hp-age-story__dot::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: -1;
	width: 158px;
	height: 3px;
	transform: translate(-50%, -50%);
	background: linear-gradient(90deg, rgba(210,0,8,0), rgba(255,36,45,.92) 50%, rgba(210,0,8,0));
	filter: blur(.2px);
	box-shadow:
		0 0 9px rgba(255,36,45,.9),
		0 0 24px rgba(210,0,8,.55);
	pointer-events: none;
}

.hp-story-hero > .hp-age-story .hp-age-story__item.is-active .hp-age-story__dot::after {
	content: "";
	position: absolute;
	inset: -15px;
	z-index: -2;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255,34,42,.42), rgba(255,34,42,0) 68%);
	pointer-events: none;
}

.hp-story-hero > .hp-age-story .hp-age-story__label {
	position: absolute;
	top: 77px;
	left: 50%;
	transform: translateX(-50%);
	display: block;
	width: 96px;
	color: rgba(255,255,255,.86);
	font-family: var(--hp-serif);
	font-size: 19px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: .02em;
	text-align: center;
	text-shadow: 0 2px 14px rgba(0,0,0,.56);
	white-space: nowrap;
}

.hp-story-hero > .hp-age-story .hp-age-story__en {
	position: absolute;
	top: 103px;
	left: 50%;
	transform: translateX(-50%);
	width: 96px;
	color: var(--hp-gold);
	font-family: var(--hp-roman);
	font-size: 7px;
	letter-spacing: .18em;
	line-height: 1;
	text-align: center;
	white-space: nowrap;
}

.hp-story-hero > .hp-age-story .hp-age-story__item.is-active .hp-age-story__label,
.hp-story-hero > .hp-age-story .hp-age-story__item.is-active .hp-age-story__en,
.hp-story-hero > .hp-age-story .hp-age-story__class {
	display: none;
}

.hp-story-hero > .hp-age-story .hp-age-story__active-label {
	position: absolute;
	top: 6px;
	left: var(--active-x, 50%);
	z-index: 4;
	transform: translateX(-50%);
	width: 96px;
	color: #fff;
	font-family: var(--hp-serif);
	font-size: 24px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: .03em;
	text-align: center;
	text-shadow: 0 3px 22px rgba(0,0,0,.54);
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .28s ease;
}

.hp-story-hero > .hp-age-story .hp-age-story__active-label::before {
	content: "SELECT AGE";
	position: absolute;
	left: 50%;
	bottom: calc(100% + 8px);
	transform: translateX(-50%);
	color: rgba(255,255,255,.78);
	font-family: var(--hp-roman);
	font-size: 8px;
	letter-spacing: .16em;
	white-space: nowrap;
}

.hp-story-hero > .hp-age-story .hp-age-story__active-label.is-show {
	opacity: 1;
}

.hp-story-hero > .hp-age-story .hp-age-story__pause {
	position: absolute;
	top: 14px;
	right: 0;
	z-index: 5;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 78px;
	height: 78px;
	padding: 0;
	color: #fff;
	background: rgba(0,0,0,.08);
	border: 1px solid rgba(255,255,255,.66);
	border-radius: 50%;
	box-shadow:
		0 8px 30px rgba(0,0,0,.24),
		inset 0 0 0 1px rgba(185,150,91,.24);
	cursor: pointer;
}

.hp-story-hero > .hp-age-story .hp-age-story__pause-icon {
	display: inline-flex;
	gap: 5px;
}

.hp-story-hero > .hp-age-story .hp-age-story__pause-icon span {
	display: block;
	width: 3px;
	height: 15px;
	background: #fff;
	border-radius: 2px;
}

.hp-story-hero > .hp-age-story .hp-age-story__pause-text {
	color: rgba(255,255,255,.78);
	font-family: var(--hp-roman);
	font-size: 8px;
	line-height: 1;
	letter-spacing: .08em;
}

.hp-story-hero > .hp-age-story .hp-age-story__pause[data-state="pause"] .hp-age-story__pause-icon {
	width: 0;
	height: 0;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-left: 13px solid #fff;
}

.hp-story-hero > .hp-age-story .hp-age-story__pause[data-state="pause"] .hp-age-story__pause-icon span {
	display: none;
}

.hp-story-hero > .hp-age-story .hp-age-story__summary {
	position: absolute;
	top: 120px;
	left: var(--active-x, 50%);
	z-index: 4;
	width: 360px;
	max-width: min(360px, calc(100vw - 54px));
	margin: 0;
	transform: translateX(-50%);
	color: #fff;
	text-align: center;
	text-shadow: 0 2px 18px rgba(0,0,0,.58);
	opacity: 0;
	transition: opacity .28s ease;
}

.hp-story-hero > .hp-age-story .hp-age-story__summary.is-show {
	opacity: 1;
}

.hp-story-hero > .hp-age-story .hp-age-story__age {
	display: none;
}

.hp-story-hero > .hp-age-story .hp-age-story__summary h2 {
	margin: 0 0 10px;
	color: #fff;
	font-family: var(--hp-serif);
	font-size: 22px;
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: .06em;
}

.hp-story-hero > .hp-age-story .hp-age-story__summary p:last-child {
	margin: 0;
	color: rgba(255,255,255,.86);
	font-family: var(--hp-serif);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.9;
	letter-spacing: .03em;
}

.hp-redesign-section {
	position: relative;
	padding: clamp(74px, 7vw, 104px) 0;
	background: var(--hp-paper);
	border-top: 1px solid rgba(122, 90, 55, .18);
}

.hp-redesign-container {
	width: min(1180px, calc(100% - 88px));
	margin: 0 auto;
}

.hp-story-kicker {
	margin: 0 0 18px;
	color: var(--hp-red);
	font-family: var(--hp-roman);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .18em;
}

.hp-overview {
	position: relative;
	padding: 34px 0 38px;
	background:
		linear-gradient(90deg, rgba(255,255,255,.82), rgba(255,255,255,.48)),
		var(--hp-paper);
	border-top: 1px solid rgba(185,150,91,.25);
	border-bottom: 1px solid rgba(122,90,55,.16);
}

.hp-overview::before,
.hp-overview::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 1px;
	background: rgba(185,150,91,.28);
}

.hp-overview::before {
	left: 96px;
}

.hp-overview::after {
	right: 24px;
}

.hp-overview__inner {
	display: grid;
	grid-template-columns: 310px 1fr;
	gap: 58px;
	align-items: center;
}

.hp-overview__copy h2 {
	margin: 0;
	font-size: 24px;
	font-weight: 500;
	line-height: 1.7;
	letter-spacing: .04em;
}

.hp-overview__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border-left: 1px solid rgba(122,90,55,.18);
}

.hp-overview__item {
	min-height: 122px;
	padding: 8px 28px 8px 30px;
	border-right: 1px solid rgba(122,90,55,.18);
}

.hp-overview__item strong {
	display: block;
	margin-bottom: 10px;
	color: var(--hp-red);
	font-family: var(--hp-roman);
	font-size: 42px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: .02em;
}

.hp-overview__item span {
	display: block;
	margin-bottom: 9px;
	color: #1f1714;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .06em;
}

.hp-overview__item p {
	margin: 0;
	color: rgba(31,23,20,.66);
	font-size: 12px;
	line-height: 1.8;
}

.hp-section-copy h2,
.hp-redesign-head h2 {
	margin: 0 0 24px;
	font-family: var(--hp-serif);
	font-size: clamp(28px, 2.7vw, 40px);
	font-weight: 500;
	line-height: 1.55;
	letter-spacing: .05em;
}

.hp-section-copy p,
.hp-redesign-head p {
	margin: 0;
	color: rgba(31,23,20,.78);
	font-size: 14px;
	line-height: 2.2;
}

.hp-strengths__grid {
	display: grid;
	grid-template-columns: 310px 1fr;
	gap: 58px;
	align-items: stretch;
}

.hp-strengths__cards {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	border: 1px solid rgba(122,90,55,.2);
	background:
		linear-gradient(180deg, rgba(255,255,255,.66), rgba(255,255,255,.28));
	box-shadow: 0 18px 45px rgba(52,37,25,.06);
}

.hp-strength-card {
	position: relative;
	min-height: 278px;
	padding: 38px 24px 34px;
	text-align: center;
	border-right: 1px solid rgba(122,90,55,.18);
	background: linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,0));
	transition: transform .24s ease, box-shadow .24s ease, background .24s ease;
}

.hp-strength-card::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 26px;
	width: 28px;
	height: 2px;
	transform: translateX(-50%);
	background: var(--hp-red);
	opacity: .75;
}

.hp-strength-card:hover {
	transform: translateY(-4px);
	background: rgba(255,255,255,.76);
	box-shadow: 0 18px 36px rgba(52,37,25,.1);
}

.hp-strength-card:last-child {
	border-right: 0;
}

.hp-strength-card__icon {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin: 0 auto 22px;
	color: var(--hp-red);
	font-family: var(--hp-roman);
	font-size: 18px;
	border: 1px solid rgba(180,0,0,.5);
	border-radius: 50%;
	background: rgba(255,255,255,.42);
}

.hp-strength-card span {
	display: block;
	margin-bottom: 12px;
	font-family: var(--hp-roman);
	font-size: 13px;
}

.hp-strength-card h3 {
	margin: 0 0 18px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.8;
}

.hp-strength-card p {
	margin: 0;
	color: rgba(31,23,20,.74);
	font-size: 12px;
	line-height: 2;
	padding-bottom: 24px;
}

.hp-redesign-head {
	display: flex;
	justify-content: space-between;
	gap: 32px;
	margin-bottom: 36px;
}

.hp-story-link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--hp-red);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.hp-facility-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
}

.hp-facility-card {
	position: relative;
	overflow: hidden;
	background: #fff;
	border: 1px solid rgba(122,90,55,.22);
	box-shadow: 0 14px 34px rgba(52,37,25,.09);
	transition: transform .24s ease, box-shadow .24s ease;
}

.hp-facility-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 24px 48px rgba(52,37,25,.14);
}

.hp-facility-card img {
	display: block;
	width: 100%;
	aspect-ratio: 1.34;
	object-fit: cover;
	transition: transform .38s ease;
}

.hp-facility-card:hover img {
	transform: scale(1.045);
}

.hp-facility-card div {
	padding: 24px 22px 28px;
}

.hp-facility-card h3 {
	margin: 0 0 5px;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: .04em;
}

.hp-facility-card span {
	display: block;
	margin-bottom: 18px;
	color: var(--hp-red);
	font-family: var(--hp-roman);
	font-size: 10px;
	letter-spacing: .18em;
}

.hp-facility-card p {
	margin: 0 0 24px;
	color: rgba(31,23,20,.72);
	font-size: 13px;
	line-height: 2;
}

.hp-facility-card a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--hp-red);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

.hp-photo-strip {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	background: #0f0d0c;
	border-top: 1px solid rgba(122,90,55,.18);
	border-bottom: 1px solid rgba(122,90,55,.18);
}

.hp-photo-strip img {
	display: block;
	width: 100%;
	aspect-ratio: 1.35;
	object-fit: cover;
	filter: saturate(.96) contrast(1.02);
}

.hp-photo-strip__link {
	position: relative;
	display: block;
	color: #fff;
	text-decoration: none;
	overflow: hidden;
}

.hp-photo-strip__link::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent, rgba(0,0,0,.72));
}

.hp-photo-strip__link span {
	position: absolute;
	right: 24px;
	bottom: 24px;
	z-index: 2;
	font-size: 14px;
	letter-spacing: .05em;
}

.hp-news-cta__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(360px, .95fr);
	gap: 48px;
	align-items: stretch;
}

.hp-news-panel {
	display: grid;
	grid-template-columns: 190px 1fr;
	gap: 36px;
	align-items: stretch;
}

.hp-news-panel__title {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 36px 26px;
	border: 1px solid rgba(122,90,55,.24);
	background:
		linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.22));
}

.hp-news-panel__title h2 {
	margin: 0 0 34px;
	color: var(--hp-red);
	font-family: var(--hp-roman);
	font-size: 42px;
	font-weight: 400;
	letter-spacing: .08em;
}

.hp-news-panel__title a,
.hp-news-row {
	color: #1f1714;
	text-decoration: none;
}

.hp-news-row {
	display: grid;
	grid-template-columns: 112px 48px 1fr 24px;
	gap: 18px;
	align-items: center;
	min-height: 62px;
	padding: 18px 0;
	border-bottom: 1px solid rgba(122,90,55,.2);
	font-size: 13px;
	transition: color .2s ease, border-color .2s ease;
}

.hp-news-row:hover {
	color: var(--hp-red);
	border-color: rgba(180,0,0,.32);
}

.hp-news-row em {
	display: inline-grid;
	place-items: center;
	height: 20px;
	color: var(--hp-red);
	font-family: var(--hp-roman);
	font-size: 10px;
	font-style: normal;
	border: 1px solid rgba(180,0,0,.35);
}

.hp-news-row i {
	color: var(--hp-red);
	font-style: normal;
	text-align: right;
}

.hp-red-cta {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 260px;
	padding: 48px 56px;
	color: #fff;
	background:
		linear-gradient(135deg, rgba(112,0,0,.96), rgba(190,0,0,.9)),
		url("../images/cta-texture.jpg");
	background-size: cover;
	background-position: center;
	box-shadow: 0 18px 46px rgba(88,0,0,.22);
	clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%);
}

.hp-red-cta::before {
	content: "";
	position: absolute;
	inset: 16px 28px;
	border: 1px solid rgba(255,255,255,.22);
	pointer-events: none;
}

.hp-red-cta h2 {
	margin: 0 0 18px;
	font-size: 30px;
	font-weight: 500;
	letter-spacing: .04em;
	position: relative;
	z-index: 1;
}

.hp-red-cta p {
	margin: 0 0 28px;
	font-size: 13px;
	line-height: 2;
	position: relative;
	z-index: 1;
}

.hp-red-cta a {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	width: min(100%, 360px);
	padding: 18px 24px;
	color: #fff;
	text-decoration: none;
	border: 1px solid rgba(255,255,255,.5);
	background: rgba(0,0,0,.08);
	transition: background .2s ease, border-color .2s ease;
}

.hp-red-cta a:hover {
	background: rgba(255,255,255,.12);
	border-color: rgba(255,255,255,.78);
}

.hp-footer {
	position: relative;
	padding: 58px 0;
	background: #12100f;
	color: rgba(255,255,255,.78);
	border-top: 1px solid rgba(185,150,91,.2);
}

.hp-footer__inner {
	width: min(1180px, calc(100% - 88px));
	margin: 0 auto;
	padding: 0;
}

.hp-footer__copy {
	font-family: var(--hp-roman);
	letter-spacing: .08em;
}

@media (max-width: 900px) {
	.hp-header {
		width: 100%;
		height: 66px;
		background: rgba(18,14,12,.62);
	}

	.hp-header__inner {
		min-height: 66px;
		padding: 10px 18px;
		flex-direction: row;
		justify-content: space-between;
	}

	.hp-header__logo {
		flex-direction: row;
	}

	.hp-header__logo-mark,
	.hp-header__logo-mark img {
		width: 34px;
		height: 34px;
	}

	.hp-header__site-name {
		font-size: 16px;
	}

	.hp-header__nav,
	.hp-header__contact {
		display: none;
	}

	.hp-header__burger {
		display: inline-flex;
		border-color: rgba(255,255,255,.54);
		background: rgba(255,255,255,.12);
	}

	.hp-header__burger span {
		background: #fff;
	}

	.hp-story-hero__content {
		width: auto;
		margin-left: 24px;
		margin-right: 24px;
		padding-top: 132px;
		padding-bottom: 230px;
	}

	.hp-story-hero__title {
		font-size: 68px;
	}

	.hp-hero-message,
	.hp-hero-orbit {
		display: none;
	}

	.hp-story-hero > .hp-age-story {
		left: 22px;
		right: 22px;
		bottom: 34px;
		height: 160px;
		padding-right: 62px;
	}

	.hp-story-hero > .hp-age-story .hp-age-story__line {
		height: 74px;
	}

	.hp-story-hero > .hp-age-story .hp-age-story__line::before,
	.hp-story-hero > .hp-age-story .hp-age-story__line::after,
	.hp-story-hero > .hp-age-story .hp-age-story__dot {
		top: 36px;
	}

	/* アクティブ赤点もモバイルの線位置(36px)にそろえる
	   （PC用の top:49px 上書きを打ち消す。height/margin は据え置きで中心=36px） */
	.hp-story-hero > .hp-age-story .hp-age-story__item.is-active .hp-age-story__dot {
		top: 36px;
	}

	.hp-story-hero > .hp-age-story .hp-age-story__label {
		top: 60px;
		font-size: 13px;
	}

	.hp-story-hero > .hp-age-story .hp-age-story__en {
		display: none;
	}

	.hp-story-hero > .hp-age-story .hp-age-story__active-label {
		top: 0;
		font-size: 22px;
	}

	.hp-story-hero > .hp-age-story .hp-age-story__pause {
		top: 8px;
		width: 54px;
		height: 54px;
	}

	.hp-story-hero > .hp-age-story .hp-age-story__pause-text {
		display: none;
	}

	.hp-story-hero > .hp-age-story .hp-age-story__summary {
		top: 88px;
		left: clamp(82px, var(--active-x, 50%), calc(100% - 150px));
		width: min(320px, 72vw);
	}

	.hp-story-hero > .hp-age-story[data-active-index="0"] .hp-age-story__summary,
	.hp-story-hero > .hp-age-story[data-active-index="1"] .hp-age-story__summary,
	.hp-story-hero > .hp-age-story[data-active-index="4"] .hp-age-story__summary,
	.hp-story-hero > .hp-age-story[data-active-index="5"] .hp-age-story__summary {
		transform: translateX(-50%);
		text-align: center;
	}

	.hp-story-hero > .hp-age-story .hp-age-story__summary h2 {
		font-size: 16px;
	}

	.hp-story-hero > .hp-age-story .hp-age-story__summary p:last-child {
		font-size: 11px;
		line-height: 1.7;
	}

	.hp-redesign-container {
		width: calc(100% - 40px);
	}

	.hp-overview::before,
	.hp-overview::after {
		display: none;
	}

	.hp-overview__inner {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.hp-overview__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		border-top: 1px solid rgba(122,90,55,.18);
	}

	.hp-overview__item {
		padding: 22px 18px;
		border-bottom: 1px solid rgba(122,90,55,.18);
	}

	.hp-overview__item strong {
		font-size: 34px;
	}

	.hp-strengths__grid,
	.hp-news-cta__grid,
	.hp-news-panel {
		grid-template-columns: 1fr;
	}

	.hp-strengths__cards,
	.hp-facility-grid,
	.hp-photo-strip {
		grid-template-columns: 1fr;
	}

	.hp-redesign-head {
		display: block;
	}

	.hp-red-cta {
		clip-path: none;
		padding: 34px 28px;
	}
}

@media (max-width: 560px) {
	/* 縦積みをやめて2×2のコンパクトグリッドに（SP縦幅短縮） */
	.hp-overview__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.hp-overview__item {
		min-height: 0;
		padding: 16px 14px;
	}
	.hp-overview__item::before { left: 14px; }
	.hp-overview__item strong { font-size: 26px; margin-bottom: 6px; }
	.hp-overview__item span { font-size: 12px; margin-bottom: 5px; }
	.hp-overview__item p { font-size: 11px; line-height: 1.55; }

	.hp-news-row {
		grid-template-columns: 92px 44px 1fr;
		gap: 10px;
	}

	.hp-news-row i {
		display: none;
	}
}

/* =========================================================
   v5 仕上げ: 装飾整理・可読性向上・余白統一・年齢バー最終調整
   ========================================================= */

/* ---------- 1. ヒーロー装飾: 機械式時計 × 六分儀 v9 ---------- */
.hp-hero-orbit {
	display: none !important;
}

/* ===== バッジ本体: 中央の円 ===== */
.hp-hero-message {
	width: 168px;
	height: 168px;
	right: clamp(96px, 10vw, 160px);
	top: clamp(220px, 28vh, 290px);
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border: 1px solid rgba(228, 196, 140, .58);
	border-radius: 50%;
	box-shadow:
		inset 0 0 0 4px transparent,
		inset 0 0 22px rgba(0, 0, 0, .18);
	overflow: visible;
}

/* ::before: 内側 2 重リング + 12 方位の細かい tick（時計の文字盤） */
.hp-hero-message::before {
	content: "";
	position: absolute;
	inset: 9px;
	z-index: 1;
	border: 1px solid rgba(228, 196, 140, .22);
	border-radius: 50%;
	background:
		/* 12 方位の短い tick - conic-gradient で 30 度ごとに 1 本 */
		conic-gradient(from 0deg at 50% 50%,
			rgba(228,196,140,.62) 0 1deg, transparent 1deg 30deg,
			rgba(228,196,140,.42) 30deg 31deg, transparent 31deg 60deg,
			rgba(228,196,140,.42) 60deg 61deg, transparent 61deg 90deg,
			rgba(228,196,140,.62) 90deg 91deg, transparent 91deg 120deg,
			rgba(228,196,140,.42) 120deg 121deg, transparent 121deg 150deg,
			rgba(228,196,140,.42) 150deg 151deg, transparent 151deg 180deg,
			rgba(228,196,140,.62) 180deg 181deg, transparent 181deg 210deg,
			rgba(228,196,140,.42) 210deg 211deg, transparent 211deg 240deg,
			rgba(228,196,140,.42) 240deg 241deg, transparent 241deg 270deg,
			rgba(228,196,140,.62) 270deg 271deg, transparent 271deg 300deg,
			rgba(228,196,140,.42) 300deg 301deg, transparent 301deg 330deg,
			rgba(228,196,140,.42) 330deg 331deg, transparent 331deg 360deg);
	-webkit-mask: radial-gradient(circle, transparent 0 47%, #000 47.5% 50%, transparent 50.5% 100%);
	mask: radial-gradient(circle, transparent 0 47%, #000 47.5% 50%, transparent 50.5% 100%);
	box-shadow: none;
	pointer-events: none;
	transform: none;
	opacity: 1;
}

/* ::after: 外側にゆっくり回転する菱形フレーム（1本、上品） */
.hp-hero-message::after {
	content: "";
	position: absolute;
	inset: -26px;
	z-index: -1;
	border: 1px solid rgba(228, 196, 140, .34);
	border-radius: 0;
	transform: rotate(45deg);
	background: transparent;
	box-shadow: 0 0 24px rgba(185, 150, 91, .06);
	display: block;
	pointer-events: none;
	animation: hp-hero-msg-spin 60s linear infinite;
	transform-origin: 50% 50%;
}

@keyframes hp-hero-msg-spin {
	0%   { transform: rotate(45deg); }
	100% { transform: rotate(405deg); }
}

/* p 本体: テキスト */
.hp-hero-message p {
	position: relative;
	z-index: 2;
	margin: 0;
	font-family: var(--hp-serif);
	font-size: 13.5px;
	line-height: 2.1;
	letter-spacing: .06em;
	color: #fff;
	text-shadow: 0 2px 16px rgba(0, 0, 0, .82);
}

/* p::before: 最外周の薄い円（六分儀の文字盤外周）+ 4 隅にコーナー L マーカー */
.hp-hero-message p::before {
	content: "" !important;
	display: block !important;
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: -2;
	width: 248px;
	height: 248px;
	transform: translate(-50%, -50%);
	border: 1px solid rgba(228, 196, 140, .18);
	border-radius: 50%;
	background:
		/* 4 方位の長めの主 tick（最外周にちょこんと出る） */
		linear-gradient(90deg, rgba(228,196,140,.7), rgba(228,196,140,.7)) 50% -2px / 1px 7px no-repeat,
		linear-gradient(90deg, rgba(228,196,140,.7), rgba(228,196,140,.7)) 50% calc(100% + 2px) / 1px 7px no-repeat,
		linear-gradient(180deg, rgba(228,196,140,.7), rgba(228,196,140,.7)) -2px 50% / 7px 1px no-repeat,
		linear-gradient(180deg, rgba(228,196,140,.7), rgba(228,196,140,.7)) calc(100% + 2px) 50% / 7px 1px no-repeat;
	box-shadow: 0 0 30px rgba(185, 150, 91, .06);
	pointer-events: none;
	opacity: 1;
}

/* p::after: 上下の角度目盛り弧（chronograph 風）— 上に 30°/下に 30° の範囲だけ tick を打つ */
.hp-hero-message p::after {
	content: "" !important;
	display: block !important;
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: -1;
	width: 210px;
	height: 210px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background:
		conic-gradient(from -15deg at 50% 50%,
			rgba(228,196,140,.78) 0 .6deg, transparent .6deg 6deg,
			rgba(228,196,140,.56) 6deg 6.6deg, transparent 6.6deg 12deg,
			rgba(228,196,140,.56) 12deg 12.6deg, transparent 12.6deg 18deg,
			rgba(228,196,140,.56) 18deg 18.6deg, transparent 18.6deg 24deg,
			rgba(228,196,140,.78) 24deg 24.6deg, transparent 24.6deg 30deg,
			transparent 30deg 165deg,
			rgba(228,196,140,.78) 165deg 165.6deg, transparent 165.6deg 171deg,
			rgba(228,196,140,.56) 171deg 171.6deg, transparent 171.6deg 177deg,
			rgba(228,196,140,.56) 177deg 177.6deg, transparent 177.6deg 183deg,
			rgba(228,196,140,.56) 183deg 183.6deg, transparent 183.6deg 189deg,
			rgba(228,196,140,.78) 189deg 189.6deg, transparent 189.6deg 360deg);
	-webkit-mask: radial-gradient(circle, transparent 0 45%, #000 45.4% 49%, transparent 49.4% 100%);
	mask: radial-gradient(circle, transparent 0 45%, #000 45.4% 49%, transparent 49.4% 100%);
	box-shadow: none;
	pointer-events: none;
	opacity: 1;
}

/* ホバー時にちょっと加速 */
.hp-hero-message:hover::after {
	animation-duration: 18s;
}

@media (prefers-reduced-motion: reduce) {
	.hp-hero-message::after,
	.hp-hero-message:hover::after {
		animation: none;
	}
}

/* ---------- 2. ヘッダーナビ hover をシンプルに ---------- */
.hp-header__menu a::before,
.hp-header__menu a::after,
.hp-header__menu a span::before,
.hp-header__menu a span::after,
.hp-header__menu a small::before,
.hp-header__menu a small::after {
	display: none;
	content: none;
}

.hp-header__menu a {
	position: relative;
	padding: 8px 0 14px;
	letter-spacing: .14em;
	transition: color .25s ease;
}

.hp-header__menu a::after {
	display: block !important;
	content: "" !important;
	position: absolute;
	left: 50%;
	bottom: 6px;
	width: 0;
	height: 1px;
	background: rgba(236, 196, 116, .9);
	box-shadow: 0 0 6px rgba(236, 196, 116, .5);
	transform: translateX(-50%);
	transition: width .3s cubic-bezier(.4, 0, .2, 1);
	opacity: 1;
}

.hp-header__menu a:hover,
.hp-header__menu a:focus-visible {
	color: #fff;
}

.hp-header__menu a:hover::after,
.hp-header__menu a:focus-visible::after {
	width: 36px;
}

/* ---------- 3. 本文・見出しの可読性 ---------- */
:root {
	--hp-text-body: rgba(31, 23, 20, .82);
	--hp-text-sub: rgba(31, 23, 20, .64);
}

/* hp-section-copy / hp-redesign-head の本文 */
.hp-section-copy h2,
.hp-redesign-head h2 {
	line-height: 1.65;
	letter-spacing: .06em;
	margin-bottom: 28px;
}

.hp-section-copy p,
.hp-redesign-head p {
	font-size: 14.5px;
	line-height: 2.1;
	letter-spacing: .04em;
	color: var(--hp-text-body);
}

/* overview セクション */
.hp-overview__copy h2 {
	font-size: 23px;
	line-height: 1.85;
	letter-spacing: .06em;
}

.hp-overview__item span {
	font-size: 14px;
	letter-spacing: .08em;
}

.hp-overview__item p {
	font-size: 12.5px;
	line-height: 1.9;
	color: var(--hp-text-sub);
}

/* strength カード */
.hp-strength-card span {
	font-size: 13px;
	letter-spacing: .14em;
	color: var(--hp-red);
}

.hp-strength-card h3 {
	font-size: 16px;
	line-height: 1.9;
	letter-spacing: .04em;
}

.hp-strength-card p {
	font-size: 12.5px;
	line-height: 2.05;
	letter-spacing: .03em;
	color: var(--hp-text-body);
}

/* facility カード */
.hp-facility-card h3 {
	font-size: 18px;
	line-height: 1.55;
	letter-spacing: .06em;
}

.hp-facility-card p {
	font-size: 13px;
	line-height: 2.05;
	letter-spacing: .03em;
	color: var(--hp-text-body);
}

/* news ロー */
.hp-news-row {
	font-size: 13.5px;
	letter-spacing: .04em;
	padding: 20px 0;
}

.hp-news-row time {
	font-family: var(--hp-roman);
	color: var(--hp-text-sub);
	letter-spacing: .08em;
}

.hp-news-row em {
	letter-spacing: .12em;
	padding: 0 8px;
}

/* 赤 CTA 内文字 */
.hp-red-cta h2 {
	font-size: 27px;
	line-height: 1.65;
	letter-spacing: .08em;
}

.hp-red-cta p {
	font-size: 13.5px;
	line-height: 2.05;
	letter-spacing: .04em;
}

/* ---------- 4. セクション間の余白と区切り ---------- */
.hp-redesign-section {
	padding: clamp(96px, 9vw, 132px) 0;
	border-top: 1px solid rgba(185, 150, 91, .26);
}

.hp-redesign-section + .hp-redesign-section {
	border-top: 1px solid rgba(185, 150, 91, .18);
}

/* overview の余白少し増やす */
.hp-overview {
	padding: 42px 0 48px;
}

.hp-overview__inner {
	gap: 70px;
}

/* news セクションは内側もゆとり */
.hp-news-cta__grid {
	gap: 60px;
}

/* ---------- 5. 年齢バー最終仕上げ ---------- */
/* バー全体の位置: もう少し下方向の余白を取って下品にしないように */
.hp-story-hero > .hp-age-story {
	bottom: clamp(46px, 6.4vh, 76px);
}

/* ベースライン: 中央の白を抑え、金色寄りで上品に */
.hp-story-hero > .hp-age-story .hp-age-story__line::before {
	background:
		linear-gradient(90deg,
			rgba(185, 150, 91, 0),
			rgba(218, 190, 142, .58) 10%,
			rgba(238, 218, 175, .82) 50%,
			rgba(218, 190, 142, .58) 90%,
			rgba(185, 150, 91, 0)
		);
}

/* アクティブドット: 少し縮めて発光は維持。中心を横線の軸（49px）にそろえる
   （main.css 側の top: calc(--story-line-top - 12px) と margin の前提ズレで
   軸より上にずれていたのを是正） */
.hp-story-hero > .hp-age-story .hp-age-story__item.is-active .hp-age-story__dot {
	top: 49px;
	width: 22px;
	height: 22px;
	margin: -11px 0 0 -11px;
}

/* アクティブドット背後のグロー線 */
.hp-story-hero > .hp-age-story .hp-age-story__item.is-active .hp-age-story__dot::before {
	width: 120px;
}

/* ---------- 年齢バーの文字配置（みやすく調整 v12c：元配置） ---------- */
/* バー本体（ライン・ドット・小ラベル）の位置はすべてオリジナル維持 */

/* 英字ラベル ZERO/ONE 等は非表示にしてスッキリ */
.hp-story-hero > .hp-age-story .hp-age-story__en {
	display: none !important;
}

/* 大型ラベル「0歳」: バーの上に表示（選択ドット追従） */
.hp-story-hero > .hp-age-story .hp-age-story__active-label {
	top: 0 !important;
	left: var(--active-x, 50%) !important;
	transform: translateX(-50%) !important;
	font-family: var(--hp-serif) !important;
	font-size: 28px !important;
	font-weight: 500 !important;
	letter-spacing: .04em !important;
	color: #fff !important;
	text-shadow: 0 3px 22px rgba(0, 0, 0, .58) !important;
	transition:
		opacity .28s ease,
		left .55s cubic-bezier(.4, 0, .2, 1) !important;
}

/* "SELECT AGE" 英字キャプションは非表示 */
.hp-story-hero > .hp-age-story .hp-age-story__active-label::before {
	display: none !important;
	content: none !important;
}

/* サマリー「0歳児の保育」+ 説明: バー下、選択ドット追従（両端 clamp） */
.hp-story-hero > .hp-age-story .hp-age-story__summary {
	top: 150px !important;
	left: clamp(200px, var(--active-x, 50%), calc(100% - 240px)) !important;
	width: 400px !important;
	max-width: min(400px, calc(100vw - 64px)) !important;
	transform: translateX(-50%) !important;
	transition:
		opacity .28s ease,
		left .55s cubic-bezier(.4, 0, .2, 1) !important;
}

.hp-story-hero > .hp-age-story .hp-age-story__summary h2 {
	margin-bottom: 10px !important;
	font-size: 20px !important;
	font-weight: 500 !important;
	letter-spacing: .12em !important;
	line-height: 1.5 !important;
}

.hp-story-hero > .hp-age-story .hp-age-story__summary p:last-child {
	font-size: 12.5px !important;
	font-weight: 400 !important;
	line-height: 1.95 !important;
	letter-spacing: .04em !important;
}

/* バー全体の高さは元のまま（174px）、文字スペースを少し追加 */
.hp-story-hero > .hp-age-story {
	height: 200px !important;
}

.hp-story-hero > .hp-age-story .hp-age-story__summary h2 {
	font-size: 21px;
	font-weight: 500;
	line-height: 1.55;
	letter-spacing: .1em;
	margin-bottom: 12px;
}

.hp-story-hero > .hp-age-story .hp-age-story__summary p:last-child {
	font-size: 13px;
	line-height: 2;
	letter-spacing: .04em;
	color: rgba(255, 255, 255, .9);
}

/* PAUSE ボタン: 少し抑える */
.hp-story-hero > .hp-age-story .hp-age-story__pause {
	width: 68px;
	height: 68px;
	top: 20px;
}

.hp-story-hero > .hp-age-story .hp-age-story__pause-icon span {
	width: 2.5px;
	height: 13px;
}

.hp-story-hero > .hp-age-story .hp-age-story__pause-text {
	font-size: 7px;
	letter-spacing: .18em;
}

/* SP 追加調整 */
@media (max-width: 900px) {
	.hp-hero-orbit,
	.hp-hero-message {
		display: none;
	}

	.hp-redesign-section {
		padding: 70px 0;
	}

	.hp-section-copy p,
	.hp-redesign-head p {
		font-size: 13.5px;
		line-height: 2;
	}

	.hp-news-cta__grid {
		gap: 40px;
	}

	.hp-story-hero > .hp-age-story .hp-age-story__active-label {
		font-size: 19px;
	}

	.hp-story-hero > .hp-age-story .hp-age-story__pause {
		width: 50px;
		height: 50px;
	}
}

/* =========================================================
   v10: サイト全体の演出 / アニメーション
   ========================================================= */

/* ---------- 共通: スクロール連動 reveal ---------- */
.hp-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition:
		opacity .9s cubic-bezier(.2, .8, .2, 1),
		transform .9s cubic-bezier(.2, .8, .2, 1);
	transition-delay: calc(var(--hp-stagger, 0) * .065s);
	will-change: opacity, transform;
}

.hp-reveal.is-revealed {
	opacity: 1;
	transform: translateY(0);
}

/* photo-strip 画像は左右に揺らぎ */
.hp-photo-strip > img.hp-reveal,
.hp-photo-strip__link.hp-reveal {
	transform: translateY(0) scale(.98);
	opacity: 0;
}

.hp-photo-strip > img.hp-reveal.is-revealed,
.hp-photo-strip__link.hp-reveal.is-revealed {
	transform: translateY(0) scale(1);
	opacity: 1;
}

/* ---------- ヒーロー初期演出 ---------- */
.hp-story-hero__eyebrow,
.hp-story-hero__title span,
.hp-story-hero__lead,
.hp-story-hero__note,
.hp-hero-message,
.hp-story-hero > .hp-age-story {
	opacity: 0;
	transform: translateY(22px);
	transition:
		opacity 1.1s cubic-bezier(.22, .8, .22, 1),
		transform 1.1s cubic-bezier(.22, .8, .22, 1);
}

.hp-story-hero.is-loaded .hp-story-hero__eyebrow { transition-delay: .15s; opacity: 1; transform: translateY(0); }
.hp-story-hero.is-loaded .hp-story-hero__title span:first-child { transition-delay: .35s; opacity: 1; transform: translateY(0); }
.hp-story-hero.is-loaded .hp-story-hero__title span + span { transition-delay: .55s; opacity: 1; transform: translateY(0); }
.hp-story-hero.is-loaded .hp-story-hero__lead { transition-delay: .75s; opacity: 1; transform: translateY(0); }
.hp-story-hero.is-loaded .hp-story-hero__note { transition-delay: .9s; opacity: 1; transform: translateY(0); }
.hp-story-hero.is-loaded .hp-hero-message { transition-delay: 1.05s; opacity: 1; transform: translateY(0); }
.hp-story-hero.is-loaded > .hp-age-story { transition-delay: .4s; opacity: 1; transform: translateY(0); }

/* AGE STORY タイトルにフィルターの軽いブラー解除 */
.hp-story-hero__title span {
	filter: blur(8px);
	transition:
		opacity 1.1s cubic-bezier(.22, .8, .22, 1),
		transform 1.1s cubic-bezier(.22, .8, .22, 1),
		filter 1.1s cubic-bezier(.22, .8, .22, 1);
}
.hp-story-hero.is-loaded .hp-story-hero__title span {
	filter: blur(0);
}

/* ---------- 数値カウンター演出 ---------- */
.hp-overview__item strong.hp-counter {
	display: inline-block;
	min-width: 1.4em;
	font-variant-numeric: tabular-nums;
}

/* ---------- ストレングス・ファシリティカード ホバー ---------- */
.hp-strength-card,
.hp-facility-card {
	position: relative;
}

.hp-strength-card::before,
.hp-facility-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%),
		rgba(180, 0, 0, .07),
		rgba(180, 0, 0, 0) 42%);
	opacity: 0;
	transition: opacity .35s ease;
	pointer-events: none;
}

.hp-strength-card:hover::before,
.hp-facility-card:hover::before {
	opacity: 1;
}

/* カード内要素を上に */
.hp-strength-card > *,
.hp-facility-card > * {
	position: relative;
	z-index: 1;
}

/* hover lift をクッキリ */
.hp-strength-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 24px 44px rgba(52, 37, 25, .14);
}

.hp-facility-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 32px 56px rgba(52, 37, 25, .18);
}

/* アイコン丸: hover で発光 */
.hp-strength-card .hp-strength-card__icon {
	transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease, background .35s ease;
}

.hp-strength-card:hover .hp-strength-card__icon {
	transform: scale(1.08) rotate(-3deg);
	border-color: var(--hp-red);
	background: rgba(255, 245, 244, .9);
	box-shadow: 0 6px 18px rgba(180, 0, 0, .18);
}

/* 下線が左から伸びる */
.hp-strength-card::after {
	width: 0 !important;
	transition: width .5s cubic-bezier(.4, 0, .2, 1);
}

.hp-strength-card:hover::after {
	width: 50px !important;
}

/* ---------- リンク矢印 → カチッと右へ ---------- */
.hp-story-link span,
.hp-news-panel__title a span,
.hp-facility-card a span,
.hp-red-cta a span,
.hp-photo-strip__link i,
.hp-news-row i {
	display: inline-block;
	transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}

.hp-story-link:hover span,
.hp-news-panel__title a:hover span,
.hp-facility-card a:hover span,
.hp-red-cta a:hover span {
	transform: translateX(6px);
}

.hp-photo-strip__link:hover i,
.hp-news-row:hover i {
	transform: translateX(4px);
}

/* ---------- NEWS row hover ---------- */
.hp-news-row {
	transition: color .25s ease, border-color .25s ease, background .25s ease, padding-left .3s ease;
}

.hp-news-row:hover {
	background: linear-gradient(90deg, rgba(180, 0, 0, .04), transparent 60%);
	padding-left: 8px;
}

/* ---------- 赤 CTA: 光の帯がスーッと通る ---------- */
.hp-red-cta a {
	position: relative;
	overflow: hidden;
	transition: background .25s ease, border-color .25s ease, transform .3s ease;
}

.hp-red-cta a::after {
	content: "";
	position: absolute;
	top: 0;
	left: -120%;
	width: 60%;
	height: 100%;
	background: linear-gradient(100deg,
		transparent 0%,
		rgba(255, 255, 255, .22) 50%,
		transparent 100%);
	transform: skewX(-18deg);
	pointer-events: none;
}

.hp-red-cta a:hover {
	transform: translateY(-2px);
}

.hp-red-cta a:hover::after {
	animation: hp-shine 1s cubic-bezier(.4, 0, .2, 1) forwards;
}

@keyframes hp-shine {
	0%   { left: -120%; }
	100% { left: 140%; }
}

/* ---------- 赤 CTA バナー全体: 内側枠が微かに脈動 ---------- */
.hp-red-cta::before {
	animation: hp-cta-breathe 4.5s ease-in-out infinite;
}

@keyframes hp-cta-breathe {
	0%, 100% { inset: 16px 28px; opacity: .55; }
	50%      { inset: 18px 32px; opacity: .85; }
}

/* ---------- 写真ストリップ: ゆっくり Ken Burns ---------- */
.hp-photo-strip > img,
.hp-photo-strip__link img {
	animation: hp-ken-burns 24s ease-in-out infinite alternate;
	will-change: transform;
}

.hp-photo-strip > img:nth-of-type(1),
.hp-photo-strip__link img { animation-delay: 0s; }
.hp-photo-strip > img:nth-of-type(2) { animation-delay: -6s; }
.hp-photo-strip > img:nth-of-type(3) { animation-delay: -12s; }
.hp-photo-strip > img:nth-of-type(4) { animation-delay: -18s; }
.hp-photo-strip__link img { animation-delay: -3s; }

@keyframes hp-ken-burns {
	0%   { transform: scale(1)    translate(0, 0); }
	100% { transform: scale(1.06) translate(-1.2%, -2%); }
}

/* hover で動きを早める */
.hp-photo-strip > img:hover,
.hp-photo-strip__link:hover img {
	animation-duration: 12s;
}

/* ---------- SCROLL インジケータ（ヒーロー右下） ---------- */
.hp-story-hero .hp-story-hero__content::after {
	content: "SCROLL";
	position: absolute;
	left: 0;
	bottom: 32px;
	z-index: 6;
	color: rgba(255, 255, 255, .58);
	font-family: var(--hp-roman);
	font-size: 10px;
	letter-spacing: .42em;
	writing-mode: vertical-rl;
	text-orientation: mixed;
	opacity: 0;
	animation: hp-scroll-hint 2.6s ease-in-out 1.4s infinite;
}

@keyframes hp-scroll-hint {
	0%, 100% { transform: translateY(0); opacity: .58; }
	50%      { transform: translateY(12px); opacity: 1; }
}

/* ---------- お問い合わせ赤ボタン（ヘッダー）が時々瞬く ---------- */
.hp-header__contact {
	overflow: hidden;
	position: fixed;
}

.hp-header__contact::after {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 50%;
	height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent);
	transform: skewX(-22deg);
	animation: hp-contact-shine 7s ease-in-out 3s infinite;
	pointer-events: none;
}

@keyframes hp-contact-shine {
	0%, 88% { left: -100%; }
	95%     { left: 160%; }
	100%    { left: 160%; }
}

/* ---------- 数値カウンタの値だけハイライト ---------- */
.hp-overview__item strong {
	position: relative;
	transition: color .3s ease;
	white-space: nowrap;
}

.hp-overview__item:hover strong {
	color: var(--hp-red-2);
}

/* 「1人ひとり」など日本語テキストの strong は、数字より少し小さく明朝で表示 */
.hp-overview__item:nth-child(4) strong {
	font-family: var(--hp-serif) !important;
	font-size: 30px !important;
	font-weight: 500 !important;
	letter-spacing: .02em !important;
	line-height: 1.1 !important;
	white-space: nowrap !important;
}

/* ---------- セクション kicker（OUR XXX）が線で入る ---------- */
.hp-story-kicker {
	position: relative;
	padding-left: 38px;
}

.hp-story-kicker::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 24px;
	height: 1px;
	background: var(--hp-red);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .8s cubic-bezier(.2, .8, .2, 1) .2s;
}

.is-revealed .hp-story-kicker::before,
.hp-reveal.is-revealed .hp-story-kicker::before,
.hp-section-copy.is-revealed .hp-story-kicker::before,
.hp-redesign-head.is-revealed .hp-story-kicker::before {
	transform: scaleX(1);
}

/* オーバービューの kicker は色変えのみ（線は無し） */
.hp-overview .hp-story-kicker {
	padding-left: 0;
}

.hp-overview .hp-story-kicker::before {
	display: none;
}

/* ---------- アクセシビリティ ---------- */
@media (prefers-reduced-motion: reduce) {
	.hp-reveal,
	.hp-reveal.is-revealed,
	.hp-story-hero__eyebrow,
	.hp-story-hero__title span,
	.hp-story-hero__lead,
	.hp-story-hero__note,
	.hp-hero-message,
	.hp-story-hero > .hp-age-story {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		transition: none !important;
		animation: none !important;
	}

	.hp-photo-strip > img,
	.hp-photo-strip__link img,
	.hp-red-cta::before,
	.hp-story-hero .hp-story-hero__content::after,
	.hp-header__contact::after {
		animation: none !important;
	}
}

/* =========================================================
   v11: 赤線シャッ系 HUD 演出
   ========================================================= */

:root {
	/* サイトの赤に近い深い赤に変更（#b40000 系で統一） */
	--hp-red-line: #b40000;
	--hp-red-line-soft: rgba(180, 0, 0, .85);
	--hp-red-glow:  rgba(180, 0, 0, .45);
	--hp-red-glow2: rgba(180, 0, 0, .22);
}

/* ---------- スキャンライン: セクションが視界に入ると左から右へ赤線が走る ---------- */
.hp-redesign-section,
.hp-overview,
.hp-photo-strip,
.hp-story-hero {
	position: relative;
}

.hp-scan-line {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background: linear-gradient(90deg,
		transparent 0%,
		rgba(180, 0, 0, 0) 6%,
		var(--hp-red-line) 50%,
		rgba(180, 0, 0, 0) 94%,
		transparent 100%);
	box-shadow:
		0 0 4px var(--hp-red-glow),
		0 0 10px var(--hp-red-glow2);
	z-index: 6;
	pointer-events: none;
	opacity: 0;
	transform: translateX(-100%);
}

.hp-story-hero .hp-scan-line {
	top: 0;
}
/* オープニング後（is-loaded）に横の赤線がシュッと走る */
.hp-story-hero.is-loaded .hp-scan-line {
	animation: hp-scan-shoot 1.6s cubic-bezier(.22, 1, .25, 1) .2s forwards;
}

.is-revealed .hp-scan-line,
.hp-overview.is-revealed .hp-scan-line,
.hp-photo-strip.is-revealed .hp-scan-line,
.hp-redesign-section.is-revealed .hp-scan-line {
	animation: hp-scan-shoot 1.1s cubic-bezier(.22, 1, .25, 1) forwards;
}

@keyframes hp-scan-shoot {
	0%   { opacity: 0; transform: translateX(-100%); }
	8%   { opacity: 1; }
	88%  { opacity: 1; }
	100% { opacity: 0; transform: translateX(100%); }
}

/* セクション自体もスクロールで .is-revealed を取得するように JS から強制注入する代わりに、
   重要な hp-reveal が is-revealed する時にも親に伝播させたい → CSS だけでは難しいので、JS で is-revealed を section に付与する */

/* ---------- コーナーブラケット: 4 隅に赤い L 字が「カチッ」と出る ---------- */
.hp-corners {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	display: block;
}

.hp-corners span {
	position: absolute;
	width: 14px;
	height: 14px;
	opacity: 0;
	transition: opacity .35s ease;
}

.hp-corners span::before,
.hp-corners span::after {
	content: "";
	position: absolute;
	background: var(--hp-red-line);
	box-shadow: 0 0 4px var(--hp-red-glow);
}

/* 左上（カード内側に 8px インセット） */
.hp-corners span:nth-child(1) { top: 8px; left: 8px; transform-origin: top left; }
.hp-corners span:nth-child(1)::before { top: 0; left: 0; width: 12px; height: 1px; }
.hp-corners span:nth-child(1)::after  { top: 0; left: 0; width: 1px; height: 12px; }

/* 右上 */
.hp-corners span:nth-child(2) { top: 8px; right: 8px; transform-origin: top right; }
.hp-corners span:nth-child(2)::before { top: 0; right: 0; width: 12px; height: 1px; }
.hp-corners span:nth-child(2)::after  { top: 0; right: 0; width: 1px; height: 12px; }

/* 左下 */
.hp-corners span:nth-child(3) { bottom: 8px; left: 8px; transform-origin: bottom left; }
.hp-corners span:nth-child(3)::before { bottom: 0; left: 0; width: 12px; height: 1px; }
.hp-corners span:nth-child(3)::after  { bottom: 0; left: 0; width: 1px; height: 12px; }

/* 右下 */
.hp-corners span:nth-child(4) { bottom: 8px; right: 8px; transform-origin: bottom right; }
.hp-corners span:nth-child(4)::before { bottom: 0; right: 0; width: 12px; height: 1px; }
.hp-corners span:nth-child(4)::after  { bottom: 0; right: 0; width: 1px; height: 12px; }

/* hover で赤いコーナーが点灯 + 各方向に伸びる */
.hp-strength-card:hover .hp-corners span,
.hp-facility-card:hover .hp-corners span,
.hp-red-cta:hover .hp-corners span,
.hp-news-panel:hover .hp-corners span {
	opacity: 1;
}

.hp-strength-card:hover .hp-corners span,
.hp-facility-card:hover .hp-corners span {
	animation: hp-corner-pop .55s cubic-bezier(.22, 1, .25, 1) forwards;
}

.hp-strength-card:hover .hp-corners span:nth-child(2),
.hp-facility-card:hover .hp-corners span:nth-child(2) {
	animation-delay: .05s;
}

.hp-strength-card:hover .hp-corners span:nth-child(3),
.hp-facility-card:hover .hp-corners span:nth-child(3) {
	animation-delay: .1s;
}

.hp-strength-card:hover .hp-corners span:nth-child(4),
.hp-facility-card:hover .hp-corners span:nth-child(4) {
	animation-delay: .15s;
}

@keyframes hp-corner-pop {
	0%   { opacity: 0; transform: scale(.4); }
	60%  { opacity: 1; transform: scale(1.15); }
	100% { opacity: 1; transform: scale(1); }
}

/* 赤 CTA は常時コーナー表示で「ロックオン」感 */
.hp-red-cta .hp-corners span {
	opacity: 1;
	width: 20px;
	height: 20px;
}

.hp-red-cta .hp-corners span::before,
.hp-red-cta .hp-corners span::after {
	background: #fff;
	box-shadow: 0 0 6px rgba(255, 255, 255, .8);
}

.hp-red-cta .hp-corners span:nth-child(1)::before,
.hp-red-cta .hp-corners span:nth-child(2)::before,
.hp-red-cta .hp-corners span:nth-child(3)::before,
.hp-red-cta .hp-corners span:nth-child(4)::before {
	width: 20px;
}

.hp-red-cta .hp-corners span:nth-child(1)::after,
.hp-red-cta .hp-corners span:nth-child(2)::after,
.hp-red-cta .hp-corners span:nth-child(3)::after,
.hp-red-cta .hp-corners span:nth-child(4)::after {
	height: 20px;
}

/* ---------- ヒーロー: 横断する赤い太線 + 縦の細い赤線 ---------- */
.hp-story-hero {
	overflow: hidden;
}

.hp-story-hero > .hp-scan-line {
	top: 38%;
	height: 1px;
	background: linear-gradient(90deg,
		transparent 0%,
		rgba(180, 0, 0, 0) 10%,
		var(--hp-red-line) 50%,
		rgba(180, 0, 0, 0) 90%,
		transparent 100%);
	box-shadow:
		0 0 5px var(--hp-red-glow),
		0 0 16px var(--hp-red-glow2);
}

/* 縦に走る赤線（右側）— 落ち着いた濃度に */
.hp-story-hero.is-loaded::after {
	content: "";
	position: absolute;
	top: 0;
	right: 8%;
	width: 1px;
	height: 100%;
	background: linear-gradient(180deg,
		transparent 0%,
		rgba(180, 0, 0, .55) 30%,
		rgba(180, 0, 0, .55) 70%,
		transparent 100%);
	box-shadow: 0 0 4px var(--hp-red-glow2);
	z-index: 4;
	pointer-events: none;
	opacity: 0;
	transform-origin: top center;
	animation: hp-vline-drop 1s cubic-bezier(.22, 1, .25, 1) .45s forwards;
}

@keyframes hp-vline-drop {
	0%   { opacity: 0; transform: scaleY(0); }
	8%   { opacity: 1; }
	100% { opacity: .85; transform: scaleY(1); }
}

/* ---------- セクション見出し h2 の赤線は削除（kickerの線と重複してた） ---------- */
.hp-section-copy h2::before,
.hp-redesign-head h2::before,
.hp-overview__copy h2::before {
	display: none !important;
	content: none !important;
}

/* ---------- kicker（OUR XXX）の赤線（控えめ） ---------- */
.hp-story-kicker::before {
	width: 0 !important;
	height: 1px;
	background: var(--hp-red-line) !important;
	box-shadow: 0 0 3px var(--hp-red-glow2);
	transition: width .5s cubic-bezier(.22, 1, .25, 1) .15s !important;
}

.hp-section-copy.is-revealed .hp-story-kicker::before,
.hp-redesign-head.is-revealed .hp-story-kicker::before,
.is-revealed .hp-story-kicker::before {
	width: 24px !important;
}

/* ---------- NEWS row: hover で赤い縦線が左端に立つ ---------- */
.hp-news-row {
	position: relative;
}

.hp-news-row::before {
	content: "";
	position: absolute;
	left: -8px;
	top: 50%;
	width: 2px;
	height: 0;
	background: var(--hp-red-line);
	box-shadow: 0 0 4px var(--hp-red-glow2);
	transform: translateY(-50%);
	transition: height .35s cubic-bezier(.22, 1, .25, 1);
}

.hp-news-row:hover::before {
	height: 70%;
}

/* ---------- カード: hover で外側に赤いアウトラインが「ピッ」と現れる ---------- */
.hp-strength-card,
.hp-facility-card {
	transition: transform .35s ease, box-shadow .35s ease;
}

.hp-strength-card::after {
	background: var(--hp-red-line) !important;
	box-shadow: 0 0 3px var(--hp-red-glow2);
}

/* ---------- フォトストリップにスキャンライン ---------- */
.hp-photo-strip > .hp-scan-line {
	top: 50%;
	height: 1px;
	background: linear-gradient(90deg,
		transparent,
		var(--hp-red-line-soft),
		transparent);
	box-shadow:
		0 0 4px var(--hp-red-glow),
		0 0 12px var(--hp-red-glow2);
}

.hp-photo-strip.is-revealed > .hp-scan-line {
	animation: hp-scan-shoot 1.4s cubic-bezier(.22, 1, .25, 1) forwards;
}

/* ---------- 数字カウンタの周りに細い赤線 ---------- */
.hp-overview__item {
	position: relative;
}

.hp-overview__item::before {
	content: "";
	position: absolute;
	top: 4px;
	left: 30px;
	width: 0;
	height: 1px;
	background: var(--hp-red-line);
	transition: width .55s cubic-bezier(.22, 1, .25, 1) .3s;
	box-shadow: 0 0 3px var(--hp-red-glow2);
}

.hp-overview__item.is-revealed::before {
	width: 28px;
}

/* ---------- お問い合わせ赤ボタン（ヘッダー）: 上下に赤線 ---------- */
.hp-header__contact::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background: rgba(255, 255, 255, .6);
	box-shadow: 0 0 5px rgba(255, 255, 255, .5);
	animation: hp-contact-line 4s ease-in-out infinite;
	pointer-events: none;
}

@keyframes hp-contact-line {
	0%, 100% { opacity: .3; transform: scaleX(.4); }
	50%      { opacity: 1;   transform: scaleX(1); }
}

/* ---------- 全体: hover 時のカード外周「ロックオン」フレーム ---------- */
.hp-strength-card .hp-corners span::before,
.hp-strength-card .hp-corners span::after,
.hp-facility-card .hp-corners span::before,
.hp-facility-card .hp-corners span::after {
	background: var(--hp-red-line);
	box-shadow: 0 0 3px var(--hp-red-glow), 0 0 6px var(--hp-red-glow2);
}

/* ---------- 写真ストリップにオーバーレイの赤いグリッド線 ---------- */
.hp-photo-strip::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, transparent 0 calc(20% - .5px), rgba(180, 0, 0, .12) calc(20% - .5px) 20%, transparent 20%),
		linear-gradient(90deg, transparent 0 calc(40% - .5px), rgba(180, 0, 0, .12) calc(40% - .5px) 40%, transparent 40%),
		linear-gradient(90deg, transparent 0 calc(60% - .5px), rgba(180, 0, 0, .12) calc(60% - .5px) 60%, transparent 60%),
		linear-gradient(90deg, transparent 0 calc(80% - .5px), rgba(180, 0, 0, .12) calc(80% - .5px) 80%, transparent 80%);
	pointer-events: none;
	opacity: 0;
	transition: opacity .8s ease .3s;
}

.hp-photo-strip.is-revealed::after {
	opacity: 1;
}

/* ---------- 全体: 微細グリッチノイズ（オプション） ---------- */
@media (prefers-reduced-motion: no-preference) {
	/* 何もしない（落ち着きを優先） */
}

/* ---------- アクセシビリティ ---------- */
@media (prefers-reduced-motion: reduce) {
	.hp-scan-line,
	.hp-corners,
	.hp-overview__item::before,
	.hp-news-row::before,
	.hp-section-copy h2::before,
	.hp-redesign-head h2::before,
	.hp-overview__copy h2::before,
	.hp-photo-strip::after,
	.hp-story-hero.is-loaded::after,
	.hp-header__contact::before {
		display: none !important;
		animation: none !important;
	}
}




/* =========================================================
   v19: 施設カードのスペック表示
   ========================================================= */
.hp-facility-card__body {
	padding: 24px 22px 28px;
}

.hp-facility-card__body h3 {
	margin: 0 0 4px;
}

.hp-facility-card__body p {
	margin: 0 0 18px;
	min-height: 3.2em;
	color: rgba(31,23,20,.72);
	font-size: 13px;
	line-height: 2;
}

.hp-facility-card__spec {
	margin: 0 0 22px;
	padding: 16px 0 0;
	border-top: 1px solid rgba(122,90,55,.18);
	font-size: 12px;
	line-height: 1.85;
}

.hp-facility-card__spec > div {
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 14px;
	padding: 6px 0;
	border-bottom: 1px dashed rgba(122,90,55,.12);
}

.hp-facility-card__spec > div:last-child {
	border-bottom: 0;
}

.hp-facility-card__spec dt {
	color: var(--hp-red, #b40000);
	font-family: var(--hp-roman, "Times New Roman");
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .18em;
	align-self: center;
}

.hp-facility-card__spec dd {
	margin: 0;
	color: rgba(31,23,20,.85);
	font-size: 12px;
	letter-spacing: .04em;
}

.hp-facility-card__spec a {
	color: rgba(31,23,20,.85);
	text-decoration: none;
	transition: color .2s ease;
}

.hp-facility-card__spec a:hover {
	color: var(--hp-red, #b40000);
}

.hp-facility-card__more {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--hp-red, #b40000);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}


/* =========================================================
   v25: スローカウンタ「5」など、見出しの数字を上品に
   ========================================================= */
.hp-count {
	display: inline-block;
	color: var(--hp-red, #b40000);
	font-family: var(--hp-roman, "Times New Roman");
	font-size: 1.32em;
	font-weight: 400;
	font-style: normal;
	letter-spacing: -.02em;
	line-height: 1;
	padding: 0 .08em;
	font-variant-numeric: tabular-nums;
	min-width: .7em;
	text-align: center;
	transition: text-shadow .8s ease;
	position: relative;
}

/* カウント完了時に微発光 */
.hp-count.is-counted {
	text-shadow:
		0 0 14px rgba(180, 0, 0, .35),
		0 0 28px rgba(180, 0, 0, .18);
}

/* 完了後に下に細い赤い装飾線が draw-in */
.hp-count::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -.18em;
	width: 0;
	height: 1px;
	background: var(--hp-red, #b40000);
	transform: translateX(-50%);
	transition: width 1s cubic-bezier(.22, 1, .25, 1) .2s;
}

.hp-count.is-counted::after {
	width: 80%;
}

/* オーバービュー数字もカウント完了時に同様の発光 */
.hp-overview__item strong.hp-counter.is-counted {
	text-shadow:
		0 0 18px rgba(180, 0, 0, .25),
		0 0 36px rgba(180, 0, 0, .12);
	transition: text-shadow .8s ease;
}

/* =========================================================
   オープニング演出 v2（施設画像＋流れる文字 → パネルが順に上がる）
   ========================================================= */
.hp-intro {
	position: fixed;
	inset: 0;
	z-index: 2000;
	overflow: hidden;
	pointer-events: none;
}

.hp-intro.is-done { display: none; }

/* --- パネル（背景＝カーテン） --- */
.hp-intro__panels {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
}

.hp-intro__panels > span {
	flex: 1 1 0;
	background: #0d0908;
	transform: translateY(0);
	will-change: transform;
	animation: hpIntroPanel .82s cubic-bezier(.76, 0, .24, 1) forwards;
	animation-delay: calc(3.05s + var(--i) * .08s);
}

@keyframes hpIntroPanel {
	to { transform: translateY(-101%); }
}

/* --- ステージ（演出本体・最後にフェード） --- */
.hp-intro__stage {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 1;
	animation: hpIntroStageOut .5s ease 2.55s forwards;
}

@keyframes hpIntroStageOut {
	to { opacity: 0; }
}

.hp-intro__stage::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: radial-gradient(ellipse at center, rgba(13, 9, 8, .4) 0%, rgba(13, 9, 8, .82) 72%);
	pointer-events: none;
}

/* 流れる大文字 */
.hp-intro__textflow {
	position: absolute;
	top: 13%;
	left: 0;
	right: 0;
	overflow: hidden;
	z-index: 1;
}

.hp-intro__textflow-track {
	display: inline-flex;
	align-items: center;
	gap: 30px;
	width: max-content;
	white-space: nowrap;
	font-family: var(--hp-roman);
	font-size: clamp(40px, 6vw, 96px);
	letter-spacing: .04em;
	color: rgba(255, 255, 255, .07);
	will-change: transform;
	animation: hpFlowL 26s linear infinite;
}

.hp-intro__dot {
	width: .26em;
	height: .26em;
	border-radius: 50%;
	background: rgba(255, 90, 95, .4);
}

@keyframes hpFlowL { to { transform: translateX(-50%); } }

/* 流れる施設画像 */
.hp-intro__imgflow {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	overflow: hidden;
	z-index: 1;
}

.hp-intro__imgflow-track {
	display: inline-flex;
	gap: 22px;
	width: max-content;
	padding: 0 11px;
	will-change: transform;
	animation: hpFlowR 38s linear infinite;
}

.hp-intro__img {
	position: relative;
	flex: 0 0 auto;
	width: clamp(220px, 24vw, 360px);
	height: clamp(150px, 16vw, 232px);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 22px 54px rgba(0, 0, 0, .5);
}

.hp-intro__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hp-intro__img em {
	position: absolute;
	left: 13px;
	bottom: 11px;
	display: flex;
	align-items: baseline;
	gap: 8px;
	color: #fff;
	font-family: var(--hp-roman);
	font-size: 11px;
	font-weight: 600;
	font-style: normal;
	letter-spacing: .18em;
	text-shadow: 0 2px 8px rgba(0, 0, 0, .65);
}

.hp-intro__img em span {
	font-family: var(--hp-serif);
	font-size: 10px;
	letter-spacing: .04em;
	color: rgba(255, 255, 255, .82);
}

@keyframes hpFlowR {
	from { transform: translateX(-50%); }
	to   { transform: translateX(0); }
}

/* 中央コピー */
.hp-intro__center {
	position: relative;
	z-index: 3;
	text-align: center;
	padding: 0 24px;
}

.hp-intro__kicker {
	margin: 0 0 18px;
	color: rgba(255, 255, 255, .72);
	font-family: var(--hp-roman);
	font-size: 12px;
	letter-spacing: .22em;
	opacity: 0;
	animation: hpIntroFadeUp .9s ease forwards .5s;
}

.hp-intro__headline {
	margin: 0;
	color: #fff;
	font-family: var(--hp-serif);
	font-size: clamp(32px, 5.4vw, 72px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .02em;
	opacity: 0;
	animation: hpIntroHeadline 1.1s cubic-bezier(.2, .7, .2, 1) forwards .65s;
}

.hp-intro__headline em {
	font-style: normal;
	color: #ff5a5f;
}

@keyframes hpIntroFadeUp {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes hpIntroHeadline {
	0%   { opacity: 0; transform: translateY(26px) scale(.985); }
	100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.hp-intro__textflow-track,
	.hp-intro__imgflow-track { animation: none; }
	.hp-intro__panels > span { animation-delay: calc(1.6s + var(--i) * .06s); }
}

/* パネルを互い違いに（奇数=上へ / 偶数=下へ）開いて、より凝ったカーテンに */
.hp-intro__panels > span {
	animation-delay: calc(3.0s + var(--i) * .1s);
}
.hp-intro__panels > span:nth-child(even) {
	animation-name: hpIntroPanelDown;
}
@keyframes hpIntroPanelDown {
	to { transform: translateY(101%); }
}

/* =========================================================
   オープニング：つくば市の認可保育園を明確に（金の下線アクセント）
   ========================================================= */
.hp-intro__place {
	display: inline-block;
	position: relative;
	margin: 0 0 24px;
	padding-bottom: 15px;
	color: #fff;
	font-family: var(--hp-serif);
	font-size: clamp(21px, 2.8vw, 35px);
	font-weight: 700;
	letter-spacing: .16em;
	text-shadow: 0 4px 20px rgba(0, 0, 0, .5);
	opacity: 0;
	animation: hpIntroFadeUp 1s ease forwards .35s;
}

.hp-intro__place em {
	font-style: normal;
	color: #ecc474;
}

.hp-intro__place::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 66px;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(236, 196, 116, .95), transparent);
	box-shadow: 0 0 10px rgba(236, 196, 116, .5);
}

/* kicker は見出し下の補足に */
.hp-intro__center .hp-intro__kicker {
	margin: 22px 0 0;
	animation-delay: 1s;
}

/* =========================================================
   年齢ゲージ：クリックで動画が切り替わることを明示
   ========================================================= */
.hp-story-hero > .hp-age-story .hp-age-story__guide {
	position: absolute;
	top: -32px;
	left: 0;
	z-index: 6;
	display: inline-flex;
	align-items: center;
	gap: 11px;
	margin: 0;
	color: rgba(255, 255, 255, .95);
	font-family: var(--hp-serif);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	text-shadow: 0 2px 12px rgba(0, 0, 0, .72);
	white-space: nowrap;
}

.hp-age-story__guide em { font-style: normal; color: #ff6b70; }

.hp-age-story__guide-tap {
	position: relative;
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
}

.hp-age-story__guide-tap::before {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: #ff3b41;
	box-shadow: 0 0 8px rgba(255, 59, 65, .9);
}

.hp-age-story__guide-tap::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1.5px solid #ff3b41;
	animation: hpTapPulse 1.8s ease-out infinite;
}

@keyframes hpTapPulse {
	0%   { transform: scale(.5); opacity: .95; }
	100% { transform: scale(2.1); opacity: 0; }
}

.hp-story-hero > .hp-age-story .hp-age-story__btn { cursor: pointer; }
@media (hover: hover) {
	.hp-story-hero > .hp-age-story .hp-age-story__item:not(.is-active) .hp-age-story__btn:hover { transform: translateY(-2px); }
}
.hp-story-hero > .hp-age-story .hp-age-story__btn:hover .hp-age-story__label { color: #fff; }

@media (max-width: 768px) {
	.hp-story-hero > .hp-age-story .hp-age-story__guide { font-size: 11px; top: -26px; }
}

/* =========================================================
   ヒーロー：AGE STORY枠を流用した日本語見出し＋4施設アピール
   ========================================================= */
/* 日本語見出しが収まるよう左右paddingを調整（main.css の padding を上書き）*/
.hp-story-hero__content {
	padding-left: 0;
	padding-right: clamp(28px, 4vw, 72px);
}

.hp-story-hero__title--jp {
	font-size: clamp(52px, 6vw, 90px);
	line-height: 1.06;
	letter-spacing: .015em;
}

/* 羅針盤メッセージの「4」を強調＝4施設の存在をアピール */
.hp-hero-message strong {
	font-family: var(--hp-roman);
	font-size: 1.95em;
	font-weight: 700;
	color: #ecc474;
	line-height: 1;
	margin-right: .05em;
	text-shadow: 0 0 18px rgba(236, 196, 116, .5);
}

/* =========================================================
   羅針盤を施設スライダーに（円内に施設写真＋園名は文字切替）
   ※ 既存の羅針盤の位置・金の装飾枠はそのまま＝バランス不変
   ========================================================= */
.hp-hero-facgal { display: block; overflow: visible; }

.hp-hero-facgal__circle {
	position: absolute;
	inset: 5px;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: inset 0 0 0 1px rgba(207, 170, 104, .3);
}

.hp-hero-facgal__img {
	position: absolute;
	inset: 0;
	opacity: 0;
	transform: scale(1.06);
	transition: opacity 1s ease, transform 7s ease;
}

.hp-hero-facgal__img.is-active { opacity: 1; transform: scale(1); }
.hp-hero-facgal__img img { width: 100%; height: 100%; object-fit: cover; }

.hp-hero-facgal__cap {
	position: absolute;
	top: calc(100% + 16px);
	left: 50%;
	transform: translateX(-50%);
	width: 250px;
	text-align: center;
}

.hp-hero-facgal__label {
	display: block;
	margin-bottom: 7px;
	color: rgba(236, 196, 116, .85);
	font-family: var(--hp-roman);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .2em;
}

.hp-hero-facgal__name {
	display: block;
	color: #fff;
	font-family: var(--hp-serif);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: .02em;
	text-shadow: 0 2px 12px rgba(0, 0, 0, .55);
	transition: opacity .35s ease, transform .35s ease;
}

.hp-hero-facgal__name.is-switching { opacity: 0; transform: translateY(7px); }

.hp-hero-facgal__area {
	display: block;
	margin-top: 4px;
	color: rgba(255, 255, 255, .72);
	font-size: 11px;
	letter-spacing: .03em;
	transition: opacity .35s ease;
}

.hp-hero-facgal__area.is-switching { opacity: 0; }

.hp-hero-facgal__dots {
	position: absolute;
	top: calc(100% + 88px);
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 8px;
}

.hp-hero-facgal__dot {
	width: 7px;
	height: 7px;
	padding: 0;
	border: 1px solid rgba(207, 170, 104, .6);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.hp-hero-facgal__dot.is-active {
	background: #ecc474;
	border-color: #ecc474;
	box-shadow: 0 0 9px rgba(236, 196, 116, .85);
}

/* =========================================================
   羅針盤スライダーを初期LPの金・上品な質感に精緻化（C案）
   ========================================================= */
/* 写真は内側に少し下げ、金の二重リングで縁取る */
.hp-hero-facgal__circle {
	inset: 7px;
	box-shadow:
		inset 0 0 0 1px rgba(236, 196, 116, .6),
		0 0 0 1px rgba(207, 170, 104, .28),
		0 14px 34px rgba(0, 0, 0, .5);
}

/* 上品なヴィネット＋下部の暗がりで金装飾に馴染ませる */
.hp-hero-facgal__circle::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	z-index: 2;
	pointer-events: none;
	background:
		radial-gradient(circle at 50% 36%, transparent 42%, rgba(18, 11, 7, .5) 100%),
		linear-gradient(to top, rgba(18, 11, 7, .55), transparent 52%);
}

.hp-hero-facgal__img img {
	filter: saturate(.9) contrast(1.02) brightness(.96);
}

/* キャプション：初期LPの金トーンに */
.hp-hero-facgal__label {
	color: rgba(236, 196, 116, .9);
	letter-spacing: .24em;
}

.hp-hero-facgal__name {
	font-size: 18px;
	letter-spacing: .04em;
}

.hp-hero-facgal__area {
	color: rgba(236, 196, 116, .62);
}

/* ドットも金で統一（既存指定を補強） */
.hp-hero-facgal__dot { border-color: rgba(207, 170, 104, .55); }
.hp-hero-facgal__dot.is-active { background: #ecc474; border-color: #ecc474; box-shadow: 0 0 9px rgba(236, 196, 116, .85); }

/* =========================================================
   OUR STRENGTHS：線画イラストアイコン（はんこ風の文字をやめる）
   ========================================================= */
.hp-strength-card .hp-strength-card__icon {
	width: 58px;
	height: 58px;
	margin: 0 auto 16px;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: var(--hp-red);
}

.hp-strength-card__icon svg {
	width: 100%;
	height: 100%;
	display: block;
	overflow: visible;
}

.hp-strength-card:hover .hp-strength-card__icon {
	transform: scale(1.08) rotate(-2deg);
	border-color: transparent;
	background: transparent;
	box-shadow: none;
}

/* =========================================================
   ヒーロー見出し：文字切り替え式（AGE STORY配色・行マスク立ち上げ）
   ========================================================= */
.hp-titlerot {
	position: relative;
	margin: 0;
	min-height: 2.18em;
	font-family: var(--hp-serif);
	font-weight: 700;
	font-size: clamp(50px, 5.8vw, 84px);
	line-height: 1.07;
	letter-spacing: .012em;
}

.hp-titlerot__item {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
}

.hp-titlerot__line {
	display: block;
	overflow: hidden;
	width: -moz-fit-content;
	width: fit-content;
	padding: .09em .14em;
	margin: -.09em -.14em;
}

.hp-titlerot__line b {
	display: inline-block;
	font-style: normal;
	color: #fff;
	text-shadow: 0 12px 34px rgba(0, 0, 0, .44);
	transform: translateY(120%);
	transition: transform .92s cubic-bezier(.16, 1, .3, 1);
	will-change: transform;
}

.hp-titlerot__line--accent b {
	color: #e00008;
	text-shadow: 0 8px 30px rgba(158, 0, 0, .34);
}

.hp-titlerot__item.is-active .hp-titlerot__line b { transform: translateY(0); }
.hp-titlerot__item.is-active .hp-titlerot__line--accent b { transition-delay: .12s; }
.hp-titlerot__item.is-leaving .hp-titlerot__line b {
	transform: translateY(-120%);
	transition: transform .85s cubic-bezier(.5, 0, .2, 1);
}
.hp-titlerot__item.is-leaving .hp-titlerot__line--accent b { transition-delay: .05s; }

/* =========================================================
   最終調整：見出しローテーターの重なり防止＋施設ドット整列
   ========================================================= */
/* 待機状態は transition なし＝退場後の戻りで文字がロールして見えない（重なり防止）*/
.hp-titlerot__line b {
	transition: none;
}
.hp-titlerot__item.is-active .hp-titlerot__line b {
	transition: transform .92s cubic-bezier(.16, 1, .3, 1);
}
.hp-titlerot__item.is-leaving .hp-titlerot__line b {
	transition: transform .85s cubic-bezier(.5, 0, .2, 1);
}

/* 施設ドットはキャプション内で中央整列（重なり解消）*/
.hp-hero-facgal__dots {
	position: static;
	display: flex;
	justify-content: center;
	gap: 8px;
	margin: 13px 0 0;
	transform: none;
}

/* =========================================================
   見出しローテーター：重なり防止の最終方式
   （行ロールをやめ、アイテム単位でフェード＋立ち上げ＋ブラー。退場は素早く消える）
   ========================================================= */
.hp-titlerot__line {
	display: block;
	overflow: visible;
	width: auto;
	padding: 0;
	margin: 0;
}
.hp-titlerot__line b {
	display: inline;
	transform: none;
	transition: none;
	text-shadow: 0 12px 34px rgba(0, 0, 0, .44);
}
.hp-titlerot__line--accent b {
	color: #e00008;
	text-shadow: 0 8px 30px rgba(158, 0, 0, .34);
}

.hp-titlerot__item {
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
	transform: translateY(30px);
	filter: blur(10px);
	transition: none;
}
.hp-titlerot__item.is-active {
	opacity: 1;
	transform: translateY(0);
	filter: blur(0);
	transition: opacity .9s ease, transform 1.05s cubic-bezier(.16, 1, .3, 1), filter .9s ease;
}
.hp-titlerot__item.is-leaving {
	opacity: 0;
	transform: translateY(-18px);
	filter: blur(6px);
	transition: opacity .45s ease, transform .8s ease, filter .45s ease;
}

/* =========================================================
   施設スライダーを上げ＋コンパクト化（短い画面で年齢バーと重ならない）
   ========================================================= */
.hp-hero-facgal {
	top: clamp(168px, 22vh, 246px);
}
.hp-hero-facgal__cap {
	top: calc(100% + 12px);
}
.hp-hero-facgal__label { margin-bottom: 5px; }
.hp-hero-facgal__name { font-size: 16px; }
.hp-hero-facgal__area { margin-top: 2px; }
.hp-hero-facgal__dots { margin-top: 10px; }

@media (max-height: 760px) {
	.hp-hero-facgal { top: clamp(120px, 16vh, 190px); }
	.hp-hero-facgal__label { font-size: 9px; margin-bottom: 4px; }
	.hp-hero-facgal__name { font-size: 15px; }
	.hp-hero-facgal__dots { margin-top: 8px; }
}

/* 見出しローテーター：折返さない（3行はみ出し防止）＋サイズ微調整 */
.hp-titlerot { font-size: clamp(46px, 5.4vw, 78px); }
.hp-titlerot__line { white-space: nowrap; }

/* =========================================================
   年齢ボタンをもっと目立たせる（クリックできると分かるように）
   ========================================================= */
.hp-story-hero > .hp-age-story .hp-age-story__btn { cursor: pointer; }
.hp-story-hero > .hp-age-story .hp-age-story__label {
	color: rgba(255, 255, 255, .96);
	font-weight: 700;
}
.hp-story-hero > .hp-age-story .hp-age-story__en {
	color: rgba(255, 255, 255, .6);
}
@media (hover: hover) {
	.hp-story-hero > .hp-age-story .hp-age-story__item:not(.is-active) .hp-age-story__btn:hover {
		transform: translateY(-3px);
	}
}
.hp-story-hero > .hp-age-story .hp-age-story__item:not(.is-active) .hp-age-story__btn:hover .hp-age-story__label {
	color: #fff;
	text-shadow: 0 0 12px rgba(255, 255, 255, .6);
}
/* 各年齢の点を少し大きく・縁取り、押せる雰囲気に */
.hp-story-hero > .hp-age-story .hp-age-story__dot {
	box-shadow: 0 0 0 4px rgba(255, 255, 255, .1);
}
/* ガイド文をもう一段はっきり */
.hp-story-hero > .hp-age-story .hp-age-story__guide {
	font-size: 13.5px;
	color: #fff;
}

/* =========================================================
   年齢の白い点に「押せる」サイン（脈動の波紋＋ホバー反応）
   ========================================================= */
.hp-story-hero > .hp-age-story .hp-age-story__item:not(.is-active) .hp-age-story__dot::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 100%;
	height: 100%;
	transform: translate(-50%, -50%) scale(.6);
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .6);
	opacity: 0;
	pointer-events: none;
	animation: hpDotInvite 3s cubic-bezier(.22, 1, .25, 1) infinite;
}

/* 左から右へ順に波紋（さりげない誘導）*/
.hp-story-hero > .hp-age-story .hp-age-story__item:nth-child(2):not(.is-active) .hp-age-story__dot::after { animation-delay: .45s; }
.hp-story-hero > .hp-age-story .hp-age-story__item:nth-child(3):not(.is-active) .hp-age-story__dot::after { animation-delay: .9s; }
.hp-story-hero > .hp-age-story .hp-age-story__item:nth-child(4):not(.is-active) .hp-age-story__dot::after { animation-delay: 1.35s; }
.hp-story-hero > .hp-age-story .hp-age-story__item:nth-child(5):not(.is-active) .hp-age-story__dot::after { animation-delay: 1.8s; }
.hp-story-hero > .hp-age-story .hp-age-story__item:nth-child(6):not(.is-active) .hp-age-story__dot::after { animation-delay: 2.25s; }

@keyframes hpDotInvite {
	0%   { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
	22%  { opacity: .7; }
	100% { opacity: 0; transform: translate(-50%, -50%) scale(3.4); }
}

/* ホバーで点が膨らみ、押せると明確に（マウス端末のみ。タッチでは hover が
   貼り付き拡大したまま残るため (hover: hover) で限定） */
@media (hover: hover) {
	.hp-story-hero > .hp-age-story .hp-age-story__btn:hover .hp-age-story__dot {
		transform: scale(1.25);
		box-shadow: 0 0 0 3px rgba(255, 255, 255, .12), 0 0 10px rgba(255, 255, 255, .45);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hp-story-hero > .hp-age-story .hp-age-story__item:not(.is-active) .hp-age-story__dot::after { animation: none; }
}

/* =========================================================
   年齢ボタンの当たり判定修正＋概要の重なり解消
   概要テキスト・大ラベルがボタンに被ってクリックを奪っていたため、
   クリックを通し（pointer-events:none）、概要を少し下げる。
   ========================================================= */
.hp-story-hero > .hp-age-story .hp-age-story__summary,
.hp-story-hero > .hp-age-story .hp-age-story__active-label,
.hp-story-hero > .hp-age-story .hp-age-story__guide {
	pointer-events: none;
}

.hp-story-hero > .hp-age-story .hp-age-story__summary {
	top: 150px;
}

/* =========================================================
   スマホ：施設スライダーの円はヒーロー中央に重なって崩れるため非表示
   （施設は下の OUR FACILITIES セクションで写真表示）
   ========================================================= */
@media (max-width: 820px) {
	.hp-hero-facgal { display: none !important; }
}

/* =========================================================
   スマホ：TOPビューのバランス調整（年齢切替をボトムナビ上に収める）
   ========================================================= */
@media (max-width: 768px) {
	/* ヒーローを画面ぴったり（100vh）に収める＝下端基準の年齢バーが画面外に出ない */
	.hp-story-hero {
		min-height: 100vh;
		min-height: 100dvh;
		height: auto;
	}
	.hp-story-hero__content {
		min-height: 0 !important;
		padding-bottom: 60px !important;
	}
	/* 見出しを少しコンパクトに */
	.hp-titlerot { font-size: clamp(38px, 11vw, 48px); }
	/* note はガイドと内容が重複するため非表示にして縦を詰める */
	.hp-story-hero__note { display: none; }
	.hp-story-hero__content { padding-top: 104px; }

	/* 年齢バーをボトムナビ（約68px）の上に確実に収める */
	.hp-story-hero > .hp-age-story {
		bottom: 96px !important;
		height: 150px !important;
	}
	/* 概要を画面内に戻す（PC用の top:150 を打ち消す）*/
	.hp-story-hero > .hp-age-story .hp-age-story__summary {
		top: 80px !important;
	}
	/* 「〇歳児の保育」(h2)は省き、その分のスペースに年齢ごとの特色（説明文）を小さく表示 */
	.hp-story-hero > .hp-age-story .hp-age-story__summary h2 {
		display: none !important;
	}
	.hp-story-hero > .hp-age-story .hp-age-story__summary p:last-child {
		display: block !important;
		margin-top: 1px;
		font-size: 11.5px;
		line-height: 1.5;
		opacity: .88;
		max-width: 88vw;
	}
}

/* =========================================================
   年齢バー 入場演出 v4「灯りが宿る」
   （オープニング後 .is-loaded から1回・上品でゆったり）
   サイトの金色・明朝の世界観に合わせ、ベースラインが静かに広がり、
   灯りが一つずつ柔らかく宿り、ラベルがそっと立ち上がる。
   ========================================================= */

/* スイープ（閃光）は不使用 */
.hp-story-hero > .hp-age-story .hp-age-story__sweep { display: none !important; }

/* 1) 金のベースラインが中央から静かに広がる */
.hp-story-hero.is-loaded > .hp-age-story .hp-age-story__line::before {
	transform-origin: center;
	animation: hpAgeLineGrow 1.15s cubic-bezier(.22, .7, .25, 1) .45s both;
}
@keyframes hpAgeLineGrow {
	0%   { transform: scaleX(0); opacity: 0; }
	35%  { opacity: 1; }
	100% { transform: scaleX(1); opacity: 1; }
}

/* 2) 白点が一つずつ柔らかく灯る（フラッシュ無し・そっと浮かぶ） */
.hp-story-hero.is-loaded > .hp-age-story .hp-age-story__item:not(.is-active) .hp-age-story__dot {
	animation: hpAgeDotKindle .7s cubic-bezier(.22, .7, .25, 1) both;
}
@keyframes hpAgeDotKindle {
	0%   { opacity: 0; transform: scale(.5); }
	100% { opacity: 1; transform: scale(1); }
}

/* 3) ラベル（明朝）がそっと立ち上がる */
.hp-story-hero.is-loaded > .hp-age-story .hp-age-story__label {
	animation: hpAgeLabelRise .7s cubic-bezier(.22, .7, .25, 1) both;
}
@keyframes hpAgeLabelRise {
	0%   { opacity: 0; transform: translateX(-50%) translateY(9px); }
	100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* 中央から外へ、ゆったり広がる stagger（点） */
.hp-story-hero.is-loaded > .hp-age-story .hp-age-story__item:nth-child(2) .hp-age-story__dot { animation-delay: .90s; }
.hp-story-hero.is-loaded > .hp-age-story .hp-age-story__item:nth-child(3) .hp-age-story__dot { animation-delay: 1.05s; }
.hp-story-hero.is-loaded > .hp-age-story .hp-age-story__item:nth-child(4) .hp-age-story__dot { animation-delay: 1.20s; }
.hp-story-hero.is-loaded > .hp-age-story .hp-age-story__item:nth-child(5) .hp-age-story__dot { animation-delay: 1.35s; }
.hp-story-hero.is-loaded > .hp-age-story .hp-age-story__item:nth-child(6) .hp-age-story__dot { animation-delay: 1.50s; }

/* ラベルは点灯に少し続いて */
.hp-story-hero.is-loaded > .hp-age-story .hp-age-story__item:nth-child(1) .hp-age-story__label { animation-delay: .80s; }
.hp-story-hero.is-loaded > .hp-age-story .hp-age-story__item:nth-child(2) .hp-age-story__label { animation-delay: 1.03s; }
.hp-story-hero.is-loaded > .hp-age-story .hp-age-story__item:nth-child(3) .hp-age-story__label { animation-delay: 1.18s; }
.hp-story-hero.is-loaded > .hp-age-story .hp-age-story__item:nth-child(4) .hp-age-story__label { animation-delay: 1.33s; }
.hp-story-hero.is-loaded > .hp-age-story .hp-age-story__item:nth-child(5) .hp-age-story__label { animation-delay: 1.48s; }
.hp-story-hero.is-loaded > .hp-age-story .hp-age-story__item:nth-child(6) .hp-age-story__label { animation-delay: 1.63s; }

/* 4) 選択中（0歳/赤）は中央の起点として、最初に静かに灯る */
.hp-story-hero.is-loaded > .hp-age-story .hp-age-story__item.is-active .hp-age-story__dot {
	animation: hpAgeActiveKindle .75s cubic-bezier(.22, .7, .25, 1) .70s both;
}
@keyframes hpAgeActiveKindle {
	0%   { opacity: 0; }
	100% { opacity: 1; }
}
.hp-story-hero.is-loaded > .hp-age-story .hp-age-story__item.is-active .hp-age-story__dot::after {
	animation: hpAgeActiveGlow 1.1s cubic-bezier(.22, .7, .25, 1) .70s both;
}
@keyframes hpAgeActiveGlow {
	0%   { transform: scale(.45); opacity: 0; }
	60%  { transform: scale(1.18); opacity: 1; }
	100% { transform: scale(1); opacity: 1; }
}
/* 赤の横ビームはゆっくり中央から左右へ */
.hp-story-hero.is-loaded > .hp-age-story .hp-age-story__item.is-active .hp-age-story__dot::before {
	transform-origin: center;
	animation: hpAgeBeamSoft 1.1s cubic-bezier(.22, .7, .25, 1) .75s both;
}
@keyframes hpAgeBeamSoft {
	0%   { transform: translate(-50%, -50%) scaleX(0); opacity: 0; }
	100% { transform: translate(-50%, -50%) scaleX(1); opacity: 1; }
}

/* モーション低減設定では入場演出を無効化 */
@media (prefers-reduced-motion: reduce) {
	.hp-story-hero.is-loaded > .hp-age-story .hp-age-story__line::before,
	.hp-story-hero.is-loaded > .hp-age-story .hp-age-story__item .hp-age-story__dot,
	.hp-story-hero.is-loaded > .hp-age-story .hp-age-story__label,
	.hp-story-hero.is-loaded > .hp-age-story .hp-age-story__item.is-active .hp-age-story__dot::after,
	.hp-story-hero.is-loaded > .hp-age-story .hp-age-story__item.is-active .hp-age-story__dot::before {
		animation: none !important;
	}
}

/* =========================================================
   ヒーロー右下「全編動画をみる」リンク（英語教育ページへ）
   ========================================================= */
.hp-story-hero .hp-hero-fullvideo {
	position: absolute;
	right: clamp(18px, 2.6vw, 38px);
	bottom: clamp(16px, 2.4vh, 26px);
	z-index: 6;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 15px 7px 9px;
	font-family: var(--hp-roman, sans-serif);
	font-size: 12px;
	letter-spacing: .06em;
	line-height: 1;
	color: rgba(255, 255, 255, .92);
	background: rgba(20, 14, 12, .34);
	border: 1px solid rgba(255, 255, 255, .42);
	border-radius: 999px;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	text-decoration: none;
	transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}
.hp-story-hero .hp-hero-fullvideo:hover {
	background: rgba(20, 14, 12, .52);
	border-color: rgba(255, 255, 255, .8);
	color: #fff;
	transform: translateY(-1px);
}
.hp-story-hero .hp-hero-fullvideo__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .55);
}
.hp-story-hero .hp-hero-fullvideo__icon svg {
	width: 9px;
	height: 9px;
	margin-left: 1px;
}
.hp-story-hero .hp-hero-fullvideo__text {
	white-space: nowrap;
}

/* オープニング後にそっと現れる */
.hp-story-hero.is-loaded .hp-hero-fullvideo {
	animation: hpFullvideoIn .6s cubic-bezier(.22, .7, .25, 1) 1.0s both;
}
@keyframes hpFullvideoIn {
	0%   { opacity: 0; transform: translateY(8px); }
	100% { opacity: 1; transform: translateY(0); }
}
.hp-story-hero:not(.is-loaded) .hp-hero-fullvideo { opacity: 0; }

/* モバイルでは少し小さく */
@media (max-width: 768px) {
	.hp-story-hero .hp-hero-fullvideo {
		font-size: 11px;
		padding: 6px 12px 6px 8px;
		right: 14px;
		bottom: 76px; /* ボトムナビと年齢バーを避けて上に */
	}
}

/* =========================================================
   モバイル：アクティブ赤点を横線の軸（top:36px）に揃える＋やや小さく。
   ビームのグローを細く整理して赤線を1本にすっきり見せる。
   ========================================================= */
@media (max-width: 900px) {
	/* 赤丸を少しだけ小さく（大きすぎ対策）。中心は線（36px）に保つ */
	.hp-story-hero > .hp-age-story .hp-age-story__item.is-active .hp-age-story__dot {
		top: 36px;
		width: 18px;
		height: 18px;
		margin: -9px 0 0 -9px;
		border-width: 2px;
	}
	/* 赤ビームは細く・上下グローを抑えて1本の線に見せる */
	.hp-story-hero > .hp-age-story .hp-age-story__item.is-active .hp-age-story__dot::before {
		width: 88px;
		height: 2px;
		box-shadow:
			0 0 6px rgba(255,40,48,.85),
			0 0 12px rgba(210,0,8,.4);
	}
	/* 外周ハローも小さめに */
	.hp-story-hero > .hp-age-story .hp-age-story__item.is-active .hp-age-story__dot::after {
		inset: -10px;
	}
}

/* =========================================================
   赤線は1本に：ライン上の赤い進捗線（line::after）を非表示にし、
   アクティブ点の赤グロー（dot::before ビーム）のみを残す。
   （進捗線とビームが重なって赤線が2本に見えていたため）
   ========================================================= */
.hp-story-hero > .hp-age-story .hp-age-story__line::after {
	display: none !important;
}

/* =========================================================
   幅広い発光（旧 item::after ビーム）はオフ。dot::before の細いビーム1本のみ。
   その細いビームを「もっとしっかり横へ伸ばし」、押下時に点から左右へ伸び広がる。
   ・白い芯は入れず、紅い細い光が端へフェード。
   ========================================================= */
.hp-story-hero .hp-age-story .hp-age-story__item.hp-ages__item.is-active::after {
	display: none !important;
}

/* 細いビームを長く（横へしっかり伸びる）。白芯なし・端フェード */
.hp-story-hero > .hp-age-story .hp-age-story__item.is-active .hp-age-story__dot::before {
	width: min(40vw, 480px);
	height: 3px;
	background: linear-gradient(90deg,
		rgba(210, 0, 8, 0) 0%,
		rgba(255, 40, 48, .5) 28%,
		rgba(255, 72, 78, .96) 50%,
		rgba(255, 40, 48, .5) 72%,
		rgba(210, 0, 8, 0) 100%);
	box-shadow:
		0 0 8px rgba(255, 40, 48, .85),
		0 0 22px rgba(214, 2, 10, .5);
	transition: width .35s ease;
}

/* ①まず赤い丸が灯る（控えめに：跳ねず、そっと出る。遅延なしで点滅も防止） */
.hp-story-hero.is-loaded > .hp-age-story .hp-age-story__item.is-active .hp-age-story__dot {
	animation: hpDotLightFirst .4s cubic-bezier(.2, .8, .25, 1) both;
}
@keyframes hpDotLightFirst {
	0%   { opacity: 0; transform: scale(.86); }
	100% { opacity: 1; transform: scale(1); }
}

/* ②点が灯ってから（0.45s後）、光が横へゆっくり伸びていく */
.hp-story-hero.is-loaded > .hp-age-story .hp-age-story__item.is-active .hp-age-story__dot::before {
	transform-origin: center;
	animation: hpBeamExtend 1.05s cubic-bezier(.25, .7, .3, 1) .45s both;
}
@keyframes hpBeamExtend {
	0%   { transform: translate(-50%, -50%) scaleX(0); opacity: 0; }
	18%  { opacity: 1; }
	100% { transform: translate(-50%, -50%) scaleX(1); opacity: 1; }
}

/* マウスを合わせると光がさらに横へ伸びる（マウス端末のみ・控えめに） */
@media (hover: hover) {
	.hp-story-hero > .hp-age-story .hp-age-story__item.is-active .hp-age-story__btn:hover .hp-age-story__dot::before {
		width: min(46vw, 540px);
	}
}

/* モバイルは伸び幅を控えめに（広すぎ対策でさらに短く） */
@media (max-width: 900px) {
	.hp-story-hero > .hp-age-story .hp-age-story__item.is-active .hp-age-story__dot::before {
		width: min(42vw, 170px);
	}
}

/* =========================================================
   TOP: 内部リンク強化（各セクションCTA / サイト内ガイド）
   ========================================================= */
.hp-story-link--center {
	display: flex;
	width: -moz-max-content;
	width: max-content;
	margin: 26px auto 0;
}
.hp-section-copy .hp-story-link { margin-top: 22px; }

/* サイト内ガイド（EXPLORE MORE） */
.hp-sitehub { background: #f7f3ec; }
.hp-sitehub__head { text-align: center; max-width: 720px; margin: 0 auto 46px; }
.hp-sitehub__head h2 {
	font-family: var(--hp-serif, "Shippori Mincho", serif);
	font-size: clamp(26px, 3.6vw, 38px);
	color: #2a1f1a;
	margin: 10px 0 14px;
}
.hp-sitehub__head p { color: rgba(42, 31, 26, .7); font-size: 14px; }
.hp-sitehub__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
	gap: 14px;
}
.hp-sitehub__link {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 20px 22px;
	background: #fff;
	border: 1px solid rgba(122, 90, 55, .2);
	border-radius: 14px;
	text-decoration: none;
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.hp-sitehub__link:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 30px rgba(52, 37, 25, .12);
	border-color: rgba(180, 21, 22, .5);
}
.hp-sitehub__en {
	font-family: var(--hp-roman, "Cormorant Garamond", serif);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .18em;
	color: var(--hp-red, #b41516);
	min-width: 76px;
}
.hp-sitehub__jp { flex: 1; font-size: 15px; font-weight: 600; color: #2a1f1a; }
.hp-sitehub__arrow { color: var(--hp-red, #b41516); transition: transform .22s ease; }
.hp-sitehub__link:hover .hp-sitehub__arrow { transform: translateX(5px); }
@media (max-width: 600px) {
	.hp-sitehub__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
	.hp-sitehub__link { flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; }
	.hp-sitehub__en { min-width: 0; }
}

/* サイト内ガイド：PC は左の固定サイドバー(96px)を避ける */
@media (min-width: 901px) {
	.hp-sitehub .hp-redesign-container { padding-left: 60px; }
}

/* =========================================================
   固定左レール(96px)回避: 1280px級ノートPCで本文が
   レール下に潜り込まないよう、左右余白を 120px 確保する
   （レールが縦型になる 901px 以上のみ / SPは従来どおり）
   ========================================================= */
@media (min-width: 901px) {
	.hp-redesign-container {
		width: min(1180px, calc(100% - 240px));
	}
}


/* =========================================================
   SPヒーロー: 元のフルスクリーン構成のまま動画をレターボックス帯に
   （2026-07-16）。テキストの重ね・年齢バー・演出は元のまま、
   動画だけを中央の 16:10 帯にして見切れなく大きく見せる。
   ========================================================= */
@media (max-width: 768px) {
	.hp-story-hero {
		background:
			radial-gradient(120% 90% at 50% 0%, rgba(207, 170, 104, .12), transparent 62%),
			#1d120e;
	}
	.hp-story-hero__media {
		/* 上=固定ヘッダー直下 〜 下=年齢バー直前まで、帯いっぱいに使う */
		inset: auto;
		left: 0;
		right: 0;
		top: 122px;
		bottom: 276px;
		height: auto;
		aspect-ratio: auto;
		transform: none;
		border-top: 2px solid rgba(207, 170, 104, .55);
		border-bottom: 2px solid rgba(207, 170, 104, .55);
		box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
	}
	/* サイト共通の額装: 四隅チック（白のコーナーブラケット） */
	.hp-story-hero__media::before {
		content: "";
		position: absolute;
		inset: 10px;
		z-index: 2;
		pointer-events: none;
		background:
			linear-gradient(rgba(255, 255, 255, .62), rgba(255, 255, 255, .62)) left top / 20px 1px,
			linear-gradient(rgba(255, 255, 255, .62), rgba(255, 255, 255, .62)) left top / 1px 20px,
			linear-gradient(rgba(255, 255, 255, .62), rgba(255, 255, 255, .62)) right top / 20px 1px,
			linear-gradient(rgba(255, 255, 255, .62), rgba(255, 255, 255, .62)) right top / 1px 20px,
			linear-gradient(rgba(255, 255, 255, .62), rgba(255, 255, 255, .62)) left bottom / 20px 1px,
			linear-gradient(rgba(255, 255, 255, .62), rgba(255, 255, 255, .62)) left bottom / 1px 20px,
			linear-gradient(rgba(255, 255, 255, .62), rgba(255, 255, 255, .62)) right bottom / 20px 1px,
			linear-gradient(rgba(255, 255, 255, .62), rgba(255, 255, 255, .62)) right bottom / 1px 20px;
		background-repeat: no-repeat;
	}
	/* 帯上部スクリム（リード文の可読性）＋左上に赤の短いライン（サイトの赤線モチーフ） */
	.hp-story-hero__media::after {
		content: "";
		position: absolute;
		inset: 0;
		background:
			linear-gradient(var(--hp-red-line, #b40000), var(--hp-red-line, #b40000)) 22px 0 / 46px 3px no-repeat,
			linear-gradient(180deg, rgba(20, 10, 8, .68) 0%, rgba(20, 10, 8, .32) 30%, transparent 56%, rgba(20, 10, 8, .38) 100%);
		pointer-events: none;
	}
}

/* =========================================================
   ヒーロー動画の「えもい」演出 v3（2026-07-17）
   劣化フィルム風（傷・フリッカー）は却下→思い出のホームビデオ調:
   淡く退色した色 + 金色の光のにじみ + ドリーミーなソフトヘイズ +
   ごく薄いグレイン + やわらかなビネット
   ========================================================= */
/* 0歳の動画は完成度が高いため素のまま。演出は1〜5歳のみ */
.hp-story-hero__video:not([data-current-age="0"]) {
	/* 彩度は落とさない（2026-07-17指示）。淡さはコントラスト低下+わずかな暖色で出す */
	filter: contrast(.94) brightness(1.04) sepia(.12) saturate(1.06);
}
.hp-story-hero__video[data-current-age="0"] + .hp-story-hero__grain {
	display: none;
}

/* 容器: やわらかいビネットのみ（暗い縁で記憶の中の映像っぽく） */
.hp-story-hero__grain {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: radial-gradient(118% 118% at 50% 42%, transparent 60%, rgba(46, 24, 12, .4) 100%);
}

/* 金色の光のにじみ + 上からのソフトヘイズ（ゆっくり漂う） */
.hp-story-hero__grain::before {
	content: "";
	position: absolute;
	inset: -15%;
	background:
		radial-gradient(52% 42% at 78% 6%, rgba(255, 198, 122, .48), transparent 72%),
		radial-gradient(40% 34% at 10% 92%, rgba(255, 224, 172, .3), transparent 70%),
		radial-gradient(75% 55% at 50% 0%, rgba(255, 246, 228, .26), transparent 76%);
	mix-blend-mode: screen;
	animation: hpEmoiDrift 14s ease-in-out infinite alternate;
}

/* ごく薄い微細グレイン（質感の統一だけ、主張しない） */
.hp-story-hero__grain::after {
	content: "";
	position: absolute;
	inset: 0;
	mix-blend-mode: overlay;
	opacity: .13;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>") repeat;
	background-size: 140px 140px;
	animation: hpEmoiGrain 1.4s steps(4) infinite;
}

@keyframes hpEmoiDrift {
	from { transform: translate3d(-2%, -1%, 0) scale(1);    opacity: .7; }
	to   { transform: translate3d(2%, 1.5%, 0) scale(1.06); opacity: 1; }
}

@keyframes hpEmoiGrain {
	to { background-position: 140px 96px; }
}

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

/* SP: 年齢バーのガイド文が右で見切れないように（2026-07-17） */
@media (max-width: 768px) {
	.hp-story-hero > .hp-age-story .hp-age-story__guide {
		left: 0;
		right: 0;
		max-width: none;
	}
	.hp-story-hero > .hp-age-story .hp-age-story__guide-text {
		white-space: normal;
		font-size: 10.5px;
		letter-spacing: .02em;
		line-height: 1.5;
	}
}