/* Edgebase Components */
.button, .btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: var(--tap-min); min-width: var(--tap-min);
	padding: var(--space-sm) var(--space-lg);
	background: var(--color-brand); color: #fff; text-decoration: none;
	border: 0; border-radius: var(--radius); cursor: pointer;
}
.button:hover, .btn:hover { background: var(--color-link-hover); color: #fff; }

/* ナビ/リンク/ボタンのタップ確保 */
.primary-menu a { display: inline-flex; align-items: center; min-height: var(--tap-min); }

/* モバイルメニュートグル（表示/非表示の切替は layout.css 側） */
.menu-toggle {
	min-height: var(--tap-min);
	padding: var(--space-sm) var(--space-md);
	background: transparent; color: var(--color-text);
	border: 1px solid var(--color-border); border-radius: var(--radius);
	cursor: pointer;
}

/* カード */
.card {
	border: 1px solid var(--color-border); border-radius: var(--radius);
	overflow: hidden; background: var(--color-base);
}
.card__body { padding: var(--space-md); }

/* パンくず */
.breadcrumb { font-size: var(--fs-small); margin-bottom: var(--space-md); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; }
.breadcrumb li::after { content: "›"; margin-left: var(--space-xs); color: var(--color-text-muted); }
.breadcrumb li:last-child::after { content: ""; }

/* 目次 */
.toc {
	border: 1px solid var(--color-border); border-radius: var(--radius);
	padding: var(--space-md); margin-bottom: var(--space-lg); background: var(--color-surface);
}
.toc__title { font-weight: 700; margin-bottom: var(--space-sm); }
.toc ol { margin: 0; padding-left: var(--space-lg); }

/* 著者・監修者ボックス */
.author-box, .supervisor-box {
	display: flex; gap: var(--space-md); align-items: flex-start;
	border: 1px solid var(--color-border); border-radius: var(--radius);
	padding: var(--space-md); margin-block: var(--space-lg);
	background: var(--color-surface);
}
.author-box__avatar img, .supervisor-box__avatar img { border-radius: 50%; }
.supervisor-box__meta { font-size: var(--fs-small); color: var(--color-text-muted); }

/* =========================================================
   クリニック詳細（single-clinic）— SP
   ACF画像連携前のため、ロゴは固定ダミー画像を使用。
   ========================================================= */
.page-body { box-sizing: border-box; width: 100%; margin: 0 auto; }
.page-body * { box-sizing: border-box; }

.cassette-wrap {
	padding: var(--space-md) 20px 40px;
}
.c_clinic-cassette { display: flex; flex-direction: column; gap: var(--space-md); }

.page-title {
	margin: 0;
	font-family: var(--font-serif); font-weight: 700; font-size: 20px;
	color: var(--text_dark); line-height: 1.4;
}

/* 写真＋ロゴ。写真なしの場合はロゴを全面表示 */
.clinic-visual {
	display: grid; width: 100%; min-height: 124px;
	background: var(--bg_green); border-radius: 10px; overflow: hidden;
}
.clinic-visual.has-photo { grid-template-columns: 1fr 1fr; }
.clinic-visual.no-photo { grid-template-columns: 1fr; }
.clinic-visual__photo,
.clinic-visual__logo { min-width: 0; min-height: 124px; }
.clinic-visual__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.clinic-visual__logo {
	display: flex; align-items: center; justify-content: center;
	padding: var(--space-md); background: var(--bg_green);
}
.clinic-visual__logo img { display: block; width: min(100%, 150px); max-height: 84px; object-fit: contain; }
.clinic-visual.no-photo .clinic-visual__logo { min-height: 180px; }
.clinic-visual.no-photo .clinic-visual__logo img { width: min(70%, 220px); max-height: 120px; }

/* 住所・営業時間 */
.clinic-meta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.clinic-meta__item { display: flex; align-items: flex-start; gap: var(--space-xs); min-width: 0; }
.clinic-meta__icon {
	flex: 0 0 20px; width: 20px; height: 20px; margin-top: 1px;
	background-color: var(--green_sub);
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center; mask-position: center;
	-webkit-mask-size: contain; mask-size: contain;
}
.clinic-meta__item--area .clinic-meta__icon {
	-webkit-mask-image: url("../img/ico_area.svg");
	mask-image: url("../img/ico_area.svg");
}
.clinic-meta__item--time .clinic-meta__icon {
	-webkit-mask-image: url("../img/ico_time.svg");
	mask-image: url("../img/ico_time.svg");
}
.clinic-meta__text { min-width: 0; color: var(--text_body); font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.clinic-meta__text p { margin: 0; }

.clinic-detail { display: flex; flex-direction: column; gap: var(--space-sm); }

/* 施術chip（表示専用・非リンク） */
.treatment-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.treatment-chip {
	display: inline-flex; align-items: center;
	background: var(--chip_bg); color: var(--brand_purple);
	font-size: 13px; padding: 6px 12px; border-radius: 5px;
}

/* エリアPill（表示専用・非リンク） */
.area-list { display: flex; flex-wrap: wrap; gap: 5px; }
.area-pill {
	display: inline-flex; align-items: center;
	border: 1px solid var(--line); color: var(--text_muted);
	font-size: 13px; padding: 6px 12px; border-radius: 30px;
}

/* CTA群 */
.cta-group { display: flex; flex-direction: column; gap: 10px; margin-top: var(--space-xs); margin-bottom: 24px;}
.cta {
	display: flex; align-items: center; justify-content: center;
	height: 56px; border-radius: 30px; color: #fff; text-decoration: none;
	font-family: var(--font-sans); font-weight: 700; text-align: center; line-height: 1.3;
}
.cta--line {
	width: 100%; font-size: 19px;
	background: linear-gradient(90deg, var(--cta_grad_from), var(--cta_grad_to));
	border: 1px solid var(--cta_border);
}
.cta-sub-row { display: flex; gap: 10px; }
.cta--sub {
	flex: 1; height: 56px; padding: 0;
	font-size: 16px; background: var(--brand_green);
}
.cta > span {
	display: block;
	line-height: 1.3;
	transform: translateY(-1px);
}
.cta,

.cta:link,

.cta:visited,

.cta:hover,

.cta:visited:hover,

.cta:focus-visible,

.clinic-list-cta,

.clinic-list-cta:link,

.clinic-list-cta:visited,

.clinic-list-cta:hover,

.clinic-list-cta:visited:hover,

.clinic-list-cta:focus-visible {

	color: #fff;

}

/* SPのみ改行、PCは改行させない */
@media (min-width: 768px) {
	.sp-only { display: none; }
}

/* クリニックについて・特徴：共通 section-block で背景を切り替える */
.clinic-copy-section { gap: var(--space-sm); }
.about-body { color: var(--text_body); font-size: 14px; line-height: 1.7; }
.about-body p { margin: 0 0 1em; }
.about-body p:last-child { margin-bottom: 0; }

/* 詳細ページ終端ナビゲーション：上側の間隔は直前セクションで確保し、下側は共通パーツへ接続 */
.detail-page-nav {
	box-sizing: border-box;
	background: #fff;
	padding: var(--space-lg) var(--page-gutter) 40px;
}
.btn-back-to-list {
	display: block; width: 100%; text-align: center; text-decoration: none;
	background: #fff; border: 1px solid var(--cta_border); border-radius: 50px;
	padding: 14px; color: var(--green_sub);
	font-family: var(--font-sans); font-weight: 700; font-size: 15px;
}

/* =========================================================
   共通下部 c_common-bottom — SP基準、PC上書きあり
   ========================================================= */
.c_common-bottom {
	box-sizing: border-box; width: 100%;  margin: 0 auto;
	overflow: hidden;
}
.c_common-bottom * { box-sizing: border-box; }

/* 共通：セクション見出しブロック（共有クラス。common-bottom / for-beginners 等で再利用） */
.heading-block { text-align: center; }
.heading-en {
	margin: 0; font-family: var(--font-sans); font-size: 28px; color: var(--accent_purple);
}
.heading-ja {
	margin: 0; font-size: 14px; font-weight: 400; color: var(--green_sub);
}

/* 共通：通常セクションの箱ルール。背景色と中身のレイアウトは各クラスで管理する。
   gapルール：セクション直下=24px / 見出し＋短い説明=12px / カード・リスト間=24px / FAQ内=12px / 特殊に広め=30px */
.section-block {
	box-sizing: border-box;
	padding: 40px 20px 60px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.section-block * { box-sizing: border-box; }
.section-block--purple { background: var(--bg_purple); }
.section-block--green { background: var(--bg_green); }
.section-block--yellow { background: var(--bg_yellow); }
.section-block--white { background: #fff; }
.section-block--light { background: var(--bg_light); }

/* --- セクション1: First Counseling --- */
.fc-lead { display: flex; flex-direction: column; gap: 12px; }
.section-lead-band {
	width: 100%; margin: 0;
	background: #a3a3a3; color: #fff; border-radius: 5px;
	text-align: center; font-size: 14px; line-height: 24px; padding: 3px 16px;
}
.fc-lead__body { margin: 0; color: var(--text_body); font-size: 14px; line-height: 1.7; }

.point-list { display: flex; flex-direction: column; gap: 24px; }
.point-card {
	position: relative; background: #fff; border: 1px solid var(--line); border-radius: 20px;
	overflow: hidden; display: flex; flex-direction: column;
}
.point-card__image {
	position: relative; width: 100%; height: 140px;
}
.point-card__image img {
	width: 100%; height: 100%; object-fit: cover; display: block;
}
.point-card__label {
	position: absolute; left: 50%; top: 75%; transform: translate(-50%, -50%);
	color: #fff; font-family: var(--font-sans); font-size: 24px; letter-spacing: 2px;
		text-shadow:
		0 0 4px rgba(0, 0, 0, 0.45),
		0 0 10px rgba(0, 0, 0, 0.28);
}
.point-badge__num {
	position: absolute; top: 160px; left: 50%; transform: translate(-50%, -80%); z-index: 2;
	display: flex; align-items: center; justify-content: center;
	width: 46px; height: 46px; border-radius: 50%;
	background: var(--accent_purple); color: #fff;
	font-family: var(--font-serif); font-weight: 700; font-size: 30px;
	
}
.point-card__content {
	padding: 36px 20px 20px; display: flex; flex-direction: column; gap: 8px;
}
.point-card__title {
	margin: 0; text-align: center; color: var(--text_dark); font-size: 16px; font-weight: 700;
}
.point-card__body { margin: 0; color: var(--text_dark); font-size: 14px; line-height: 1.7; }

/* --- セクション2: コラム --- */
.column-list { display: flex; flex-direction: column; gap: 24px; }
.column-card { display: flex; gap: 14px; }
.column-card a,

.column-card a:visited,

.column-card a:hover,

.column-card a:focus-visible {

	color: inherit;

}
.column-card__thumb {
	flex: 0 0 100px; width: 100px; height: 100px;
	 border-radius: 8px;
}
.column-card .card-body { display: flex; flex-direction: column; gap: 8px; }
.column-card .card-body__meta { display: flex; align-items: center; gap: 8px; }
.column-card .cat-badge {
	background: var(--chip_bg); color: var(--brand_purple); font-size: 11px;
	padding: 2px 8px; border-radius: 4px;
}
.column-card .post-date { color: var(--text_muted); font-size: 11px; }
.column-card .card-body__title {
	margin: 0; color: var(--text_dark); font-size: 14px; line-height: 22px;
}

/* --- セクション3: FAQ --- */
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px 0;
	list-style: none;
}
.faq-badge {
	position: relative;
	flex: 0 0 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin-top: -3px;
	border-radius: 50%;
	color: transparent;
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 14px;
	line-height: 1;
}
.faq-badge--q { background: var(--brand_green); }
.faq-badge--a { background: var(--accent_purple); }
.faq-badge--q::before { content: "Q"; }
.faq-badge--a::before { content: "A"; }
.faq-badge::before {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	line-height: 1;
	transform: translateY(-1px);
}
.faq-q__text { flex: 1; color: var(--text_dark); font-size: 15px; line-height: 1.5; }
.faq-chevron {
	flex: 0 0 12px;
	width: 12px;
	height: 12px;
	margin-top: 5px;
	border-right: 2px solid var(--text_muted);
	border-bottom: 2px solid var(--text_muted);
	transform: rotate(45deg);
}
.faq-a { display: flex; gap: 12px; padding: 0 0 16px; }
.faq-a__text { margin: 0; flex: 1; color: var(--text_body); font-size: 14px; line-height: 1.7; }
.faq-q::-webkit-details-marker {
	display: none;
}
/* --- セクション4: フッター --- */
.cb-footer {
	background: var(--bg_green);
	padding: var(--space-group-gap) var(--page-gutter) var(--space-block);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.footer-logo {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-xs);
	margin: 0 0 var(--space-sm);
}

.footer-logo__name {
	margin: 0;
	font-family: var(--font-serif);
	font-size: 18px;
	color: var(--text_dark);
}

.footer-logo__desc {
	margin: 0;
	font-size: 12px;
	color: var(--text_body);
}

.footer-primary-nav {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-sm);
	margin: 0 0 var(--space-block);
}

.footer-primary-nav a {
	color: var(--text_dark);
	font-size: 14px;
	text-decoration: none;
}

.footer-company {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-md);
	margin: 0 0 var(--space-block);
}

.footer-company__logo img {
	display: block;
	width: auto;
	max-width: 180px;
	height: auto;
}

.footer-company__links {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-sm);
}

.footer-company__links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-xs);
	color: var(--text_body);
	font-size: 14px;
	text-decoration: none;
}

.footer-primary-nav a:visited,
.footer-company__links a:visited {
	color: inherit;
}

.external-link-icon {
	display: inline-block;
	font-size: 12px;
	line-height: 1;
	transform: translateY(-1px);
}

.copyright {
	margin: 0;
	color: var(--text_body);
	font-size: 11px;
}

/* =========================================================
   クリニック用ヘッダー / page-head — SP基準
   PC表示とスクロール時の挙動は後半で上書きする。
   ========================================================= */
.nav-item {

	display: flex;
	align-items: center;
	gap: 10px;

}
.nav-item__icon {

	display: block;
	flex: 0 0 auto;
	filter: brightness(0) invert(1);

}

.clinic-header {
	box-sizing: border-box; display: flex; align-items: center;
	width: 100%; height: 56px; padding: 8px 10px 8px 16px;
	background: #fff;
}
.clinic-header * { box-sizing: border-box; }
.clinic-header__logo {
	display: flex; align-items: center; gap: 8px; text-decoration: none;
}
.clinic-header__logo-icon {
	width: 22px; height: 22px; border-radius: 50%; background: var(--brand_green);
	flex: 0 0 22px;
}
.clinic-header__logo-name {
	font-family: var(--font-serif); font-size: 15px; color: var(--text_dark);
}
.clinic-header__spacer { flex: 1; }

.btn-menu {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
	width: 44px; height: 44px; padding: 0;
	background: transparent; border: 0; cursor: pointer;
}
.btn-menu__bars { display: flex; flex-direction: column; gap: 6px; }
.btn-menu__bars span { display: block; width: 24px; height: 2px; background: var(--brand_green); }
.btn-menu__label { font-size: 12px; color: var(--accent_purple); line-height: 1; }

/* page-head（パンくず） */
.page-head { padding: 16px 20px; overflow: clip; }
.breadcrumb-clinic { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.breadcrumb-clinic .crumb { font-size: 11px; color: var(--text_body); text-decoration: none; }
.breadcrumb-clinic .crumb--current { color: var(--text_muted); }
.breadcrumb-clinic .crumb-sep { font-size: 11px; color: var(--text_muted); }

/* =========================================================
   TOP: PICK UP セクション — SP基準、PC上書きあり
   area-pill / treatment-chip は詳細ページの既存クラスを再利用。
   ========================================================= */
.pickup-section {
	box-sizing: border-box;
	background: linear-gradient(90deg, #bfe9e8, #e0c8e9);
	margin-top: -1px;
	position: relative;
	padding: 15px 20px 30px;
	display: flex; flex-direction: column; gap: 18px;
}
.pickup-section * { box-sizing: border-box; }

.pickup-heading { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pickup-badge {
	background: var(--accent_purple); color: #fff; padding: 4px 15px;
	font-size: 16px; letter-spacing: 2.5px; text-transform: uppercase;
}
.pickup-title {
	margin: 0; text-align: center; color: var(--text_dark);
	font-size: 20px; line-height: 32px;
}

.pickup-scroller-wrap {
	position: relative;
	min-width: 0;
}
/* スクロール領域の左右に狭いフェードを置く */

.pickup-scroller-wrap::before,

.pickup-scroller-wrap::after {

	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 2;
	width: 2px;
	pointer-events: none;

}

.pickup-scroller-wrap::before {

	left: 0;
	background: linear-gradient(
		to right,
		rgba(191, 233, 232, 0.96),
		rgba(191, 233, 232, 0)
	);

}

.pickup-scroller-wrap::after {

	right: 0;
	background: linear-gradient(
		to right,
		rgba(224, 200, 233, 0),
		rgba(224, 200, 233, 0.96)
	);

}
.pickup-scroller {
	display: flex; gap: var(--space-md); overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}
.pickup-scroller::-webkit-scrollbar { display: none; }

.pickup-card {
	flex: 0 0 250px; width: 250px;
	background: #fff; border: 1px solid var(--card_border); border-radius: 12px;
	overflow: clip; padding-bottom: 16px;
	display: flex; flex-direction: column; gap: 12px;
	scroll-snap-align: start;
}
.pickup-card__thumb {
	position: relative; width: 100%; height: 160px; background: #d7d7d7;
}
.pickup-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pickup-card__thumb--icon {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: var(--bg_green);
}

.pickup-card__thumb img.pickup-card__clinic-icon {
	width: min(70%, 150px);
	height: auto;
	max-height: 100px;
	object-fit: contain;
}



.pickup-card__thumb-ph {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	color: var(--text_muted); font-size: 11px;
}
.pickup-body { padding: 0 14px; display: flex; flex-direction: column; gap: 10px; }
.pickup-card__name {
	margin: 0; font-family: var(--font-serif); font-weight: 700; font-size: 20px;
	color: var(--text_dark);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.area-row, .treat-row { display: flex; align-items: center; gap: 6px; }
.more-label { font-size: 12px; color: var(--text_muted); }
.btn-detail {
	display: flex; align-items: center; justify-content: center;
	width: 100%; min-height: 44px; padding: 6px ;
	border: 1px solid var(--brand_green); border-radius: 30px;
	color: var(--brand_green); font-size: 14px; font-weight: 500;
	text-decoration: none;
}
.btn-detail:visited { color: var(--brand_green); }
/* =========================================================
   TOP: For Beginners セクション — SP基準、PC上書きあり
   .heading-block は共有クラスを再利用。
   ========================================================= */
.for-beginners .concept-content { display: flex; flex-direction: column; gap: 12px; }
.for-beginners .concept-body {
	margin: 0; font-size: 14px; color: rgba(25, 25, 23, 0.8); line-height: 23px;
}
.for-beginners .concept-image { padding-top: 20px; }
.for-beginners .concept-image__frame {
	position: relative; width: 100%; height: 250px; background: #d7d7d7;
	border-radius: 20px; box-shadow: 0 0 16px rgba(170, 164, 172, 0.2);
	display: flex; align-items: center; justify-content: center;
	overflow: hidden;
}
.for-beginners .concept-image__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.for-beginners .concept-image__ph { color: var(--text_muted); font-size: 11px; }

/* =========================================================
   TOP: hero (c_hero) セクション — SP基準、PC上書きあり
   ========================================================= */
.c_hero {
	position: relative; box-sizing: border-box; overflow: hidden;
	padding: 60px 20px 30px;
	display: flex; flex-direction: column; align-items: center; gap: 57px;
}
.c_hero * { box-sizing: border-box; }
.c_hero__bg {
	position: absolute; inset: 0; z-index: 0;
	background: linear-gradient(90deg, #bfe9e8, #e0c8e9);
}
.c_hero__photo {
	position: absolute; top: 0; left: 0; width: 100%; height: 50%; z-index: 0;
	background-image: url("../img/top-hero-sp.webp");
	background-repeat: no-repeat; background-position: 30% top; background-size: cover;
}

.hero-copy {
	position: relative; z-index: 1;
	width: 100%; max-width: 330px;
	margin-top: 50px;
	display: flex; flex-direction: column; gap: 10px;
}
.hero-message { margin: 0; font-family: var(--font-serif); font-weight: 500; color: #191917; }
.hero-message__line1 { display: block; font-size: 12px; line-height: 27px; }
.hero-message__line2 { display: block; font-size: 20px; line-height: 27px; }
.hero-message__accent { color: var(--txt_purple); }
.hero-lead-text {
	margin: 0; font-family: var(--font-sans); font-size: 10px; line-height: 17px; color: var(--text_dark);
}

.hero_search-panel {
	position: relative; z-index: 1; width: 100%;
	overflow: hidden;
	border-radius: 20px; box-shadow: 0 0 7px rgba(0, 0, 0, 0.25);
	padding: 20px;
	margin-top: -10px;
	display: flex; flex-direction: column; gap: 30px;
}
.hero_search-panel__bg {
	position: absolute; inset: 0; z-index: 0; border-radius: 20px; overflow: hidden;
	background-image: linear-gradient(to bottom, #fff 0%, rgba(255,255,255,0) 56.7%, #fff 100%), url("../img/top_bg_panel.webp");
	background-repeat: no-repeat; background-position: center; background-size: cover;
}
.c_hero .treatment-block, .c_hero .area-block { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; }
.hero-label { display: flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-weight: 700; font-size: 14px; }
.hero-label--treatment { color: var(--brand_green); }
.hero-label--area { color: var(--txt_purple); }

.hero-treatment-tags { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hero-treatment-tag {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	text-align: center;
	background: linear-gradient(90deg, #6db5b5, #3ca1a0);
	border-radius: 30px;
	padding: 8px 20px;
	color: #fff;
	font-size: 12px;
	text-decoration: none;
}
.hero-treatment-tag:visited {
	color: #fff;
}
.btn-area-search {
	width: 100%;

	min-height: 44px;
	background: var(--txt_purple);
	border: 0;
	border-radius: 30px;
	padding: 8px 20px;
	color: #fff;
	font-size: 14px;
	text-align: center;
	cursor: pointer;
}

/* =========================================================
   TOP: Choosing a Clinic セクション — SP基準、PC上書きあり
   .heading-block は共有クラスを再利用。
   ========================================================= */
.choosing-clinic { align-items: center; }
.choosing-clinic .select-point-block {
	width: 100%; display: flex; flex-direction: column; align-items: center; gap: 24px;
}
.choosing-clinic .select-point-list {
	width: 100%; display: flex; flex-direction: column; gap: 24px;
}
.choosing-clinic .select-point-item {
	width: 100%; border-radius: 20px; overflow: clip;
	box-shadow: 0 0 16px rgba(170, 164, 172, 0.2);
	display: flex; flex-direction: column;
}
.choosing-clinic .select-point-item__image {
	position: relative; width: 100%; height: 150px; background: #d7d7d7;
	display: flex; align-items: center; justify-content: center;
}
.choosing-clinic .select-point-item__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.choosing-clinic .select-point-item__ph { color: var(--text_muted); font-size: 11px; }
.choosing-clinic .select-point-item__label {
	background: var(--bg_purple); color: #5a5a5a; text-align: center;
	font-size: 14px; font-weight: 500; line-height: 19.32px; padding: 10px 0;
}

/* ===== modal-prefecture ===== */
.modal-prefecture {
	background-color: var(--bg_yellow);
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	padding-bottom: 20px;
	overflow: hidden;
}
.modal-handle {
	background-color: #fff;
	display: flex;
	justify-content: center;
	padding: 12px 0;
}
.modal-handle .handle-bar {
	display: block;
	width: 36px;
	height: 4px;
	border-radius: 2px;
	background-color: var(--brand_green);
}
.modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 20px;
}
.modal-title {
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 700;
	font-size: 16px;
	color: #191917;
}
.btn-close {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
}
.btn-close__icon {
	font-size: 24px;
	line-height: 1;
	color: var(--brand_green);
}
.btn-close__label {
	font-size: 12px;
	font-weight: 500;
	color: var(--accent_purple);
}
.modal-body {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 0 20px;
}
.region-group {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.region-heading {
	font-weight: 700;
	font-size: 14px;
	color: #191917;
}
.prefecture-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.prefecture-tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 8px 20px;
	border-radius: 40px;
	background-color: var(--bg_purple);
	color: #765080;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}
/* ===== modal-prefecture 開閉制御 ===== */
.modal-backdrop {
	position: fixed;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.4);
	z-index: 999;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease;
}
.modal-backdrop.is-open {
	opacity: 1;
	visibility: visible;
}
.modal-prefecture {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	max-height: 80vh;
	overflow-y: auto;
	transform: translateY(100%);
	transition: transform 0.3s ease;
}
.modal-prefecture.is-open {
	transform: translateY(0);
}
body.modal-open {
	overflow: hidden;
}

/* ===== sp-menu ===== */
.sp-menu {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background-color: var(--green_sub, #6db5b5);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 0.3s ease;
	overflow-y: auto;
}
.sp-menu.is-open {
	transform: translateX(0);
}
.menu-bar {
	background-color: #fff;
	display: flex;
	align-items: center;
	padding: 8px 10px 8px 16px;
	flex-shrink: 0;
}
.menu-bar__title {
	font-family: "Noto Serif JP", serif;
	font-weight: 600;
	font-size: 15px;
	color: var(--text_dark, #191917);
	flex: 1 0 0;
}
.main-nav,
.sub-links {
	display: flex;
	flex-direction: column;
}
.main-nav .nav-item {
	display: flex;
	align-items: center;
	height: 56px;
	padding: 0 24px;
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid var(--line, #808080);
}
.sub-links .sub-link {
	display: flex;
	align-items: center;
	height: 48px;
	padding: 0 24px;
	font-size: 14px;
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid var(--line, #808080);
}

/* =========================================================
   サイト共通：主要コンテンツの左右余白
   画面端と主要コンテンツ外端の距離だけを管理する。
   カード・ボタン・タグ内部の余白には使用しない。
   ========================================================= */
.cassette-wrap,
.detail-page-nav,
.page-head,
.section-block {
	padding-left: var(--page-gutter);
	padding-right: var(--page-gutter);
}

.cta > .cta-label-pc { display: none; }

/* =========================================================
   クリニック詳細 / common-bottom — PC
   既存DOMを維持し、PC時だけ並びと幅を変更する。
   ========================================================= */
@media (min-width: 1024px) {
	.hero-label {
		font-size: 18px;
	}

	.hero-treatment-tag {
		font-size: 14px;
		padding: 7px 20px 9px;
		line-height: 1;
	}
	.btn-area-search {
		font-size: 16px;
	}
	.page-head {
		width: 100%;
		max-width: var(--container-max);
		margin: 0 auto;
		padding-top: 24px;
		padding-bottom: 24px;
	}

	.page-body {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.cassette-wrap,
	.detail-page-nav {
		grid-column: 1 / -1;
	}

	.cassette-wrap {
		width: 100%;
		max-width: var(--container-max);
		margin: 0 auto;
		padding-top: 32px;
		padding-bottom: 72px;
	}

	.c_clinic-cassette {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
		grid-template-rows: auto auto auto auto;
		column-gap: 72px;
		row-gap: 20px;
		align-items: start;
	}

	.page-title {
		font-size: 24px;
	}

	.c_clinic-cassette > .page-title {
		grid-column: 1;
	}

	.clinic-visual {
		grid-column: 1;
		min-height: 180px;
	}

	.clinic-visual__photo,
	.clinic-visual__logo {
		min-height: 180px;
	}

	.clinic-visual__logo img {
		width: min(100%, 180px);
		max-height: 100px;
	}

	.clinic-visual.no-photo .clinic-visual__logo {
		min-height: 220px;
	}

	.clinic-meta {
		grid-column: 1;
		gap: 24px;
	}

	.cta-group {
		grid-column: 1;
		margin-top: 16px;
		margin-bottom: 0;
	}

	.cta--line {
		display: none;
	}

	.cta-sub-row {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		width: 100%;
		align-items: center;
		gap: 0;
		padding-top: 16px;
		border-top: 1px dotted var(--line);
	}

	.cta--phone {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-width: 0;
		height: auto;
		min-height: 0;
		padding: 12px 32px 12px 0;
		border-right: 1px solid var(--line);
		border-radius: 0;
		background: transparent;
		color: var(--text_body);
		font-size: 15px;
		font-weight: 500;
		text-align: center;
	}

	.cta--phone:visited {
		color: var(--text_body);
	}

	.cta--web {
		width: calc(100% - 32px);
		min-width: 0;
		margin-left: 32px;
	}

	.cta > .cta-label-sp { display: none; }
	.cta > .cta-label-pc {
		display: flex;
		width: 100%;
		flex-direction: column;
		align-items: center;
		gap: 8px;
		transform: none;
	}

	.cta-phone__heading {
		display: block;
		margin: 0;
		color: var(--brand_purple);
		font-size: 16px;
		font-weight: 700;
		line-height: 1.5;
		text-align: center;
	}

	.cta-phone__number {
		display: block;
		color: var(--text_dark);
		font-size: 24px;
		font-weight: 700;
		line-height: 1.3;
		letter-spacing: 0.02em;
		transform: none;
	}

	.clinic-detail {
		grid-column: 2;
		grid-row: 2 / 5;
		gap: 18px;
		align-self: start;
	}

	.treatment-tags,
	.area-list {
		gap: 8px;
	}

	.treatment-chip,
	.area-pill {
		font-size: 14px;
	}

	.clinic-copy-section {
		min-width: 0;
		padding-top: 64px;
		padding-bottom: 72px;
		gap: 20px;
	}

	.clinic-copy-section:nth-of-type(1) {
		padding-left: max(var(--page-gutter), calc((100vw - var(--container-max)) / 2));
		padding-right: 48px;
	}

	.clinic-copy-section:nth-of-type(2) {
		padding-left: 48px;
		padding-right: max(var(--page-gutter), calc((100vw - var(--container-max)) / 2));
	}

	.clinic-copy-section .heading-block {
		text-align: center;
	}

	.clinic-copy-section .about-body {
		font-size: 15px;
	}

	.fc-lead__body {
		text-align: center;
		margin-top: 16px;
	}

	.detail-page-nav {
		padding-top: 56px;
		padding-bottom: 56px;
	}

	.btn-back-to-list {
		width: min(100%, 360px);
		margin: 0 auto;
	}

	/* common-bottom：背景は全幅、中身は共通コンテンツ幅 */
	.c_common-bottom .section-block {
		padding-left: max(var(--page-gutter), calc((100vw - var(--container-max)) / 2));
		padding-right: max(var(--page-gutter), calc((100vw - var(--container-max)) / 2));
		padding-top: 72px;
		padding-bottom: 80px;
	}

	.point-list,
	.column-list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}

	.point-card {
		min-height: 204px;
		padding: 16px;
		flex-direction: row;
		align-items: stretch;
		background: var(--bg_yellow);
	}

	.point-card__image {
		position: static;
		flex: 0 0 48%;
		width: 48%;
		height: auto;
		min-height: 172px;
		overflow: hidden;
	}

	.point-card__label {
		left: calc(48% + 14px);
		top: 18px;
		transform: none;
		display: flex;
		align-items: center;
		height: 34px;
		color: var(--text_muted);
		font-size: 20px;
		font-weight: 700;
		line-height: 1;
		letter-spacing: 0;
		text-shadow: none;
	}

	.point-badge__num {
		top: 18px;
		left: calc(48% + 78px);
		transform: none;
		width: 34px;
		height: 34px;
		font-size: 22px;
	}

	.point-card__content {
		flex: 1;
		justify-content: flex-start;
		padding: 44px 8px 0 14px;
	}

	.point-card__title {
		text-align: left;
	}

	.column-card {
		min-width: 0;
	}

	.column-card__thumb {
		flex-basis: 140px;
		width: 140px;
		height: 110px;
	}

	.faq-list {
		width: 100%;
		max-width: var(--content-max);
		margin: 0 auto;
	}

}

/* =========================================================
   TOP: For Beginners / Choosing a Clinic — PC
   既存DOMのまま、TOP終盤の2セクションを左右2カラムで並べる。
   背景は各カラム全面、内容は中央寄りの共通幅に収める。
   ========================================================= */
@media (min-width: 1024px) {
	.front-main {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.front-main > .c_hero,
	.front-main > .pickup-section {
		grid-column: 1 / -1;
	}

	/* PICK UP：背景は全幅のまま、主要コンテンツ外端を1200px幅に揃える */
	.front-main > .pickup-section {
		padding-top: 48px;
		padding-right: max(var(--page-gutter), calc((100vw - var(--container-wide)) / 2));
		padding-bottom: 48px;
		padding-left: max(var(--page-gutter), calc((100vw - var(--container-wide)) / 2));
	}

	.front-main > .for-beginners {
		grid-column: 1;
		padding-top: 64px;
		padding-bottom: 72px;
		padding-left: max(var(--page-gutter), calc((100vw - var(--container-max)) / 2));
		padding-right: 48px;
	}

	.front-main > .choosing-clinic {
		grid-column: 2;
		padding-top: 64px;
		padding-bottom: 72px;
		padding-left: 48px;
		padding-right: max(var(--page-gutter), calc((100vw - var(--container-max)) / 2));
	}

	.for-beginners .concept-content,
	.for-beginners .concept-image,
	.choosing-clinic .select-point-block,
	.choosing-clinic .select-point-list {
		width: 100%;
		max-width: calc(var(--container-max) / 2 - 48px);
	}

	.for-beginners .concept-content,
	.for-beginners .concept-image {
		margin-left: auto;
	}

	.choosing-clinic .select-point-block,
	.choosing-clinic .select-point-list {
		margin-right: auto;
	}

	.for-beginners .concept-content {
		gap: 20px;
	}

	.for-beginners .heading-block,
	.choosing-clinic .heading-block {
		text-align: center;
	}

	.for-beginners .concept-body {
		font-size: 15px;
		line-height: 1.8;
	}

	.for-beginners .concept-image {
		padding-top: 8px;
	}

	.for-beginners .concept-image__frame {
		height: 220px;
	}

	.choosing-clinic {
		align-items: stretch;
	}

	.choosing-clinic .select-point-block {
		gap: 24px;
	}

	.section-lead-band {
		width: fit-content;
		max-width: 100%;
		align-self: center;
	}

	.choosing-clinic .select-point-list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}

	.choosing-clinic .select-point-item {
		min-width: 0;
	}

	.choosing-clinic .select-point-item:nth-child(3) {
		grid-column: 1 / -1;
		width: calc(50% - 8px);
		justify-self: center;
	}

	.choosing-clinic .select-point-item__image {
		height: 118px;
	}

	.choosing-clinic .select-point-item__label {
		font-size: 12px;
		line-height: 1.5;
		padding: 7px 8px;
	}
}

/* =========================================================
   TOP: hero (c_hero) — PC
   SPと同じDOMを使用し、PC時のみ配置と文字スケールを変更する。
   ========================================================= */
@media (min-width: 1024px) {
	.c_hero {
		--hero-container-left: max(var(--page-gutter), calc((100vw - var(--container-wide)) / 2));
		height: 650px;
		padding: 0;
		display: block;
		background: #fff;
	}

	/* SP用の全面グラデーションはPCでは使用しない */
	.c_hero__bg {
		background: linear-gradient(
			to right,
			#fff 0%,
			#fff 42%,
			#d0d4da 58%,
			#d0d4da 100%
		);
	}

	/* 理想画像に合わせ、写真は1200px領域の左寄りから大きく敷く */
	.c_hero__photo {
		top: 0;
		left: calc(var(--hero-container-left) + 100px);
		width: min(1100px, calc(100vw - var(--hero-container-left) - 100px));
		height: 650px;
		background-position: center top;
		background-size: cover;
		background-image: url("../img/top-hero-pc.webp");
	}

	.hero-copy {
		position: absolute;
		top: 80px;
		left: var(--hero-container-left);
		width: auto;
		max-width: none;
		margin-top: 0;
		gap: 28px;
	}

	.hero-message__line1 {
		font-size: 28px;
		line-height: 1.45;
		letter-spacing: 0.08em;
	}

	.hero-message__line2 {
		font-size: 40px;
		line-height: 1.35;
		letter-spacing: 0.06em;
	}

	.hero-lead-text {
		width: 500px;
		max-width: 100%;
		font-size: 16px;
		line-height: 1.8;
	}

	.hero_search-panel {
		position: absolute;
		top: 290px;
		left: var(--hero-container-left);
		width: 500px;
		padding:calc(var(--space-block) - 5px)
			var(--space-block)
			var(--space-block);
		margin-top: 0;
		gap: var(--space-block);
	}
	.pickup-scroller-wrap {
		width: 100%;
		max-width: 1100px;
		margin-inline: auto;
	}
	.pickup-scroller {
		width: 100%;
		max-width: none;
		margin-inline: 0;
		gap: var(--space-lg);
	}
	.pickup-card {
		flex: 0 0 325px;
		width: 325px;
	}
}

.hero-label__icon {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.hero-label--treatment .hero-label__icon {
	-webkit-mask-image: url("../img/ico_spark.svg");
	mask-image: url("../img/ico_spark.svg");
}

.hero-label--area .hero-label__icon {
	-webkit-mask-image: url("../img/ico_area.svg");
	mask-image: url("../img/ico_area.svg");
}

/* =========================================================
   クリニック共通ヘッダー
   PC: 72px / 1200px中央 / 検索ボタン表示
   SP: 56px / メニュー表示 / スクロール停止180ms後に再表示
   ========================================================= */
.clinic-header {
	position: sticky;
	top: 0;
	z-index: 900;
	width: 100%;
	height: 56px;
	padding: 0;
	background: #fff;
	transition: transform 0.25s ease;
}

.clinic-header.is-scroll-hidden {
	transform: translateY(-100%);
}

.clinic-header__inner {
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
	padding: 6px 10px 6px 16px;
}

.clinic-header__actions {
	display: none;
}

@media (min-width: 1024px) {
	.clinic-header {
		height: 72px;
		transform: none;
	}

	.clinic-header__inner {
		max-width: var(--container-wide);
		margin: 0 auto;
		padding: 14px 0;
	}

	.clinic-header__actions {
		display: flex;
		align-items: center;
		gap: var(--space-sm);
	}

	.clinic-header__action {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-xs);
		min-height: var(--tap-min);
		padding: 0 var(--space-lg);
		border-radius: 30px;
		color: #fff;
		font-family: var(--font-sans);
		font-size: 14px;
		font-weight: 700;
		line-height: 1;
		text-decoration: none;
		white-space: nowrap;
	}

	.clinic-header__action:visited {
		color: #fff;
	}

	.clinic-header__action--treatment {
		background: linear-gradient(90deg, var(--green_sub), var(--brand_green));
	}

	.clinic-header__action--area {
		background: var(--txt_purple);
	}

	.clinic-header__action-icon {
		flex: 0 0 18px;
		width: 18px;
		height: 18px;
		background-color: currentColor;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-position: center;
		mask-position: center;
		-webkit-mask-size: contain;
		mask-size: contain;
	}

	.clinic-header__action--treatment .clinic-header__action-icon {
		-webkit-mask-image: url("../img/ico_spark.svg");
		mask-image: url("../img/ico_spark.svg");
	}

	.clinic-header__action--area .clinic-header__action-icon {
		-webkit-mask-image: url("../img/ico_area.svg");
		mask-image: url("../img/ico_area.svg");
	}

	.btn-menu {
		display: none;
	}
}

.hero-treatment-tag,
.btn-area-search {
	font-weight: 700;
}

/* =========================================================
   都道府県モーダル — PC
   SPと同じDOM・開閉クラスを使い、PC時のみ中央モーダルへ変更する。
   ========================================================= */
@media (min-width: 1024px) {
	.modal-prefecture {
		top: 50%;
		right: auto;
		bottom: auto;
		left: 50%;

		display: flex;
		flex-direction: column;

		width: min(960px, calc(100vw - 64px));
		max-height: 80vh;
		padding-bottom: 0;

		border-radius: 20px;
		overflow: hidden;

		opacity: 0;
		visibility: hidden;
		transform: translate(-50%, calc(-50% + 24px)) scale(0.98);
		transition:
			opacity 0.3s ease,
			transform 0.3s ease,
			visibility 0.3s ease;
	}

	.modal-prefecture.is-open {
		opacity: 1;
		visibility: visible;
		transform: translate(-50%, -50%) scale(1);
	}

	.modal-handle {
		display: none;
	}

	.modal-header {
		flex: 0 0 auto;
		padding: 24px 40px 16px;
	}

	.modal-title {
		font-size: 18px;
	}

	.modal-body {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
		padding: 0 40px 40px;
		overflow-y: auto;
	}

	.region-group {
		min-width: 0;
	}

	.prefecture-list {
		gap: var(--space-xs);
	}
}
/* =========================================================
   ボタン共通：リンク状態・ホバー表示
   各ボタンの通常文字色を --button-text-color で管理する。
   ========================================================= */
:where(
	.hero-treatment-tag,
	.btn-area-search,
	.clinic-header__action,
	.prefecture-tag,
	.btn-detail,
	.cta,
	.btn-back-to-list
) {
	position: relative;
	overflow: hidden;
	color: var(--button-text-color);
}

:where(
	.hero-treatment-tag,
	.btn-area-search,
	.clinic-header__action,
	.prefecture-tag,
	.btn-detail,
	.cta,
	.btn-back-to-list
):is(:hover, :visited, :visited:hover, :focus-visible) {
	color: var(--button-text-color);
}

/* 濃色ボタン */
.hero-treatment-tag,
.btn-area-search,
.clinic-header__action,
.cta {
	--button-text-color: #fff;
}

/* 淡色・白背景ボタン */
.prefecture-tag {
	--button-text-color: #765080;
}

.btn-detail {
	--button-text-color: var(--brand_green);
}

.btn-back-to-list {
	--button-text-color: var(--green_sub);
}

/* ホバーオーバーレイ */
:where(
	.hero-treatment-tag,
	.btn-area-search,
	.clinic-header__action,
	.btn-detail,
	.cta,
	.btn-back-to-list
)::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0);
	pointer-events: none;
	transition: background-color 0.2s ease;
}

@media (hover: hover) {
	:where(
		.hero-treatment-tag,
		.btn-area-search,
		.clinic-header__action,
		.btn-detail,
		.cta,
		.btn-back-to-list
	):hover::after {
		background: rgba(255, 255, 255, 0.16);
	}

	.prefecture-tag:hover {
		background: var(--accent_purple);
		color: #fff;
	}
}

/* =========================================================
   クリニック一覧 — SP基準、PC上書きあり
   TOPのPICK UPカードを再利用し、一覧固有の幅・配置のみ追加する。
   ========================================================= */
.archive-clinic-main {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 16px var(--page-gutter) 60px;
}
.archive-clinic-main * { box-sizing: border-box; }

.archive-heading {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-md);
	margin-bottom: 16px;
}
.archive-count {
	margin: 0;
	font-size: 13px;
	color: var(--text_muted);
	white-space: nowrap;
}

.clinic-list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: var(--space-card-gap);
	column-gap: var(--space-lg);
}
.clinic-list .pickup-card {
	width: 100%;
	min-width: 0;
	flex-basis: auto;
}
.clinic-list .pickup-card__name {
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
}
.clinic-list .pickup-body {
	flex: 1;
}
.clinic-list .btn-detail {
	margin-top: auto;
}

.archive-empty {
	padding: 40px 20px;
	background: var(--bg_light);
	text-align: center;
}
.archive-empty p {
	margin: 0;
	font-size: 14px;
	color: var(--text_body);
}

/* 一覧共通ページネーション */
.pagination {
	margin-top: 40px;
}
.pagination__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}
.pagination__item .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--tap-min);
	min-height: var(--tap-min);
	padding: var(--space-xs);
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--text_body);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
}
.pagination__item .page-numbers.current {
	background: var(--bg_green);
	color: var(--text_dark);
	font-weight: 700;
}
.pagination__item .page-numbers.dots {
	min-width: auto;
	padding-inline: 0;
	color: var(--text_muted);
}
.pagination__item--prev .page-numbers,
.pagination__item--next .page-numbers {
	min-width: auto;
	padding-inline: var(--space-sm);
	border-radius: 0;
	color: var(--brand_green);
	font-weight: 700;
}
.pagination__item--prev .page-numbers::before {
	content: "‹";
	margin-right: var(--space-xs);
}
.pagination__item--next .page-numbers::after {
	content: "›";
	margin-left: var(--space-xs);
}
.pagination__item .page-numbers.is-disabled {
	color: var(--text_muted);
	font-weight: 400;
	cursor: default;
	opacity: 0.55;
}
.pagination__item .page-numbers:is(:hover, :visited, :focus-visible) {
	color: var(--text_body);
}
.pagination__item--prev .page-numbers:is(:hover, :visited, :focus-visible),
.pagination__item--next .page-numbers:is(:hover, :visited, :focus-visible) {
	color: var(--brand_green);
}
.pagination__item .page-numbers.current:is(:hover, :visited, :focus-visible) {
	color: var(--text_dark);
}
.pagination__item .page-numbers.is-disabled:is(:hover, :focus-visible) {
	color: var(--text_muted);
}
@media (hover: hover) {
	.pagination__item a.page-numbers:not(.prev, .next):hover {
		background: var(--bg_light);
	}
	.pagination__item--prev a.page-numbers:hover,
	.pagination__item--next a.page-numbers:hover {
		text-decoration: underline;
	}
}

@media (min-width: 768px) {
	.clinic-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.archive-clinic-main {
		padding-top: 32px;
		padding-bottom: 80px;
	}
	.archive-heading {
		margin-bottom: 20px;
	}
	.clinic-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.clinic-list .pickup-card__thumb {
		height: 190px;
	}
}

/* クリニック一覧カード：詳細と同じ「写真＋ロゴ」表示 */
.clinic-list-card__visual {
	min-height: 160px;
	border-radius: 0;
}
.clinic-list-card__visual .clinic-visual__photo,
.clinic-list-card__visual .clinic-visual__logo {
	min-height: 160px;
}
.clinic-list-card__visual .clinic-visual__logo img {
	width: min(100%, 130px);
	max-height: 76px;
}
.clinic-list-card__visual.no-photo .clinic-visual__logo {
	min-height: 180px;
}
.clinic-list-card__visual.no-photo .clinic-visual__logo img {
	width: min(70%, 180px);
	max-height: 100px;
}

@media (min-width: 1024px) {
	.clinic-list-card__visual,
	.clinic-list-card__visual .clinic-visual__photo,
	.clinic-list-card__visual .clinic-visual__logo {
		min-height: 190px;
	}
}

/* クリニック一覧カード：住所・営業時間・問い合わせCTA */
.clinic-list-card__meta {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.clinic-list-card__meta .clinic-meta__item {
	gap: 8px;
}
.clinic-list-card__meta .clinic-meta__icon {
	flex-basis: 18px;
	width: 18px;
	height: 18px;
}
.clinic-list-card__meta .clinic-meta__text {
	font-size: 13px;
	line-height: 1.6;
}

.clinic-list-card__cta {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.clinic-list-card__cta-sub {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}
.clinic-list-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: 44px;
	padding: 8px 12px;
	border-radius: 30px;
	color: #fff;
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;
	text-align: center;
	text-decoration: none;
}
.clinic-list-cta--line {
	background: linear-gradient(90deg, var(--cta_grad_from), var(--cta_grad_to));
	border: 1px solid var(--cta_border);
}
.clinic-list-cta--sub {
	background: var(--brand_green);
}
.clinic-list-cta:is(:hover, :visited, :focus-visible) {
	color: #fff;
}
@media (hover: hover) {
	.clinic-list-cta:hover {
		filter: brightness(1.06);
	}
}

/* クリニック一覧カード：詳細と同じ情報順を維持した間隔調整 */
.clinic-list .pickup-body {
	gap: var(--space-md);
}

/* 施術・都道府県は一続きの分類情報として、ブロック間のみ8pxに詰める */
.clinic-list .treatment-tags + .area-list {
	margin-top: calc(var(--space-xs) - var(--space-md));
}



/* 一覧カードのボタンラベル：既存CTAと同じく視覚上1px上へ補正 */
.clinic-list-cta > span,
.clinic-list .btn-detail > span {
	display: block;
	line-height: inherit;
	transform: translateY(-1px);
}

@media (min-width: 1024px) {
	.clinic-list .pickup-body {
		gap: var(--space-md);
	}

	.clinic-list .treatment-tags + .area-list {
		margin-top: calc(var(--space-xs) - var(--space-md));
	}
}

/* クリニック一覧カード：枠線を狭いグロー状シャドウへ変更 */
.clinic-list-card {
	border: 0;
	box-shadow:
		0 0 0 1px rgba(170, 164, 172, 0.12),
		0 0 10px rgba(170, 164, 172, 0.22);
}

/* =========================================================
   エリアで探す入口 / 地域別一覧
   既存のページ幅・見出し・都道府県タグ・クリニックカードを再利用する。
   ========================================================= */
.area-search-main {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--container-max);
	margin: 0 auto;
	padding: var(--space-md) var(--page-gutter) 60px;
}
.area-search-main * { box-sizing: border-box; }
.area-search-heading {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	margin-bottom: var(--space-group-gap);
}
.area-search-lead {
	margin: 0;
	color: var(--text_body);
	font-size: 14px;
	line-height: 1.7;
}
.area-search-regions {
	display: flex;
	flex-direction: column;
	gap: var(--space-group-gap);
}
.area-search-region {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	padding: 0;
	background: transparent;
	border-radius: 0;
	box-shadow: none;
}
.area-search-region__heading {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-xs);
}
.area-search-region__title {
	margin: 0;
	font-family: var(--font-serif);
	font-size: 18px;
	line-height: 1.4;
}
.area-search-region__title a {
	color: var(--text_dark);
	text-decoration: none;
}
.area-search-region__link {
	color: var(--brand_green);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}
.area-search-prefectures {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-xs);
}
.area-search-prefectures .prefecture-tag {
	width: 100%;
	min-width: 0;
	padding-right: var(--space-xs);
	padding-left: var(--space-xs);
}
.area-archive-nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
}
.area-archive-nav {
	margin-bottom: var(--space-card-gap);
}
.area-archive-sections {
	display: flex;
	flex-direction: column;
	gap: var(--space-section);
}
.area-archive-section {
	scroll-margin-top: calc(56px + var(--space-md));
}
.area-archive-section__heading {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-md);
	margin-bottom: var(--space-md);
}
.area-archive-section__title {
	margin: 0;
	font-family: var(--font-serif);
	font-size: 18px;
	line-height: 1.4;
	color: var(--text_dark);
}

@media (min-width: 1024px) {
	.area-search-main {
		padding-top: 32px;
		padding-bottom: 80px;
	}
	.area-search-heading {
		margin-bottom: 32px;
	}
	.area-search-regions {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--space-lg);
		row-gap: var(--space-group-gap);
	}
	.area-search-region {
		padding: var(--space-lg);
		background: var(--bg_yellow);
		border-radius: 20px;
		box-shadow: 0 0 10px rgba(170, 164, 172, 0.14);
	}
	.area-search-prefectures {
		display: flex;
		flex-wrap: wrap;
	}
	.area-search-prefectures .prefecture-tag {
		width: auto;
		padding-right: 20px;
		padding-left: 20px;
	}
	.area-search-region__heading {
		flex-direction: row;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--space-md);
	}
	.area-search-region__title,
	.area-archive-section__title {
		font-size: 20px;
	}
	.area-archive-section {
		scroll-margin-top: calc(72px + var(--space-lg));
	}
}

/* =========================================================
   施術で探す入口 / 施術カテゴリ別一覧
   エリア検索と同じ階層構造を使い、施術用の色と名称だけを分ける。
   ========================================================= */
.treatment-search-main {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--container-max);
	margin: 0 auto;
	padding: var(--space-md) var(--page-gutter) 60px;
}
.treatment-search-main * { box-sizing: border-box; }
.treatment-search-heading {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	margin-bottom: var(--space-group-gap);
}
.treatment-search-lead {
	margin: 0;
	color: var(--text_body);
	font-size: 14px;
	line-height: 1.7;
}
.treatment-search-groups {
	display: flex;
	flex-direction: column;
	gap: var(--space-group-gap);
}
.treatment-search-group {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	padding: 0;
	background: transparent;
	border-radius: 0;
	box-shadow: none;
}
.treatment-search-group__heading {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-xs);
}
.treatment-search-group__title {
	margin: 0;
	font-family: var(--font-serif);
	font-size: 18px;
	line-height: 1.4;
}
.treatment-search-group__title a {
	color: var(--text_dark);
	text-decoration: none;
}
.treatment-search-group__link {
	color: var(--brand_green);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}
.treatment-search-items {
	display: flex;
	flex-wrap: wrap;
	column-gap: var(--space-sm);
	row-gap: 0;
}
.treatment-search-item {
	display: inline-flex;
	align-items: center;
	min-width: 0;
	min-height: var(--tap-min);
	padding: 0 var(--space-xs);
	color: var(--brand_purple);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
}
.treatment-search-item::after {
	content: "›";
	margin-left: var(--space-xs);
	color: currentColor;
}
.treatment-search-item:is(:hover, :visited, :focus-visible) {
	color: var(--brand_purple);
}
@media (hover: hover) {
	.treatment-search-item:hover {
		text-decoration: underline;
	}
}
.treatment-archive-nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin-bottom: var(--space-card-gap);
}
.treatment-archive-sections {
	display: flex;
	flex-direction: column;
	gap: var(--space-section);
}
.treatment-archive-section {
	scroll-margin-top: calc(56px + var(--space-md));
}
.treatment-archive-section__heading {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-md);
	margin-bottom: var(--space-md);
}
.treatment-archive-section__title {
	margin: 0;
	font-family: var(--font-serif);
	font-size: 18px;
	line-height: 1.4;
	color: var(--text_dark);
}

@media (min-width: 1024px) {
	.treatment-search-main {
		padding-top: 32px;
		padding-bottom: 80px;
	}
	.treatment-search-heading {
		margin-bottom: 32px;
	}
	.treatment-search-groups {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--space-lg);
		row-gap: var(--space-group-gap);
	}
	.treatment-search-group {
		padding: var(--space-lg);
		background: var(--bg_yellow);
		border-radius: 20px;
		box-shadow: 0 0 10px rgba(170, 164, 172, 0.14);
	}
	.treatment-search-group__heading {
		flex-direction: row;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--space-md);
	}
	.treatment-search-items {
		display: flex;
		flex-wrap: wrap;
	}
	.treatment-search-group__title,
	.treatment-archive-section__title {
		font-size: 20px;
	}
	.treatment-archive-section {
		scroll-margin-top: calc(72px + var(--space-lg));
	}
}
/* =========================================================
   404ページ
   既存の page-title / CTA / 一覧へ戻るボタンを再利用する。
   ========================================================= */
.not-found-main {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--container-max);
	margin: 0 auto;
	padding: var(--space-group-gap) var(--page-gutter) 80px;
}
.not-found-main * {
	box-sizing: border-box;
}
.not-found-content {
	width: 100%;
	max-width: var(--content-max);
	margin: 0 auto;
	text-align: center;
}
.not-found-code {
	margin: 0 0 var(--space-md);
	font-family: var(--font-sans);
	font-size: clamp(64px, 20vw, 112px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.04em;
	color: var(--bg_green);
}
.not-found-message {
	margin: var(--space-lg) 0 0;
	font-size: 14px;
	line-height: 1.8;
	color: var(--text_body);
}
.not-found-actions {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	width: 100%;
	max-width: 360px;
	margin: var(--space-group-gap) auto 0;
}
.not-found-primary,
.not-found-secondary {
	width: 100%;
}
.not-found-secondary {
	min-height: var(--tap-min);
}

@media (min-width: 1024px) {
	.not-found-main {
		padding-top: 72px;
		padding-bottom: 96px;
	}
	.not-found-message {
		font-size: 15px;
	}
}
/* =========================================================
   コラム一覧 / コラム詳細
   WordPress標準投稿を使用。日付は表示しない。
   ========================================================= */
.column-archive-main,
.column-single-main {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--container-max);
	margin: 0 auto;
	padding: var(--space-md) var(--page-gutter) 60px;
}
.column-archive-main *,
.column-single-main * { box-sizing: border-box; }

.column-archive-list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: var(--space-card-gap);
	column-gap: var(--space-lg);
}
.column-card--archive {
	display: block;
	min-width: 0;
	border-radius: 12px;
	background: #fff;
	box-shadow:
		0 0 0 1px rgba(170, 164, 172, 0.12),
		0 0 10px rgba(170, 164, 172, 0.22);
	overflow: hidden;
}
.column-card--archive .column-card__link {
	display: grid;
	grid-template-columns: minmax(120px, 36%) minmax(0, 1fr);
	width: 100%;
	min-height: 140px;
	color: inherit;
	text-decoration: none;
}
.column-card--archive .column-card__link:is(:hover, :visited, :focus-visible) {
	color: inherit;
}
.column-card--archive .column-card__thumb--archive {
	width: 100%;
	height: 100%;
	min-height: 140px;
	border-radius: 0;
	overflow: hidden;
	background: var(--img_placeholder);
}
.column-card--archive .column-card__thumb--archive img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.column-card--archive .card-body {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: var(--space-sm);
	min-width: 0;
	padding: var(--space-md);
}
.column-card--archive .card-body__title {
	margin: 0;
	font-size: 15px;
	line-height: 1.7;
}

.column-single-article {
	width: 100%;
	max-width: var(--content-max);
	margin: 0 auto;
}
.column-single-header {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	margin-bottom: var(--space-lg);
}
.column-single-meta { display: flex; }
.column-single-thumbnail {
	aspect-ratio: 16 / 9;
	margin-bottom: var(--space-block);
	border-radius: 12px;
	overflow: hidden;
}
.column-single-thumbnail img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.column-single-content {
	max-width: none;
	color: var(--text_body);
}
.column-single-content > *:last-child { margin-bottom: 0; }
.column-single-nav {
	margin-top: var(--space-section);
}


@media (min-width: 1024px) {
	.column-archive-main,
	.column-single-main {
		padding-top: 32px;
		padding-bottom: 80px;
	}
	.column-archive-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.column-card--archive .column-card__link {
		grid-template-columns: 180px minmax(0, 1fr);
		min-height: 150px;
	}
	.column-card--archive .column-card__thumb--archive {
		min-height: 150px;
	}
	.column-single-header { margin-bottom: var(--space-block); }
}

/* =========================================================
   コラム詳細
   components-column-addition.css の後に追加する。
   ========================================================= */
.column-single-article {
	width: 100%;
	max-width: 760px;
	margin: 0 auto;
}

.column-single-header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-sm);
	margin-bottom: var(--space-lg);
}

.column-single-meta {
	display: flex;
}

.column-single-thumbnail {
	margin-bottom: var(--space-block);
	border-radius: 12px;
	overflow: hidden;
}

.column-single-thumbnail img {
	display: block;
	width: 100%;
	height: auto;
}

.article-toc {
	margin-bottom: var(--space-block);
	border: 1px solid var(--line);
	border-radius: 12px;
	background: #fff;
	overflow: hidden;
}

.article-toc__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	min-height: 56px;
	padding: 0 var(--space-md);
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.article-toc__summary::-webkit-details-marker {
	display: none;
}

.article-toc__icon {
	position: relative;
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
}

.article-toc__icon::before,
.article-toc__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 1px;
	background: currentColor;
	transform: translate(-50%, -50%);
}

.article-toc__icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
	transition: transform 0.2s ease;
}

.article-toc[open] .article-toc__icon::after {
	transform: translate(-50%, -50%) rotate(0deg);
}

.article-toc__body {
	padding: 0 var(--space-md) var(--space-md);
}

.article-toc__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: var(--space-md) 0 0;
	border-top: 1px solid var(--line);
	list-style: none;
	counter-reset: toc-h2;
}

.article-toc__item {
	margin: 0;
}

.article-toc__item--h2 {
	counter-increment: toc-h2;
	counter-reset: toc-h3;
}

.article-toc__item--h2 a::before {
	content: counter(toc-h2) ". ";
}

.article-toc__item--h3 {
	padding-left: var(--space-md);
	counter-increment: toc-h3;
	font-size: 0.9375rem;
}

.article-toc__item--h3 a::before {
	content: counter(toc-h2) "-" counter(toc-h3) ". ";
}

.article-toc__item a {
	color: var(--text_body);
	text-decoration: none;
}

.column-single-content {
	max-width: none;
	color: var(--text_body);
	font-size: 16px;
	line-height: 1.9;
}

.column-single-content > * {
	margin-top: 0;
	margin-bottom: var(--space-md);
}

.column-single-content > *:last-child {
	margin-bottom: 0;
}

.column-single-content h2,
.column-single-content h3 {
	scroll-margin-top: 96px;
	color: var(--text_heading);
}

.column-single-content h2 {
	margin-top: var(--space-section);
	margin-bottom: var(--space-md);
	padding-bottom: var(--space-sm);
	border-bottom: 1px solid var(--line);
	font-size: 22px;
	line-height: 1.55;
}

.column-single-content h3 {
	margin-top: var(--space-block);
	margin-bottom: var(--space-sm);
	font-size: 18px;
	line-height: 1.6;
}

.column-single-content ul,
.column-single-content ol {
	padding-left: 1.5em;
}

.column-single-content li + li {
	margin-top: 6px;
}

.column-single-content a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.column-single-content img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

.column-single-content blockquote {
	margin-right: 0;
	margin-left: 0;
	padding: var(--space-md);
	border-left: 3px solid var(--line);
	background: var(--bg_light);
}

.column-single-content blockquote > *:last-child {
	margin-bottom: 0;
}

.column-single-content table {
	width: 100%;
	border-collapse: collapse;
}

.column-single-content th,
.column-single-content td {
	padding: 12px;
	border: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
}

.column-single-content th {
	font-weight: 700;
	background: var(--bg_light);
}

.column-post-nav {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--space-md);
	margin-top: var(--space-section);
	padding-top: var(--space-block);
	border-top: 1px solid var(--line);
}

.column-post-nav__item {
	min-width: 0;
}

.column-post-nav__item--next {
	text-align: right;
}

.column-post-nav__item a {
	display: flex;
	flex-direction: column;
	gap: 6px;
	color: inherit;
	text-decoration: none;
}

.column-post-nav__label {
	font-size: 13px;
	color: var(--text_muted);
}

.column-post-nav__title {
	display: -webkit-box;
	overflow: hidden;
	font-size: 14px;
	line-height: 1.6;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.column-single-nav {
	margin-top: 32px;
	text-align: center;
}

.column-related {
	width: 100%;
	max-width: var(--content-max);
	margin: var(--space-group-gap) auto 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.column-related__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-card-gap);
}

.column-card--related .column-card__link {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	color: inherit;
	text-decoration: none;
}

.column-card--related .column-card__thumb {
	flex: 0 0 112px;
}

.column-card--related .column-card__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 1024px) {
	.column-single-header {
		margin-bottom: var(--space-block);
	}

	.column-single-content h2 {
		font-size: 26px;
	}

	.column-single-content h3 {
		font-size: 20px;
	}

	.column-related__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* =========================================================
   コラム詳細：未反映分
   components.css の末尾へ追加する。
   既存のコラム用指定は削除しない。
   ========================================================= */

/* 本文：SPで大きく見えすぎない基本サイズ */
.column-single-content {
	font-size: 15px;
	line-height: 1.9;
}

/* H2：セクションの区切りを明確にする */
.column-single-content h2 {
	position: relative;
	margin-top: var(--space-section);
	margin-bottom: var(--space-lg);
	padding: 0 0 var(--space-sm) 16px;
	border-bottom: 1px solid var(--line);
	font-size: 22px;
	line-height: 1.55;
}

.column-single-content h2::before {
	content: "";
	position: absolute;
	top: 0.25em;
	bottom: calc(var(--space-sm) + 0.25em);
	left: 0;
	width: 4px;
	border-radius: 999px;
	background: var(--brand_green);
}

/* H3：本文と見分けられる小見出し */
.column-single-content h3 {
	position: relative;
	margin-top: var(--space-block);
	margin-bottom: var(--space-md);
	padding-left: 14px;
	font-size: 18px;
	line-height: 1.6;
}

.column-single-content h3::before {
	content: "";
	position: absolute;
	top: 0.45em;
	left: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--brand_purple);
}

/* リスト */
.column-single-content ul,
.column-single-content ol {
	margin-bottom: var(--space-lg);
	padding-left: 1.6em;
}

.column-single-content li + li {
	margin-top: var(--space-sm);
}

.column-single-content li::marker {
	color: var(--brand_green);
	font-weight: 700;
}

/* 引用 */
.column-single-content blockquote {
	margin: var(--space-block) 0;
	padding: var(--space-md) var(--space-lg);
	border-left: 4px solid var(--brand_green);
	border-radius: 0 8px 8px 0;
	background: var(--bg_green);
}

/* 表 */
.column-single-content table {
	margin: var(--space-block) 0;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--line);
	border-radius: 8px;
	overflow: hidden;
}

.column-single-content th,
.column-single-content td {
	padding: 12px 14px;
	border: 0;
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.column-single-content tr > *:last-child {
	border-right: 0;
}

.column-single-content tbody tr:last-child > * {
	border-bottom: 0;
}

.column-single-content th {
	background: var(--bg_green);
}

/* 関連コラム：見出しとカード群の間隔 */
.column-related {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
}

/* SPは1カラム */
.column-related__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-card-gap);
}

/* 関連カードを共通パーツ同様の横組みカセットにする */
.column-card--related {
	min-width: 0;
	border-radius: 12px;
	background: #fff;
	box-shadow:
		0 0 0 1px rgba(170, 164, 172, 0.12),
		0 0 10px rgba(170, 164, 172, 0.22);
	overflow: hidden;
}

.column-card--related .column-card__link {
	display: grid;
	grid-template-columns: 112px minmax(0, 1fr);
	align-items: stretch;
	gap: 0;
	width: 100%;
	min-height: 132px;
	color: inherit;
	text-decoration: none;
}

.column-card--related .column-card__thumb {
	width: 100%;
	height: 100%;
	min-height: 132px;
	border-radius: 0;
	overflow: hidden;
	background: var(--img_placeholder);
}

.column-card--related .column-card__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.column-card--related .card-body {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: var(--space-sm);
	min-width: 0;
	padding: var(--space-md);
}

.column-card--related .card-body__title {
	margin: 0;
	font-size: 15px;
	line-height: 1.7;
}

@media (min-width: 1024px) {
	.column-single-content {
		font-size: 16px;
	}

	.column-single-content h2 {
		font-size: 26px;
	}

	.column-single-content h3 {
		font-size: 20px;
	}

	/* PCは2カラム */
	.column-related__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.column-card--related .column-card__link {
		grid-template-columns: 160px minmax(0, 1fr);
		min-height: 150px;
	}

	.column-card--related .column-card__thumb {
		min-height: 150px;
	}
}
/* =========================================================
   コラム詳細：未反映分
   components.css の末尾へ追加する。
   既存のコラム用指定は削除しない。
   ========================================================= */

/* 本文：SPで大きく見えすぎない基本サイズ */
.column-single-content {
	font-size: 15px;
	line-height: 1.9;
}

/* H2：薄い紫背景＋光アイコン */
.column-single-content h2 {
	position: relative;
	margin-top: var(--space-section);
	margin-bottom: var(--space-lg);
	padding: 14px 16px 14px 52px;
	border: 0;
	border-radius: 10px;
	background: var(--bg_purple);
	font-size: 18px;
	line-height: 1.55;
}

.column-single-content h2::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 16px;
	width: 28px;
	height: 28px;
	background: url("../img/icon-sparkle-group.svg") center / contain no-repeat;
	transform: translateY(-50%);
}

.column-single-content h2::after {
	content: none;
}

/* H3：背景なし、行頭に単体の光アイコン */
.column-single-content h3 {
	position: relative;
	margin-top: var(--space-block);
	margin-bottom: var(--space-md);
	padding-left: 26px;
	font-size: 17px;
	line-height: 1.6;
}

.column-single-content h3::before {
	content: "";
	position: absolute;
	top: 0.4em;
	left: 0;
	width: 16px;
	height: 16px;
	background: url("../img/icon-sparkle-single.svg") center / contain no-repeat;
}

/* リスト */
.column-single-content ul,
.column-single-content ol {
	margin-bottom: var(--space-lg);
	padding-left: 1.6em;
}

.column-single-content li + li {
	margin-top: var(--space-sm);
}

.column-single-content li::marker {
	color: var(--brand_green);
	font-weight: 700;
}

/* 引用 */
.column-single-content blockquote {
	margin: var(--space-block) 0;
	padding: var(--space-md) var(--space-lg);
	border-left: 4px solid var(--brand_green);
	border-radius: 0 8px 8px 0;
	background: var(--bg_green);
}

/* 表 */
.column-single-content table {
	margin: var(--space-block) 0;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--line);
	border-radius: 8px;
	overflow: hidden;
}

.column-single-content th,
.column-single-content td {
	padding: 12px 14px;
	border: 0;
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.column-single-content tr > *:last-child {
	border-right: 0;
}

.column-single-content tbody tr:last-child > * {
	border-bottom: 0;
}

.column-single-content th {
	background: var(--bg_green);
}

/* 関連コラム：見出しとカード群の間隔 */
.column-related {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
}

/* SPは1カラム */
.column-related__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-card-gap);
}

/* 関連カードを共通パーツ同様の横組みカセットにする */
.column-card--related {
	min-width: 0;
	border-radius: 12px;
	background: #fff;
	box-shadow:
		0 0 0 1px rgba(170, 164, 172, 0.12),
		0 0 10px rgba(170, 164, 172, 0.22);
	overflow: hidden;
}

.column-card--related .column-card__link {
	display: grid;
	grid-template-columns: 112px minmax(0, 1fr);
	align-items: stretch;
	gap: 0;
	width: 100%;
	min-height: 132px;
	color: inherit;
	text-decoration: none;
}

.column-card--related .column-card__thumb {
	width: 100%;
	height: 100%;
	min-height: 132px;
	border-radius: 0;
	overflow: hidden;
	background: var(--img_placeholder);
}

.column-card--related .column-card__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.column-card--related .card-body {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: var(--space-sm);
	min-width: 0;
	padding: var(--space-md);
}

.column-card--related .card-body__title {
	margin: 0;
	font-size: 15px;
	line-height: 1.7;
}

@media (min-width: 1024px) {
	.column-single-content {
		font-size: 16px;
	}

	.column-single-content h2 {
		padding: 16px 20px 16px 60px;
		font-size: 22px;
	}

	.column-single-content h2::before {
		left: 20px;
		width: 30px;
		height: 30px;
	}

	.column-single-content h3 {
		font-size: 18px;
	}

	/* PCは2カラム */
	.column-related__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.column-card--related .column-card__link {
		grid-template-columns: 160px minmax(0, 1fr);
		min-height: 150px;
	}

	.column-card--related .column-card__thumb {
		min-height: 150px;
	}
}
/* =========================================================
   固定ページ共通
   ========================================================= */

.static-page-main {
	padding: 40px var(--page-gutter) 80px;
}

.static-page-article {
	width: 100%;
	max-width: var(--content-max);
	margin-inline: auto;
}

.static-page-header {
	margin-bottom: 40px;
}

.static-page-content {
	font-size: 15px;
	line-height: 2;
	color: var(--text, #333);
}

/* 本文直下の先頭・末尾余白を消す */
.static-page-content > :first-child {
	margin-top: 0;
}

.static-page-content > :last-child {
	margin-bottom: 0;
}

/* 見出し */
.static-page-content h2 {
	margin: 56px 0 24px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--line, #d8d8d8);
	font-size: 22px;
	line-height: 1.5;
}

.static-page-content h3 {
	margin: 40px 0 16px;
	font-size: 18px;
	line-height: 1.6;
}

.static-page-content h4 {
	margin: 32px 0 12px;
	font-size: 16px;
	line-height: 1.6;
}

/* テキスト */
.static-page-content p {
	margin: 0 0 24px;
}

/* リスト */
.static-page-content ul,
.static-page-content ol {
	margin: 0 0 24px;
	padding-left: 1.5em;
}

.static-page-content li + li {
	margin-top: 8px;
}

/* リンク */
.static-page-content a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.static-page-content a:hover {
	text-decoration: none;
}

/* 区切り線 */
.static-page-content hr {
	margin: 48px 0;
	border: 0;
	border-top: 1px solid var(--line, #d8d8d8);
}

/* 引用 */
.static-page-content blockquote {
	margin: 32px 0;
	padding: 20px 24px;
	border-left: 3px solid var(--line, #d8d8d8);
	background: #f7f7f7;
}

.static-page-content blockquote > :last-child {
	margin-bottom: 0;
}

/* 表 */
.static-page-content .wp-block-table {
	margin: 32px 0;
	overflow-x: auto;
}

.static-page-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	line-height: 1.7;
}

.static-page-content th,
.static-page-content td {
	padding: 14px 16px;
	border: 1px solid var(--line, #d8d8d8);
	text-align: left;
	vertical-align: top;
}

.static-page-content th {
	background: #f7f7f7;
	font-weight: 600;
}

/* 画像 */
.static-page-content img {
	max-width: 100%;
	height: auto;
}

/* サイトマップ等のリンク一覧 */
.static-page-content .wp-block-navigation,
.static-page-content .wp-block-page-list {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.static-page-content .wp-block-navigation-item,
.static-page-content .wp-block-pages-list__item {
	border-bottom: 1px solid var(--line, #d8d8d8);
}

.static-page-content .wp-block-navigation-item:first-child,
.static-page-content .wp-block-pages-list__item:first-child {
	border-top: 1px solid var(--line, #d8d8d8);
}

.static-page-content .wp-block-navigation-item a,
.static-page-content .wp-block-pages-list__item a {
	display: block;
	position: relative;
	padding: 18px 36px 18px 4px;
	text-decoration: none;
}

.static-page-content .wp-block-navigation-item a::after,
.static-page-content .wp-block-pages-list__item a::after {
	content: "＞";
	position: absolute;
	top: 50%;
	right: 4px;
	transform: translateY(-50%);
	font-size: 12px;
}

.static-page-content .wp-block-navigation-item a:hover,
.static-page-content .wp-block-pages-list__item a:hover {
	opacity: 0.65;
}

@media (min-width: 1024px) {
	.static-page-main {
		padding-top: 64px;
		padding-bottom: 120px;
	}

	.static-page-header {
		margin-bottom: 56px;
	}

	.static-page-content {
		font-size: 16px;
	}

	.static-page-content h2 {
		margin-top: 64px;
		font-size: 24px;
	}
}

/* =========================================================
   施術カテゴリ一覧：エリア絞り込み
   ========================================================= */
.treatment-area-filter {
	margin-bottom: var(--space-card-gap);
}

.treatment-area-filter__details {
	border: 1px solid var(--line);
	border-radius: 12px;
	background: #fff;
	overflow: hidden;
}

.treatment-area-filter__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	min-height: 56px;
	padding: 0 var(--space-md);
	color: var(--text_dark);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.treatment-area-filter__summary::-webkit-details-marker {
	display: none;
}

.treatment-area-filter__summary-icon {
	position: relative;
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
}

.treatment-area-filter__summary-icon::before,
.treatment-area-filter__summary-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 1px;
	background: var(--brand_green);
	transform: translate(-50%, -50%);
}

.treatment-area-filter__summary-icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
	transition: transform 0.2s ease;
}

.treatment-area-filter__details[open]
	.treatment-area-filter__summary-icon::after {
	transform: translate(-50%, -50%) rotate(0deg);
}

.treatment-area-filter__body {
	max-height: min(60vh, 520px);
	padding: 0 var(--space-md) var(--space-lg);
	overflow: hidden;
}

.treatment-area-filter__form {
	display: flex;
	flex-direction: column;
	min-height: 0;
	max-height: min(60vh, 520px);
	padding-top: var(--space-md);
	border-top: 1px solid var(--line);
}

.treatment-area-filter__selection:empty {
	display: none;
}

.treatment-area-filter__chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	min-height: 36px;
	padding: 6px 12px;
	border: 1px solid var(--accent_purple);
	border-radius: 30px;
	background: var(--bg_purple);
	color: var(--brand_purple);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
}

.treatment-area-filter__chip-close {
	font-size: 16px;
	line-height: 1;
}

.treatment-area-filter__regions {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--space-lg);
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding-right: var(--space-xs);
	padding-bottom: var(--space-lg);
}

.treatment-area-filter__region {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.treatment-area-filter__region-title {
	margin: 0;
	color: var(--text_dark);
	font-size: 14px;
	font-weight: 700;
}

.treatment-area-filter__options {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
}

.treatment-area-filter__option {
	position: relative;
	cursor: pointer;
}

.treatment-area-filter__option input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.treatment-area-filter__option span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 8px 16px;
	border: 1px solid transparent;
	border-radius: 30px;
	background: var(--bg_purple);
	color: var(--brand_purple);
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
}

.treatment-area-filter__option input:checked + span {
	border-color: var(--accent_purple);
	background: var(--accent_purple);
	color: #fff;
}

.treatment-area-filter__option input:focus-visible + span {
	outline: 2px solid var(--brand_green);
	outline-offset: 2px;
}

.treatment-area-filter__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 48px;
	padding: 8px 20px;
	border: 0;
	border-radius: 30px;
	background: var(--txt_purple);
	color: #fff;
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}

.treatment-area-filter__summary-main {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	min-width: 0;
}
.treatment-area-filter button[type="submit"] {

	margin-block: var(--space-md);

}
@media (hover: hover) {
	.treatment-area-filter__option:hover span {
		border-color: var(--accent_purple);
	}

	.treatment-area-filter__submit:hover {
		filter: brightness(1.06);
	}
}

@media (min-width: 1024px) {
	.treatment-area-filter__summary {
		padding-right: var(--space-lg);
		padding-left: var(--space-lg);
		font-size: 16px;
	}

	.treatment-area-filter__body {
		padding-right: var(--space-lg);
		padding-bottom: var(--space-lg);
		padding-left: var(--space-lg);
	}

	.treatment-area-filter__regions {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--space-lg);
		row-gap: var(--space-block);
	}

	.treatment-area-filter__option span {
		font-size: 14px;
	}

	.treatment-area-filter__submit {
		width: min(100%, 320px);
		align-self: center;
		font-size: 15px;
	}
}

/* =========================================================
   施術カテゴリ一覧：選択中エリアの追従チップ
   ========================================================= */
.treatment-area-filter__selection {

	display: inline-flex;
	width: auto;
	max-width: 100%;
	margin: 0;

}

.treatment-area-filter__selection:empty {
	display: none;
}

@media (min-width: 1024px) {
	.treatment-area-filter__selection {

	}
}