/* ---------- Placeholder media ---------- */
.ph {
	position: relative;
	background: linear-gradient(135deg, #dfe3ee 0%, #c9cfe0 50%, #dfe3ee 100%);
	overflow: hidden;
}


/* ---------- Section headings (shared) ---------- */
.section-title { margin-bottom: 48px; }
.section-title h2 {
	font-family: var(--font-title-en);
	font-weight: 400;
	font-size: 32px;
	line-height: 1.3;
	letter-spacing: .04em;
	color: var(--governor-bay);
}
.section-title-right { text-align: right; }
.section-title-center { text-align: center; }

/* ---------- Scroll reveal (assets/js/reveal.js, top, company + studio list / detail pages) ----------
   Only active once the script has added html.has-reveal. After the animation it adds
   .rv-done, which only drops the reveal transition (so the elements' own hover transitions
   come back); everything visible stays as it is, so nothing repaints at the end.
   backface-visibility keeps mobile Safari's layer for the element stable, otherwise it can
   blank it for a frame (showing the white page behind) when the animation finishes. */
.has-reveal [data-rv] {
	--rv-ease: cubic-bezier(.22, .61, .36, 1);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
/* Only the way in is animated: hiding is instant, otherwise blocks already on screen at
   load would fade out first and the reveal would never be seen. */
.has-reveal [data-rv].is-in:not(.rv-done) {
	transition:
		opacity .9s var(--rv-ease),
		transform 1.1s var(--rv-ease),
		clip-path 1.2s cubic-bezier(.65, 0, .35, 1);
	transition-delay: var(--rv-delay, 0s);
}
/* fade up */
.has-reveal [data-rv="up"]:not(.is-in) { opacity: 0; transform: translateY(40px); }
/* fade only (for elements whose transform is already in use) */
.has-reveal [data-rv="fade"].is-in:not(.rv-done) { transition-property: opacity; transition-duration: 1.2s; }
.has-reveal [data-rv="fade"]:not(.is-in) { opacity: 0; }
/* photo: opens out from a small drop, a little wider then taller, like a droplet landing */
.has-reveal [data-rv="drop"]:not(.is-in) { opacity: 0; clip-path: ellipse(6% 5% at 50% 55%); }
.has-reveal [data-rv="drop"].is-in { animation: rv-drop 1.8s linear var(--rv-delay, 0s) both; }
/* One continuous ease-out sampled every 10% and played linearly, so it never pauses
   between steps; the width leads the height a little for the droplet feel.
   80% / 80% covers the corners. */
@keyframes rv-drop {
	0% { opacity: 0; clip-path: ellipse(6% 5% at 50% 55%); }
	10% { opacity: .4; clip-path: ellipse(30.4% 25.3% at 50% 54%); }
	20% { opacity: .8; clip-path: ellipse(48.8% 41.6% at 50% 53.2%); }
	30% { opacity: 1; clip-path: ellipse(61.9% 54.3% at 50% 52.5%); }
	40% { clip-path: ellipse(70.8% 63.8% at 50% 51.8%); }
	50% { clip-path: ellipse(76.1% 70.6% at 50% 51.2%); }
	60% { clip-path: ellipse(78.8% 75.2% at 50% 50.8%); }
	70% { clip-path: ellipse(79.9% 78% at 50% 50.5%); }
	80% { clip-path: ellipse(80% 79.4% at 50% 50.2%); }
	90% { clip-path: ellipse(80% 79.9% at 50% 50%); }
	100% { opacity: 1; clip-path: ellipse(80% 80% at 50% 50%); }
}
/* section title: heading and the Japanese line each rise out of a mask, the latter a beat later */
.has-reveal [data-rv="title"].is-in:not(.rv-done) { transition: none; }
.rv-mask { display: inline-block; overflow: hidden; vertical-align: top; }
.rv-in { display: inline-block; }
.has-reveal [data-rv="title"].is-in .rv-in { transition: transform 1s var(--rv-ease) var(--rv-delay, 0s); }
.has-reveal [data-rv="title"].is-in p .rv-in { transition-delay: calc(var(--rv-delay, 0s) + .2s); } /* the Japanese line follows */
.has-reveal .studio [data-rv="title"].is-in p .rv-in { transition-delay: var(--rv-delay, 0s); } /* studio detail's STUDIO: both lines together */
.has-reveal [data-rv="title"]:not(.is-in) .rv-in { transform: translateY(105%); }
/* shown straight away, without playing (blocks above the screen after a reload; reveal.js
   drops the class again two frames later, so their own hover transitions come back) */
.has-reveal [data-rv].rv-instant,
.has-reveal [data-rv].rv-instant * { transition: none !important; animation: none !important; }
.section-title p {
	margin-top: 2px;
	font-family: var(--font-caption-jp);
	font-size: 20px;
	font-weight: 700;
	line-height: 20px;
	letter-spacing: .1px;
	color: var(--moody-blue);
}

/* ---------- Hero ---------- */

.site-main{
	position: relative;
    top: -66px;
}


.hero {
	position: relative;
	isolation: isolate; /* keeps .hero-media's z-index: -1 and the blend modes inside the hero */
	height: 90vh;
	height: 88svh; /* steady on phones while the address bar shows / hides */
	padding: 0;
}
.hero-media { position: absolute; z-index: -1; inset: 0; overflow: hidden; } /* under the tint and the logo */
.hero-video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Same tint as the recruit hero (.recruit-hero in recruit.css): a blue glow at the bottom corners
   (normal, then screen) and a pale-blue color-burn over everything. The photos are <img>s, not one
   background, so each layer is its own overlay. */
.hero-media::before,
.hero-media::after {
	content: "";
	position: absolute;
	inset: 0;
}
.hero-media::before {
	z-index: 3; /* over the slides (z-index 1-2) */
	background: linear-gradient(109.92deg, rgba(110, 133, 221, 0) 74.99%, rgba(110, 133, 221, .21) 96.11%, rgba(2, 40, 185, .42) 104.54%);
}
.hero-media::after {
	z-index: 4;
	background: linear-gradient(285.02deg, rgba(149, 167, 239, 0) 60.76%, rgba(149, 167, 239, .21) 91.3%, rgba(2, 40, 185, .42) 107.87%);
	mix-blend-mode: screen;
}
/* Photo slideshow standing in for the video (index.php, hero-slider.js): the active photo
   fades in over the previous one, and every photo slowly zooms in and out. */
.hero-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	animation: hero-zoom 12s ease-in-out infinite alternate;
}
.hero-slide:nth-child(2) { animation-delay: -4s; }
.hero-slide:nth-child(3) { animation-delay: -8s; }
.hero-slide:nth-child(4) { animation-delay: -2s; }
.hero-slide.is-prev { z-index: 1; opacity: 1; }
.hero-slide.is-active { z-index: 2; opacity: 1; transition: opacity 1.5s ease; }
@keyframes hero-zoom {
	from { transform: scale(1); }
	to { transform: scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
	.hero-slide { animation: none; }
}
.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: #e5e8f6;
	mix-blend-mode: color-burn;
}
/* Bubble film over the photos: soft pools of the background bubbles' pale lavender / sky / lilac. */
.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(55% 75% at 12% 18%, rgba(229, 232, 246, .55), rgba(229, 232, 246, 0) 70%),
		radial-gradient(45% 60% at 80% 12%, rgba(205, 233, 255, .4), rgba(205, 233, 255, 0) 70%),
		radial-gradient(55% 70% at 88% 90%, rgba(216, 204, 255, .45), rgba(216, 204, 255, 0) 70%),
		radial-gradient(40% 50% at 30% 95%, rgba(247, 248, 255, .4), rgba(247, 248, 255, 0) 70%);
	mix-blend-mode: screen;
	pointer-events: none;
}
.hero-logo {
	position: absolute;
	z-index: 1; /* over the bubble film (.hero::after) */
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.hero-logo img {
	display: block;
	height: 188px; /* the logo itself ~160px; the SVG has room around it for the raised side */
	width: auto;
	filter: drop-shadow(0 4px 24px rgba(0, 0, 0, .35));
}

/* ---------- Booking ---------- */
.booking { margin-top: 48px; position: relative; z-index: 2; scroll-margin-top: 100px; }
/* Drifting bubble at the box's lower right, behind it.
   Measured from the top of .booking (≈ the closed box's height − 7px, which changes with the
   viewport) so opening the trial form or the price tab doesn't push it down.
   bubble_shape_7 is 134 wide; the _anim file adds 14 of room on every side → 162 × 165. */
.booking::before {
	--bubble-w: clamp(72px, 45vw, 380px);
	content: "";
	position: absolute;
	z-index: -1;
	top: clamp(389px, 389px + (100vw - 900px) * .091, 438px);
	right: -47%;
	width: calc(var(--bubble-w) * 162 / 134);
	aspect-ratio: 162 / 165;
	background: url("../images/background/bubble_shape_7_anim.svg") no-repeat center / 100% 100%;
	transform: translateY(-50%);
	pointer-events: none;
	animation: bubble-float 10s ease-in-out infinite alternate;
}
@media (max-width: 900px) {
	/* column layout: the closed box runs 507px (390 wide) … 546px (768 wide) */
	.booking::before {
		--bubble-w: clamp(135px, 61vw, 380px);
		top: calc(535px + (100vw - 390px) * .103);
		right: -22%;
	}
}
@media (prefers-reduced-motion: reduce) {
	.booking::before {
		width: var(--bubble-w);
		aspect-ratio: 134 / 137;
		background-image: url("../images/background/bubble_shape_7.svg");
		animation: none;
	}
}
.booking-box {
	border-radius: 16px;
	overflow: hidden;
}
.tabs {
	display: flex;
	gap: 20px;
	border-bottom: 6px solid var(--klein-blue);
}
.booking-body {
	background: var(--bg-soft);
	box-shadow: 0 20px 50px rgba(24, 42, 102, .12);
	overflow: hidden;
}
.tab {
	flex: 1;
	padding: 14px 16px 12px;
	font-weight: 700;
	font-size: 24px;
	line-height: 1.5;
	color: var(--gray);
	background: var(--bg-soft);
	border-radius: 16px 16px 0 0;
}
.tab.is-active { background: var(--klein-blue); color: #fff; }
.tab-panel { display: none; margin: 28px 30px 32px; }
.tab-panel.is-active { display: block; }
.reserve-card,
.tab-panel-price {
	padding: 20px 24px;
	background: #fff;
	border-radius: 12px;
}
.reserve-card { display: flex; gap: 24px; align-items: center; }
.tab-media { width: 48%; aspect-ratio: 876 / 509; flex-shrink: 0; object-fit: cover; }
/* Photo with a small logo in the top-right corner */
.tab-media-branded { position: relative; }
.tab-media-branded img { width: 100%; height: 100%; object-fit: cover; }
.tab-media-branded .tab-media-logo {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 88px;
	height: auto;
}
.tab-media-logo-left .tab-media-logo { right: auto; left: 14px; }
.tab-content { flex: 1; text-align: center; }
.tab-headline {
	font-family: var(--font-title-en);
	font-weight: 400;
	font-size: 56px;
	line-height: 1.2;
	color: #1e2236;
}
.tab-text {
	margin: 14px 0 24px;
	font-size: 20px;
	font-weight: 700;
	color: #1e2236;
}
/* Small note right under .tab-text (pulled up into its bottom margin). */
.tab-note {
	margin: -14px 0 24px;
	font-size: 13px;
	color: #7b7d8c;
}
.tab-content .btn-pill {
	justify-content: center;
	position: relative;
	min-width: 216px;
	padding: 14px 44px;
	font-weight: 700;
}
.tab-content .btn-pill span {
	position: absolute;
	right: 20px;
	font-size: 11px;
}

/* Trial toggle button */
.btn-pill.is-open { background: #777; }
.btn-pill.is-open span { transform: rotate(180deg); }

/* Trial form */
.trial-form { margin-top: 28px; color: #1e2236; }
.trial-fields {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px 24px;
}
.trial-field label {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 8px;
}
.trial-en {
	font-family: var(--font-title-en);
	font-size: 17px;
	line-height: 1.3;
}
.trial-jp { font-size: 12px; font-weight: 700; }
.trial-req { color: #d62b2b; font-weight: 700; margin-left: -6px; }
.trial-field input {
	width: 100%;
	height: 48px;
	padding: 0 14px;
	font: inherit;
	font-size: 16px;
	background: #fff;
	border: 1px solid transparent;
	border-radius: 8px;
}
.trial-field input:focus { outline: none; border-color: var(--moody-blue); }
.trial-field input.is-invalid { border-color: #d62b2b; background: #fff6f6; }
.trial-error { margin-top: 6px; font-size: 12px; font-weight: 700; line-height: 1.5; color: #d62b2b; }
/* Bot trap field (template-parts/trial-form.php): off-screen, never seen by people. */
.trial-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Calendar */
.trial-calendar { background: #fff; }
.cal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #222;
	color: #fff;
}
.cal-title { font-size: 26px; font-weight: 700; line-height: 1.4; }
.cal-nav {
	width: 48px;
	height: 40px;
	color: #fff;
	font-size: 22px;
}
.cal-nav:disabled { opacity: .25; cursor: default; }
.cal-table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}
.cal-table th {
	padding: 2px 0;
	font-size: 14px;
	font-weight: 500;
	background: #f2f2f2;
}
.cal-table td {
	height: 60px;
	padding: 0;
	vertical-align: top;
	border: 1px solid #ddd;
}
.cal-day {
	display: block;
	width: 100%;
	height: 100%;
	padding: 6px 12px;
	text-align: left;
	font-size: 16px;
}
/* Hover only with a mouse: on a phone a tap leaves :hover stuck on until the next tap elsewhere. */
@media (hover: hover) {
	.cal-day:hover:not(:disabled) { background: #eef0f9; }
}
.cal-day:disabled { color: #c4c4c4; cursor: default; }
.is-sun, .cal-day.is-sun:not(:disabled) { color: #d62b2b; }
.is-sat, .cal-day.is-sat:not(:disabled) { color: #2947d6; }
.cal-day.is-holiday:not(:disabled) { color: #d62b2b; }
.cal-day.is-holiday:disabled { color: #eba3a3; }
.cal-day.is-selected,
.cal-day.is-selected:hover { background: var(--moody-blue); color: #fff; }
/* Holiday / closed label under the day number */
.cal-note {
	display: block;
	overflow: hidden;
	font-size: 10px;
	line-height: 1.3;
	color: #d62b2b;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.cal-note.is-closed { color: #888; }
.cal-day:disabled .cal-note:not(.is-closed) { opacity: .6; }
.cal-day.is-selected .cal-note { color: #fff; }
/* Too narrow for the label: the red number (and the name above the slots) remain. */
@media (max-width: 480px) {
	.cal-note { display: none; }
}

/* Time slots */
.trial-slots { padding: 20px; border-top: 1px solid #ddd; }
.trial-slots-date { font-size: 17px; font-weight: 700; margin-bottom: 12px; }
.trial-slots-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 16px 24px;
}
.slot-btn {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 8px 12px;
	font-size: 16px;
	font-weight: 700;
	border: 1px solid #ccc;
}
.slot-course {
	padding: 1px 10px;
	font-size: 13px;
	color: #fff;
	border-radius: var(--radius-full);
}
.slot-course.is-upper { background: #f1674b; }
.slot-course.is-lower { background: #3b9b48; }
.slot-course.is-basic { background: var(--klein-blue); }
.slot-btn.is-selected { background: var(--moody-blue); border-color: var(--moody-blue); color: #fff; }
.slot-btn.is-selected .slot-course { background: #fff; color: var(--moody-blue); }
.slot-btn:disabled { color: #bbb; cursor: default; }
.slot-btn:disabled .slot-course { background: #ccc; }
.slot-instructor { display: block; flex-basis: 100%; font-size: 12px; line-height: 1.5; }
.trial-slots-empty { grid-column: 1 / -1; color: var(--gray); } /* a full row of the slot grid */

/* Steps */
.trial-step {
	position: relative;
	display: flex;
	justify-content: center;
	gap: 8px;
	margin: 56px 0px 0px;
}

.trial-step-bottom{
	display: flex;
	justify-content: center;
	gap: 8px;
	margin: 0px 0px 14px;
}
.trial-step-num {
	position: relative;
	bottom: 1px;
	align-self: center;
	display: inline-grid;
	place-items: center;
	width: 25px;
	height: 25px;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	background: var(--international-klein-blue);
	border-radius: 50%;
}
.trial-step .trial-en { font-size: 28px; line-height: 28px; }
.trial-step .trial-jp { font-size: 18px; }
.trial-step-bottom .trial-en { font-size: 28px; }
.trial-step-bottom .trial-jp { font-size: 18px; }

/* Calendar locked until a studio is chosen */
.trial-calendar.is-locked { position: relative; }
.trial-calendar.is-locked .cal-table,
.trial-calendar.is-loading .cal-table { opacity: .45; }
.cal-lock-msg { display: none; }
.trial-calendar.is-locked .cal-lock-msg {
	display: block;
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 10px 24px;
	font-weight: 700;
	background: #fff;
	border: 1px solid var(--moody-blue);
	border-radius: var(--radius-full);
	white-space: nowrap;
}
/* "この月のスケジュールは準備中です。" under a month that isn't published yet (trial-form.js) */
.cal-publication { margin-top: 12px; text-align: center; font-size: 14px; font-weight: 700; color: var(--gray); }

/* Submit */
.trial-reserve { max-width: 420px; margin: 40px auto 0; }
.trial-col-head { text-align: center; margin-bottom: 20px; line-height: 1.3; }
.trial-col-head .trial-en { display: block; font-size: 22px; }
.trial-col-head .trial-jp { font-size: 14px; }
.trial-consents {
	width: min(248px, calc(100% - 24px));
	margin: 0 auto 20px;
	color: #111;
	font-size: 14px;
	line-height: 1.7;
	text-align: left;
}
.trial-consent {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	min-height: 36px;
	padding-block: 6px;
	cursor: pointer;
}
.trial-consent + .trial-consent { margin-top: 2px; }
.trial-consent > span { min-width: 0; overflow-wrap: anywhere; }
.trial-consent-action { white-space: nowrap; }
.trial-consent input {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	margin: 3px 0 0;
	accent-color: #333;
	cursor: pointer;
}
.trial-consent input:focus-visible { outline: 2px solid var(--moody-blue); outline-offset: 2px; }
.trial-consent a,
.trial-consent a:visited,
.trial-consent a:hover,
.trial-consent a:focus-visible { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.trial-consent-error { margin-top: 8px; color: #d62b2b; font-size: 12px; font-weight: 700; }
.trial-consents.has-error .trial-consent input[aria-invalid="true"] { outline: 1px solid #d62b2b; outline-offset: 1px; }
.select-pill { 
	position: relative;
	width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
 }
.select-pill-btn,
.trial-submit {
	width: 100%;
	max-width: 560px;
	height: 52px;
	border-radius: var(--radius-full);
	font-size: 17px;
	font-weight: 700;
}
.select-pill-btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid #1e2236;
}
.select-pill-btn .arrow {
	position: absolute;
	right: 22px;
	font-size: 12px;
}
.select-pill-btn.is-invalid { border-color: #d62b2b; }
.select-pill-list {
	position: absolute;
	z-index: 5;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	/* Same width as the button above, centered under it. */
	width: 100%;
	max-width: 560px;
	padding: 16px 0;
	background: #fff;
	border: 1px solid #1e2236;
	text-align: center;
}
.select-pill-list li {
	padding: 6px 0;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
}
.select-pill-list li:hover,
.select-pill-list li:focus,
.select-pill-list li[aria-selected="true"] { background: #eef0f9; outline: none; }
.trial-submit { justify-content: center; }
.trial-submit:disabled { background: #d2d2d2; color: #686868; opacity: 1; cursor: not-allowed; }
.trial-msg { margin-top: 20px; text-align: center; font-weight: 700; }
.trial-msg.is-error { color: #d62b2b; }

/* 仮予約 accepted (template-parts/trial-form.php) */
.trial-sent {
	width: min(560px, calc(100% - 32px));
	max-width: none;
	margin: auto;
	padding: clamp(32px, 5vw, 48px) clamp(20px, 4vw, 40px);
	border: 0;
	border-radius: 16px;
	background: #fff;
	text-align: center;
}
.trial-sent::backdrop { background: rgba(20, 26, 61, .55); }
html:has(.trial-sent[open]) { overflow: hidden; }
/* Opens with a soft rise, closes with a quick fade (closing: rizzpilatesCloseDialog, trial-form.js). */
@media (prefers-reduced-motion: no-preference) {
	.trial-sent[open]::backdrop { animation: dlg-fade-in .35s ease both; }
	.trial-sent[open] { animation: dlg-rise-in .55s cubic-bezier(.22, .61, .36, 1) both; }
	.trial-sent.is-closing::backdrop { animation: dlg-fade-out .28s ease both; }
	.trial-sent.is-closing { animation: dlg-sink-out .28s ease both; }
}
/* Shared by the dialogs (trial modal, sent notice) */
@keyframes dlg-fade-in { from { opacity: 0; } }
@keyframes dlg-fade-out { to { opacity: 0; } }
@keyframes dlg-rise-in { from { opacity: 0; transform: translateY(32px) scale(.985); } }
@keyframes dlg-sink-out { to { opacity: 0; transform: translateY(16px); } }
.trial-sent-title {
	color: #d62b2b;
	font-size: clamp(18px, 15.9px + .56vw, 24px);
	font-weight: 800;
}
.trial-sent-text { margin-top: 16px; color: #333; font-size: 15px; line-height: 1.9; }
.trial-sent-text strong { color: var(--international-klein-blue); }
.trial-sent-note { margin: 12px 0 28px; color: #6b6f80; font-size: 12px; line-height: 1.7; }
.trial-sent-close {
	justify-content: center;
	width: min(200px, 100%);
	height: 44px;
	border: 0;
	font-weight: 900;
	cursor: pointer;
}

/* Price tab */
.price-intro { display: flex; gap: 24px; align-items: center; }
.price-title {
	font-size: 34px;
	font-weight: 700;
	line-height: 1.4;
	color: #1e2236;
}
.price-lead {
	margin-top: 20px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.7;
	color: #1e2236;
}
.price-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin-top: 12px;
}
.price-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 146px;
	padding: 20px 12px;
	background: #fde14e;
	border-radius: 6px;
	text-align: center;
	color: #1e2236;
}
.price-name {
	font-family: var(--font-title-en);
	font-size: 24px;
	line-height: 1.3;
}
.price-name small { font-size: 15px; }
.price-desc {
	display: inline-block;
	margin-top: 10px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.8;
	text-align: left;
}
.price-subhead {
	margin-top: 56px;
	padding-left: 8px;
	font-family: var(--font-jp);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: .1px;
	color: var(--moody-blue);
}

/* ---------- Studio ---------- */
/* Starts at the container's left edge and bleeds past its right edge to the viewport. */
.studio-list {
	--bleed: max(0px, calc(50vw - 50%));
	display: flex;
	gap: 20px;
	margin-right: calc(var(--bleed) * -1);
	padding: 4px var(--bleed) 12px 0;
	overflow-x: auto;
	/* overflow-x: auto alone makes y auto too: mobile Safari then lets the row wobble
	   up and down while it slides */
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-left: 0;
	scrollbar-width: none; /* replaced by .studio-controls */
}
.studio-list::-webkit-scrollbar { display: none; }
.studio-list.is-draggable { cursor: grab; }
.studio-list.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	user-select: none;
}
.studio-list.is-gliding { scroll-snap-type: none; } /* prev / next buttons (studio-slider.js) */
.studio-card {
	flex: 0 0 353.33px;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	background: var(--bg-soft);
	border: 1px solid #e3e6f3;
	border-radius: 20px;
	overflow: hidden;
	/* own layer: mobile Safari otherwise repaints the rounded, clipped cards while the row
	   slides and briefly shows them blank (white) */
	transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.studio-media {
	width: 100%;
	aspect-ratio: 353 / 136;
	object-fit: cover;
}
.studio-body { flex: 1; padding: 16px 18px 20px; }
.studio-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.studio-tag {
	padding: 3px 14px;
	font-size: 12px;
	line-height: 1.6;
	white-space: nowrap;
	background: #fff;
	border: 1px solid #e3e6f3;
	border-radius: var(--radius-full);
	box-shadow: 0 1px 4px rgba(24, 42, 102, .08);
}
.studio-tag.is-pref {
	color: #fff;
	background: var(--international-klein-blue);
	border-color: var(--international-klein-blue);
}
/* Station on its own line under the tags, so a narrow card never cuts it off. */
.studio-access { margin-top: 8px; padding-left: 4px; }
.studio-station {
	font-size: 14px;
	font-weight: 500;
	color: var(--international-klein-blue);
}
.studio-meta + .studio-address,
.studio-access + .studio-address { margin-top: 12px; }
.studio-address { padding-left: 4px; font-size: 13px; line-height: 1.6; color: var(--ink); }

/* Scroll position bar + prev/next buttons under the list. */
.studio-controls {
	display: flex;
	align-items: center;
	gap: 32px;
	margin-top: 24px;
}
.studio-controls[hidden] { display: none; }
.studio-progress {
	position: relative;
	flex: 1;
	height: 4px;
	background: #e9ebfa;
	border-radius: var(--radius-full);
	overflow: hidden;
}
.studio-progress-bar {
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--bar-w, 30%);
	background: var(--international-klein-blue);
	border-radius: inherit;
	transform: translateX(var(--bar-x, 0%));
	transition: transform .15s linear;
}
.studio-nav { display: flex; gap: 12px; }
.studio-nav-btn {
	position: relative;
	width: 48px;
	height: 48px;
	border: 1px solid var(--international-klein-blue);
	border-radius: 50%;
	background: #fff;
	transition: background .2s ease, opacity .2s ease;
}
.studio-nav-btn::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 9px;
	height: 9px;
	border-top: 1.5px solid var(--international-klein-blue);
	border-right: 1.5px solid var(--international-klein-blue);
	transform: translate(-65%, -50%) rotate(45deg);
}
.studio-nav-btn.is-prev::before { transform: translate(-35%, -50%) rotate(-135deg); }
@media (hover: hover) {
	.studio-nav-btn:hover:not(:disabled) { background: var(--international-klein-blue); }
	.studio-nav-btn:hover:not(:disabled)::before { border-color: #fff; }
}
.studio-nav-btn:disabled { opacity: .3; cursor: default; }

/* ---------- About ---------- */
.about {
	display: flex;
	align-items: center;
	gap: 64px;
}
.about-media, .about-content { flex: 1; }

/* Photos cut out by about_shape1/2.svg paths */
.blob {
	background: center / cover no-repeat;
	-webkit-mask: var(--shape) center / 100% 100% no-repeat;
	mask: var(--shape) center / 100% 100% no-repeat;
}
.blob-1 {
	--shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 577 546'%3E%3Cpath d='M549.471 218.838C548.838 220.281 548.22 221.739 547.587 223.197C526.941 270.967 523.657 324.127 536.454 374.577C544.906 407.946 542.654 443.759 526.676 474.476C488.227 548.385 365.171 566.899 297.477 518.304C269.307 498.086 238.535 479.143 208.141 462.444C163.655 438.029 132.38 443.184 85.611 423.511C19.3893 395.635 -12.1237 312.656 4.28074 242.708C20.6852 172.761 70.915 97.8513 134 63.4814C230.94 10.7016 354.733 -8.38049 464.062 3.3121C504.543 7.62674 545.613 27.5801 564.786 63.4814C590.173 111.06 570.942 169.345 549.501 218.823L549.471 218.838Z'/%3E%3C/svg%3E");
	aspect-ratio: 577 / 546;
	background-image: url("../images/home/home_about.jpg");
}
.blob-2 {
	--shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 578 608'%3E%3Cpath d='M527.43 355.937C502.769 378.345 490.385 382.622 474.178 411.738C454.055 447.873 459.735 490.571 448 530.23C436.853 567.834 407.431 585.644 370.301 598.276C333.155 610.908 270.482 610.382 232.422 600.867C122.207 573.301 31.2514 479.848 6.65589 368.932C-17.9396 258.016 27.4159 137.748 113.231 63.3084C227.281 -35.612 459.869 -22.9308 555.345 132.019C593.438 193.842 581.174 307.105 527.43 355.937Z'/%3E%3C/svg%3E");
	aspect-ratio: 578 / 608;
	background-image: url("../images/home/home_about_reformer.jpg");
}

/* Decorative gradient bubbles behind the photos.
   Each one is pinned to the screen edge and offset from the photo's vertical center;
   the full (uncropped) shape hangs past the edge so the motion never shows a cut.
   --edge = distance from the photo's outer side to the viewport edge.
   --bubble-w = width of the part left on screen (1440px design). */
.about-studio,
.about-reformer { isolation: isolate; }
/* The off-screen part of the bubbles would widen the page on phones
   (body overflow-x: hidden doesn't stop the mobile layout viewport growing). */
.site-main:has(.about-media) { overflow-x: clip; }
.about-studio .about-media,
.about-reformer .about-media {
	--edge: max(var(--gutter), (100vw - 1100px) / 2);
	position: relative;
}
.about-studio .about-media::before,
.about-reformer .about-media::before {
	content: "";
	position: absolute;
	top: 50%;
	z-index: -1;
	background: no-repeat center / 100% 100%;
	pointer-events: none;
	animation: bubble-float 12s ease-in-out infinite alternate;
}
/* shape_5: 641 wide, the left 114 sits off-screen (visible 527).
   The _anim file adds 60 of room on every side for the motion → 761 × 706. */
.about-studio .about-media::before {
	--bubble-w: min(527px, 36.6vw);
	left: calc(-1 * var(--edge));
	width: calc(var(--bubble-w) * 761 / 527);
	margin-left: calc(var(--bubble-w) * -174 / 527);
	aspect-ratio: 761 / 706;
	background-image: url("../images/background/bubble_shape_5_anim.svg");
	transform: translateY(calc(-50% + var(--bubble-w) * .23));
}
/* shape_6: 654 wide, the right 187 sits off-screen (visible 467).
   The _anim file adds 60 of room on every side → 774 × 745. */
.about-reformer .about-media::before {
	--bubble-w: min(467px, 32.4vw);
	right: calc(-1 * var(--edge));
	width: calc(var(--bubble-w) * 774 / 467);
	margin-right: calc(var(--bubble-w) * -247 / 467);
	aspect-ratio: 774 / 745;
	background-image: url("../images/background/bubble_shape_6_anim.svg");
	transform: translateY(calc(-50% + var(--bubble-w) * .36));
	animation-delay: -6s; /* out of step with the other one */
}
/* The *_anim.svg files morph on their own (SMIL; the gradient keeps one pale lavender tone);
   on top of that the bubble drifts (`translate`, so it stacks with the positioning
   `transform` above). No fade: the bubbles keep one steady tone. */
@keyframes bubble-float {
	from { translate: 0 0; }
	to   { translate: 0 -8px; }
}
/* Water ripple while a bubble is being touched (assets/js/bubble-poke.js sets both). */
[data-water-before]::before { filter: var(--water-before); }
[data-water-after]::after { filter: var(--water-after); }
@media (prefers-reduced-motion: reduce) {
	.about-studio .about-media::before,
	.about-reformer .about-media::before { animation: none; }
	/* static files have no padding */
	.about-studio .about-media::before {
		width: calc(var(--bubble-w) * 641 / 527);
		margin-left: calc(var(--bubble-w) * -114 / 527);
		aspect-ratio: 641 / 586;
		background-image: url("../images/background/bubble_shape_5.svg");
	}
	.about-reformer .about-media::before {
		width: calc(var(--bubble-w) * 654 / 467);
		margin-right: calc(var(--bubble-w) * -187 / 467);
		aspect-ratio: 654 / 625;
		background-image: url("../images/background/bubble_shape_6.svg");
	}
}

/* Text (heading / lead / button) */
.about-content h2 {
	margin-bottom: 30px;
	font-size: 26px;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: .04em;
	color: #22253a;
}
.about-content p {
	font-size: 16px;
	color: #7a7d8e;
}
.about-content .btn-pill {
	position: relative;
	justify-content: center;
	width: 100%;
	max-width: 280px;
	height: 44px;
	font-size: 15px;
	font-weight: 700;
}
.about-content .btn-pill span { position: absolute; right: 22px; }

.about-content-center { text-align: center; }
.about-content-center .about-logo { margin-bottom: 40px; }
.about-content-center .about-logo img { width: 190px; height: auto; margin: 0 auto; }
.about-content-center p:not(.about-logo) { margin-bottom: 44px; line-height: 1.75; }

.about-content-left p { margin-bottom: 52px; line-height: 2; letter-spacing: .04em; }

/* ---------- Why ---------- */
.why-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.why-card h3 {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.8em; /* two lines, so single-line titles stay vertically centered */
	margin-bottom: 28px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .06em;
	text-align: center;
	color: #22253a;
}
/* Arch shape from whyRizz_shape.svg (260 x 324, semicircle top). */
.why-media {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 260 / 324;
	object-fit: cover;
	border-radius: 999px 999px 0 0;
	margin-bottom: 18px;
}
.why-card p {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.6;
	color: #7a7d8e;
}

/* ---------- Campaign (top page slider, assets/js/campaign-slider.js) ---------- */
.campaign-slider { position: relative; }
.campaign-track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	border-radius: 32px;
}
.campaign-track::-webkit-scrollbar { display: none; }
.campaign-track.is-gliding { scroll-snap-type: none; } /* prev / next / dots (campaign-slider.js) */
.campaign-slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
	aspect-ratio: 877 / 277;
	overflow: hidden;
	border-radius: 32px;
}
.campaign-slide img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .2s ease; }
.campaign-slide:hover img { opacity: .9; }
/* White circles over the banner edges, chevron drawn with borders. */
.campaign-nav {
	position: absolute;
	top: 50%;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 8px rgba(42, 46, 69, .05);
	cursor: pointer;
	transform: translateY(-50%);
}
.campaign-nav.is-prev { left: -24px; }
.campaign-nav.is-next { right: -24px; }
.campaign-nav::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 9px;
	height: 9px;
	border-top: 1.5px solid var(--international-klein-blue);
	border-right: 1.5px solid var(--international-klein-blue);
}
.campaign-nav.is-next::before { transform: translate(-70%, -50%) rotate(45deg); }
.campaign-nav.is-prev::before { transform: translate(-30%, -50%) rotate(-135deg); }
.campaign-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 15px;
}
.campaign-dot {
	width: 40px;
	height: 12px; /* Bigger hit area than the 2px line. */
	padding: 0;
	border: 0;
	background: linear-gradient(#7b7d8c, #7b7d8c) center / 100% 2px no-repeat;
	cursor: pointer;
}
.campaign-dot.is-active { background-image: linear-gradient(var(--international-klein-blue), var(--international-klein-blue)); }

/* ---------- News ---------- */
.news-list { display: flex; flex-direction: column; gap: 16px; }
.news-item {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 24px 54px;
    background: #fff;
    border: 2px solid #e9ebfa;
    border-radius: 32px;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.news-item:hover {
	border-color: #d5d9f4;
	box-shadow: 0 10px 30px rgba(24, 42, 102, .06);
}
.news-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 4px;
}
.news-date {
	flex-shrink: 0;
	font-size: 14px;
	letter-spacing: .02em;
	color: #22253a;
}
.news-title {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
	color: #22253a;
}
.news-desc {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.7;
	color: #7a7d8e;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* Chevron drawn with borders so it matches the thin line in the design. */
.news-arrow {
	position: absolute;
	top: 50%;
	right: 28px;
	width: 11px;
	height: 11px;
	border-top: 1.5px solid #22253a;
	border-right: 1.5px solid #22253a;
	transform: translateY(-50%) rotate(45deg);
	transition: right .2s ease;
}
.news-item:hover .news-arrow { right: 20px; }
.news-empty { text-align: center; font-size: 14px; color: #7a7d8e; }
/* Home page: link to /news/ under the list */
.news-more {
	display: flex;
	position: relative;
	justify-content: center;
	width: 100%;
	max-width: 280px;
	height: 44px;
	margin: 40px auto 0;
	font-size: 15px;
	font-weight: 700;
}
.news-more span { position: absolute; right: 22px; }

/* .site-main is pulled up under the header for the home hero; not on the news / campaign pages
   (the same reset as .company-page, .studio-page …), so their hero sits under the header like theirs. */
.news-archive,
.news-detail { top: 0; }

/* ---------- News list pagination (archive-news.php) ---------- */
/* /news/ (warm background, body.contact-page-body): roomier cards than on the home page. */
.news-archive .news { margin-top: clamp(64px, 50px + 3.8vw, 88px); margin-bottom: clamp(120px, 80px + 11vw, 240px); }
.news-archive .section-title { margin-bottom: 32px; }
.news-archive .news-list { gap: 32px; }
.news-archive .news-item { padding: 24px 136px 24px 94px; }
.news-archive .news-arrow { right: 48px; }
.news-archive .news-item:hover .news-arrow { right: 40px; }
.pagination .page-numbers.is-disabled { pointer-events: none; }
.pagination .page-numbers.is-disabled::before { opacity: .35; }
.pagination .dots { min-width: 0; }
.pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	margin-top: 48px;
	font-family: var(--font-title-en);
	font-size: 18px;
	line-height: 22px;
}
.pagination .page-numbers {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	min-width: 22px;
	height: 30px;
	color: #1e2236;
}
.pagination a.page-numbers:hover,
.pagination .page-numbers.current { color: var(--international-klein-blue); }
.pagination .prev,
.pagination .next { position: relative; width: 30px; }
.pagination .prev::before,
.pagination .next::before {
	content: "";
	width: 8px;
	height: 8px;
	border-top: 2px solid #7b7d8c;
	border-right: 2px solid #7b7d8c;
}
.pagination .prev::before { transform: rotate(-135deg); margin-left: 4px; }
.pagination .next::before { transform: rotate(45deg); margin-right: 4px; }
.pagination .prev:hover::before,
.pagination .next:hover::before { border-color: var(--international-klein-blue); }

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------- News single (single-news.php) ---------- */
/* The section title's English line on a <p> (the article's h1 is its title). */
.section-title .section-title-en {
	margin-top: 0;
	font-family: var(--font-title-en);
	font-size: 32px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: .04em;
	color: var(--governor-bay);
}
@media (max-width: 900px) {
	.section-title .section-title-en { font-size: 26px; }
}
.news-single { margin-bottom: 160px; }
/* News detail (single-news.php), on the warm background (body.contact-page-body):
   section title, then a 1100px white card (text 877px inside), then the back button. */
.news-single-wrap .section-title { margin-bottom: 24px; }
.news-single-wrap .section-title .section-title-en { line-height: 37px; letter-spacing: .07em; }
.news-single-wrap .section-title p:not(.section-title-en) { font-weight: 800; line-height: 30px; letter-spacing: .01em; }
.news-single-card {
	padding: clamp(40px, 33px + 1.9vw, 66px) clamp(20px, -14px + 9vw, 113px) clamp(56px, 33px + 6vw, 128px);
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 0 8px rgba(42, 46, 69, .05);
}
.news-single-card .news-single-date {
	margin-top: 36px;
	font-size: 16px;
	font-weight: 400;
	line-height: 30px;
	letter-spacing: -.02em;
	text-align: left;
}
.news-single-card .news-single-content { margin-top: 6px; }
.news-single-card .news-single-thumb { margin: 16px 0 24px; }
.news-single-wrap .news-single-back { margin-top: 32px; }
.news-single-wrap .news-more { font-weight: 900; letter-spacing: -.04em; }
.news-single-title {
	font-family: var(--font-caption-jp);
	font-size: 28px;
	font-weight: 600;
	line-height: 36px;
	text-align: center;
	color: #1e2236;
}
.news-single-date { display: block; margin-top: 12px; font-size: 14px; text-align: center; color: #7b7d8c; }
.news-single-thumb { margin-top: 40px; }
.news-single-thumb img { width: 100%; height: auto; border-radius: 16px; }
.news-single-content {
	margin-top: 32px;
	font-size: 18px;
	font-weight: 500;
	line-height: 30px;
	letter-spacing: -.02em;
	color: #2A2E45;
}
.news-single-content > * + * { margin-top: 1.2em; }
.news-single-content a { color: var(--international-klein-blue); text-decoration: underline; }
/* The button itself is .news-more (same as the home page's もっと見る); here its arrow points back. */
.news-single-back { margin-top: 120px; }
.news-single-back .news-more span {
	right: auto;
	left: 28px;
	top: 50%;
	width: 7px;
	height: 7px;
	margin-top: -4px;
	border-left: 1.8px solid #fff;
	border-bottom: 1.8px solid #fff;
	transform: rotate(45deg);
}

/* ---------- Instagram ---------- */
.insta-feed {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	width: 100%;
	max-width: 1100px;
	margin-inline: auto;
}
/* Posts come in mixed sizes (square, 4:5, 9:16 reels); crop them all to one 3:4 frame. */
.insta-media { position: relative; display: block; min-width: 0; aspect-ratio: 3 / 4; overflow: hidden; border: 1px solid #E9EBFA; border-radius: 20px; background: #f5f5f3; }
.insta-media-link { display: block; }
.insta-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
	/* Fixed line breaks only fit the full-width layout. */
	.about-content p br { display: none; }
}

@media (max-width: 900px) {
	.about { flex-direction: column; gap: 48px; }
	/* In the column layout the media has no intrinsic width, so give it one. */
	.about-media { flex: none; width: 100%; max-width: 480px; }
	.about-content { width: 90%; margin: 0 5%; }
	/* Media is centered here, so measure the bleed from its own width. */
	.about-studio .about-media::before { --bubble-w: 93vw; left: calc((60% - 100vw) / 2); }
	.about-reformer .about-media::before { --bubble-w: 60vw; right: calc((64% - 100vw) / 2); }
	/* Reformer: photo first, right under the section title (as in About Rizz Pilates). */
	.about-reformer .about-media { order: -1; }
	.why-list { row-gap: 40px; }
	.section-title { margin-bottom: 32px; }
	.section-title h2 { font-size: 26px; }
	.section-title p { font-size: 16px; }
	.insta-feed { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

@media (max-width: 782px) {
	.trial-consent { min-height: 44px; padding-block: 10px; }
	/* Same 14px as .btn-pill on phones (common.css). */
	.about-content .btn-pill,
	.news-more,
	.trial-submit { font-size: 14px; }
	.news-single-card .news-single-title { font-size: 22px; line-height: 32px; }
	.news-single-card .news-single-date { margin-top: 24px; }
	.campaign-track,
	.campaign-slide { border-radius: 16px; }
	/* Smaller circles that stay inside the page gutter. */
	.campaign-nav { width: 36px; height: 36px; }
	.campaign-nav.is-prev { left: -16px; }
	.campaign-nav.is-next { right: -16px; }
	.hero { height: 320px; }
	.hero-logo img { height: 105px; }
	.reserve-card { flex-direction: column; }
	/* Studio cards: taller photo, tighter spacing. */
	.studio-list { gap: 12px; }
	.studio-card { flex-basis: min(353.33px, 85%); border-radius: 16px; }
	.studio-media { aspect-ratio: 100 / 60; }
	.studio-body { padding: 12px 14px 16px; }
	.studio-meta { gap: 6px; }
	.studio-tag { padding: 2px 10px; font-size: 11px; }
	.studio-access { margin-top: 6px; padding-left: 2px; }
	.studio-station { font-size: 13px; }
	.studio-meta + .studio-address,
	.studio-access + .studio-address { margin-top: 8px; }
	.studio-address { padding-left: 2px; font-size: 12px; }
	.studio-controls { gap: 20px; margin-top: 16px; }
	.studio-nav-btn { width: 40px; height: 40px; }
	.trial-fields { grid-template-columns: 1fr; }
	.trial-slots-list { grid-template-columns: 1fr; }
	/* Stacked: course badge, time, seats left. */
	.slot-btn { flex-direction: column; gap: 4px; }
	.trial-studio { max-width: none; }
	.trial-calendar.is-locked .cal-lock-msg {
		font-size: 14px;
	padding: 10px 24px;
}
.trial-reserve { margin: 40px auto 72px; }
	.cal-table td { height: 48px; font-size: 14px; }
	.tab{ font-weight: 600; font-size: 20px; }
	.tabs { gap: 12px; }
	.tab-panel { margin: 14px; }
	.tab-media { width: 100%; height: 180px; }
	.price-intro { flex-direction: column; }
	.price-name { font-size: 16px; }
	.price-desc { font-size:13px; text-align: center; }
	.price-card { min-height: 104px;}
	.price-grid { grid-template-columns: 1fr; }
	.reserve-card, .tab-panel-price { padding:12px; }
	.price-title { font-size: 26px; }
	.price-lead { font-size: 15px; }
	.price-lead br { display: none; }
	.news-item { padding: 22px 48px 22px 20px; border-radius: 16px; }
	.news-title { font-size: 16px; }
	.news-desc { font-size: 13px; }
	.news-arrow { right: 20px; }
	.news-item:hover .news-arrow { right: 16px; }
	.news-archive .news-list { gap: 16px; }
	.news-archive .news-item { padding: 22px 48px 22px 20px; }
	.news-archive .news-arrow { right: 20px; }
	.news-archive .news-item:hover .news-arrow { right: 16px; }
	.section-title h2 { font-size: 28px; line-height: 32px; letter-spacing: .05em; }
	.section-title p { font-size: 16px; letter-spacing: .06em; }
	.about-content h2 { font-size: 21px; margin-bottom: 20px; }
	.about-content p { font-size: 14px; }
	.about-content-center .about-logo { margin-bottom: 24px; }
	.about-content-center .about-logo img { width: 150px; }
	.about-content-center p:not(.about-logo),
	.about-content-left p { margin-bottom: 32px; }
	.about-content-left .btn-pill { display: flex; margin-inline: auto; }
	.why-list { column-gap: 14px; }
	.why-card h3 { font-size: 15px; margin-bottom: 16px; }
	.why-card p { font-size: 13px; }
}

@media (max-width: 600px) {
	.insta-feed { gap: 8px; }
	/* One column on phones only; tablets keep three so the arch photos don't fill the screen. */
	.why-list { grid-template-columns: 1fr; margin: 0 32px; }
}

@media (max-width: 480px) {
	/* Booking box: keep the headings on one line at phone width. */
	.tab-headline { font-size: 36px; }
	.tab-text { margin: 10px 0 20px; font-size: 16px; }
	.trial-step { align-items: center; margin-top: 40px; }
	.trial-step .trial-en { font-size: 22px; line-height: 1.2; }
	.trial-step-bottom .trial-jp { font-size: 15px; }
	.cal-table td { height: 42px; font-size: 13px; }
	.select-pill-btn { height: 48px; font-size: 15px; }
	.trial-submit { height: 48px; }
}

/* ---------- Tinted page background for the white bubbles ----------
   A pale lavender / sky / lilac wash, fixed to the screen, so the bubbles' white centres
   and lavender rims read as glass. Top page, plus the pages that used to sit on the warm
   --bg-studio: studio list / detail, recruit (top / search / studio jobs), contact, news. */
body:has(.about-media)::before,
body:has(.recruit-page)::before,
body.studio-list-page::before,
body.studio-detail-page::before,
body.recruit-search-page::before,
body.recruit-studio-page::before,
body.contact-page-body::before {
	content: "";
	position: fixed;
	inset: -8%; /* bigger than the screen so the drift below never shows an edge;
	               the gradient positions below are in this 116% box (screen edge = 7% / 93%) */
	z-index: -1;
	pointer-events: none;
	/* slow drift + a gentle hue swing (blue → violet → sky); transform / filter only, so cheap */
	animation:
		page-bg-drift 30s ease-in-out infinite alternate,
		page-bg-hue 40s ease-in-out infinite;
	/* white in the middle (where the content is), the tint only towards the edges */
	background:
		radial-gradient(ellipse 62% 72% at 50% 50%, #fff 35%, rgba(255, 255, 255, 0) 100%),
		radial-gradient(60vw 55vh at 93% 7%, rgba(214, 230, 250, .5), transparent 70%),
		radial-gradient(55vw 60vh at 7% 54%, rgba(230, 222, 247, .45), transparent 70%),
		radial-gradient(65vw 50vh at 84.5% 93%, rgba(222, 227, 247, .5), transparent 70%),
		#fff;
}
@keyframes page-bg-drift {
	0%   { transform: translate(0, 0); }
	50%  { transform: translate(-3%, 2%); }
	100% { transform: translate(2%, -2.5%); }
}
@keyframes page-bg-hue {
	0%, 100% { filter: hue-rotate(0deg); }
	35%      { filter: hue-rotate(20deg); }
	70%      { filter: hue-rotate(-14deg); }
}
@media (prefers-reduced-motion: reduce) {
	body::before { animation: none !important; }
}
/* Studio list / detail, recruit search: a touch stronger, so the white cards stand out. */
body.studio-list-page::before,
body.studio-detail-page::before,
body.recruit-search-page::before {
	background:
		radial-gradient(ellipse 56% 64% at 50% 50%, rgba(255, 255, 255, .85) 30%, rgba(255, 255, 255, 0) 100%),
		radial-gradient(60vw 55vh at 93% 7%, rgba(214, 230, 250, .75), transparent 70%),
		radial-gradient(55vw 60vh at 7% 54%, rgba(230, 222, 247, .7), transparent 70%),
		radial-gradient(65vw 50vh at 84.5% 93%, rgba(222, 227, 247, .75), transparent 70%),
		#fafbfe;
}