@charset "UTF-8";
/*
 * 浦安歯科 — 診療案内 下層ページ
 * Figma「根管治療」PC node 34799:4507 (1440x11098) / SP node 34799:5306 (390x10453)
 *
 * 単位ルールは main.css と同じ。1rem = デザイン 10px。
 * PC は html { font-size: 0.6944444vw }、SP は min(2.5641vw, 10px)。
 */

/* ============================================================
   1. レイアウト
   ============================================================ */
.ud-tp__inner {
	width: 98rem;
	margin-inline: auto;
	position: relative;
}

/* ============================================================
   2. ページヘッダー（ヒーロー）
   ============================================================ */
.ud-tp__hero {
	position: relative;
	height: 36rem;
	overflow: hidden;
}

.ud-tp__hero img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * 左側に白のグラデーションを重ねて写真を飛ばす。
 * デザインから実測した不透明度: x=0 で 0.94、40% あたりまで緩やかに 0.80、
 * そこから 48.6% で 0 まで一気に抜ける。
 */
.ud-tp__hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.94) 0%,
		rgba(255, 255, 255, 0.8) 40.3%,
		rgba(255, 255, 255, 0) 48.6%
	);
}

.ud-tp__hero .ud-inner {
	height: 100%;
	z-index: 1;
}

.ud-tp__hero-en {
	position: absolute;
	left: 0;
	top: 8.15rem;
	font-family: var(--ud-font-en);
	font-weight: 700;
	font-size: 14.2rem;
	line-height: 1;
	letter-spacing: 0;
	color: var(--ud-main01);
	white-space: nowrap;
}

.ud-tp__hero-ja {
	position: absolute;
	left: 0;
	top: 24rem;
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.7;
	letter-spacing: 0.05em;
	color: var(--ud-txt02);
}

/* ============================================================
   3. パンくず
   ============================================================ */
.ud-tp__crumb {
	margin-top: 0.9rem;
}

.ud-tp__crumb ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	font-size: 1.6rem;
	line-height: 2;
	letter-spacing: 0.05em;
	color: var(--ud-txt01);
}

.ud-tp__crumb li + li::before {
	content: "/";
	margin-inline: 1.2rem;
	color: var(--ud-txt01);
}

/* ============================================================
   4. 本文パーツ
   ============================================================ */
.ud-tp__body p {
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 2;
	letter-spacing: 0.05em;
	color: var(--ud-txt01);
}

.ud-tp__body p + p {
	margin-top: 1.2rem;
}

/* 写真は 640x370 の枠に切り抜いて中央寄せ */
.ud-tp__fig {
	width: 64rem;
	margin-inline: auto;
}

.ud-tp__fig img {
	width: 100%;
	height: 37rem;
	object-fit: cover;
}

/*
 * 人物写真など、640x370 の横長枠だと顔のアップになってしまうものは
 * 縦位置で見せる。詳細度を 0,2,1 にして SP 側の一括指定にも勝たせる。
 */
.ud-tp__fig.ud-tp__fig--portrait {
	width: 44rem;
}

.ud-tp__fig.ud-tp__fig--portrait img {
	height: auto;
	aspect-ratio: 440 / 509;
}

.ud-tp__body > * + .ud-tp__fig,
.ud-tp__fig + p {
	margin-top: 3.2rem;
}

/* 小見出し（● + 太字） */
.ud-tp__sub {
	display: flex;
	align-items: center;
	gap: 1rem;
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.7;
	letter-spacing: 0.05em;
	color: var(--ud-txt02);
}

.ud-tp__sub::before {
	content: "";
	flex: none;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 50%;
	background: var(--ud-main01);
}

.ud-tp__body > * + .ud-tp__sub {
	margin-top: 4.8rem;
}

/* 「詳しくはこちら →」 */
.ud-tp__link {
	font-size: 1.6rem;
	line-height: 2;
	letter-spacing: 0.05em;
}

.ud-tp__link a {
	color: var(--ud-main01);
	text-decoration: underline;
	text-underline-offset: 0.2rem;
}

/* inline-block にして、下線が矢印まで伸びないようにする。 */
.ud-tp__arrow {
	display: inline-block;
	text-decoration: none;
	margin-left: 0.2rem;
}

.ud-tp__body > * + .ud-tp__link {
	margin-top: 0.6rem;
}

.ud-tp__link + p {
	margin-top: 1rem;
}

/* ============================================================
   5. リード（ヒーロー直後の写真＋導入文）
   ============================================================ */
.ud-tp__lead {
	margin-top: 9.6rem;
}

.ud-tp__lead .ud-tp__fig + p {
	margin-top: 3.2rem;
}

/* ============================================================
   6. 目次
   ============================================================ */
.ud-tp__toc {
	margin-top: 9.6rem;
	margin-bottom: 9.6rem;
	padding: 4rem;
	background: var(--ud-base01);
}

.ud-tp__toc h2 {
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.7;
	letter-spacing: 0.05em;
	text-align: center;
	color: var(--ud-txt01);
}

.ud-tp__toc ul {
	margin-top: 1.1rem;
}

.ud-tp__toc li {
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.7;
	letter-spacing: 0.05em;
	color: var(--ud-txt01);
}

.ud-tp__toc li::before {
	content: "・";
}

/* ============================================================
   7. セクション
   ============================================================ */
.ud-tp__sec {
	padding-block: 9.6rem;
}

.ud-tp__sec--tint {
	background: var(--ud-base01);
}

/* 見出し帯 */
.ud-tp__band {
	display: flex;
	align-items: center;
	justify-content: center;
	/* 左に 8px のボーダーがある分、右パディングを 8px 増やして文字を帯の中央に戻す。 */
	padding: 0.86rem 3.2rem 0.86rem 2.4rem;
	border-left: 0.8rem solid var(--ud-main04);
	border-radius: 0.8rem;
	background: var(--ud-main01);
	color: var(--ud-wh);
	font-size: 2.8rem;
	font-weight: 700;
	line-height: 1.7;
	letter-spacing: 0.05em;
	text-align: center;
}

.ud-tp__band + * {
	margin-top: 4.8rem;
}

/* ============================================================
   8. 表（料金案内・アクセス・ドクター紹介）
   TOP の診療時間テーブル（.ud-hours）と同じ見た目に揃える。
   ============================================================ */
.ud-tp__tablewrap {
	overflow-x: auto;
}

.ud-tp__table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0.1rem;
	background: var(--ud-wh);
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.7;
	letter-spacing: 0.05em;
}

.ud-tp__table th,
.ud-tp__table td {
	padding: 1.6rem 2rem;
	text-align: left;
	vertical-align: middle;
	font-weight: 500;
}

.ud-tp__table thead th {
	background: var(--ud-main01);
	color: var(--ud-wh);
	font-weight: 700;
}

/* 列幅は内容にまかせる（見出し列だけ折り返さない） */
.ud-tp__table tbody th {
	white-space: nowrap;
	background: var(--ud-cell-head);
	color: var(--ud-main03);
}

.ud-tp__table tbody td {
	background: var(--ud-cell);
	color: var(--ud-txt01);
}

.ud-tp__body > * + .ud-tp__tablewrap {
	margin-top: 2.4rem;
}

.ud-tp__tablewrap + p {
	margin-top: 3.2rem;
}

/* ============================================================
   9. よくある質問
   ============================================================ */
.ud-tp__faq {
	display: grid;
	gap: 1.6rem;
}

.ud-tp__qa {
	padding: 2.4rem;
	border-radius: 1.6rem;
	background: var(--ud-wh);
}

.ud-tp__qa dt,
.ud-tp__qa dd {
	display: flex;
	align-items: flex-start;
	gap: 1.8rem;
}

.ud-tp__qa dt {
	/* 質問は 1 行想定。マーク（40px）に対して上下中央で揃える。 */
	align-items: center;
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.7;
	letter-spacing: 0.05em;
	color: var(--ud-txt02);
}

.ud-tp__qa dd {
	margin-top: 1.2rem;
	font-size: 1.6rem;
	font-weight: 500;
	/* 回答だけ本文（2.0）より詰まった 1.7。デザイン実測値。 */
	line-height: 1.7;
	letter-spacing: 0.05em;
	color: var(--ud-txt01);
}

.ud-tp__mark {
	flex: none;
	display: grid;
	place-items: center;
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	font-family: var(--ud-font);
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1;
}

.ud-tp__mark--q {
	background: var(--ud-main01);
	color: var(--ud-wh);
}

.ud-tp__mark--a {
	border: 0.1rem solid var(--ud-main01);
	color: var(--ud-main01);
}

/* ============================================================
   10. SP（Figma: SP 根管治療 node 34799:5306  390x10453）
   ============================================================ */
@media (max-width: 1023.98px) {
	.ud-tp__inner {
		width: auto;
		margin-inline: 1.6rem;
	}

	/* --- ヒーロー --- */
	.ud-tp__hero {
		height: 17rem;
	}

	.ud-tp__hero::after {
		background: linear-gradient(
			90deg,
			rgba(255, 255, 255, 0.94) 0%,
			rgba(255, 255, 255, 0.8) 50%,
			rgba(255, 255, 255, 0) 61%
		);
	}

	/* SP のヒーローだけ本文（16px）より広い 24px の左インセット。 */
	.ud-tp__hero .ud-inner {
		margin-inline: 2.4rem;
	}

	.ud-tp__hero-en {
		top: 4.64rem;
		font-size: 4rem;
	}

	.ud-tp__hero-ja {
		top: 9.04rem;
		font-size: 2rem;
	}

	/* --- パンくず --- */
	.ud-tp__crumb {
		margin-top: 1rem;
	}

	.ud-tp__crumb ol {
		font-size: 1.4rem;
	}

	.ud-tp__crumb li + li::before {
		margin-inline: 0.8rem;
	}

	/* --- 本文 --- */
	.ud-tp__body p,
	.ud-tp__link {
		font-size: 1.4rem;
		line-height: 2;
	}

	.ud-tp__fig {
		width: auto;
	}

	.ud-tp__fig img {
		height: 20.8rem;
	}

	/* SP は画面幅いっぱい。PC の 44rem 固定を打ち消す。 */
	.ud-tp__fig.ud-tp__fig--portrait {
		width: auto;
	}

	.ud-tp__body > * + .ud-tp__fig,
	.ud-tp__fig + p {
		margin-top: 2.4rem;
	}

	.ud-tp__sub {
		gap: 0.8rem;
		font-size: 2rem;
	}

	.ud-tp__sub::before {
		width: 1.2rem;
		height: 1.2rem;
	}

	.ud-tp__body > * + .ud-tp__sub {
		margin-top: 4rem;
	}

	.ud-tp__lead {
		margin-top: 4.8rem;
	}

	/* --- 目次 --- */
	.ud-tp__toc {
		margin-top: 4.8rem;
		margin-bottom: 4.8rem;
		padding: 2.4rem 2.8rem 2.1rem;
	}

	.ud-tp__toc ul {
		margin-top: 0;
	}

	.ud-tp__toc li {
		font-size: 1.4rem;
		/* 行送り 32px（14 × 2.29）。PC の 1.7 とは別値。 */
		line-height: 2.29;
	}

	/* --- セクション --- */
	.ud-tp__sec {
		padding-block: 4.8rem;
	}

	.ud-tp__band {
		/* SP は帯幅いっぱいに 24px の文字が入るので、左右パディングは 8px しかない。 */
		padding: 0.86rem 0.8rem;
		border-left-width: 0.8rem;
		font-size: 2.4rem;
		text-align: left;
		justify-content: flex-start;
	}

	.ud-tp__band + * {
		margin-top: 3.2rem;
	}

	/* --- 表 --- */
	.ud-tp__table {
		font-size: 1.4rem;
	}

	.ud-tp__table th,
	.ud-tp__table td {
		padding: 1.2rem;
	}

	/* SP は横スクロールさせず、見出し列も折り返して画面幅に収める */
	.ud-tp__table tbody th {
		white-space: normal;
	}

	/* --- FAQ --- */
	.ud-tp__qa {
		padding: 2rem 1.6rem;
	}

	.ud-tp__qa dt {
		font-size: 1.6rem;
	}

	.ud-tp__qa dd {
		font-size: 1.4rem;
	}

	.ud-tp__qa dt,
	.ud-tp__qa dd {
		gap: 1.2rem;
	}

	.ud-tp__mark {
		width: 3.2rem;
		height: 3.2rem;
		font-size: 1.4rem;
	}
}