@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ（Beyond Clinic 京都・祇園）
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ==========================================================================
   方針

   確定版HTML（■クライアント確認済みHTML/index (10).html・独自CSS 258ルール）の
   見た目に寄せるための上書き。ただし**確定版CSSのコピペではない**。
   構造はSWELLブロックのまま維持し（先方が編集できる状態を壊さない）、
   SWELL側のクラスを狙って値を移し替えている＝「翻訳」。

   SWELLのCSSは :where() を多用していて特異度0なので、!important なしで勝てる。
   各ブロックの見出しコメントに、値の出典セレクタを書いてある。
   ========================================================================== */

/* ==========================================================================
   1. デザイントークン（出典: index (10).html の :root）
   --teal は名前に反してベージュゴールド。変数名は元デザインに合わせている
   ========================================================================== */
:root {
	--bc-accent: #b8a88a;
	--bc-accent-dark: #9a8a6c;
	--bc-accent-light: #d4c8b0;
	--bc-gray-bg: #f5f5f5;
	--bc-gray-light: #eeeeee;
	--bc-gray: #999999;
	--bc-gray-dark: #666666;
	--bc-text: #333333;
	--bc-black: #222222;
	--bc-line: #06c755;

	--bc-ff-en: 'EB Garamond', 'Cormorant Garamond', serif;
	--bc-ff-jp: 'Shippori Mincho', 'Noto Serif JP', serif;
	--bc-ff-jp-sans: 'Noto Sans JP', sans-serif;

	/* SWELLの字間はカスタマイザーが normal/.025/.05/.1em しか選べないので、
	   デザインの 0.08em はここで上書きする */
	--swl-letter_spacing: 0.08em;

	/* 本文の基準サイズ。確定版 body { font-size:15px } に対しSWELLの既定は16px。
	   `.post_content{font-size:var(--swl-fz--content,16px)}` なのでここが効く */
	--swl-fz--content: 15px;
}

/* ==========================================================================
   2. 基本タイポグラフィ（出典: body / .sec-container）
   ========================================================================== */
body {
	font-family: var(--bc-ff-jp);
	font-size: 15px;   /* 確定版 body { font-size:15px }。SWELLの既定は16px */
	letter-spacing: 0.08em;
	font-feature-settings: "palt";
	line-height: 2;
}

/* 英数字の見出し・ラベルはガラモン */
.bc-section-en,
.swell-block-fullWide h1,
.swell-block-fullWide h3 {
	font-family: var(--bc-ff-en);
}

/* 表組みや細かい実務テキストはゴシックの方が読みやすい */
.bc-access-table,
.wp-block-table {
	font-family: var(--bc-ff-jp-sans);
	letter-spacing: 0.04em;
}

/* ==========================================================================
   3. セクション見出し
   出典: .sec-header-en 14px/500/.2em/accent/mb12px
         .sec-header-title 28px/500/明朝/.08em/--text
         .sec-header-lead 14px/lh2/--gray-dark/mt20px
   SWELLに該当ブロックスタイルが無いENラベルは自前クラス bc-section-en
   ========================================================================== */
.bc-section-en {
	margin-bottom: 12px;
	color: var(--bc-accent);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.2em;
	line-height: 1.4;
	text-transform: uppercase;
}

.post_content h2.is-style-section_ttl {
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	font-family: var(--bc-ff-jp);
	font-size: 28px;
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1.6;
	color: var(--bc-text);
}

.post_content h2.is-style-section_ttl::before,
.post_content h2.is-style-section_ttl::after {
	content: none;
}

/* 見出し直後のリード文 */
.is-style-section_ttl + p {
	margin-top: 20px;
	font-size: 14px;
	line-height: 2;
	color: var(--bc-gray-dark);
}

/* 暗い背景・アクセント背景に乗るセクション */
.bc-on-dark.bc-section-en {
	color: #fff;
}

/* 白文字にするセクションは見出し側に bc-on-dark を付ける。
   かつて [style*="color:#fff"] で判定していたが、これは
   background-color:#ffffff にも部分一致して白背景の見出しまで白文字にしてしまう */
.post_content h2.is-style-section_ttl.bc-on-dark {
	color: #fff;
}

.post_content h2.is-style-section_ttl.bc-on-dark + p {
	color: rgba(255, 255, 255, 0.85);
}

/* ==========================================================================
   4. VIEW MORE ボタン
   出典: .btn-viewmore min-width180 / height48 / border 1px accent / color accent
         .btn-viewmore-white は border-color と color を白に
   ========================================================================== */
.wp-block-button.is-style-btn_line .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 180px;
	height: 48px;
	padding: 0 32px;
	border: 1px solid var(--bc-accent);
	border-radius: 0;
	background: transparent;
	color: var(--bc-accent);
	font-family: var(--bc-ff-en);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.2em;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.wp-block-button.is-style-btn_line .wp-block-button__link:hover {
	background: var(--bc-accent);
	color: #fff;
}

.wp-block-button.is-style-btn_line.bc-on-dark .wp-block-button__link {
	border-color: #fff;
	color: #fff;
}

.wp-block-button.is-style-btn_line.bc-on-dark .wp-block-button__link:hover {
	background: #fff;
	color: var(--bc-accent);
}

/* ==========================================================================
   5. FV
   出典: .hero-title 48px/EB Garamond/400/.08em/lh1.3/mb24px
         .hero-en 16px/.25em/mb16px
   ========================================================================== */
.swell-block-fullWide h1 {
	margin-bottom: 24px;
	font-size: 48px;
	font-weight: 400;
	letter-spacing: 0.08em;
	line-height: 1.3;
}

.swell-block-fullWide h1 + p,
.swell-block-fullWide h1 ~ p {
	line-height: 2;
}

@media (max-width: 768px) {
	.swell-block-fullWide h1 {
		font-size: 32px;
	}

	.post_content h2.is-style-section_ttl {
		font-size: 22px;
	}
}

/* --------------------------------------------------------------------------
   5-2. FV下端の特徴バンド（深夜23時まで診療 / 完全予約制 / 祇園四条駅徒歩3分）
   出典: .hero height:600px（＝FV本体460px＋バンド140px）
         .hero-boxes  position:absolute; bottom:0; left:0; right:0; display:flex
         .hero-box    flex:1; height:140px; background:rgba(184,168,138,.92);
                      白文字・中央寄せ・border-right 1px
         .hero-box-icon 32px/mb12px  .hero-box-title 15px/500  .hero-box-text 12px/op.85

   ★実装メモ: バンドはFV内にabsoluteで貼るのではなく、独立したフルワイドセクション
   (#fvband) を負マージンで重ねている。SWELLが
   `.swell-block-fullWide__inner { position:relative; z-index:1 }` を当てているため、
   FV内のabsoluteは解決先がinner（max-width:1100）になり幅も位置も内側の箱に縛られる。
   inner を static にすると本文が `.has-bg-img::before`（background-color:inherit /
   z-index:1 のオーバーレイ）の下に潜って暗くなるので触れない。
   -------------------------------------------------------------------------- */
/* 帯は margin-top:-140px でFVに「重なる」ので、FV自体を .hero と同じ600pxにする
   （460px＝600−140 にすると重なった分だけ全体が縮んで実測491pxになった）

   ブロック側は pc-py-0 / sp-py-0（＝padding:0!important）にしてあり、
   高さと内容の縦位置はここで作る。確定版は
   `.hero{height:600px}` ＋ `.hero-content{position:absolute; top:30%;
   transform:translate(-50%,-50%)}` ＝ 内容の中心が箱の30%の位置。
   flexで縦中央（50%）にしてから inner を上に 120px（=600pxの20%）ずらすと 30% に一致する。
   （SWELLが inner に position:relative を当てているので top がそのまま効く）

   ⚠️ `top:-20%` ではダメだった（実測）。% の top は包含ブロックの**指定**高さ基準で、
   #fv の高さは min-height 由来＝指定は auto なので % が 0 に潰れる。px で書くこと。 */
#fv {
	min-height: 600px;
	display: flex;
	align-items: center;
}

#fv .swell-block-fullWide__inner {
	width: 100%;
}

@media (min-width: 769px) {
	#fv .swell-block-fullWide__inner {
		top: -120px;
	}
}

/* SWELLの `.swell-block-fullWide__inner > * { margin-bottom:2em }` が最終要素にも
   効いてFVが32px（=2em）伸びるので、最後だけ落とす */
#fv .swell-block-fullWide__inner > *:last-child {
	margin-bottom: 0;
}

#fvband {
	position: relative;
	z-index: 2;
	margin-top: -140px;
	padding: 0;
	background: none;
}

#fvband .swell-block-fullWide__inner {
	max-width: none;
	padding: 0;
	margin: 0;
}

#fvband .swell-block-columns,
#fvband .swell-block-columns__inner {
	margin: 0;
	gap: 0;
	max-width: none;
	flex-wrap: nowrap;
}

#fvband .swell-block-column {
	flex: 1 1 0;
	width: auto;
	min-height: 140px;
	margin: 0;
	padding: 0 0.8em;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: rgba(184, 168, 138, 0.92);
	border-right: 1px solid rgba(255, 255, 255, 0.25);
	color: #fff;
	text-align: center;
}

#fvband .swell-block-column:last-child {
	border-right: none;
}

#fvband .swell-block-column p {
	margin: 0;
	line-height: 1.6;
}

#fvband .swell-block-column i {
	font-size: 32px;
	margin-bottom: 12px;
}

#fvband .swell-block-column strong {
	font-size: 15px;
	font-weight: 500;
}

#fvband .swell-block-column p:last-child {
	margin-top: 4px;
	font-size: 12px;
	opacity: 0.85;
}

@media (max-width: 768px) {
	#fv {
		min-height: 460px;
	}

	/* SPは重ねず、FVの下に普通に積む（140px×3で画面を潰さないため） */
	#fvband {
		margin-top: 0;
	}

	#fvband .swell-block-columns__inner {
		flex-wrap: wrap;
	}

	/* 確定版SPは .hero-box が flex-direction:row / gap:16px / padding:20px ＝
	   アイコン左・テキスト右。中身は p が3つ（アイコン / 見出し / 説明）で
	   兄弟をまとめられないので、grid-template-areas でアイコンを2行ぶち抜きにする */
	#fvband .swell-block-column {
		flex: 1 1 100%;
		min-height: 0;
		display: grid;
		grid-template-columns: auto 1fr;
		grid-template-areas:
			"icon title"
			"icon text";
		align-items: center;
		column-gap: 16px;
		padding: 16px 20px;
		text-align: left;
		border-right: none;
		border-bottom: 1px solid rgba(255, 255, 255, 0.25);
	}

	#fvband .swell-block-column p:nth-child(1) {
		grid-area: icon;
	}

	#fvband .swell-block-column p:nth-child(2) {
		grid-area: title;
	}

	#fvband .swell-block-column p:nth-child(3) {
		grid-area: text;
	}

	#fvband .swell-block-column i {
		font-size: 24px;
		margin-bottom: 0;
	}

	#fvband .swell-block-column p:last-child {
		margin-top: 0;
	}
}

/* --------------------------------------------------------------------------
   5-3. ヘッダーの高さ（出典: .header-top height:40px / .header-main height:80px）
   -------------------------------------------------------------------------- */
.l-header__bar {
	min-height: 40px;
}

.l-header__bar .l-header__barInner {
	min-height: 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.l-header__inner {
	min-height: 80px;
}

/* ==========================================================================
   6. コンセプト3本
   出典: .concept-block-title 20px/EB Garamond/500/accent/.03em/mb12px
   ========================================================================== */
.swell-block-columns h3 {
	margin-bottom: 12px;
	padding: 0;
	border: none;
	background: none;
	font-size: 20px;
	font-weight: 500;
	letter-spacing: 0.03em;
	color: var(--bc-accent);
}

.swell-block-columns h3::before,
.swell-block-columns h3::after {
	content: none;
}

/* ==========================================================================
   7. 診療メニュー12枚（loos/box-menu）
   出典: .menu-card height160 / bg rgba(255,255,255,.95) / radius4 / 中央寄せ
         .menu-card-icon 56px円 / bg accent / mb14px（アイコン自体は白）
         .menu-card-title 14px/500/--text/lh1.5
   ※ 白カード＋アクセント色の丸アイコン＋濃い文字。背景色と文字色を逆にしないこと
   ========================================================================== */
.swell-block-box-menu .swell-block-box-menu__item {
	background: rgba(255, 255, 255, 0.95);
	border: none;
	border-radius: 4px;
	overflow: hidden;
}

.swell-block-box-menu .swell-block-box-menu__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 160px;
	padding: 1.5em 0.8em;
	text-align: center;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.swell-block-box-menu .swell-block-box-menu__link:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

/* アイコンを56pxのアクセント色の円にする */
.swell-block-box-menu .swell-block-box-menu__figure {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin: 0 0 14px;
	background: var(--bc-accent);
	border-radius: 50%;
	flex-shrink: 0;
}

.swell-block-box-menu .swell-block-box-menu__figure i {
	color: #fff;
	font-size: 22px;
	line-height: 1;
}

.swell-block-box-menu .swell-block-box-menu__text {
	font-family: var(--bc-ff-jp);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.04em;
	color: var(--bc-text);
}

/* 出典（SP）: @768 .menu-card{height:140px} .menu-grid{gap:12px}
                 .menu-card-icon{48px} i{20px} .menu-card-title{12px}
                 @480 .menu-card{height:120px} .menu-grid{gap:10px} */
@media (max-width: 768px) {
	/* ⚠️ gap は `__inner` に flex-gap で足してはいけない。SWELLは
	   `--the-gap` を margin-left で表現し、item の幅を
	   `calc(var(--the-box-width) - var(--the-gap))` で出しているので、
	   実gapを足すと1行に収まらなくなり2列→1列に崩れる（実測で12枚が縦一列になった）。
	   → 変数 `--the-gap` を上書きする */
	.swell-block-box-menu {
		--the-gap: 12px;
	}

	.swell-block-box-menu .swell-block-box-menu__link {
		min-height: 140px;
		padding: 1.1em 0.6em;
	}

	.swell-block-box-menu .swell-block-box-menu__figure {
		width: 48px;
		height: 48px;
		margin-bottom: 10px;
	}

	.swell-block-box-menu .swell-block-box-menu__figure i {
		font-size: 20px;
	}

	.swell-block-box-menu .swell-block-box-menu__text {
		font-size: 12px;
	}
}

@media (max-width: 480px) {
	.swell-block-box-menu {
		--the-gap: 10px;
	}

	.swell-block-box-menu .swell-block-box-menu__link {
		min-height: 120px;
		padding: 0.9em 0.5em;
	}

	.swell-block-box-menu .swell-block-box-menu__figure {
		width: 44px;
		height: 44px;
		margin-bottom: 8px;
	}

	.swell-block-box-menu .swell-block-box-menu__figure i {
		font-size: 18px;
	}
}

/* ==========================================================================
   8. キャンペーンバナー（横スクロールのリッチカラム）
   出典: .banner-slider-track の自動スクロール（確定版はJSカルーセル）
   SWELLに該当ブロックが無いので、スクロール可能リッチカラムに
   CSSアニメーションを足して同じ見え方にしている。
   構造はブロックのままなので、先方は画像を差し替え・追加できる。
   ホバー・タッチ中は停止する
   ========================================================================== */
#campaign .swell-block-columns__inner {
	animation: bc-marquee 60s linear infinite;
	width: max-content;
}

#campaign:hover .swell-block-columns__inner,
#campaign:focus-within .swell-block-columns__inner {
	animation-play-state: paused;
}

#campaign .wp-block-image {
	margin: 0;
}

#campaign .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* 列幅は colWidth で px 指定している（バナー実寸 300x250）。
   ここを % にすると width:max-content の中で解決先が無くなり暴走する */
#campaign .swell-block-column {
	flex: 0 0 auto;
}

/* スクロールヒントは自動で流れるので隠す */
#campaign .c-scrollHint {
	display: none;
}

@keyframes bc-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	#campaign .swell-block-columns__inner {
		animation: none;
	}
}

/* ==========================================================================
   8-2. 医師紹介カード（写真なし）
   出典: .doctor-grid-no-photo { grid-template-columns:1fr; max-width:800px; margin:0 auto }
         .doctor-info { background:var(--gray-bg); padding:50px; border-radius:8px }
         .doctor-header { display:flex; align-items:baseline; gap:20px;
                          margin-bottom:30px; padding-bottom:24px;
                          border-bottom:1px solid var(--gray-light); flex-wrap:wrap }
         .doctor-position 13px/accent   .doctor-name 22px
         .doctor-name span 13px/gray/EN/margin-left:16px（inline）
         .doctor-section { margin-bottom:24px }（最後は0）
         .doctor-section h4 { 13px/500/accent; padding-left:12px;
                              border-left:2px solid accent }
         .doctor-section p  { 14px; line-height:2; color:gray-dark }
   箱は core/group（.bc-doctor-card / .bc-doctor-head）
   ========================================================================== */
.bc-doctor-card {
	max-width: 800px;
	margin: 0 auto;
	padding: 50px;
	background: var(--bc-gray-bg);
	border-radius: 8px;
	text-align: left;
}

.bc-doctor-head {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 20px;
	margin-bottom: 30px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--bc-gray-light);
}

.bc-doctor-card .bc-doctor-position {
	margin: 0;
	flex-shrink: 0;
	font-size: 13px;
	color: var(--bc-accent);
}

/* SWELLはh3に飾りを付けるので、確定版のプレーンな見出しに戻す */
.bc-doctor-card h3.bc-doctor-name {
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	font-family: var(--bc-ff-jp-sans);
	font-size: 22px;
	font-weight: 500;
	letter-spacing: 0.15em;
}

.bc-doctor-card h3.bc-doctor-name::before,
.bc-doctor-card h3.bc-doctor-name::after {
	content: none;
}

.bc-doctor-card .bc-doctor-en {
	margin-left: 16px;
	font-family: var(--bc-ff-en);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.08em;
	color: var(--bc-gray);
}

/* .doctor-section h4：アクセント色の縦罫線付きラベル */
.bc-doctor-card h4.bc-doctor-label {
	margin: 24px 0 10px;
	padding: 0 0 0 12px;
	border: none;
	border-left: 2px solid var(--bc-accent);
	background: none;
	font-size: 13px;
	font-weight: 500;
	color: var(--bc-accent);
}

.bc-doctor-card h4.bc-doctor-label:first-of-type {
	margin-top: 0;
}

.bc-doctor-card h4.bc-doctor-label::before,
.bc-doctor-card h4.bc-doctor-label::after {
	content: none;
}

.bc-doctor-card p:not(.bc-doctor-position) {
	margin: 0;
	font-size: 14px;
	line-height: 2;
	color: var(--bc-gray-dark);
}

@media (max-width: 768px) {
	.bc-doctor-card {
		padding: 30px 20px;
	}

	.bc-doctor-head {
		gap: 4px 20px;
	}
}

/* ==========================================================================
   9. 院内紹介ギャラリー
   出典: .clinic-gallery-main img { height:420px; object-fit:cover }（SPは240px）
         .clinic-gallery-main { margin-bottom:16px }
         .clinic-gallery-thumbs { display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
         .clinic-thumb / .clinic-thumb img { height:120px }（SPは100px）
         .clinic-thumb.active { border-color: var(--teal) }

   core/gallery の1枚目をメイン、2枚目以降をサムネとしてCSSで並べる。
   クリックでメインと入れ替えるJSは child-theme/bc-front.js（src/altを交換するので
   どの画像も失われず、6枚すべてメインにできる）。

   ★確定版はサムネ6枚（メインは1枚目の複製）だが、こちらはブロックの6枚を
   「メイン1＋サムネ5」に使うのでサムネは5枚になる。3列だと最終行に穴が空くので、
   flexで折り返して最終行を中央寄せする（穴が空いて欠品に見えるのを避ける）。

   ⚠️ 地雷その1: **img に height を書いても効かない（!important でも無効）**
   WPコアは figure.wp-block-image を `display:flex; flex-direction:column` にして
   img に `flex:1 0 0%` を当てる。列方向flexなので主軸＝縦＝flex-basis(0%)が
   height に勝つ。→ **高さは figure 側に指定して、img は height:100% で追従させる。**
   （imgに height:420px!important を入れて実測693pxのまま＝無効を確認した）

   ⚠️ 地雷その2: 特異度。WPコアの
   `.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image)`
   は `:not(#individual-image)` でIDを1つ持つ＝(1,4,1)。クラスをいくら足しても
   (0,5,1) では負ける。→ セレクタ先頭に `#clinic` を付けて勝たせる。
   ========================================================================== */
#clinic .wp-block-gallery.has-nested-images.bc-clinic-gallery {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}

/* サムネ（2枚目以降）＝3列。高さは figure 側に入れる（上記「地雷その1」） */
#clinic .wp-block-gallery.has-nested-images.bc-clinic-gallery figure.wp-block-image {
	max-width: none;
	flex: 0 0 auto;
	width: calc((100% - 32px) / 3);
	height: 120px;
	margin: 0;
	border-radius: 4px;
	overflow: hidden;
}

/* 1枚目＝メイン。全幅・420px */
#clinic .wp-block-gallery.has-nested-images.bc-clinic-gallery figure.wp-block-image:first-child {
	width: 100%;
	height: 420px;
}

#clinic .wp-block-gallery.has-nested-images.bc-clinic-gallery figure.wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 4px;
}

#clinic .wp-block-gallery.has-nested-images.bc-clinic-gallery figure.wp-block-image:not(:first-child) img {
	cursor: pointer;
	opacity: 0.65;
	transition: opacity 0.3s ease;
}

#clinic .wp-block-gallery.has-nested-images.bc-clinic-gallery figure.wp-block-image:not(:first-child) img:hover,
#clinic .wp-block-gallery.has-nested-images.bc-clinic-gallery figure.wp-block-image.is-active img {
	opacity: 1;
}

/* .clinic-thumb.active のアクセント枠 */
#clinic .wp-block-gallery.has-nested-images.bc-clinic-gallery figure.wp-block-image.is-active {
	outline: 2px solid var(--bc-accent);
	outline-offset: 0;
	border-radius: 4px;
}

@media (max-width: 768px) {
	#clinic .wp-block-gallery.has-nested-images.bc-clinic-gallery figure.wp-block-image {
		height: 100px;
	}

	#clinic .wp-block-gallery.has-nested-images.bc-clinic-gallery figure.wp-block-image:first-child {
		height: 240px;
	}
}

/* ==========================================================================
   10. アクセス情報テーブル
   出典: .access-table th width90 / weight400 / opacity.8
   ========================================================================== */
/* SWELLは .post_content table の全セルに罫線を引くので、
   .post_content を含めた特異度で下線だけに戻す */
.post_content .bc-access-table {
	width: 100%;
	border: none;
	border-collapse: collapse;
	font-size: 14px;
	line-height: 1.9;
}

.post_content .bc-access-table tr,
.post_content .bc-access-table th,
.post_content .bc-access-table td {
	padding: 0.9em 0.4em;
	border: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
	background: transparent;
	text-align: left;
	vertical-align: top;
}

.post_content .bc-access-table th {
	width: 90px;
	font-weight: 400;
	opacity: 0.8;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   10-2. ACCESSの2カラム（左=情報 / 右=地図）
   出典: .access-grid { display:grid; grid-template-columns:1fr 1.3fr; gap:50px }
         .access-logo img { height:30px; width:auto }（左寄せ）
         .access-line-btn { width:100%; height:52px; radius:4px; font-size:15px/500 }
         .access-map { height:340px; border-radius:4px; overflow:hidden }（SP 280px）
         SP（〜768px）は .access-grid が 1カラム

   SWELLのリッチカラムは flex＋列ごとの width 指定なので 1:1.3 が作れない。
   inner を grid に差し替えて、列側の width/padding を解除する
   -------------------------------------------------------------------------- */
#access .swell-block-columns,
#access .swell-block-columns__inner {
	margin: 0;
	max-width: none;
}

#access .swell-block-columns__inner {
	display: grid;
	grid-template-columns: 1fr 1.3fr;
	gap: 50px;
}

#access .swell-block-column {
	width: auto;
	margin: 0;
	padding: 0;
}

/* ロゴは左寄せ・高さ30px（wp-block-image は既定でブロック幅いっぱい＋中央寄せ） */
#access .wp-block-image {
	margin: 0 0 28px;
	text-align: left;
}

#access .wp-block-image img {
	height: 30px;
	width: auto;
	max-width: 100%;
}

/* LINE予約ボタンは左カラム幅いっぱい・52px */
#access .wp-block-buttons {
	margin-top: 28px;
}

#access .wp-block-button {
	width: 100%;
}

#access .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 52px;
	padding: 0;
	border-radius: 4px;
	font-size: 15px;
	font-weight: 500;
}

#access .bc-access-map {
	height: 340px;
	border-radius: 4px;
	overflow: hidden;
}

#access .bc-access-map iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

@media (max-width: 768px) {
	#access .swell-block-columns__inner {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	#access .bc-access-map {
		height: 280px;
	}
}

/* ==========================================================================
   11. お知らせ / コラム（loos/post-list の描画結果）
   出典: .news-item（padding 20px 0 / border-bottom）
         .column-card（radius8 / shadow 0 2px 16px rgba(0,0,0,.06)）
   ========================================================================== */
.p-postList.-type-list .p-postList__item {
	border-bottom: 1px solid var(--bc-gray-light);
}

.p-postList.-type-list .p-postList__link {
	padding: 20px 0;
}

.p-postList.-type-card .p-postList__link {
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.p-postList.-type-card .p-postList__link:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
}

.p-postList__title {
	font-family: var(--bc-ff-jp);
	letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   お知らせ（シンプル型）を確定版の .news-item に合わせる
   出典: .news-list { max-width:800px; margin:0 auto }
         .news-item { display:flex; align-items:center; gap:20px; padding:20px 0;
                      border-bottom:1px solid var(--gray-light) }
         .news-item-meta { display:flex; align-items:center; gap:12px; flex-shrink:0 }
         .news-date { EN font / 14px / gray / min-width:100px }
         .news-cat  { min-width:90px; height:24px; radius:12px; 11px; bg accent; 白 }
         .news-title { flex:1; font-size:14px }
         SP（〜768px）: grid 1fr 3fr・メタを縦積み・padding 16px 0

   SWELLのシンプル型は .p-postList__body の中に .p-postList__meta（日付＋カテゴリ）と
   .p-postList__title が縦に並ぶので、body を横並びに組み替える
   -------------------------------------------------------------------------- */
#news .p-postList.-type-simple {
	max-width: 800px;
	margin: 0 auto;
}

.p-postList.-type-simple .p-postList__item {
	border-bottom: 1px solid var(--bc-gray-light);
}

.p-postList.-type-simple .p-postList__link {
	padding: 20px 0;
}

.p-postList.-type-simple .p-postList__body {
	display: flex;
	align-items: center;
	gap: 20px;
}

.p-postList.-type-simple .p-postList__meta {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
	margin: 0;
}

.p-postList.-type-simple .c-postTimes {
	font-family: var(--bc-ff-en);
	font-size: 14px;
	color: var(--bc-gray);
	min-width: 100px;
	white-space: nowrap;
}

/* SWELLは日付に icon-posted（時計）、カテゴリに icon-folder（フォルダ）を付ける。
   確定版には無いので両方消す */
.p-postList.-type-simple .c-postTimes__posted::before,
.p-postList.-type-simple .p-postList__cat::before {
	content: none;
}

/* カテゴリはアクセント色のピル */
.p-postList.-type-simple .p-postList__cat {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 90px;
	height: 24px;
	padding: 0 12px;
	background: var(--bc-accent);
	border-radius: 12px;
	color: #fff;
	font-size: 11px;
	line-height: 1;
	white-space: nowrap;
}

.p-postList.-type-simple .p-postList__title {
	flex: 1;
	margin: 0;
	font-size: 14px;
	line-height: 1.7;
}

@media (max-width: 768px) {
	.p-postList.-type-simple .p-postList__link {
		padding: 16px 0;
	}

	.p-postList.-type-simple .p-postList__body {
		display: grid;
		grid-template-columns: 1fr 3fr;
		align-items: start;
		gap: 0 12px;
	}

	.p-postList.-type-simple .p-postList__meta {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}

	.p-postList.-type-simple .c-postTimes {
		min-width: 0;
		font-size: 11px;
		white-space: normal;
		line-height: 1.5;
	}

	.p-postList.-type-simple .p-postList__cat {
		min-width: 0;
		width: 100%;
		padding: 0 6px;
		font-size: 10px;
	}

	.p-postList.-type-simple .p-postList__title {
		font-size: 13px;
	}
}

/* 投稿リストの VIEW MORE は SWELL の全幅ボタンなので、
   セクションの .btn-viewmore（180x48の罫線ボタン）に合わせる */
.is-style-more_btn {
	text-align: center;
}

.is-style-more_btn .btn_text {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 180px;
	height: 48px;
	padding: 0 32px;
	border: 1px solid var(--bc-accent);
	border-radius: 0;
	background: transparent;
	color: var(--bc-accent);
	font-family: var(--bc-ff-en);
	font-size: 13px;
	letter-spacing: 0.2em;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.is-style-more_btn .btn_text::after {
	content: none;
}

.is-style-more_btn .btn_text:hover {
	background: var(--bc-accent);
	color: #fff;
}

/* ==========================================================================
   12. CTA
   出典: .cta-btn min-width180 / height52 / gap10 / 14px
   ========================================================================== */
/* .cta-text { font-size:18px; margin-bottom:28px } */
#cta p {
	font-size: 18px;
	margin-bottom: 28px;
}

#cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-width: 180px;
	height: 52px;
	padding: 0 28px;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.08em;
}

/* 確定版はボタン内に <i>（LINE / カレンダー / 電話）が入る。
   ボタン文字列にHTMLを混ぜるとエディタのRichTextが正規化してクラスを落とすので、
   アイコンはCSSの ::before で足す。並び順は build_top.py の s10_cta() と対応 */
#cta .wp-block-button__link::before,
.bc-footer-btn:not(.bc-footer-btn--line) .wp-block-button__link::before,
#access .wp-block-button__link::before {
	font-family: "Font Awesome 6 Brands";
	font-weight: 400;
	content: "\f3c0";              /* fa-line */
	font-size: 1.15em;
}

#cta .wp-block-button:nth-child(2) .wp-block-button__link::before {
	font-family: "Font Awesome 6 Free";
	font-weight: 400;
	content: "\f073";              /* far fa-calendar-alt */
}

#cta .wp-block-button:nth-child(3) .wp-block-button__link::before {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	content: "\f879";              /* fas fa-phone-alt */
}

/* ==========================================================================
   13. ヘッダー / フッターの微調整
   出典: .header-top height40 / .header-main height80 / .header-reserve-btn 90x36
   色はカスタマイザー側で設定済み（build_settings.py）。ここは寸法と字送りだけ
   ========================================================================== */
.l-header__bar {
	--bar-height: 40px;
	font-size: 12px;
	letter-spacing: 0.04em;
}

.c-gnav > li > a {
	font-family: var(--bc-ff-en);
	font-size: 13px;
	letter-spacing: 0.1em;
}

.l-header__customBtn .c-iconBtn__label,
.l-header__customBtn {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.06em;
}

.l-footer {
	font-size: 13px;
}

.l-footer .c-copyright {
	font-family: var(--bc-ff-jp-sans);
	font-size: 11px;
	letter-spacing: 0.04em;
}

/* ==========================================================================
   14. 全体の余白
   出典: .sec { padding: 80px 0 } / @media(max-width:768px) .sec { padding: 60px 0 }
         .sec-access { padding: 80px 0 }  .sec-cta { padding: 50px 0 }
         .banner-slider { padding: 16px 0 }  .sec-container { max-width:1100; padding:0 30px }

   ★ここが SWELL の一番の落とし穴だった（2026-07-25 CDPで実測して判明）
   フルワイドブロックの余白クラス `pc-py-N` / `sp-py-N` は
   ①N が 0/20/40/60/80 の5値しか定義されておらず、それ以外は対応CSSが無いので
     `.swell-block-fullWide{padding:2em 0}`＝32px に黙って落ちる
   ②定義されている5値も **px ではなく N/10 em**（16px基準で 0/32/64/96/128px）
     ＝確定版の px 固定（80px / 60px / 50px / 16px）はどの値でも作れない
   ③しかも `!important` 付き
   → 正確な余白はここでセクションidを狙って `!important` で上書きする。
     ブロック側には「一番近い有効値」を入れてある（build_top.py）ので、
     万一このCSSが外れても極端に崩れはしない。
   ※SWELLのブレークポイントは959pxだが、確定版デザインに合わせて768pxで切っている
   ========================================================================== */
#concept,
#menu,
#doctor,
#clinic,
#news,
#column,
#access,
#page-body,
#page-body-2,
#page-body-3,
#page-body-4,
#page-body-5 {
	padding-top: 80px !important;
	padding-bottom: 80px !important;
}

/* .banner-slider padding:16px 0 */
#campaign {
	padding-top: 16px !important;
	padding-bottom: 16px !important;
}

/* .sec-cta padding:50px 0（SPも同じ） */
#cta {
	padding-top: 50px !important;
	padding-bottom: 50px !important;
}

.swell-block-fullWide__inner.l-article,
.swell-block-fullWide__inner.l-wide {
	max-width: 1100px;
	padding-left: 30px;
	padding-right: 30px;
}

@media (max-width: 768px) {
	#concept,
	#menu,
	#doctor,
	#clinic,
	#news,
	#column,
	#access,
	#page-body,
	#page-body-2,
	#page-body-3,
	#page-body-4,
	#page-body-5 {
		padding-top: 60px !important;
		padding-bottom: 60px !important;
	}

	.swell-block-fullWide__inner.l-article,
	.swell-block-fullWide__inner.l-wide {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* ==========================================================================
   15. ヘッダー上部バー（子テーマで parts/header/head_bar.php を上書き）
   出典: .header-top height40 / .header-top-link / .header-top-hours
   ========================================================================== */
.bc-headBar {
	display: flex;
	align-items: center;
	gap: 20px;
	font-size: 12px;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.bc-headBar__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: inherit;
	text-decoration: none;
}

.bc-headBar__item:not(.bc-headBar__item--static):hover {
	opacity: 0.75;
}

.bc-headBar__item i {
	font-size: 13px;
}

@media (max-width: 960px) {
	.bc-headBar {
		gap: 12px;
		font-size: 11px;
	}
}

/* ==========================================================================
   16. グローバルナビ末尾の「ご予約」ボタン
   出典: .header-reserve-btn 90x36 / bg accent / 白文字 / 13px
   メニュー項目にCSSクラス bc-nav-cta を付けて実現している（管理画面の
   「メニュー」からURLを差し替えられる状態を保つため、テンプレートには埋めない）
   ========================================================================== */
/* SWELLのグロナビ項目は <li> がヘッダー高さいっぱい（80px）に伸びるので、
   中のボタンが上端に張り付く。<li> 側で縦中央に寄せる（実測で発覚） */
.c-gnav > li.bc-nav-cta {
	display: flex;
	align-items: center;
}

.c-gnav > li.bc-nav-cta > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 90px;
	height: 36px;
	margin-left: 12px;
	padding: 0 14px;
	background: var(--bc-accent);
	border-radius: 2px;
	color: #fff;
	font-family: var(--bc-ff-jp);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.06em;
	transition: background-color 0.3s ease;
}

.c-gnav > li.bc-nav-cta > a:hover {
	background: var(--bc-accent-dark);
}

/* ホバー時の下線エフェクトはボタンには不要 */
.c-gnav > li.bc-nav-cta > a::after {
	content: none;
}

/* ==========================================================================
   17. フッター（footer_box1/2/3 ＋ before_footer）
   出典: .footer background #222 / .footer-main padding 60px 0
         .footer-logo-img height:36px  .footer-address / .footer-tel
         .footer-nav ul（縦並び）  .footer-btn（LINE予約／お問い合わせ）
         .privacy-accordion（Privacy Policy の開閉・第1条〜第8条）
   ========================================================================== */
/* .footer-main .footer-container は grid 1.5fr 1fr 1fr / gap 40px / padding 60px 0。
   SWELLの3カラムフッターで近い形になるので、中身の寄せだけ整える */
.l-footer .w-footer {
	text-align: left;
}

.bc-footer-logo {
	margin: 0 0 20px;
	text-align: left;
}

.bc-footer-logo img {
	height: 36px;
	width: auto;
}

.bc-footer-address,
.bc-footer-tel {
	font-size: 12px;
	line-height: 1.9;
	letter-spacing: 0.04em;
}

.bc-footer-tel {
	margin-top: 0.6em;
}

/* フッターナビは縦並び・12px（.footer-nav ul / .footer-nav a）。
   SWELLのメニューウィジェットは項目に区切り線と `>` アイコンを付けるので両方消す */
.l-footer .menu-item a {
	font-family: var(--bc-ff-en);
	font-size: 12px;
	letter-spacing: 0.12em;
	padding: 6px 0;
	border: none;
	color: rgba(255, 255, 255, 0.6);
}

.l-footer .menu-item a:hover {
	color: var(--bc-accent-light);
}

.l-footer .menu-item a::before,
.l-footer .menu-item a::after {
	content: none;
}

.l-footer .w-footer .menu-item {
	border: none;
}

/* フッターのボタン2つ
   出典: .footer-btns { flex-direction:column; gap:10px }
         .footer-btn { height:44px; padding:0 20px; font-size:13px; radius:4px; gap:8px }
         .footer-btn-contact { border:1px solid rgba(255,255,255,.3) } */
.bc-footer-btn {
	margin-bottom: 10px;
}

/* class_name はボタン自身（div.wp-block-button）に付く。
   `.bc-footer-btn .wp-block-button` では子孫を指してしまい当たらない（実測） */
.bc-footer-btn.wp-block-button {
	width: 100%;
}

.c-widget .wp-block-buttons:has(.bc-footer-btn) {
	width: 100%;
}

.bc-footer-btn .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 44px;
	padding: 0 20px;
	border-radius: 4px;
	font-size: 13px;
	letter-spacing: 0.06em;
}

.bc-footer-btn--line .wp-block-button__link {
	border: 1px solid rgba(255, 255, 255, 0.3);
}

.bc-footer-btn--line .wp-block-button__link:hover {
	background: var(--bc-accent);
	border-color: var(--bc-accent);
}

/* --------------------------------------------------------------------------
   コピーライト行（確定版 .footer-bottom: 左にコピーライト・右に Privacy Policy）
   -------------------------------------------------------------------------- */
.bc-footBottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
}

.bc-footBottom .copyright {
	margin: 0;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.4);
}

.bc-footBottom__privacy {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.4);
}

.bc-footBottom__privacy:hover {
	color: var(--bc-accent-light);
}

@media (max-width: 768px) {
	.bc-footBottom {
		flex-direction: column;
		gap: 8px;
	}
}

/* --------------------------------------------------------------------------
   プライバシーポリシー
   確定版の並びは footer-main → プライバシーポリシー → コピーライト。
   SWELLの footer.php は `before_footer` をフッターの外に出してしまうので、
   子テーマの parts/footer/footer_contents.php でフッター内の正しい位置に出している
   （親テーマ側の出力は functions.php の is_active_sidebar フィルタで止めている）。
   背景はフッターのものがそのまま効くので、余白だけ整える
   -------------------------------------------------------------------------- */
.bc-beforeFooter--inFooter {
	margin: 0;
	padding: 0;
}

/* --- プライバシーポリシー（独立ページ /privacy/） ---
   2026-07-26 にフッターのアコーディオンから独立ページへ移した（後藤指示）。
   本文の出所は確定版 index (10).html の .privacy-accordion-body（第1条〜第8条） */
#page-body .bc-privacy__ttl {
	font-family: var(--bc-ff-jp);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.8;
	color: var(--bc-text);
	margin: 40px 0 12px;
	padding: 0 0 0 14px;
	background: none;
	border: none;
	border-left: 3px solid var(--bc-accent);
}

#page-body .bc-privacy__ttl::before,
#page-body .bc-privacy__ttl::after {
	content: none;
}

#page-body .bc-privacy__ttl:first-child {
	margin-top: 0;
}

.bc-privacy__date {
	margin-top: 40px;
	text-align: right;
	font-size: 13px;
	color: var(--bc-gray);
}


/* ==========================================================================
   18. 追従サイドボタン（LINE予約 / CONTACT）
   出典: .fixed-side  position:fixed; right:0; top:50%; translateY(-50%); z-index:999
         .fixed-btn   60x80 / font-size:10px / i 22px + mb6px / span 9px
         .fixed-btn-line  背景 var(--line) / border-radius 8px 0 0 0
         .fixed-btn-mail  背景 var(--teal) / border-radius 0 0 0 8px
         SP（〜768px）: 下部に横並び・高さ56px・アイコン横並び・body に padding-bottom
   マークアップは子テーマ functions.php（wp_footer）で出している。
   SWELLの `parts/footer/fix_btns.php` は目次/ページトップ専用なので触っていない
   ========================================================================== */
.bc-fixedSide {
	position: fixed;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 999;
	display: flex;
	flex-direction: column;
}

.bc-fixedSide__btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 80px;
	color: #fff;
	font-size: 10px;
	line-height: 1.4;
	white-space: nowrap;
	text-decoration: none;
	transition: opacity 0.3s ease;
}

.bc-fixedSide__btn:hover {
	opacity: 0.9;
	color: #fff;
}

.bc-fixedSide__btn i {
	font-size: 22px;
	margin-bottom: 6px;
}

.bc-fixedSide__btn span {
	font-size: 9px;
	letter-spacing: 0;
}

.bc-fixedSide__btn--line {
	background: var(--bc-line);
	border-radius: 8px 0 0 0;
}

.bc-fixedSide__btn--mail {
	background: var(--bc-accent);
	border-radius: 0 0 0 8px;
}

@media (max-width: 768px) {
	.bc-fixedSide {
		top: auto;
		bottom: 0;
		left: 0;
		right: 0;
		transform: none;
		flex-direction: row;
	}

	.bc-fixedSide__btn {
		flex: 1;
		flex-direction: row;
		gap: 8px;
		width: auto;
		height: 56px;
		border-radius: 0;
	}

	.bc-fixedSide__btn i {
		margin-bottom: 0;
	}

	/* 下部に固定するぶんフッターが隠れないよう逃がす（確定版も body に入れている）。
	   SWELLのフッター固定メニューを使う場合はこの値を足し込むこと */
	body {
		padding-bottom: 56px;
	}

	/* SWELLのページトップ/目次ボタンが追従ボタンに被らないよう持ち上げる */
	.p-fixBtnWrap {
		bottom: calc(56px + 1em);
	}
}

/* ==========================================================================
   19. 下層ページのページヘッダー / パンくず（全下層ページ共通）
   出典: .page-header { height:280px; margin-top:120px; display:flex; center }
         .page-header-bg::after { background: rgba(0,0,0,.45) }
         .page-header-en    EB Garamond 14px / .25em / mb12px / opacity .8
         .page-header-title Shippori Mincho 32px / 500 / .1em
         .breadcrumb        背景 --gray-bg / padding 14px 0 / 12px / --gray
         SP（〜768px）: height 200px / title 24px

   マークアップはSWELLの「タイトル位置＝コンテンツ上」（.l-topTitleArea）。
   ENラベルは子テーマ functions.php で swl_parts__page_title を差し替えて
   タイトルの前に出している（中身はカスタムフィールド swell_meta_subttl）
   ========================================================================== */
.l-topTitleArea {
	min-height: 280px;
	padding: 0;
	align-items: center;
	overflow: hidden;
}

/* 背景画像。c-filterLayer が付かない（フィルターなし）ときも確実に敷く */
.l-topTitleArea__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

/* .page-header-bg::after 相当。SWELLのオーバーレイ設定は c-filterLayer が
   付いているときにしか効かないので自前で敷く（詳細は build_settings.py のコメント） */
.l-topTitleArea::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	z-index: 1;
}

.l-topTitleArea__body {
	text-align: center;
	text-shadow: none;
	z-index: 3;
}

.l-topTitleArea .c-pageTitle {
	font-family: var(--bc-ff-jp);
	font-size: 32px;
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 2;
	color: #fff;
	margin: 0;
}

/* ENラベル。h1の中に入っているのでブロック化して上に積む */
.bc-pageTitle__en {
	display: block;
	font-family: var(--bc-ff-en);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.25em;
	line-height: 2;
	opacity: 0.8;
	margin-bottom: 12px;
}

/* --- パンくず -------------------------------------------------------------
   SWELL標準と確定版の食い違いが3つある（どれもCSSを読まないと気づけない）
   ① `.l-topTitleArea+.p-breadcrumb{background:none!important}` があるので、
      タイトル背景ありのページでは -bg-on のグレーが**強制的に消される**
      → IDセレクタで特異度を上げて !important で戻す
   ② `.p-breadcrumb__item:last-child>span{display:none}` ＝現在ページ名を隠す仕様。
      確定版は出しているので表示に戻す
   ③ 区切りは ::after のクリップパス三角形。確定版は「>」の文字なので差し替える
   -------------------------------------------------------------------------- */
#breadcrumb.p-breadcrumb {
	background: var(--bc-gray-bg) !important;
	box-shadow: none !important;
	padding: 14px 0 !important;
	margin: 0;
	color: var(--bc-gray);
	animation: none;
	opacity: 1;
}

#breadcrumb .p-breadcrumb__list {
	max-width: 1100px;
	padding-left: 30px;
	padding-right: 30px;
	font-size: 12px;
	gap: 0;
	overflow-x: auto;
}

#breadcrumb .p-breadcrumb__item {
	gap: 0;
}

#breadcrumb .p-breadcrumb__text {
	color: var(--bc-gray-dark);
}

/* ② 現在ページ名を出す */
#breadcrumb .p-breadcrumb__item:last-child > span.p-breadcrumb__text {
	display: inline-flex;
	color: var(--bc-gray);
	opacity: 1;
}

/* ③ 三角形 → 「>」（.breadcrumb span::before { content:'>'; margin:0 10px }） */
#breadcrumb .p-breadcrumb__item::after {
	content: ">";
	background: none;
	clip-path: none;
	width: auto;
	height: auto;
	margin: 0 10px;
	color: var(--bc-gray);
	opacity: 1;
	font-family: var(--bc-ff-jp-sans);
}

#breadcrumb .p-breadcrumb__item:last-child::after {
	content: none;
}

/* ホームのアイコンは確定版に無い（テキストの「TOP」だけ） */
#breadcrumb .p-breadcrumb__text .__home::before {
	display: none;
}

@media (max-width: 768px) {
	.l-topTitleArea {
		min-height: 200px;
	}

	.l-topTitleArea .c-pageTitle {
		font-size: 24px;
	}

	#breadcrumb .l-container {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* ==========================================================================
   20. メニュー詳細ページの本文（menu-* 12ページ共通の骨格）
   出典: ■クライアント確認済みHTML/menu-aga (2).html ほか11本
         .sec { padding:80px 0 }（SP 60px）
         .menu-detail-intro / .worry-tag / .aga-alert / .menu-service-* /
         .aga-flow / .menu-note / .sec-btn-wrap

   ★アイコンはマークアップに入っていない。確定版の <i class="fas fa-xxx"> は
   ブロックのRichTextがクラスを落とす（§3.11-9）ので、ブロック側には
   修飾クラス `bc-ico--xxx` だけ付けて、字は bc-icons.css が配る CSS変数
   （--bc-ico / --bc-ico-font / --bc-ico-weight）から ::before で描く
   ========================================================================== */

/* SWELLの標準見出しデザイン（h2＝濃い背景の帯 / h3＝罫線）を落とす。
   確定版の下層ページ見出しは装飾なしの素の見出し。
   これを外さないと .bg #333 と padding 19.5px が乗って別物になる（実測で発覚） */
#page-body .bc-intro__ttl,
#page-body .bc-svc__ttl,
#page-body .bc-flow__ttl,
#page-body .bc-note__ttl {
	background: none;
	border: none;
	padding: 0;
}

#page-body .bc-intro__ttl::before,
#page-body .bc-intro__ttl::after,
#page-body .bc-svc__ttl::after,
#page-body .bc-flow__ttl::before,
#page-body .bc-flow__ttl::after {
	content: none;
}

/* --- 導入（画像＋見出し＋本文の2カラム） --- */
#intro {
	margin-bottom: 60px;
}

#intro .wp-block-image img {
	border-radius: 8px;
}

#page-body .bc-intro__ttl {
	font-family: var(--bc-ff-jp);
	font-size: 26px;
	font-weight: 500;
	line-height: 1.6;
	color: var(--bc-text);
	margin-bottom: 24px;
}

#intro p,
.bc-intro--solo p {
	font-size: 14px;
	line-height: 2;
	color: var(--bc-gray-dark);
	margin-bottom: 16px;
}

/* --- お悩みリスト（.worry-list / .worry-tag） --- */
.bc-worry {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0 0 50px;
	padding: 0;
	list-style: none;
}

.bc-worry li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 14px 18px;
	background: #f9f5ef;
	border: 1px solid var(--bc-accent-light);
	border-radius: 10px;
	font-size: 14px;
	line-height: 1.7;
	color: var(--bc-gray-dark);
	margin: 0;
}

#page-body .bc-worry li::before {
	content: var(--bc-ico);
	font-family: var(--bc-ico-font);
	font-weight: var(--bc-ico-weight);
	color: var(--bc-accent);
	font-size: 13px;
	line-height: 1;
	margin-top: 6px;
	flex-shrink: 0;
}

/* --- 注意喚起ボックス（.aga-alert 等 = loos/cap-block） ---
   SWELLの既定は「色付きの見出し帯＋枠線の本文」。確定版は
   ベージュの地に左4pxのアクセント罫線なので、帯を外して箱にする */
#page-body .swell-block-capbox {
	font-size: 14px;   /* .aga-alert { font-size:14px } */
	background: #f9f5ef;
	border-left: 4px solid var(--bc-accent);
	border-radius: 0 6px 6px 0;
	padding: 20px 24px;
	margin-bottom: 40px;
}

#page-body .swell-block-capbox .cap_box_ttl {
	background: none !important;
	color: var(--bc-accent);
	display: block;
	text-align: left;
	justify-content: flex-start;
	padding: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
	margin-bottom: 6px !important;
	left: auto;
	top: auto;
}

#page-body .swell-block-capbox .cap_box_content {
	background: none !important;
	border: none;
	padding: 0;
	margin-top: 0;
	font-size: 14px;
	line-height: 1.9;
	color: var(--bc-gray-dark);
}

#page-body .swell-block-capbox .cap_box_content::before {
	content: none;
}

#page-body .swell-block-capbox .cap_box_content > *:last-child {
	margin-bottom: 0;
}

/* --- 施術メニューの一覧（.menu-service-list） --- */
.bc-svc {
	padding: 40px 0;
	margin-bottom: 0;   /* 確定版は枠線どうしが隣り合う。SWELLのブロック間余白を消す */
	border-bottom: 1px solid var(--bc-gray-light);
}

.bc-svc:first-child {
	border-top: 1px solid var(--bc-gray-light);
}

/* 見出し＝アイコン（丸）＋タイトルの1行（.menu-service-header） */
#page-body .bc-svc__ttl {
	display: flex;
	align-items: center;
	gap: 20px;
	font-family: var(--bc-ff-jp);
	font-size: 20px;
	font-weight: 500;
	line-height: 2;   /* .menu-service-title は行送り未指定＝body の 2 を継承 */
	color: var(--bc-text);
	margin: 0 0 20px;
}

#page-body .bc-svc__ttl::before {
	/* ★position を戻すのが要。SWELLの h3::before は position:absolute の
	   2px罫線で、上書きし忘れると丸が絶対配置のまま＝高さに算入されない（実測で発覚） */
	position: static;
	content: var(--bc-ico);
	font-family: var(--bc-ico-font);
	font-weight: var(--bc-ico-weight);
	font-size: 22px;
	color: #fff;
	background: var(--bc-accent);
	width: 56px;
	height: 56px;
	min-width: 56px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* アイコンが決まっていないページでは丸ごと出さない */
#page-body .bc-svc:not([class*="bc-ico--"]) .bc-svc__ttl::before {
	display: none;
}

/* 見出し以外は .menu-service-content 相当のインデント */
.bc-svc > *:not(.bc-svc__ttl) {
	margin-left: 80px;
}

.bc-svc p {
	font-size: 14px;
	line-height: 2;
	color: var(--bc-gray-dark);
	margin-bottom: 20px;
}

/* 価格・おすすめの説明リスト（.menu-service-detail）。
   SWELLのDLは flex＋dt幅のCSS変数だが、確定版は 120px の2カラムグリッド */
.bc-svc .swell-block-dl {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 4px 16px;
	padding: 20px 24px;
	background: var(--bc-gray-bg);
	border-radius: 6px;
	font-size: 14px;
	line-height: 2;
	margin-bottom: 0;
}

.bc-svc .swell-block-dl__dt,
.bc-svc .swell-block-dl__dd {
	width: auto;
	margin: 0 !important;
	padding: 4px 0;
	background: none;
	border: none;
}

.bc-svc .swell-block-dl__dt {
	color: var(--bc-gray);
	font-weight: 500;
}

.bc-svc .swell-block-dl__dt::after {
	content: none;
}

.bc-svc .swell-block-dl__dd {
	color: var(--bc-gray-dark);
	line-height: 1.8;   /* .menu-service-detail dd { line-height:1.8 } */
}

.bc-svc .swell-block-dl__dd > * {
	margin-bottom: 0;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

/* 金額。確定版は <strong> をEB Garamondの18pxで見せている */
.bc-svc .swell-block-dl__dd strong {
	font-family: var(--bc-ff-en);
	font-size: 18px;
	font-weight: 500;
	color: var(--bc-accent);
}

/* --- 治療の流れ（.aga-flow） --- */
.bc-flow {
	margin-top: 60px;
	padding: 40px;
	background: var(--bc-gray-bg);
	border-radius: 8px;
}

#page-body .bc-flow__ttl {
	font-family: var(--bc-ff-jp);
	font-size: 18px;
	font-weight: 500;
	color: var(--bc-text);
	margin: 0 0 24px;
	padding-left: 16px;
	border-left: 3px solid var(--bc-accent);
}

.bc-flow__item {
	background: #fff;
	border-radius: 6px;
	padding: 20px 16px;
	height: 100%;
}

.bc-flow__step {
	font-family: var(--bc-ff-en);
	font-size: 28px;
	line-height: 2;    /* .aga-flow-step は行送りを指定せず body の 2 を継承する */
	color: var(--bc-accent);
	margin-bottom: 8px;
}

.bc-flow__label {
	font-size: 13px;
	font-weight: 500;
	line-height: 1.6;
	color: var(--bc-text);
	margin-bottom: 0;
}

/* --- ページ末尾の注意書き（.menu-note） --- */
.bc-note {
	margin-top: 50px;
	padding: 28px;
	background: var(--bc-gray-bg);
	border-radius: 8px;
	font-size: 13px;
	line-height: 1.9;
	color: var(--bc-gray-dark);
}

.bc-note__ttl {
	font-family: var(--bc-ff-jp);
	font-size: 16px;
	font-weight: 500;
	color: var(--bc-text);
	margin-bottom: 16px;
	padding-left: 14px;
	border-left: 3px solid var(--bc-accent);
}

.bc-note__sub {
	font-weight: 500;
	color: var(--bc-text);
	margin: 16px 0 6px;
}

.bc-note ul {
	padding-left: 4px;
	list-style: none;
	margin-bottom: 0;
}

.bc-note li {
	position: relative;
	padding-left: 16px;
	margin-bottom: 4px;
}

#page-body .bc-note li::before {
	content: "・";
	position: absolute;
	left: 0;
}

/* --- 「料金一覧を見る」（.sec-btn-wrap margin-top:60px） --- */
#page-body > .swell-block-fullWide__inner > .wp-block-buttons:last-child {
	margin-top: 60px;
}

@media (max-width: 768px) {
	#intro {
		margin-bottom: 40px;
	}

	.bc-worry li {
		padding: 12px 16px;
		font-size: 13px;
		line-height: 1.6;
	}

	/* .menu-service-header は縦積み。丸アイコンはそのまま上に出す */
	#page-body .bc-svc__ttl {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.bc-svc > *:not(.bc-svc__ttl) {
		margin-left: 0;
	}

	.bc-svc .swell-block-dl {
		grid-template-columns: 90px 1fr;
		font-size: 13px;
	}

	.bc-flow {
		padding: 24px;
	}
}

/* ==========================================================================
   21. メニュー詳細ページのページ固有ブロック
   出典: menu-health/infusion/skin の .menu-group-heading・.menu-group-image
         menu-ed の .privacy-banner ／ menu-armpit-botox の .doctor-banner
         menu-armpit-botox・water-injection の .campaign-banner
         menu-cancer・stemcell の .feature-list ／ menu-cancer の .cancer-types
         menu-wellness の .cat-section / .cat-header
   ========================================================================== */

/* --- メニューを束ねる帯見出し（.menu-group-heading） --- */
#page-body .bc-group-ttl {
	font-family: var(--bc-ff-jp);
	font-size: 18px;
	font-weight: 500;
	line-height: 2;   /* .menu-group-heading は行送り未指定＝body の 2 を継承 */
	padding: 12px 20px;
	background: var(--bc-accent);
	color: #fff;
	border-radius: 4px;
	margin: 56px 0 0;
	border: none;
}

#page-body .bc-group-ttl::before,
#page-body .bc-group-ttl::after {
	content: none;
}

/* --- 見出し直下の横長イメージ（.menu-group-image 16:5 / .menu-category-image） --- */
.bc-group-img {
	margin: 20px 0 0;
	border-radius: 8px;
	overflow: hidden;
}

.bc-group-img img {
	width: 100%;
	aspect-ratio: 16 / 5;
	object-fit: cover;
	display: block;
}

.bc-group-img figure {
	margin: 0;
}

/* --- アイコン付きの横並びボックス（.privacy-banner / .doctor-banner） --- */
.bc-callout {
	display: flex;
	align-items: center;
	gap: 20px;
	background: #f9f5ef;
	border-left: 4px solid var(--bc-accent);
	padding: 20px 24px;
	border-radius: 0 6px 6px 0;
	margin-bottom: 50px;
}

.bc-callout::before {
	content: var(--bc-ico);
	font-family: var(--bc-ico-font);
	font-weight: var(--bc-ico-weight);
	font-size: 28px;
	color: var(--bc-accent);
	flex-shrink: 0;
	line-height: 1;
}

.bc-callout p {
	font-size: 14px;
	line-height: 1.8;
	color: var(--bc-gray-dark);
	margin-bottom: 0;
}

/* --- キャンペーン告知（.campaign-banner） --- */
.bc-cbnr {
	background: #f9f5ef;
	border: 2px solid var(--bc-accent);
	border-radius: 8px;
	padding: 24px 28px;
	margin-bottom: 40px;
}

.bc-cbnr p {
	margin-bottom: 0;
}

.bc-cbnr__label {
	font-family: var(--bc-ff-en);
	font-size: 12px;
	letter-spacing: 0.2em;
	color: var(--bc-accent);
	margin-bottom: 8px;
}

.bc-cbnr__text {
	font-size: 15px;
	font-weight: 500;
	line-height: 1.8;
	color: var(--bc-text);
}

.bc-cbnr__sub {
	font-size: 13px;
	color: var(--bc-gray-dark);
	margin-top: 6px;
}

/* --- 特長カード（.feature-card） --- */
.bc-feature {
	background: var(--bc-gray-bg);
	border-radius: 8px;
	padding: 24px 20px;
	height: 100%;
}

.bc-feature::before {
	content: var(--bc-ico);
	font-family: var(--bc-ico-font);
	font-weight: var(--bc-ico-weight);
	display: block;
	text-align: center;
	font-size: 28px;
	line-height: 1;
	color: var(--bc-accent);
	margin-bottom: 12px;
}

.bc-feature__ttl {
	font-family: var(--bc-ff-jp);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.6;
	color: var(--bc-text);
	margin-bottom: 8px;
}

.bc-feature__text {
	font-size: 13px;
	line-height: 1.8;
	color: var(--bc-gray-dark);
	margin-bottom: 0;
}

/* --- 検査対象のタイル（.cancer-type-card） --- */
.bc-tile {
	background: var(--bc-gray-bg);
	border-radius: 6px;
	border-top: 3px solid var(--bc-accent);
	padding: 14px 16px;
	font-size: 13px;
	font-weight: 500;
	color: var(--bc-gray-dark);
	height: 100%;
}

.bc-tile--female {
	border-top-color: #c09aae;
}

.bc-tile--male {
	border-top-color: #8aaac0;
}

.bc-tile__label {
	font-size: 10px;
	color: var(--bc-gray);
	margin-bottom: 4px;
	line-height: 1.6;
}

.bc-tile__name {
	margin-bottom: 0;
	line-height: 1.6;
}

/* --- カテゴリ見出しブロック（.cat-header）と塊（.cat-section） --- */
.bc-cat-section {
	margin-bottom: 80px;
}

/* 確定版は画像とテキストが隙間なく1枚のカードになる（gap:0・角丸12px・影） */
.bc-cat-section > .swell-block-columns:first-child {
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
	margin-bottom: 48px;
	--swl-clmn-mrgn--x: 0px;
	--swl-clmn-mrgn--y: 0px;
}

.bc-cat-section > .swell-block-columns:first-child .swell-block-column {
	margin-left: 0;
	width: var(--clmn-w);
}

.bc-cat-section > .swell-block-columns:first-child .wp-block-image,
.bc-cat-section > .swell-block-columns:first-child figure {
	margin: 0;
	height: 100%;
}

.bc-cat-section > .swell-block-columns:first-child img {
	width: 100%;
	height: 100%;
	min-height: 260px;
	object-fit: cover;
	display: block;
}

/* テキスト側はベージュ地のパネル */
.bc-cat-section > .swell-block-columns:first-child .swell-block-column:last-child {
	background: #f9f5ef;
	padding: 40px 44px;
}

.bc-cat__en {
	font-family: var(--bc-ff-en);
	font-size: 12px;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--bc-accent);
	margin-bottom: 10px;
}

#page-body .bc-cat__ttl {
	font-family: var(--bc-ff-jp);
	font-size: 22px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--bc-text);
	margin: 0 0 14px;
	padding: 0;
	background: none;
	border: none;
}

#page-body .bc-cat__ttl::before,
#page-body .bc-cat__ttl::after {
	content: none;
}

.bc-cat__desc {
	font-size: 13px;
	line-height: 2;
	color: var(--bc-gray-dark);
	margin-bottom: 0;
}

/* --- クラスの無い素の見出し・本文（各ページの導入文など） --- */
#page-body .bc-lead-ttl {
	font-family: var(--bc-ff-jp);
	font-weight: 500;
	line-height: 1.6;
	color: var(--bc-text);
	background: none;
	border: none;
	padding: 0;
	margin: 40px 0 16px;
}

#page-body .bc-lead-ttl::before,
#page-body .bc-lead-ttl::after {
	content: none;
}

.bc-lead-text {
	font-size: 14px;
	line-height: 2;
	color: var(--bc-gray-dark);
}

@media (max-width: 768px) {
	#page-body .bc-group-ttl {
		font-size: 16px;
		margin-top: 40px;
	}

	.bc-callout {
		flex-direction: column;
		text-align: center;
		gap: 12px;
	}

	.bc-cat-section > .swell-block-columns:first-child .swell-block-column:last-child {
		padding: 28px 24px;
	}

	.bc-cat-section > .swell-block-columns:first-child img {
		min-height: 200px;
	}

	#page-body .bc-cat__ttl {
		font-size: 18px;
	}
}

/* --- メニュー内の小見出しとリスト・表（.rx-list-heading / .rx-list / 各種table） --- */
.bc-subttl {
	font-size: 13px;
	font-weight: 500;
	color: var(--bc-text);
	margin: 16px 0 6px;
}

.bc-svc .bc-list {
	padding-left: 4px;
	list-style: none;
	font-size: 13px;
	line-height: 1.9;
	color: var(--bc-gray-dark);
}

.bc-svc .bc-list li {
	position: relative;
	padding-left: 16px;
	margin-bottom: 4px;
}

#page-body .bc-svc .bc-list li::before {
	content: "・";
	position: absolute;
	left: 0;
}

#page-body .bc-table {
	font-family: var(--bc-ff-jp-sans);
	font-size: 13px;
	letter-spacing: 0.04em;
	margin-top: 12px;
}

#page-body .bc-table th,
#page-body .bc-table td {
	padding: 8px 12px;
	border: 1px solid var(--bc-gray-light);
}

#page-body .bc-table th {
	background: var(--bc-gray-bg);
	font-weight: 500;
	color: var(--bc-text);
}

/* --- 料金プランのカード（.plan-card  stemcell） --- */
.bc-plan {
	border: 1px solid var(--bc-gray-light);
	border-radius: 8px;
	overflow: hidden;
	height: 100%;
}

.bc-plan p {
	margin-bottom: 0;
}

.bc-plan__head {
	background: var(--bc-accent);
	color: #fff;
	padding: 16px 20px;
	font-family: var(--bc-ff-en);
	font-size: 28px;
	font-weight: 500;
	line-height: 2;   /* .plan-card-head .vol は行送り未指定＝body の 2 を継承 */
}

.bc-plan__price,
.bc-plan__time,
.bc-plan__text {
	padding-left: 20px;
	padding-right: 20px;
	text-align: center;
}

.bc-plan__price {
	padding-top: 20px;
	font-family: var(--bc-ff-en);
	font-size: 22px;
	font-weight: 500;
	line-height: 2;
	color: var(--bc-accent);
	margin-bottom: 8px;
}

.bc-plan__time {
	font-size: 12px;
	color: var(--bc-gray-dark);
}

.bc-plan__text {
	font-size: 13px;
	line-height: 1.8;
	color: var(--bc-gray-dark);
	text-align: left;
	margin-top: 12px;
	padding-top: 12px;
	padding-bottom: 20px;
	border-top: 1px solid var(--bc-gray-light);
}

/* --- インラインstyleで組まれていた塊と、その中の注釈小箱 --- */
.bc-block {
	margin-bottom: 40px;
}

.bc-block img {
	border-radius: 8px;
}

.bc-subnote {
	background: #f9f7f4;
	border-radius: 6px;
	padding: 14px 16px;
	margin-top: 20px;
}

.bc-subnote p {
	font-size: 12px;
	line-height: 1.9;
	color: var(--bc-gray-dark);
	margin-bottom: 0;
}

/* ==========================================================================
   22. MENU＆PRICE 一覧（/menu/ = メニュー詳細12本の親ページ）
   出典: ■クライアント確認済みHTML/price (1).html
         .jump-nav / .jump-btn（3列のページ内ジャンプ）
         .pa（診療科の折りたたみ）→ .pa-h / .pa-t h2 / .pa-t .en / .pa-ic / .pa-b
         .ov（概要＝画像＋文章）／.ca（施術の折りたたみ）→ .ca-h / .ca-n / .ca-b
         .dl（明細の1行）と .dl.p / .label / .rec / .rec-hd
         .price-note-block / .fn

   確定版は「診療科の折りたたみ の中に 施術の折りたたみ」という二段構造。
   SWELLの loos/accordion が同じ <details> 構造なのでそのまま置き換えている。
   ⚠️ loos/accordion は supports.className:false でクラスを持てないので、
   見た目のフックは外側の core/group（.bc-pa）に付けてある
   ========================================================================== */

/* --- ページ内ジャンプ（.jump-nav = ボックスメニュー） --- */
#page-body .swell-block-box-menu {
	margin: 28px 0 44px;
}

#page-body .swell-block-box-menu__item {
	--the-text-color: var(--bc-accent-dark);
}

#page-body .swell-block-box-menu__link {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 4px;
	padding: 10px 8px;
	min-height: 68px;
	background: #fff;
	color: var(--bc-accent-dark);
	border: 1.5px solid var(--bc-accent);
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	transition: background 0.2s, color 0.2s, transform 0.15s;
}

#page-body .swell-block-box-menu__link:hover {
	background: var(--bc-accent);
	color: #fff;
	transform: translateY(-1px);
}

/* ★SWELLのボックスメニューは「アクセント色の丸 ＋ 白いアイコン」が既定なので、
   丸を消しただけだと白背景に白アイコンで見えなくなる（実測で発覚）。
   figure だけでなく中の <i> にも色を指定すること */
#page-body .swell-block-box-menu__figure {
	width: auto;
	height: auto;
	margin: 0;
	background: none;
	font-size: 16px;
	transition: color 0.2s;
}

#page-body .swell-block-box-menu__figure,
#page-body .swell-block-box-menu__figure i {
	color: var(--bc-accent);
}

#page-body .swell-block-box-menu__figure i {
	font-size: 16px;
}

#page-body .swell-block-box-menu__link:hover .swell-block-box-menu__figure,
#page-body .swell-block-box-menu__link:hover .swell-block-box-menu__figure i {
	color: #fff;
}

#page-body .swell-block-box-menu__text {
	font-size: 11px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.04em;
}

/* --- 診療科の折りたたみ（.pa） --- */
.bc-pa {
	margin-bottom: 10px;
	border: 1px solid var(--bc-gray-light);
	border-radius: 4px;
	overflow: hidden;
}

.bc-pa .swell-block-accordion,
.bc-pa .swell-block-accordion__item {
	margin: 0;
	border: none;
	border-radius: 0;
	background: none;
}

/* .pa-h：アクセント色の帯。summary をそのまま使う */
.bc-pa .swell-block-accordion__title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 18px 24px;
	background: var(--bc-accent);
	color: #fff;
	cursor: pointer;
	transition: background 0.2s;
}

.bc-pa .swell-block-accordion__title:hover,
.bc-pa .swell-block-accordion__item[open] > .swell-block-accordion__title {
	background: var(--bc-accent-dark);
}

/* .pa-t h2 */
.bc-pa .swell-block-accordion__label {
	flex: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 12px;
	font-family: var(--bc-ff-jp);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1.5;
	color: #fff;
	margin: 0;
	padding: 0;
	background: none;
	border: none;
}

/* .sec-icon（診療科ごとのアイコン）。字は bc-icons.css の変数から */
.bc-pa[class*="bc-ico--"] .swell-block-accordion__label::before {
	content: var(--bc-ico);
	font-family: var(--bc-ico-font);
	font-weight: var(--bc-ico-weight);
	font-size: 20px;
	line-height: 1;
	width: 22px;
	text-align: center;
	opacity: 0.9;
	flex-shrink: 0;
}

/* .pa-t .en。13枚とも同じ固定ラベルなのでCSSで出す（本文には入れていない） */
.bc-pa--overview .swell-block-accordion__label::after {
	content: "Treatment Overview";
	flex-basis: 100%;
	margin-left: 34px;
	margin-top: 3px;
	font-family: var(--bc-ff-en);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.2em;
	color: rgba(255, 255, 255, 0.75);
}

/* .pa-ic（開閉の四角いボタン） */
.bc-pa .swell-block-accordion__icon {
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	color: #fff;
}

.bc-pa .swell-block-accordion__body {
	background: #fff;
	padding: 0;
}

/* --- 概要（.ov 画像＋文章） --- */
.bc-pa .swell-block-columns {
	padding: 20px 24px;
	background: #f9f7f4;
	border-bottom: 1px solid var(--bc-gray-light);
	margin: 0;
}

.bc-pa .swell-block-columns .swell-block-column {
	margin-bottom: 0;
}

/* .ov-img { width:42%; aspect-ratio:1/1 } */
.bc-pa .swell-block-columns .swell-block-column:first-child {
	--clmn-w: 42%;
}

.bc-pa .swell-block-columns figure {
	margin: 0;
}

.bc-pa .swell-block-columns img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 6px;
	display: block;
}

.bc-ov__text,
.bc-ov p {
	font-size: 13px;
	line-height: 2;
	color: var(--bc-gray-dark);
	margin-bottom: 0;
}

.bc-ov {
	padding: 20px 24px;
	background: #f9f7f4;
	border-bottom: 1px solid var(--bc-gray-light);
}

/* --- 施術の折りたたみ（.ca＝内側のアコーディオン） --- */
.bc-ca .swell-block-accordion__item {
	border-top: 1px solid var(--bc-gray-light);
}

.bc-ca .swell-block-accordion__item:first-child {
	border-top: none;
}

.bc-ca .swell-block-accordion__title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding: 13px 24px;
	background: #fff;
	cursor: pointer;
	transition: background 0.15s;
}

.bc-ca .swell-block-accordion__title:hover {
	background: var(--bc-gray-bg);
}

.bc-ca .swell-block-accordion__label {
	flex: 1;
	display: block;
	font-family: var(--bc-ff-jp);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--bc-text);
	margin: 0;
	padding: 0;
	background: none;
	border: none;
}

.bc-ca .swell-block-accordion__label::before,
.bc-ca .swell-block-accordion__label::after {
	content: none;
}

.bc-ca .swell-block-accordion__icon {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	border: 1px solid var(--bc-gray-light);
	border-radius: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	color: var(--bc-gray);
}

.bc-ca .swell-block-accordion__item[open] > .swell-block-accordion__title .swell-block-accordion__icon {
	background: var(--bc-accent);
	border-color: var(--bc-accent);
	color: #fff;
}

.bc-ca .swell-block-accordion__body {
	padding: 2px 24px 14px;
	background: var(--bc-gray-bg);
}

/* --- 明細の1行（.dl とその修飾） --- */
.bc-dl {
	font-size: 12px;
	line-height: 1.8;
	color: var(--bc-gray);
	padding: 2px 0 2px 10px;
	border-left: 2px solid var(--bc-gray-light);
	margin-bottom: 0;
}

.bc-dl:first-child {
	padding-top: 6px;
}

/* 価格。確定版はここだけゴシックにして視認性を上げている */
.bc-dl--price {
	font-family: var(--bc-ff-jp-sans);
	font-size: 13px;
	font-weight: 600;
	color: var(--bc-accent-dark);
	padding: 10px 0 4px 0;
	border-left: none;
	border-bottom: 1px solid var(--bc-gray-light);
	letter-spacing: 0.02em;
}

/* ＜成分＞＜効能＞などのラベル行 */
.bc-dl--label {
	font-size: 10px;
	font-weight: 700;
	color: var(--bc-accent);
	letter-spacing: 0.12em;
	border-left: none;
	padding: 10px 0 2px 0;
}

/* 「おススメの方」の見出しと項目 */
.bc-dl--rec-hd {
	font-size: 11px;
	font-weight: 700;
	color: var(--bc-gray-dark);
	border-left: none;
	padding: 10px 0 3px 0;
	margin-top: 6px;
	border-top: 1px dashed var(--bc-gray-light);
}

.bc-dl--rec {
	font-size: 11px;
	color: var(--bc-gray);
	padding: 1px 0 1px 14px;
	border-left: none;
}

.bc-dl--rec::before {
	content: "›";
	margin-right: 4px;
	color: var(--bc-accent);
}

/* --- 診療科の末尾の注記（.fn） --- */
.bc-fn {
	padding: 10px 24px;
	border-top: 1px solid var(--bc-gray-light);
}

.bc-fn p {
	font-size: 11px;
	color: var(--bc-gray);
	margin-bottom: 0;
}

/* --- お支払いについて（.price-note-block） --- */
#page-body .bc-pa + .bc-note,
#page-body .swell-block-accordion + .bc-note {
	margin-top: 36px;
}

@media (max-width: 768px) {
	.bc-pa .swell-block-accordion__title {
		padding: 14px 16px;
	}

	.bc-pa .swell-block-columns,
	.bc-ov {
		padding: 16px;
	}

	.bc-ca .swell-block-accordion__title {
		padding: 11px 16px;
	}

	.bc-ca .swell-block-accordion__body {
		padding: 2px 16px 12px;
	}

	.bc-fn {
		padding: 8px 16px;
	}

	#page-body .swell-block-box-menu__link {
		min-height: 62px;
		padding: 9px 6px;
		border-radius: 7px;
		gap: 3px;
	}

	#page-body .swell-block-box-menu__text {
		font-size: 10.5px;
	}

	#page-body .swell-block-box-menu__figure {
		font-size: 14px;
	}
}

/* ==========================================================================
   23. ページ固有ブロック（water-injection / diet）
   出典: menu-water-injection (6).html の .device-showcase / .mechanism-block /
         .closing-visual / .product-badge
         menu-diet-with-images (4).html の .campaign-section 一式 / .drug-cards
         health・diet 共通の .price-sub-table / .price-sub-label
   ========================================================================== */

/* --- 導入機器の紹介（.device-showcase） --- */
#device {
	padding: 32px;
	background: var(--bc-gray-bg);
	border-radius: 12px;
	margin-bottom: 50px;
}

#device img {
	width: 100%;
	border-radius: 8px;
}

#device figure {
	margin: 0;
}

.bc-device__label {
	font-family: var(--bc-ff-en);
	font-size: 12px;
	letter-spacing: 0.2em;
	color: var(--bc-accent);
	margin-bottom: 8px;
}

#page-body .bc-device__ttl {
	font-family: var(--bc-ff-jp);
	font-size: 22px;
	font-weight: 500;
	line-height: 1.6;
	color: var(--bc-text);
	margin: 0 0 14px;
	padding: 0;
	background: none;
	border: none;
}

#page-body .bc-device__ttl::before,
#page-body .bc-device__ttl::after {
	content: none;
}

.bc-device__text {
	font-size: 13px;
	line-height: 1.9;
	color: var(--bc-gray-dark);
	margin-bottom: 0;
}

/* --- 図版＋キャプション（.mechanism-block / .closing-visual） --- */
.bc-figure {
	text-align: center;
	margin-bottom: 50px;
}

/* ⚠️ core/image の figure は shrink-to-fit なので、img に width:100% を当てても
   親が縮んで画像が小さいまま出る。**幅は figure 側に持たせる**こと（実測で発覚） */
.bc-figure figure {
	display: block;
	width: 100%;
	max-width: 640px;
	margin: 0 auto 14px;
}

.bc-figure img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	margin: 0;
	display: block;
}

.bc-figure__cap {
	font-size: 12px;
	color: var(--bc-gray);
	line-height: 1.8;
	margin-bottom: 0;
}

.bc-figure--closing {
	margin: 60px 0 0;
}

.bc-figure--closing figure {
	max-width: 480px;
}

.bc-figure--closing img {
	border-radius: 12px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.bc-figure--closing .bc-figure__cap {
	margin-top: 16px;
	font-family: var(--bc-ff-jp);
	font-size: 15px;
	color: var(--bc-text);
}

/* 本文に回り込む小さな商品写真（.product-badge） */
.bc-badgeimg {
	float: right;
	width: 64px;
	margin-left: 14px;
}

.bc-badgeimg img {
	width: 64px;
	border-radius: 6px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* --- キャンペーン（.campaign-section） --- */
.bc-cmp {
	margin-bottom: 60px;
}

.bc-cmp__head {
	text-align: center;
	margin-bottom: 36px;
}

.bc-cmp__label {
	display: inline-block;
	background: var(--bc-accent);
	color: #fff;
	font-size: 11px;
	letter-spacing: 0.15em;
	padding: 4px 14px;
	margin-bottom: 12px;
}

#page-body .bc-cmp__head h2 {
	font-family: var(--bc-ff-jp);
	font-size: 22px;
	font-weight: 500;
	line-height: 1.6;
	color: var(--bc-text);
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	text-align: center;
}

#page-body .bc-cmp__head h2::before,
#page-body .bc-cmp__head h2::after {
	content: none;
}

.bc-cmp__card {
	border: 1px solid var(--bc-accent-light);
	border-radius: 12px;
	overflow: hidden;
	background: #faf8f5;
	height: 100%;
}

.bc-cmp__cardhead {
	background: var(--bc-accent);
	padding: 20px 24px;
}

.bc-cmp__badge {
	font-size: 11px;
	letter-spacing: 0.12em;
	color: rgba(255, 255, 255, 0.8);
	margin-bottom: 6px;
}

#page-body .bc-cmp__cardhead h3 {
	font-family: var(--bc-ff-jp);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.6;
	color: #fff;
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	display: block;
}

#page-body .bc-cmp__cardhead h3::before,
#page-body .bc-cmp__cardhead h3::after {
	content: none;
}

.bc-cmp__img {
	margin: 0;
}

.bc-cmp__img img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	display: block;
}

.bc-cmp__cardbody {
	padding: 24px;
}

.bc-cmp__desc {
	font-size: 13px;
	line-height: 1.9;
	color: var(--bc-gray-dark);
	margin-bottom: 20px;
}

.bc-approach {
	margin-bottom: 20px;
}

.bc-approach__ttl {
	font-size: 13px;
	font-weight: 500;
	color: var(--bc-text);
	letter-spacing: 0.05em;
	margin-bottom: 10px;
}

.bc-approach__item {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 8px;
	font-size: 13px;
	line-height: 1.7;
	color: var(--bc-gray-dark);
}

.bc-approach__item::before {
	content: "○";
	color: var(--bc-accent);
	font-size: 12px;
	margin-top: 3px;
	flex-shrink: 0;
}

.bc-price {
	background: #fff;
	border: 1px solid var(--bc-accent-light);
	border-radius: 8px;
	padding: 18px 20px;
	margin-bottom: 16px;
}

.bc-price__label {
	font-size: 11px;
	letter-spacing: 0.12em;
	color: var(--bc-gray);
	margin-bottom: 8px;
}

/* 通常価格と特別価格。確定版は baseline 揃えの横並び */
.bc-price__main {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 4px;
}

.bc-price__main p {
	margin-bottom: 0;
}

.bc-price__was {
	font-family: var(--bc-ff-en);
	font-size: 14px;
	color: var(--bc-gray);
	text-decoration: line-through;
}

.bc-price__now {
	font-family: var(--bc-ff-en);
	font-size: 26px;
	font-weight: 500;
	color: var(--bc-accent);
	line-height: 1.2;
}

.bc-cmp__subttl {
	font-size: 12px;
	font-weight: 500;
	color: var(--bc-text);
	letter-spacing: 0.05em;
	margin-bottom: 8px;
}

.bc-cmp__note {
	font-size: 11px;
	color: var(--bc-gray);
	margin-top: 10px;
	margin-bottom: 0;
}

/* --- 薬のカード（.drug-cards） --- */
.bc-drug {
	border: 1px solid var(--bc-accent-light);
	border-radius: 10px;
	overflow: hidden;
	height: 100%;
}

.bc-drug__head {
	background: var(--bc-accent);
	padding: 10px 16px;
}

#page-body .bc-drug__head h4 {
	font-family: var(--bc-ff-jp);
	font-size: 14px;
	font-weight: 500;
	color: #fff;
	margin: 0;
	padding: 0;
	background: none;
	border: none;
}

#page-body .bc-drug__head h4::before,
#page-body .bc-drug__head h4::after {
	content: none;
}

.bc-drug__body {
	padding: 14px 16px;
	background: #faf8f5;
}

.bc-drug__desc {
	font-size: 12px;
	line-height: 1.7;
	color: var(--bc-gray-dark);
	margin-bottom: 12px;
}

/* --- 表の3種（料金一覧 / セット券 / 薬） --- */
#page-body .bc-table--ticket,
#page-body .bc-table--drug,
#page-body .bc-table--price {
	width: 100%;
	margin-top: 0;
}

#page-body .bc-table--ticket th,
#page-body .bc-table--ticket td,
#page-body .bc-table--drug th,
#page-body .bc-table--drug td {
	border: none;
	border-bottom: 1px solid var(--bc-gray-light);
	background: none;
	padding: 6px 4px;
	color: var(--bc-gray-dark);
	font-weight: 400;
	text-align: left;
}

#page-body .bc-table--ticket tr:last-child th,
#page-body .bc-table--ticket tr:last-child td,
#page-body .bc-table--drug tr:last-child th,
#page-body .bc-table--drug tr:last-child td {
	border-bottom: none;
}

/* 金額の列は右寄せ＋ガラモン（確定版の td:last-child） */
#page-body .bc-table--ticket td:last-child,
#page-body .bc-table--drug td:last-child,
#page-body .bc-table--price td:last-child {
	text-align: right;
	font-family: var(--bc-ff-en);
	font-size: 14px;
	font-weight: 500;
	color: var(--bc-accent);
	white-space: nowrap;
}

#page-body .bc-table--drug th,
#page-body .bc-table--drug td {
	padding: 5px 4px;
	font-size: 12px;
}

#page-body .bc-table--price {
	font-size: 14px;
	margin-top: 12px;
}

#page-body .bc-table--price th,
#page-body .bc-table--price td {
	padding: 10px 16px;
	border: none;
	border-bottom: 1px solid var(--bc-gray-light);
}

#page-body .bc-table--price th {
	background: rgba(184, 168, 138, 0.1);
	font-weight: 500;
	color: var(--bc-text);
	width: 60%;
	text-align: left;
}

#page-body .bc-table--price td:last-child {
	font-size: 15px;
}

@media (max-width: 768px) {
	#device {
		padding: 24px;
	}

	.bc-cmp__cardbody {
		padding: 18px;
	}
}

/* 施術ごとの写真（.menu-service-image  diet のみ・見出しの直後に入る） */
.bc-svc__img {
	margin: 0 0 24px 80px;
}

.bc-svc__img img {
	width: 100%;
	height: 260px;
	object-fit: cover;
	border-radius: 8px;
	display: block;
}

@media (max-width: 768px) {
	.bc-svc__img {
		margin-left: 0;
	}

	.bc-svc__img img {
		height: 180px;
	}
}

/* メニュー小見出し直下の横長写真（.menu-category-image  infusion） */
.bc-catimg {
	margin: 20px 0 0;
	border-radius: 8px;
	overflow: hidden;
	display: block;
}

.bc-catimg img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	display: block;
}

/* ==========================================================================
   24. CONCEPT / DOCTOR
   出典: concept_full（Netlify確定版）… .sec-header / .concept-grid /
         .philosophy-card / .sec-teal + .sec-bg-image / .brand-statement /
         .feature-grid / .feature-list
         doctor (1).html … .doctor-detail / .doctor-name / .doctor-message /
         .doctor-career-box / .doctor-career-list

   複数の `.sec` が並ぶページなので、セクションごとに1つのフルワイドにしてある
   （背景が 白→グレー→アクセント→白 と変わるため）。余白は §14 と同じく id 指定
   ========================================================================== */

/* --- セクション見出し（.sec-header） --- */
.bc-section-lead {
	margin-top: 20px;
	font-size: 14px;
	line-height: 2;
	color: var(--bc-gray-dark);
}

/* アクセント色のセクションでは見出しまわりを白系に */
#page-body-3 .bc-section-en {
	color: rgba(255, 255, 255, 0.7);
}

#page-body-3 .bc-section-lead {
	color: rgba(255, 255, 255, 0.85);
}

/* --- CONCEPT 本文 --- */
.bc-concept__text p {
	font-size: 15px;
	line-height: 2.2;
	color: var(--bc-gray-dark);
	margin-bottom: 24px;
}

.bc-concept__text p:last-child {
	margin-bottom: 0;
}

/* --- 理念カード（.philosophy-card） --- */
.bc-phil {
	padding: 40px 32px;
	background: #fff;
	border-radius: 8px;
	text-align: center;
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.04);
	height: 100%;
}

/* .philosophy-card-icon（アクセント色の丸72px） */
.bc-phil::before {
	content: var(--bc-ico);
	font-family: var(--bc-ico-font);
	font-weight: var(--bc-ico-weight);
	width: 72px;
	height: 72px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bc-accent);
	border-radius: 50%;
	margin: 0 auto 24px;
	font-size: 28px;
	color: #fff;
}

#page-body-2 .bc-phil__en {
	font-family: var(--bc-ff-en);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--bc-accent);
	margin: 0 0 8px;
	padding: 0;
	background: none;
	border: none;
}

#page-body-2 .bc-phil__en::before,
#page-body-2 .bc-phil__en::after {
	content: none;
}

.bc-phil__jp {
	font-family: var(--bc-ff-jp);
	font-size: 16px;
	color: var(--bc-text);
	margin-bottom: 20px;
}

.bc-phil__text {
	font-size: 14px;
	line-height: 1.9;
	color: var(--bc-gray-dark);
	margin-bottom: 0;
}

/* --- ブランドステイトメント（.sec-teal の中） --- */
.bc-brand {
	max-width: 800px;
	margin: 0 auto;
	text-align: center;
	color: #fff;
}

.bc-brand__en {
	font-family: var(--bc-ff-en);
	font-size: 14px;
	letter-spacing: 0.2em;
	opacity: 0.8;
	margin-bottom: 20px;
}

#page-body-3 .bc-brand__ttl {
	font-family: var(--bc-ff-jp);
	font-size: 28px;
	font-weight: 500;
	line-height: 1.8;
	color: #fff;
	margin: 0 0 32px;
	padding: 0;
	background: none;
	border: none;
	text-align: center;
}

#page-body-3 .bc-brand__ttl::before,
#page-body-3 .bc-brand__ttl::after {
	content: none;
}

.bc-brand__text {
	font-size: 15px;
	line-height: 2.2;
	opacity: 0.9;
	text-align: left;
	margin-bottom: 0;
}

/* --- FEATURES --- */
.bc-feature-body__lead {
	font-family: var(--bc-ff-jp);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.8;
	color: var(--bc-text);
	margin-bottom: 24px;
}

.bc-feature-body__text {
	font-size: 14px;
	line-height: 2;
	color: var(--bc-gray-dark);
	margin-bottom: 16px;
}

/* 丸ポチのチェックリスト（.feature-list） */
/* ⚠️ padding-left はSWELLの `.wp-block-list`（22.5px）に負けるので
   #page-body-4 で詳細度を上げる。行高2.0とドットtop10pxは確定版の実測値
   （21px/12pxのままだとドットが文字の中心から約5px下にズレる＝8/21 FB 1-4） */
#page-body-4 .bc-checklist {
	margin-top: 24px;
	padding-left: 0;
	list-style: none;
}

.bc-checklist li {
	position: relative;
	padding-left: 20px;
	font-size: 14px;
	line-height: 2;
	margin-bottom: 8px;
}

#page-body-4 .bc-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 10px;
	width: 8px;
	height: 8px;
	background: var(--bc-accent);
	border-radius: 50%;
}

/* --- DOCTOR --- */
.bc-doctor-detail {
	max-width: 900px;
	margin: 0 auto;
}

.bc-doctor-position {
	font-size: 13px;
	color: var(--bc-accent);
	margin-bottom: 8px;
}

#page-body .bc-doctor-name {
	font-family: var(--bc-ff-jp-sans);
	font-size: 26px;
	font-weight: 500;
	line-height: 2;   /* .doctor-name は行送り未指定＝body の 2 を継承 */
	letter-spacing: 0.15em;
	color: var(--bc-text);
	margin: 0 0 60px;
	padding: 0;
	background: none;
	border: none;
}

#page-body .bc-doctor-name::before,
#page-body .bc-doctor-name::after {
	content: none;
}

/* 英字表記（.doctor-name span） */
#page-body .bc-doctor-name .bc-doctor-en {
	display: block;
	font-family: var(--bc-ff-en);
	font-size: 13px;
	font-weight: 400;
	color: var(--bc-gray);
	letter-spacing: 0.08em;
	margin-top: 6px;
}

.bc-doctor-msg {
	padding: 40px;
	background: var(--bc-gray-bg);
	border-radius: 8px;
	margin-bottom: 60px;
}

.bc-doctor-msg__ttl {
	font-family: var(--bc-ff-en);
	font-size: 16px;
	letter-spacing: 0.1em;
	color: var(--bc-accent);
	margin-bottom: 16px;
}

.bc-doctor-msg__text {
	font-size: 15px;
	line-height: 2.2;
	color: var(--bc-gray-dark);
	margin-bottom: 16px;
}

.bc-career {
	padding: 40px;
	border: 1px solid var(--bc-gray-light);
	border-radius: 8px;
}

#page-body .bc-career__ttl {
	font-family: var(--bc-ff-jp);
	font-size: 18px;
	font-weight: 500;
	color: var(--bc-text);
	margin: 0 0 16px;
	padding: 0;
	background: none;
	border: none;
}

#page-body .bc-career__ttl::before,
#page-body .bc-career__ttl::after {
	content: none;
}

/* 経歴（1つの dt に dd が複数ぶら下がる） */
.bc-career .swell-block-dl {
	display: block;
	font-size: 14px;
	line-height: 2;
}

.bc-career .swell-block-dl__dt {
	width: auto;
	color: var(--bc-gray);
	font-weight: 400;
	padding: 0;
	margin-top: 16px !important;
	background: none;
	border: none;
}

.bc-career .swell-block-dl__dt:first-child {
	margin-top: 0 !important;
}

.bc-career .swell-block-dl__dt::after {
	content: none;
}

.bc-career .swell-block-dl__dd {
	width: auto;
	color: var(--bc-gray-dark);
	padding: 0 0 0 16px;
	margin: 0 !important;
	background: none;
	border: none;
}

.bc-career .swell-block-dl__dd > * {
	margin-bottom: 0;
}

@media (max-width: 768px) {
	.bc-phil {
		padding: 32px 24px;
	}

	.bc-doctor-msg,
	.bc-career {
		padding: 24px;
	}

	#page-body-3 .bc-brand__ttl {
		font-size: 22px;
	}

	.bc-feature-body__lead {
		font-size: 20px;
	}
}

/* ==========================================================================
   25. CLINIC / ACCESS / CONTACT（Manus版流用の3ページ）
   出典: clinic1-8t8.pages.dev の各ページ（素材フォルダ ■Manus版HTML… に保存）
         .clinic-intro / .clinic-gallery-item / .access-detail-* /
         .access-directions / .contact-intro / .contact-phone-section
   フォームは Contact Form 7（項目は確定版と同じ並び・送信先は仮）
   ========================================================================== */

/* --- 導入文（.clinic-intro / .contact-intro） --- */
.bc-lead {
	max-width: 800px;
	margin: 0 auto 50px;
	text-align: center;
}

.bc-lead__ttl {
	font-family: var(--bc-ff-jp);
	font-size: 22px;
	font-weight: 500;
	line-height: 1.8;
	color: var(--bc-text);
	margin-bottom: 20px;
}

.bc-lead .bc-lead-text {
	font-size: 14px;
	line-height: 2;
	color: var(--bc-gray-dark);
	margin-bottom: 0;
}

/* --- 院内写真のカード（.clinic-gallery-item） --- */
.bc-shot {
	height: 100%;
}

.bc-shot figure {
	margin: 0;
}

.bc-shot img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 8px;
	display: block;
}

.bc-shot__cap {
	margin-top: 12px;
	margin-bottom: 0;
	font-size: 13px;
	color: var(--bc-gray-dark);
	letter-spacing: 0.06em;
}

/* --- ACCESS --- */
.bc-access-detail {
	max-width: 1000px;
	margin: 0 auto;
}

.bc-access-detail .bc-access-map {
	margin-bottom: 50px;
}

.bc-access-col h3 {
	font-family: var(--bc-ff-jp);
	font-size: 18px;
	font-weight: 500;
	color: var(--bc-text);
	margin: 0 0 20px;
	padding: 0;
	background: none;
	border: none;
}

.bc-access-col h3::before,
.bc-access-col h3::after {
	content: none;
}

#page-body .bc-access-table {
	width: 100%;
	font-family: var(--bc-ff-jp-sans);
	font-size: 13px;
	letter-spacing: 0.04em;
	line-height: 1.9;
	margin: 0;
}

#page-body .bc-access-table th,
#page-body .bc-access-table td {
	padding: 12px 0;
	border: none;
	border-bottom: 1px solid var(--bc-gray-light);
	background: none;
	text-align: left;
	vertical-align: top;
}

#page-body .bc-access-table th {
	width: 96px;
	color: var(--bc-gray);
	font-weight: 400;
	white-space: nowrap;
}

#page-body .bc-access-table td {
	color: var(--bc-text);
}

/* 行き方の手順（.access-directions-item）。連番はCSSのcounterで出す */
.bc-directions {
	counter-reset: bc-step;
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.bc-directions li {
	counter-increment: bc-step;
	position: relative;
	padding-left: 38px;
	margin-bottom: 14px;
	font-size: 14px;
	line-height: 1.9;
	color: var(--bc-gray-dark);
}

#page-body .bc-directions li::before {
	content: counter(bc-step);
	position: absolute;
	left: 0;
	top: 2px;
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bc-accent);
	color: #fff;
	border-radius: 50%;
	font-family: var(--bc-ff-en);
	font-size: 13px;
	line-height: 1;
}

/* --- CONTACT --- */
.bc-telbox {
	background: #f9f7f4;
	border-radius: 12px;
	padding: 30px;
	margin: 30px auto;
	max-width: 800px;
	text-align: center;
}

.bc-telbox p {
	margin-bottom: 0;
}

/* Contact Form 7（確定版 .contact-form の見た目に寄せる） */
.wpcf7 {
	max-width: 800px;
	margin: 0 auto;
}

.bc-form-row {
	margin-bottom: 24px;
}

.bc-form-row label {
	display: block;
	font-size: 14px;
	font-weight: 500;
	color: var(--bc-text);
	letter-spacing: 0.06em;
}

.bc-req {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 8px;
	background: var(--bc-accent);
	color: #fff;
	border-radius: 3px;
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0.08em;
	vertical-align: 2px;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 select,
.wpcf7 textarea {
	width: 100%;
	margin-top: 10px;
	padding: 12px 14px;
	border: 1px solid var(--bc-gray-light);
	border-radius: 6px;
	background: #fff;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.8;
	color: var(--bc-text);
}

.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
	outline: none;
	border-color: var(--bc-accent);
}

.bc-form-privacy {
	text-align: center;
	font-size: 13px;
	color: var(--bc-gray-dark);
	margin: 30px 0 20px;
}

.bc-form-submit {
	text-align: center;
}

.wpcf7 input[type="submit"] {
	min-width: 240px;
	height: 54px;
	padding: 0 32px;
	background: var(--bc-accent);
	color: #fff;
	border: none;
	border-radius: 4px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.15em;
	cursor: pointer;
	transition: background 0.3s ease;
}

.wpcf7 input[type="submit"]:hover {
	background: var(--bc-accent-dark);
}

@media (max-width: 768px) {
	.bc-lead {
		margin-bottom: 40px;
	}

	.bc-lead__ttl {
		font-size: 18px;
	}

	.bc-telbox {
		padding: 24px 20px;
	}

	#page-body .bc-access-table th {
		width: 80px;
	}
}

/* 電話番号の大きい表示（.contact-phone-section の tel リンク） */
.bc-telbox__num {
	margin: 10px 0 !important;
}

.bc-telbox__num a {
	font-family: var(--bc-ff-jp-sans);
	font-size: 28px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--bc-accent);
	text-decoration: none;
}

.bc-telbox__num a::before {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	content: "\f879";
	font-size: 0.8em;
	margin-right: 10px;
}

.bc-telbox__note {
	font-size: 13px;
	color: var(--bc-gray);
	line-height: 1.9;
}

/* ==========================================================================
   26. オンライン診療（/online/）
   出典: ■クライアント確認済みHTML/menu-telemedicine (3).html
         .jump-nav / .shipping-bar / .subscr-banner / .menu-section
         （.section-icon / .section-eyebrow / .section-title-ja / .section-img /
           .section-overview）/ .accordion-trigger-* / .price-row / .faq-*

   ⚠️ このページだけ独自の配色変数（--gold / --charcoal / --beige）で書かれている。
   サイト全体の配色に読み替えてある（gold→アクセント / charcoal→--bc-black ほか）
   ========================================================================== */

/* --- ページ内ジャンプの説明文と送料バー --- */
.bc-shipbar {
	background: #f9f7f4;
	border-top: 1px solid var(--bc-gray-light);
	border-bottom: 1px solid var(--bc-gray-light);
	padding: 12px 20px;
	font-size: 13px;
	color: var(--bc-gray-dark);
	margin: 24px 0;
}

.bc-shipbar strong {
	color: var(--bc-accent-dark);
	font-weight: 500;
}

/* --- 定期便サブスクの案内（確定版は濃色グラデ＋下辺アクセント） --- */
.bc-subscr {
	background: linear-gradient(135deg, #2c2825 0%, #3d342c 100%);
	border: none;
	border-bottom: 3px solid var(--bc-accent);
	border-radius: 0;
	padding: 20px 24px;
	margin-bottom: 0;
}

.bc-subscr::before {
	width: 48px;
	height: 48px;
	background: var(--bc-accent);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	color: #fff;
}

.bc-subscr__label {
	font-family: var(--bc-ff-en);
	font-size: 11px;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--bc-accent);
	margin-bottom: 4px;
}

.bc-subscr__text {
	font-size: 14px;
	line-height: 1.7;
	letter-spacing: 0.03em;
	color: rgba(255, 255, 255, 0.88);
	margin-bottom: 0;
}

.bc-subscr__text strong {
	color: var(--bc-accent-light);
	font-weight: 500;
}

/* --- 診療カテゴリの見出し（.section-icon ＋ .section-title-ja） --- */
#online-dummy {
	/* （セクションidは sec-hangover 等なので、見出しはクラスで狙う） */
}

.bc-ol__ttl {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

/* .section-icon（濃色の丸＋アクセント色のアイコン）
   ⚠️ §3 の `.post_content h2.is-style-section_ttl::before{content:none}`（0,2,1）に
   負けるので、こちらも `.post_content h2` を付けて特異度を上げる（実測で発覚） */
.post_content h2.bc-ol__ttl[class*="bc-ico--"]::before {
	content: var(--bc-ico);
	font-family: var(--bc-ico-font);
	font-weight: var(--bc-ico-weight);
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bc-black);
	color: var(--bc-accent);
	border-radius: 50%;
	font-size: 20px;
	flex-shrink: 0;
}

.bc-ol__img {
	margin-bottom: 20px;
}

.bc-ol__img figure {
	margin: 0;
}

.bc-ol__img img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	border-radius: 4px;
	display: block;
}

/* .section-overview（左にアクセント罫線の囲み） */
.bc-ol__overview {
	background: #fff;
	border: 1px solid var(--bc-gray-light);
	border-left: 3px solid var(--bc-accent);
	padding: 20px 24px;
	margin-bottom: 24px;
	font-size: 13.5px;
	line-height: 1.9;
	color: var(--bc-gray-dark);
}

/* --- 施術アコーディオンの見出しの補足行（.accordion-trigger-sub） --- */
.bc-acc-sub {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--bc-gray-dark);
}

/* --- 料金の表（.price-row を表に置き換えている） --- */
.bc-price-note {
	display: block;
	margin-top: 2px;
	font-size: 11.5px;
	color: var(--bc-gray);
}

#page-body .bc-table--price td:last-child small,
.bc-ca .bc-table--price td:last-child small {
	font-family: var(--bc-ff-jp-sans);
	font-size: 11px;
	color: var(--bc-gray);
	margin-left: 2px;
}

.bc-ca .bc-table--price {
	width: 100%;
	font-size: 14px;
	margin: 0 0 8px;
}

.bc-ca .bc-table--price th,
.bc-ca .bc-table--price td {
	padding: 10px 4px;
	border: none;
	border-bottom: 1px solid var(--bc-gray-light);
	background: none;
	text-align: left;
	vertical-align: top;
	color: var(--bc-text);
}

.bc-ca .bc-table--price td:last-child {
	text-align: right;
	font-family: var(--bc-ff-en);
	font-size: 17px;
	font-weight: 500;
	color: var(--bc-black);
	white-space: nowrap;
}

/* .price-block-title */
.bc-ca .bc-subttl {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.1em;
	color: var(--bc-accent-dark);
	margin: 18px 0 10px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--bc-gray-light);
}

/* --- FAQ（loos/faq） --- */
#faq .swell-block-faq {
	max-width: 860px;
	margin: 0 auto;
	background: #fff;
	border-radius: 6px;
	overflow: hidden;
}

#faq .swell-block-faq__item {
	border-bottom: 1px solid var(--bc-gray-light);
}

#faq .swell-block-faq__item:last-child {
	border-bottom: none;
}

#faq .faq_q {
	padding: 16px 20px;
	font-family: var(--bc-ff-jp);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.6;
	color: var(--bc-text);
}

#faq .faq_a {
	padding: 0 20px 18px;
}

#faq .faq_a p {
	font-size: 13.5px;
	line-height: 1.85;
	color: var(--bc-gray-dark);
	margin-bottom: 0;
}

@media (max-width: 768px) {
	.bc-subscr {
		padding: 18px;
	}

	.bc-ol__img img {
		height: 180px;
	}

	.bc-ol__overview {
		padding: 16px 18px;
	}
}

/* ==========================================================================
   27. 2026-07-26 修正（後藤フィードバック / ビヨンドクリニック様修正内容.docx）
   ★ここは「確定版に寄せ直す」ための後段の上書き。番号は指摘書の項番に対応。
     原因はすべて computed style を実測して特定している（目視では外すため）
   ========================================================================== */

/* --- #1 FVの文言が左にズレる ---
   確定版の .hero-content は**画面全幅に対して中央**（x=20 w=1400）。
   WPはフルワイドの内側が l-article（max-width 1100）に縛られて x=30 w=1040 になり、
   視覚的な中心が約170px左にズレていた */
#fv > .swell-block-fullWide__inner {
	max-width: none;
	padding-left: 20px;
	padding-right: 20px;
}

/* .hero-en は EB Garamond 16px / mb16（Shippori 15px / mb30 になっていた） */
#fv > .swell-block-fullWide__inner > p:first-child {
	font-family: var(--bc-ff-en);
	font-size: 16px;
	margin-bottom: 16px;
}

/* .hero-lead の下余白（確定版 28px） */
#fv h1 + p {
	margin-bottom: 28px;
}

/* --- #6 #18 コンセプト画像の角丸・枠（確定版 .concept-right img / .feature-image img） --- */
#concept .wp-block-image img,
#page-body .wp-block-image img,
#page-body-4 .wp-block-image img {
	border-radius: 4px;
}

#concept .wp-block-image,
#concept .wp-block-image img {
	border: none;
	box-shadow: none;
}

/* --- #7 VIEW MORE の文字（確定版は Shippori Mincho。EB Garamond だと同じ13pxでも小さく見える） --- */
.is-style-btn_line .wp-block-button__link,
.wp-block-button.is-style-btn_line .wp-block-button__link {
	font-family: var(--bc-ff-jp);
}

/* --- #11 お知らせのタイトルが太い（確定版は 400。SWELL既定が 700 だった） --- */
#news .p-postList__title,
#news .p-postList__ttl {
	font-weight: 400;
}

/* 確定版 .news-item は日付とタイトルの間が 20px */
#news .p-postList__item a,
#news .p-postList__body {
	gap: 20px;
}

/* --- #12 アクセスの所在地・電話のフォント（確定版は明朝。ゴシックにしていた） --- */
#access .bc-access-table,
#access .bc-access-table th,
#access .bc-access-table td {
	font-family: var(--bc-ff-jp);
	letter-spacing: 0.08em;
}

#access .bc-access-table {
	font-size: 15px;
}

/* --- #13 フッターの手前に白い空白が出る ---
   CTA（#cta y終端7512）とフッター（y7602）の間に90pxの白帯ができていた。
   本文カラムの下マージンがフッターの外に出ているのが原因 */
.l-content,
.l-mainContent,
.post_content {
	margin-bottom: 0 !important;
}

#cta {
	margin-bottom: 0 !important;
}

.l-footer {
	margin-top: 0 !important;
}

/* --- #14 フッターの「LINE予約」と「お問い合わせ」が密着している ---
   `.bc-footer-btn` はボタン側に付いていて、ラッパー（.wp-block-buttons）は
   ボタンごとに別々に出ている。間隔はラッパー同士に入れる */
.l-footer .c-widget .wp-block-buttons + .wp-block-buttons {
	margin-top: 10px;
}

.l-footer .c-widget .wp-block-button {
	margin: 0;
}

/* --- #15 フッター3カラムの比率（確定版 1.5fr 1fr 1fr。等幅3分割になっていた） --- */
.l-footer .w-footer,
.l-footer__inner > .w-footer {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr;
	gap: 40px;
	align-items: start;
}

/* ホバーで背景が付いたり位置がずれるのを止める（確定版は色が薄くなるだけ） */
.l-footer .c-listMenu a {
	padding: 0;
	border: none;
	background: none;
	transition: opacity 0.3s ease;
}

.l-footer .c-listMenu a:hover {
	background: none;
	opacity: 0.6;
}

.l-footer .c-listMenu a::before,
.l-footer .c-listMenu a::after {
	content: none;
}

.l-footer .c-listMenu li {
	border: none;
	margin-bottom: 12px;
}

/* --- #19 #20 CONCEPT のセクション見出しと下のブロックが詰まりすぎ ---
   確定版 .sec-header { margin-bottom: 50px } */
#page-body-2 .swell-block-columns,
#page-body-4 .swell-block-columns,
#page-body-2 .bc-cat,
#page-body .bc-lead + .swell-block-columns {
	margin-top: 50px;
}

/* --- #25 オンライン診療：カテゴリ見出しのアイコンが画像に被る ---
   見出しを縦積みにして、丸アイコン→英字→和文の順に重ならないよう並べる */
.post_content h2.bc-ol__ttl {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	position: relative;
	z-index: 1;
}

.post_content h2.bc-ol__ttl[class*="bc-ico--"]::before {
	position: static;
	margin: 0 auto;
}

/* --- #27 FAQ の Q / A アイコンが本文に被る ---
   SWELLはQ/Aバッジを ::before の絶対配置で出すので、本文側に逃げ幅が要る。
   padding-left を 20px に潰していたのが原因 */
#faq .faq_q,
#faq .faq_a {
	padding-left: 3em;
}

#faq .faq_q {
	padding-right: 20px;
}

#faq .faq_a {
	padding-right: 20px;
	padding-bottom: 18px;
}

/* --- #30 /menu/ のジャンプボタン：上下中央＋文字色 ---
   確定版 .jump-btn の色は --text-main（#333）。アクセント濃色にしていた */
#page-body .swell-block-box-menu__inner {
	align-items: stretch;
}

#page-body .swell-block-box-menu__item {
	--the-text-color: var(--bc-text);
}

#page-body .swell-block-box-menu__link {
	height: 100%;
	color: var(--bc-text);
}

#page-body .swell-block-box-menu__link:hover {
	color: #fff;
}

/* --- #34 「このカテゴリの詳細ページを見る」ボタン --- */
.bc-detail-link .wp-block-button__link {
	font-size: 13px;
	padding: 0 24px;
	height: 44px;
	display: inline-flex;
	align-items: center;
}

.bc-pa .wp-block-buttons {
	padding: 16px 24px;
	margin: 0;
	background: #fff;
}

/* --- #37 施術写真の左端が本文とズレる ---
   親（.bc-svc > *）が既に margin-left:80px を持っているのに、
   画像側でもう80px足していて合計160pxになっていた */
.bc-svc__img {
	margin-left: 0;
}

/* --- #40 CONTACT の電話番号のフォント（確定版は明朝。ゴシックにしていた） --- */
.bc-telbox__num a {
	font-family: var(--bc-ff-jp);
}

/* --- #41 「送信する」ボタンが左に寄る ---
   Contact Form 7 が submit の隣に出すスピナーが幅を持って中央計算を狂わせていた */
.wpcf7-spinner {
	position: absolute;
	margin: 0;
}

.bc-form-submit {
	position: relative;
}

/* --- #43 LINE予約・相談ページ（/line/） --- */
.bc-line__card {
	max-width: 480px;
	margin: 0 auto;
	padding: 40px;
	background: #f9f7f4;
	border-radius: 12px;
	text-align: center;
}

.bc-line__card figure {
	margin: 0 auto 16px;
	max-width: 220px;
}

.bc-line__qr img {
	width: 100%;
	height: auto;
	display: block;
	background: #fff;
	padding: 12px;
	border-radius: 8px;
}

.bc-line__note {
	font-size: 13px;
	color: var(--bc-gray-dark);
	margin-bottom: 24px;
}

.bc-line__btn .wp-block-button__link {
	min-width: 260px;
	height: 54px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border-radius: 6px;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.08em;
}

.bc-line__btn .wp-block-button__link::before {
	font-family: "Font Awesome 6 Brands";
	font-weight: 400;
	content: "\f3c0";
	font-size: 1.2em;
}

.bc-line__body {
	font-size: 14px;
	line-height: 2;
	color: var(--bc-gray-dark);
	margin-bottom: 28px;
}

@media (max-width: 768px) {
	.bc-line__card {
		padding: 28px 20px;
	}
}

/* ==========================================================================
   28. 2026-07-26 修正 第2弾（ビヨンドクリニック様修正内容02.docx）
   ========================================================================== */

/* --- ① 料金表のフォントが本文と違う（/menu/allergy/ ほか） ---
   §20の `.bc-table` が全部ゴシック指定だったので、料金表まで本文と別書体になっていた。
   確定版の `.price-sub-table` は書体を指定せず本文（明朝）を継承する */
#page-body .bc-table--price,
#page-body .bc-table--price th,
#page-body .bc-table--price td,
.bc-ca .bc-table--price,
.bc-ca .bc-table--price th,
.bc-ca .bc-table--price td {
	font-family: var(--bc-ff-jp);
	letter-spacing: 0.08em;
}

/* 金額の列だけは確定版どおりガラモン（既存の指定を維持） */
#page-body .bc-table--price td:last-child,
.bc-ca .bc-table--price td:last-child {
	font-family: var(--bc-ff-en);
}

/* --- ② 「このカテゴリの詳細ページを見る」は常時表示 ---
   アコーディオンの外（.bc-pa 直下）に出すので、枠の中に収まるよう見た目を整える */
.bc-pa > .wp-block-group__inner-container > .wp-block-buttons,
.bc-pa > .wp-block-buttons {
	padding: 16px 24px;
	margin: 0;
	background: #fff;
	border-top: 1px solid var(--bc-gray-light);
}

/* --- ③ 内側（施術）の見出しに外側の診療科アイコンが被る ---
   `.bc-pa[class*="bc-ico--"] … __label::before` が**内側のlabelにも**当たっていた。
   アイコンを出すのは外側の見出しだけに限定する */
.bc-ca .swell-block-accordion__label::before {
	content: none !important;
}

/* --- ④ 開閉の△が枠の中で上／右にズレる ---
   SWELLの c-switchIconBtn の中の <i> が行送りぶん浮いていた */
.bc-pa .swell-block-accordion__icon,
.bc-ca .swell-block-accordion__icon {
	align-self: center;
	padding: 0;
}

.bc-pa .swell-block-accordion__icon i,
.bc-ca .swell-block-accordion__icon i {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	line-height: 1;
	margin: 0;
}

/* ==========================================================================
   29. 2026-07-26 修正 第3弾
   ========================================================================== */

/* --- ACCESSの地図が小さい ---
   iframe に寸法指定が無く初期値（300×150）のままだった。
   確定版（Manus版 .access-detail-map）は 900×450 */
.bc-access-detail .bc-access-map {
	width: 100%;
	max-width: 900px;
	margin: 0 auto 50px;
	border-radius: 4px;
	overflow: hidden;
}

.bc-access-detail .bc-access-map iframe {
	display: block;
	width: 100%;
	height: 450px;
	border: 0;
}

/* --- オンライン診療のFAQをアコーディオンに（確定版 .faq-item） ---
   確定版は「枠付きのカードが12px間隔で並び、Qを押すとAが開く」。
   Q/Aのバッジは ::before で描く（マークアップに入れるとRichTextがクラスを落とす） */
.bc-faq .swell-block-accordion {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 860px;
	margin: 0 auto;
	background: none;
}

.bc-faq .swell-block-accordion__item {
	border: 1px solid var(--bc-gray-light);
	border-radius: 4px;
	overflow: hidden;
	background: #fff;
	margin: 0;
}

.bc-faq .swell-block-accordion__title {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px 20px;
	background: none;
	cursor: pointer;
	transition: background 0.2s;
}

.bc-faq .swell-block-accordion__title:hover {
	background: var(--bc-gray-bg);
}

.bc-faq .swell-block-accordion__label {
	flex: 1;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-family: var(--bc-ff-jp);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.7;
	color: var(--bc-text);
	margin: 0;
	padding: 0;
	background: none;
	border: none;
}

/* .faq-q-badge（Q） */
.bc-faq .swell-block-accordion__label::before {
	content: "Q";
	font-family: var(--bc-ff-en);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--bc-accent);
	flex-shrink: 0;
}

.bc-faq .swell-block-accordion__label::after {
	content: none;
}

/* .faq-arrow（開くと180度回る。SWELLが2つのアイコンを出し分ける） */
.bc-faq .swell-block-accordion__icon {
	flex-shrink: 0;
	width: auto;
	height: auto;
	border: none;
	background: none;
	font-size: 11px;
	color: var(--bc-accent);
	margin-top: 4px;
}

.bc-faq .swell-block-accordion__body {
	padding: 14px 20px 18px;
	border-top: 1px solid var(--bc-gray-light);
	background: none;
}

/* .faq-a-inner ＋ .faq-a-badge（A） */
.bc-faq .bc-faq__a {
	display: flex;
	gap: 12px;
	font-size: 13.5px;
	line-height: 1.85;
	color: var(--bc-gray-dark);
	margin-bottom: 0;
}

.bc-faq .bc-faq__a::before {
	content: "A";
	font-family: var(--bc-ff-en);
	font-size: 16px;
	font-weight: 500;
	color: var(--bc-gray-dark);
	flex-shrink: 0;
	line-height: 1.4;
}

@media (max-width: 768px) {
	.bc-access-detail .bc-access-map iframe {
		height: 300px;
	}
}

/* --- ACCESSのクリニック情報のフォント（第3弾・追加） ---
   §2 の `.bc-access-table { font-family: ゴシック }` を引き継いでいたが、
   Manus版の `.access-detail-table` は書体を指定せず本文（明朝14px）を継承する */
#page-body .bc-access-table,
#page-body .bc-access-table th,
#page-body .bc-access-table td {
	font-family: var(--bc-ff-jp);
	font-size: 14px;
	letter-spacing: 0.08em;
}

/* .access-detail-info h3 / .access-directions h3 は 20px */
#page-body .bc-access-col h3 {
	font-size: 20px;
}

/* ==========================================================================
   30. オンライン診療のキービジュアル（後藤フィードバック #23 / §7）
   出典: ■クライアント確認済みHTML/menu-telemedicine (3).html
         .page-hero     { line-height: 0 }
         .page-hero-img { width:100%; height:auto; display:block }

   このページのヒーローは「写真」ではなく **情報が描き込まれたバナー画像**
   （1597×985・ページタイトル／対応カテゴリ7つ／診療の流れ5ステップ／
   最短当日発送バッジが全部絵の中にある）。
   それを §19 の共通ページヘッダー（min-height 280px ＋ object-fit:cover ＋
   黒45%オーバーレイ）に流し込むと、**画像の縦28%の帯しか出ないうえに暗くなる**。
   後藤の指摘「流石に見えなすぎる」はこれ。

   なので /online/ だけ §19 を解除して、確定版と同じ「全幅・原寸比率・素のまま」に戻す。
   タイトル文字は絵の中にあるので h1 は視覚的に隠す（＝DOMには残すのでSEO・読み上げは維持）。
   ========================================================================== */
.bc-page-online .l-topTitleArea {
	display: block;
	min-height: 0;
	line-height: 0;          /* .page-hero と同じ。img下の行間の隙間を殺す */
	overflow: visible;
}

/* §19 の absolute + cover を解除して、原寸比率のまま全幅で流す */
.bc-page-online .l-topTitleArea__img {
	position: static;
	inset: auto;
	width: 100%;
	height: auto;
	object-fit: fill;
	max-width: none;
}

/* 確定版のヒーローには暗幕が無い（明るい白ベースの図版なので敷くと潰れる） */
.bc-page-online .l-topTitleArea::before {
	content: none;
}

/* タイトルは画像内に描かれている＝二重になるので視覚的にだけ隠す */
.bc-page-online .l-topTitleArea__body {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (max-width: 768px) {
	/* §19 の SP用 min-height:200px も解除する（PC側だけだと効き残る） */
	.bc-page-online .l-topTitleArea {
		min-height: 0;
	}
}

/* ==========================================================================
   31. SPのヘッダー・フッターの崩れ（2026-07-26 後藤指摘・実機で発覚）
   出典: index (10).html
     @media(max-width:1024px){ .header-reserve-btn { display:none } }
     @media(max-width:1024px){ .footer-main .footer-container{
                                 grid-template-columns:1fr; gap:32px } }
     .header-logo-img { height:26px }   ← PC/SP共通。SP用の上書きは無い
   ========================================================================== */

@media (max-width: 1024px) {

	/* --- ① ヘッダーの予約ボタン（潰れていたもの） ---
	   SWELLのカスタムボタンは `--logo_size_sp`（=32px）の**正方形**に
	   24pxのアイコンと「ご予約」3文字（13px）を縦に積む作りなので、
	   32pxの箱に 24+29 = 53px を押し込むことになり必ず溢れる。
	   さらにアイコンはSWELL既定の `icon-search`（**虫眼鏡**）のままだった
	   （`custom_btn_icon` を設定していなかった＝ sp_btns.php の既定値）。
	   確定版はそもそもこの幅では予約ボタンを出さないので、それに合わせる。
	   SPのCV導線は追従バー（LINE予約 / CONTACT）とドロワー内の
	   「ご予約・お問合せ」が担うので、導線は減らない。
	   ＋副作用として、ヘッダーが［ロゴ｜ハンバーガー］の2要素になり
	   `space-between` でロゴが左寄せになる＝確定版のSPヘッダーと同じ並びになる */
	.l-header__customBtn {
		display: none;
	}

	/* --- ③ フッターを1カラムに積む（LINE予約／お問い合わせが崩れていたもの） ---
	   §27 の #15 で確定版のPC比率 `1.5fr 1fr 1fr` を入れたとき、
	   **SPで解除するのを書き忘れていた**。そのためSPでも3カラムのままで、
	   3列目が幅80pxまで潰れ、`padding:0 20px` を引くと文字が入るのは40px。
	   結果「LINE予約」「お問い合わせ」が1〜2文字ずつ折り返して
	   44pxのボタンから溢れ、上下のボタンと重なっていた */
	.l-footer .w-footer,
	.l-footer__inner > .w-footer {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

/* --- ② ヘッダーロゴが小さい ---
   SWELLは `--logo_size_sp` を**箱の高さ**として使い、その中の
   `.c-headLogo__link` に `padding:10px 0` が入る。
   `logo_size_sp` はカスタマイザーの下限が32pxなので、
   32 - 20 = **実質12px** までロゴが縮んでいた（確定版は26px）。
   カスタマイザーの値を上げると `.l-header__menuBtn` の寸法まで一緒に変わる
   （両方 `var(--logo_size_sp)` を見ている）ので、ここはCSSで高さだけ解放する。
   SWELLのSPヘッダーは959px以下なので、それに合わせる */
@media (max-width: 959px) {
	.l-header__logo,
	.l-header__logo .c-headLogo,
	.l-header__logo .c-headLogo__link {
		height: auto;
	}

	.c-headLogo__img {
		height: 26px;
		width: auto;
		max-width: none;
	}

	/* --- ④ ハンバーガーが左に出ていた（2026-07-26 後藤指摘） ---
	   確定版のSPヘッダーは ［ロゴ(左) ……… ハンバーガー(右)］。
	   `.header-main-container` の子が DOM順で
	   logo → nav → reserve-btn → menu-btn と並び、**order指定が無い**ので
	   そのままの順で `space-between` される。
	   一方SWELLは `order` で ［メニュー(1)｜ロゴ(2)｜カスタムボタン(3)］に
	   組み替えるため、ハンバーガーが左・ロゴが中央になっていた。
	   ＝**SWELL既定の挙動で、①の予約ボタン非表示とは無関係に最初からこうだった**。
	   確定版の並びに戻す（これで①の副作用＝ロゴが右端に飛ぶ問題も同時に解消する） */
	.l-header__logo {
		order: 1;
	}

	.l-header__menuBtn {
		order: 3;
	}

	/* 左右の余白は確定版の `.header-main-container { padding: 0 20px }` に合わせる
	   （SWELLの既定はロゴ側の `padding: 0 2vw` ＝390pxだと7.8pxしかない） */
	.l-header__inner {
		padding-left: 20px;
		padding-right: 20px;
	}

	.l-header__logo {
		padding-left: 0;
		padding-right: 0;
	}
}

/* ============================================================
   §32 フィードバック第4弾（2026-07-28・プロジェクトMD §3.14）
   ============================================================ */

/* --- #47 「定期便サブスクプラン」のテキストが見えない ---
   真因は色の指定ミスではなく**詳細度負け**。
   `.bc-callout p { color: var(--bc-gray-dark) }`（詳細度 0,1,1）が
   `.bc-subscr__label` / `.bc-subscr__text`（0,1,0）に勝っていて、
   濃色グラデ（#2c2825→#3d342c）の上に **#666 が乗っていた**＝ほぼ読めない。
   実測: label の color が rgb(102,102,102)。確定版は
   `.subscr-label{color:var(--gold)}` / `.subscr-text{color:rgba(255,255,255,.88)}`。
   出典: menu-telemedicine (3).html L193-207 */
.bc-subscr .bc-subscr__label {
	color: var(--bc-accent);
}

.bc-subscr .bc-subscr__text {
	color: rgba(255, 255, 255, 0.88);
}

.bc-subscr .bc-subscr__text strong {
	color: var(--bc-accent-light);
}

/* --- #48 FAQの「Q」が質問文の1文字目に重なる ---
   Q/Aバッジは `.swell-block-accordion__label` の ::before で描いている
   （マークアップに入れるとRichTextがクラスを落とすため＝§3.11-9）。
   ところが **label は `<h3>`** で、SWELLは `.post_content h3::before` を
   `position:absolute; left:0` で出す。こちらは content とフォントしか
   指定していなかったので、**位置指定だけSWELL側が生き残り**、
   flexアイテムにならずに質問文へ重なっていた。
   実測: ::before が position:absolute / left:0 / label の padding-left:0。
   ＝§3.12で一度踏んだ「SWELLのh3::beforeは絶対配置」と同じ罠。
   確定版は `.faq-q-badge` が flex アイテム（gap:12px）。出典: 同 L484-491 */
.bc-faq .swell-block-accordion__label::before {
	position: static;
	left: auto;
	top: auto;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	transform: none;
}

/* --- #44 キャンペーンバナーをユーザーが手で動かせるように ---
   確定版は `.banner-slider { cursor: grab; user-select: none }` ＋
   `.banner-slider.is-dragging { cursor: grabbing }`（出典: index (10).html L93-94）。
   ドラッグ処理は bc-front.js の 3.（移植時に落としていた）。
   SWELLのリッチカラムは外側が overflow-x:hidden なので、
   ネイティブの横スクロールでも動かせなかった＝掴めるのはこの実装だけ */
#campaign .swell-block-columns.bc-draggable {
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
}

#campaign .swell-block-columns.bc-draggable.is-dragging {
	cursor: grabbing;
}

/* ドラッグ中に画像・リンクがゴーストとして付いてこないように
   （本体の対策は bc-front.js の dragstart の preventDefault。
     これはSafari等の保険で、リンク自体は生きたまま） */
#campaign .swell-block-columns.bc-draggable img,
#campaign .swell-block-columns.bc-draggable a {
	-webkit-user-drag: none;
}

/* ============================================================
   §33 SNSアイコン（Instagram / TikTok）＝2026-07-30 URL支給で設置
   URLはカスタマイザー（instagram_url / tiktok_url）の1か所。
   ヘッダー上部バーとフッターの両方に自動で出る。
   出典: index (10).html L61-62（ヘッダー）/ L215-217・L275（フッター）
   ============================================================ */

/* --- ヘッダー上部バーの右（.header-top-sns） ---
   確定版: `font-size:16px; color:#fff` ＋ hover で opacity .8 */
/* ⚠️ 上部バーの実際のクラスは `.l-header__bar`（`.bc-headBar` は中の項目側）。
   SWELL既定は 12px なので確定版の 16px に上げる */
.l-header__bar .c-iconList {
	font-size: 16px;
}

.l-header__bar .c-iconList__item a {
	color: #fff;
	transition: opacity 0.2s;
}

.l-header__bar .c-iconList__item a:hover {
	opacity: 0.8;
}

/* --- フッター（.footer-sns） ---
   確定版は `.footer-right` の中＝**LINE予約／お問い合わせボタンの上に右寄せ**で、
   40pxの丸（背景 rgba(255,255,255,.1)）。SWELL既定はコピーライトの上・中央・素のアイコンなので、
   位置は functions.php の dynamic_sidebar_before（footer_box3）で移し、見た目をここで合わせる */
.bc-footSns .c-iconList {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	margin-bottom: 20px;
	font-size: 16px;
}

.bc-footSns .c-iconList__item {
	margin: 0;
}

.bc-footSns .c-iconList__item a {
	display: flex;
	align-items: center;
	justify-content: center;
	/* SWELLのアイコンリンクは padding:4px 6px を持つので、
	   box-sizing を効かせないと 40px 指定でも 44px になる（実測で発覚） */
	box-sizing: border-box;
	padding: 0;
	width: 40px;
	height: 40px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 50%;
	color: #fff;
	transition: background 0.3s;
}

/* 確定版は hover で var(--teal)。このサイトのアクセント色に読み替える */
.bc-footSns .c-iconList__item a:hover {
	background: var(--bc-accent);
	opacity: 1;
}

/* 確定版 L275: 768px以下は左寄せ（フッターが1カラムに積まれるため） */
@media (max-width: 768px) {
	.bc-footSns .c-iconList {
		justify-content: flex-start;
	}
}

/* ============================================================
   §34 ボックスメニューの縦位置（2026-09-21 後藤指示）

   1行のカード（水光注射・幹細胞上清液・ボトックス・がんリスク検査）だけ
   文字が上に寄って見えていた。真因は**SWELL既定の `flex-grow:1`**で、
   `__text` が残りの高さいっぱいまで伸び、その中の1行が上端に置かれるため
   （実測: リンク72.8px・1行の文字なのに span の高さが30.8px＝2行ぶん）。
   伸ばすのをやめれば、リンク側の justify-content:center が効いて
   アイコン＋文字のかたまりが上下中央にそろう。TOPと /menu/ の両方に効かせる。
   ============================================================ */
.swell-block-box-menu .swell-block-box-menu__text,
#page-body .swell-block-box-menu__text {
	flex: 0 0 auto;
}

/* ============================================================
   §35 アコーディオン内の薬の説明文（2026-09-21）

   確定版の `.desc-text` は「13px・行間1.85・淡いベージュ地の箱」。
   これを素の本文（bc-lead-text＝14px）で出していたため、
   薬名（.bc-ca .bc-subttl＝12px）より説明のほうが大きく見えて
   主従が逆転していた（後藤指摘）。確定版の値をそのまま当てる。
   ============================================================ */
/* ⚠️ `#page-body` を付けると当たらない。固定ページのこの本文は
   #main_content > .post_content の下で、#page-body の中ではない（実測）。
   薬名の `.bc-ca .bc-subttl` と同じ粒度でアコーディオンに限定する */
.bc-ca .bc-desc-box {
	margin-top: 14px;
	padding: 14px 16px;
	font-size: 13px;
	line-height: 1.85;
	color: #7a6e64;            /* 確定版 --text-sub */
	background: #f7f3ed;       /* 確定版 --accent-bg */
	border-radius: 3px;
}

/* §35-2 折りたたみの中身が薬名から始まるとき、上が詰まって見える（後藤指摘）。
   本体の padding-top は2pxで、SWELLが先頭要素の margin-top を0に落とすため、
   グレーの帯が薬名に貼りつく。確定版は本文先頭に16pxの余白がある（実測17px）。
   先頭が薬名のときだけ足して 2+14=16px にそろえる。 */
.bc-ca .swell-block-accordion__body > .bc-subttl:first-child {
	/* SWELLが先頭要素の margin-top を !important で0にしているので、
	   こちらも !important でないと当たらない（実測で margin-top:0 のままだった） */
	margin-top: 14px !important;
}

/* ==========================================================================
   §36 960〜1024px でヘッダーのロゴが消える（2026-10-03 後藤指示＝プロジェクトMD §7.5 の案①）
   SWELLのSPヘッダーは959px以下。960〜1024pxはPCヘッダーのままナビ9項目（幅907px）と
   ロゴを1行に並べるため、ロゴだけが0〜13pxに潰れていた（iPad横向きが直撃）。
   確定版も1024px以下をタブレット扱い（§31 の予約ボタン非表示と同じ境目）なので、
   この帯をSPヘッダー［ロゴ｜ハンバーガー］に切り替える。
   SWELLが959px以下で当てているもの（main.css の @media not all and (min-width:960px)）と、
   §31 の②④（ロゴ26px・並び順・左右20px）をこの帯にも当てる。
   ドロワーの開閉・オーバーレイで閉じる・スクロール中の固定は959pxと同じ動きを実測で確認
   ========================================================================== */
@media (min-width: 960px) and (max-width: 1024px) {
	/* PCの上部バー・グローバルナビ・スクロール時の追従ヘッダーを隠す */
	.l-header .l-header__bar,
	.l-header .l-header__gnav,
	.l-fixHeader {
		display: none !important;
	}

	/* ハンバーガーを出す（SWELLは960px以上で .sp_ を display:none!important にしている） */
	.l-header .l-header__menuBtn.sp_ {
		display: block !important;
	}

	/* ドロワー本体（SWELLは960px以上で display:none） */
	.p-spMenu {
		display: block;
	}

	[data-loaded=false] .p-spMenu {
		display: none;
	}

	[data-spmenu=opened] body {
		overflow-y: hidden;
		touch-action: none;
	}

	.l-header[data-spfix="1"] {
		position: sticky;
		top: var(--swl-adminbarH, 0);
	}

	.-series .l-header__inner,
	.l-header__inner {
		align-items: center;
		justify-content: space-between;
		padding: 0 20px;
	}

	.-series .l-header__logo {
		margin-right: 0;
		padding: 0;
	}

	.l-header__logo,
	.l-header__logo .c-headLogo,
	.l-header__logo .c-headLogo__link {
		height: auto;
	}

	.c-headLogo__img {
		height: 26px;
		width: auto;
		max-width: none;
	}

	.l-header__logo {
		order: 1;
	}

	.l-header__menuBtn {
		order: 3;
	}
}