@charset "UTF-8";
/* ============================================================
   湘南辻堂院 下層ページ共通スタイル
   #shonan-tsujido スコープで見出し・リスト・表のデザインを統一。
   対象ページ: about / access / flow / information / night-time
   専用デザインの見出しはテンプレ側で .cancel を付与し装飾を除外。
   ============================================================ */

#shonan-tsujido {
	--ts-text: #2d2d2d;
	--ts-sky: #5fbcdd;
	--ts-green: #60aa97;
	--ts-gray: #dbe4ef;
	--ts-pale: #f1f6ff;
	--ts-red: #dc5653;
	--ts-font-mincho: 'Shippori Mincho', 'Yu Mincho', '游明朝', serif;
	--ts-font-en: 'Marcellus', serif;
	--ts-font-gothic: 'dnp-shuei-mgothic-std', sans-serif;
}

/* ============================================================
   コンテンツタイトル（h2）— 明朝・中央寄せ・上に英語ラベル（Marcellus 水色）
   ============================================================ */
#shonan-tsujido .main_content .ts-bunin-title {
	text-align: center;
}

/* アクセスの2カラム見出し（By Car / By Train）は左寄せ */
#shonan-tsujido .main_content .ts-bunin-title--left {
	text-align: left;
}
#shonan-tsujido .main_content .ts-bunin-title--left h2 {
	margin-bottom: 0.6em;
}

/* 日本語タイトル本体（h2）— 明朝 */
#shonan-tsujido .main_content .ts-bunin-title {
	margin: 0 0 1.6em;
}

/* 下余白を付けたくないセクション用 */
#shonan-tsujido .main_content .ts-bunin-title--no-margin {
	margin: 0;
}

#shonan-tsujido .main_content .ts-bunin-title h2 {
	font-family: var(--ts-font-mincho);
	font-weight: 600;
	color: var(--ts-text);
	line-height: 1.3;
	border: none;
}

/* 英語ラベル（装飾）— Marcellus 水色 */
#shonan-tsujido .main_content .ts-bunin-title__en {
	display: block;
	font-family: var(--ts-font-en);
	font-weight: 400;
	color: var(--ts-sky);
	text-transform: capitalize;
	letter-spacing: 0.05em;
	line-height: 1.2;
	margin-bottom: 6px;
}

@media screen and (min-width: 1000px), print {
	#shonan-tsujido .main_content .ts-bunin-title h2 {
		font-size: 2rem; /* 32px */
	}
	#shonan-tsujido .main_content .ts-bunin-title__en {
		font-size: 1.625rem; /* 26px */
	}
}

@media screen and (max-width: 999px) {
	#shonan-tsujido .main_content .ts-bunin-title h2 {
		font-size: 1.325rem;
	}
	#shonan-tsujido .main_content .ts-bunin-title__en {
		font-size: 1rem;
	}
}

/* ============================================================
   見出し（h3）— ゴシック太字・濃いグレー・装飾なし
   ※ .title（診療時間ボックス内）は除外
   ============================================================ */
#shonan-tsujido .main_content h3:not(.cancel):not(.title) {
	font-family: var(--ts-font-gothic);
	font-weight: 700;
	color: var(--ts-text);
	border-bottom: none;
	padding: 0;
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 0.8em;
	line-height: 1.5;
}

@media screen and (min-width: 1000px), print {
	#shonan-tsujido .main_content h3:not(.cancel):not(.title) {
		font-size: 1.625rem; /* 26px */
	}
}

@media screen and (max-width: 999px) {
	#shonan-tsujido .main_content h3:not(.cancel):not(.title) {
		font-size: 1.375rem;
	}
}

/* ============================================================
   小見出し（h4）— 水色太字・先頭ハイフン・背景帯なし
   ============================================================ */
#shonan-tsujido .main_content h4:not(.cancel) {
	font-family: var(--ts-font-gothic);
	font-weight: 700;
	color: var(--ts-sky);
	background: none;
	background-color: transparent;
	text-align: left;
	min-height: 0;
	line-height: 1.6;
	margin-bottom: 0.7em;
	padding: 0 0 0 1.1em;
	position: relative;
}

#shonan-tsujido .main_content h4:not(.cancel)::before {
	content: '-';
	position: absolute;
	left: 0;
	top: 0;
	color: var(--ts-sky);
	font-weight: 700;
}

@media screen and (min-width: 1000px), print {
	#shonan-tsujido .main_content h4:not(.cancel) {
		font-size: 1.375rem; /* 22px */
	}
}

@media screen and (max-width: 999px) {
	#shonan-tsujido .main_content h4:not(.cancel) {
		font-size: 1.25rem;
	}
}

/* 画像カード（.pc_column3）のキャプション h4 — 先頭ハイフン装飾なし */
#shonan-tsujido .main_content .pc_column3 h4:not(.cancel) {
	padding-left: 0;
}

#shonan-tsujido .main_content .pc_column3 h4:not(.cancel)::before {
	content: none;
}

/* ============================================================
   施設・医療機器カード（.bunin-p-about__facility .pc_column3 .column）
   Figma: 画像 → 緑の中央寄せタイトル → 左寄せ本文 の縦並びカード
   ============================================================ */
#shonan-tsujido .main_content .bunin-p-about__facility .pc_column3 .column {
	display: flex;
	flex-direction: column;
	margin-bottom: 40px;
}

/* 画像をカード最上部へ移動（HTML順は h4 → 画像 → 本文） */
#shonan-tsujido .main_content .bunin-p-about__facility .pc_column3 .column p:has(img) {
	order: -1;
	margin-bottom: 10px;
}

/* キャプション見出し — 緑・中央寄せ・20px
   ※ common-bunin.css の .bunin-p-about__facility h4 が color/margin を
     !important 指定しているため、ここでも !important で上書きする */
#shonan-tsujido .main_content .bunin-p-about__facility .pc_column3 .column h4:not(.cancel) {
	order: 0;
	color: var(--ts-green) !important;
	text-align: center;
	font-size: 1.25rem; /* 20px */
	line-height: 1.7;
	margin-bottom: 10px !important;
}

/* 本文 — 左寄せ・濃いグレー・16px */
#shonan-tsujido .main_content .bunin-p-about__facility .pc_column3 .column p:not(:has(img)) {
	order: 1;
	margin: 0;
	text-align: left;
	color: var(--ts-text);
	font-size: 1rem; /* 16px */
	line-height: 1.7;
}

/* ============================================================
   箇条書き（ul）— 8px 緑ドット（単色）
   ============================================================ */
#shonan-tsujido .main_content ul:not(.cancel) > li {
	padding-left: 1.4em;
}

#shonan-tsujido .main_content ul:not(.cancel) > li::before,
#shonan-tsujido .main_content ul:not(.cancel) > li:nth-child(odd)::before,
#shonan-tsujido .main_content ul:not(.cancel) > li:nth-child(even)::before {
	width: 8px;
	height: 8px;
	background-color: var(--ts-green);
	border-radius: 50%;
}

/* ============================================================
   数字付きリスト（ol）— 「1.」緑文字（丸番号ではない）
   ============================================================ */
#shonan-tsujido .main_content ol:not(.cancel) > li {
	padding-left: 1.6em;
	font-size: 1rem; /* 16px — パーツ一覧「数字つきリスト」に合わせる */
	line-height: 1.7;
	color: var(--ts-text);
}

#shonan-tsujido .main_content ol:not(.cancel) > li::before,
#shonan-tsujido .main_content ol:not(.cancel) > li:nth-child(odd)::before,
#shonan-tsujido .main_content ol:not(.cancel) > li:nth-child(even)::before {
	content: counter(num) '.';
	background: none;
	background-color: transparent;
	color: var(--ts-green);
	font-weight: 700;
	font-size: 1rem; /* 番号も本文と同じ 16px */
	width: auto;
	height: auto;
	border-radius: 0;
	line-height: 1.7;
	text-align: left;
	top: 0;
}

/* ============================================================
   診療時間表（.table-schedule）
   時間ラベル列を薄いブルーグレーにしてパーツ一覧の表に寄せる
   ============================================================ */
#shonan-tsujido .table-schedule tbody th {
	background-color: var(--ts-pale);
}

/* ============================================================
   下層ページ用テーブル（定義表: 左ラベル th + 右本文 td）
   ※ 曜日グリッド(.table-schedule)と勤務表カレンダー(.c-calendar-table)は
      グリッドのため対象外（カレンダーは calendar.css が担当）
   ============================================================ */
#shonan-tsujido .main_content table:not(.table-schedule):not(.c-calendar-table) {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.5em;
	color: var(--ts-text);
}

#shonan-tsujido .main_content table:not(.table-schedule):not(.c-calendar-table) th,
#shonan-tsujido .main_content table:not(.table-schedule):not(.c-calendar-table) td {
	border-bottom: 1px solid var(--ts-gray);
	vertical-align: middle;
	text-align: left;
	line-height: 1.7;
}

#shonan-tsujido .main_content table:not(.table-schedule):not(.c-calendar-table) th {
	background-color: var(--ts-pale);
	color: var(--ts-green);
	font-family: var(--ts-font-gothic);
	font-weight: 700;
	font-size: 1.125rem; /* 18px */
	text-align: center;
}

#shonan-tsujido .main_content table:not(.table-schedule):not(.c-calendar-table) td {
	font-size: 1rem; /* 16px */
	background-color: #fff;
}

@media screen and (min-width: 1000px), print {
	#shonan-tsujido .main_content table:not(.table-schedule):not(.c-calendar-table) th {
		width: 27%;
		padding: 26px 24px;
	}
	#shonan-tsujido .main_content table:not(.table-schedule):not(.c-calendar-table) td {
		padding: 26px 24px 26px 44px;
	}
	/* 診察時間（ischedule_layout-bunin）のテーブルのみ上下余白を詰める */
	#shonan-tsujido .main_content .ischedule_layout-bunin table:not(.table-schedule):not(.c-calendar-table) th,
	#shonan-tsujido .main_content .ischedule_layout-bunin table:not(.table-schedule):not(.c-calendar-table) td {
		padding-top: 18px;
		padding-bottom: 18px;
	}
}

@media screen and (max-width: 999px) {
	/* SP: ラベルと本文を縦積み（勤務表カレンダー .c-calendar-table はグリッドのため対象外） */
	#shonan-tsujido .main_content table:not(.table-schedule):not(.c-calendar-table),
	#shonan-tsujido .main_content table:not(.table-schedule):not(.c-calendar-table) tbody,
	#shonan-tsujido .main_content table:not(.table-schedule):not(.c-calendar-table) tr,
	#shonan-tsujido .main_content table:not(.table-schedule):not(.c-calendar-table) th,
	#shonan-tsujido .main_content table:not(.table-schedule):not(.c-calendar-table) td {
		display: block;
		width: 100%;
	}
	#shonan-tsujido .main_content table:not(.table-schedule):not(.c-calendar-table) th {
		text-align: left;
		padding: 12px 16px;
		border-bottom: none;
	}
	#shonan-tsujido .main_content table:not(.table-schedule):not(.c-calendar-table) td {
		padding: 12px 16px 16px;
	}
}

/* ラベル列（左）の上下端を角丸に */
#shonan-tsujido .main_content table:not(.table-schedule):not(.c-calendar-table) tr:first-child th {
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
#shonan-tsujido .main_content table:not(.table-schedule):not(.c-calendar-table) tr:last-child th {
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

/* 初めての方へ（flow）— ステップ／セクションの下余白 */
#shonan-tsujido .bunin-p-flow__flowarea-item,
#shonan-tsujido .bunin-p-flow__section {
	margin-bottom: 40px;
}

/* 初めての方へ（flow）— ステップ内の小見出し h4
   common-bunin.css の .bunin-p-flow__flowarea h4 が
   背景帯・濃い青・下線・26px・padding0 を !important で当てているため、
   Figma パーツ一覧 h4（水色・22px・先頭ハイフン・装飾なし）へ !important で戻す。 */
#shonan-tsujido .bunin-p-flow__flowarea h4:not(.cancel) {
	background: none !important;
	background-color: transparent !important;
	color: var(--ts-sky) !important;
	border-bottom: none !important;
	text-align: left !important;
	padding: 0 0 0 1.1em !important;
}
@media screen and (min-width: 1000px), print {
	#shonan-tsujido .bunin-p-flow__flowarea h4:not(.cancel) {
		font-size: 1.375rem !important; /* 22px */
	}
}
@media screen and (max-width: 999px) {
	#shonan-tsujido .bunin-p-flow__flowarea h4:not(.cancel) {
		font-size: 1.25rem !important;
	}
}

/* アクセスボックスの見出し（h3）— 湘南辻堂カラーの色帯ボックス
   ※ information / night-time の「藤沢夜間救急動物病院」見出しで共通使用。
     通常の h3（色帯なし）を例外的に上書きするため :not() で特異度を確保 */
#shonan-tsujido .main_content .bunin-accessbox h3:not(.cancel):not(.title) {
	font-family: var(--ts-font-gothic);
	font-weight: 600;
	font-size: 1.25rem; /* 20px */
	color: #fff;
	background-color: var(--ts-sky);
	box-sizing: border-box;
	line-height: 1.4;
	text-align: center;
	padding: 0.27em 20px 0.28em;
	margin: 0 0 1em;
}

@media screen and (min-width: 1000px), print {
	#shonan-tsujido .main_content .bunin-accessbox h3:not(.cancel):not(.title) {
		min-height: 40px;
	}
}

/* アクセスボックス内の地図 iframe — 枠線なし */
#shonan-tsujido .bunin-accessbox iframe {
	border: 0;
}

/* 画像・ステップ枠・情報ボックスの角丸をなくす */
#shonan-tsujido .main_content img._radius,
#shonan-tsujido .buninp-top__feature-image img,
#shonan-tsujido .bunin-p-flow__flowarea-item,
#shonan-tsujido .bunin-p-top__schedulearea {
	border-radius: 0;
}

/* 水色の背景帯（特徴セクション等） */
#shonan-tsujido .ts-section-sky {
	background-color: var(--ts-pale);
	padding: 56px 48px;
}
@media screen and (max-width: 999px) {
	#shonan-tsujido .ts-section-sky {
		padding: 40px 20px;
	}
}

/* 特徴セクションの見出し — 番号「01」水色（Marcellus）＋本文も水色 */
#shonan-tsujido .buninp-top__feature-text h3.cancel {
	color: var(--ts-sky) !important;
	background: none !important;
}
#shonan-tsujido .buninp-top__feature-text h3.cancel span {
	font-family: var(--ts-font-en);
	color: var(--ts-sky) !important;
	font-weight: 400;
	font-size: 2.25rem !important;
	line-height: 1;
	display: block;
	margin-bottom: 4px;
}

/* 初めての方へ フローステップ見出し — テキストはh3デザイン／番号はolの数字デザイン */
#shonan-tsujido .bunin-p-flow__flowarea-item h3.cancel {
	font-family: var(--ts-font-gothic);
	font-weight: 700;
	color: var(--ts-text);
	display: flex;
	align-items: baseline;
	gap: 0.4em;
	line-height: 1.4;
	margin-bottom: 0.8em;
}
@media screen and (min-width: 1000px), print {
	#shonan-tsujido .bunin-p-flow__flowarea-item h3.cancel {
		font-size: 1.625rem;
	}
}
@media screen and (max-width: 999px) {
	#shonan-tsujido .bunin-p-flow__flowarea-item h3.cancel {
		font-size: 1.375rem;
	}
}
#shonan-tsujido .bunin-p-flow__flowarea-item h3.cancel span {
	flex: 0 0 auto;
	font-family: var(--ts-font-gothic); /* olの数字デザイン：秀英角ゴ */
	font-weight: 700;
	color: var(--ts-green); /* olの数字デザイン：緑 */
	font-size: 1em; /* テキスト(h3)と同サイズで揃える */
	line-height: inherit;
	background: none;
	width: auto;
	height: auto;
	margin: 0;
	display: inline-block;
	aspect-ratio: auto;
}

/* olの「1.」と同様に番号末尾へピリオドを付与 */
#shonan-tsujido .bunin-p-flow__flowarea-item h3.cancel span::after {
	content: '.';
}

/* ============================================================
   フッター三角ライン（SP）— 高さ130pxの余白を詰める
   .tri_line 自体は position:absolute のため height:auto で 0 に潰れる
   ============================================================ */
#shonan-tsujido-footer .tri_line_area {
	height: auto;
}

/* ============================================================
   ピル型ボタン（白背景・緑枠・右シェブロン矢印）
   Figma: 310-660。トップ index.css の .ts-pill-btn と同一デザインを
   下層ページ（flow / night-time など）でも使えるよう共通CSSに定義。
   ※ index.css は :root のカラー変数を持つがトップ専用のため、
     ここではリテラル値（緑 #60aa97 / 白 #fff）で指定する。
   ============================================================ */
.ts-pill-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	border: 1px solid #60aa97;
	color: #60aa97;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	padding: 5px 10px 5px 32px;
	border-radius: 100px;
	transition:
		background 0.25s,
		color 0.25s;
}

.ts-pill-btn:hover {
	background: #60aa97;
	color: #fff;
}

/* 円形矢印アイコンの土台（空spanに21pxの箱を与える） */
.ts-circle-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 21px;
	height: 21px;
	border-radius: 50%;
	flex-shrink: 0;
	line-height: 1;
}

/* 矢印は画像方式（白円＋緑シェブロンPNG）。白背景では円が透けてシェブロンのみ表示。
   ホバー時の緑背景でも画像はそのまま表示する（background ショートハンドで上書きしない）。 */
.ts-pill-btn .ts-circle-arrow {
	background-image: url(../../top/images/arrow-green.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 21px 21px;
}

/* ============================================================
   ピル型ボタン 赤バージョン（塗り背景・白文字・白円＋赤シェブロン矢印）
   Figma: 359-496。Web予約など強調CTA用の修飾子。
   基底の .ts-pill-btn と併用する: class="ts-pill-btn ts-pill-btn--red"
   ============================================================ */
.ts-pill-btn--red {
	background: #dc5653;
	border-color: #dc5653;
	color: #fff;
	font-size: 18px;
}

/* 基底の .ts-pill-btn:hover（緑反転）を打ち消し、赤のまま少し持ち上げる
   （トップ index.css の .ts-reservation__web-btn と同じ挙動）。 */
.ts-pill-btn--red:hover {
	background: #dc5653;
	color: #fff;
	opacity: 0.92;
	transform: translateY(-1px);
}

/* 矢印は白円＋赤シェブロンPNG（Figma 359-496 準拠）。赤背景に白円が浮かぶ。 */
.ts-pill-btn--red .ts-circle-arrow {
	background-image: url(../../top/images/arrow-red.png);
}