/* ===========================================================
   Object / Project / Clinic Info Detail
   /about/ ページ専用「医院概要 / 診療時間 / アクセス」の3セクション。
   template-parts/clinic-info-detail.php が出力する .p-clinic-info-detail を
   親の .l-page__inner 内に置き、3セクション全体を 800px・中央寄せに収める。

   ・モバイルファースト（SP = base、PC = @media (min-width:768px) で上書き）
   ・親 .l-page__inner が左右 padding (clamp(16px,4vw,80px)) を持つため
     ここでは padding を二重に乗せない
   ・!important 不使用
   =========================================================== */

/* ===========================================================
   コンポーネント全体の幅制御
   =========================================================== */
.p-clinic-info-detail {
	max-width: var(--content-max-narrow); /* 800px */
	margin-inline: auto;
}

/* セクション間の余白 */
.p-clinic-info-detail__section + .p-clinic-info-detail__section {
	margin-top: 40px;
}

@media (min-width: 768px) {
	.p-clinic-info-detail__section + .p-clinic-info-detail__section {
		margin-top: 64px;
	}
}

/* セクション内の H2 とコンテンツの間 */
.p-clinic-info-detail__section h2 + * {
	margin-top: 24px;
}

@media (min-width: 768px) {
	.p-clinic-info-detail__section h2 + * {
		margin-top: 32px;
	}
}

/* ===========================================================
   医院概要テーブル
   外枠 1px navy-300、角丸 16px、横線で行区切り。
   PC: 左カラム 180px / SP: 100px。
   =========================================================== */
.p-clinic-info-detail__table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--color-navy-300);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background-color: var(--color-white);
	font-size: 15px;
	line-height: var(--lh-base);
}

@media (min-width: 768px) {
	.p-clinic-info-detail__table {
		font-size: 16px;
	}
}

.p-clinic-info-detail__table th,
.p-clinic-info-detail__table td {
	padding: 16px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--color-gray-300);
}

/* 最下行のボーダーは消す（角丸とのなじみ） */
.p-clinic-info-detail__table tr:last-child th,
.p-clinic-info-detail__table tr:last-child td {
	border-bottom: none;
}

.p-clinic-info-detail__table th {
	width: 100px;
	background-color: var(--color-navy-100);
	color: var(--color-navy-500);
	font-weight: 700;
	white-space: nowrap;
}

@media (min-width: 768px) {
	.p-clinic-info-detail__table th {
		width: 180px;
	}
}

.p-clinic-info-detail__table td {
	background-color: var(--color-white);
	color: var(--color-text);
	word-break: break-word;
}

/* ===========================================================
   診療時間表
   外枠 1px navy-300、角丸 16px、SP は overflow-x: auto。
   ヘッダー（曜日行）: 背景 navy-500 / 文字 白。
   ●: pink-500 / − : gray-400。
   =========================================================== */
.p-clinic-info-detail__scroll {
	border: 1px solid var(--color-navy-300);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background-color: var(--color-white);
}

/* SP では横スクロール可（PC は内側に収まる） */
@media (max-width: 767px) {
	.p-clinic-info-detail__scroll {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

.p-clinic-info-detail__hours-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 14px;
	line-height: var(--lh-tight);
	min-width: 560px;
}

@media (min-width: 768px) {
	.p-clinic-info-detail__hours-table {
		font-size: 15px;
		min-width: 0;
	}
}

.p-clinic-info-detail__hours-table thead th {
	background-color: var(--color-navy-500);
	color: var(--color-white);
	font-weight: 700;
	padding: 12px 8px;
	text-align: center;
	border-right: 1px solid var(--color-navy-400);
}

.p-clinic-info-detail__hours-table thead th:last-child {
	border-right: none;
}

/* 1列目（時間帯ラベル）のヘッダー */
.p-clinic-info-detail__hours-table thead th:first-child {
	min-width: 110px;
}

.p-clinic-info-detail__hours-table tbody th,
.p-clinic-info-detail__hours-table tbody td {
	padding: 16px 8px;
	text-align: center;
	border-top: 1px solid var(--color-gray-300);
	border-right: 1px solid var(--color-gray-300);
}

.p-clinic-info-detail__hours-table tbody td:last-child,
.p-clinic-info-detail__hours-table tbody th:last-child {
	border-right: none;
}

.p-clinic-info-detail__hours-table tbody th {
	background-color: var(--color-navy-100);
	color: var(--color-navy-500);
	font-weight: 700;
	white-space: nowrap;
}

.p-clinic-info-detail__hours-table tbody td {
	background-color: var(--color-white);
}

/* ● マーク */
.p-clinic-info-detail__mark {
	color: var(--color-pink-500);
	font-size: 1.2em;
	font-weight: 700;
	line-height: 1;
}

/* − マーク */
.p-clinic-info-detail__dash {
	color: var(--color-gray-400);
	font-size: 1.1em;
	line-height: 1;
}

/* 注釈リスト */
.p-clinic-info-detail__notes {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
	font-size: 14px;
	line-height: var(--lh-base);
	color: var(--color-text-light);
}

@media (min-width: 768px) {
	.p-clinic-info-detail__notes {
		font-size: 14px;
		margin-top: 20px;
	}
}

.p-clinic-info-detail__notes li {
	margin: 0;
	padding: 0;
}

.p-clinic-info-detail__notes li + li {
	margin-top: 4px;
}

/* ===========================================================
   アクセス
   地図 iframe (角丸 16px、SP 300px / PC 400px)、住所＋経路、ボタン。
   ボタンは SP 中央 / PC 中央（800px 内の中央が自然）。
   =========================================================== */
.p-clinic-info-detail__map {
	width: 100%;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background-color: var(--color-gray-200);
}

.p-clinic-info-detail__map iframe {
	display: block;
	width: 100%;
	height: 300px;
	border: 0;
}

@media (min-width: 768px) {
	.p-clinic-info-detail__map iframe {
		height: 400px;
	}
}

.p-clinic-info-detail__access-info {
	margin-top: 24px;
	font-size: 15px;
	line-height: var(--lh-base);
	color: var(--color-text);
}

@media (min-width: 768px) {
	.p-clinic-info-detail__access-info {
		font-size: 16px;
		margin-top: 32px;
	}
}

.p-clinic-info-detail__address {
	font-style: normal;
	margin: 0;
}

.p-clinic-info-detail__route {
	margin: 12px 0 0;
}

/* ボタンラッパー：中央寄せ */
.p-clinic-info-detail__button-wrap {
	margin-top: 24px;
	display: flex;
	justify-content: center;
}

@media (min-width: 768px) {
	.p-clinic-info-detail__button-wrap {
		margin-top: 32px;
	}
}