@charset "UTF-8";
/* ============================================================
   湘南辻堂院 初めての方へ（flow）専用スタイル
   ※ .ts-clinic__table 等は top/index.css にあるが当ページでは読み込まれないため、
     必要な変数とスタイルを当ファイルに集約して条件付きenqueueする。
   ============================================================ */

/* ブランドカラーは common-bunin.css の #shonan-tsujido で定義済みだが、
   当ページが top/index.css を読み込まないため information.css / night-time.css と
   同様に必要な --tsujido-* 変数をここで自前定義する。 */
#shonan-tsujido {
	--tsujido-accent: #5da4d6;
	--tsujido-navy: #1a3a5c;
}
:root {
	--tsujido-white: #fff;
	--tsujido-text-primary: #222;
	--tsujido-border: #dde4ea;
}

/* ============================================================
   診察時間の簡易表をトップ同様の「診察時間 図」
   （曜日×時間帯の●グリッド .ts-clinic__table 形式）に戻す。
   テーマ共通の定義表スタイル（table:not(.table-schedule)）と
   common-bunin の .table-schedule td padding 33px!important を避けるため、
   テーブルへ table-schedule クラスを付与し、#shonan-tsujido スコープ＋
   必要箇所のみ !important で当グリッド用に上書きする（information.css と同方式）。
   ============================================================ */
#shonan-tsujido .ts-clinic__table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	margin-bottom: 14px;
}

#shonan-tsujido .ts-clinic__table thead th,
#shonan-tsujido .ts-clinic__table tbody td {
	border: 0;
	border-bottom: 1px solid var(--tsujido-border);
	padding: 9px 2px !important; /* common-bunin の .table-schedule td 33px!important を打ち消す */
	text-align: center;
	vertical-align: middle;
	width: auto;
	background: transparent;
}

/* 1列目（時間ラベル）を広めに確保し、曜日7列で残りを等分 */
#shonan-tsujido .ts-clinic__table thead th:first-child,
#shonan-tsujido .ts-clinic__table tbody td:first-child {
	width: 33%;
}

#shonan-tsujido .ts-clinic__table thead th {
	color: var(--tsujido-text-primary);
	font-weight: 400;
	font-size: 13px;
}

#shonan-tsujido .ts-clinic__table tbody td.ts-clinic__time-label {
	text-align: left;
	font-size: 12px;
	font-weight: 400;
	color: var(--tsujido-accent);
	white-space: normal; /* 狭幅では折り返して右端の曜日の見切れを防ぐ */
	word-break: normal;
	line-height: 1.4;
}

#shonan-tsujido .ts-clinic__table .ts-clinic__time-label span {
	margin: 0 1px;
}

#shonan-tsujido .ts-clinic__table tbody td:not(.ts-clinic__time-label) {
	color: var(--tsujido-accent);
	font-weight: 400;
	font-size: 13px;
}

/* 夜間の行はトップと統一し、文字色と●を濃いネイビーに */
#shonan-tsujido .ts-clinic__table tbody tr.ts-clinic__row--night td.ts-clinic__time-label,
#shonan-tsujido .ts-clinic__table tbody tr.ts-clinic__row--night td:not(.ts-clinic__time-label) {
	color: var(--tsujido-navy);
	font-weight: 700;
}

/* ============================================================
   「Web予約はこちら」ボタンの文字詰まりを解消するため、
   文字サイズはそのままに、左右paddingとmin-widthで横幅を広げる。
   ============================================================ */
#shonan-tsujido .bunin-p-flow__flowarea-item .web-tel .ts-pill-btn--red {
	justify-content: center;
	min-width: 260px;
	max-width: 100%;
	padding-left: 36px;
	padding-right: 24px;
}

/* ============================================================
   ページ内 h4 の文字色を水色→ネイビーへ変更。
   common.css / common-bunin.css が !important で水色を当てているため、
   同等セレクタ＋!important で上書きする（flow.css は後勝ち）。
   ============================================================ */
#shonan-tsujido .bunin-p-flow__flowarea h4:not(.cancel) {
	color: var(--tsujido-navy) !important;
	padding-left: 0 !important; /* common-bunin.css の h4:not(.cancel) padding-left 20px を打ち消す */
}

#shonan-tsujido .bunin-p-flow__flowarea h4:not(.cancel)::before {
	content: '';
}

#shonan-tsujido .bunin-p-flow__flowarea ul:not(.cancel) > li::before,
#shonan-tsujido .bunin-p-flow__flowarea ul:not(.cancel) > li:nth-child(odd)::before,
#shonan-tsujido .bunin-p-flow__flowarea ul:not(.cancel) > li:nth-child(even)::before {
	background-color: var(--tsujido-navy);
}

/* ============================================================
   番号付き見出し（「1. 診察のご予約」「2. ご準備」…）を、
   診療案内ページの専門外来見出し（.bunin-ot__head / .bunin-ot__title）と
   同じ仕様＝淡い水色帯(#e8f6fa)＋左の縦アクセントバー＋見出し文字に統一する。
   ※AUNレビュー: 色味を減らすためバー・文字はブランド水色 #5da4d6 に集約（旧ティール #1d95c0/#1d7a9c）。
   ※当ページは information.css を読み込まないため同等スタイルをここに定義。
   既存 common.css の flex レイアウト・番号「N.」表記は活かし、色/背景/余白のみ上書き。
   ============================================================ */
#shonan-tsujido .bunin-p-flow__flowarea-item h3.cancel {
	position: relative;
	align-items: center;
	gap: 0.3em;
	/* カード(.bunin-p-flow__flowarea-item)の padding 40px を負マージンで打ち消し、
	   帯を上端＋左右いっぱいに密着させる。下だけ 1em の余白を確保。 */
	margin: -40px -40px 1em -40px;
	padding: 16px 28px 16px 44px;
	background: #e8f6fa;
	color: #5da4d6;
	font-size: 1.3rem;
	line-height: 1.4;
}

#shonan-tsujido .bunin-p-flow__flowarea-item h3.cancel::before {
	content: '';
	position: absolute;
	left: 28px;
	top: 50%;
	transform: translateY(-50%);
	width: 5px;
	height: 1.1em;
	border-radius: 3px;
	background: #5da4d6;
}

/* 番号「N.」も見出しテキストと同色（ブランド水色）に揃える */
#shonan-tsujido .bunin-p-flow__flowarea-item h3.cancel span {
	color: #5da4d6;
}

@media screen and (max-width: 767px) {
	#shonan-tsujido .bunin-p-flow__flowarea-item h3.cancel {
		/* SP はカード padding 20px・角丸 16px に合わせる */
		margin: -20px -20px 1em -20px;
		padding: 14px 18px 14px 32px;
		font-size: 1.15rem;
	}
	#shonan-tsujido .bunin-p-flow__flowarea-item h3.cancel::before {
		left: 18px;
	}
}

/* ============================================================
   ページ内の矢印色の混在を解消。
   通常ピルボタン（専門外来の診療時間／問診票／アクセス情報）の緑(#60aa97)を、
   湘南辻堂ブランドの水色 #5da4d6 に統一する。枠・文字・ホバー背景・矢印を揃える。
   矢印は白円＋シェブロンPNGのため arrow-green.png → arrow-blue.png に差し替え。
   Web予約(.ts-pill-btn--red)の赤シェブロンは強調CTAとして維持するため :not() で除外。
   ※ flow.css は当ページ限定enqueueかつ common.css より後出力のため、後勝ち＋詳細度で確実に上書き。
   ============================================================ */
#shonan-tsujido .ts-pill-btn:not(.ts-pill-btn--red) {
	border-color: #5da4d6;
	color: #5da4d6;
}

#shonan-tsujido .ts-pill-btn:not(.ts-pill-btn--red):hover {
	background: #5da4d6;
	color: #fff;
}

#shonan-tsujido .ts-pill-btn:not(.ts-pill-btn--red) .ts-circle-arrow {
	background-image: url(../../top/images/arrow-blue.png);
}

#shonan-tsujido .bunin-p-flow__flowarea-item::after {
	border-top-color: #e8f6fa;
}