/* =========================================================
   Base / Reset
========================================================= */
*, *::before, *::after { box-sizing: border-box; }
/* scrollbar-gutter: stable reserves the scrollbar's width permanently —
   without it, locking body scroll while the hamburger menu is open
   (overflow:hidden, in initMobileNav()) removes the scrollbar and the
   page's content area widens by its width, reading as everything
   nudging right the moment the menu opens. */
html { scroll-behavior: smooth; overflow-y: auto; scrollbar-gutter: stable; }

/* Figma trims every text box to the glyphs' own cap-height/baseline (no
   half-leading above/below). Browsers now support the same behaviour via
   text-box-trim — apply it site-wide so spacing matches the design exactly
   instead of the browser's default (larger) font-metric line boxes. Safe
   progressive enhancement: unsupported browsers just keep normal leading. */
body, h1, h2, h3, h4, h5, h6, p, span, a, button, li, dt, dd, label, i {
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	-webkit-text-box-trim: trim-both;
	-webkit-text-box-edge: cap alphabetic;
}
/* Font Awesome icon glyphs aren't real text — "cap-height to alphabetic
   baseline" is a meaningless/mismatched metric for their ink, so the trim
   above shifts icons off-centre inside their circular buttons. Exempt
   them and let the flex-centered parent handle centering normally. */
i[class*="fa-"] {
	text-box-trim: none;
	text-box-edge: auto;
	-webkit-text-box-trim: none;
	-webkit-text-box-edge: auto;
}

body {
	margin: 0;
	font-family: var(--font-jp);
	color: var(--color-text);
	background: var(--color-bg-cream);
	font-size: 16px;
	line-height: 1.8;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }
button { font: inherit; cursor: pointer; }

.container {
	position: relative;
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 var(--container-padding);
}

/* Scroll reveal — content fades/slides up into place the first time it
   enters the viewport (see initScrollReveal() in main.js). Section
   headings are intentionally excluded; only each section's body content
   gets this treatment. */
.js-reveal {
	opacity: 0;
	transform: translateY(48px);
	transition: opacity .9s ease, transform .9s ease;
}
.js-reveal.is-revealed { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
	.js-reveal { opacity: 1; transform: none; transition: none; }
}

/* Left edge aligns with the standard container; right edge bleeds to the
   viewport edge so the slider can run off-screen (YouTube / Column). */
.container--bleed-right {
	/* Must line up with .container's CONTENT edge (inside its own padding),
	   not its outer box edge — add the padding back in. Uses 100% of this
	   element's (full-width) containing block rather than 100vw, since
	   100vw includes the scrollbar gutter on this page and drifts out of
	   sync with .container's plain margin:auto centering. */
	margin-left: max(var(--container-padding), calc((100% - var(--container-width)) / 2 + var(--container-padding)));
	margin-right: 0;
	overflow: hidden;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 20px;
	border-radius: var(--radius-pill);
	font-family: var(--font-jp);
	font-weight: 700;
	font-size: 12px;
	white-space: nowrap;
	border: 1px solid transparent;
	transition: opacity var(--transition-base), transform var(--transition-base);
}
.btn svg { width: 16px; height: 16px; flex: none; }
.btn i { flex: none; font-size: 13px; }
.btn__icon { width: 24px; height: 24px; flex: none; object-fit: contain; }
.btn:hover { opacity: 0.85; }
.btn--outline { background: #fff; color: var(--color-primary); border-color: transparent; }
/* Treatment detail page ("施術メニュー詳細ページ") keeps the border on its
   own reservation CTA row (inside .treatment-cta, right after 施術の流れ). */
.treatment-cta .btn--outline { border-color: var(--color-border); }
/* LINE予約 / カウンセリング予約 buttons are now pre-designed graphics
   (cta-btn-line.png / cta-btn-counseling.png — full button art, gradient
   and arrow baked in), not CSS-drawn — .btn--line/.btn--primary are just
   plain unstyled wrappers around that image everywhere they're used. */
.btn--line, .btn--primary { background: none; border: none; padding: 0; border-radius: 0; gap: 0; }
.btn--line .btn__icon, .btn--primary .btn__icon {
	width: 180px;
	max-width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	border: none;
	display: block;
}
.btn--accent { background: var(--color-primary); color: #fff; }
.btn--pill-lg { padding: 16px 40px; font-size: 16px; font-weight: 500; }

.section-heading { margin-bottom: 48px; position: relative; }
.section-heading__en {
	font-family: var(--font-en);
	line-height: 1;
	letter-spacing: 1px;
	color: var(--color-primary);
	margin: 0;
}
.section-heading__jp {
	font-family: var(--font-jp);
	font-size: 16px;
	font-weight: 500;
	color: var(--color-text);
	margin: 0 0 20px;
}
.section-heading__lead { font-family: var(--font-serif-jp); font-size: 20px; color: var(--color-lead); line-height: 1.9; margin: 0; }
.section-heading__view-all {
	font-family: var(--font-jp); font-size: 20px; font-weight: 500; color: var(--color-primary);
	white-space: nowrap;
}

/* Size variants (per-section, confirmed via Dev Mode) */
.section-heading--size-50 .section-heading__en { font-size: 50px; margin-bottom:24px;}
.section-heading--size-50 .section-heading__lead { font-size: 16px; margin-top:60px;}
.section-heading--size-80 .section-heading__en { font-size: 80px; }
.section-heading--size-100 .section-heading__en { font-size: 100px; margin-bottom:32px;}

/* Structure variants */
.section-heading--row {
	display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 24px 40px;
}
.section-heading--row .section-heading__meta { flex: 1; min-width: 260px; padding-bottom: 8px; margin-left: 40px; }
.section-heading--row .section-heading__view-all { padding-bottom: 12px; }

.section-heading--stack-left { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.section-heading--stack-left .section-heading__meta { margin-top: 16px; }
.section-heading--stack-left .section-heading__view-all { position: absolute; right: 0; top: 8px; }

.section-heading--stack-right { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.section-heading--stack-right .section-heading__meta { margin-top: 16px; }

.section-heading--stack-center { display: flex; flex-direction: column; align-items: center; text-align: center; }
.section-heading--stack-center .section-heading__meta { margin-top: 16px; }

.section-heading--light .section-heading__en { color: #fff; }
.section-heading--light .section-heading__jp,
.section-heading--light .section-heading__lead { color: #fff; }
.section-heading--light .section-heading__view-all { color: #fff; }

@media (max-width: 900px) {
	/* Same specificity leak as the size-50 fix below: the desktop
	   size-100 rule's margin-bottom:32px (2 classes) otherwise beats any
	   same-media reset, stacking with .section-heading__meta's own
	   margin-top:16px for a 48px EN→JP gap (DOCTOR/MENU/WORRIES) instead
	   of the 16px every other section uses. */
	.section-heading--size-100 .section-heading__en { font-size: 56px; margin-bottom: 0; }
	.section-heading--size-80 .section-heading__en { font-size: 48px; }
	/* Same specificity leak as the lead-font fix below: the desktop
	   size-50 rule's margin-bottom:24px (2 classes) otherwise beats any
	   same-media reset, stacking with .section-heading__meta's own
	   margin-top:16px (flex children don't collapse margins) for a 40px
	   EN→JP gap instead of the 16px every other section uses. */
	.section-heading--size-50 .section-heading__en { font-size: 36px; margin-bottom: 0; }
	.section-heading__lead { font-size: 14px; }
	/* The desktop size-50 rule (2 classes) otherwise beats this same-media
	   14px/margin:0 reset (1 class) on specificity alone, regardless of
	   source order — leaking its 16px/60px-top-margin desktop values into
	   every size-50 section (YouTube, Campaign, COLUMN, CALENDAR, FAQ) on
	   mobile and making them inconsistent with the size-80/100 sections. */
	.section-heading--size-50 .section-heading__lead { font-size: 14px; margin-top: 0; }
	.section-heading--row { flex-direction: column; align-items: flex-start; }
	.section-heading--row .section-heading__meta { margin-left: 0; }
	/* Figma's mobile frame left-aligns every section heading, including
	   WORRIES (desktop uses stack-right for its own layout reasons). */
	#worries .section-heading { align-items: flex-start; text-align: left; }
	/* Figma keeps VIEW ALL pinned top-right next to the heading on mobile
	   too — it only used to fall below the lead paragraph because this
	   switched to static/in-flow positioning after the __en/__meta stack.
	   Reserve room on the right of the EN heading for it — "You Tube" is
	   short enough to never notice, but "Beauty Column" is wide enough at
	   36px to run directly under the VIEW ALL link without this. */
	/* Per explicit request, moved back to in-flow below the section
	   title instead of pinned top-right next to the EN heading. */
	.section-heading--stack-left .section-heading__view-all { position: static; display: inline-block; margin-top: 16px; font-size: 16px; }
}

.section { padding: 96px 0; }

/* =========================================================
   Header
========================================================= */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: transparent;
	transition: background var(--transition-base), box-shadow var(--transition-base);
}
.site-header.is-scrolled {
	background: #fff;
	box-shadow: 0 2px 12px rgba(26,19,17,.06);
}
.site-header.is-scrolled .btn--outline { background: #F2EFEB; }
.site-header__inner {
	max-width: 1880px;
	height: 80px;
	margin: 0 auto;
	padding: 0 40px;
	display: flex;
	align-items: center;
	gap: 24px;
}
.site-header__logo { flex: none; display: block; }
.site-header__logo img { width: 240px; height: auto; max-height: none; }
.site-header__logo-text {
	font-family: var(--font-en);
	font-size: 22px;
	letter-spacing: 1px;
	color: var(--color-text);
}
.site-header__catch {
	flex: none;
	font-family: var(--font-serif-jp);
	font-size: 12px;
	color: var(--color-lead);
	line-height: 1.5;
}
.site-header__quicklinks { display: none; gap: 24px; list-style: none; margin: 0; padding: 0; flex: none; }
.site-header__quicklinks a { display: flex; align-items: center; gap: 6px; font-family: var(--font-jp); font-size: 13px; color: var(--color-text); }
.site-header__quicklinks a::before {
	content: ''; width: 0; height: 0;
	border-top: 3px solid transparent; border-bottom: 3px solid transparent; border-left: 4px solid currentColor;
}
.site-header__meta {
	display: flex;
	gap: 24px;
	margin-left: auto;
	flex: none;
}
.site-header__meta-item { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.site-header__meta-badge {
	/* Match the value/phone text below rather than a fixed width — the
	   two meta items have different text lengths ("10:00 – 19:00" vs a
	   phone number), so one shared fixed width under/overshoots one of them. */
	border: 1px solid var(--color-text); border-radius: var(--radius-pill); width: 100%; box-sizing: border-box;
	height: 19px; padding: 0 10px; display: flex; align-items: center; justify-content: center;
	font-family: var(--font-jp); font-size: 10px; line-height: 1; color: var(--color-text); white-space: nowrap;
}
.site-header__meta-value { display: block; font-family: var(--font-serif-jp); font-size: 15px; line-height: 1.2; color: var(--color-text); }
.site-header__meta-sub { display: block; font-size: 11px; font-weight: 300; line-height: 1.2; color: var(--color-text); }
.site-header__phone {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-serif-jp);
	font-size: 17px;
	line-height: 1.2;
	font-weight: 400;
	color: var(--color-text);
}
.site-header__phone-icon { font-size: 13px; color: var(--color-text); }
.site-header__sns { display: flex; align-items: center; gap: 10px; flex: none; }
.site-header__sns a {
	display: flex; align-items: center; justify-content: center;
	width: 32px; height: 32px; border-radius: 50%;
	background: var(--color-primary); color: #fff;
	transition: background var(--transition-base), opacity var(--transition-base);
}
.site-header__sns i { font-size: 14px; }
.site-header__sns a:hover { opacity: .8; }
.site-header__cta { display: flex; gap: 10px; flex: none; }
.site-header__cta .btn i { font-size: 14px; }
.site-header__hamburger {
	flex: none;
	width: 56px; height: 56px;
	border-radius: 50%;
	background: transparent;
	border: 1px solid var(--color-text);
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 0;
}
.site-header__hamburger-bars { display: flex; flex-direction: column; align-items: center; gap: 5px; }
/* Scoped to the bars wrapper's children — a bare ".site-header__hamburger
   span" also matched .site-header__hamburger-bars itself (it's a <span>
   too), squashing the whole group into what looked like a single line. */
.site-header__hamburger-bars span { width: 22px; height: 2px; background: var(--color-text); transition: transform var(--transition-base), opacity var(--transition-base); }
.site-header__hamburger em { font-style: normal; font-size: 8px; letter-spacing: .5px; color: var(--color-text); margin-top: 0; }
.site-header__hamburger[aria-expanded="true"] em { opacity: 0; }
.site-header__hamburger[aria-expanded="true"] .site-header__hamburger-bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header__hamburger[aria-expanded="true"] .site-header__hamburger-bars span:nth-child(2) { opacity: 0; }
.site-header__hamburger[aria-expanded="true"] .site-header__hamburger-bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Second header row (Figma node 951:73) — section quick-nav below the
   main bar, desktop only. */
.site-header__nav { background: #ebe3da; display: flex; justify-content: center; height: 48px; }
.site-header__nav-inner { display: flex; justify-content: center; gap: 40px; width: 100%; max-width: 1200px; }
.site-header__nav a {
	flex: none;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--font-jp); font-size: 16px; font-weight: 500;
	color: var(--color-primary);
	transition: opacity var(--transition-base);
}
.site-header__nav a:hover { opacity: .7; }

/* Mobile-only fixed bottom CTA bar — desktop already has these in the
   header, so this stays hidden until the mobile breakpoint below. */
.mobile-sticky-cta {
	display: none;
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
	background: #fff;
	box-shadow: 0 -2px 12px rgba(26,19,17,.08);
	padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
}
/* One row: LINE is the primary action (1.5x width, brand green); the
   other two are tab-bar style (stacked icon + label). SNS moved up to
   .site-header__sns next to the logo (see max-width:782px below) so
   this bar could drop from 3 rows (~168px) to 1 (~64px). */
.mobile-sticky-cta__row { display: flex; gap: 5px; }
/* min-width:0 overrides flex items' default min-width:auto — without it
   a flex item won't shrink past its content's unwrapped intrinsic width,
   pushing the row wider than the fixed bar and clipping the last tab
   off-screen. All 3 tabs are now pre-designed graphics (cta-sticky-*.png
   — background, border, rounded corners, icon and label all baked in),
   at native 1.5:1:1 proportions matching this row's flex ratio, so each
   anchor is just an image wrapper sized by flex-basis. */
.mobile-sticky-cta__line { flex: 1.5; min-width: 0; display: block; }
.mobile-sticky-cta__tab { flex: 1; min-width: 0; display: block; }
.mobile-sticky-cta__line img, .mobile-sticky-cta__tab img { display: block; width: 100%; height: auto; }
@media (max-width: 782px) {
	.mobile-sticky-cta { display: block; }
	/* Clears space so the fixed bar never permanently covers the
	   footer's last content while scrolled to the bottom of the page —
	   sized for the new ~64px single-row bar (was 168px for the old
	   3-row one). */
	.site-footer { padding-bottom: 84px; }
}

/* Fixed bottom-right follow banner (sitewide campaign promo). On mobile
   it sits above .mobile-sticky-cta (~168px tall, see above) instead of
   overlapping it. Dismissal is handled in main.js (initFollowBanner),
   persisted in localStorage so a closed banner stays closed. */
.bloom-promo-widget { position: fixed; right: 24px; bottom: 24px; z-index: 140; width: 250px; }
.bloom-promo-widget.is-hidden { display: none; }
.bloom-promo-widget__link { display: block; }
.bloom-promo-widget__link img { display: block; width: 100%; height: auto; box-shadow: 0 4px 16px rgba(26,19,17,.18); }
.bloom-promo-widget__close {
	position: absolute; top: -12px; right: -12px; width: 28px; height: 28px;
	border-radius: 50%; border: none; background: var(--color-text); color: #fff;
	font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center;
	cursor: pointer; box-shadow: 0 2px 6px rgba(26,19,17,.25); padding: 0;
}
.bloom-promo-widget__close:hover { opacity: .85; }
@media (max-width: 782px) {
	.bloom-promo-widget { width: 120px; right: 12px; bottom: 180px; }
}

/* =========================================================
   Hamburger menu (full-screen, 2-column — Figma node 613:2643)
========================================================= */
.mobile-nav {
	position: fixed; inset: 0; z-index: 200;
	height: 100dvh;
	display: flex;
	transform: translateY(-100%);
	pointer-events: none;
	transition: transform .5s ease;
}
.mobile-nav.is-open { transform: translateY(0); pointer-events: auto; }

/* env(safe-area-inset-*) keeps this clear of a device notch or the
   browser's own floating toolbar on real phones — without it a fixed
   top/right offset can end up partly hidden behind that chrome even
   though it measures correctly in a desktop viewport. */
/* Figma positions the CLOSE label overlapping the circle's own lower
   third (circle: 60px tall; label starts 37px down from the circle's
   top) rather than stacked below it with a gap — stacking them
   separately (our previous approach) made the pair read as wider than
   the circle's own frame, like the label was spilling out of it. */
.mobile-nav__close {
	position: absolute;
	top: calc(32px + env(safe-area-inset-top, 0px));
	right: calc(40px + env(safe-area-inset-right, 0px));
	z-index: 1;
	width: 60px; height: 60px;
	background: none; border: none; color: #fff;
}
.mobile-nav__close-circle {
	position: absolute; top: 0; left: 0;
	width: 60px; height: 60px; border-radius: 50%; border: 1px solid rgba(255,255,255,.6);
	display: flex; align-items: center; justify-content: center; padding-bottom: 12px;
}
.mobile-nav__close-circle svg { width: 16px; height: 16px; }
.mobile-nav__close-label {
	position: absolute; top: 37px; left: 50%; transform: translateX(-50%);
	font-family: var(--font-jp); font-size: 8px; letter-spacing: .32px; white-space: nowrap;
	text-box-trim: none; text-box-edge: auto;
	-webkit-text-box-trim: none; -webkit-text-box-edge: auto;
}

/* Left column — campaign visual, white background, vertically centered */
.mobile-nav__campaign {
	flex: 1 1 50%; background: #fff; overflow-y: auto;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	min-height: 100%;
	padding: 72px 40px;
}
.mobile-nav__campaign-en { font-family: var(--font-en); font-size: 32px; color: var(--color-primary); text-align: center; margin: 0; }
.mobile-nav__campaign-jp { font-family: var(--font-jp); font-size: 14px; color: var(--color-text); text-align: center; margin: 20px 0 40px; }
.mobile-nav__campaign-images { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; width: 100%; max-width: 700px; }
.mobile-nav__campaign-images img { width: 100%; display: block; }

/* Right column — nav panel, brand-color background. Two sub-columns
   side by side (main nav+info | accordion menus), split by a vertical
   divider, matching the Figma layout exactly rather than stacking
   everything in one column. The panel itself is stretched to the full
   modal height (so its background fills the screen) and scrolls its
   own content; .mobile-nav__panel-inner is a plain content-sized block
   inside it, so the flex row's cross size — and therefore the
   align-self:stretch divider — matches the taller of the two columns
   instead of the panel's full scrollable height. */
/* scrollbar-gutter reserves the scrollbar's width whether or not it's
   currently needed — without it, expanding an accordion group could
   newly make this panel tall enough to scroll, and the scrollbar
   appearing/disappearing shifted the available content width, which
   nudged every right-aligned chevron in/out as accordions opened and
   closed. */
.mobile-nav__panel {
	flex: 1 1 50%; background: var(--color-primary); overflow-y: auto;
	scrollbar-gutter: stable;
	padding: 110px 48px 56px;
}
.mobile-nav__panel-inner { display: flex; align-items: flex-start; gap: 40px; }
.mobile-nav__panel-main { flex: 0 0 380px; display: flex; flex-direction: column; }
.mobile-nav__panel-divider { align-self: stretch; width: 1px; background: rgba(255,255,255,.3); flex: none; }
.mobile-nav__panel-menus { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 40px; }

/* Row rhythm is 52px top-to-top in Figma (156,208,260…572) — approximated
   here as a flex gap since actual rendered line-height of a 28px Cinzel
   line isn't 0. */
.mobile-nav__list { display: flex; flex-direction: column; gap: 24px; }
.mobile-nav__link { display: flex; align-items: baseline; gap: 20px; color: #fff; flex-wrap: wrap; }
.mobile-nav__link-en { font-family: var(--font-en); font-size: 28px; font-weight: 400; white-space: nowrap; }
.mobile-nav__link-jp { font-family: var(--font-jp); font-size: 16px; font-weight: 500; white-space: nowrap; }
/* "Beauty Column" + "美容医療コラム" side by side is wider than a narrow
   panel can hold — let long rows wrap onto their own line instead of
   overflowing horizontally. */
@media (max-width: 480px) {
	.mobile-nav__link { flex-direction: column; gap: 6px; }
	.mobile-nav__link-en { font-size: 24px; }
}

.mobile-nav__sns { display: flex; gap: 10px; margin: 36px 0 0; }
.mobile-nav__sns a {
	display: flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff;
}
.mobile-nav__sns i { font-size: 14px; }

.mobile-nav__brand { margin: 32px 0 0; }
.mobile-nav__brand-logo img { max-width: 160px; height: auto; filter: brightness(0) invert(1); }
.mobile-nav__brand-logo-text { font-family: var(--font-en); font-size: 18px; color: #fff; }

.mobile-nav__info { font-family: var(--font-jp); font-size: 14px; font-weight: 300; color: #fff; line-height: 1.6; margin: 16px 0 0; }
.mobile-nav__info a { color: #fff; }
/* text-box-trim's "cap alphabetic" edge metric mis-clips wrapped
   multi-line <p> text (same recurring issue as the footer's info block)
   — exempt this paragraph and restore normal line spacing. */
.mobile-nav__info p {
	text-box-trim: none; text-box-edge: auto;
	-webkit-text-box-trim: none; -webkit-text-box-edge: auto;
	margin: 0 0 6px;
}
.mobile-nav__info p:last-child { margin-bottom: 0; }

.mobile-nav__cta { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }

/* Accordion sub-column — 施術メニュー / お悩みから探す, each its own
   group heading followed by its taxonomy terms. All groups render
   collapsed by default (Figma shows one open per group purely to
   illustrate the expanded state, not as the initial state). */
.mobile-nav__accordion-title { font-family: var(--font-jp); font-size: 20px; font-weight: 500; color: #fff; margin: 0 0 16px; }
/* .accordion__item/.accordion__panel-inner (FAQ's white card look) are
   also present on these elements — reused for the JS hook in
   initAccordion(). Override the card chrome with the extra class for
   higher specificity so it doesn't bleed through here. */
.mobile-nav__panel-menus .accordion__item { background: none; border: none; border-radius: 0; }
.mobile-nav__panel-menus .accordion__item + .accordion__item { margin-top: 16px; }
.mobile-nav__panel-menus .accordion__panel-inner { display: block; padding: 0; }
/* .accordion__trigger's own base rule (FAQ's 24px/28px card padding,
   16px gap) is a single-class selector defined LATER in this file, so a
   same-specificity .mobile-nav__accordion-trigger override was losing
   the cascade and silently inheriting that padding — inflating every
   collapsed row to ~60px tall and making the gaps between categories
   look wildly inconsistent. Scope to the ancestor for higher
   specificity so this reliably wins regardless of file order. */
.mobile-nav__panel-menus .accordion__trigger {
	width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
	background: none; border: none; padding: 0; margin: 0;
	font-family: var(--font-jp); font-size: 16px; font-weight: 500; color: #fff; text-align: left;
}
/* Fixed single-line row — a category name wrapping to 2 lines (in the
   narrower real-browser column vs Figma's 1920px canvas) was what made
   the spacing between rows look inconsistent. text-box-trim's
   "cap alphabetic" edge metric is unreliable at this small a font size
   on some mobile browsers (same recurring issue as elsewhere in this
   theme) and was clipping the top/bottom of the label — exempt it. */
.mobile-nav__accordion-label {
	white-space: nowrap;
	text-box-trim: none; text-box-edge: auto;
	-webkit-text-box-trim: none; -webkit-text-box-edge: auto;
}
/* A real SVG chevron instead of a border+rotate() triangle — the
   border/transform approach rendered inconsistently (mis-shapen or
   misaligned) on some mobile browsers. */
.mobile-nav__accordion-icon {
	width: 12px; height: 8px; flex: none; color: #fff;
	transition: transform var(--transition-base);
}
.mobile-nav__accordion-icon svg { display: block; width: 100%; height: 100%; }
.mobile-nav__accordion-item.is-open .mobile-nav__accordion-icon { transform: rotate(180deg); }
.mobile-nav__accordion-panel { max-height: 0; overflow: hidden; transition: max-height var(--transition-base); }
.mobile-nav__accordion-item.is-open .mobile-nav__accordion-panel { max-height: 640px; }
/* Sub-items stack one per line (Figma: a column of <p> tags), not
   wrapped inline chips. */
.mobile-nav__accordion-list { display: flex; flex-direction: column; gap: 10px; padding: 14px 0 6px; }
.mobile-nav__accordion-list a { display: block; font-family: var(--font-jp); font-size: 14px; font-weight: 300; line-height: 1.5; color: rgba(255,255,255,.9); }

@media (max-width: 1100px) {
	.mobile-nav__panel-inner { flex-direction: column; gap: 32px; }
	.mobile-nav__panel-divider { width: auto; height: 1px; align-self: stretch; }
	/* 施術メニュー/お悩みから探すのアコーディオンを先に、EN/JPリンク一覧
	   （SNS・ロゴ・住所・CTAボタンも同じブロックにまとまっているため道連れ）
	   を後に表示する — 3つとも同じ列内の兄弟要素なので order だけで並び替え。 */
	.mobile-nav__panel-menus { order: 1; }
	.mobile-nav__panel-divider { order: 2; }
	.mobile-nav__panel-main { order: 3; }
}
@media (max-width: 900px) {
	.mobile-nav__campaign { display: none; }
	.mobile-nav__panel { flex: 1 1 100%; padding: calc(88px + env(safe-area-inset-top, 0px)) 24px 40px; }
	.mobile-nav__close {
		top: calc(20px + env(safe-area-inset-top, 0px));
		right: calc(20px + env(safe-area-inset-right, 0px));
	}
}

.mobile-nav__overlay {
	position: fixed; inset: 0; background: rgba(26,19,17,.4); z-index: 190;
	opacity: 0; pointer-events: none; transition: opacity var(--transition-base);
}
.mobile-nav__overlay.is-open { opacity: 1; pointer-events: auto; }

/* =========================================================
   Footer
========================================================= */
.site-footer { background: var(--color-footer-bg); color: #fff; padding: 56px 0 0; }
/* Moved below the 施術メニュー/お悩みから探す sitemap tiers (now the
   footer's 3rd tier) and collapsed from its old 2-column layout
   (logo/info beside the nav) to a single centered column. */
.site-footer__inner {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 32px var(--container-padding) 40px;
	border-top: 1px solid rgba(255,255,255,.15);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	text-align: center;
}
.site-footer__brand { display: flex; flex-direction: column; align-items: center; }
.site-footer__logo img { width: 300px; height: auto; filter: brightness(0) invert(1); }
.site-footer__logo-text { font-family: var(--font-en); font-size: 18px; color: #fff; }
.site-footer__info { margin: 12px 0 20px; font-size: 16px; color: rgba(255,255,255,.85); line-height: 1.9; }
/* Same text-box-trim mismatch as elsewhere: it shrinks these <p> boxes
   well below their real line-height (badly so once the address wraps to
   two lines), crushing the spacing. Restore normal leading here. */
.site-footer__info p {
	text-box-trim: none; text-box-edge: auto;
	-webkit-text-box-trim: none; -webkit-text-box-edge: auto;
	margin: 0 0 4px;
}
.site-footer__info p:last-child { margin-bottom: 0; }
.site-footer__info a { color: inherit; }
.site-footer__sns { display: flex; justify-content: center; gap: 10px; }
.site-footer__sns a {
	display: flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff;
}
.site-footer__sns svg { width: 14px; height: 14px; }
.site-footer__nav-title { font-family: var(--font-jp); font-size: 14px; font-weight: 700; color: #fff; margin: 0 0 20px; }
.site-footer__nav-list { display: flex; flex-direction: column; gap: 14px; font-size: 13px; }
.site-footer__nav-list a { color: rgba(255,255,255,.8); }
/* TOP〜FAQ's links run as a single horizontal row (the 施術メニュー and
   お悩みから探す sitemaps below keep the normal vertical per-category
   list, unaffected). */
.site-footer__nav-groups { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.site-footer__inner .site-footer__nav-list { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px 24px; }
.site-footer__nav-groups > .site-footer__nav:first-child .site-footer__nav-list a { font-weight: 700; font-size: 16px; }

/* Full sitemap tiers — shared by the 施術メニュー block (every treatment
   under every category) and the お悩みから探す block below it (every
   worry sub-category under every major category). */
.site-footer__sitemap {
	max-width: var(--container-width); margin: 0 auto;
	padding: 32px var(--container-padding) 40px;
	border-top: 1px solid rgba(255,255,255,.15);
}
/* Footer's 1st tier (施術メニュー) — no divider/space above it since
   nothing sits above it any more. */
.site-footer > .site-footer__sitemap:first-child { padding-top: 0; border-top: 0; }
.site-footer__sitemap-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 24px; }
.site-footer__sitemap-cat { font-family: var(--font-jp); font-size: 16px; font-weight: 700; color: #fff; margin: 0 0 14px; }
.site-footer__sitemap .site-footer__nav-list { gap: 10px; font-size: 12px; }
.site-footer__nav-sublabel { display: block; font-size: 10px; color: rgba(255,255,255,.55); margin-top: 2px; }
@media (max-width: 1024px) {
	.site-footer__sitemap-grid { grid-template-columns: repeat(4, 1fr); row-gap: 32px; }
}
@media (max-width: 600px) {
	.site-footer__sitemap-grid { grid-template-columns: repeat(2, 1fr); }
}

.site-footer__bottom {
	border-top: 1px solid rgba(255,255,255,.2); padding: 18px var(--container-padding);
	max-width: var(--container-width); margin: 0 auto;
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
	font-size: 11px; color: rgba(255,255,255,.7);
}
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.site-footer__legal a { color: rgba(255,255,255,.7); }
@media (max-width: 782px) {
	.site-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* =========================================================
   Responsive
========================================================= */
@media (max-width: 1600px) {
	.site-header__catch, .site-header__meta { display: none; }
}
@media (max-width: 1100px) {
	.site-header__cta, .site-header__sns { display: none; }
}
@media (max-width: 782px) {
	/* Figma mobile spec (node 692:49) was 180px logo / 45px hamburger with
	   no SNS row in between — now that .site-header__sns lives here too
	   (moved from the bottom sticky CTA), the logo is narrower than spec
	   so all three still fit with room to spare on a 360px-wide screen,
	   not just exactly at 375-390px. */
	.site-header__inner { height: 60px; padding: 0 16px; gap: 12px; }
	.site-header__logo img { width: 125px; }
	.site-header__quicklinks, .site-header__nav { display: none; }
	/* .site-header__meta's margin-left:auto (the usual thing pushing
	   trailing header items right) is display:none at this width, so
	   the hamburger needs its own push to the right edge. */
	.site-header__hamburger { width: 45px; height: 45px; margin-left: auto; }
	.site-header__hamburger-bars span { width: 18px; }
	.site-header__hamburger em { font-size: 6px; }
	/* SNS moved here from the bottom sticky CTA (main.js/header.php),
	   which dropped to one row without them — re-shown at a smaller size
	   right after the logo (.site-header__cta stays hidden; the 1100px
	   rule above only meant to hide both on desktop-narrow, not mobile). */
	.site-header__sns { display: flex; gap: 4px; }
	.site-header__sns a { width: 30px; height: 30px; }
	.site-header__sns i { font-size: 13px; }
	.section { padding: 56px 0; }
	.section-heading__en { font-size: 30px; }
}

/* =========================================================
   Top background layer — shared background (color + faded photo)
   spanning the header, hero and CASE sections as one continuous
   backdrop. Sized/positioned by initTopBgLayer() in main.js since
   it must track the CASE section's real (dynamic) bottom edge.
========================================================= */
.top-bg-layer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: -1;
	pointer-events: none;
	background-color: #f2efeb;
}
.top-bg-layer::before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: #f2efeb;
	background-image: var(--top-bg-image);
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	background-blend-mode: luminosity;
	opacity: 0.2;
}

/* =========================================================
   Hero slider — simple looping image carousel
========================================================= */
.hero-slider { width: 100%; max-width: 100vw; overflow: hidden; background: transparent; }
.case-section { background: transparent; }
.hero-slider__swiper { overflow: visible; }
.hero-slider__slide { width: 1200px; }
/* Fallback sizing before Swiper's JS has run, so slides never flash full-width */
.hero-slider__swiper:not(.swiper-initialized) .swiper-wrapper { display: flex; }

.hero-card {
	position: relative;
	display: block;
	width: 100%;
	height: 600px;
	max-height: 62vw;
	overflow: hidden;
	background: var(--color-bg-taupe);
}
.hero-card img, .hero-card .img-placeholder { width: 100%; height: 100%; object-fit: cover; }
/* PC image shown by default; スマホ用画像 (hero_image_sp) swaps in below
   900px — same pc/sp pair pattern as .menu-panel__banner-img--pc/--sp. */
.hero-card__img--sp { display: none; }

.hero-slider .swiper-pagination { position: relative; margin-top: 16px; }
.hero-slider .swiper-pagination-bullet-active { background: var(--color-primary-dark); }

@media (max-width: 900px) {
	/* .hero-slider__slide's 1200px fixed width was never overridden for
	   mobile, so Swiper laid each slide out at 1200px and the section's
	   own overflow:hidden just clipped it. A forced aspect-ratio (2:1,
	   matching the desktop photos) then cropped whatever image actually
	   got used — badges/pricing baked into the image's edges (or the
	   desktop image, used as a fallback until a dedicated スマホ用画像 is
	   uploaded) got clipped off instead of showing in full. Sizing the
	   slide by the image's own natural ratio instead avoids cropping it
	   regardless of which image ends up here. */
	.hero-slider__slide { width: 100%; }
	/* max-height:62vw and overflow:hidden (base rule above) are sized for
	   the desktop 600px cover-cropped box — left in place, they capped a
	   375px-wide screen to ~232px and clipped anything taller than that,
	   even with height:auto and object-fit:contain below. */
	.hero-card { height: auto; max-height: none; overflow: visible; }
	.hero-card img, .hero-card .img-placeholder { height: auto; object-fit: contain; }
	.hero-card__img--pc { display: none; }
	.hero-card__img--sp { display: block; }
}

/* =========================================================
   Placeholder image blocks (used before real photos are uploaded)
========================================================= */
.img-placeholder {
	display: block; width: 100%; height: 100%; min-height: 120px;
	background: linear-gradient(135deg, var(--color-bg-taupe), var(--color-bg-beige));
}

/* =========================================================
   Tabs (shared containers)
========================================================= */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 40px; }
.tabs__panel { display: none; }
.tabs__panel.is-active { display: block; }

/* CASE tabs: underline style with Cinzel eyebrow */
.case-tab {
	background: none; border: none; border-bottom: 2px solid var(--color-border);
	padding: 0 13px 13px; display: flex; flex-direction: column; align-items: center; gap: 12px;
	width: 250px; flex: none; color: var(--color-text-soft);
	transition: color var(--transition-base), border-color var(--transition-base);
}
.case-tab__en { display: block; font-family: var(--font-en); font-size: 10px; line-height: 1.4; letter-spacing: 1px; color: var(--color-primary); }
.case-tab__jp { display: block; font-family: var(--font-jp); font-size: 20px; line-height: 1.4; font-weight: 500; letter-spacing: 1.8px; color: var(--color-text); }
.case-tab.is-active { border-color: var(--color-primary); }
@media (max-width: 782px) {
	/* 2列表示・上下左右10pxのgapで表示。 */
	.case-tabs { gap: 10px; }
	.case-tab { width: calc(50% - 5px); padding: 0 0 10px; gap: 10px; }
	.case-tab__jp { font-size: 15px; }
}

/* MENU / WORRIES tabs: filled card, active = solid accent, inactive = light tint.
   Fixed width, centered as a group, wrapping to a shorter final row (4+3). */
.menu-tabs {
	display: flex; flex-wrap: wrap; justify-content: center;
}
@media (min-width: 783px) {
	/* WORRIES tabs carry a circular thumbnail that pokes 29px above its
	   own button (see .menu-tab__thumb below) — the shared .tabs 8px
	   gap isn't enough clearance, so the second row's photos overlap
	   the first row's buttons. Row-only gap keeps columns tight while
	   giving rows breathing room; scoped above the mobile breakpoint so
	   it doesn't disturb the already-tuned 63px mobile row rhythm. */
	#worries .menu-tabs { row-gap: 40px; }
}
.menu-tab {
	position: relative;
	background: #ede7de; border: none; border-radius: 6px;
	/* Exactly 4 per row regardless of the container's own padding — the
	   flex-basis math accounts for 3 gaps between 4 columns. */
	width: calc((100% - 24px) / 4); flex: none;
	padding: 13px; display: flex; flex-direction: column; align-items: center; gap: 12px;
	color: var(--color-primary);
	transition: background var(--transition-base), color var(--transition-base);
}
.menu-tab__en { display: block; font-family: var(--font-en); font-size: 10px; line-height: 1.2; letter-spacing: 1px; }
.menu-tab__jp { display: block; font-family: var(--font-jp); font-size: 16px; line-height: 1.2; font-weight: 500; letter-spacing: 1px; }
.menu-tab.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* WORRIES tabs: circular photo pinned to the top edge, own colour scheme */
.menu-tab__thumb {
	position: absolute; top: -29px; left: 50%; transform: translateX(-50%);
	width: 58px; height: 58px; border-radius: 50%; overflow: hidden;
}
.menu-tab__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
#worries .menu-tab { padding-top: 40px; background: #f5efe7; color: var(--color-lead); }
#worries .menu-tab.is-active { background: var(--color-primary); color: #fff; }

/* =========================================================
   CASE section
========================================================= */
.case-grid.is-active {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px 32px;
}
.case-card {
	background: none; border: none; padding: 0; text-align: left;
	display: flex; flex-direction: column; gap: 12px;
}
.case-card__img { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; }
.case-card__img-inner {
	display: block; width: 100%; height: 100%; overflow: hidden;
	background: var(--color-bg-beige);
	transition: box-shadow var(--transition-base);
}
.case-card:hover .case-card__img-inner { box-shadow: 0 0 10px 0 rgba(0,0,0,.25); }
.case-card__img img {
	width: 100%; height: 100%; object-fit: cover;
	filter: grayscale(100%);
	transition: filter var(--transition-base), transform var(--transition-base);
}
.case-card:hover .case-card__img img { filter: grayscale(0%); transform: scale(1.05); }
.case-card__plus {
	position: absolute; right: 12px; bottom: 12px; width: 30px; height: 30px; border-radius: 50%;
	background: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center;
	box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.case-card__plus svg { width: 14px; height: 14px; }
.case-card__label { font-family: var(--font-jp); font-size: 16px; font-weight: 500; color: var(--color-text); }
@media (max-width: 900px) {
	.case-grid.is-active { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.case-grid.is-active { gap: 10px; }
}

/* =========================================================
   Modal
========================================================= */
.modal { position: fixed; inset: 0; z-index: 300; display: none; }
.modal.is-open { display: block; }
.modal__overlay { position: absolute; inset: 0; background: rgba(26,19,17,.55); }
.modal__dialog {
	position: relative; z-index: 1; max-width: 720px; width: 92%;
	margin: 6vh auto; background: #fff; border-radius: var(--radius-card);
	padding: 40px; max-height: 88vh; overflow-y: auto;
}
.modal__close { position: absolute; top: 16px; right: 16px; background: none; border: none; font-size: 28px; line-height: 1; color: var(--color-text-soft); }
.modal__title { font-size: 20px; margin-bottom: 20px; padding-right: 24px; }
.modal__compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.modal__compare figure { margin: 0; }
.modal__compare figcaption { font-family: var(--font-en); font-size: 12px; letter-spacing: 1px; color: var(--color-primary-dark); margin-bottom: 8px; }
.modal__compare img { width: 100%; border-radius: 8px; aspect-ratio: 1/1; object-fit: cover; background: var(--color-bg-beige); }
.modal__info { margin-bottom: 20px; }
.modal__info .case-detail__info-table th,
.modal__info .case-detail__info-table td { padding: 10px 0; font-size: 14px; }
.modal__info .case-detail__info-table th { width: 96px; }
.modal__desc { font-size: 13px; color: var(--color-text-soft); line-height: 1.9; white-space: pre-line; }
@media (max-width: 600px) {
	.modal__compare { grid-template-columns: 1fr; }
	.modal__dialog { padding: 28px 20px; }
}

/* =========================================================
   Section background utilities (alternating rhythm per design)
========================================================= */
.bg-beige { background: #ede7de; }
/* WORRIES heading pokes up into the section above (MENU) while everything
   else in the section (banner, chips, ...) stays exactly where it'd
   normally sit. A plain negative margin-top would drag the whole flow up
   with it (that's the bug this replaced) — pairing it with an equal
   positive margin-bottom cancels that out: the heading itself renders
   40px higher, but the next sibling still starts where it always did. */
#worries .section-heading { margin-top: -136px; margin-bottom: 94px; }
@media (max-width: 900px) {
	/* -152px pulled the heading up far enough to clear the 59px gap from
	   MENU's last item, but that put the whole "WORRIES" line above
	   #worries's own beige background — Figma has it straddling that
	   background seam instead. margin-bottom (the gap down to the tabs)
	   is independent of margin-top, so it stays at the already-verified
	   40px while margin-top eases back to land the heading on the seam. */
	#worries .section-heading { margin-top: -78px; margin-bottom: 40px; }
}
.bg-taupe { background: var(--color-bg-taupe); }
.bg-dark { background: var(--color-bg-dark); color: #f3ece6; }
.bg-column-gradient { background: linear-gradient(to left, #a2a5a9, #686e75); color: #fff; }

/* =========================================================
   Slider nav arrows (YouTube / Column)
========================================================= */
.slider-nav { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.slider-nav button {
	width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--color-border);
	background: #fff; font-size: 20px; color: var(--color-primary-dark);
	display: flex; align-items: center; justify-content: center;
}
.slider-nav button:hover { background: var(--color-primary-dark); color: #fff; }
/* A real SVG chevron instead of the ‹ › text glyphs — those characters
   are naturally slim/short relative to their font-size, so even at
   20px they read as a small mark lost in the middle of the 44px
   circle. The SVG fills the button proportionally instead. */
.slider-nav button svg { width: 18px; height: 18px; display: block; }

/* In-heading variant: sits where VIEW ALL sits, pinned to the right */
.slider-nav--heading { position: absolute; right: var(--container-padding); top: 40px; margin-top: 0; }
.slider-nav--heading button { width: 44px; height: 44px; font-size: 20px; }
@media (max-width: 900px) {
	.slider-nav--heading { position: static; justify-content: flex-start; margin-top: 16px; margin-bottom: 24px; }
}

/* =========================================================
   CAMPAIGN section — simple 3x2 image grid, no slider
========================================================= */
.campaign-section { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-deep) 100%); }
.campaign-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.campaign-grid__item { display: block; width: 100%; }
.campaign-grid__item img, .campaign-grid__item .img-placeholder { width: 100%; height: auto; display: block; }
.campaign-grid__title {
	display: block; margin-top: 12px; font-family: var(--font-jp); font-size: 16px; font-weight: 400; line-height: 1.6; color: #fff;
}
@media (max-width: 900px) {
	.campaign-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
	.campaign-section .section-heading { margin-bottom: 0; }
}
@media (max-width: 600px) {
	.campaign-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   YouTube section
========================================================= */
.youtube-section { background: #fff; }
.video-card { display: block; }
.video-card__thumb { position: relative; display: block; aspect-ratio: 16/9; overflow: hidden; background: var(--color-bg-beige); }
.video-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.video-card__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.video-card__play svg { width: 48px; height: 48px; }
.video-card__title {
	display: block; margin-top: 12px; font-family: var(--font-serif-jp); font-size: 16px; font-weight: 400; line-height: 1.6; color: var(--color-text);
	/* The site-wide cap/alphabetic text-box-trim clips into this span's
	   Japanese glyphs (their ink doesn't align with Latin cap-height/
	   baseline the way the property assumes) — cutting off the bottom of
	   the title. Restore normal leading here. */
	text-box-trim: none; text-box-edge: auto;
	-webkit-text-box-trim: none; -webkit-text-box-edge: auto;
}

/* =========================================================
   Parallax background (shared)
   The element itself stays glued to the viewport (position:fixed,
   sized to 100vw/100vh); an ancestor's clip-path:inset(0) then crops
   it down to just that ancestor's own box. Because scrolling moves
   the ancestor but not the fixed image, each section's "window"
   reveals a different slice of an otherwise screen-pinned image —
   the classic fixed-background parallax look, without
   background-attachment:fixed (unsupported on iOS).
========================================================= */
.parallax-bg {
	position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
	background-size: cover; background-position: center; background-repeat: no-repeat;
}

/* =========================================================
   NEWS section
========================================================= */
.news-section { background: #fff; }
.news-list { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 48px; }
.news-item {
	display: flex; align-items: baseline; gap: 24px; padding: 20px 0;
	border-bottom: 1px solid var(--color-border); text-decoration: none; color: var(--color-text);
}
.news-item__date { font-family: var(--font-en); font-size: 14px; color: var(--color-text-soft); flex: none; }
.news-item__title { font-family: var(--font-jp); font-size: 15px; line-height: 1.6; }
@media (max-width: 600px) {
	.news-list { grid-template-columns: 1fr; }
	.news-item { flex-direction: column; gap: 10px; }
}

/* =========================================================
   MENU / WORRIES sections
========================================================= */

#menu { padding-bottom: 155px; }

/* Top photo band — the section heading's top half overlaps its bottom edge */
.menu-section { isolation: isolate; }
.menu-section--has-photo { padding-top: 0; }
/* clip-path crops the fixed .parallax-bg child to this box's own bounds,
   so the "background" reads as pinned to the viewport while the band
   scrolls past it — an iOS-safe stand-in for background-attachment:fixed. */
.menu-section__top-photo { position: relative; width: 100%; aspect-ratio: 1920/500; background: var(--color-bg-taupe); clip-path: inset(0); z-index: -1; }
.menu-section__top-photo .parallax-bg { filter: grayscale(100%); }
.menu-section--has-photo .section-heading { margin-top: -40px; }
@media (max-width: 782px) {
	/* Mobile Figma: top-photo band is much taller (430×200) and the
	   heading only overlaps its bottom edge by ~21px, not the desktop
	   ratio's -48px worth of overlap. */
	.menu-section__top-photo { aspect-ratio: 43/20; }
	.menu-section--has-photo .section-heading { margin-top: -20px; }
	#menu { padding-bottom: 80px; }
}

/* MENU category banner: a single uploaded image, no coded text/gradient.
   PC and SP use separate uploaded images (SP falls back to the PC image
   when no dedicated SP photo is set) since the aspect ratio changes at
   the 1024px breakpoint below — a single wide PC banner crops badly once
   the box narrows to 16:9. */
.menu-panel__banner--photo-only { width: 100%; overflow: hidden; margin-bottom: 32px; }
.menu-panel__banner--photo-only img, .menu-panel__banner--photo-only .img-placeholder { width: 100%; height: auto; }
.menu-panel__banner--photo-only .menu-panel__banner-img--sp { display: none; }

/* WORRIES sub-category filter chips — same card design as .menu-item below */
.menu-panel__chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.menu-panel__chip {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	height: 63px; padding: 16px; background: #fff; border: none;
	font-family: var(--font-jp); font-size: 16px; font-weight: 500; color: var(--color-primary); text-align: left;
	transition: color var(--transition-base);
}
.menu-panel__chip .menu-item__arrow { background: var(--color-primary); transition: background var(--transition-base); }
.menu-panel__chip:hover { color: var(--color-primary-deep); }
.menu-panel__chip:hover .menu-item__arrow { background: var(--color-primary-deep); }
.menu-panel__chip.is-active { background: var(--color-primary); color: #fff; }
.menu-panel__chip.is-active .menu-item__arrow { background: #fff; }
.menu-panel__chip.is-active .menu-item__arrow svg { color: var(--color-primary); }

.menu-panel__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
/* Scoped to .menu-panel__list — a bare ".menu-item" also matches the <li>
   WordPress auto-generates for every wp_nav_menu() item (e.g. the footer
   nav), which fought this card styling there. */
.menu-panel__list .menu-item {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	min-height: 63px; padding: 16px; background: #fff;
	font-family: var(--font-jp); font-size: 16px; font-weight: 500; color: var(--color-primary);
	transition: color var(--transition-base);
}
/* "二重整形（埋没法・切開）" style titles — the parenthetical part reads
   as a subtitle, so it breaks onto its own smaller line instead of
   running inline with the main label. */
.menu-item__sublabel { display: block; font-size: 12px; font-weight: 400; color: var(--color-text-soft); margin-top: 2px; }
.menu-item__arrow {
	display: flex; align-items: center; justify-content: center; flex: none;
	width: 20px; height: 20px; border-radius: 50%; background: var(--color-primary);
	transition: background var(--transition-base);
}
.menu-item__arrow svg { width: 10px; height: 10px; color: #fff; }
.menu-panel__list .menu-item:hover { color: var(--color-primary-deep); }
.menu-panel__list .menu-item:hover .menu-item__arrow { background: var(--color-primary-deep); }
.menu-panel__empty { text-align: center; color: var(--color-text-soft); font-size: 13px; }
@media (max-width: 1024px) {
	.menu-panel__list, .menu-panel__chips { grid-template-columns: repeat(2, 1fr); }
	.menu-panel__banner--photo-only .menu-panel__banner-img--pc { display: none; }
	.menu-panel__banner--photo-only .menu-panel__banner-img--sp { display: block; }
	.menu-tab { width: calc(33.33% - 6px); }
}
@media (max-width: 600px) {
	.menu-panel__list, .menu-panel__chips { grid-template-columns: 1fr; gap: 10px; }
	/* Exact mobile spec from Figma node 692:49 (Frame 98 etc.): 14px
	   padding, 13px font, 14px arrow icon — 14+14+14 = the 42px row
	   height (the arrow, not the text, is the tallest child). Applied to
	   both the MENU treatment list (.menu-item) and the WORRIES
	   sub-category chips (.menu-panel__chip), which share the same card
	   pattern. */
	.menu-panel__list .menu-item,
	.menu-panel__chip { min-height: 42px; height: auto; padding: 14px; font-size: 13px; }
	.menu-item__sublabel { font-size: 11px; }
	.menu-panel__list .menu-item .menu-item__arrow,
	.menu-panel__chip .menu-item__arrow { width: 14px; height: 14px; }
	.menu-panel__list .menu-item .menu-item__arrow svg,
	.menu-panel__chip .menu-item__arrow svg { width: 7px; height: 7px; }
	/* Exact mobile spec from Figma node 692:49 (Frame 91/106): 13px
	   padding, 10px gap (both inside a button and between buttons),
	   8px EN / 15px JP labels. #worries keeps its 40px top padding for
	   the circular thumb but also gets the figma-spec 16px bottom. */
	.menu-tabs { gap: 10px; }
	.menu-tab { width: calc(50% - 5px); padding: 13px; gap: 10px; }
	.menu-tab__en { font-size: 8px; }
	.menu-tab__jp { font-size: 15px; line-height: 1.1; }
	#worries .menu-tab { padding-bottom: 16px; }
	/* WORRIES mobile: single-column, full-width rows with the photo and
	   category name side by side, photo fully inside the card instead of
	   the 2-column grid's circular thumbnail poking out above it. */
	#worries .menu-tabs { flex-direction: column; gap: 12px; }
	#worries .menu-tab {
		width: 100%; flex-direction: row; align-items: center; justify-content: flex-start;
		padding: 10px; gap: 10px; text-align: left;
	}
	#worries .menu-tab__thumb { position: static; transform: none; flex: none; width: 40px; height: 40px; }
	#worries .menu-tab__jp { font-size: 18px; text-align: left; letter-spacing: 0; }
}

/* =========================================================
   DOCTOR section
========================================================= */
.doctor-section { position: relative; background: var(--color-bg-cream); isolation: isolate; }
.doctor-section--has-photo { padding-top: 0; }
.doctor-section__top-photo { position: relative; width: 100%; aspect-ratio: 1920/500; background: var(--color-bg-taupe); clip-path: inset(0); z-index: -1; }
.doctor-section--has-photo .section-heading { margin-top: -40px; }
@media (max-width: 900px) {
	/* Figma's mobile top-photo (430×350) only overlaps the heading by
	   ~18px, not the desktop ratio's -48px worth — and at that ratio the
	   photo itself was rendering far too thin (aspect-ratio inherited
	   the desktop 1920/500 band, ~112px tall at mobile widths instead
	   of the ~285px Figma shows). Later lowered further per explicit
	   request — 430/350 (~305px) still read as too tall. */
	.doctor-section__top-photo { aspect-ratio: 430/250; }
	.doctor-section--has-photo .section-heading { margin-top: -18px; }
}

/* Sized/positioned by initDoctorWhiteBg() in main.js — its height depends
   on the (fluid, aspect-ratio-based) top photo band above it, so it can't
   be pinned with a fixed CSS offset. Full-width via left:0/width:100% of
   this already-full-width section, not 100vw (which is wider than the
   real viewport whenever a scrollbar is present, causing horizontal
   overflow). */
.doctor-section__white-bg { position: absolute; left: 0; width: 100%; background: #fff; z-index: 0; }

.doctor-profile { position: relative; }
.doctor-profile__main,
.doctor-profile__cred,
.doctor-profile__promise-heading,
.promise-cards,
.doctor-profile__more { position: relative; z-index: 1; }

.doctor-profile__main { display: grid; grid-template-columns: 1fr 440px; gap: 60px; align-items: start; margin-bottom: 56px; }
.doctor-profile__eyebrow { font-family: var(--font-en); font-size: 20px; color: var(--color-primary); margin: 0 0 16px; }
.doctor-profile__greeting {
	font-family: var(--font-serif-jp); font-size: 40px; font-weight: 400; line-height: 1.5;
	color: var(--color-text); max-width: 600px; margin: 40px 0 140px;
}
.doctor-profile__philosophy {
	font-family: var(--font-serif-jp); font-size: 16px; font-weight: 400; line-height: 1.7;
	color: var(--color-lead); max-width: 600px; margin: 0;
}
.doctor-profile__photo { position: relative; }
.doctor-profile__photo img, .doctor-profile__photo .img-placeholder { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.doctor-profile__nameplate { margin-top: 16px; }
.doctor-profile__role { display: block; font-family: var(--font-serif-jp); font-size: 16px; color: var(--color-lead); margin-bottom: 12px; }
.doctor-profile__name { display: block; font-family: var(--font-serif-jp); font-size: 24px; font-weight: 400; color: var(--color-text); }
.doctor-profile__sns { display: flex; align-items: center; gap: 8px; margin-top: 12px; list-style: none; padding: 0; }
.doctor-profile__sns a {
	display: flex; align-items: center; justify-content: center;
	width: 32px; height: 32px; border-radius: 50%;
	background: var(--color-primary); color: #fff;
	transition: opacity var(--transition-base);
}
.doctor-profile__sns i { font-size: 14px; }
.doctor-profile__sns a:hover { opacity: .8; }
.doctor-profile__cred {
	display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
	border-top: 1px solid var(--color-border); padding-top: 32px; margin-bottom: 56px;
}
.doctor-profile__cred-col h3 { font-family: var(--font-jp); font-size: 20px; font-weight: 500; margin-bottom: 16px; color: var(--color-text); }
.doctor-profile__cred-table { width: 100%; border-collapse: collapse; font-family: var(--font-jp); font-weight: 300; font-size: 16px; line-height: 1.875; color: var(--color-text); }
.doctor-profile__cred-table td { padding: 0; vertical-align: top; }
.doctor-profile__cred-table--career .doctor-profile__cred-year { width: 56px; white-space: nowrap; }
.doctor-profile__promise-heading { text-align: center; font-family: var(--font-serif-jp); font-size: 32px; font-weight: 400; margin-bottom: 32px; color: var(--color-text); }
.doctor-profile__promise-heading-break { display: none; }
.promise-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-bottom: 48px; }
.promise-card { background: #fff; border: 2px solid var(--color-primary); border-radius: 16px; padding: 40px 32px; text-align: center; }
.promise-card__tag { display: block; font-family: var(--font-jp); font-weight: 500; color: var(--color-primary); font-size: 24px; margin-bottom: 24px; }
.promise-card__title { font-family: var(--font-serif-jp); font-size: 20px; font-weight: 400; margin-bottom: 20px; line-height: 1.35; color: var(--color-text); }
.promise-card__body { font-family: var(--font-serif-jp); font-size: 16px; color: var(--color-lead); line-height: 1.9; }
.doctor-profile__more { text-align: center; }
.doctor-profile__more .btn { width: 300px; }
@media (max-width: 1024px) {
	.doctor-profile__main { grid-template-columns: 1fr; }
	.doctor-profile__photo { max-width: 320px; margin: 0 auto; }
	.doctor-profile__cred { grid-template-columns: 1fr; }
	.promise-cards { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	/* Figma's mobile order is photo → name → SNS → eyebrow → heading →
	   body, not the desktop 2-column source order (text column, then
	   photo column). display:contents unwraps the two column divs so
	   each piece becomes an independently orderable grid item, without
	   touching the markup (or desktop's grid-template-columns above). */
	/* .doctor-profile__main's gap:60px (for the desktop 2-column split)
	   would otherwise stack with every margin below, since flattening
	   the two wrapper divs makes all 6 pieces direct grid items sharing
	   that same row-gap. */
	.doctor-profile__main { gap: 0; }
	.doctor-profile__text, .doctor-profile__photo { display: contents; }
	.doctor-profile__photo > img,
	.doctor-profile__photo > .img-placeholder { order: 1; max-width: 240px; margin: 0 auto; }
	/* Exact gaps measured from Figma node 692:49: photo→nameplate 23px,
	   role→name 16px, nameplate→sns 20px, sns→eyebrow 40px,
	   eyebrow→heading 24px, heading→body 32px. */
	.doctor-profile__nameplate { order: 2; text-align: center; margin-top: 23px; }
	.doctor-profile__role { margin-bottom: 16px; }
	.doctor-profile__sns { order: 3; justify-content: center; margin-top: 20px; }
	.doctor-profile__eyebrow { order: 4; text-align: center; margin: 40px 0 0; }
	.doctor-profile__greeting { order: 5; font-size: 24px; line-height: 36px; max-width: none; margin: 24px 0 32px; }
	/* ACF field content has a literal line break baked in (nl2br'd),
	   correct for the desktop line wrap but not Figma's single-line
	   mobile treatment — drop it visually without touching the field. */
	.doctor-profile__greeting br { display: none; }
	.doctor-profile__philosophy { order: 6; max-width: none; }
	.doctor-profile__promise-heading { font-size: 24px; line-height: 36px; margin-bottom: 24px; }
	.doctor-profile__promise-heading-break { display: block; }
	.promise-cards { margin-bottom: 0; }
	.promise-card { padding: 32px 16px; }
	.promise-card__tag { font-size: 20px; }
}

/* =========================================================
   COLUMN section
========================================================= */
.column-card {
	display: flex; flex-direction: column; gap: 20px; height: 100%;
	background: rgba(255,255,255,.2); padding: 20px; color: #fff;
}
.column-card__thumb { position: relative; display: block; aspect-ratio: 320/180; overflow: hidden; background: rgba(255,255,255,.15); }
.column-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.column-card__cat {
	position: absolute; top: 13px; left: 13px; background: var(--color-primary);
	color: #fff; font-family: var(--font-jp); font-weight: 300; font-size: 10px; padding: 6px 10px;
}
.column-card__body { display: flex; flex-direction: column; flex: 1; }
.column-card__date { display: block; font-family: var(--font-jp); font-weight: 300; font-size: 13px; color: rgba(255,255,255,.7); }
.column-card__title { display: block; margin-top: 12px; font-family: var(--font-serif-jp); font-size: 16px; font-weight: 400; line-height: 1.6; }
.column-card__excerpt { display: block; margin-top: 12px; font-family: var(--font-jp); font-weight: 300; font-size: 15px; color: rgba(255,255,255,.85); line-height: 1.8; }
.column-card__more { display: block; margin-top: 12px; font-family: var(--font-jp); font-weight: 500; font-size: 15px; }
.column-section .slider-nav button { background: transparent; border-color: rgba(255,255,255,.3); color: #fff; }
.column-section .slider-nav button:hover { background: #fff; color: var(--color-text); }

/* =========================================================
   ACCESS section
========================================================= */
.access-top { display: grid; grid-template-columns: 580px 1fr; gap: 40px; margin-bottom: 40px; align-items: center; }
.access-top__photo { overflow: hidden; aspect-ratio: 580/380; background: var(--color-bg-taupe); }
.access-top__photo img, .access-top__photo .img-placeholder { width: 100%; height: 100%; object-fit: cover; }
.access-top__info { padding-top: 8px; }
.access-top__info h3 { font-family: var(--font-serif-jp); font-size: 24px; font-weight: 400; margin-bottom: 24px; color: var(--color-text); }
.access-top__row { display: grid; grid-template-columns: 100px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--color-border); font-family: var(--font-jp); font-size: 16px; }
.access-top__row:last-child { border-bottom: none; }
.access-top__row dt { font-weight: 500; color: var(--color-primary); margin: 0; }
.access-top__row dd { color: var(--color-lead); margin: 0; }

.access-cta { display: flex; justify-content: center; gap: 12px; margin-bottom: 24px; }
.access-cta .btn { width: 190px; }
.access-sns { display: flex; justify-content: center; align-items: center; gap: 10px; margin-bottom: 40px; }
.access-sns a {
	display: flex; align-items: center; justify-content: center;
	width: 32px; height: 32px; border-radius: 50%;
	background: var(--color-primary); color: #fff;
	transition: opacity var(--transition-base);
}
.access-sns i { font-size: 14px; }
.access-sns a:hover { opacity: .8; }

.access-map { overflow: hidden; line-height: 0; }
.access-map iframe { display: block; width: 100%; }
@media (max-width: 900px) {
	.access-top { grid-template-columns: 1fr; }
	.access-cta { flex-wrap: wrap; }
	/* Access uses size-80 (48px mobile) but Figma sizes its mobile
	   heading the same as YouTube's size-50 (36px). */
	.access-section .section-heading--size-80 .section-heading__en { font-size: 36px; }
	.access-top__row { grid-template-columns: 1fr; gap: 12px; }
	.access-top__row dd { line-height: 1.5; }
	.access-map iframe { height: 250px; }
}

/* =========================================================
   CALENDAR section
========================================================= */
.calendar-section { position: relative; background-color: #f2efeb; overflow: hidden; }
.calendar-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--calendar-bg);
	background-blend-mode: luminosity;
	opacity: 0.2;
	pointer-events: none;
}
.calendar-section > .container { position: relative; z-index: 1; }
.calendar-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.calendar-grid__item {
	background: #fff;
	border: 1px solid #e6ddc8;
	border-radius: 0;
	padding: 26px;
	box-shadow: 0 1px 2px rgba(60,50,30,.05), 0 8px 24px rgba(90,75,45,.08);
}

.calendar-grid__month {
	text-align: center; font-family: var(--font-serif-jp); font-weight: 600;
	font-size: 20px; color: var(--color-text); margin: 0 0 18px;
}
.calendar-grid__month span {
	font-family: var(--font-en); font-style: italic; color: #ad9667;
	font-size: 16px; margin-left: 8px;
}

/* Self-built calendar table (bloom_clinic_render_month_calendar() in
   inc/template-tags.php) — no plugin markup to fight, just style it
   directly. */
.custom-calendar { width: 100%; border-collapse: collapse; table-layout: fixed; font-family: var(--font-jp); }
.custom-calendar thead th {
	padding: 8px 0; font-weight: 500; font-size: 12px; color: var(--color-lead);
}
.custom-calendar thead th:first-child { color: #c98a7a; }
.custom-calendar thead th:last-child { color: #7a92c9; }
.custom-calendar__date { text-align: center; padding: 0; height: 44px; vertical-align: middle; font-size: 14px; }
.custom-calendar__date-inner {
	display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
	width: 40px; height: 28px; line-height: 28px; margin: 0 auto; border-radius: 0;
	font-family: var(--font-jp); font-size: 14px; color: var(--color-text);
}
.custom-calendar__date--closed .custom-calendar__date-inner {
	color: #b56a58; font-weight: 500; background: #f4e0d9;
}
.custom-calendar__date--today .custom-calendar__date-inner {
	background: #ad9667; color: #fff; font-weight: 600;
}

.calendar-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin-top: 34px; list-style: none; padding: 0; font-size: 13px; color: var(--color-lead); }
.calendar-legend__item { display: flex; align-items: center; gap: 7px; }
.calendar-legend__dot { display: block; width: 16px; height: 16px; border-radius: 4px; }
.calendar-legend__dot--off { background: #f4e0d9; }
.calendar-legend__dot--today { background: #ad9667; }

@media (max-width: 782px) {
	.calendar-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* =========================================================
   FAQ section (accordion)
========================================================= */
.container--narrow { max-width: 1048px; }
.accordion { display: flex; flex-direction: column; gap: 16px; }
.accordion__item { background: #fff; border: 1px solid var(--color-border); border-radius: 10px; overflow: hidden; }
.accordion__trigger {
	width: 100%; display: flex; align-items: center; gap: 16px;
	background: none; border: none; padding: 24px 28px; text-align: left;
}
.accordion__q { font-family: var(--font-en); font-size: 26px; color: var(--color-primary); flex: none; width: 30px; }
.accordion__question { flex: 1; font-family: var(--font-serif-jp); font-size: 18px; color: var(--color-text); }
.accordion__icon { position: relative; width: 15px; height: 15px; flex: none; }
.accordion__icon::before, .accordion__icon::after {
	content: ''; position: absolute; background: var(--color-primary); border-radius: 2px;
}
.accordion__icon::before { top: 6.5px; left: 0; width: 15px; height: 2px; }
.accordion__icon::after { top: 0; left: 6.5px; width: 2px; height: 15px; transition: transform var(--transition-base); }
.accordion__item.is-open .accordion__icon::after { transform: rotate(90deg); opacity: 0; }
.accordion__panel { max-height: 0; overflow: hidden; transition: max-height var(--transition-base); }
.accordion__item.is-open .accordion__panel { max-height: 600px; }
.accordion__panel-inner { display: flex; gap: 16px; padding: 0 28px 24px; }
.accordion__a { font-family: var(--font-en); font-size: 26px; color: var(--color-text-soft); flex: none; width: 30px; }
.accordion__answer { font-size: 14px; line-height: 1.9; color: var(--color-text-soft); }
.accordion__answer p { font-size: 16px; }
/* Same text-box-trim mismatch as elsewhere on this site: it clips the top
   of wrapped multi-line answer text since this box holds arbitrary-length
   prose, not single-line labels. */
.accordion__answer, .accordion__answer p {
	text-box-trim: none; text-box-edge: auto;
	-webkit-text-box-trim: none; -webkit-text-box-edge: auto;
}

/* --- FAQ page (page-faq.php) — each "{name}のよくある質問" group -------- */
.faq-group { margin-bottom: 80px; }
.faq-group:last-child { margin-bottom: 0; }
.faq-group__heading { font-family: var(--font-serif-jp); font-size: 32px; font-weight: 400; color: var(--color-text); margin: 0 0 32px; }
@media (max-width: 900px) {
	.accordion__trigger { padding: 16px; }
	.accordion__q { font-size: 20px; width: 30px; }
	.accordion__question { font-size: 16px; }
	.faq-group__heading { font-size: 24px; }
}
/* Same left-border treatment as .price-treatment__heading (price.php) —
   applied together with that class in the markup rather than duplicated
   here, so this only sets the spacing that's specific to this page. */
/* .price-treatment__heading's own margin shorthand (defined later in
   this file, equal specificity) would otherwise win on source order and
   force margin-top back to 0 — the combined-class selector here raises
   specificity so this page's spacing always applies. */
.faq-group__subheading.price-treatment__heading { margin-top: 56px; margin-bottom: 16px; }
.faq-group__subheading.price-treatment__heading:first-of-type { margin-top: 0; }
.faq-group .accordion { margin-bottom: 16px; }
.faq-group .accordion:last-child { margin-bottom: 0; }

/* =========================================================
   Treatment menu single view (Figma node 681:3502)
========================================================= */

/* Every .treatment-block is white with a top border rule, per spec
   ("セクションの背景は白にして、セクションの区切りにborderを入れる") — the
   first one doesn't need a rule above it since the hero/nav already
   separates it visually. */
.treatment-page { background: #fff; }
/* Figma measures ~76px from each section's border-top to its heading (not
   the sitewide .section 96px default) — verified via pixel scan at two
   independent section transitions (施術内容, 保証制度). Desktop only —
   the sitewide mobile .section override (56px) is left untouched. */
@media (min-width: 901px) {
	.treatment-page .section { padding: 76px 0; }
}
.treatment-related-section { background: var(--color-bg-cream); }
/* Divider inset to the 1200px content width, same technique as
   .treatment-block/.worry-block — used just for 関連コラム, which is the
   only .treatment-related-section usage that wants a divider (関連する施術
   and 記事監修医師 don't). Two page-scoped selectors because the two pages
   that use this section have different top gaps (76px vs 96px, both
   established in earlier rounds). */
.treatment-page .treatment-related-section--bordered, .worry-page .treatment-related-section--bordered { padding-top: 0; }
.treatment-related-section--bordered .container::before {
	content: ''; display: block; width: 100%; border-top: 1px solid var(--color-border);
	margin-bottom: 96px;
}
.treatment-page .treatment-related-section--bordered .container::before { margin-bottom: 76px; }
@media (max-width: 900px) {
	.treatment-related-section--bordered .container::before { margin-bottom: 56px; }
}
.treatment-cta { text-align: center; }
/* Divider is inset to the 1200px content width (container minus its own
   left/right padding) instead of running full viewport width. The ::before
   is a real block inside .container, so its width:100% resolves to the
   1200px content box, not the 1248px container; margin-bottom reproduces
   this page's usual top gap (76px desktop — see .treatment-page .section
   above — 56px mobile, matching the sitewide default). */
.treatment-page .treatment-block, .treatment-page .treatment-cta { padding-top: 0; }
.treatment-block .container::before, .treatment-cta .container::before {
	content: ''; display: block; width: 100%; border-top: 1px solid var(--color-border);
	margin-bottom: 76px;
}
@media (max-width: 900px) {
	.treatment-block .container::before, .treatment-cta .container::before { margin-bottom: 56px; }
}
.treatment-block__heading {
	font-family: var(--font-serif-jp); font-size: 36px; font-weight: 400; color: var(--color-text);
	text-align: center; margin: 0 0 40px; position: relative; padding-bottom: 20px;
}
.treatment-block__heading::after {
	content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
	width: 40px; height: 2px; background: var(--color-primary);
}
.treatment-block__banner {
	font-family: var(--font-serif-jp); font-size: 18px; color: var(--color-text);
	background: var(--color-bg-cream); padding: 16px 24px; margin: 0 0 32px; text-align: center;
}
/* 「〇〇の料金」「メニュー比較表」「保証制度」の各表見出し — 上のバナー型
   （施術内容：〇〇）とは別物で、こちらは左ボーダーの小見出しスタイル。 */
.treatment-sub-heading {
	font-family: var(--font-serif-jp); font-size: 20px; font-weight: 500; color: var(--color-text);
	border-left: 3px solid var(--color-primary); padding-left: 14px; margin: 0 0 32px;
}
/* Variant for a section-opening lead line (e.g. "◯◯の手術について") rather
   than a compact table label — framed top/bottom instead of the usual
   left-border tab, and sized up to read as its own mini-heading. */
.treatment-sub-heading--bordered {
	font-size: 28px; border-left: none; padding: 20px 0; text-align: center;
	border-top: 2px solid #BE9C91; border-bottom: 2px solid #BE9C91;
}
/* 保証制度 etc. repeat heading+table blocks — without this the next block's
   heading sits flush against the previous block's table (measured ~78px gap in Figma). */
.treatment-compare-table-wrap + .treatment-sub-heading { margin-top: 78px; }
/* Same reasoning when "◯◯の手術の流れ" follows straight after the
   "◯◯の手術について" blocks above it (both inside #procedure) — without
   this it sits flush against the previous block's last photo/text pair. */
.treatment-procedure + .treatment-sub-heading--bordered { margin-top: 56px; }
.treatment-block__note { font-size: 13px; color: var(--color-text-soft); text-align: right; margin: 12px 0 62px; }
.treatment-block__more { text-align: center; margin: 60px 0 0; }
.treatment-block__more .btn { width: 300px; height: 52px; }

/* --- Hero / title block ------------------------------------------- */
/* Figma: the photo bleeds to the viewport's right edge behind the text
   column, the same "container text + edge-to-edge photo" convention used
   for other hero-type images sitewide — not a symmetric two-column grid. */
.treatment-hero { position: relative; background: linear-gradient(90deg, #eadeda 0%, #ddc3b8 100%); }
.treatment-hero .container { position: relative; z-index: 1; }
.treatment-hero__main { max-width: 560px; }
@media (min-width: 901px) {
	/* Widened so the price row (tags + large ¥ amounts) fits on one line
	   without the value spans getting flex-shrunk into a text wrap. */
	.treatment-hero__main { max-width: 660px; }
}
/* Photo sits behind the text column (no z-index vs. .container's z-index:1)
   and is allowed to overlap it — sized by its own aspect ratio at the fixed
   hero height so the whole image shows, not cropped to a narrow column. */
.treatment-hero__photo { position: absolute; top: 0; right: 0; bottom: 0; z-index: 0; }
@media (min-width: 901px) {
	.treatment-hero { height: 400px; display: flex; align-items: center; }
	.treatment-hero .container { width: 100%; }
}
.treatment-hero__category { font-family: var(--font-jp); font-size: 16px; font-weight: 500; color: var(--color-text); margin: 0 0 24px; }
.treatment-hero__title { font-family: var(--font-serif-jp); font-size: 36px; font-weight: 400; color: var(--color-primary); margin: 0 0 24px; }
.treatment-hero__title-note { display: block; font-family: var(--font-jp); font-size: 18px; font-weight: 400; color: var(--color-text-soft); margin-top: 8px; }
.treatment-hero__price { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
/* Each group (tag + amount [+ arrow]) is one flex item, so the wrap point
   always lands between groups — never mid-number — at any width. */
.treatment-hero__price-group { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.treatment-hero__price-tag {
	display: flex; align-items: center; justify-content: center; text-align: center;
	font-family: var(--font-jp); font-size: 16px; font-weight: 500; color: #fff;
	min-width: 115px; height: 61px; padding: 0 16px; line-height: 1.3; border-radius: 4px;
	flex-shrink: 0; white-space: nowrap;
}
.treatment-hero__price-tag--regular { background: #808080; }
.treatment-hero__price-tag--monitor { background: #9e7e73; }
/* Wraps the amount and its optional （...）note so the note always drops
   to its own line beneath the amount, regardless of amount length. */
.treatment-hero__price-value-wrap { display: flex; flex-direction: column; flex-shrink: 0; gap: 0; }
.treatment-hero__price-value { font-family: var(--font-en); font-size: 32px; line-height: 1.3; color: var(--color-text); flex-shrink: 0; white-space: nowrap; }
.treatment-hero__price-value .treatment-hero__price-symbol { font-size: 28px; }
.treatment-hero__price-value--monitor { font-size: 56px; color: var(--color-primary-deep); }
.treatment-hero__price-value--monitor .treatment-hero__price-symbol { font-size: 40px; }
.treatment-hero__price-note { font-family: var(--font-jp); font-size: 13px; line-height: 1.5; color: var(--color-text-soft); margin: 0; }
/* body/span get text-box-trim:trim-both globally, which collapses the
   line-box leading — fine for single-line text but crams stacked lines
   (amount + note) together. Restore normal leading here. */
.treatment-hero__price-value,
.treatment-hero__price-note {
	text-box-trim: none;
	text-box-edge: auto;
	-webkit-text-box-trim: none;
	-webkit-text-box-edge: auto;
}
.treatment-hero__price-arrow { display: flex; color: var(--color-text-soft); flex: none; width: 16px; height: 16px; }
@media (min-width: 901px) {
	/* Regular/monitor price were flex-wrapping onto their own lines
	   whenever the combined width didn't fit (e.g. a large monitor amount)
	   — pin them into 2 even columns instead so they always sit
	   side-by-side regardless of amount length. The connecting arrow only
	   made sense in the single-line flow; a 2-column layout reads fine
	   without it. */
	.treatment-hero__price { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
	.treatment-hero__price-group { width: 100%; }
	.treatment-hero__price-arrow { display: none; }
}
.treatment-hero__catchcopy { font-family: var(--font-serif-jp); font-size: 18px; font-weight: 500; color: var(--color-text); margin: 0 0 24px; }
.treatment-hero__compare { display: flex; gap: 8px; }
.treatment-hero__compare-item { position: relative; flex: 1; }
.treatment-hero__compare-item img, .treatment-hero__compare-item .img-placeholder { width: 100%; height: 110px; min-height: 0; object-fit: cover; display: block; }
.treatment-hero__compare-tag {
	position: absolute; top: 8px; font-family: var(--font-en); font-size: 11px; font-weight: 600;
	color: #fff; background: rgba(26,19,17,.55); padding: 3px 10px; letter-spacing: .05em;
}
.treatment-hero__compare-item:first-child .treatment-hero__compare-tag { left: 8px; }
.treatment-hero__compare-item:last-child .treatment-hero__compare-tag { right: 8px; }
.treatment-hero__photo img, .treatment-hero__photo .img-placeholder { height: 100%; width: auto; object-fit: contain; display: block; }
@media (max-width: 900px) {
	/* object-fit:cover on this very short 4/1 band always cropped off part
	   of the photo (chin/mouth at best, straight through the nose at
	   worst) no matter how object-position was tuned — the math just
	   doesn't work out for a portrait-style close-up in a 4:1 box. Show
	   the whole photo uncropped instead: contain letterboxes it (empty
	   side margins filled by the section's own background gradient)
	   rather than cutting any of it away. */
	.treatment-hero__photo img, .treatment-hero__photo .img-placeholder { width: 100%; height: 100%; object-fit: contain; }
	.treatment-hero__title { font-size: 24px; }
	.treatment-hero__title-note { font-size: 14px; margin-top: 6px; }
	.treatment-hero__price-tag { height: 40px; width: auto; min-width: 0; }
	.treatment-hero__price-value { font-size: 24px; }
	.treatment-hero__price-value--monitor { font-size: 32px; }
	.treatment-hero__price-arrow { display: none; }
}

/* --- Page-nav pills -------------------------------------------------- */
.treatment-page-nav { background: #fff; border-bottom: 1px solid var(--color-border); position: sticky; top: 60px; z-index: 90; }
@media (min-width: 901px) {
	.treatment-page-nav { top: 128px; }
}
.treatment-page-nav__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; }
.treatment-page-nav__link {
	font-family: var(--font-jp); font-size: 14px; color: var(--color-text-soft);
	padding: 16px; position: relative; transition: color var(--transition-base);
}
.treatment-page-nav__link + .treatment-page-nav__link::before {
	content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
	width: 1px; height: 14px; background: var(--color-border);
}
.treatment-page-nav__link:hover, .treatment-page-nav__link.is-active { color: var(--color-primary); }
.treatment-page-nav__toggle { display: none; }
/* Detection-only sentinel for initTreatmentPageNav()'s IntersectionObserver
   — 0 height, doesn't affect layout or the sticky trigger point below. */
.treatment-page-nav__sentinel { height: 0; }
@media (max-width: 900px) {
	/* Mobile: the pill row wraps to 3-4 lines and eats a lot of sticky
	   space — collapse it behind a one-line toggle bar, same open/closed
	   pattern as the site's other accordions. The toggle itself only
	   appears once the nav is actually pinned under the header (.is-stuck,
	   set by the sentinel observer) — otherwise it would show as a bar
	   sitting in the middle of the page at its normal (unstuck) position,
	   which reads as a stray floating button rather than a nav. */
	.treatment-page-nav.is-stuck .treatment-page-nav__toggle {
		display: flex; align-items: center; justify-content: center; gap: 8px;
		width: 100%; background: var(--color-primary); color: #fff; border: none;
		font-family: var(--font-jp); font-size: 14px; font-weight: 500; padding: 14px;
	}
	.treatment-page-nav__toggle-icon { display: flex; width: 14px; height: 14px; transition: transform var(--transition-base); }
	.treatment-page-nav.is-open .treatment-page-nav__toggle-icon { transform: rotate(180deg); }
	.treatment-page-nav__row { display: none; padding: 8px 0; }
	.treatment-page-nav.is-open .treatment-page-nav__row { display: flex; }
}

/* --- Listing filter bar (mobile-only sticky 2nd header row) ----------
   Category chip row + 絞り込む button for the 4 listing pages
   (treatment-menu / price / worries / case-list). Desktop already has
   each page's own full search section for this, so this bar only
   exists on mobile — same sticky-under-header convention as
   .treatment-page-nav above (top: 60px, matching the 60px mobile
   header height; z-index: 90 sits below the header itself (100) and
   the mobile nav / sticky CTA (150)). */
.listing-filter-bar { display: none; }
.listing-filter-bar__result { display: none; }
@media (max-width: 782px) {
	.listing-filter-bar {
		display: flex; align-items: center;
		position: sticky; top: 60px; z-index: 90;
		background: rgba(242, 239, 235, .96); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
		border-bottom: 1px solid var(--color-border);
	}
	.listing-filter-bar__chips {
		display: flex; gap: 8px; overflow-x: auto; padding: 12px 10px 12px 14px;
		scrollbar-width: none;
	}
	.listing-filter-bar__chips::-webkit-scrollbar { display: none; }
	.listing-filter-bar__chip {
		flex: none; font-family: var(--font-jp); font-size: 12px; font-weight: 500;
		color: var(--color-primary); background: #fff; border: 1px solid var(--color-border);
		border-radius: var(--radius-pill); padding: 7px 13px; text-decoration: none;
		transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
	}
	.listing-filter-bar__chip.is-active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
	.listing-filter-bar__filter {
		flex: none; display: flex; align-items: center; gap: 5px; margin: 0 12px 0 4px; padding: 4px 12px;
		font-family: var(--font-jp); font-size: 12px; font-weight: 500; color: var(--color-primary-deep);
		background: var(--color-bg-cream); border: 1px solid var(--color-primary); border-radius: var(--radius-pill);
		text-decoration: none; white-space: nowrap; cursor: pointer;
		box-shadow: -14px 0 10px -6px var(--color-bg-cream);
	}
	.listing-filter-bar__filter svg { width: 12px; height: 12px; }

	/* "◯件を表示中 / クリア" row — shown once a chip or the 絞り込む sheet
	   actually filters something (price.php, page-treatment-menu.php,
	   page-worries.php toggle .is-visible from their own JS). */
	.listing-filter-bar__result {
		display: none; align-items: center; justify-content: space-between;
		background: var(--color-bg-beige); padding: 8px 16px;
		font-family: var(--font-jp); font-size: 12px; color: var(--color-text-soft);
	}
	.listing-filter-bar__result.is-visible { display: flex; }
	.listing-filter-bar__result-count { color: var(--color-text); font-weight: 700; }
	.listing-filter-bar__clear-btn {
		border: none; background: none; font-family: var(--font-jp); font-size: 12px;
		color: var(--color-primary-deep); text-decoration: underline; cursor: pointer; padding: 4px;
	}

	/* Anchor/scrollIntoView targets — without this, the target's top edge
	   lands flush with the viewport top, hidden behind the sticky header
	   (60px) + this bar (~44px) [+ the result row above when visible].
	   .price-category__card/.price-treatment are what 検索
	   (page-treatment-menu.php/page-price.php) scrolls to. */
	.price-category, .worries-category, #case-list-results, .price-category__card, .price-treatment {
		scroll-margin-top: 112px;
	}
}

/* --- 症例写真（Figma：1枚写真のみ、Before/Afterの縦積みではない）--------- */
.treatment-case-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.treatment-case-card { display: block; text-align: left; background: none; border: 1px solid #d9d9d9; padding: 20px; width: 100%; }
.treatment-case-card__image { position: relative; display: block; aspect-ratio: 1/1; overflow: hidden; }
.treatment-case-card__image img, .treatment-case-card__image .img-placeholder { width: 100%; height: 100%; object-fit: cover; display: block; }
.treatment-case-card__caption { display: block; font-family: var(--font-jp); font-size: 17px; font-weight: 500; color: var(--color-text); margin: 12px 0 8px; }
.treatment-case-card__more {
	display: block; text-align: center; background: #ebe3da; color: var(--color-text-soft);
	font-family: var(--font-jp); font-size: 14px; padding: 10px; border-radius: 4px;
}

/* --- こんな方におすすめ / 保証制度の見出し（共通チェックリスト） ------ */
.treatment-checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
.treatment-checklist__item {
	display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-radius: 6px;
	font-family: var(--font-jp); font-size: 20px; color: var(--color-text);
}
.treatment-checklist__item svg { flex: none; width: 18px; height: 18px; color: var(--color-primary); }
.treatment-checklist--fill .treatment-checklist__item { background: var(--color-bg-cream); }
.treatment-checklist--outline .treatment-checklist__item { border: 1px solid var(--color-primary); color: var(--color-primary); }

/* --- 施術について / 施術名とは ---------------------------------------- */
.treatment-about__image { margin: 0 0 40px; text-align: center; }
.treatment-about__image img { max-width: 500px; width: 100%; height: auto; display: inline-block; }
/* Two-column variant: post's own aikyacchi photo (or about_image) on the
   left, body copy on the right — used whenever both a photo and body text
   are present (see single-treatment_menu.php). */
.treatment-about__row { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.treatment-about__row .treatment-about__image { margin: 0; text-align: left; }
.treatment-about__row .treatment-about__image img { max-width: none; width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block; }
/* アイキャッチ画像をメインとして表示し、「〇〇とは」セクションの画像
   （about_image）が別途あればその下に別のdivとして追加でもう1枚、
   全体が見えるよう（クロップなし）表示する。
   .treatment-about__image とスタイルを共有しないよう独立したブロックにする。 */
.treatment-about__image-col { margin: 0 0 40px; }
.treatment-about__image-extra { margin-top: 24px; text-align: center; }
.treatment-about__image-extra img { max-width: 500px; width: 100%; height: auto; display: inline-block; }
.treatment-about__row .treatment-about__image-col { margin: 0; }
.treatment-about__body { font-family: var(--font-jp); font-size: 16px; line-height: 2; color: var(--color-text); }
.treatment-about__body p { margin: 0 0 24px; }
.treatment-about__body h3, .treatment-about__body h4 {
	font-family: var(--font-serif-jp); font-size: 17px; font-weight: 500; color: var(--color-text);
	border-left: 3px solid var(--color-primary); padding-left: 14px; margin: 40px 0 16px;
}

/* --- 施術内容 --------------------------------------------------------- */
.treatment-procedure__item { display: grid; grid-template-columns: 1fr; gap: 40px; margin-bottom: 56px; }
.treatment-procedure__item + .treatment-procedure__item { border-top: 1px solid var(--color-border); padding-top: 56px; }
.treatment-procedure__photo { width: 600px; max-width: 100%; margin: 0 auto; }
.treatment-procedure__photo img, .treatment-procedure__photo .img-placeholder { width: 100%; height: auto; display: block; }
/* 2+ uploaded images for one block (原因/手術についてブロックの複数画像) —
   lay them out side by side instead of stacking one full-width image per
   photo slot, and show each at its natural aspect ratio (no cropping),
   since these are often illustration diagrams where cropping cuts off
   labels/arrows. */
.treatment-procedure__photo--multi { width: 800px; max-width: 100%; margin: 0 auto; aspect-ratio: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
.treatment-procedure__photo--multi img { aspect-ratio: auto; width: 100%; height: auto; object-fit: contain; }
/* Exactly 3 images: one row of 3 columns instead of 2+1. Wider than the
   2-column box since 3 photos need more horizontal room to stay legible. */
.treatment-procedure__photo--multi-3 { width: 1100px; grid-template-columns: repeat(3, 1fr); gap: 24px; }
/* Exactly 4 images: one row of 4 columns. */
.treatment-procedure__photo--multi-4 { width: 1200px; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.treatment-procedure__photo-item { margin: 0; }
.treatment-procedure__photo-caption { font-family: var(--font-jp); font-size: 13px; line-height: 1.6; color: var(--color-text-soft); text-align: center; margin: 8px 0 0; }
.treatment-procedure__number { font-family: var(--font-en); font-size: 40px; color: var(--color-primary); margin: 0 0 22px; display: flex; align-items: center; gap: 12px; }
.treatment-procedure__number span { font-family: var(--font-jp); font-size: 20px; font-weight: 500; color: var(--color-text); }
.treatment-procedure__subheading {
	font-family: var(--font-serif-jp); font-size: 26px; font-weight: 500; color: var(--color-text);
	border-left: 3px solid var(--color-primary); padding-left: 14px; margin: 0 0 32px;
}
.treatment-procedure__body { font-family: var(--font-jp); font-size: 16px; line-height: 1.5; color: var(--color-text-soft); margin: 0; }

/* --- 詳細情報 ----------------------------------------------------------- */
.treatment-info-table { width: 100%; border-collapse: collapse; }
.treatment-info-table th {
	width: 400px; background: var(--color-primary); color: #fff; font-family: var(--font-jp); font-size: 16px; font-weight: 500;
	text-align: center; padding: 16px; border-bottom: 1px solid #fff;
}
.treatment-info-table td {
	background: #f4f0ee; color: var(--color-text); font-family: var(--font-jp); font-size: 16px;
	padding: 16px 24px; border-bottom: 1px solid #fff;
}

/* --- 施術の流れ ---------------------------------------------------------- */
.treatment-flow { display: flex; align-items: stretch; gap: 16px; }
.treatment-flow__card { flex: 1; background: var(--color-bg-cream); padding: 32px; }
.treatment-flow__top { display: flex; align-items: center; gap: 16px; margin-bottom: 40px; }
.treatment-flow__step {
	display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none;
	width: 64px; height: 64px; border-radius: 50%; background: var(--color-primary); color: #fff;
	font-family: var(--font-en); font-size: 20px; line-height: 1;
}
.treatment-flow__step-label { font-size: 9px; letter-spacing: .05em; margin-bottom: 4px; }
.treatment-flow__heading { font-family: var(--font-serif-jp); font-size: 20px; font-weight: 500; color: var(--color-text); margin: 0; }
.treatment-flow__body { font-family: var(--font-jp); font-size: 16px; line-height: 2; color: var(--color-text-soft); margin: 0; }
.treatment-flow__arrow { flex: none; display: flex; align-items: center; color: var(--color-text-soft); width: 20px; }

/* --- 料金表 / メニュー比較表 / 保証制度の各表（同じ配色を共有） --------- */
.treatment-compare-table-wrap { overflow-x: auto; }
/* table-layout:fixed keeps every column an even width so long cell text
   wraps onto multiple lines to fit (matching the design) instead of
   forcing the whole table wider. */
.treatment-compare-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.treatment-compare-table th, .treatment-compare-table td { padding: 10px; text-align: center; font-family: var(--font-jp); font-size: 14px; line-height: 1.4; border-bottom: 1px solid #cfccc9; border-right: 1px solid #cfccc9; white-space: normal; word-break: break-word; }
.treatment-compare-table thead th { background: var(--color-primary); color: #fff; font-weight: 500; }
.treatment-compare-table tbody th { background: #e8e5e3; color: #858381; font-weight: 500; }
.treatment-compare-table tbody td { background: #fff; color: var(--color-lead); font-weight: 400; }
@media (max-width: 900px) {
	/* Fixed layout + width:100% forces every column to shrink to fit the
	   viewport instead of overflowing — give the table its natural
	   (content-driven) width with a floor wide enough that columns stay
	   readable, so it overflows the wrap and scrolls horizontally instead. */
	.treatment-compare-table { width: auto; min-width: 700px; table-layout: auto; }
}

/* --- ご予約はこちらから ---------------------------------------------- */
.treatment-cta__buttons { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
/* --boxed: the closing CTA repeated after 記事監修医師 — a full-width
   cream band (not a floating card) with the heading + buttons sitting
   inside it, distinct from the plain in-flow row earlier on the same page. */
.treatment-cta--boxed { background: var(--color-bg-cream); padding: 0 0 64px; }
.treatment-page .treatment-cta--boxed { padding: 0 0 64px; }
.treatment-cta--boxed .container::before { display: none; }
@media (max-width: 600px) {
	.treatment-cta--boxed, .treatment-page .treatment-cta--boxed { padding: 0 0 40px; }
}

/* --- 選ばれる理由 ------------------------------------------------------- */
.treatment-reasons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.treatment-reason-card { border: 1px solid var(--color-primary); border-radius: 8px; padding: 32px 24px; text-align: center; }
.treatment-reason-card__eyebrow { font-family: var(--font-en); font-size: 13px; letter-spacing: .1em; color: var(--color-primary); margin: 0 0 8px; }
.treatment-reason-card__number { font-family: var(--font-en); font-size: 42px; color: var(--color-primary); margin: 0 0 16px; }
.treatment-reason-card__heading { font-family: var(--font-serif-jp); font-size: 16px; font-weight: 500; color: var(--color-text); line-height: 1.5; margin: 0 0 20px; }
.treatment-reason-card__body { font-family: var(--font-jp); font-size: 15px; line-height: 1.8; color: var(--color-text-soft); margin: 0; text-align: left; }

/* --- 種類と特徴（4カラム×2行のカードグリッド） ------------------------- */
.treatment-type-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.treatment-type-card { background: none; padding: 0; }
.treatment-type-card__photo { margin: 0 0 20px; }
.treatment-type-card__photo img { width: 100%; height: auto; display: block; }
.treatment-type-card__heading { font-family: var(--font-serif-jp); font-size: 16px; font-weight: 500; color: var(--color-text); line-height: 1.5; margin: 0 0 12px; }
.treatment-type-card__subheading { font-family: var(--font-jp); font-size: 16px; font-weight: 500; color: var(--color-primary); line-height: 1.5; margin: -8px 0 12px; }
.treatment-type-card__body { font-family: var(--font-jp); font-size: 14px; line-height: 1.8; color: var(--color-text-soft); margin-top: 20px; }
.treatment-type-footer-text { font-family: var(--font-jp); font-size: 16px; line-height: 1.8; color: var(--color-text); margin-top: 40px; }
.treatment-type-footer-text p { margin: 0 0 20px; }
.treatment-type-footer-text p:last-child { margin-bottom: 0; }

/* --- 関連する施術 --------------------------------------------------- */
.treatment-related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.treatment-related-card {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	background: #fff; padding: 20px; font-family: var(--font-jp); font-size: 15px; font-weight: 500; color: var(--color-primary);
	transition: opacity var(--transition-base);
}
.treatment-related-card:hover { opacity: .7; }
.treatment-related-card__arrow { display: flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--color-primary); color: #fff; }
.treatment-related-card__arrow svg { width: 12px; height: 12px; }

/* --- 関連コラム（front-page の column-card を静的グリッドで再利用） ---
   .column-card's base styles are white text for the dark/colored slider
   background it was built for; on this white card background that text was
   invisible (white on white) — re-darken it here. */
.column-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.column-grid .column-card { background: #fff; color: var(--color-text); }
.column-grid .column-card__date { color: var(--color-text-soft); }
.column-grid .column-card__excerpt { color: var(--color-text-soft); }
.column-grid .column-card__more { color: var(--color-primary); }

/* --- 記事監修医師 ------------------------------------------------------ */
.treatment-doctor-container { max-width: 968px; }
.treatment-doctor-card { background: #fff; }
.treatment-doctor-card__banner {
	background: var(--color-primary); color: #fff; font-family: var(--font-serif-jp); font-size: 16px; font-weight: 500;
	text-align: center; padding: 16px; margin: 0;
}
.treatment-doctor-card__body { display: grid; grid-template-columns: 1fr 220px; gap: 40px; padding: 32px; align-items: start; }
.treatment-doctor-card__clinic { font-family: var(--font-jp); font-size: 13px; color: var(--color-text-soft); margin: 0 0 8px; }
.treatment-doctor-card__name { font-family: var(--font-serif-jp); font-size: 22px; color: var(--color-text); margin: 0 0 16px; display: flex; align-items: baseline; gap: 12px; }
.treatment-doctor-card__role { font-family: var(--font-jp); font-size: 13px; font-weight: 500; color: var(--color-primary); }
.treatment-doctor-card__sns { display: flex; gap: 10px; list-style: none; margin: 0 0 24px; padding: 0; }
.treatment-doctor-card__sns a { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--color-primary); color: #fff; font-size: 14px; }
.treatment-doctor-card__photo img, .treatment-doctor-card__photo .img-placeholder { width: 100%; height: auto; aspect-ratio: 3/4; object-fit: cover; display: block; }

@media (max-width: 900px) {
	.treatment-hero { padding-bottom: 0; display: flex; flex-direction: column; }
	/* Flex items get an automatic min-height:auto floor from their content's
	   intrinsic size by default — for a box whose only content is an <img>,
	   that floor is the image's OWN natural ratio, which clamped the box
	   taller than the 4/1 aspect-ratio actually asked for. min-height:0
	   removes that floor so aspect-ratio wins. */
	.treatment-hero__photo { position: static; width: auto; flex: none; min-height: 0; aspect-ratio: 4/1; margin-bottom: 0; order: 2; overflow: hidden; }
	.treatment-hero .container { order: 1; }
	.treatment-hero__main { max-width: none; padding-top: 24px; }
	.treatment-block__heading { font-size: 22px; }
	.treatment-block__banner { line-height: 1.3; }
	.treatment-block__banner-label { display: block; }
	.treatment-case-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
	.treatment-checklist { grid-template-columns: 1fr; }
	.treatment-checklist__item { font-size: 16px; line-height: 1.3; }
	.treatment-about__row { grid-template-columns: 1fr; gap: 24px; }
	.treatment-flow { flex-direction: column; }
	.treatment-flow__arrow { transform: rotate(90deg); align-self: center; }
	.treatment-reasons { grid-template-columns: 1fr; }
	.treatment-type-grid { grid-template-columns: 1fr 1fr; }
	.treatment-related-grid { grid-template-columns: 1fr; }
	.column-grid { grid-template-columns: 1fr; }
	.treatment-doctor-card__body { grid-template-columns: 1fr; }
	.treatment-doctor-card__photo { max-width: 200px; margin: 0 auto; order: 1; }
	.treatment-doctor-card__info { order: 2; }
	.treatment-info-table, .treatment-info-table tbody, .treatment-info-table tr, .treatment-info-table th, .treatment-info-table td {
		display: block; width: auto;
	}
	.treatment-info-table th { text-align: left; font-size: 15px; line-height: 1.3; }
	.treatment-info-table td { font-size: 15px; line-height: 1.3; }
	.treatment-procedure__number { margin-bottom: 0; }
	.treatment-procedure__subheading { font-size: 18px; }
	/* --multi-3/-4's fixed 1100px/1200px width (and --multi's 800px) was
	   never overridden for mobile, so a grid item sized to it forced the
	   whole page's layout viewport wider than the screen — the entire
	   page then rendered shrunk into the top-left corner with blank
	   space filling the rest, same class of bug as the hero-slider fix
	   above. Collapse all multi-photo variants to 2 columns at 100%
	   width, same pattern as treatment-case-grid/treatment-type-grid. */
	.treatment-procedure__photo--multi,
	.treatment-procedure__photo--multi-3,
	.treatment-procedure__photo--multi-4 {
		width: 100%;
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
	/* The single-photo case has the exact same bug: it's a fixed-width
	   (600px) grid item inside .treatment-procedure__item's 1fr track,
	   and max-width:100% alone doesn't stop the grid's track-sizing
	   algorithm from using the item's specified width as its max-content
	   contribution — the track (and so the whole page) still balloons
	   to 600px on screens narrower than that. Needs an explicit 100%
	   width override here same as the multi variants above. */
	.treatment-procedure__photo { width: 100%; }
	.treatment-reason-card__number { font-size: 36px; }
	.treatment-sub-heading--bordered { font-size: 20px; }
	.treatment-flow__top { margin-bottom: 20px; }
	.treatment-flow__step { width: 50px; height: 50px; }
}

/* =========================================================
   PRICE page (/price — Figma node 571:464)
========================================================= */
.price-hero { position: relative; isolation: isolate; }
.price-hero__photo { position: relative; width: 100%; aspect-ratio: 1920/400; background: var(--color-bg-taupe); clip-path: inset(0); z-index: -1; }
/* /price/ ページのみ、ヘッダー写真の顔部分が隠れて手元（タブレット）が
   写るように、拡大＆表示位置を調整（パララックス効果は維持）。 */
.page-template-page-price-php .price-hero__photo .parallax-bg { background-size: 180% auto; background-position: center 82%; }
@media (max-width: 782px) {
	/* .parallax-bg is position:fixed (a true parallax layer), so its
	   background-size is calculated against the full viewport, not the
	   ~130px visible band .price-hero__photo clips it to — 600% zoomed
	   the image far past recognizable there (an out-of-focus color
	   blur), and a plain "keep-it-fixed" repeat also filled the leftover
	   height that a lower zoom (sized off image width only) doesn't
	   cover on most phones — the un-cropped part of the image tiled a
	   second time (fixed globally under background-repeat: no-repeat
	   instead). A % Y position also isn't usable here: it's resolved
	   against the full viewport HEIGHT, which varies by phone, so the
	   exact same value framed the shot differently from one device to
	   the next. A fixed px offset doesn't have that problem —
	   .price-hero__photo sits a fixed distance below the (equally
	   fixed-height) sticky header + chip bar on every phone, regardless
	   of the phone's own viewport height. 220% zoom keeps the pen, hand
	   and tablet fully inside the band at any phone width in this
	   breakpoint — anything lower let the tablet's own top edge poke
	   into (and get cut off by) the band's top on wider phones. */
	.page-template-page-price-php .price-hero__photo .parallax-bg { background-size: 220% auto; background-position: center -180px; }
}
.price-hero__heading { margin-top: -35px; padding-bottom: 100px; }
/* Every fixed page's hero-to-content gap lives entirely inside the hero's
   own padding above — the section right after it is reset to 0 so the
   100px is never doubled up with that section's own top padding. TOP
   page is excluded since it doesn't use .price-hero at all. */
.price-hero + .section { padding-top: 0; }
.price-hero__en { font-family: var(--font-en); font-size: 100px; line-height: 1; color: var(--color-primary); margin: 0; }
.price-hero__jp { font-family: var(--font-serif-jp); font-size: 20px; color: var(--color-text); margin: 32px 0 0; }

.price-search-section { padding-top: 56px; padding-bottom: 64px; }
.price-search { background: #eae5de; border-radius: 16px; padding: 40px; }
/* JS-inserted bottom-sheet close button (initListingFilterSheet() in
   main.js prepends it into .price-search on every viewport) — only
   meaningful once .price-search becomes a mobile bottom sheet (see
   @media 782px below), so it must default to hidden here or it renders
   as an unstyled button at the top-left of the desktop search block. */
.price-search__sheet-close { display: none; }
.price-search__lead { font-family: var(--font-serif-jp); font-size: 15px; color: var(--color-lead); text-align: center; margin: 0 0 24px; }
.price-search__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.price-search__select { position: relative; display: block; height: 56px; }
.price-search__select span {
	position: absolute; inset: 0; z-index: 0; display: flex; align-items: center;
	padding: 0 16px; font-family: var(--font-jp); font-size: 16px; font-weight: 500;
	color: var(--color-text); background: #fff; border: 1px solid #d9d9d9;
}
.price-search__select select { position: relative; z-index: 1; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.price-search__select::after {
	content: ''; position: absolute; right: 16px; top: 50%; margin-top: -3px;
	width: 10px; height: 6px; z-index: 2; pointer-events: none;
	background: var(--color-text);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.price-search__input-row { display: flex; gap: 16px; }
.price-search__input { flex: 1; display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #d9d9d9; padding: 0 16px; height: 56px; color: var(--color-text-soft); }
.price-search__input svg { width: 14px; height: 14px; flex: none; color: var(--color-text-soft); }
.price-search__input input { flex: 1; min-width: 0; border: none; outline: none; font-family: var(--font-jp); font-size: 16px; background: transparent; }
.price-search__button { flex: none; width: 200px; background: var(--color-text); color: #fff; font-family: var(--font-jp); font-size: 16px; font-weight: 500; border: none; }

/* Figma's heading group is only as wide as its own content and starts
   flush with the container's left edge — the flex justify-center only
   centers the EN/JP pair within that tight box, it isn't a page-wide
   centering directive. */
.price-category { padding: 0; }
/* Spacing above the category blocks comes from .price-search-section's own
   padding-bottom (above), not from padding on the first .price-category —
   the search/filter JS toggles display:none on whichever categories have
   no matches, so "the first .price-category" in the DOM is not reliably
   the first one actually visible. A rule scoped to that DOM position would
   leave the block that ends up first with no gap above it. */
.price-category__heading { display: inline-flex; align-items: center; justify-content: center; gap: 20px; margin: 0 0 32px; }
.price-category__en { font-family: var(--font-en); font-size: 36px; color: var(--color-primary); margin: 0; }
.price-category__jp { font-family: var(--font-jp); font-size: 16px; font-weight: 500; color: var(--color-text); margin: 0; }
.price-category__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 64px; }
.price-category__card {
	display: flex; align-items: center; justify-content: space-between;
	background: #fff; padding: 16px;
	font-family: var(--font-jp); font-size: 16px; font-weight: 500; color: var(--color-primary);
	transition: opacity var(--transition-base);
}
.price-category__card:hover { opacity: .7; }
.price-category__card-sublabel { display: block; font-size: 12px; font-weight: 400; color: var(--color-text-soft); margin-top: 2px; }
.price-category__card-arrow {
	display: flex; align-items: center; justify-content: center; flex: none;
	width: 20px; height: 20px; border-radius: 50%; background: var(--color-primary); color: #fff;
}
.price-category__card-arrow svg { width: 12px; height: 12px; }
/* Monitor page's recruit buttons reuse .price-category__card as-is, but
   sit directly on the page background rather than the price page's
   accordion panel — a light border helps them read as distinct buttons. */
.monitor-recruit .price-category__card { border: 1px solid var(--color-border); }
.price-category__divider { border-top: 1px solid var(--color-border); margin: 0 0 64px; }

.price-detail-section { padding-top: 0; }
.price-category__accordion { background: none; border: none; border-radius: 0; }
.price-category__accordion + .price-category__accordion { margin-top: 20px; }
.price-category__toggle {
	width: 100%; display: flex; align-items: center; justify-content: space-between;
	background: #d3c3be; border: none; padding: 20px 40px; text-align: left;
}
.price-category__toggle-heading { display: flex; align-items: center; gap: 20px; }
.price-category__toggle-en { font-family: var(--font-en); font-size: 24px; color: #fff; }
.price-category__toggle-jp { font-family: var(--font-jp); font-size: 16px; font-weight: 500; color: #aa877c; }
.price-category__toggle-icon { width: 32px; height: 32px; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; transition: transform var(--transition-base); }
.price-category__accordion.is-open .price-category__toggle-icon { transform: rotate(180deg); }
/* .price-category__detail also carries the shared .accordion__panel class
   (max-height:600px; overflow:hidden), which clipped any price table
   taller than 600px and, with no gap to the next accordion, read as
   overlapping text — override both so open panels grow to fit content. */
.price-category__detail { display: none; max-height: none; overflow: visible; padding-top: 8px; }
.price-category__accordion.is-open .price-category__detail { display: block; max-height: none; }

.price-treatment { padding-top: 56px; }
.price-treatment__heading { font-family: var(--font-serif-jp); font-size: 20px; font-weight: 400; color: var(--color-text); border-left: 3px solid var(--color-primary); padding-left: 16px; margin: 0 0 16px; }
.price-treatment__empty { font-size: 14px; color: var(--color-text-soft); padding-left: 19px; }
/* Mobile-only collapsed card (styled/shown in the @media 900px block
   below) — hidden here so it doesn't render as an unstyled button with
   a giant unsized SVG chevron on desktop. */
.price-treatment__toggle { display: none; }

.price-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.price-table th, .price-table td { padding: 14px 12px; text-align: center; font-family: var(--font-jp); font-size: 16px; line-height: 1.4; border-bottom: 1px solid #cfccc9; border-right: 1px solid #cfccc9; }
.price-table thead th { background: var(--color-primary); color: #fff; font-weight: 500; }
.price-table tbody .price-table__name { background: #e8e5e3; color: #858381; font-weight: 500; }
.price-table tbody td:not(.price-table__name) { background: #fff; color: var(--color-lead); font-weight: 400; }
.price-table tbody td.price-table__monitor { color: #e34848; font-weight: 700; font-size: 18px; }
.price-table__note { display: block; font-size: 12px; font-weight: 400; color: var(--color-text-soft); margin-top: 4px; line-height: 1.4; }
.price-table tbody td.price-table__monitor .price-table__note { color: var(--color-text-soft); }

@media (max-width: 900px) {
	.price-hero__photo { aspect-ratio: unset; height: 130px; }
	.price-hero__heading { margin-top: -28px; padding-bottom: 80px; }
	.price-hero__en { font-size: 56px; }
	.price-search { padding: 24px; }
	.price-search__row { grid-template-columns: 1fr; }
	.price-search__input-row { flex-direction: column; }
	.price-search__button { width: 100%; height: 48px; }
	.price-search-section { padding-bottom: 40px; }
	.price-category__heading { margin: 0 0 24px; flex-direction: column; align-items: flex-start; gap: 8px; }
	.price-category__en { font-size: 28px; }
	.price-category__grid { grid-template-columns: 1fr; gap: 10px; margin-bottom: 32px; }
	.price-category__divider { margin: 0 0 32px; }
	.price-category__toggle { padding: 16px 20px; }
	.price-category__toggle-heading { gap: 10px; flex-wrap: wrap; }
	/* 1-column card layout: thead is dropped (its labels reappear as a
	   ::before on each td via data-label, added in the PHP templates) and
	   every row becomes a stacked block instead of a 3-cell table row. */
	.price-table, .price-table tbody, .price-table tr, .price-table th, .price-table td {
		display: block; width: 100%;
	}
	.price-table thead { display: none; }
	.price-table tr { margin-bottom: 16px; border-right: none; }
	.price-table tr:last-child { margin-bottom: 0; }
	.price-table th, .price-table td { padding: 12px 16px; font-size: 15px; line-height: 1.3; text-align: left; border-right: none; }
	/* .price-table__monitor sets a bold/red/18px look on the whole <td> for
	   its value — reset those on the label so "モニター価格：" still reads
	   like the plain "通常価格：" label next to it, not like the value. */
	.price-table td[data-label]::before { content: attr(data-label) "："; color: var(--color-text-soft); font-size: 15px; font-weight: 400; }

	/* The quick-nav card grid at the top of each category just jumped to
	   the same category's own heading further down (now always-open, see
	   below) — showing the category name twice in a row with nothing but
	   a divider between them, so the whole block goes rather than just
	   the link grid. Scoped to .price-page only — page-treatment-menu.php
	   reuses the same .price-category class for its own (still needed)
	   category sections, and a bare ".price-category { display: none }"
	   here was hiding those too. */
	.price-page .price-category { display: none; }

	/* Category heading becomes a plain, always-expanded heading — each
	   treatment gets its own accordion below instead, so an extra
	   category-level open/close was redundant with it. Restyled to match
	   .price-category__heading/__en/__jp (treatment-menu.php's plain,
	   backgroundless heading) instead of its own filled #d3c3be button
	   look, which read as still-tappable. */
	.price-category__toggle { background: none; padding: 0; margin: 0 0 12px; pointer-events: none; cursor: default; }
	.price-category__toggle-heading { flex-direction: column; align-items: flex-start; gap: 8px; }
	.price-category__toggle-en { font-size: 28px; color: var(--color-primary); }
	.price-category__toggle-jp { color: var(--color-text); }
	.price-category__toggle-icon { display: none; }
	.price-category__detail { display: block !important; }

	/* Per-treatment accordion card — closed by default so the lowest
	   price and monitor availability are comparable across treatments
	   without opening each one; tapping reveals the full price-table. */
	.price-treatment { padding-top: 10px; }
	/* The heading's own margin-bottom (above) plus .price-category__detail's
	   padding-top already give the first card its own breathing room —
	   this padding-top is only needed as the gap *between* cards. */
	.price-treatment:first-child { padding-top: 0; }
	.price-treatment__heading { display: none; }
	.price-treatment__toggle {
		display: flex; align-items: center; gap: 10px; width: 100%;
		background: #fff; border: 1px solid var(--color-border);
		padding: 14px 16px; font-family: inherit; text-align: left; cursor: pointer;
	}
	.price-treatment__toggle-name { flex: 1 1 auto; min-width: 0; font-family: var(--font-jp); font-size: 15px; font-weight: 500; color: var(--color-text); line-height: 1.4; }
	/* Preceded by a <br> in the markup so it drops to its own line
	   instead of running on from a wrapped treatment name — no left
	   margin needed once it's no longer inline with the text. */
	.price-treatment__badge {
		display: inline-flex; align-items: center; margin-top: 6px; padding: 2px 8px;
		background: #fff; color: #e34848; border: 1px solid #e34848; font-size: 10px; font-weight: 500;
		border-radius: var(--radius-pill); white-space: nowrap;
	}
	.price-treatment__toggle-price { flex: none; font-family: var(--font-jp); font-size: 14px; font-weight: 700; color: var(--color-primary-deep); white-space: nowrap; }
	.price-treatment__toggle-icon {
		flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--color-bg-cream);
		display: flex; align-items: center; justify-content: center; transition: transform var(--transition-base);
	}
	.price-treatment__toggle-icon svg { width: 9px; height: 9px; color: var(--color-text-soft); }
	.price-treatment.is-open .price-treatment__toggle-icon { transform: rotate(180deg); }
	.price-table { display: none; margin-top: 10px; }
	.price-treatment.is-open .price-table { display: block; }
}

/* =========================================================
   症例（case_study）単体ページ — Figma未支給のため既存パーツを
   流用した最小構成（施術詳細ページの「症例を詳しく見る」の遷移先）
========================================================= */
.case-study-page { background: #fff; padding: 56px 0 96px; }
.case-study-page__container { max-width: 800px; }
.case-study-page__category { font-family: var(--font-jp); font-size: 16px; font-weight: 500; color: var(--color-text); margin: 0 0 8px; }
.case-study-page__title { font-family: var(--font-serif-jp); font-size: 32px; font-weight: 400; color: var(--color-text); margin: 0 0 32px; }
.case-study-page__compare { display: flex; gap: 8px; margin-bottom: 32px; }
.case-study-page__body { font-family: var(--font-jp); font-size: 16px; line-height: 2; color: var(--color-text); }
@media (max-width: 900px) {
	.case-study-page { padding: 40px 0 64px; }
	.case-study-page__title { font-size: 24px; }
	.case-study-page__compare { flex-direction: column; }
}

/* =========================================================
   お悩み詳細ページ（worry_detail, Figma node 782:1000）
========================================================= */
.worry-page { background: #fff; }

/* --- ページタイトルブロック（treatment-heroと同じ規格を流用） ------ */
.worry-hero { position: relative; background: linear-gradient(90deg, #eadeda 0%, #ddc3b8 100%); }
.worry-hero .container { position: relative; z-index: 1; }
.worry-hero__main { max-width: 560px; }
.worry-hero__photo { position: absolute; top: 0; right: 0; bottom: 0; }
.worry-hero__photo img, .worry-hero__photo .img-placeholder { height: 100%; width: auto; object-fit: contain; display: block; }
.worry-hero__eyebrow { font-family: var(--font-en); font-size: 16px; letter-spacing: .1em; color: var(--color-text-soft); margin: 0 0 13px; }
.worry-hero__breadcrumb { font-family: var(--font-jp); font-size: 16px; font-weight: 500; color: var(--color-text); margin: 0 0 33px; }
.worry-hero__title { font-family: var(--font-serif-jp); font-size: 36px; font-weight: 400; color: var(--color-text); margin: 0; }
@media (min-width: 901px) {
	.worry-hero { height: 400px; display: flex; align-items: center; }
	.worry-hero .container { width: 100%; }
}
@media (max-width: 900px) {
	/* Match the treatment detail page's mobile hero: text first, image
	   second. No forced aspect-ratio/object-fit here — the box just wraps
	   the image at its own natural ratio, so there's no fixed-ratio-vs-
	   image-ratio mismatch left to gap. */
	/* padding-bottom:0 — the photo (now last, order:2) sat flush against
	   the section's own bottom padding, showing as a band of the section's
	   pink background under the image. */
	.worry-hero { padding: 40px 0 0; display: flex; flex-direction: column; }
	.worry-hero__photo { position: static; width: auto; flex: none; margin-bottom: 0; order: 2; }
	.worry-hero .container { order: 1; width: 100%; margin-left: 0; margin-right: 0; padding-left: 24px; padding-right: 24px; }
	.worry-hero__photo img, .worry-hero__photo .img-placeholder { width: 100%; height: auto; }
	.worry-hero__main { max-width: none; margin-bottom: 24px; }
	.worry-hero__title { font-size: 26px; }
}

/* --- セクション1：自由記述（画像＋本文） ------------------------- */
.worry-intro { background: var(--color-bg-cream); padding: 56px 0; }
.worry-intro__row { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.worry-intro__heading { font-family: var(--font-serif-jp); font-size: 24px; font-weight: 400; color: var(--color-text); margin: 0 0 30px; }
.worry-intro__body { font-family: var(--font-jp); font-size: 16px; line-height: 1.9; color: var(--color-text-soft); }
.worry-intro__body p { margin: 0 0 1.9em; }
.worry-intro__body p:last-child { margin-bottom: 0; }
.worry-intro__body img { max-width: 100%; height: auto; display: block; margin: 16px 0; }
.worry-intro__image { aspect-ratio: 4/3; }
.worry-intro__image img, .worry-intro__image .img-placeholder { width: 100%; height: 100%; object-fit: contain; display: block; }
@media (max-width: 900px) {
	.worry-intro__row { grid-template-columns: 1fr; gap: 24px; }
	.worry-intro__heading { font-size: 20px; }
}

/* --- 共通の見出し（小さいカテゴリー行＋メイン見出し、中央揃え＋下線） --- */
/* Divider is inset to the 1200px content width (container minus its own
   left/right padding) instead of running full viewport width. The ::before
   is a real block inside .container, so its width:100% resolves to the
   1200px content box, not the 1248px container; margin-bottom reproduces
   the section's usual top gap (96px desktop / 56px mobile, sitewide default). */
.worry-block { padding-top: 0; }
.worry-block .container::before {
	content: ''; display: block; width: 100%; border-top: 1px solid var(--color-border);
	margin-bottom: 96px;
}
@media (max-width: 900px) {
	.worry-block .container::before { margin-bottom: 56px; }
}
/* No divider directly under .worry-intro (which has no border of its own
   either) — used on the first .worry-block section that follows it. */
.worry-block--no-border .container::before { border-top: none; }
.worry-faq-section { background: var(--color-bg-cream); }
.worry-block__eyebrow { font-family: var(--font-serif-jp); font-size: 24px; color: var(--color-text-soft); text-align: center; margin: 0; }
.worry-block__heading {
	font-family: var(--font-serif-jp); font-size: 36px; font-weight: 400; color: var(--color-text);
	text-align: center; margin: 14px 0 40px; position: relative; padding-bottom: 20px;
}
.worry-block__heading::after {
	content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
	width: 40px; height: 2px; background: var(--color-primary);
}

/* --- セクション2：人気施術ランキング ------------------------------ */
.worry-ranking-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 70px; }
.worry-ranking-card { display: block; position: relative; }
.worry-ranking-card__image { position: relative; display: block; aspect-ratio: 580/300; overflow: hidden; }
.worry-ranking-card__image img, .worry-ranking-card__image .img-placeholder { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Badge sits above the photo (not overlapping it) — measured from Figma:
   the crown's bottom edge sits ~8px above the photo's top edge. */
.worry-ranking-card__badge { position: absolute; top: -35px; left: -30px; z-index: 1; width: 60px; height: auto; display: block; }
.worry-ranking-card__badge img { width: 100%; height: auto; display: block; }
.worry-ranking-card__title { display: block; font-family: var(--font-jp); font-size: 16px; font-weight: 500; color: var(--color-text); margin: 12px 0 0; }

/* --- セクション3：おすすめの施術紹介 ------------------------------- */
.worry-recommend-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: stretch; }
.worry-recommend-card { display: flex; flex-direction: column; }
/* aspect-ratio measured directly from Figma (580x300 card at 1200px container) */
.worry-recommend-card__image { display: block; aspect-ratio: 580/300; overflow: hidden; margin-bottom: 18px; }
.worry-recommend-card__image img, .worry-recommend-card__image .img-placeholder { width: 100%; height: 100%; object-fit: cover; display: block; }
.worry-recommend-card__category { display: block; font-family: var(--font-jp); font-size: 16px; font-weight: 700; color: var(--color-text); margin: 0 0 15px; }
.worry-recommend-card__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 32px; }
.worry-recommend-card__title { font-family: var(--font-serif-jp); font-size: 20px; font-weight: 500; color: var(--color-text); }
.worry-recommend-card__price { display: flex; align-items: center; gap: 12px; flex: none; }
.worry-recommend-card__price-tag {
	display: flex; align-items: center; justify-content: center; text-align: center;
	font-family: var(--font-jp); font-size: 16px; font-weight: 500; color: #fff; background: var(--color-primary);
	min-width: 76px; height: 40px; padding: 0 8px; border-radius: 4px; line-height: 1.3;
}
.worry-recommend-card__price-value { font-family: var(--font-en); font-size: 22px; color: var(--color-primary-deep); white-space: nowrap; }
.worry-recommend-card__btn { display: block; width: 100%; text-align: center; margin-top: auto; }
@media (max-width: 900px) {
	.worry-ranking-grid { grid-template-columns: 1fr; gap: 56px; }
	/* The crown badge sits at left:-30px (measured for the 3-column desktop
	   grid, where there's always a gutter to its left) — on the single-
	   column mobile layout that same offset pushes it past the container's
	   own edge. Narrow the card by 30px on each side (auto margins center
	   it) so the badge's -30px still lands inside the content width, and
	   the card reads as centered rather than just shifted right. */
	.worry-ranking-card { width: calc(100% - 60px); margin: 0 auto; }
	.worry-recommend-grid { grid-template-columns: 1fr; gap: 24px; }
	.worry-block__heading { font-size: 22px; }
	.worry-block__eyebrow { font-size: 18px; }
}

/* =========================================================
   CASE LIST page (症例一覧) — /case-list/
   Section 1 (PICK UP) reuses .case-section/.case-tab/.case-grid/.case-card
   as-is (see front-page.php CASE section). These are the additions
   specific to this page's own search block, result cards, and pager.
========================================================= */
/* Search block: 4 filter selects in one row instead of price-search's 2 */
.price-search__row--4col { grid-template-columns: repeat(4, 1fr); }
/* A bare inline-flex button inside a <p> sits on the text baseline, so its
   56px height pokes upward past the paragraph's own (near-zero) line box
   and overlaps the row above it. A flex container sizes to its item
   instead, so the button's full height is actually accounted for. */
.price-search__actions { display: flex; justify-content: center; margin-top: 16px; }
.price-search__button--standalone { height: 56px; }

/* This page's search form isn't wrapped in .price-search-section (which
   is what supplies the gap below it on price.php/treatment-menu.php), so
   give the form itself the matching bottom margin instead. */
.case-list-section .price-search { margin-bottom: 64px; }

/* Result cards reuse .treatment-case-card (single-treatment_menu.php's
   症例写真 grid) but swap its border for a flat background fill. */
.treatment-case-card--panel { border: none; background: #fdfbf9; }

.case-list-section__heading { font-family: var(--font-serif-jp); font-size: 32px; font-weight: 400; color: var(--color-text); text-align: center; margin: 0 0 40px; }
.case-list-section__empty { text-align: center; color: var(--color-text-soft); font-size: 14px; padding: 40px 0; }

/* Shown in place of a listing section's cards/slider when its post type
   has no published entries at all yet (症例／お知らせ／コラム／動画) —
   front-page.php, page-case-list.php, archive-column_post.php. */
.section-empty-notice { text-align: center; color: var(--color-text-soft); font-size: 20px; padding: 40px 0; }
/* .bg-column-gradient (コラム section) sets a dark background with white
   body text — the muted color above would be unreadable there. */
.bg-column-gradient .section-empty-notice { color: rgba(255, 255, 255, .8); }

.case-pagination { margin-top: 48px; }
.case-pagination ul.page-numbers { list-style: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin: 0; padding: 0; }
.case-pagination .page-numbers li { display: flex; }
.case-pagination a.page-numbers, .case-pagination span.page-numbers {
	display: flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: 50%;
	font-family: var(--font-serif-jp); font-size: 16px; color: var(--color-text);
	background: #fff; border: 1px solid var(--color-border);
	transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}
.case-pagination a.page-numbers:hover { border-color: var(--color-primary); color: var(--color-primary); }
.case-pagination span.page-numbers.current { background: var(--color-text); border-color: var(--color-text); color: #fff; }
.case-pagination .page-numbers.dots { border: none; background: none; width: auto; }
.case-pagination a.page-numbers.prev, .case-pagination a.page-numbers.next { border: none; background: none; }
.case-pagination a.page-numbers.prev svg, .case-pagination a.page-numbers.next svg { width: 14px; height: 14px; }

@media (max-width: 900px) {
	/* .treatment-case-grid already drops to 2 columns at this breakpoint
	   (see single-treatment_menu.php's 症例写真 grid rule above). */
	.price-search__row--4col { grid-template-columns: 1fr 1fr; }
	.case-list-section .price-search { margin-bottom: 40px; }
}
@media (max-width: 600px) {
	.price-search__row--4col { grid-template-columns: 1fr; }
	.case-pagination a.page-numbers, .case-pagination span.page-numbers { width: 34px; height: 34px; font-size: 14px; }
	.treatment-case-grid { grid-template-columns: 1fr; }
	.treatment-type-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   CASE DETAIL page (症例詳細) — single-case_study.php
   Header hero reuses .price-hero (case-list.php); related-cases grid
   at the bottom reuses .treatment-case-card--panel (case-list.php).
   These are the additions specific to the article body in between.
========================================================= */
.case-detail__head { text-align: left; }
/* The generic CTA row reuses .treatment-cta__buttons (shared with
   single-treatment_menu.php), which has no margin of its own — there it
   sits right under a section heading that already supplies the gap. Here
   it follows straight after the doctor-comment box, so give it one. */
.case-detail-content .treatment-cta__buttons { margin-top: 40px; }
.case-detail__title { font-family: var(--font-serif-jp); font-size: 32px; font-weight: 400; color: var(--color-text); margin: 0 0 24px; }
@media (max-width: 900px) {
	.case-detail__title { font-size: 24px; }
}
.case-detail__badges { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
.case-detail__badge {
	display: inline-flex; align-items: center; justify-content: center; padding: 6px 10px;
	background: var(--color-primary); color: #fff; font-family: var(--font-jp); font-size: 12px; font-weight: 500;
}

/* Gallery: featured image + any other images attached to the post.
   Single image → plain <img>; 2+ → Swiper (see .case-detail-slider__swiper
   in main.js), both capped at the same 400px box. */
.case-detail__gallery { max-width: 400px; margin: 0 auto 64px; }
.case-detail__gallery-single { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.case-detail-slider__swiper .swiper-slide img { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.case-detail-slider .swiper-pagination { position: relative; margin-top: 16px; }
.case-detail-slider .swiper-pagination-bullet-active { background: var(--color-primary-dark); }

.case-detail__compare { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 64px; }
.case-detail__compare-item { flex: 0 0 480px; min-width: 0; }
.case-detail__compare-arrow { flex: 0 0 20px; display: flex; align-items: center; justify-content: center; color: var(--color-primary); }
.case-detail__compare-arrow svg { width: 20px; height: 20px; }
.case-detail__compare-label { background: var(--color-primary); color: #fff; font-family: var(--font-serif-jp); font-size: 20px; text-align: center; margin: 0; padding: 10px; }
.case-detail__compare-image { display: block; aspect-ratio: 480/242; overflow: hidden; }
.case-detail__compare-image img, .case-detail__compare-image .img-placeholder { width: 100%; height: 100%; object-fit: cover; display: block; }

.case-detail__info { background: rgba(255,255,255,0.6); padding: 40px; margin: 0 0 40px; }
.case-detail__info-table { width: 100%; border-collapse: collapse; }
.case-detail__info-table th, .case-detail__info-table td { text-align: left; padding: 16px 0; border-bottom: 1px solid var(--color-border); font-family: var(--font-jp); font-size: 16px; font-weight: 400; }
.case-detail__info-table th { width: 120px; color: var(--color-primary); font-weight: 500; white-space: nowrap; }
.case-detail__info-table td { color: var(--color-lead); }

.case-detail__body { font-family: var(--font-serif-jp); font-size: 16px; line-height: 1.6875; color: var(--color-lead); margin: 0 0 40px; }
.case-detail__body p { margin: 0 0 1.6em; }
.case-detail__body p:last-child { margin-bottom: 0; }
/* The sitewide reset zeroes h1-h4's margin and trims their line box to
   the glyphs' own cap-height (see text-box-trim in the Base/Reset block
   up top) — fine for the site's own hand-built headings, which always
   supply their own spacing, but WYSIWYG article content's h2/h3/h4 had
   none at all and rendered flush against the text right after them.
   The cap-height trim itself is also wrong here: it shrinks the box to
   just the glyph ink (~12px for a 16-25px heading), so kanji strokes and
   descenders that extend past cap-height/baseline render outside their
   own box and read as clipped — switch these back to normal font-metric
   line boxes, matching .column-toc__item below for the same reason. */
.case-detail__body h2, .case-detail__body h3, .case-detail__body h4 {
	font-family: var(--font-serif-jp); font-weight: 400; line-height: 1.5; color: var(--color-text);
	text-box-trim: none; text-box-edge: auto; -webkit-text-box-trim: none; -webkit-text-box-edge: auto;
}
/* Same left-border treatment as .price-treatment__heading (price.php). */
.case-detail__body h2 { font-size: 24px; margin: 56px 0 24px; padding: 4px 0 4px 16px; border-left: 3px solid var(--color-primary); }
.case-detail__body h3 { font-size: 20px; margin: 40px 0 20px; padding: 12px 16px; background: #d3c3be; }
.case-detail__body h4 { font-size: 18px; margin: 32px 0 16px; }
.case-detail__body h2:first-child, .case-detail__body h3:first-child, .case-detail__body h4:first-child { margin-top: 0; }

.case-detail__doctor { display: flex; align-items: center; gap: 20px; background: #eae5de; padding: 32px; }
.case-detail__doctor-photo { flex: none; display: block; width: 140px; height: 140px; border-radius: 50%; overflow: hidden; }
.case-detail__doctor-photo img, .case-detail__doctor-photo .img-placeholder { width: 100%; height: 100%; object-fit: cover; display: block; }
.case-detail__doctor-body { flex: 1; min-width: 0; }
.case-detail__doctor-heading { display: flex; align-items: center; gap: 8px; font-family: var(--font-jp); font-size: 20px; font-weight: 500; color: var(--color-text); margin: 0 0 12px; }
.case-detail__doctor-dot { flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--color-primary); }
.case-detail__doctor-text { font-family: var(--font-jp); font-size: 14px; line-height: 1.786; color: var(--color-lead); margin: 0; }

.case-detail__divider { border-top: 1px solid var(--color-border); margin: 40px 0; }
.case-detail__nav-cta { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 24px; }
.case-detail__nav-btn { width: 380px; font-size: 16px; font-weight: 500; }

/* .btn--outline uses a neutral border (var(--color-border)); this page's
   secondary nav buttons need an accent-colored border/text instead. */
.btn--outline-accent { background: #fff; color: var(--color-primary); border-color: var(--color-primary); }

/* "同じデザインの症例一覧" per spec — reuses .treatment-case-card--panel,
   just on a white section background instead of the page's cream. */
.case-detail__related { background: #fff; }

@media (max-width: 900px) {
	.case-detail__compare { flex-direction: column; gap: 16px; }
	.case-detail__compare-item { flex: none; width: 100%; }
	.case-detail__compare-arrow { transform: rotate(90deg); }
	.case-detail__doctor { flex-direction: column; text-align: center; }
	.case-detail__doctor-heading { justify-content: center; }
	.case-detail__doctor-text { text-align: left; }
	.case-detail__nav-btn { width: 100%; max-width: 380px; }
	.case-detail__nav-cta { gap: 10px; }
}
@media (max-width: 600px) {
	.case-detail__info { padding: 24px; }
	.case-detail__doctor { padding: 24px; }
}

/* =========================================================
   WORRIES LIST page (お悩み一覧) — page-worries.php
   The repeated per-category blocks below the accordion reuse existing
   components verbatim: .menu-panel__banner--photo-only, .menu-panel__list
   / .menu-item (TOP page WORRIES tabs) and .price-category__divider
   (price page). Only the jump-link accordion pills are new.
========================================================= */
.worries-accordion { display: flex; flex-direction: column; gap: 16px; }
.worries-accordion__btn {
	display: flex; align-items: center; justify-content: space-between;
	background: #fff; border: 3px solid var(--color-primary); border-radius: 10px;
	padding: 10px 20px; text-decoration: none; transition: opacity var(--transition-base);
}
.worries-accordion__btn:hover { opacity: .75; }
.worries-accordion__left { display: flex; align-items: center; gap: 16px; min-width: 0; }
.worries-accordion__photo { display: block; flex: none; width: 45px; height: 45px; border-radius: 50%; overflow: hidden; }
.worries-accordion__photo img, .worries-accordion__photo .img-placeholder { width: 100%; height: 100%; object-fit: cover; display: block; }
.worries-accordion__name { font-family: var(--font-jp); font-size: 20px; font-weight: 500; letter-spacing: 2.16px; color: var(--color-lead); }
.worries-accordion__arrow {
	display: flex; align-items: center; justify-content: center; flex: none;
	width: 30px; height: 30px; border-radius: 50%; background: var(--color-primary); color: #fff; transform: rotate(90deg);
}
.worries-accordion__arrow svg { width: 15px; height: 15px; }

/* Gap before the first block comes from .worries-accordion-section's own
   (default .section) bottom padding — same fix as page-price.php's
   .price-search-section, chosen for the same reason: it's the one
   element that's never hidden/skipped, so the gap holds regardless of
   which categories end up with items. Between blocks, each one's own
   divider (margin-bottom) supplies the gap, and .worries-category itself
   carries no padding — except the last block, which has no divider
   after it and needs its own closing padding. */
.worries-category { padding: 0; }
.worries-category:last-of-type { padding-bottom: 96px; }
/* .price-category__divider's own margin-top is 0 — on price.php/
   treatment-menu.php that's fine because the grid just above it
   (.price-category__grid) supplies the gap via its own margin-bottom.
   This page's grid is .menu-panel__list instead, which has none, so the
   divider sat flush against it. Give the divider its own top gap here. */
.worries-category .price-category__divider { margin-top: 64px; }

@media (max-width: 900px) {
	.worries-accordion__name { font-size: 16px; line-height: 1.3; letter-spacing: 1px; }
	.worries-accordion__left { gap: 12px; }
	.worries-accordion__btn { padding: 10px 16px; }
	.worries-accordion__arrow { width: 25px; height: 25px; }
	.worries-accordion__arrow svg { width: 13px; height: 13px; }
	.worries-category:last-of-type { padding-bottom: 56px; }
	.worries-category .price-category__divider { margin-top: 32px; }
}

/* =========================================================
   MONITOR page (モニター募集) — page-monitor.php
   Section headings reuse bloom_clinic_section_heading(); FAQ reuses the
   .accordion component from single-treatment_menu.php; RECRUIT reuses
   page-price.php's .price-category__accordion / .price-table verbatim.
   These are the page-specific additions only.
========================================================= */
/* Lets the shared .top-bg-layer (see initTopBgLayer() in main.js) show
   through, same as .case-section elsewhere. */
.monitor-intro { background: transparent; }
.monitor-intro__body { font-family: var(--font-serif-jp); font-size: 16px; line-height: 1.6875; color: var(--color-lead); margin: 0 0 32px; }
/* Figma stacks the 2 checklist items in a single column with a bare
   (no fill/outline) look and a larger 24px check icon, unlike the
   2-column filled variant used on the treatment detail page. */
.monitor-intro__checklist { grid-template-columns: 1fr; gap: 12px; }
.monitor-intro__checklist .treatment-checklist__item { padding: 0; }
.monitor-intro__checklist .treatment-checklist__item svg { width: 24px; height: 24px; }

.monitor-condition { background: #ede6de; }
.monitor-condition__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.monitor-condition__card { background: #fff; border-radius: 16px; padding: 40px 32px; text-align: center; }
.monitor-condition__number { font-family: var(--font-en); font-size: 40px; color: var(--color-primary); margin: 0 0 16px; }
.monitor-condition__text { font-family: var(--font-serif-jp); font-size: 16px; line-height: 1.6875; color: var(--color-lead); max-width: 480px; margin: 0 auto; text-align: left; }

.monitor-recruit { background: #fff; }
.monitor-recruit__note { text-align: center; font-family: var(--font-jp); font-size: 16px; color: var(--color-lead); margin: 32px 0 0; }

@media (max-width: 900px) {
	.monitor-condition__grid { grid-template-columns: 1fr; }
	.monitor-condition__card { padding: 32px 24px; }
}

/* =========================================================
   COLUMN DETAIL page (コラム詳細) — single-column_post.php
========================================================= */
.column-detail__meta { margin: 0 0 24px; }
.column-detail__date { font-family: var(--font-jp); font-weight: 300; font-size: 16px; color: var(--color-text); margin: 0 0 12px; }
.column-detail__cat {
	display: inline-flex; align-items: center; justify-content: center; padding: 6px 10px; margin-bottom: 20px;
	background: var(--color-primary); color: #fff; font-family: var(--font-jp); font-size: 14px; font-weight: 500;
}
.column-detail__title { font-family: var(--font-serif-jp); font-size: 24px; font-weight: 400; color: var(--color-text); line-height: 1.4; margin: 0; }

.column-detail__thumb { margin: 40px 0; }
.column-detail__thumb img { display: block; width: 100%; aspect-ratio: 1200/635; object-fit: cover; }
.column-detail__excerpt { font-family: var(--font-jp); font-size: 16px; color: var(--color-text); line-height: 1.6; margin: 0 0 40px; }

/* =========================================================
   NEWS DETAIL page (ニュース詳細) — single-news_post.php
========================================================= */
.news-detail__meta { margin: 0 0 24px; }
.news-detail__date { font-family: var(--font-jp); font-weight: 300; font-size: 16px; color: var(--color-text); margin: 0 0 12px; }
.news-detail__title { font-family: var(--font-serif-jp); font-size: 24px; font-weight: 400; color: var(--color-text); line-height: 1.4; margin: 0; }

.column-toc-wrap { margin: 0 0 64px; }
.column-toc { background: #fff; border: 2px solid var(--color-primary); border-radius: 16px; }
.column-toc__inner { padding: 24px 40px; }
.column-toc__heading { font-family: var(--font-jp); font-size: 24px; font-weight: 500; color: var(--color-primary); text-align: center; margin: 0 0 16px; }
.column-toc__divider { border-top: 1px solid var(--color-border); margin: 0 0 16px; }
.column-toc__list { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow: hidden; transition: max-height .35s ease; }
.column-toc.is-expanded .column-toc__list { max-height: 2000px; }
.column-toc__item { margin: 0 0 16px; }
.column-toc__item:last-child { margin-bottom: 0; }
/* text-box-trim (see Base/Reset up top) shrinks this <a>'s box to just
   the glyph ink between cap-height and baseline — with no room left for
   kanji strokes/descenders that extend past that, they render outside
   the trimmed box and look clipped. Restore normal font-metric sizing
   so the line-height below is what actually reserves the row's space. */
.column-toc__item > a {
	display: block; font-family: var(--font-jp); font-size: 16px; line-height: 1.6; color: var(--color-text); text-decoration: none;
	text-box-trim: none; text-box-edge: auto; -webkit-text-box-trim: none; -webkit-text-box-edge: auto;
}
.column-toc__item > a:hover { color: var(--color-primary); }
.column-toc__sublist { list-style: none; margin: 10px 0 0; padding: 0 0 0 28px; }
.column-toc__sublist .column-toc__item { margin: 0 0 10px; }
.column-toc__sublist .column-toc__item:last-child { margin-bottom: 0; }
.column-toc__sublist .column-toc__item > a { font-size: 15px; line-height: 1.6; color: var(--color-text-soft); }

.column-toc__more {
	display: flex; align-items: center; justify-content: center; gap: 16px; width: 100%;
	background: rgba(255,255,255,.8); border: 2px solid var(--color-primary); border-top: none; border-radius: 0 0 16px 16px;
	padding: 20px; font-family: var(--font-jp); font-size: 24px; font-weight: 500; letter-spacing: 2px; color: var(--color-lead);
	cursor: pointer;
}
.column-toc__more svg { width: 21px; height: 21px; flex: none; color: var(--color-primary); transform: rotate(90deg); }
.column-toc__more.is-hidden { display: none; }

@media (max-width: 900px) {
	.column-detail__title { font-size: 20px; }
	.column-toc__inner { padding: 20px 24px; }
	.column-toc__heading { font-size: 20px; }
	.column-toc__more { font-size: 18px; padding: 16px; }
}

/* =========================================================
   CLINIC page (クリニック紹介) — page-clinic.php
   DOCTOR/ACCESS sections reuse .doctor-profile / .access-* verbatim
   (front-page.php) under differently-named section wrappers so this
   page doesn't trip the front page's .doctor-section top-photo/white-bg
   JS (initDoctorWhiteBg() hunts for that exact class). COMPLIANCE/FLOW/
   ROUTE below are new to this page.
========================================================= */
.section-heading--size-64 .section-heading__en { font-size: 64px; }

/* --- COMPLIANCE (Purpose / Mission / Vision / Value) -----------------
   Layout modeled on shinmi-shika.com/clinic's MISSION/VISION treatment:
   white cards stacked on a photo, floating full-width inside a parallax
   band — the section heading above sits outside that band on the page's
   plain background, per spec, so only .clinic-compliance__parallax (not
   the whole section) carries the photo. */
/* top-bg-target's own bottom margin (.section-heading's 48px) collapses
   straight through this plain, unpadded wrapper by default, so
   initTopBgLayer()'s getBoundingClientRect().bottom read stopped 48px
   short of where the heading visually ends. flow-root gives the wrapper a
   block formatting context, which contains that margin inside its own box
   instead of letting it collapse out — the wash now measures the full
   heading-plus-margin height. Next sibling's position is unaffected either
   way, so this doesn't shift anything else on the page. */
.clinic-compliance > .container.top-bg-target { display: flow-root; }
/* clip-path (not just overflow:hidden) is required here: .parallax-bg is
   position:fixed, so its containing block is the viewport unless an
   ancestor establishes one via transform/filter/perspective/clip-path —
   overflow:hidden alone does NOT clip a fixed descendant. Without this,
   the fixed layer rendered at full viewport size whenever this section
   scrolled into the paint order, painting over the hero and the
   COMPLIANCE heading above it. .price-hero__photo uses the same
   clip-path:inset(0) trick for the same reason. */
.clinic-compliance__parallax { position: relative; overflow: hidden; isolation: isolate; clip-path: inset(0); padding: 96px 0; background: var(--color-bg-taupe); }
.clinic-compliance__parallax .parallax-bg { z-index: -1; }
.clinic-compliance__parallax .container { max-width: 1200px; position: relative; }
.clinic-compliance__pillars { display: flex; flex-direction: column; gap: 40px; }
/* outline + negative outline-offset (not border) so the line sits inset
   from the card's actual edge, like the reference site's framed look —
   outline doesn't affect box size/layout the way a border would. */
.clinic-compliance__pillar { background: #fff; padding: 64px 48px 72px; box-shadow: 0 1px 2px rgba(60,50,30,.05), 0 8px 24px rgba(90,75,45,.08); outline: 1px solid #1a1311; outline-offset: -16px; }
.clinic-compliance__pillar-label { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; margin: 0 0 28px; padding-bottom: 32px; border-bottom: 1px solid var(--color-border); }
.clinic-compliance__pillar-label .en { font-family: var(--font-en); font-size: 48px; font-weight: 400; line-height: 1; letter-spacing: .03em; background: linear-gradient(135deg, #eab8a8, #c9a063); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; opacity: .55; }
.clinic-compliance__pillar-label .en .first { opacity: 1; }
.clinic-compliance__pillar-label .ja { font-family: var(--font-serif-jp); font-size: 26px; font-weight: 400; line-height: 1.7; color: var(--color-text); }
.clinic-compliance__pillar-body { font-family: var(--font-serif-jp); font-size: 18px; line-height: 1.95; color: var(--color-lead); text-align: left; max-width: 560px; margin: 0 auto; }

.clinic-compliance__pillar--value { padding-bottom: 56px; }
.clinic-compliance__values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 32px; }
.clinic-compliance__value { }
.clinic-compliance__value h3 { font-family: var(--font-serif-jp); font-size: 20px; font-weight: 500; color: #ffffff; margin: 0 0 10px; text-align: center; margin-bottom: 20px; background: #BE9C91; padding: 16px 0; }
.clinic-compliance__value p { font-family: var(--font-jp); font-size: 16px; line-height: 1.8; color: var(--color-lead); margin: 0; }
@media (max-width: 900px) {
	.section-heading--size-64 .section-heading__en { font-size: 40px; }
	.clinic-compliance__parallax { padding: 56px 0; }
	.clinic-compliance__pillars { gap: 24px; }
	/* padding and outline-offset both scaled down roughly in step with the
	   card's smaller size on mobile (matches the reference site, which
	   halves both between its desktop and phone breakpoints) — at the
	   unscaled desktop values the inset frame would sit almost flush
	   against the card's own edge once the side padding shrinks. */
	.clinic-compliance__pillar { padding: 32px 40px 40px; outline-offset: -10px; }
	.clinic-compliance__pillar-label .en { font-size: 32px; }
	.clinic-compliance__pillar-label .ja { font-size: 20px; }
	.clinic-compliance__pillar-label { padding-bottom: 20px; }
	.clinic-compliance__pillar-body { font-size: 15px; }
}
@media (max-width: 600px) {
	.clinic-compliance__values-grid { grid-template-columns: 1fr; }
}

/* --- FLOW (施術までの流れ) ------------------------------------------ */
.clinic-flow__list { display: flex; flex-direction: column; }
.clinic-flow__step { display: flex; align-items: center; gap: 40px; background: #fff; padding: 0; }
.clinic-flow__photo { flex: 0 0 380px; width: 380px; aspect-ratio: 380/250; overflow: hidden; }
.clinic-flow__photo img, .clinic-flow__photo .img-placeholder { width: 100%; height: 100%; object-fit: cover; display: block; }
.clinic-flow__content { flex: 1; min-width: 0; }
.clinic-flow__step-tag { display: flex; align-items: baseline; gap: 8px; font-family: var(--font-en); color: var(--color-primary); }
.clinic-flow__step-tag-label { font-size: 20px; }
.clinic-flow__step-tag-num { font-size: 40px; }
.clinic-flow__heading { font-family: var(--font-serif-jp); font-size: 22px; font-weight: 400; color: var(--color-text); margin: 24px 0 20px; }
.clinic-flow__body { font-family: var(--font-serif-jp); font-size: 16px; line-height: 1.6875; color: var(--color-lead); margin: 0; }
.clinic-flow__step-cta { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.clinic-flow__arrow { display: flex; justify-content: center; padding: 16px 0; color: var(--color-primary); }
.clinic-flow__arrow svg { width: 62px; height: 18px; }

/* Payment info follows STEP04's card as its own unlabeled block (not a
   numbered step) — matches Figma exactly: a plain accent-beige panel with
   no STEP tag, sitting directly under STEP04 with no arrow between them. */
.clinic-flow__payment-block { background: #ede6de; padding: 40px; }
.clinic-flow__payment { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.clinic-flow__payment-heading { font-family: var(--font-serif-jp); font-size: 16px; color: var(--color-text); margin: 0 0 8px; }
.clinic-flow__payment-list { font-family: var(--font-serif-jp); font-size: 16px; line-height: 1.6875; color: var(--color-lead); margin: 0 0 8px; list-style: disc; padding-left: 24px; }
.clinic-flow__payment-note { font-family: var(--font-serif-jp); font-size: 14px; line-height: 1.6; color: var(--color-text-soft); margin: 0; }
.clinic-flow__payment-cards { display: block; width: 100%; height: auto; margin-top: 12px; }
/* text-box-trim's collapsed line-box height (see Base/Reset above) makes
   wrapped multi-line <li> text overlap the next line/item — same bug
   fixed elsewhere on this site, same override. */
.clinic-flow__payment-list li,
.clinic-flow__payment-note,
.clinic-flow__payment-heading {
	text-box-trim: none; text-box-edge: auto;
	-webkit-text-box-trim: none; -webkit-text-box-edge: auto;
}
@media (max-width: 900px) {
	.clinic-flow__step { flex-direction: column; align-items: flex-start; padding: 24px; gap: 20px; }
	.clinic-flow__photo { flex: none; width: 100%; height: 200px; aspect-ratio: auto; }
	.clinic-flow__step-tag-num { font-size: 30px; }
	.clinic-flow__step-cta { flex-direction: column; align-items: stretch; }
	.clinic-flow__step-cta .btn { width: 100%; }
	.clinic-flow__payment-block { padding: 24px; }
	.clinic-flow__payment { grid-template-columns: 1fr; gap: 24px; }
}

/* --- DOCTOR (this page reuses .doctor-profile verbatim from
   front-page.php; a plain wrapper here, no top-photo/white-bg like the
   homepage's .doctor-section) ---------------------------------------- */
.clinic-doctor-section { background: #fff; }
.clinic-doctor-section .doctor-profile__greeting { margin-bottom: 40px; }
.clinic-doctor-section .doctor-profile__main { align-items: center; }
.doctor-profile__promise-divider { border-top: 1px solid #e0dbd6; margin: 0 0 64px; }

/* --- ACCESS extension: クリニックまでの道のり ------------------------ */
.clinic-route { padding-top: 80px; }
.clinic-route__divider { border-top: 1px solid var(--color-border); margin: 0 0 40px; }
.clinic-route__heading { font-family: var(--font-serif-jp); font-size: 32px; font-weight: 400; color: var(--color-text); text-align: center; margin: 0 0 40px; }
/* Swiper clips slide content flush with its own box (overflow:hidden) —
   .clinic-route__number's negative top offset poked above that edge and
   got cut off. padding-top pushes the clip boundary up instead, so the
   number has room to sit above the slide without being clipped. */
.clinic-route__swiper { padding-top: 16px; padding-bottom: 8px; }
.clinic-route__swiper .swiper-wrapper { display: flex; }
.clinic-route__item { position: relative; height: auto; }
.clinic-route__number { position: absolute; top: -11px; left: 20px; margin: 0; z-index: 1; font-family: var(--font-en); font-size: 30px; color: var(--color-primary); }
.clinic-route__photo { display: block; aspect-ratio: 380/200; overflow: hidden; margin-bottom: 16px; background: var(--color-bg-taupe); }
.clinic-route__photo img, .clinic-route__photo .img-placeholder { width: 100%; height: 100%; object-fit: cover; display: block; }
.clinic-route__text { font-family: var(--font-serif-jp); font-size: 16px; line-height: 1.6875; color: var(--color-lead); margin: 0; }
.clinic-route__swiper .swiper-pagination { position: relative; margin-top: 24px; }
.clinic-route__swiper .swiper-pagination-bullet-active { background: var(--color-primary-dark); }
@media (max-width: 900px) {
	.clinic-route__heading { font-size: 24px; }
}
/* PC: the slider is disabled in JS (all 6 steps should show at once, not
   3-at-a-time behind pagination dots) — lay the slides out as a static
   wrapping grid instead of the swiper's single-row flex track. */
@media (min-width: 901px) {
	.clinic-route__swiper { overflow: visible; }
	.clinic-route__swiper .swiper-wrapper { flex-wrap: wrap; gap: 30px; }
	.clinic-route__swiper .swiper-slide { width: calc((100% - 60px) / 3); }
	.clinic-route__swiper .swiper-pagination { display: none; }
}

/* =========================================================
   絞り込む bottom sheet (listing filter bar)
   Reuses each listing page's existing .price-search card as-is (same
   ids, same JS filtering already wired to it) — this only changes how
   it's presented on mobile: instead of sitting inline in the page
   (.price-search-section collapses to 0 padding since its only child
   is now out of flow), it slides up from the bottom as a sheet when
   initListingFilterSheet() (main.js) toggles .is-open, same open/close
   pattern as the site's other overlays. Placed at the very end of the
   file so it wins the cascade over every earlier .price-search /
   .price-search-section rule (base + the 782px/600px/case-list
   overrides above) without needing to fight their specificity.
========================================================= */
@media (max-width: 782px) {
	.price-search-section { padding: 0; }
	.listing-filter-sheet-veil {
		/* Above .mobile-sticky-cta (z-index: 150) so the sheet isn't
		   covered by the fixed LINE/カウンセリング/お悩み診断 bar — but
		   below .mobile-nav (200), the hamburger drawer. */
		position: fixed; inset: 0; z-index: 155;
		background: rgba(26, 19, 17, .4); opacity: 0; pointer-events: none;
		transition: opacity var(--transition-base);
	}
	.listing-filter-sheet-veil.is-visible { opacity: 1; pointer-events: auto; }
	.price-search {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 156;
		max-height: 82vh; overflow-y: auto;
		border-radius: 18px 18px 0 0;
		/* A flat 105% left a sliver peeking above the CTA bar on some
		   mobile browsers (address-bar collapse/expansion shifts the
		   viewport height after the transform's already computed) — a
		   fixed 40px on top of 100% guarantees it clears the bottom
		   edge fully regardless of that. */
		transform: translateY(calc(100% + 40px));
		transition: transform var(--transition-base);
		padding-bottom: calc(24px + env(safe-area-inset-bottom));
	}
	.price-search.is-open { transform: translateY(0); }
	.price-search__sheet-close {
		display: block; position: absolute; top: 8px; right: 8px; z-index: 1;
		width: 32px; height: 32px; border: none; background: none;
		font-size: 22px; line-height: 1; color: var(--color-text-soft); cursor: pointer;
	}
}

/* 2026-10-02: 施術の流れ（4ステップ以上）・種類と特徴の段組み調整 */
@media (min-width: 901px) {
	.treatment-flow--grid { display: grid; gap: 24px; }
	.treatment-flow--cols-2 { grid-template-columns: repeat(2, 1fr); }
	.treatment-flow--cols-3 { grid-template-columns: repeat(3, 1fr); }
	.treatment-flow--grid .treatment-flow__arrow { display: none; }
	.treatment-flow--grid .treatment-flow__top { margin-bottom: 24px; }
	.treatment-flow--grid .treatment-flow__heading { font-size: 18px; }
	.treatment-flow--grid .treatment-flow__body { font-size: 15px; line-height: 1.9; }
	.treatment-type-grid--cols-1 { grid-template-columns: 1fr; max-width: 640px; }
	.treatment-type-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
	.treatment-type-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
}
.treatment-type-card--text { background: var(--color-bg-cream); padding: 28px 24px; }
.treatment-type-card--text .treatment-type-card__heading { font-size: 18px; }
@media (max-width: 900px) {
	/* ヒーローの価格: 長い文言（「開院モニター募集中！」「〜(程度による)」等）が画面外にはみ出さないよう折り返す */
	.treatment-hero__price-group, .treatment-hero__price-value-wrap { flex-shrink: 1; min-width: 0; }
	.treatment-hero__price-value { white-space: normal; overflow-wrap: anywhere; }
	/* 比較表: 列数が多いと1列が極端に細くなるため、列幅の下限を設けて横スクロールさせる */
	.treatment-compare-table th, .treatment-compare-table td { min-width: 110px; }
	.treatment-compare-table th:first-child { min-width: 96px; }
}
/* 価格欄が「開院モニター募集中！」「要相談」などの文言の場合は金額用の大きな文字にしない */
.treatment-hero__price-value--text, .treatment-hero__price-value--monitor.treatment-hero__price-value--text { font-family: var(--font-serif-jp); font-size: 28px; }
@media (max-width: 900px) {
	.treatment-hero__price-value--text, .treatment-hero__price-value--monitor.treatment-hero__price-value--text { font-size: 17px; letter-spacing: 0; }
}

/* 2026-10-02: 種類と特徴（写真なしカード）を見出し・料金・評価・リストに分けたデザインに */
.treatment-type-card--text { display: flex; flex-direction: column; background: var(--color-bg-cream); padding: 36px 32px 32px; }
.treatment-type-card--text .treatment-type-card__heading { font-size: 22px; line-height: 1.4; margin: 0 0 18px; padding-bottom: 16px; border-bottom: 1px solid var(--color-primary); }
.type-card-prices { margin: 0 0 24px; display: grid; gap: 10px; }
.type-card-prices__row { display: flex; align-items: center; gap: 12px; margin: 0; }
.type-card-prices dt { flex: none; min-width: 92px; text-align: center; font-family: var(--font-jp); font-size: 12px; font-weight: 500; line-height: 1; color: #fff; background: #808080; padding: 6px 10px; }
.type-card-prices__row--monitor dt { background: #9e7e73; }
.type-card-prices dd { margin: 0; font-family: var(--font-jp); font-size: 17px; font-weight: 500; line-height: 1.4; color: var(--color-text); }
.type-card-prices__row--monitor dd { color: var(--color-primary-deep); }
.type-card-ratings { margin: 0 0 4px; background: #fff; padding: 8px 20px; }
.type-card-ratings__row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; margin: 0; }
.type-card-ratings__row + .type-card-ratings__row { border-top: 1px dashed var(--color-border); }
.type-card-ratings dt { font-family: var(--font-jp); font-size: 14px; color: var(--color-text); }
.type-card-ratings dd { margin: 0; font-size: 16px; letter-spacing: .12em; line-height: 1; white-space: nowrap; }
.type-card-ratings .is-on { color: var(--color-primary); }
.type-card-ratings .is-off { color: #ddd6d2; }
.type-card-label { font-family: var(--font-jp); font-size: 15px; font-weight: 600; color: var(--color-text); margin: 26px 0 12px; padding-left: 12px; border-left: 3px solid var(--color-primary); line-height: 1.3; }
.type-card-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.type-card-list li { position: relative; padding-left: 24px; font-family: var(--font-jp); font-size: 14px; line-height: 1.7; color: var(--color-text-soft); }
.type-card-list li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 11px; height: 6px; border-left: 2px solid var(--color-primary); border-bottom: 2px solid var(--color-primary); transform: rotate(-45deg); }
.type-card-desc { margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--color-border); font-family: var(--font-jp); font-size: 14px; line-height: 1.9; color: var(--color-text-soft); }
.type-card-desc + .type-card-desc { margin-top: 8px; padding-top: 0; border-top: 0; }
@media (max-width: 900px) {
	.treatment-type-card--text { padding: 28px 22px 24px; }
	.treatment-type-card--text .treatment-type-card__heading { font-size: 20px; }
}
/* サイト共通の text-box-trim で行間が詰まるため、カード内では通常の行間に戻す */
.treatment-type-card--text, .treatment-type-card--text * { text-box-trim: none; -webkit-text-box-trim: none; text-box-edge: auto; -webkit-text-box-edge: auto; }
.type-card-list { gap: 6px; }

/* 2026-10-02: 種類と特徴（イラスト付きの構造化カード） */
.treatment-type-card--has-photo .treatment-type-card__photo { margin: -36px -32px 24px; background: #fff; }
.treatment-type-card--has-photo .treatment-type-card__photo img { width: 100%; height: auto; display: block; }
@media (max-width: 900px) {
	.treatment-type-card--has-photo .treatment-type-card__photo { margin: -28px -22px 20px; }
}
.treatment-type-card__note { font-family: var(--font-jp); font-size: 13px; color: var(--color-text-soft); }

/* 2026-10-02: 医師のポイント */
.doctor-point { display: flex; align-items: flex-start; gap: 24px; margin: 48px auto 0; max-width: 960px; text-box-trim: none; -webkit-text-box-trim: none; }
.doctor-point * { text-box-trim: none; -webkit-text-box-trim: none; }
.doctor-point__profile { flex: none; width: 112px; text-align: center; }
.doctor-point__photo { width: 96px; height: 96px; margin: 0 auto 8px; border-radius: 50%; overflow: hidden; border: 3px solid #fff; box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.doctor-point__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }
.doctor-point__name { margin: 0; font-family: var(--font-serif-jp); font-size: 14px; line-height: 1.5; color: var(--color-text); }
.doctor-point__name span { display: block; font-size: 11px; color: var(--color-text-soft); }
.doctor-point__bubble { position: relative; flex: 1; background: var(--color-bg-cream); border: 1px solid #e3d9d4; padding: 22px 28px; }
.doctor-point__bubble::before { content: ""; position: absolute; left: -11px; top: 38px; width: 20px; height: 20px; background: var(--color-bg-cream); border-left: 1px solid #e3d9d4; border-bottom: 1px solid #e3d9d4; transform: rotate(45deg); }
.doctor-point__label { margin: 0 0 8px; font-family: var(--font-en); font-size: 13px; letter-spacing: .08em; color: var(--color-primary); }
.doctor-point__text { margin: 0; font-family: var(--font-jp); font-size: 15px; line-height: 1.9; color: var(--color-text); }
@media (max-width: 600px) {
	.doctor-point { gap: 14px; margin-top: 36px; }
	.doctor-point__profile { width: 72px; }
	.doctor-point__photo { width: 64px; height: 64px; }
	.doctor-point__name { font-size: 12px; }
	.doctor-point__bubble { padding: 16px 18px; }
	.doctor-point__bubble::before { top: 24px; }
	.doctor-point__text { font-size: 14px; }
}

/* 2026-10-02: 種類と特徴のタブ表示 */
.type-tabs__nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; margin-bottom: 0; }
.type-tabs__btn { appearance: none; border: 1px solid var(--color-primary); background: #fff; color: var(--color-primary); font-family: var(--font-serif-jp); font-size: 17px; line-height: 1.4; padding: 16px 12px; cursor: pointer; transition: background .2s, color .2s; }
.type-tabs__btn:hover { background: var(--color-bg-cream); }
.type-tabs__btn.is-active { background: var(--color-primary); color: #fff; }
.type-tabs .tabs__panel { display: none; }
.type-tabs .tabs__panel.is-active { display: grid; }
.type-tabs__panel { grid-template-columns: 1fr 1.15fr; gap: 0; background: var(--color-bg-cream); border: 1px solid var(--color-primary); border-top-width: 3px; margin-top: 12px; }
.type-tabs__photo { background: #fff; display: flex; align-items: center; justify-content: center; padding: 32px; }
.type-tabs__photo img { width: 100%; max-width: 482px; height: auto; display: block; }
.type-tabs__body { padding: 40px 44px; }
@media (max-width: 900px) {
	.type-tabs__nav { grid-template-columns: repeat(2, 1fr); }
	.type-tabs__btn { font-size: 15px; padding: 12px 8px; }
	.type-tabs .tabs__panel.is-active { display: block; }
	.type-tabs__photo { padding: 20px; }
	.type-tabs__body { padding: 28px 22px 24px; }
}

/* 2026-10-02: こだわり（画像付きブロック）をPCでは画像左・テキスト右の2カラムに */
@media (min-width: 901px) {
	.treatment-procedure--commitment .treatment-procedure__item--2col { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 48px; align-items: center; }
	.treatment-procedure--commitment .treatment-procedure__item--2col .treatment-procedure__photo { width: 100%; margin: 0; }
	.treatment-procedure--commitment .treatment-procedure__item--2col .treatment-procedure__body { line-height: 1.9; }
}

/* 2026-10-02: 種類と特徴（イラスト付き）を1種類ずつ2カラムで縦に並べる（タブ表示は廃止） */
.type-rows { display: grid; gap: 32px; }
.type-rows__item { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); background: var(--color-bg-cream); border: 1px solid #e3d9d4; }
.type-rows__photo { background: #fff; display: flex; align-items: center; justify-content: center; padding: 32px; }
.type-rows__photo img { width: 100%; max-width: 440px; height: auto; display: block; }
.type-rows__body { padding: 36px 44px; }
@media (max-width: 900px) {
	.type-rows { gap: 24px; }
	.type-rows__item { grid-template-columns: 1fr; }
	.type-rows__photo { padding: 20px; }
	.type-rows__body { padding: 28px 22px 24px; }
}

/* 2026-10-02: 手術の流れ（画像付き）もPCでは画像左・テキスト右の2カラムに */
@media (min-width: 901px) {
	.treatment-procedure--steps .treatment-procedure__item--2col { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 48px; align-items: center; }
	.treatment-procedure--steps .treatment-procedure__item--2col .treatment-procedure__photo { width: 100%; margin: 0; }
	.treatment-procedure--steps .treatment-procedure__item--2col .treatment-procedure__body { line-height: 1.9; }
}

/* 2026-10-02: 種類と特徴は「画像の下にテキスト」のカードを2カラムで並べる */
.type-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: stretch; }
.type-rows__item { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
.type-rows__photo { padding: 24px 32px; border-bottom: 1px solid #e3d9d4; }
.type-rows__photo img { max-width: 360px; }
.type-rows__body { padding: 32px 36px; }
@media (max-width: 900px) {
	.type-rows { grid-template-columns: 1fr; gap: 24px; }
	.type-rows__photo { padding: 20px; }
	.type-rows__body { padding: 28px 22px 24px; }
}

/* 2026-10-02: 種類と特徴カードの列数をカード数に合わせる（3枚なら3カラム） */
@media (min-width: 901px) {
	.type-rows--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
	.type-rows--cols-3 .type-rows__photo { padding: 20px 24px; }
	.type-rows--cols-3 .type-rows__body { padding: 28px 24px; }
	.type-rows--cols-3 .treatment-type-card__heading { font-size: 20px; }
	.type-rows--cols-3 .type-card-prices dt { min-width: 84px; }
	.type-rows--cols-3 .type-card-ratings { padding: 6px 16px; }
}

/* 2026-10-02: 選ばれる理由（院長に関する項目）に院長の写真 */
.treatment-reason-card { display: flex; flex-direction: column; }
.treatment-reason-card__doctor { margin-top: auto; padding-top: 20px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.treatment-reason-card__doctor img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: center 20%; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.treatment-reason-card__doctor span { font-family: var(--font-serif-jp); font-size: 14px; color: var(--color-text); }