/* ==========================================================================
   矯正歯科ページ（/orthodontics/）専用
   ・/implunt の base.css・layout.css（ヘッダー・ハンバーガー・共通の色や文字の変数）を土台にする
   ・文字サイズ・行間・太さ・余白はデザイン（PC 1280px）の実測値で決める
     → /implunt の余白ユーティリティ（section-padding-*・mt-*）や幅（contents-width）は使わない
   ・クラス名は o- で始める
   ・ブレイクポイントは /implunt と同じ：タブレット 1024px 以下・スマホ 599px 以下
   ========================================================================== */

/* ===== 変数 ===== */
:root {
	/* 色（紺・青は /implunt と共通の変数を使う） */
	--o-color-text: #000;
	--o-color-blue: #0052a5;       /* 料金バッジ・カード見出し */
	--o-color-orange: #e07b00;     /* 大切なこと・注意書き */
	--o-bg-lightblue: #c4dcef;     /* 治療メニュー帯・ご相談ボックス */
	--o-bg-gray: #f3f3f3;          /* 症例・担当医などのグレーボックス */
	--o-bg-faq: #e2e2e2;
	--o-bg-stage-pre: #f6e5e5;
	--o-bg-stage-first: #d3e8a4;
	--o-bg-stage-second: #a3c9ec;

	/* 文字（デザインデータ＝Adobe XD の指定値） */
	--o-fs-body: 16px;     /* 本文 */
	--o-fs-small: 14px;    /* 注記・別途費用 */
	--o-fs-label: 14px;    /* 補足ラベル */
	--o-fs-card: 18px;     /* カード見出し */
	--o-fs-sub: 22px;      /* 小見出し */
	--o-fs-ttl: 26px;      /* セクション見出し */
	--o-lh-body: 1.7;      /* 16px → 27px */
	--o-lh-card: 1.5;      /* カード内 16px → 24px */
	--o-ls: -0.02em;       /* 字間（XD のトラッキング -20） */
	--o-lh-ttl: 1.45;

	/* 幅（デザイン 1280px 時：外側 1108px・内側 920px） */
	--o-w-outer: min(86.6%, 1108px);
	--o-w-inner: min(71.9%, 920px);
	--o-pad-box: 8.5%;     /* グレーボックス等の左右（1108px の 94px） */

	/* 縦の余白（デザイン実測） */
	--o-gap-xl: 96px;      /* 治療ごとの大きな区切り */
	--o-gap-l: 80px;
	--o-gap-m: 64px;       /* 同じ流れの中の区切り */
	--o-gap-s: 32px;       /* 続きのブロック */
	--o-gap-block: 30px;   /* 本文 → 表・カード */
	--o-gap-ttl: 14px;     /* 見出し → 本文 */
	--o-radius: 8px;
}
@media (max-width: 1024px) {
	:root {
		--o-w-outer: 90%;
		--o-w-inner: 90%;
		--o-pad-box: 5%;
		--o-gap-xl: 80px;
		--o-gap-l: 64px;
		--o-gap-m: 56px;
	}
}
@media (max-width: 599px) {
	:root {
		--o-fs-body: 14px;
		--o-fs-small: 12px;
		--o-fs-label: 12px;
		--o-fs-card: 16px;
		--o-fs-sub: 18px;
		--o-fs-ttl: 20px;
		--o-pad-box: 5%;
		--o-gap-xl: 40px;
		--o-gap-l: 48px;
		--o-gap-m: 40px;
		--o-gap-s: 24px;
		--o-gap-block: 20px;
		--o-gap-ttl: 10px;
	}
}

/* ===== base.css の上書き（このページの本文はデザインどおり 15px・行間 1.8・字間なし） ===== */
/* フッター（footer.php）側にも上の余白があるので、デザインの 70px に合わせて少なめに */
.page-ortho main {
	padding-bottom: 20px;
	overflow-x: clip;
}
:where(.page-ortho main) :is(p, li, dt, dd) {
	font-size: var(--o-fs-body);
	line-height: var(--o-lh-body);
	letter-spacing: var(--o-ls);
	color: var(--o-color-text);
}
:where(.page-ortho main) :is(h1, h2, h3, h4, a, span) {
	letter-spacing: var(--o-ls);
}
/* base.css は a を 22px 太字にしているので、本文中のリンクは周りの文字に合わせる */
:where(.page-ortho main) a {
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}
/* base.css はタブレット以下で figure に左右 5% の余白を付けるので外す */
.page-ortho figure { padding-left: 0; padding-right: 0; }
.page-ortho img { max-width: 100%; height: auto; }

/* ===== 幅 ===== */
.o-wrap { width: var(--o-w-outer); margin-inline: auto; }
.o-wrap-in { width: var(--o-w-inner); margin-inline: auto; }

/* タブレット以下：各治療のバナーだけ、背景を画面の端まで広げる（治療ごとの区切りとして目立たせる。中の文字は o-wrap の幅のまま）
   左右の余白 ＝（画面幅 − o-wrap の幅）÷ 2。% は o-wrap の幅が基準 */
@media (max-width: 1024px) {
	.o-wrap > .o-banner {
		margin-inline: calc(50% - 50vw);
		padding-inline: calc(50vw - 50%);
		border-radius: 0;
	}
}

/* ===== 見出し ===== */
.o-ttl {
	margin-bottom: var(--o-gap-ttl);
	font-size: var(--o-fs-ttl);
	font-weight: var(--fw-bold);
	line-height: var(--o-lh-ttl);
	color: var(--color-main);
}
.o-ttl-s,
.o-subttl {
	margin-bottom: 8px;
	font-size: var(--o-fs-sub);
	font-weight: var(--fw-bold);
	line-height: var(--o-lh-ttl);
	color: var(--color-sub);
}

/* タブレットだけ改行（PC・SP では改行しない） */
.o-tab-br { display: none; }
@media (min-width: 600px) and (max-width: 1024px) {
	.o-tab-br { display: inline; }
}

/* タブレット以下：見出しは全体的に中央寄せ（セクション見出し・3D の小見出し・導入の小見出し・各治療の本文の見出し） */
@media (max-width: 1024px) {
	h2.o-ttl,
	h2.o-ttl-s,
	.o-intro-body .o-subttl,
	.o-treat-body .o-ttl { text-align: center; }
}
/* SP：見出し中の（インビザライン）は小さく */
@media (max-width: 599px) {
	.o-ttl-paren { font-size: 15px; }

}

/* ===== ページ内で何度も使う部品 ===== */
/* 青枠の「詳しく見る」ボタン（デザイン 356×72） */
.o-more-btn {
	position: relative;
	display: inline-block;
	min-width: 356px;
	margin-top: 20px;
	padding: 4px 24px;
	border: 2px solid var(--color-sub);
	border-radius: var(--o-radius);
	background: var(--color-white);
	color: var(--color-sub);
	font-size: var(--o-fs-card);
	font-weight: var(--fw-bold);
	line-height: 1.75;
	text-align: center;
	text-decoration: none;
	box-sizing: border-box;
}
.o-more-btn::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 10px;
	border-style: solid;
	border-width: 6px 0 6px 10px;
	border-color: transparent transparent transparent var(--color-sub);
	transform: translateY(-50%);
}
@media (max-width: 599px) {
	/* 文字は本文と同じサイズ、左右の余白は半分にして▶を端に寄せる */
	.o-more-btn { display: block; min-width: 0; width: 100%; padding: 6px 18px; font-size: var(--o-fs-body); }
}

/* 本文中の下線リンク */
.o-text-link { color: var(--color-sub); font-weight: var(--fw-bold); text-decoration: underline; }
.o-loan-link { color: inherit; text-decoration: underline; word-break: break-all; }

/* 注記 */
.o-note {
	margin-top: 10px;
	padding-left: 1em;
	text-indent: -1em;
}
:where(.page-ortho main) .o-note { font-size: var(--o-fs-small); }

/* チェック付きリスト（各治療の見出しバナー：26px 太字・行の間 47px） */
.o-check-list { display: grid; gap: 8px; margin-top: 20px; }
:where(.page-ortho main) .o-check-list li {
	position: relative;
	padding-left: 58px;
	font-size: var(--o-fs-ttl);
	font-weight: var(--fw-bold);
	line-height: 1.5;
	color: var(--color-main);
}
.o-check-list li::before {
	content: "";
	position: absolute;
	top: 0.25em;
	left: 0;
	width: 30px;
	height: 28px;
	border: 2px solid var(--color-main);
	background: var(--color-white);
	box-sizing: border-box;
}
.o-check-list li::after {
	content: "";
	position: absolute;
	top: calc(0.25em - 6px);
	left: 9px;
	width: 13px;
	height: 25px;
	border-right: 5px solid var(--color-main);
	border-bottom: 5px solid var(--color-main);
	transform: rotate(40deg);
}
@media (max-width: 1024px) {
	:where(.page-ortho main) .o-check-list li { font-size: var(--fs-ls); padding-left: 48px; }
}
@media (max-width: 599px) {
	.o-check-list { gap: 4px; margin-top: 15px; }
	:where(.page-ortho main) .o-check-list li { font-size: var(--fs-m); padding-left: 32px; }
	.o-check-list li::before { width: 20px; height: 19px; top: 0.2em; }
	.o-check-list li::after { left: 6px; top: calc(0.2em - 4px); width: 8px; height: 17px; border-width: 0 3px 3px 0; }
}

/* 丸印リスト（3Dスキャナー） */
:where(.page-ortho main) .o-dot-list li {
	position: relative;
	padding-left: 1.4em;
	color: var(--color-sub);
	line-height: 1.75;
}
.o-dot-list li::before {
	content: "";
	position: absolute;
	top: 0.45em;
	left: 0;
	width: 0.95em;
	height: 0.95em;
	border-radius: 50%;
	background: var(--color-sub);
}

/* YouTube（クリックで読み込み） */
.o-video .yt-facade {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	padding: 0;
	border: 0;
	background: #000;
	cursor: pointer;
	overflow: hidden;
}
.o-video .yt-facade img { display: block; width: 100%; height: 100%; object-fit: cover; }
.o-video .yt-facade::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 68px;
	height: 48px;
	margin: -24px 0 0 -34px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 48'%3E%3Cpath d='M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z' fill='%23f00'/%3E%3Cpath d='M45 24 27 14v20' fill='%23fff'/%3E%3C/svg%3E") no-repeat center / contain;
}
.o-video iframe,
.o-video > div { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; }

/* ==========================================================================
   各セクションの間隔（デザイン実測：96 / 80 / 64 / 32px）
   ========================================================================== */
.o-intro { padding-top: var(--o-gap-m); }
#invisaline,
#question,
#wire,
#petit,
#child,
#doctor,
#mhlw_disclosure { margin-top: var(--o-gap-xl); }
#reason,
#flow { margin-top: var(--o-gap-l); }
.o-support,
#price,
#counseling,
#tools { margin-top: var(--o-gap-m); }
.o-digital,
#casestudy { margin-top: var(--o-gap-s); }

/* ===== ファーストビュー ===== */
.o-hero {
	position: relative;
	padding-top: calc(var(--header-height) + 22px);
	overflow: hidden;
}
.o-hero-inner { position: relative; min-height: 568px; }
.o-hero-body { position: relative; z-index: 1; width: 72%; padding-bottom: 50px; }
.o-hero-head {
	display: grid;
	grid-template-columns: 150px 1fr;
	gap: 24px;
	align-items: start;
}
.o-hero-mark { margin-top: 18px; }
.o-hero-mark img { display: block; width: 100%; }
.o-hero-ttl {
	font-size: 42px;
	font-weight: var(--fw-bold);
	letter-spacing: var(--o-ls);
	line-height: 1.22;
	color: var(--color-sub);
}
.o-hero-catch {
	margin-top: 30px;
	font-size: var(--fs-ls);
	font-weight: var(--fw-bold);
	line-height: var(--lh-m);
	color: var(--color-sub);
}
:where(.page-ortho main) .o-hero-catch { font-size: var(--fs-ls); line-height: 1.5; color: var(--color-sub); }
.o-hero-award {
	width: 500px;
	max-width: 62%;
	margin: 30px 0 0 42px;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.o-hero-award img { display: block; width: 100%; }
.o-hero-img {
	position: absolute;
	right: -9%;
	bottom: 0;
	width: 50%;
	max-width: 620px;
}
.o-hero-img img { display: block; width: 100%; }
@media (max-width: 1200px) {
	/* 1行目「徳島でマウスピース矯正治療」が折り返さないよう画面幅に合わせる */
	.o-hero-ttl { font-size: 3.1vw; }
}
@media (max-width: 1024px) {
	.o-hero-inner { min-height: 0; }
	/* 下に余白を取り、女性の写真（下揃え）を少し下げる（SP と同じ） */
	.o-hero-body { width: 100%; padding-bottom: 40px; }
	/* キャッチコピーはマーク＋タイトルの下に全幅・左寄せで置く */
	/* 幅 80%（ただしタイトルが折り返さないよう最低 540px） */
	.o-hero-head { grid-template-columns: 110px 1fr; gap: 24px; align-items: center; width: 100%; }
	.o-hero-text { display: contents; }
	.o-hero-mark { margin-top: 0; }
	.o-hero-ttl { font-size: clamp(28px, calc(6.2vw - 12px), 38px); }  /* タブレットは大きめに（1 行目「徳島でマウスピース矯正治療」が折り返さない範囲で） */
	.o-hero-catch { grid-column: 1 / -1; margin-top: 0; text-align: left; }
	:where(.page-ortho main) .o-hero-catch { font-size: 20px; }  /* タブレットは少し大きく（SP は下で 16px） */
	.o-hero-award { width: 52%; margin: 25px 0 0; }
	.o-hero-img { right: -5%; width: 46%; }
}
@media (max-width: 599px) {
	.o-hero { padding-top: calc(var(--header-height) - 5px); }
	/* タブレットと同じ並び（マーク左・タイトル右、その下にキャッチコピー）を小さく */
	.o-hero-head { grid-template-columns: 84px 1fr; gap: 12px; width: 100%; }
	.o-hero-ttl { font-size: 22px; line-height: 1.4; }
	.o-hero-catch { margin-top: 12px; }
	/* 下に余白を取り、女性の写真（下揃え）を少し下げる */
	.o-hero-body { padding-bottom: 40px; }
	:where(.page-ortho main) .o-hero-catch { font-size: var(--fs-m); }
	.o-hero-award { width: 54%; max-width: none; margin-top: 18px; }
	.o-hero-img { right: -14%; width: 66%; }
}
@media (max-width: 374px) {
	.o-hero-head { grid-template-columns: 76px 1fr; gap: 10px; }
	.o-hero-ttl { font-size: 5.6vw; }  /* 幅の狭い端末は折り返さないよう画面幅に合わせる（360px で約20px） */
}

/* 治療メニュー（4 つのボタン：262×78・間 20px） */
.o-menu { position: relative; z-index: 2; padding: 17px 0 20px; background: var(--o-bg-lightblue); }
.o-menu-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.o-menu-btn {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	/* ▼（absolute）の分の高さ＝bottom＋三角の高さ。上下両方に足して、中身が上下中央になるようにする */
	--o-arrow-space: 8px;  /* 2px＋6px */
	padding: calc(4px + var(--o-arrow-space)) 12px;
	border: 2px solid var(--color-sub);
	border-radius: var(--o-radius);
	background: var(--color-white);
	text-decoration: none;
	box-sizing: border-box;
}
.o-menu-btn::after {
	content: "";
	position: absolute;
	bottom: 2px;
	left: 50%;
	border-style: solid;
	border-width: 6px 8px 0;  /* 横長の三角（16×6） */
	border-color: var(--color-sub) transparent transparent;
	transform: translateX(-50%);
}
.o-menu-btn img { flex-shrink: 0; width: 60px; height: 60px; border-radius: 50%; object-fit: cover; }
.o-menu-text { display: grid; gap: 0; }
.o-menu-name { font-size: var(--fs-m); font-weight: var(--fw-bold); line-height: 1.35; color: var(--color-sub); }
.o-menu-desc { font-size: var(--o-fs-label); font-weight: var(--fw-regular); line-height: 1.35; color: var(--o-color-text); }
@media (max-width: 1200px) {
	.o-menu-list { gap: 12px; }
	.o-menu-btn { gap: 10px; padding-inline: 8px; }
	.o-menu-btn img { width: 50px; height: 50px; }
	.o-menu-desc { font-size: 13px; }
}
@media (max-width: 1024px) {
	.o-menu-list { grid-template-columns: repeat(2, 1fr); }
}
/* スマホもタブレットと同じ並び（2 列・アイコン左／文字右）。幅に合わせて小さくする */
@media (max-width: 599px) {
	.o-menu { padding: 12px 0 14px; }
	.o-menu-list { gap: 4px; }
	.o-menu-btn { gap: 6px; height: 100%; padding: 6px 4px 8px; }
	.o-menu-btn::after { bottom: 2px; border-width: 3px 4.5px 0; }
	.o-menu-btn img { width: 40px; height: 40px; }
	.o-menu-name { font-size: 12px; white-space: nowrap; }
	.o-menu-desc { font-size: 10px; }
}
/* 幅の狭いスマホ（360px など） */
@media (max-width: 374px) {
	.o-menu-btn { gap: 5px; }
	.o-menu-btn img { width: 34px; height: 34px; }
	.o-menu-desc { letter-spacing: -0.06em; }
}

/* ===== 徳島で矯正治療をご検討の方へ ===== */
.o-intro-col {
	display: grid;
	grid-template-columns: 1fr 430px;
	gap: 44px;
	align-items: stretch;
}
.o-intro-body p + p { margin-top: 16px; }
.o-intro-body .o-subttl { margin-top: 36px; }
/* PC：写真は本文の高さに合わせる（写真自体は高さを持たず、本文の行の高さいっぱいに切り抜いて表示） */
.o-intro-img { position: relative; }
.o-intro-img img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (max-width: 1024px) {
	.o-intro-col { grid-template-columns: 1fr; gap: 25px; }
	/* 写真は半分の幅・正方形で中央に（横長だと上下がほとんど切れるため） */
	.o-intro-img { width: 50%; margin-inline: auto; }
	.o-intro-img img { position: static; height: auto; aspect-ratio: 1; }
}
@media (max-width: 599px) {
	.o-intro-body .o-subttl { margin-top: 24px; }
}

/* 年齢別の矯正（各行 108px・3 等分で中央寄せ） */
.o-stage { display: grid; gap: 8px; margin-top: 33px; }
.o-stage-row {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	column-gap: 37px;
	align-items: center;
	min-height: 108px;
	padding: 8px 5% 8px;
	border-radius: 5px;
	box-sizing: border-box;
}
.o-stage-head { text-align: center; }
.o-stage-row--pre { background: var(--o-bg-stage-pre); }
.o-stage-row--first { background: var(--o-bg-stage-first); }
.o-stage-row--second { background: var(--o-bg-stage-second); }
:where(.page-ortho main) .o-stage-name { font-size: 19px; font-weight: var(--fw-medium); line-height: 1.5; }
:where(.page-ortho main) .o-stage-desc { margin-top: 4px; font-size: 15px; line-height: 1.5; }
.o-stage-cards { display: contents; }
:where(.page-ortho main) .o-stage-card {
	display: grid;
	align-content: center;
	align-self: stretch;  /* 同じ行のカードは白透過の背景の高さを揃える（文字は上下中央） */
	min-height: 84px;
	padding: 6px 10px;
	background: rgba(255, 255, 255, 0.75);
	text-align: center;
	line-height: 1.5;
	box-sizing: border-box;
}
.o-stage-type,
.o-stage-note { font-size: 15px; }
.o-stage-method { margin: 2px 0; font-size: var(--o-fs-card); font-weight: var(--fw-bold); color: var(--color-sub); }
@media (max-width: 1024px) {
	.o-stage-row { grid-template-columns: 1fr 1fr; gap: 10px; padding: 15px 4%; }
	.o-stage-head { grid-column: 1 / -1; }
	/* カードが 1 つだけの行（予防矯正）は全幅に */
	.o-stage-card:only-child { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
	.o-stage { margin-top: 24px; }
	.o-stage-row { gap: 8px; padding: 12px 4%; }
	:where(.page-ortho main) .o-stage-name { font-size: var(--fs-m); }
	:where(.page-ortho main) .o-stage-desc { margin-top: 0; }
	.o-stage-type { font-size: 12px; }
	.o-stage-note { font-size: 10px; }
	.o-stage-method { font-size: var(--fs-s); }
	:where(.page-ortho main) .o-stage-card { min-height: 0; padding: 6px 4px; }
}

/* ===== 各治療の見出しバナー（1108×450） ===== */
.o-banner {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 450px;
	padding: 40px var(--o-pad-box);
	box-sizing: border-box;
	overflow: hidden;
}
.o-banner-body { position: relative; z-index: 1; }
.o-banner-ttl { display: flex; flex-direction: column; align-items: flex-start; font-size: inherit; }
.o-banner-ttl-main,
.o-banner-ttl-sub {
	display: inline-block;
	padding: 6px 20px;
	border: 3px solid var(--color-main);
	background: var(--color-white);
	color: var(--color-main);
	font-weight: var(--fw-bold);
	line-height: 1.2;
}
.o-banner-ttl-main { font-size: var(--fs-xxl); }
.o-banner-ttl-main small { font-size: 0.76em; }
.o-banner-ttl-sub { margin-top: -3px; font-size: var(--fs-xl); }
.o-banner-img { position: absolute; right: 6%; bottom: 0; width: 40%; }
.o-banner-img img { display: block; width: 100%; }
.o-banner--invisalign { background: #dcebf8 url("../images/invisalign/invisalign-banner.webp?v=2") no-repeat right center / cover; }
.o-banner--wire { background: linear-gradient(110deg, #cde5f7 0%, #e3f1fb 60%, #d3e8f8 100%); }
.o-banner--wire .o-banner-img { top: 50%; bottom: auto; right: 7%; width: 36%; max-width: 400px; transform: translateY(-50%); }
.o-banner--petit { background: #f0e6dd; }
.o-banner--petit .o-banner-img { right: 6%; width: 36%; max-width: 440px; }
.o-banner--child { background: linear-gradient(110deg, #d3efdd 0%, #e6f6ec 60%, #d6f0e0 100%); }
.o-banner--child .o-banner-img { right: 5%; width: 38%; max-width: 470px; }
@media (max-width: 1200px) {
	.o-banner-ttl-main { font-size: 36px; }
	.o-banner-ttl-sub { font-size: 30px; }
}
@media (max-width: 1024px) {
	.o-banner { min-height: 380px; }
	.o-banner-ttl-main { font-size: 30px; }
	.o-banner-ttl-sub { font-size: var(--fs-lm); }
}
/* タブレット：背景のない全幅の文章（見出し含む）は 85% 幅で中央に（1 行が長くなりすぎないように） */
@media (min-width: 600px) and (max-width: 1024px) {
	/* 外枠はどのセクションも 85% 幅（o-wrap-in 単独のセクション：3Dスキャナー・よくある質問・料金・道具も同じ） */
	.o-wrap,
	.o-wrap-in:not(.o-treat-body) { width: 85%; }
	.o-intro-body { width: 90%; margin-inline: auto; }
	/* 治療ごとの本文：PC と同じく、料金の枠も含めた全体を内側に（同じ 85% 幅） */
	.o-wrap-in.o-treat-body { width: calc(var(--o-w-inner) * 0.85); }
}
/* タブレット：高さに合わせて拡大するとマウスピースが中央（文字の下）に来るので、
   写真は横幅いっぱいで下に置き、上の足りない分は写真の上端に近い色でつなぐ */
@media (min-width: 600px) and (max-width: 1024px) {
	.o-banner--invisalign {
		background:
			url("../images/invisalign/invisalign-banner.webp?v=2") no-repeat right bottom / 100% auto,
			linear-gradient(to right, #d2eafd 0%, #d8ecfe 17%, #cfe7fc 33%, #bedcf7 50%, #b4d4f2 67%, #bad8f3 83%, #bedaf4 100%);
	}
}
@media (max-width: 599px) {
	/* スマホは文字の下に写真を置く */
	.o-banner { display: block; min-height: 0; padding: 30px 5% 0; }
	.o-banner-ttl-main,
	.o-banner-ttl-sub { padding: 3px 12px; border-width: 2px; }
	.o-banner-ttl-main { font-size: var(--fs-lm); }
	.o-banner-ttl-main small { display: block; font-size: 0.7em; }
	.o-banner-ttl-sub { margin-top: -2px; font-size: var(--fs-lss); }
	.o-banner-img,
	.o-banner--wire .o-banner-img,
	.o-banner--petit .o-banner-img,
	.o-banner--child .o-banner-img {
		position: relative;
		top: auto;
		right: auto;
		width: 70%;
		margin: 15px auto 0;
		transform: none;
	}
	.o-banner--wire .o-banner-img { z-index: 0; width: 48%; margin: -80px 0 25px auto; }  /* 右寄せ・チェックリストに少し重ねる（文字が前） */
	/* プチ矯正・小児矯正：ワイヤー矯正と同じく右寄せ・小さく・チェックリストに重ねる（人物写真なので下は余白なし） */
	.o-banner--petit .o-banner-img,
	.o-banner--child .o-banner-img { z-index: 0; width: 48%; margin: -56px 0 0 auto; }
	.o-banner--wire .o-banner-ttl-main small { font-size: 24px; }
	/* 全部矯正（表側）の写真は少し上にずらす（下の拡大部分を多めに見せる） */
	#wire .o-plan-img img { object-position: center 65%; }
	/* SP 専用の写真（1170×690）を下に全幅で敷き、その上は写真の上端に近い色で背景を足す。
	   下の余白＝写真の高さ（幅の 59%）→ 写真の上端がチェックリストのすぐ下に来る */
	.o-banner--invisalign {
		padding-bottom: 59vw;  /* 背景を全幅にしたので、写真の高さ（幅の 59%）も画面幅基準に */
		background:
			url("../images/invisalign/invisalign-banner-sp.webp?v=2") no-repeat center bottom / 100% auto,
			linear-gradient(to right, #d1e7fc 0%, #c4dffa 17%, #b9d6f4 33%, #b2d3f2 50%, #b7d6f2 67%, #bdd8f5 83%, #bcdaf2 100%);
	}
}
@media (max-width: 374px) {
	.o-banner-ttl-sub { font-size: 16px; }  /* 「お子さまの健やかな成長のために」の「に」だけ落ちないように */
}

/* タブレット：各治療のバナーは上の余白なし（SP は別指定のまま） */
@media (min-width: 600px) and (max-width: 1024px) {
	.o-banner--invisalign,
	.o-banner--wire,
	.o-banner--petit,
	.o-banner--child { padding-top: 0; }
	.o-banner--petit .o-banner-img { width: 44%; }  /* 女性の写真を少し大きく（PC は 36%） */
}

/* 治療ごとの本文（バナーの下・料金の枠の下の見出し）：どの治療も --o-gap-s で揃える */
.o-treat-body { margin-top: var(--o-gap-s); }
.o-treat-body .o-plan + .o-ttl { margin-top: var(--o-gap-s); }
.o-treat-body .o-ttl { font-size: var(--o-fs-sub); }  /* 各治療の本文の見出しはセクション見出しより 1 段小さく（PC 22px／SP 18px） */

/* ===== マウスピース矯正 ===== */
.o-invisalign-lead {
	display: grid;
	grid-template-columns: 170px 1fr;
	gap: 20px;
	align-items: center;
	padding: 30px var(--o-pad-box);
	background: var(--color-sub);
}
.o-invisalign-lead-img img { display: block; width: 100%; border-radius: 50%; }
.o-invisalign-lead-ttl { margin-bottom: 4px; font-size: var(--o-fs-card); line-height: 1.7; color: var(--color-white); }
:where(.page-ortho main) .o-invisalign-lead p { color: var(--color-white); font-weight: var(--fw-medium); }
@media (max-width: 599px) {
	/* 画像（左）とタイトル（右）を横並び、本文はその下に全幅 */
	.o-invisalign-lead { grid-template-columns: 80px 1fr; gap: 14px 12px; padding: 24px 5%; }
	.o-invisalign-lead > div { display: contents; }
	.o-invisalign-lead-ttl { margin-bottom: 0; font-size: min(16px, 4.3vw); }
	.o-invisalign-lead p { grid-column: 1 / -1; }
}
@media (max-width: 374px) {
	/* 幅の狭い端末はタイトルの「で」が折り返さないよう画像を少し小さく */
	.o-invisalign-lead { grid-template-columns: 64px 1fr; column-gap: 10px; }
}

/* おすすめする理由（写真 262px・列の間 20px・行の間 16px） */
.o-reason .o-ttl { margin-bottom: 18px; }
.o-reason-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.o-reason-item { display: grid; grid-template-columns: 48.2% 1fr; gap: 21px; align-items: start; }
.o-reason-item img { display: block; width: 100%; aspect-ratio: 262 / 282; object-fit: cover; }
.o-reason-ttl {
	margin: 0 0 10px;
	font-size: var(--o-fs-sub);
	font-weight: var(--fw-bold);
	line-height: 1.4;
	color: var(--color-sub);
}
@media (max-width: 1024px) {
	.o-reason-list { grid-template-columns: 1fr; gap: 20px; }
	.o-reason-item { grid-template-columns: 0.5fr 1fr; align-items: center; }
	.o-reason-item img { aspect-ratio: 1; }
}
@media (max-width: 599px) {
	.o-reason-item { grid-template-columns: 1fr; gap: 14px; }
	.o-reason-item img { aspect-ratio: 16 / 9; }
	.o-reason-ttl { margin: 0 0 6px; }
}

/* 治療の流れ（1 行 168px・間 8px・グレーの角丸） */
.o-flow .o-ttl { margin-bottom: 18px; }
.o-flow-list { display: grid; gap: 8px; }
.o-flow-item {
	position: relative;
	display: grid;
	grid-template-columns: 94px 168px 302px 1fr;
	align-items: center;
	min-height: 168px;
}
.o-flow-item::before {
	content: "";
	grid-column: 2 / -1;
	grid-row: 1;
	align-self: stretch;
	border-radius: var(--o-radius);
	background: var(--o-bg-gray);
}
.o-flow-item > * { grid-row: 1; position: relative; }
.o-flow-num { grid-column: 1; }
.o-flow-img { grid-column: 2; align-self: stretch; }
.o-flow-head { grid-column: 3; }
.o-flow-text { grid-column: 4; }
:where(.page-ortho main) .o-flow-num {
	display: flex;
	align-items: baseline;
	color: var(--color-sub);
	font-size: var(--o-fs-card);
	font-weight: var(--fw-bold);
	line-height: 1;
}
.o-flow-num span { font-size: 34px; }
.o-flow-num::after {
	content: "";
	flex: 1;
	height: 1px;
	margin-left: 6px;
	background: var(--color-sub);
	transform: translateY(-0.4em);
}
.o-flow-img img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: var(--o-radius) 0 0 var(--o-radius);
	object-fit: cover;
}
.o-flow-head { padding: 15px 20px; text-align: center; }
.o-flow-ttl { font-size: var(--o-fs-sub); font-weight: var(--fw-bold); line-height: 1.36; color: var(--color-sub); }
:where(.page-ortho main) .o-flow-price { margin-top: 6px; font-weight: var(--fw-medium); }
.o-flow-text { padding: 15px 27px 15px 0; }
/* タブレット・SP：画像（左）＋右に「step 番号 → タイトル」の縦並び、説明文はその下に全幅 */
@media (max-width: 1024px) {
	.o-flow-item { grid-template-columns: 160px 1fr; min-height: 0; }
	.o-flow-item::before { grid-column: 1 / -1; grid-row: 1 / span 3; }
	:where(.page-ortho main) .o-flow-num { grid-column: 2; grid-row: 1; align-self: end; margin-bottom: 6px; padding: 16px 20px 0; }
	.o-flow-num::after { display: none; }
	.o-flow-num span { font-size: 30px; }
	.o-flow-img { grid-column: 1; grid-row: 1 / span 2; margin: 20px 0 0 20px; align-self: start; }
	.o-flow-img img { aspect-ratio: 1; height: auto; border-radius: 4px; }
	.o-flow-head { grid-column: 2; grid-row: 2; align-self: start; padding: 4px 20px 0; text-align: left; }
	/* 改行はなし。幅が足りないときだけ区切り（<wbr>）の位置で折り返し、1文字だけ落ちないようにする */
	.o-flow-ttl { word-break: keep-all; }
	.o-flow-ttl .pc-br { display: none; }
	.o-flow-text { grid-column: 1 / -1; grid-row: 3; padding: 14px 20px 20px; }
}
/* タブレットだけ料金の改行をなくす（PC・SP は改行あり） */
@media (min-width: 600px) and (max-width: 1024px) {
	.o-flow-price br { display: none; }
}
@media (max-width: 599px) {
	.o-flow-item { grid-template-columns: 100px 1fr; }
	:where(.page-ortho main) .o-flow-num { padding: 12px 15px 0; font-size: var(--fs-m); }
	.o-flow-num span { font-size: 26px; }
	.o-flow-img { margin: 15px 0 0 15px; }
	.o-flow-head { padding: 4px 15px 0; }
	.o-flow-ttl { font-size: var(--fs-m); }
	:where(.page-ortho main) .o-flow-price { font-size: var(--o-fs-small); margin-top: 4px; }
	.o-flow-text { padding: 10px 15px 15px; }
}

/* ご相談（写真 168×245）・デンタルローン */
.o-consult {
	display: grid;
	grid-template-columns: 168px 1fr;
	gap: 20px;
	padding: 32px var(--o-pad-box);
	background: var(--o-bg-lightblue);
}
.o-consult-img img { display: block; width: 100%; aspect-ratio: 168 / 245; object-fit: cover; object-position: 40% center; }  /* 顔（元画像の横 47% の位置）が中央に来る値 */
.o-consult-ttl { margin: 8px 0 8px; font-size: var(--o-fs-sub); font-weight: var(--fw-bold); line-height: 1.45; color: var(--color-sub); }
.o-consult-sign { display: block; margin-top: 8px; }  /* 署名は本文から少し離す */
.o-consult-tel {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4px 44px;
	margin-top: 20px;
	padding: 14px 20px;
	background: var(--color-white);
}
.o-consult-tel-num {
	color: var(--color-sub);
	font-size: 42px;
	font-weight: var(--fw-bold);
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
}
:where(.page-ortho main) .o-consult-tel-num { font-size: 42px; font-weight: var(--fw-bold); line-height: 1.2; }
.o-consult-tel-num span { margin-right: 10px; font-size: 0.75em; }
:where(.page-ortho main) .o-consult-tel-hours { font-size: var(--o-fs-small); line-height: 1.5; }
.o-consult-tel-hours span { display: block; color: var(--color-sub); font-size: var(--o-fs-card); font-weight: var(--fw-bold); }
.o-loan {
	display: grid;
	grid-template-columns: 1fr 168px;
	gap: 30px;
	padding: 32px var(--o-pad-box);
	background: var(--color-sub);
}
.o-loan-ttl { margin: 8px 0 8px; font-size: var(--o-fs-sub); font-weight: var(--fw-bold); line-height: 1.45; color: var(--color-white); }
.o-loan p + .o-loan-ttl { margin-top: 24px; }
:where(.page-ortho main) .o-loan p { color: var(--color-white); font-weight: var(--fw-medium); }
.o-loan-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1024px) {
	:where(.page-ortho main) .o-consult-tel-num { font-size: 32px; }
	/* デンタルローンの本文は SP と同じく文中の改行をなくす */
	.o-loan .pc-br { display: none; }
}
/* タブレット：電話番号の枠は写真・本文の列から外して全幅に */
@media (min-width: 600px) and (max-width: 1024px) {
	.o-consult { row-gap: 0; }
	.o-consult-body { display: contents; }
	.o-consult-img { grid-column: 1; grid-row: 1 / span 2; }
	.o-consult-ttl { grid-column: 2; grid-row: 1; }
	.o-consult-body > p { grid-column: 2; grid-row: 2; }
	.o-consult-tel { grid-column: 1 / -1; grid-row: 3; }
}
@media (max-width: 599px) {
	/* 写真を左に回り込ませ、タイトル・本文は写真の右から下へ流す */
	.o-consult { display: block; padding: 24px 5%; }
	.o-consult::after { content: ""; display: table; clear: both; }
	.o-consult-img { float: left; width: 110px; margin: 0 15px 8px 0; }
	.o-consult-ttl { margin: 0 0 8px; }
	.o-consult-tel { clear: both; margin-top: 15px; padding: 12px; }
	:where(.page-ortho main) .o-consult-tel-num { font-size: 28px; }
	.o-loan { grid-template-columns: 1fr; padding: 24px 5%; }
	.o-loan-img { display: none; }
}

/* 3Dシミュレーション（動画 356×237）・3Dスキャナー */
.o-digital-row { display: grid; grid-template-columns: 1fr 356px; gap: 29px; align-items: start; }
.o-digital-row--scanner { grid-template-columns: 1fr 356px; margin-top: 40px; }  /* 上の動画の列と同じ幅 */
.o-dot-list { margin-top: 27px; }
/* PC・タブレットは正方形で、左寄せに切り抜く */
.o-scanner-img img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1.05; object-fit: cover; object-position: left center; }
@media (max-width: 1024px) {
	.o-digital-row { grid-template-columns: 1fr; gap: 20px; }
	/* 上の 3D シミュレーションと同じく、文章の下に写真を全幅で（横長 3:2） */
	.o-digital-row--scanner { grid-template-columns: 1fr; gap: 20px; }
	.o-scanner-img img { aspect-ratio: 3 / 2; object-position: center; }
}
@media (max-width: 599px) {
	.o-digital-row--scanner { grid-template-columns: 1fr; margin-top: 32px; }
	/* SP は横長（3:2）のまま全幅で */
	.o-scanner-img img { aspect-ratio: 3 / 2; object-position: center; }
	.o-dot-list { margin-top: 16px; }
}

/* ===== 症例紹介（グレーの角丸ボックス） ===== */
.o-case-box { padding: 32px var(--o-pad-box) 40px; border-radius: var(--o-radius); background: var(--o-bg-gray); }
.o-case-box + .o-case-box { margin-top: 15px; }
.o-case-box .o-ttl { margin-bottom: 18px; }
.o-case-ttl {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 16px;
	margin-bottom: 12px;
	font-size: var(--o-fs-sub);
	font-weight: var(--fw-bold);
	line-height: 1.4;
	color: var(--color-sub);
}
.o-case-num { font-size: var(--o-fs-card); }
.o-case-num span { font-size: 34px; line-height: 1; }
.o-case-media { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 22px; }
.o-case-label { margin: 0 0 4px; font-size: var(--o-fs-card); font-weight: var(--fw-bold); line-height: 1.5; color: var(--color-sub); }
.o-case-photos img { display: block; width: 100%; }
.o-case-photos img + .o-case-label { margin-top: 18px; }
.o-case-info { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; margin: 36px 0 0; }
:where(.page-ortho main) .o-case-info dt { margin-bottom: 6px; font-size: var(--o-fs-card); font-weight: var(--fw-bold); line-height: 1.5; color: var(--color-sub); }
.o-case-info dd { margin: 0; }
@media (max-width: 1024px) {
	.o-case-media { grid-template-columns: 1fr; }
}
/* タブレット：治療内容・費用・期間・リスクも SP と同じくすべて縦並びに */
@media (min-width: 600px) and (max-width: 1024px) {
	.o-case-info { grid-template-columns: 1fr; }
}
@media (max-width: 599px) {
	.o-case-box { padding: 24px 5%; }
	.o-case-ttl { gap: 0 10px; }
	.o-case-num span { font-size: 28px; }
	.o-case-info { grid-template-columns: 1fr; gap: 12px; margin-top: 24px; }
	.o-case-label { font-size: var(--fs-m); }
}

/* ===== よくある質問 ===== */
.o-faq .o-ttl { margin-bottom: 24px; }
.o-faq-list { display: grid; gap: 16px; }
.o-faq-item { border: 2px solid var(--o-bg-faq); }
.o-faq-q {
	position: relative;
	display: flex;
	align-items: center;  /* Q を見出しの上下中央に */
	gap: 14px;
	padding: 12px 64px 12px 14px;
	background: var(--o-bg-faq);
	cursor: pointer;
	list-style: none;
}
.o-faq-q::-webkit-details-marker { display: none; }
.o-faq-q h3 {
	font-size: var(--o-fs-card);
	font-weight: var(--fw-regular);
	line-height: 1.75;
	color: var(--o-color-text);
}
/* ＋／− */
.o-faq-q::before,
.o-faq-q::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 16px;
	width: 26px;
	height: 3px;
	background: #777;
	transform: translateY(-50%);
}
.o-faq-q::after { transform: translateY(-50%) rotate(90deg); transition: transform 0.2s; }
.o-faq-item[open] > .o-faq-q::after { transform: translateY(-50%) rotate(0); }
.o-faq-badge { flex-shrink: 0; width: 20px; color: var(--color-main); font-size: var(--o-fs-sub); font-weight: var(--fw-bold); line-height: 1.4; }
.o-faq-a { display: flex; gap: 14px; padding: 16px 16px 16px 14px; background: var(--color-white); }
.o-faq-a .o-faq-badge { color: var(--color-sub); font-size: var(--o-fs-card); line-height: 1.6; }
.o-faq-a p + p { margin-top: 10px; }
@media (max-width: 599px) {
	.o-faq-q { gap: 10px; padding: 12px 44px 12px 12px; }
	.o-faq-q h3 { font-size: var(--fs-s); line-height: 1.6; }
	.o-faq-q::before,
	.o-faq-q::after { right: 12px; width: 18px; height: 2px; }
	.o-faq-badge { font-size: var(--fs-ml); }
	.o-faq-a { gap: 10px; padding: 12px; }
}

/* ===== 治療ごとの料金ボックス（写真 356px＋グレー） ===== */
.o-plan { display: grid; grid-template-columns: 38.7% 1fr; margin-top: 18px; background: var(--o-bg-gray); }
.o-plan-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.o-plan-body { padding: 20px 20px 32px; text-align: center; }
.o-plan-body .o-more-btn { margin-top: 12px; }
:where(.page-ortho main) .o-plan-body > p:not(.o-plan-price):not(.o-plan-caution) { text-align: left; }
.o-plan-body > p + p:not(.o-plan-price):not(.o-plan-caution) { margin-top: 27px; }
.o-plan-ttl { font-size: var(--o-fs-card); font-weight: var(--fw-bold); line-height: 1.6; color: var(--o-color-blue); }
/* inline-block にすると下に 1 行分の隙間ができるので、block＋幅は中身に合わせる */
:where(.page-ortho main) .o-plan-price {
	display: block;
	width: fit-content;
	margin: 12px auto 14px;
	padding: 8px 24px;
	background: var(--o-color-blue);
	color: var(--color-white);
	font-size: var(--o-fs-label);
	font-weight: var(--fw-medium);
	line-height: 1.85;
}
:where(.page-ortho main) .o-plan-caution {
	margin: -4px 0 8px;
	color: var(--o-color-orange);
	font-size: var(--o-fs-label);
	font-weight: var(--fw-bold);
}
@media (max-width: 1024px) {
	.o-plan { grid-template-columns: 1fr; }
	.o-plan-img img { height: auto; aspect-ratio: 16 / 9; }
}
@media (max-width: 599px) {
	.o-plan-body { padding: 20px 5% 24px; }
	:where(.page-ortho main) .o-plan-price { padding: 8px 12px; font-size: var(--o-fs-small); }
	.o-plan-body > p + p:not(.o-plan-price):not(.o-plan-caution) { margin-top: 1em; }
}

/* ===== 担当医紹介 ===== */
.o-doctor { padding: 64px var(--o-pad-box); background: var(--o-bg-gray); }
.o-doctor .o-ttl { margin-bottom: 30px; }
.o-doctor-profile {
	display: grid;
	grid-template-columns: 262px 0.5fr 1fr;
	gap: 0 32px;
	align-items: start;
}
@media (min-width: 1025px) {
	.o-doctor-name-box { margin-left: 16px; }  /* PC：写真との間を少し広げてバランスを取る */
}
.o-doctor-img img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
:where(.page-ortho main) .o-doctor-label { margin-bottom: 10px; font-size: var(--o-fs-card); font-weight: var(--fw-medium); line-height: 1.5; color: var(--o-color-text); }
:where(.page-ortho main) .o-doctor-role { font-size: var(--o-fs-body); }
:where(.page-ortho main) .o-doctor-name { font-size: var(--o-fs-ttl); font-weight: var(--fw-bold); line-height: 1.4; }
.o-award {
	display: grid;
	grid-template-columns: 1fr 370px;
	gap: 16px;
	align-items: center;
	margin-top: 16px;
	padding: 30px 15px 30px 24px;
	border: 2px solid var(--color-sub);
	border-radius: var(--o-radius);
	background: var(--color-white);
}
.o-award-list > div { display: flex; gap: 0 16px; }
:where(.page-ortho main) .o-award-list :is(dt, dd) { margin: 0; font-size: var(--o-fs-label); line-height: 1.7; }
/* 行頭の四角（文字の■ではなく図形で描く）。大きさは文字の高さに合わせる */
.o-award-list dt { position: relative; padding-left: 1.3em; }
.o-award-list dt::before {
	content: "";
	position: absolute;
	top: 0.425em;   /* (行の高さ 1.7em − 四角 0.85em) ÷ 2 */
	left: 0;
	width: 0.85em;
	height: 0.85em;
	background: var(--color-sub);
}
.o-award-img img { display: block; width: 100%; height: auto; object-fit: contain; }  /* 幅いっぱい・切り抜かずに全体を表示 */
@media (max-width: 1024px) {
	.o-doctor { padding: 48px 5%; }
	.o-doctor-profile { grid-template-columns: 0.75fr auto 1fr; gap: 24px; }  /* タブレットも 3 列：名前の列は中身の幅（auto）、写真は資格より少し狭く */
	:where(.page-ortho main) .o-doctor-name { font-size: var(--o-fs-sub); }  /* 名前が折り返さないよう少し小さく（SP は下で別指定） */
	.o-award { grid-template-columns: 1fr; }
}
@media (max-width: 599px) {
	.o-doctor { padding: 32px 5%; }
	.o-doctor .o-ttl { margin-bottom: 20px; }
	.o-doctor-profile { grid-template-columns: 130px 1fr; gap: 15px; align-items: center; }
	.o-doctor-career { grid-column: 1 / -1; }
	:where(.page-ortho main) .o-doctor-name { font-size: var(--fs-ls); }
	.o-award { padding: 20px 5%; }
	.o-award-list > div { flex-direction: column; margin-bottom: 6px; }
}

/* ===== 費用・期間・リスク ===== */
.o-price-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px 20px;
	align-items: stretch;  /* 横に並ぶカードの枠の高さを揃える */
	margin-top: var(--o-gap-block);
}
.o-price-card { border: 1px solid var(--o-color-blue); background: var(--color-white); }
.o-price-ttl {
	padding: 15px 10px;
	background: var(--o-color-blue);
	color: var(--color-white);
	font-size: var(--fs-m);
	font-weight: var(--fw-medium);
	line-height: 1.6;
	text-align: center;
}
.o-price-card dl { margin: 0; padding: 14px 15px 20px; }
:where(.page-ortho main) .o-price-card dt { margin-top: 14px; font-size: var(--fs-m); font-weight: var(--fw-bold); line-height: 1.6; color: var(--o-color-blue); }
.o-price-card dt:first-child { margin-top: 0; }
:where(.page-ortho main) .o-price-card dd { margin: 6px 0 0; line-height: var(--o-lh-card); }
:where(.page-ortho main) .o-price-num { line-height: 1.6; font-weight: var(--fw-medium); color: var(--o-color-blue); }
:where(.page-ortho main) .o-price-extra { margin-top: 6px; font-size: var(--o-fs-small); line-height: 1.7; }
/* 文章の中の金額だけを他の金額表記と同じ太さ（500）に */
.o-price-amount { font-weight: var(--fw-medium); }
.o-price-more { margin-top: var(--o-gap-s); text-align: center; }
.o-price-more .o-more-btn { margin-top: 0; }
@media (max-width: 1024px) {
	.o-price-grid { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 599px) {
	.o-price-ttl { padding: 12px 8px; font-size: var(--fs-s); }
	:where(.page-ortho main) .o-price-card dt,
	:where(.page-ortho main) .o-price-num { font-size: var(--fs-s); }
}

/* ===== 初回カウンセリング（ボックス 293×117・ボタン 293×73） ===== */
.o-counsel { padding: 72px var(--o-pad-box) 64px; background: var(--o-bg-gray); }
.o-counsel .o-ttl { margin-bottom: 24px; }
.o-counsel .o-ttl,
.o-counsel .o-ttl-s { text-align: center; }  /* 全体を中央寄せ */
.o-counsel-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 21px; }
.o-counsel-list li {
	display: grid;
	align-content: center;
	min-height: 117px;
	padding: 12px 10px;
	border: 2px solid var(--color-sub);
	background: var(--color-white);
	text-align: center;
	box-sizing: border-box;
}
.o-counsel-list h3 { margin-bottom: 4px; font-size: var(--o-fs-card); font-weight: var(--fw-bold); line-height: 1.6; color: var(--color-sub); }
.o-counsel .o-ttl-s { margin: 32px 0 0; color: var(--color-main); }
.o-cta-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 293px)); justify-content: center; gap: 21px; margin-top: 28px; }
.o-cta-btn {
	position: relative;
	display: grid;
	align-content: center;
	justify-items: center;
	min-height: 73px;
	padding: 6px 40px;
	border: 2px solid var(--color-sub);
	border-radius: var(--o-radius);
	text-decoration: none;
	line-height: 1.6;
	box-sizing: border-box;
}
.o-cta-btn::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 15px;
	border-style: solid;
	border-width: 6px 0 6px 10px;
	border-color: transparent transparent transparent currentColor;
	transform: translateY(-50%);
}
.o-cta-btn--tel { background: var(--color-white); color: var(--color-sub); }
.o-cta-btn--web { background: var(--color-sub); color: var(--color-white); }
.o-cta-btn-main,
.o-cta-btn-sub { font-size: var(--o-fs-card); font-weight: var(--fw-bold); }
.o-cta-btn--web .o-cta-btn-sub { font-size: var(--fs-m); }
.o-cta-tel-label { font-size: 0.8em; }
@media (max-width: 1024px) {
	.o-counsel { padding: 48px 5%; }
	.o-counsel-list { grid-template-columns: 1fr; gap: 12px; }
	.o-counsel-list li { min-height: 0; padding: 16px 10px; }
}
@media (max-width: 599px) {
	.o-counsel { padding: 32px 5%; }
	.o-counsel .o-ttl-s { margin-top: 24px; }
	.o-cta-btns { grid-template-columns: 1fr; gap: 12px; margin-top: 16px; }
	.o-cta-btn { padding: 6px 20px; }
	.o-cta-btn::after { right: 8px; }
	.o-cta-btn-main,
	.o-cta-btn-sub,
	.o-cta-btn--web .o-cta-btn-sub { font-size: var(--o-fs-body); }
}

/* ===== 矯正に使う道具と使用ガイド（microCMS） ===== */
.o-tool-list { display: grid; gap: 32px; margin-top: var(--o-gap-block); }
.o-tool { padding: 24px 24px 28px; border: 2px solid var(--color-sub); border-radius: 10px; }
.o-tool-ttl { margin-bottom: 6px; font-size: var(--o-fs-card); font-weight: var(--fw-bold); line-height: 1.6; color: var(--o-color-blue); }
.o-tool-sub { margin: 10px 0 2px; font-size: var(--o-fs-card); font-weight: var(--fw-bold); line-height: 1.6; color: var(--o-color-orange); }
:where(.page-ortho main) .o-tool-links li { line-height: 2; }
.o-tool p + .o-tool-links { margin-top: 10px; }  /* 小見出しが無く本文のすぐ下にリンクが来るときは少し空ける */
.o-tool-link {
	display: inline;  /* 2 行に折り返しても「＞」が文字の直後に付くように */
	color: var(--color-sub);
	font-size: var(--fs-m);
	font-weight: var(--fw-regular);
	text-decoration: underline;
}
:where(.page-ortho main) .o-tool-link { font-size: var(--fs-m); font-weight: var(--fw-regular); color: var(--color-sub); }
.o-tool-link::after {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin: 0 4px 0 8px;
	border-top: 2px solid var(--color-sub);
	border-right: 2px solid var(--color-sub);
	vertical-align: 0.1em;
	transform: rotate(45deg);
}
.o-tool-link.is-pending { opacity: 0.6; }
@media (max-width: 599px) {
	.o-tool-list { gap: 16px; }
	.o-tool { padding: 20px 5%; }
	.o-tool-sub { font-size: var(--o-fs-body); }  /* 本文と同じサイズ（太さは太字のまま） */
	:where(.page-ortho main) .o-tool-link { font-size: 13px; }  /* 本文（14px）より 1 つ小さく */
}

/* 説明書を開くボタン（見た目はリンクと同じ） */
.o-doc-open {
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	line-height: inherit;
	text-align: left;
	cursor: pointer;
}

/* 説明書の拡大表示（js/doc-viewer.js）。保存しにくくするため画像は直接触れないようにする */
html.is-viewer-open { overflow: hidden; }
.o-viewer {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	justify-content: center;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}
.o-viewer[hidden] { display: none; }
/* ビューアの中ではページ全体の拡大をさせない（資料の拡大は JS で行う） */
.o-viewer,
.o-viewer * { touch-action: none; }
/* 資料の表示エリアの中だけは指で上下左右に動かせるようにする（2 本指の拡大は JS で処理） */
.o-viewer .o-viewer-stage,
.o-viewer .o-viewer-stage * { touch-action: pan-x pan-y; }
/* PC：拡大中は資料をつかんで動かせる */
.o-viewer.is-zoomed .o-viewer-stage { cursor: grab; }
.o-viewer.is-dragging .o-viewer-stage { cursor: grabbing; }
.o-viewer-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(12, 24, 48, 0.86);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}
.o-viewer-box {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(92vw, 960px);
	height: 100vh;
	height: 100dvh;
	padding: 16px 0 20px;
	box-sizing: border-box;
	pointer-events: none;  /* 余白部分のクリックは背景（閉じる）へ通す */
}
.o-viewer-box > * { pointer-events: auto; }
.o-viewer-head {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 12px;
}
.o-viewer-ttl {
	flex: 1;
	margin: 0;
	color: #fff;
	font-size: var(--fs-m);
	font-weight: var(--fw-bold);
	line-height: 1.5;
	letter-spacing: 0.02em;
}
.o-viewer-zoom { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.o-viewer-zval { min-width: 3.2em; color: #fff; font-size: var(--fs-s); text-align: center; }
.o-viewer-zbtn {
	position: relative;
	width: 34px;
	height: 34px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	cursor: pointer;
	transition: background-color 0.2s, opacity 0.2s;
}
.o-viewer-zbtn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.2); }
.o-viewer-zbtn:disabled { opacity: 0.3; cursor: default; }
.o-viewer-zbtn::before,
.o-viewer-zin::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 2px;
	background: #fff;
	transform: translate(-50%, -50%);
}
.o-viewer-zin::after { transform: translate(-50%, -50%) rotate(90deg); }
.o-viewer-close {
	position: relative;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	cursor: pointer;
	transition: background-color 0.2s;
}
.o-viewer-close:hover { background: rgba(255, 255, 255, 0.2); }
.o-viewer-close::before,
.o-viewer-close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 2px;
	border-radius: 1px;
	background: #fff;
	transform: translate(-50%, -50%) rotate(45deg);
}
.o-viewer-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
/* 資料の表示エリア（複数枚は縦に並べてスクロール） */
.o-viewer-stage {
	flex: 1;
	min-height: 0;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.4) transparent;
	border-radius: 6px;
}
.o-viewer-list { --z: 1; }
/* 資料は白いカードで見せる */
.o-viewer-frame {
	position: relative;
	display: block;
	/* 等倍は「表示エリアの幅（最大 960px）」。拡大するとその倍率で広がり、はみ出した分はスクロール */
	width: calc(min(100%, 960px) * var(--z));
	margin: 0 auto 16px;
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
	overflow: hidden;
}
/* 画像の上に透明な層を重ね、右クリック保存・長押し保存・ドラッグをさせない */
.o-viewer-frame::after { content: ""; position: absolute; inset: 0; }
.o-viewer-frame:last-child { margin-bottom: 0; }
.o-viewer-frame img {
	display: block;
	width: 100%;
	height: auto;
	pointer-events: none;
	-webkit-user-drag: none;
	-webkit-touch-callout: none;
}
@media (max-width: 599px) {
	.o-viewer-box { width: 100vw; padding: 10px 12px 14px; }
	.o-viewer-head { margin-bottom: 10px; }
	.o-viewer-ttl { font-size: var(--fs-s); }
	.o-viewer-head { gap: 10px; }
	.o-viewer-close { width: 40px; height: 40px; }
	.o-viewer-zbtn { width: 30px; height: 30px; }
	.o-viewer-zval { min-width: 2.8em; font-size: 12px; }
	.o-viewer-frame { margin-bottom: 12px; }
}

/* ===== 未承認医薬品等に関する表記 ===== */
.o-mhlw { padding: 64px var(--o-pad-box); background: var(--o-bg-gray); }
.o-mhlw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 20px; margin-top: var(--o-gap-block); }
.o-mhlw-card { border: 1px solid var(--o-color-blue); background: var(--color-white); }
.o-mhlw-card h3 {
	padding: 15px 10px;
	background: var(--o-color-blue);
	color: var(--color-white);
	font-size: var(--fs-m);
	font-weight: var(--fw-medium);
	line-height: 1.6;
	text-align: center;
}
:where(.page-ortho main) .o-mhlw-card p { padding: 20px 15px; line-height: var(--o-lh-card); }
@media (max-width: 1024px) {
	.o-mhlw { padding: 48px 5%; }
	.o-mhlw-grid { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 599px) {
	.o-mhlw { padding: 32px 5%; }
	.o-mhlw-card h3 { padding: 12px 8px; font-size: var(--fs-s); }
}

/* ===== フッターまわり（/implunt の layout.css にある .page-implant 用の調整と同じ内容） =====
   ※ /implunt はフッターのアクセス欄を非表示にしているが、矯正ページはデザインどおり表示する */
/* フッター（footer.php・common.css）は rem 単位（html 62.5% ＝ 1rem 10px 前提）で書かれている。
   /implunt の base.css が html の文字サイズを画面幅で変えて上書きしているため、common.css と同じ 62.5% に戻す
   （このページの CSS は px 指定なので影響なし） */
html { font-size: 62.5%; }
#footer-wrap,
#footer {
	font-size: 16px;
	line-height: normal;
	letter-spacing: normal;
	color: #333;
}
/* base.css の全体ルール（a を 18px 太字・p/li の行間 2 など）を打ち消す（common.css のクラス指定はそのまま効く） */
:where(#footer-wrap, #footer) :is(a, p, li, dt, dd) {
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: 0;  /* common.css の ul（-1em）を引き継がないよう 0 に */
	color: inherit;
}
:where(#footer-wrap) section { background-color: transparent; }
.page-ortho #footer-wrap small { font-size: 10px !important; }
@media (max-width: 1024px) {
	.page-ortho #pagetop { bottom: 60px; }
}
.page-ortho #section_footBana ul { padding-left: 0; }
.page-ortho #sp-fixed-menu { position: fixed; bottom: 0; z-index: 9000; width: 100%; font-size: 0; }
.page-ortho #sp-fixed-menu ul { display: flex; width: 100%; margin: 0; padding: 0; list-style: none; }
.page-ortho #sp-fixed-menu li {
	align-items: center;
	justify-content: center;
	width: 33.333%;
	margin: 0;
	padding: 0;
	font-size: 14px;
	background: #fff;
	border-top: 1px solid #0d3386;
	border-right: 1px solid #0d3386;
}
.page-ortho #sp-fixed-menu li:last-child { border-right: none; }
.page-ortho #sp-fixed-menu li img { max-width: 60%; }
.page-ortho #sp-fixed-menu li a { display: block; width: 100%; padding: 2px 10px; text-align: center; }
@media (min-width: 768px) {
	.page-ortho .for-sp { display: none; }
}
.page-ortho .footerInner * { font-weight: 400; }
.page-ortho #footerContact .links a.tel::before { font-size: 28px; }
.page-ortho footer nav ul.headmenu .label .h4 { font-size: 17px; font-weight: 400; }
.page-ortho footer nav ul.headmenu .label .h5 { font-size: 13px; font-weight: 400; }