@charset "utf-8";

/* =========================================================
   PC — comp width 1920px. 1 comp px = var(--u) (0.0520833vw)
   ========================================================= */

.page { position: relative; overflow: hidden; }

/*-----------
header
-----------*/
header {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 50;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}
header .logo {
	display: block;
	line-height: 0;
	width: calc(135 * var(--uc));
	margin: calc(-34 * var(--uc)) 0 0 calc(18 * var(--uc));
}
header .header-right {
	display: flex;
	align-items: center;
	gap: calc(15 * var(--uc));
	margin: calc(15 * var(--uc)) calc(20 * var(--uc)) 0 0;
}

header .share { display: flex; gap: calc(15 * var(--uc)); }
/* icons are complete badges (disc included) as exported, so the anchor is just a
   box — no disc background or per-icon glyph sizing needed here */
header .share a,
.menu_sp .share_sp a {
	display: block;
	width: calc(34 * var(--uc));
	height: calc(34 * var(--uc));
	transition: transform 0.25s ease;
}
header .share a:hover { transform: translateY(-2px); }
header .share img,
.menu_sp .share_sp img { width: 100%; height: 100%; display: block; }

/* pill matched to the shinobu site: 34 tall with its tighter internal spacing.
   Width follows the content rather than a fixed 307, so the globe, label and three
   codes always fit however the spacing is tuned. */
header .language {
	display: flex;
	align-items: center;
	justify-content: center;
	height: calc(34 * var(--uc));
	padding: 0 calc(15 * var(--uc));
	gap: calc(6 * var(--uc));
	background: #000;
	border-radius: 100px;
	font-size: calc(15 * var(--uc));
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}
header .language .lang-icon {
	display: flex;
	width: calc(17 * var(--uc));
	height: calc(17 * var(--uc));
	margin-right: calc(3 * var(--uc));
}
header .language .lang-icon svg { width: 100%; height: 100%; fill: #fff; }
header .language .label { margin-right: calc(8 * var(--uc)); letter-spacing: 0.02em; }
header .language li + li + li + li::before { content: "|"; margin-right: calc(4 * var(--uc)); opacity: 0.9; }
header .language .active a { color: #00ccbb; }
header .language a:hover { opacity: 0.7; }

.btn_nav { display: none; }
.menu_sp { display: none; }

/*-----------
MV
-----------*/
#mv {
	position: relative;
	width: 100%;
	aspect-ratio: 1920 / 1266;
	/* the 1266 comp is taller than a 1080p screen, which left the CTA below the
	   fold. Cap at the viewport and the mask (percentage-based) still completes. */
	max-height: 100vh;
	overflow: hidden;
	z-index: 2;
}
.mv-media {
	position: absolute;
	inset: 0;
	-webkit-mask-image: linear-gradient(to bottom, #000 68%, rgba(0, 0, 0, 0.5) 87%, transparent 98%);
	mask-image: linear-gradient(to bottom, #000 68%, rgba(0, 0, 0, 0.5) 87%, transparent 98%);
}
.mv-media img {
	position: absolute;
	left: 0;
	top: calc(-106 * var(--u));
	width: 100%;
	display: block;
}
.mv-ghost {
	position: absolute;
	inset: 0;
	font-family: var(--serif);
	font-weight: 700;
	color: rgba(255, 255, 255, 0.4);
	text-align: center;
	line-height: 1;
}
.mv-ghost span {
	position: absolute;
	left: 0;
	width: 100%;
	transform: translateY(-50%);
	white-space: nowrap;
}
.ghost-name {
	top: calc(337.5 * var(--u));
	font-size: calc(150 * var(--u));
	letter-spacing: calc(34.5 * var(--u));
	/* a touch crisper than a strict size-proportional match to the sub's 2px,
	   which at this 150px type came out too soft to read */
	filter: blur(2.5px);
}
.ghost-sub {
	top: calc(473.57 * var(--u));
	font-size: calc(80 * var(--u));
	letter-spacing: calc(36 * var(--u));
	filter: blur(2px);
}

/* pinned to the hero's bottom at its full comp height, so the children keep their
   comp top offsets and the whole block rides up intact when the hero is capped */
.mv-title { position: absolute; inset: auto 0 0 0; height: calc(1266 * var(--u)); z-index: 3; }
/* Load-in cascade, back to front: background type, product info, then the CTA.
   A CSS animation rather than the .fadein/.scrollin pair because that waits on
   final.js, which sits behind four blocking CDN scripts — about 1.3s of nothing. */
@keyframes kv-in { from { opacity: 0; } to { opacity: 1; } }
.mv-ghost { animation: kv-in 1.2s ease both; }
.mv-title { animation: kv-in 1.2s ease 0.45s both; }
.mv-title .btn { animation: kv-in 1.2s ease 0.9s both; }
@media (prefers-reduced-motion: reduce) {
	.mv-ghost, .mv-title, .mv-title .btn { animation: none; }
}
.mv-title > * {
	position: absolute;
	text-align: right;
	font-family: var(--serif);
	font-weight: 700;
	text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
	white-space: nowrap;
	line-height: 1.5;
}
.mv-title .scale {
	right: calc(37 * var(--u));
	top: calc(828 * var(--u));
	transform: translateY(-50%);
	font-size: calc(24 * var(--u));
	color: #fff;
}
.mv-title .name {
	right: calc(22 * var(--u));
	top: calc(828 * var(--u));
	font-size: calc(120 * var(--u));
	color: var(--light);
}
.mv-title .name .miku { letter-spacing: calc(-18 * var(--u)); }
.mv-title .sub {
	right: calc(36 * var(--u));
	top: calc(1028 * var(--u));
	transform: translateY(-50%);
	font-size: calc(48 * var(--u));
	color: var(--light);
}
.mv-title .btn {
	right: calc(40 * var(--u));
	top: calc(1081 * var(--u));
	width: calc(562 * var(--u));
	height: calc(70 * var(--u));
	font-family: var(--sans);
	font-size: calc(20 * var(--u));
	text-shadow: none;
}

/*-----------
shared section furniture
-----------*/
.inner {
	width: 72.1875%;
	max-width: 1386px;
	margin: 0 auto;
	position: relative;
	z-index: 3;
}
.section-title {
	position: relative;
	z-index: 3;
	font-family: var(--serif);
	font-weight: 400;
	font-size: 48px;
	line-height: 1.46;
	text-align: center;
	color: #fff;
	text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}
.section-title-sm { font-size: 36px; }
.heading-deco {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 131px;
	line-height: 0;
	transform: translate(-218px, -50%);
	z-index: -1;
	pointer-events: none;
}
.heading-deco img { width: 100%; }

.deco {
	position: absolute;
	line-height: 0;
	pointer-events: none;
	z-index: 1;
}
.deco img { width: 100%; }

/*-----------
INTRODUCTION
-----------*/
#introduction {
	position: relative;
	padding-bottom: 81px;
	z-index: 2;
}
.sky-band {
	position: absolute;
	left: 0;
	top: -24px;
	width: 100%;
	height: 1134px;
	background: url(../images/sky.jpg) center / cover no-repeat;
	opacity: 0.26;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.58) 21.6%, #000 51.4%, #000 72.1%, transparent 98.6%);
	mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.58) 21.6%, #000 51.4%, #000 72.1%, transparent 98.6%);
	z-index: 0;
}
.deco-fw18-a { left: 10.781%; top: -150px; width: 26.302%; opacity: 0.3; }
.deco-fw06-a { left: 6.833%;  top: -28px;  width: 25.208%; opacity: 0.5; transform: rotate(-26.84deg); }
.deco-fw01-a { left: 28.068%; top: 538px;  width: 26.694%; opacity: 0.4; transform: rotate(49.75deg); }

.intro-inner {
	position: relative;
	z-index: 3;
	display: grid;
	grid-template-columns: calc(62 * var(--u)) calc(938 * var(--u)) 1fr calc(267 * var(--u));
	align-items: start;
}
.intro-figure { grid-column: 2; line-height: 0; }
.intro-figure img { width: 100%; }
.intro-text { grid-column: 3; padding-top: 280px; text-align: right; }

.intro-heading {
	position: relative;
	display: inline-block;
	white-space: nowrap;
	font-family: var(--serif);
	font-weight: 400;
	font-size: 48px;
	line-height: 1.45;
	text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}
.intro-heading .heading-deco {
	width: 160px;
	left: 0;
	top: 0;
	transform: translate(107px, -66px);
}
/* The EN catch copy is ~3x the JP character count, and a nowrap inline-block sets
   the 1fr track's min-content width — which pushed the whole grid past the
   viewport. Let it wrap, and stop the track being sized by its content. */
html:lang(en) .intro-text { min-width: 0; }
html:lang(en) .intro-heading { white-space: normal; }
.intro-body {
	max-width: calc(594 * var(--u));
	margin: 63px 0 0 auto;
	font-size: 16px;
	line-height: 30px;
	text-align: justify;
}
.intro-cta { margin-top: 71px; text-align: center; }
.intro-cta .btn {
	width: 266px;
	height: 55px;
	font-size: 16px;
}

/*-----------
GALLERY
-----------*/
#gallery { position: relative; z-index: 3; padding-bottom: 152px; }
#gallery .section-title { margin-top: 31px; margin-bottom: 44px; }
#gallery .heading-deco { transform: translate(-218px, -66px); }

#gallery .swiper { width: 100%; overflow: visible; }
#gallery .swiper-slide {
	border-radius: 50px;
	overflow: hidden;
	background: #0b2f68;
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
	aspect-ratio: 5 / 7;
}
#gallery .swiper-slide a,
#gallery .swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#gallery .swiper-button-prev,
#gallery .swiper-button-next {
	width: 60px;
	height: 60px;
	color: #fff;
	--swiper-navigation-size: 34px;
	text-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
}
#gallery .swiper-button-prev { left: 20px; }
#gallery .swiper-button-next { right: 20px; }
#gallery .swiper-pagination { display: none; }

/*-----------
RESERVE
-----------*/
#reserve { position: relative; z-index: 3; padding-bottom: 97px; }
.deco-fw26 { left: 53.96%; top: -201px; width: 51.15%; opacity: 0.3; }
#reserve .heading-deco { transform: translate(-492px, -66px); }
.reserve-period {
	margin-top: 44px;
	font-family: var(--serif);
	font-weight: 700;
	font-size: 48px;
	line-height: 1.46;
	text-align: center;
	color: var(--accent);
	text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
	position: relative;
	z-index: 3;
}
.reserve-cta { margin-top: 44px; text-align: center; position: relative; z-index: 3; }
.reserve-cta .btn {
	width: 599px;
	height: 70px;
	font-size: 20px;
}

/*-----------
ONLINE SHOP (white)
-----------*/
#online {
	position: relative;
	z-index: 4;
	background: #fff;
	color: var(--navy);
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
	padding: 68px 0 56px;
}
#online::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url(../images/paper.jpg) center / cover no-repeat;
	opacity: 0.3;
	pointer-events: none;
}
.online-inner {
	position: relative;
	z-index: 1;
	width: 72.1875%;
	max-width: 1386px;
	margin: 0 auto;
}
.online-block + .online-block { margin-top: 82px; }
.online-block h3 {
	font-family: var(--serif);
	font-weight: 700;
	font-size: 32px;
	line-height: 1.4;
	margin-bottom: 11px;
}
.online-block p {
	font-size: 16px;
	line-height: 30px;
	text-align: justify;
}
.online-cta { margin-top: 68px; text-align: center; }
.online-cta .btn {
	width: 285px;
	height: 70px;
	font-size: 20px;
}

/*-----------
SPECIFICATIONS
-----------*/
#specifications { position: relative; z-index: 3; padding: 178px 0 154px; }
.deco-fw01-b { display: none; }
.deco-fw18-b { left: 60.208%; top: 608px; width: 51.771%; opacity: 0.4; }
#specifications .section-title { margin-bottom: 42px; }
#specifications .heading-deco { transform: translate(-188px, -66px); }

.specs-card {
	position: relative;
	z-index: 3;
	width: 72.1875%;
	max-width: 1386px;
	margin: 0 auto;
	/* comp: 66px row pitch with the block inset 80/73, not 9 rows stretched to fill */
	padding: 80px 0 73px;
	border-radius: 100px;
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
	/* Glass: sheen along the top edge, shade at the bottom, over a blurred backdrop.
	   The bottom stop is a dark navy rather than black — the comp's shade drops all
	   three channels by a similar amount, which black (being multiplicative) can't do. */
	background: linear-gradient(to bottom,
		rgba(150, 190, 255, 0.09),
		rgba(150, 190, 255, 0) 7%,
		rgba(9, 52, 120, 0) 93%,
		rgba(9, 52, 120, 0.55));
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	display: grid;
	/* labels end at 14.81%, divider at 20%, values start at 24.81% */
	grid-template-columns: 14.81% 1fr;
	column-gap: 10%;
	grid-auto-rows: 66px;
	align-items: center;
	font-size: 24px;
	line-height: 1.5;
}
/* 1px ring, bright top and bottom and nearly gone at the sides as the comp measures.
   Masked rather than a border-box background layer: the card's fill is transparent, so
   a border-box layer would show through the whole interior instead of just the edge. */
.specs-card::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	/* tinted, not pure white: the comp's edge lifts green and blue more than a white
	   overlay at this alpha can */
	background: linear-gradient(to bottom,
		rgba(156, 204, 252, 0.75),
		rgba(255, 255, 255, 0.03) 18%,
		rgba(255, 255, 255, 0.03) 82%,
		rgba(191, 218, 242, 0.8));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	pointer-events: none;
}

.specs-card::before {
	content: "";
	position: absolute;
	/* 2px in the comp, sitting just left of the 20% column line */
	left: calc(20% - 2px);
	top: 81px;
	bottom: 75px;
	width: 2px;
	background: var(--accent);
}
/* no inline padding: the grid columns are already set to the comp's text-box edges,
   so padding here just shoves the text back off those positions */
.specs-card dt {
	text-align: right;
	color: var(--accent);
}

/*-----------
footer
-----------*/
footer {
	position: relative;
	z-index: 3;
	text-align: center;
	padding-bottom: 94px;
}

/*-----------
sticky preorder bar
-----------*/
#stickybar {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	/* clamped, not raw --u: this is fixed furniture rather than part of the comp's
	   flow, so at 769 it collapsed to a few px and at 2560 it ballooned. Comp value
	   in the middle, bounded at both ends. */
	padding: clamp(10px, calc(16 * var(--u)), 20px) 0;
	display: flex;
	justify-content: center;
	background: rgba(9, 28, 66, 0.92);
	/* under the header's 50 so the mobile menu still opens over it */
	z-index: 45;
	/* holds off until scrolled; visibility so it can't catch clicks while hidden */
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease, visibility 0.4s;
}
#stickybar.visible { opacity: 1; visibility: visible; }
/* 420 floor lines up with the SP rule's max-width, so the button is the same size
   either side of the 768 breakpoint */
.sticky-btn {
	width: clamp(420px, calc(562 * var(--u)), 646px);
	height: clamp(44px, calc(56 * var(--u)), 64px);
	font-size: clamp(14px, calc(18 * var(--u)), 21px);
}
.footer-logo {
	display: block;
	width: 135px;
	margin: 0 auto -26px;
	line-height: 0;
}
.copyright {
	font-size: 10px;
	line-height: 1.4;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
}
.copyright .piapro { width: 40px; }

/* =========================================================
   Tablet / narrow desktop
   ========================================================= */
@media screen and (max-width: 1500px) {
	.inner,
	.online-inner,
	.specs-card { width: 86%; }
	.section-title { font-size: 40px; }
	.section-title-sm { font-size: 32px; }
	.intro-heading { font-size: 40px; }
	.reserve-period { font-size: 40px; }
	.specs-card { font-size: 20px; grid-auto-rows: 72px; }
	.online-block h3 { font-size: 28px; }
	.heading-deco { width: 110px; }
	#gallery .heading-deco { transform: translate(-180px, -50%); }
	#specifications .heading-deco { transform: translate(-155px, -50%); }
	#reserve .heading-deco { transform: translate(-350px, -50%); }
}

@media screen and (max-width: 1100px) {
	.intro-inner { grid-template-columns: 2% 46% 1fr 6%; }
	.intro-text { padding-top: 140px; }
	.intro-body { max-width: none; }
	.section-title { font-size: 34px; }
	.section-title-sm { font-size: 26px; }
	.intro-heading { font-size: 32px; }
	.reserve-period { font-size: 32px; }
	.specs-card { font-size: 17px; grid-auto-rows: 62px; border-radius: 60px; }
	.specs-card::before { top: 50px; bottom: 46px; }
	#reserve .heading-deco { transform: translate(-260px, -50%); }
	.reserve-cta .btn { width: min(599px, 92%); }
}

/* =========================================================
   SP — comp width 393px
   ========================================================= */
@media screen and (max-width: 768px) {
	body { font-size: 12px; }

	/* header */
	header { align-items: center; }
	header .logo { width: 83px; margin: -26px 0 0 4px; }
	header .header-right { margin: 4px 8px 0 0; gap: 0; }
	header .share,
	header .language { display: none; }

	.btn_nav {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		border: 0;
		border-radius: 50%;
		background: #000;
		cursor: pointer;
	}
	.btn_nav span,
	.btn_nav::before,
	.btn_nav::after {
		content: "";
		position: absolute;
		width: 18px;
		height: 2px;
		border-radius: 2px;
		background: #fff;
		transition: transform 0.3s ease, opacity 0.3s ease;
	}
	.btn_nav::before { transform: translateY(-6px); }
	.btn_nav::after { transform: translateY(6px); }
	.btn_nav.active span { opacity: 0; }
	.btn_nav.active::before { transform: rotate(45deg); }
	.btn_nav.active::after { transform: rotate(-45deg); }

	.menu_sp {
		display: block;
		position: absolute;
		/* off the bottom of the header rather than a fixed offset: the burger is
		   flex-centred against the logo-driven header height, so a hardcoded top
		   can't track it and was landing on top of the button */
		top: calc(100% + 4px);
		right: 8px;
		width: 200px;
		padding: 16px;
		border-radius: 12px;
		background: rgba(0, 0, 0, 0.9);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
	}
	.menu_sp.active { opacity: 1; visibility: visible; transform: translateY(0); }
	.language_sp {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		font-size: 13px;
		font-weight: 900;
	}
	.language_sp .label { width: 100%; text-align: center; margin-bottom: 4px; letter-spacing: 0.04em; }
	.language_sp .active a { color: #00ccbb; }
	.share_sp { display: flex; justify-content: center; gap: 12px; margin-top: 14px; }
	.menu_sp .share_sp a { width: 32px; height: 32px; }

	/* MV */
	#mv { aspect-ratio: auto; max-height: none; overflow: visible; }
	.mv-media {
		position: relative;
		width: 100%;
		/* kv_sp.jpg is portrait 1067x1600, so the SP KV is roughly twice the height
		   it was as a landscape crop of the PC art */
		aspect-ratio: 1067 / 1600;
		overflow: hidden;
		-webkit-mask-image: linear-gradient(to bottom, #000 76%, rgba(0, 0, 0, 0.5) 87%, transparent 100%);
		mask-image: linear-gradient(to bottom, #000 76%, rgba(0, 0, 0, 0.5) 87%, transparent 100%);
	}
	.mv-media img { top: 0; }
	/* kv_sp is a flat composite — no cutout figure to layer over the ghost type, so
	   it would read as sitting on top of the art rather than behind it.
	   .mv-media prefix needed: a bare .mv-bg loses to .mv-media img on specificity. */
	.mv-ghost { display: none; }
	.mv-media .mv-bg { display: none; }
	.ghost-name {
		top: 28.3%;
		font-size: 8.14vw;
		letter-spacing: 1.87vw;
		filter: none;
	}
	.ghost-sub {
		top: 39%;
		font-size: 4.07vw;
		letter-spacing: 1.83vw;
		filter: none;
	}

	.mv-title {
		position: static;
		height: auto;
		text-align: center;
		width: 89.8%;
		max-width: 500px;
		margin: 0 auto;
		padding: 0;
	}
	.mv-title > * {
		position: static;
		transform: none;
		text-align: center;
		white-space: normal;
	}
	.mv-title .scale { font-size: 13px; line-height: 1.5; }
	.mv-title .name { font-size: 48px; line-height: 1.5; margin-top: -9px; }
	/* was -3, which pulled the subtitle's glyphs 3px into the title's; +8 gives it
	   air without drifting away from the scale label above */
	.mv-title .sub { font-size: 24px; line-height: 1.5; margin-top: 8px; }
	.mv-title .btn {
		display: flex;
		width: 100%;
		height: 40px;
		margin-top: 14px;
		font-size: 12px;
	}

	/* shared */
	.inner,
	.online-inner,
	.specs-card,
	.intro-inner,
	.section-title,
	.reserve-period,
	.reserve-cta,
	.online-cta,
	.intro-cta {
		width: 89.8%;
		max-width: 500px;
		margin-left: auto;
		margin-right: auto;
	}
	.section-title,
	.section-title-sm { font-size: 26px; line-height: 1.46; }
	.heading-deco { width: 53px; }
	#gallery .heading-deco { transform: translate(-100.5px, -34px); }
	#specifications .heading-deco { transform: translate(-89.5px, -34px); }
	#reserve .heading-deco { transform: translate(112.5px, -8px); }

	/* intro */
	#introduction { padding: 88px 0 20px; }
	.sky-band { top: 32px; height: 1134px; }
	.deco-fw18-a { left: 18.855%; top: 32px;  width: 47.766%; }
	.deco-fw06-a { left: 11.685%; top: 77px;  width: 45.781%; }
	.deco-fw01-a { left: 50.252%; top: 288px; width: 48.478%; }

	.intro-inner { display: block; padding: 0; }
	.intro-figure { width: 98.75%; margin: 0 auto; }
	.intro-text { padding-top: 62px; text-align: left; }
	.intro-heading { font-size: 26px; line-height: 1.45; }
	.intro-heading .heading-deco { width: 73px; transform: translate(204px, -15px); }
	.intro-body { margin-top: 20px; font-size: 12px; line-height: 20px; }
	.intro-cta { margin-top: 38px; }
	.intro-cta .btn { width: 151px; height: 40px; font-size: 12px; }

	/* gallery */
	#gallery { padding-bottom: 49px; }
	#gallery .section-title { margin-bottom: 18px; }
	#gallery .swiper-slide { border-radius: 22px; }
	#gallery .swiper-button-prev,
	#gallery .swiper-button-next { display: none; }
	#gallery .swiper-pagination {
		display: block;
		position: static;
		margin-top: 19px;
	}
	#gallery .swiper-pagination-bullet {
		width: 5px;
		height: 5px;
		background: #fff;
		opacity: 0.35;
	}
	#gallery .swiper-pagination-bullet-active { opacity: 1; background: var(--accent); }

	/* reserve */
	#reserve { padding-bottom: 87px; }
	.deco-fw26 { left: -37.15%; top: 38px; width: 123.155%; }
	.reserve-period { margin-top: 25px; font-size: 20px; line-height: 1.46; }
	.reserve-cta { margin-top: 31px; }
	.reserve-cta .btn { width: 100%; height: 40px; font-size: 12px; }

	/* online */
	#online { padding: 51px 0 52px; }
	.online-block + .online-block { margin-top: 27px; }
	.online-block h3 { font-size: 26px; line-height: 1.45; margin-bottom: 10px; }
	.online-block p { font-size: 12px; line-height: 20px; }
	.online-cta { margin-top: 40px; }
	.online-cta .btn { width: 100%; height: 40px; font-size: 12px; }

	/* specs */
	#specifications { padding: 131px 0 109px; }
	.deco-fw01-b { display: block; left: -12.34%; top: -198px; width: 81.27%; opacity: 0.4; transform: rotate(140deg); }
	.deco-fw18-b { left: 22.392%; top: 728px; width: 108.651%; }
	#specifications .section-title { margin-bottom: 31px; }
	.specs-card {
		display: block;
		/* 52 not 32: the comp sets the first label 62px below the card's top edge */
		padding: 52px 4.2%;
		border-radius: 30px;
		text-align: center;
		font-size: 14px;
		line-height: 20px;
	}
	.specs-card::before { display: none; }
	.specs-card dt {
		text-align: center;
		padding: 0;
		font-weight: 700;
	}
	.specs-card dd { padding: 0; }
	/* 20 gives the comp's 60px row pitch (label 20 + value 20 + gap 20); 25 made it 65
	   and that extra 5px per row was what ate the padding */
	.specs-card dd + dt { margin-top: 20px; }

	/* footer */
	/* 54 as designed, plus the 51px fixed bar so it can't sit over the credits */
	footer { padding-bottom: 110px; }
	.footer-logo { width: 71px; margin-bottom: -9px; }
	.copyright { font-size: 8px; gap: 4px; }
	.copyright .piapro { width: 33px; }

	/* sticky CTA stays on mobile; --u-based sizing collapses to a few px down here,
	   so restate it at the same 35px/12px as the other SP buttons */
	#stickybar { padding: 8px 0; }
	/* 40px floor per review: smaller pills are hard to hit accurately */
	.sticky-btn { width: min(420px, 86%); height: 40px; font-size: 12px; }
}

@media screen and (max-width: 400px) {
	.mv-title .name { font-size: 12.2vw; }
	.mv-title .sub { font-size: 6.1vw; }
	.specs-card { font-size: 13px; }
}

/* =========================================================
   EN spec table — Latin labels run 2-3x the width of the JP ones
   ("Production Cooperation" is 269px against a 205px column at 24px), so they
   crowded the card's left edge. Step the type down to sit inside the comp's
   column widths. Only above the SP breakpoint, where the two-column grid is used.
   ========================================================= */
@media screen and (min-width: 769px) {
	/* 19 rather than 18 on purpose: at 18 the outlier label "Production Cooperation"
	   measures 202px against the 205px column and hugs the card's left edge. At 19 it
	   wraps to two lines (57px, inside the 66px row) and the widest single-line label
	   drops to ~124px, restoring slack comparable to the JP comp's 64px. */
	html:lang(en) .specs-card { font-size: 19px; }
}
@media screen and (min-width: 769px) and (max-width: 1100px) {
	html:lang(en) .specs-card { font-size: 15px; }
}
@media screen and (min-width: 769px) and (max-width: 900px) {
	html:lang(en) .specs-card { font-size: 13px; }
}