/* ---------- Studio detail page (studio-detail.php) ---------- */

/* index.css pulls .site-main up under the header for the home hero; not here. */
.studio-detail { top: 0; }
.studio-detail .breadcrumb ol { width: min(1100px, 100% - var(--gutter) * 2); margin: 4px auto 0; }
/* Space between sections: 96px here (the shared .mt-120 stays 120px on other pages). */
.studio-detail .mt-120 { margin-top: 96px; }

/* Main visual */
.sd-visual { position: relative; margin-top: 72px; }
.sd-visual-media {
	display: block;
	width: 100%;
	aspect-ratio: 1102 / 400;
	object-fit: cover;
	border-radius: clamp(20px, 2.8vw, 40px);
}
/* Store name in the middle, logo top-right. */
.sd-visual-logo {
	position: absolute;
	top: 28px;
	right: 36px;
	width: 96px;
	height: auto;
}
.sd-visual-title {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-family: var(--font-title-en);
	font-size: clamp(24px, 2.8vw, 40px);
	line-height: 1.1;
	letter-spacing: .08em;
	text-align: center;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 0 0px 4px #7e8ecd, 0 0 24px #7e8ecd;
	pointer-events: none;
}
/* FREE TRIAL badge: the oval bubble (bubble_shape_8, as behind the studio list) in the same
   pale glass as the background ones. bubble_shape_8_anim.svg is drawn by ::before (morph, rim,
   soap film and highlights all in the SVG; 162 × 137 + 16 of room on every side → the bleed);
   bubble-poke.js sloshes and ripples it on hover / tap. */
.sd-visual-badge {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 90;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 160px;
	height: 135px; /* 162 : 137 */
	color: var(--international-klein-blue);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .06em;
	filter: drop-shadow(0 10px 22px rgba(70, 82, 170, .18));
}
.sd-visual-badge::before {
	content: "";
	position: absolute;
	inset: calc(-100% * 16 / 137) calc(-100% * 16 / 162);
	background: url("../images/background/bubble_shape_8_anim.svg") no-repeat center / 100% 100%;
	pointer-events: none;
}
.sd-visual-badge img,
.sd-visual-badge span { position: relative; z-index: 1; }
.sd-visual-badge img { width: 90px; height: auto; }
@media (prefers-reduced-motion: reduce) {
	.sd-visual-badge::before { inset: 0; background-image: url("../images/background/bubble_shape_8.svg"); }
}

/* Gallery */
/* 3 columns: the current photo centred, its neighbours cut off by the viewport's edges (assets/js/studio-detail.js). */
.sd-gallery-wrap { position: relative; }
.sd-gallery-viewport { overflow: hidden; }
.sd-gallery-track {
	display: flex;
	gap: 20px;
	transition: transform .5s ease;
}
.sd-gallery-item {
	flex: none;
	width: min(540px, 49%);
	height: 264px;
	object-fit: cover;
	border-radius: 12px;
}
.sd-gallery-track.is-single { justify-content: center; }
.sd-gallery-nav {
	position: absolute;
	top: 50%;
	width: 48px;
	height: 48px;
	margin-top: -24px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 10px rgba(42, 46, 69, .12);
}
.sd-gallery-nav::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 9px;
	height: 9px;
	border-top: 2px solid var(--international-klein-blue);
	border-right: 2px solid var(--international-klein-blue);
	transform: translate(-30%, -50%) rotate(-135deg);
}
.sd-gallery-nav.is-prev { left: -24px; }
.sd-gallery-nav.is-next { right: -24px; }
.sd-gallery-nav.is-next::before { transform: translate(-70%, -50%) rotate(45deg); }
.sd-gallery-nav:disabled { opacity: .35; cursor: default; }

/* Access */
.sd-map {
	display: block;
	width: 100%;
	height: 312px;
	border: 0;
	border-radius: 16px;
}
.sd-info {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 32px;
}
.sd-info-card {
	padding: 32px;
	background: #fff;
	border-radius: 24px;
	box-shadow: 0 0 8px rgba(42, 46, 69, .05);
}
.sd-info-card h3 {
	margin-bottom: 20px;
	font-family: var(--font-title-en);
	font-size: 18px;
	font-weight: 400;
	letter-spacing: .02em;
	color: #1e2236;
}
.sd-info-card h3 span {
	display: block;
	margin-top: 4px;
	font-family: var(--font-jp);
	font-size: 13px;
	font-weight: 500;
	color: #747474;
}
.sd-info-card p { font-size: 14px; font-weight: 500; line-height: 1.85; }
.sd-info-card p + p { margin-top: 6px; }

/* Facilities */
.sd-facility-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(156px, 1fr));
	gap: 12px;
	padding: 0;
	list-style: none;
}
.sd-facility {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	min-height: 156px;
	padding: 16px 8px;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 0 8px rgba(42, 46, 69, .05);
	color: var(--international-klein-blue);
}
/* The icon files come as 28px or 30px boxes; one display size keeps them (and their stroke) uniform. */
.sd-facility-icon { width: 40px; height: 40px; flex-shrink: 0; }
.sd-facility span { font-size: 14px; color: #747474; letter-spacing: .04em; text-align: center; }

/* Schedule */
.sd-schedule-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.sd-schedule-head .section-title { margin-bottom: 20px; }
.sd-week-nav { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; font-size: 12px; color: #2a2e45; }
.sd-week-btn {
	padding: 9px 16px;
	border-radius: 999px;
	background: #fff;
	box-shadow: inset 0 0 0 1px rgba(42, 46, 69, .14);
	font-size: 12px;
	color: #2a2e45;
}
.sd-week-btn:disabled { opacity: .35; cursor: default; }
.sd-week-box {
	padding: 20px;
	background: #fff;
	border-radius: 24px;
	box-shadow: 0 2px 14px rgba(42, 46, 69, .06);
}
.sd-week {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 10px;
	min-height: 120px;
	transition: opacity .2s ease;
}
.sd-week.is-loading { opacity: .4; }
.sd-week-msg { grid-column: 1 / -1; align-self: center; text-align: center; font-size: 14px; color: #747474; }
.sd-day { display: flex; flex-direction: column; gap: 8px; }
.sd-day-slots { display: contents; } /* its slots stack in .sd-day; a grid of its own on phones */
.sd-day-head {
	display: flex;
    height: 24px;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    color: rgba(42, 46, 69, .35);
    justify-content: center;
    align-items: center;
    flex-direction: column
}
.sd-day.is-open .sd-day-head { font-weight: 700; color: var(--international-klein-blue); }
.sd-day.is-holiday .sd-day-head { color: #d62b2b; }
.sd-day-head small { display: block; font-size: 10px; }
.sd-slot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	width: 100%;
	padding: 10px 6px 11px;
	border-radius: 16px;
	background: #e9ebfa;
	font-size: 10px;
	line-height: 1.2;
	color: rgba(42, 46, 69, .62);
	transition: background .2s ease;
}
.sd-slot b { font-size: 11.5px; color: #2a2e45; }
.sd-slot em { font-style: normal; font-weight: 500; color: var(--international-klein-blue); }
/* 担当講師 (studio-detail.js, only when a lesson has one): its own row under the time and course */
.sd-slot .sd-slot-instructor {
	grid-row: 3;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
	white-space: normal;
	overflow-wrap: anywhere;
}
@media (hover: hover) {
	button.sd-slot:hover:not(:disabled) { background: #d6dbf6; }
}
.sd-slot.is-full,
.sd-slot.is-off { background: #f4f1ec; color: rgba(42, 46, 69, .4); cursor: default; }
.sd-slot.is-full b { color: rgba(42, 46, 69, .4); }
.sd-slot.is-off { justify-content: center; min-height: 63px; font-size: 10.5px; }
/* Next month before its open day (studio-detail.js): shown, not bookable yet. */
.sd-slot.is-waiting { opacity: .55; cursor: default; }
.sd-week-opens { padding: 4px 0 8px; font-weight: 700; color: var(--international-klein-blue); }
.sd-week-legend {
	display: flex;
	gap: 20px;
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid #eceef6;
	font-size: 11px;
	color: rgba(42, 46, 69, .62);
}
.sd-week-legend span::before {
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: 6px;
	vertical-align: -1px;
	border-radius: 50%;
	background: #e9ebfa;
}
.sd-week-legend .is-closed::before { background: #f4f1ec; }

/* Program */
.sd-program-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 318px));
	gap: 24px;
}
.sd-program-card {
	overflow: hidden;
	background: var(--bg-soft);
	border: 1px solid #e3e6f3;
	border-radius: 24px;
}
.sd-program-card img { display: block; width: 100%; height: 136px; object-fit: cover; }
.sd-program-body { padding: 16px 20px 22px; background: var(--bg-soft); }
.sd-program-tags { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.sd-program-course,
.sd-program-level {
	padding: 4px 14px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
}
.sd-program-course { background: var(--international-klein-blue); color: #fff; }
.sd-program-level { background: #fff; box-shadow: inset 0 0 0 1px #e3e6f3; color: #2a2e45; font-weight: 500; }
.sd-program-desc { font-size: 13px; line-height: 1.6; color: #2a2e45; }

/* Studio type: photo slider + text joined into one rounded card */
.sd-type-body {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 2px 14px rgba(42, 46, 69, .06);
}
/* Auto cross-fade slider (studio-detail.js): only the .is-active photo is visible.
   Height follows the text column; aspect-ratio is the minimum (and the height once stacked). */
.sd-type-slider { position: relative; aspect-ratio: 540 / 320; }
.sd-type-slider img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease; }
.sd-type-slider img.is-active { opacity: 1; }
.sd-type-text {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 48px 40px;
	text-align: center;
	background: #fff;
}
.sd-type-icon { width: 88px; margin-bottom: 24px; }
.sd-type-text h3 { font-size: clamp(22px, 2vw, 28px); font-weight: 700; line-height: 1.5; color: #1e2236; }
.sd-type-text p { margin-top: 20px; font-size: 15px; line-height: 2; color: #747474; }

/* Price */
.sd-price .price-grid { margin-top: 0; }
.sd-group {
	margin-top: 140px;
	padding: 56px 24px;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 0 8px rgba(42, 46, 69, .09);
	text-align: center;
}
.sd-group-title { font-family: var(--font-title-en); font-size: clamp(30px, 3.4vw, 48px); line-height: 1.2; color: #1e2236; }
.sd-group-text { margin: 24px 0 48px; font-size: 15px; font-weight: 700; line-height: 2; color: #1e2236; }

/* Big pill buttons */
.sd-btn {
	position: relative;
	justify-content: center;
	width: min(400px, 100%);
	height: 64px;
	font-size: 20px;
	font-weight: 700;
}
.sd-btn span { position: absolute; right: 28px; font-size: 12px; }

/* FAQ */
.faq-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 32px; }
.faq-tab {
	height: 48px;
	border-radius: 999px;
	box-shadow: inset 0 0 0 1px var(--moody-blue);
	font-family: var(--font-caption-jp);
	font-size: 16px;
	font-weight: 800;
	color: var(--moody-blue);
	transition: background .2s ease, color .2s ease;
}
.faq-tab.is-active { background: var(--international-klein-blue); box-shadow: none; color: #fff; }
.faq-panel { display: flex; flex-direction: column; gap: 16px; }
.faq-panel[hidden] { display: none; }
.faq-item {
	background: #fff;
	border: 2px solid #e9ebfa;
	border-radius: 32px;
}
.faq-item summary {
	position: relative;
	padding: 20px 72px 20px 88px;
	font-size: 17px;
	font-weight: 700;
	color: #1e2236;
	list-style: none;
	cursor: pointer;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 40px;
	width: 9px;
	height: 9px;
	margin-top: -7px;
	border-right: 2px solid #1e2236;
	border-bottom: 2px solid #1e2236;
	transform: rotate(45deg);
	transition: transform .2s ease;
}
.faq-item[open] summary::after { margin-top: -2px; transform: rotate(-135deg); }
.faq-item p { padding: 0 72px 22px 88px; font-size: 14px; line-height: 1.8; color: #747474; }

/* CTA */
.sd-cta { display: flex; flex-direction: column; align-items: center; gap: 32px; margin-bottom: 120px; }
.sd-cta-logo { width: 190px; height: auto; }
.sd-cta-insta {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: min(400px, 100%);
	height: 64px;
	border: 3px solid transparent;
	border-radius: 999px;
	background:
		linear-gradient(#fff, #fff) padding-box,
		linear-gradient(90deg, #4f5bd5, #962fbf, #d62976, #fa7e1e, #feda75) border-box;
	font-size: 20px;
	font-weight: 700;
}
.sd-cta-insta,
.sd-cta-insta span {
	background-clip: padding-box, border-box;
}
.sd-cta-insta span { position: absolute; right: 28px; font-size: 12px; color: #d62976; }

/* ---------- Drifting bubbles behind the main visual / studio type (as on the top page) ----------
   Same files and motion as .about-media::before in index.css (morph in the SVG, float + fade),
   pinned to the screen edge: shape_5 on the left of the visual, shape_6 on the right of the
   type card. bubble-poke.js stirs them when touched. --bubble-w = the part left on screen. */
.studio-detail { overflow-x: clip; } /* the off-screen parts would widen the page on phones */
/* No stacking context on the hosts (no isolation / z-index): the bubbles' z-index -1 then
   puts them behind all the page content, just above the tinted page background. */
.sd-visual,
.sd-type {
	--edge: max(var(--gutter), (100vw - 1100px) / 2);
	position: relative;
}
.sd-visual::before,
.sd-type::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, _anim adds 60 of room on every side → 761 × 706. */
.sd-visual::before {
	--bubble-w: min(420px, 30vw);
	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) * .35));
}
/* shape_6: 654 wide, _anim adds 60 of room → 774 × 745. Left edge, tilted 57°. */
.sd-type::before {
	--bubble-w: min(400px, 28vw);
	left: calc(-1.56 * var(--edge));
	width: calc(var(--bubble-w) * 774 / 467);
	aspect-ratio: 774 / 745;
	background-image: url("../images/background/bubble_shape_6_anim.svg");
	transform: translateY(calc(-37% + var(--bubble-w) * .3)) rotate(57deg);
	animation-delay: -6s;
}
/* FAQ: bubble_shape_9 (126 wide; _anim adds 14 of room on every side → 154 × 165) on the
   right edge, a quarter of it off-screen. */
.sd-faq {
	--edge: max(var(--gutter), (100vw - 876px) / 2);
	position: relative;
}
.sd-faq::before {
	--bubble-w: min(320px, 24vw);
	content: "";
	position: absolute;
	top: 37%;
	right: calc(-1.1 * var(--edge) - var(--bubble-w) * .25);
	z-index: -1;
	width: calc(var(--bubble-w) * 215 / 119);
	margin-right: calc(var(--bubble-w) * -14 / 126);
	aspect-ratio: 154 / 165;
	background: url("../images/background/bubble_shape_9_anim.svg") no-repeat center / 100% 100%;
	transform: translateY(-48%);
	pointer-events: none;
	animation: bubble-float 11s ease-in-out infinite alternate;
	animation-delay: -3s;
}
@media (max-width: 782px) {
	.sd-visual::before {
		--bubble-w: 60vw;
		transform: translateY(calc(-35% + var(--bubble-w) * .35));
	}
	.sd-faq::before { --bubble-w: 45vw; top: 18%; }
	/* above the card, mostly off the left edge */
	.sd-type::before {
		--bubble-w: 55vw;
		top: -76px;
		left: calc(-8.56 * var(--edge));
	}
}
@media (prefers-reduced-motion: reduce) {
	.sd-visual::before,
	.sd-type::before,
	.sd-faq::before { animation: none; }
	.sd-faq::before {
		width: calc(var(--bubble-w) * 215 / 119 * 126 / 154); /* same bubble size as the _anim one */
		margin-right: 0;
		aspect-ratio: 126 / 137;
		background-image: url("../images/background/bubble_shape_9.svg");
	}
	.sd-visual::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");
	}
	.sd-type::before {
		width: calc(var(--bubble-w) * 654 / 467);
		aspect-ratio: 654 / 625;
		background-image: url("../images/background/bubble_shape_6.svg");
	}
}

@media (max-width: 1240px) {
	.sd-gallery-nav.is-prev { left: 8px; }
	.sd-gallery-nav.is-next { right: 8px; }
}

@media (max-width: 782px) {
	.sd-visual { margin-top: 40px; }
	.sd-visual-media { aspect-ratio: 1 / 1; }
	.sd-visual-logo { top: 16px; right: 16px; width: 64px; }
	.sd-visual-badge { right: 24px; bottom: 16px; width: 112px; height: 95px; gap: 4px; font-size: 11px; }
	.sd-visual-badge img { width: 64px; }
	.sd-gallery.mt-120 { margin-top: 56px; }
	.sd-gallery-track { gap: 12px; }
	.sd-gallery-item { width: 72%; height: 200px; }
	.sd-map { height: 240px; }
	.sd-info { grid-template-columns: 1fr; gap: 12px; }
	.sd-info-card { padding: 24px; }
	.sd-facility-list { grid-template-columns: repeat(3, 1fr); }
	/* Square tiles: the column width sets the height. Every label gets a two-line box, so a label
	   that wraps (グリップソックス) doesn't push its icon up: icons sit at one height in every tile. */
	.sd-facility {
		display: grid;
		grid-template-rows: 1fr auto 42px 1fr; /* 42px: 8px gap + two 12px lines at 1.4 */
		justify-items: center;
		aspect-ratio: 1 / 1;
		min-height: 0;
		gap: 0;
		padding: 6px 4px;
	}
	.sd-facility-icon { grid-row: 2; width: 32px; height: 32px; }
	/* line-break: strict keeps ー off the start of a line (ヘアドライヤ / ー). */
	.sd-facility span { grid-row: 3; align-self: start; margin-top: 8px; font-size: 12px; line-height: 1.4; line-break: strict; }
	.sd-schedule-head { flex-direction: column; align-items: flex-start; gap: 0; }
	/* Week → one row per day: "水 21" on the left, its slots as a 2-column grid on the right. */
	.sd-week-nav { width: 100%; justify-content: space-between; }
	.sd-week-box { padding: 4px 14px 16px; border-radius: 20px; }
	.sd-week { display: block; min-height: 0; }
	.sd-day { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; padding: 14px 0; border-bottom: 1px solid #eceef6; }
	.sd-day-head { align-self: start; justify-content: flex-start; height: auto; margin: 0; padding-top: 9px; font-size: 14px; line-height: 1.3; }
	.sd-day-head small { margin-top: 2px; font-size: 9px; line-height: 1.2; }
	.sd-day-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.sd-slot {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: baseline;
		gap: 2px 6px;
		padding: 8px 10px 9px;
		text-align: left;
		border-radius: 10px;
		font-size: 11px;
	}
	.sd-slot b { font-size: 14px; }
	.sd-slot em { font-size: 11px; }
	.sd-slot span { grid-column: 1 / -1; grid-row: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	/* Closed / not bookable: one short line across both columns. */
	.sd-slot.is-off { display: block; grid-column: 1 / -1; min-height: 0; padding: 8px 10px; font-size: 12px; text-align: left; }
	.sd-week-legend { flex-wrap: wrap; gap: 6px 16px; margin-top: 4px; border-top: 0; }
	.sd-program-list { grid-template-columns: 1fr; }
	.sd-type-body { grid-template-columns: 1fr; }
	.sd-type-text { padding: 40px 20px; }
	/* Let the text wrap to the screen (the ※ note keeps its own line). */
	.sd-type-text p br,
	.sd-group-text br:not(:first-of-type) { display: none; }
	.sd-group { margin-top: 80px; padding: 40px 16px; }
	.sd-group-text { font-size: 13px; }
	.sd-btn, .sd-cta-insta { height: 56px; font-size: 16px; }
	.sd-btn { font-size: 14px; } /* same as .btn-pill on phones (common.css) */
	.faq-tabs { grid-template-columns: repeat(2, 1fr); }
	.faq-tab { height: 44px; font-size: 14px; background: #fff; }
	.faq-item { border-radius: 24px; }
	.faq-item summary { padding: 16px 48px 16px 20px; font-size: 15px; }
	.faq-item summary::after { right: 22px; }
	.faq-item p { padding: 0 20px 18px; }
}