/* ============================================================
   湘南辻堂院 共通変数 & トップページスタイル
   フォント: Shippori Mincho (見出し) / デバイスゴシック (本文) / Marcellus (英語)
   ============================================================ */

/* ブランドカラーは common-bunin.css の #shonan-tsujido で --ts-brand を単一定義 */
#shonan-tsujido {
	--tsujido-accent: #5da4d6;
}

:root {
	/* アクセント・ブランドカラー（accent は --ts-brand に集約） */
	--tsujido-green: #60aa97;
	--tsujido-navy: #1a3a5c;
	--tsujido-navy-dark: #060e1f;
	--tsujido-navy-deep: #001261;
	--tsujido-red: #dc5653;

	/* テキスト */
	--tsujido-text-primary: #222;
	--tsujido-text-heading: #2d2d2d;
	--tsujido-text-muted: #555;
	--tsujido-white: #fff;

	/* 背景 */
	--tsujido-bg-light: #f7f9fc;
	--tsujido-bg-blue: #f1f6ff;
	--tsujido-bg-pink: #fff1f2;

	/* ボーダー */
	--tsujido-border: #dde4ea;
	--tsujido-border-light: #ececec;

	/* SNS・決済ブランドカラー */
	--tsujido-line-green: #06c755;
	--tsujido-sns-manga: #81b3f2;
	--tsujido-sns-youtube: #e41533;
	--tsujido-sns-dental: #3b91f5;
	--tsujido-sns-skin: #e9642b;
	--tsujido-pay-anicom: #4caf50;
	--tsujido-pay-ipet: #e91e63;

	/* フォント */
	--tsujido-font-mincho: 'Shippori Mincho', 'Yu Mincho', '游明朝', serif;
	--tsujido-font-en: 'Marcellus', serif;
}

/* ============================================================
   FV (First View) — 2分割ヒーロー
   ============================================================ */
.ts-fv {
	position: relative;
	overflow: hidden;
}

.ts-fv__split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	/* PCではヘッダー領域(168px)を除いた高さでFVが画面いっぱいになるようにする */
	height: calc(100vh - 168px);
	min-height: 400px;
}

.ts-fv__split-left,
.ts-fv__split-right {
	position: relative;
	overflow: hidden;
}

.ts-fv__split-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ts-fv__copy-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	/* コピーをFV下部に配置 */
	align-items: flex-end;
	/* 白コピーの可読性を確保する左グラデ */
	background: linear-gradient(to right, rgba(6, 14, 31, 0.6) 0%, rgba(6, 14, 31, 0.4) 45%, transparent 70%);
	pointer-events: none;
}

.ts-fv__copy-inner {
	/* 他セクションの .container と左端を揃え、広い画面で際限なく広がるのを防ぐ */
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	box-sizing: border-box;
	padding: 0 clamp(24px, 6vw, 80px) clamp(40px, 6vh, 80px);
	pointer-events: auto;
}

.ts-fv__copy-label {
	font-family: var(--tsujido-font-en);
	font-size: clamp(10px, 1.4vw, 13px);
	color: rgba(255, 255, 255, 0.65);
	letter-spacing: 0.22em;
	margin-bottom: 12px;
}

.ts-fv__copy-main {
	font-family: var(--tsujido-font-mincho);
	font-size: clamp(22px, 3.8vw, 46px);
	font-weight: 700;
	color: var(--tsujido-white);
	letter-spacing: 0.06em;
	line-height: 1.6;
	margin-bottom: 14px;
}

.ts-fv__copy-en {
	font-family: var(--tsujido-font-en);
	font-size: clamp(10px, 1.3vw, 13px);
	color: rgba(255, 255, 255, 0.65);
	letter-spacing: 0.1em;
	line-height: 1.8;
	margin-bottom: 20px;
}

.ts-fv__copy-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ts-fv__copy-badge {
	display: inline-block;
	border: 1.5px solid rgba(255, 255, 255, 0.65);
	color: var(--tsujido-white);
	font-size: clamp(10px, 1.2vw, 13px);
	font-weight: 700;
	padding: 4px 14px;
	border-radius: 20px;
	letter-spacing: 0.06em;
	backdrop-filter: blur(4px);
}

/* ============================================================
   クイックナビゲーション (Frame 30 — 3パネル)
   ============================================================ */
.ts-quick-nav {
	background: var(--tsujido-white);
	border-bottom: 1px solid var(--tsujido-border);
}

.ts-quick-nav__panels {
	display: flex;
	align-items: flex-start;
	gap: 30px;
	padding: 50px 60px;
	max-width: 1280px;
	margin: 0 auto;
	box-sizing: border-box;
}

.ts-quick-nav__panel {
	display: flex;
	flex: 1;
	padding: 22px 32px 32px;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	background: var(--tsujido-bg-blue);
	border-radius: 8px;
	min-width: 0;
}

.ts-quick-nav__panel-header {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-bottom: 2px;
	width: 100%;
}

.ts-quick-nav__panel-icon {
	flex-shrink: 0;
	width: 45px;
	height: 45px;
}

.ts-quick-nav__panel-icon svg,
.ts-quick-nav__panel-icon img {
	width: 45px;
	height: 45px;
	display: block;
}

.ts-quick-nav__panel-title {
	font-family: 'dnp-shuei-mgothic-std', sans-serif;
	font-size: 20px;
	font-weight: 700;
	color: var(--tsujido-text-heading);
	letter-spacing: 0.02em;
	line-height: 1.5;
}

.ts-quick-nav__links {
	list-style: none;
	padding: 0;
	margin: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ts-quick-nav__links a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 5px 10px 5px 17px;
	background: var(--tsujido-white);
	border-radius: 53px;
	font-family: 'dnp-shuei-mgothic-std', sans-serif;
	font-size: 16px;
	line-height: 1.7;
	color: var(--tsujido-text-heading);
	text-decoration: none;
	transition:
		color 0.2s,
		box-shadow 0.2s;
}

.ts-quick-nav__links a:hover {
	color: var(--tsujido-accent);
	box-shadow: 0 4px 12px rgba(93, 164, 214, 0.18);
}

/* Figma 217-1857/2032: クイックナビの矢印は水色シェブロン画像 */
.ts-quick-nav__links a .ts-circle-arrow {
	flex-shrink: 0;
	background-color: transparent;
	background-image: url(../images/arrow-blue.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 21px 21px;
}

/* パネル3: 専門治療リンクは2列グリッド */
.ts-quick-nav__links--grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 10px;
	row-gap: 10px;
}

.ts-quick-nav__links-full {
	grid-column: 1 / -1;
}

/* 専門画像診断科は長いため16pxだと2行になる。14pxで1行に収める */
.ts-quick-nav__links-sm a {
	font-size: 14px;
}

/* ============================================================
   お知らせ
   ============================================================ */
.ts-info-news {
	padding: 64px 0;
	background: var(--tsujido-white);
}

.ts-info-news__head {
	display: flex;
	align-items: flex-end;
	gap: 20px;
	margin-bottom: 32px;
}

.ts-info-news__heading {
	display: flex;
	align-items: baseline;
	gap: 18px;
	margin: 0;
}

.ts-info-news__en {
	font-family: var(--tsujido-font-en);
	font-size: clamp(2rem, 4vw, 2.4rem);
	font-weight: 400;
	color: var(--tsujido-accent);
	line-height: 1;
	letter-spacing: 0.02em;
}

.ts-info-news__ja {
	font-family: var(--tsujido-font-mincho);
	font-size: 16px;
	font-weight: 500;
	color: var(--tsujido-text-primary);
}

.ts-info-news__more {
	margin-left: auto;
	white-space: nowrap;
}

.ts-info-news__cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}

.ts-info-news__card {
	position: relative;
	display: block;
	box-sizing: border-box;
	min-height: 160px;
	padding: 31px 31px 48px;
	border: 1px solid var(--tsujido-border);
	background: var(--tsujido-white);
	text-decoration: none;
	color: var(--tsujido-text-primary);
	transition:
		border-color 0.2s,
		box-shadow 0.2s;
}

a.ts-info-news__card:hover {
	border-color: var(--tsujido-accent);
	box-shadow: 0 6px 18px rgba(93, 164, 214, 0.12);
}

.ts-info-news__date {
	display: block;
	font-size: 14px;
	line-height: 1.7;
	color: var(--tsujido-text-primary);
}

.ts-info-news__card .ts-info-news__title {
	margin: 5px 0 0;
	font-size: 16px;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Figma 217-1907: お知らせカードの矢印は丸なしの水色シェブロン（クイックナビと共通）
   .ts-circle-arrow より後に定義されるため、詳細度を上げて上書きする */
.ts-info-news__card .ts-info-news__card-arrow {
	position: absolute;
	right: 15px;
	bottom: 16px;
	background-color: transparent;
	background-image: url(../images/arrow-blue.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 21px 21px;
}

/* 再利用：円形矢印アイコンの土台（空spanに21pxの箱を与えるのみ。
   見た目は各所の背景画像ルール＝白円＋色付きシェブロンPNGが担う。
   旧シェブロン文字方式の ::before / 背景色 / 文字色は画像方式へ移行済みのため削除） */
.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;
}

/* ============================================================
   共通：ピル型ボタン（白背景・緑枠）
   ============================================================ */
.ts-pill-btn,
.ts-about__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--tsujido-white);
	border: 1px solid var(--tsujido-green);
	color: var(--tsujido-green);
	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-about__link {
	align-self: flex-start;
}

.ts-pill-btn:hover,
.ts-about__link:hover {
	background: var(--tsujido-green);
	color: var(--tsujido-white);
}

/* ホバー時は矢印画像（白円＋緑シェブロン）をそのまま表示する。
   background ショートハンドで上書きすると画像が消えるため指定しない */

/* ============================================================
   診療のご案内 導入 (Medical Service)
   ============================================================ */
.ts-medical-intro {
	margin: 40px 0;
	overflow: hidden;
}

.ts-medical-intro__inner {
	display: flex;
	align-items: flex-start;
	position: relative;
	max-width: 1184px;
	margin: 0 auto;
}

.ts-medical-intro__panel {
	flex: 0 0 53%;
	min-height: 428px;
	background: var(--tsujido-bg-blue);
	display: flex;
	flex-direction: column;
	gap: 24px;
	justify-content: center;
	padding: 64px clamp(40px, 9vw, 130px) 64px 60px;
	box-sizing: border-box;
}

.ts-medical-intro__head {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.ts-medical-intro__en {
	display: flex;
	align-items: center;
	gap: 15px;
	font-family: var(--tsujido-font-en);
	font-size: clamp(2rem, 3.4vw, 2.375rem);
	color: var(--tsujido-accent);
	line-height: 1;
	margin: 0;
}

.ts-medical-intro__en-icon {
	flex-shrink: 0;
	width: 40px;
	height: auto;
}

.ts-medical-intro__ja {
	font-family: var(--tsujido-font-mincho);
	font-size: 16px;
	font-weight: 500;
	color: var(--tsujido-text-primary);
	margin: 0;
}

.ts-medical-intro__lead {
	font-size: 16px;
	line-height: 1.9;
	color: var(--tsujido-text-primary);
	margin: 0;
}

.ts-medical-intro__panel .ts-pill-btn {
	align-self: flex-start;
}

.ts-medical-intro__photo {
	/* 写真をパネル右端に重ね、下方向へオフセットした段違い配置にする */
	flex: 0 0 52.7%;
	margin-left: -5.7%;
	margin-top: 80px;
	align-self: flex-start;
	position: relative;
	z-index: 1;
	aspect-ratio: 675 / 446;
	overflow: hidden;
}

.ts-medical-intro__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (max-width: 768px) {
	.ts-medical-intro {
		margin: 24px 0;
	}
	.ts-medical-intro__inner {
		flex-direction: column;
		/* SPでは縦積み。パネル/写真を全幅にするため stretch にする */
		align-items: stretch;
	}
	.ts-medical-intro__panel {
		flex: 1 1 auto;
		min-height: 0;
		padding: 40px 24px;
	}
	/* Figma SP: 「診療案内」ボタンは中央寄せ */
	.ts-medical-intro__panel .ts-pill-btn {
		align-self: center;
	}
	.ts-medical-intro__photo {
		flex: 1 1 auto;
		width: 100%;
		margin-left: 0;
		margin-top: 0;
		aspect-ratio: auto;
		height: 220px;
	}
}

/* 診療科紹介 見出し */
.ts-departments-head {
	text-align: center;
	padding: 24px 0 40px;
}

.ts-departments-head__en {
	font-family: var(--tsujido-font-en);
	font-size: clamp(2rem, 3.4vw, 2.375rem);
	color: var(--tsujido-accent);
	line-height: 1;
	margin: 0 0 5px;
}

.ts-departments-head__ja {
	font-family: var(--tsujido-font-mincho);
	font-size: 16px;
	font-weight: 500;
	color: var(--tsujido-text-primary);
	margin: 0;
}

/* ============================================================
   診療科バンド (01一般 / 02専門ネイビー / 03予防)
   ============================================================ */
.ts-dept {
	position: relative;
	overflow: hidden;
	padding: 64px 0;
}

.ts-dept--02 {
	background: var(--tsujido-navy-deep);
}

.ts-dept--03 {
	background: var(--tsujido-bg-blue);
}

.ts-dept__bg {
	position: absolute;
	top: 32px;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--tsujido-font-en);
	font-size: clamp(72px, 12vw, 170px);
	line-height: 1;
	white-space: nowrap;
	color: var(--tsujido-accent);
	opacity: 0.08;
	pointer-events: none;
	z-index: 0;
}

.ts-dept--02 .ts-dept__bg {
	color: var(--tsujido-white);
	opacity: 0.12;
}

.ts-dept__inner {
	position: relative;
	z-index: 1;
}

.ts-dept__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 12px;
	flex-wrap: wrap;
	gap: 12px;
}

.ts-dept__heading {
	display: flex;
	align-items: baseline;
	gap: 16px;
}

/* 診療科番号「01」: デザインは DNP秀英丸ゴシック Light（Marcellusセリフではない）。本文ゴシック(dnp-shuei-mgothic-std)に統一 */
.ts-dept__num {
	font-family: dnp-shuei-mgothic-std, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
	font-size: 40px;
	font-weight: 300;
	color: var(--tsujido-accent);
	line-height: 1;
}

.ts-dept__ja {
	font-size: 26px;
	font-weight: 400;
	color: var(--tsujido-text-primary);
	line-height: 1.5;
	margin: 0;
}

.ts-dept--02 .ts-dept__num,
.ts-dept--02 .ts-dept__ja,
.ts-dept--02 .ts-dept__desc {
	color: var(--tsujido-white);
}

.ts-dept__desc {
	font-size: 16px;
	color: var(--tsujido-text-primary);
	line-height: 1.7;
	margin: 0 0 32px;
}

/* カルーセル（横スクロール + scroll-snap） */
.ts-dept__carousel {
	position: relative;
}

.ts-dept__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	/* hoverの浮き・影が上下端で切れないよう余白を確保 */
	padding: 6px 2px 24px;
	margin: -6px -2px -24px;
}

.ts-dept__viewport::-webkit-scrollbar {
	display: none;
}

.ts-dept__cards {
	display: flex;
	gap: 30px;
	align-items: stretch;
}

/* 制御UI（矢印 + ドット）: カード下・左寄せ */
.ts-dept__controls {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 28px;
}

.ts-dept__controls.is-hidden {
	display: none;
}

.ts-dept__nav {
	position: relative;
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--tsujido-accent);
	cursor: pointer;
	transition: opacity 0.2s;
}

.ts-dept__nav::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 11px;
	height: 9.43px;
	background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2011%209.43367%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M10.3388%203.94475C10.2938%203.93744%2010.2483%203.93407%2010.2027%203.93466H2.44243L2.61164%203.85596C2.77704%203.77767%202.92752%203.67113%203.05632%203.54114L5.2325%201.36497C5.5191%201.09137%205.56726%200.651239%205.34662%200.322132C5.08982%20-0.0285702%204.59735%20-0.104717%204.24663%200.152081C4.21829%200.172839%204.19136%200.195467%204.16605%200.219816L0.230832%204.15504C-0.0767059%204.46223%20-0.0769765%204.96055%200.230217%205.26809C0.230413%205.26829%200.230635%205.26851%200.230832%205.2687L4.16605%209.20393C4.47384%209.51085%204.97216%209.51016%205.27911%209.20238C5.30326%209.17815%205.32581%209.15237%205.34662%209.12522C5.56726%208.79611%205.5191%208.35598%205.2325%208.08239L3.06026%205.90228C2.94478%205.78668%202.81202%205.68975%202.66673%205.615L2.43062%205.50875H10.1594C10.5615%205.52368%2010.9142%205.24283%2010.9897%204.84764C11.0593%204.41857%2010.7679%204.01435%2010.3388%203.94475Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* 左向き矢印（SVGそのまま） */
.ts-dept__nav--prev::before {
	transform: translate(-50%, -50%);
}

/* 右向き矢印（180度回転） */
.ts-dept__nav--next::before {
	transform: translate(-50%, -50%) rotate(180deg);
}

.ts-dept__nav:disabled {
	opacity: 0.35;
	cursor: default;
}

.ts-dept__dots {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ts-dept__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 1px solid var(--tsujido-border);
	border-radius: 50%;
	background: var(--tsujido-white);
	cursor: pointer;
	transition:
		background 0.2s,
		border-color 0.2s;
}

.ts-dept__dot.is-active {
	background: var(--tsujido-border);
	border-color: var(--tsujido-border);
}

.ts-dept--02 .ts-dept__dot {
	background: rgba(255, 255, 255, 0.35);
	border-color: rgba(255, 255, 255, 0.6);
}

.ts-dept--02 .ts-dept__dot.is-active {
	background: var(--tsujido-white);
	border-color: var(--tsujido-white);
}

/* 診療科カード */
.ts-dept-card {
	position: relative;
	flex: 0 0 367px;
	max-width: 367px;
	box-sizing: border-box;
	scroll-snap-align: start;
	background: rgba(255, 255, 255, 0.55);
	border: 1px solid var(--tsujido-border);
	border-radius: 8px;
	padding: 32px 32px 17px;
	text-decoration: none;
	display: block;
	transition:
		box-shadow 0.25s,
		transform 0.25s;
}

.ts-dept--02 .ts-dept-card {
	background: rgba(255, 255, 255, 0.92);
}

.ts-dept-card:hover {
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
	transform: translateY(-2px);
}

.ts-dept-card__top {
	display: flex;
	align-items: center;
	gap: 20px;
}

.ts-dept-card__img {
	flex-shrink: 0;
	width: 86px;
	height: 86px;
	border-radius: 8px;
	overflow: hidden;
}

.ts-dept-card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ts-dept-card__name {
	font-size: 20px;
	font-weight: 700;
	color: var(--tsujido-text-primary);
	line-height: 1.4;
	margin: 0;
}

.ts-dept-card__text {
	border-top: 1px solid var(--tsujido-border);
	margin: 14px 0 0;
	padding: 14px 0 16px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--tsujido-text-primary);
}

.ts-dept-card__arrow {
	position: absolute;
	right: 16px;
	bottom: 14px;
	width: 21px;
	height: 21px;
	background: transparent;
}

/* ============================================================
   クイックアクセス2カード（初めての方へ / 19時以降）
   ============================================================ */
.ts-quick-access {
	padding: 24px 0 64px;
}

.ts-quick-access__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
}

.ts-quick-access__card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 24px;
	background: transparent;
	border: 1px solid var(--tsujido-border);
	border-radius: 8px;
	padding: 24px;
	text-decoration: none;
	color: var(--tsujido-text-primary);
	font-size: 20px;
	font-weight: 700;
	transition:
		box-shadow 0.25s,
		border-color 0.25s;
}

.ts-quick-access__card:hover {
	border-color: var(--tsujido-accent);
	box-shadow: 0 4px 16px rgba(93, 164, 214, 0.15);
}

.ts-quick-access__img {
	flex-shrink: 0;
	width: 77px;
	height: 77px;
	border-radius: 4px;
	overflow: hidden;
}

.ts-quick-access__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ts-quick-access__text {
	flex: 1;
}

.ts-quick-access__arrow {
	flex-shrink: 0;
}

/* ============================================================
   当院について — 2カラム（コンテンツカード + フォト）
   ============================================================ */
.ts-about {
	padding: 80px 0;
	overflow: hidden;
}

.ts-about__inner {
	position: relative;
	max-width: 1184px;
	margin: 0 auto;
	min-height: 600px;
	/* 子要素(.ts-about__box)の margin-top が相殺されないよう BFC を生成し、
	   ボックスを画像に対して下方向へオフセット（段違い配置）させる */
	display: flow-root;
}

.ts-about__photo {
	position: absolute;
	right: 0;
	top: 0;
	width: min(944px, 74%);
	height: 600px;
	overflow: hidden;
}

.ts-about__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ts-about__box {
	position: relative;
	z-index: 2;
	margin-top: 108px;
	margin-left: 60px;
	width: min(580px, 54%);
	background: var(--tsujido-white);
	padding: 40px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 30px;
}

/* 右下のマスコット（犬＋猫）を本文の背面に薄く配置 */
.ts-about__character {
	position: absolute;
	right: 28px;
	bottom: 24px;
	width: 130px;
	height: auto;
	opacity: 0.7;
	pointer-events: none;
	user-select: none;
	z-index: 0;
}

/* 本文・ボタンは常にキャラクターより前面へ */
.ts-about__box > :not(.ts-about__character) {
	position: relative;
	z-index: 1;
}

.ts-about__head {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.ts-about__en {
	display: flex;
	align-items: center;
	gap: 15px;
	font-family: var(--tsujido-font-en);
	font-size: clamp(2rem, 3.4vw, 2.375rem);
	font-weight: 400;
	color: var(--tsujido-accent);
	line-height: 1;
	letter-spacing: 0.01em;
	text-transform: none;
	margin: 0;
}

.ts-about__en-icon {
	flex-shrink: 0;
	width: 40px;
	height: auto;
}

.ts-about__sub {
	font-family: var(--tsujido-font-mincho);
	font-size: 16px;
	font-weight: 500;
	color: var(--tsujido-text-primary);
	line-height: 1.7;
	margin: 0;
}

.ts-about__body {
	display: flex;
	flex-direction: column;
}

.ts-about__body p {
	font-size: 16px;
	line-height: 1.7;
	margin: 0 !important;
}

@media (max-width: 768px) {
	.ts-about {
		padding: 0 0 48px;
	}
	.ts-about__inner {
		min-height: 0;
	}
	.ts-about__photo {
		position: relative;
		width: 100%;
		height: 240px;
	}
	.ts-about__box {
		margin: -40px 16px 0;
		width: auto;
		padding: 32px 24px;
	}
	.ts-about__character {
		width: 92px;
		right: 16px;
		bottom: 16px;
	}
}

/* ============================================================
   3カード（設備のご紹介 / スタッフ紹介 / アクセス情報）
   ============================================================ */
.ts-feature-cards__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	max-width: 1600px;
	margin-inline: auto;
}

.ts-feature-card {
	display: flex;
	flex-direction: column;
	background: var(--tsujido-white);
	text-decoration: none;
	color: var(--tsujido-text-primary);
}

.ts-feature-card__img {
	aspect-ratio: 427.67 / 553;
	overflow: hidden;
}

.ts-feature-card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: bottom;
	display: block;
	transition: transform 0.4s;
}

.ts-feature-card:hover .ts-feature-card__img img {
	transform: scale(1.04);
}

.ts-feature-card__body {
	position: relative;
	padding: 20px 24px 48px;
}

.ts-feature-card__title {
	margin: 0 0 9px;
	color: var(--tsujido-green);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.5;
}

.ts-feature-card__text {
	margin: 0;
	color: var(--tsujido-text-primary);
	font-size: 16px;
	line-height: 1.7;
}

/* カードの矢印は丸なしの水色シェブロン（Figma 217-1946） */
.ts-feature-card__arrow {
	position: absolute;
	right: 20px;
	bottom: 16px;
	background: transparent;
}

@media (max-width: 768px) {
	.ts-feature-cards__grid {
		grid-template-columns: 1fr;
		/* 設備/スタッフ/アクセス カードの写真に左右の余白を付与 */
		padding-inline: 16px;
		gap: 16px;
	}
	/* SPは横長のSP用画像（_sp / 390×200）を出し分けるため、枠も同比率にする */
	.ts-feature-card__img {
		aspect-ratio: 390 / 200;
	}
}

/* ============================================================
   当院について(page-about) — 共通パーツの見出し色を湘南カラーに統一
   ============================================================ */
#shonan-tsujido .bunin-p-about__facility h4 {
	color: var(--tsujido-accent) !important;
}

#shonan-tsujido .buninp-top__feature-text h4 span {
	color: var(--tsujido-accent);
}

/* ============================================================
   診療時間・アクセス — 2カラム（フルワイド）
   ============================================================ */
.ts-clinic {
	overflow: hidden;
}

.ts-clinic__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 560px;
}

.ts-clinic__photo {
	position: relative;
	overflow: hidden;
}

.ts-clinic__photo-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ts-clinic__panel {
	background: var(--tsujido-bg-light);
	display: flex;
	align-items: center;
}

.ts-clinic__panel-inner {
	padding: clamp(32px, 5vw, 64px);
	width: 100%;
	max-width: 500px;
	margin-right: auto;
	text-align: center;
}

.ts-clinic__logo {
	margin-bottom: 20px;
}

.ts-clinic__logo img {
	width: clamp(240px, 70%, 331px);
	height: auto;
	display: inline-block;
}

/* 「Clinic Schedule」: Marcellus Regular / 他のEN見出しと同一スペックに統一（旧: h2継承で faux-bold 化） */
.ts-clinic__title-en {
	font-family: var(--tsujido-font-en);
	font-weight: 400;
	font-size: clamp(2rem, 3.4vw, 2.375rem);
	color: var(--tsujido-accent);
	letter-spacing: 0.05em;
	line-height: 1.2;
}

/* 「診察時間」: デザイン準拠 Shippori Mincho SemiBold 16px / 本文色 */
.ts-clinic__title-ja {
	font-family: var(--tsujido-font-mincho);
	font-weight: 600;
	font-size: 16px;
	color: var(--tsujido-text-primary);
	margin-bottom: 12px;
}

.ts-clinic__badges {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 16px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}

/* 「全診療科」: 背景・枠線なしのプレーンテキスト */
.ts-clinic__badge {
	display: inline-block;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--tsujido-text-heading);
}

/* 「完全予約制」: 角丸なしの長方形・赤背景タグ */
.ts-clinic__badge--accent {
	font-weight: 700;
	padding: 5px 10px;
	background: var(--tsujido-red);
	color: var(--tsujido-white);
}

.ts-clinic__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	margin-bottom: 14px;
}

.ts-clinic__table th,
.ts-clinic__table td {
	border: 0;
	border-bottom: 1px solid var(--tsujido-border);
	padding: 9px 4px;
	text-align: center;
}

.ts-clinic__table thead th {
	background: transparent;
	color: var(--tsujido-text-primary);
	font-weight: 400;
	font-size: 14px;
}

.ts-clinic__time-label {
	text-align: left !important;
	font-size: 15px;
	font-weight: 400;
	color: var(--tsujido-accent);
	white-space: nowrap;
}

.ts-clinic__time-label span {
	margin: 0 3px;
}

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

.ts-clinic__row--night .ts-clinic__time-label,
.ts-clinic__row--night td:not(.ts-clinic__time-label) {
	color: var(--tsujido-navy);
	font-weight: 700;
}

.ts-clinic__schedule-note {
	font-size: 12px;
	color: var(--tsujido-text-primary);
	line-height: 1.8;
	margin-bottom: 20px;
	text-align: left;
}

.ts-clinic__access {
	border-top: 1px solid var(--tsujido-border);
	padding-top: 20px;
	text-align: left;
}

.ts-clinic__access-title {
	font-size: 16px;
	font-weight: 700;
	color: var(--tsujido-text-primary);
	margin: 0;
}

.ts-clinic__address {
	font-size: 16px;
	color: var(--tsujido-text-primary);
	line-height: 1.7;
	margin: 0;
}

.ts-clinic__map-link {
	display: inline-block;
	font-size: 15px;
	color: var(--tsujido-accent);
	text-decoration: underline;
	margin-bottom: 16px;
}

/* CTAボタン共通：矢印は「白い円＋緑シェブロン」画像（Figma 217-2087 準拠）。
   通常時は白背景に円が溶け込み緑シェブロンのみ、ホバー時は緑背景に白円が現れる */
.ts-pill-btn .ts-circle-arrow,
.ts-about__link .ts-circle-arrow,
.ts-info-news__more .ts-circle-arrow {
	background-color: transparent;
	background-image: url(../images/arrow-green.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 21px 21px;
}

/* Web予約（赤背景）の矢印は「白い円＋赤シェブロン」画像（Figma 337-2187 準拠）。
   赤背景上に白円が浮かび、その中に赤シェブロンが見える */
.ts-reservation__web-btn .ts-circle-arrow {
	background-color: transparent;
	background-image: url(../images/arrow-red.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 21px 21px;
}

/* ============================================================
   予約・お問い合わせ CTAバー
   ============================================================ */
.ts-reservation {
	padding: 40px 0;
}

.ts-reservation__inner {
	display: flex;
	gap: 30px;
	background: var(--tsujido-bg-pink);
}

.ts-reservation__method {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: var(--tsujido-red);
	padding: 13px 20px;
	flex-shrink: 0;
}

.ts-reservation__method-title {
	font-size: 22px;
	font-weight: 700;
	color: var(--tsujido-white);
	line-height: 1.5;
}

.ts-reservation__method-badge {
	border: 1px solid var(--tsujido-border-light);
	color: var(--tsujido-white);
	font-size: 16px;
	line-height: 1.5;
	padding: 3px 12px;
}

.ts-reservation__panel {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex: 1;
}

.ts-reservation__phone {
	min-width: 0;
}

.ts-reservation__tel {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	transition: opacity 0.2s;
}

.ts-reservation__tel:hover {
	opacity: 0.85;
}

.ts-reservation__tel-label {
	font-size: 18px;
	color: var(--tsujido-accent);
	font-weight: 700;
}

.ts-reservation__tel-num {
	font-size: clamp(1.6rem, 3vw, 2rem);
	font-weight: 700;
	color: var(--tsujido-accent);
	letter-spacing: 0.04em;
	text-decoration: underline;
}

.ts-reservation__note {
	font-size: 13px;
	color: var(--tsujido-text-heading);
	line-height: 1.7;
	margin: 8px 0 0;
}

.ts-reservation__note .sp-only {
	display: none;
}

.ts-reservation__web-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--tsujido-red);
	border: 1px solid var(--tsujido-red);
	color: var(--tsujido-white);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.7;
	padding: 5px 10px 5px 32px;
	border-radius: 100px;
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
	transition:
		opacity 0.2s,
		transform 0.2s;
}

.ts-reservation__web-btn:hover {
	opacity: 0.92;
	transform: translateY(-1px);
	color: var(--tsujido-white);
}

/* ============================================================
   コラム
   ============================================================ */
.ts-column {
	padding: 72px 0 56px;
	background: var(--tsujido-white);
}

.ts-column__head {
	display: flex;
	align-items: flex-end;
	gap: 20px;
	margin-bottom: 32px;
}

.ts-column__heading {
	display: flex;
	align-items: baseline;
	gap: 18px;
	margin: 0;
}

.ts-column__en {
	font-family: var(--tsujido-font-en);
	font-weight: 400;
	font-size: clamp(2rem, 3.4vw, 2.375rem);
	color: var(--tsujido-accent);
	line-height: 1;
}

.ts-column__ja {
	font-family: var(--tsujido-font-mincho);
	font-size: 16px;
	font-weight: 500;
	color: var(--tsujido-text-primary);
}

/* 「病気や予防の情報」の一覧リンク（ピル型ボタンを右寄せ配置） */
.ts-column__more-link {
	margin-left: auto;
	white-space: nowrap;
}

.ts-column__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}

.ts-column__card {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid #dbe4ef;
	background: var(--tsujido-white);
	padding: 20px 27px;
	text-decoration: none;
	color: var(--tsujido-text-heading);
	transition:
		border-color 0.2s,
		box-shadow 0.2s;
}

a.ts-column__card:hover {
	border-color: var(--tsujido-green);
	box-shadow: 0 6px 18px rgba(96, 170, 151, 0.12);
}

.ts-column__card-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 5px;
}

.ts-column__card-date {
	font-size: 14px;
	font-weight: 300;
	line-height: 1.7;
	color: var(--tsujido-text-heading);
}

.ts-column__card-tags {
	font-size: 11px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--tsujido-green);
}

.ts-column__card-title {
	font-size: 16px;
	font-weight: 300;
	line-height: 1.5;
	color: var(--tsujido-text-heading);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* カードの矢印は丸なしの緑シェブロン（Figma 217-2046） */
.ts-column__card-arrow {
	margin-top: auto;
	align-self: flex-end;
	padding-top: 10px;
	background: transparent;
}

.ts-column__note {
	font-size: 12px;
	color: var(--tsujido-text-muted);
	line-height: 1.8;
	margin: 24px 0 0;
}

/* ============================================================
   獣医師勤務表 (Veterinarian Schedule)
   ============================================================ */
.ts-vet-schedule {
	position: relative;
	overflow: hidden;
	background: var(--tsujido-bg-blue);
	padding: 64px 0;
}

.ts-vet-schedule__bg {
	position: absolute;
	top: 24px;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--tsujido-font-en);
	font-size: clamp(44px, 8vw, 120px);
	line-height: 1;
	white-space: nowrap;
	color: var(--tsujido-accent);
	opacity: 0.2;
	pointer-events: none;
}

.ts-vet-schedule__inner {
	position: relative;
	z-index: 1;
}

.ts-vet-schedule__ja {
	font-family: var(--tsujido-font-mincho);
	font-size: 26px;
	font-weight: 500;
	color: var(--tsujido-text-primary);
	text-align: center;
	margin: 0 0 24px;
}

.ts-vet-schedule .c-calendar-table th,
.ts-vet-schedule .c-calendar-table td {
	background: var(--tsujido-white);
}

/* ============================================================
   SNSセクション
   ============================================================ */
.ts-social {
	padding: 48px 0;
	background: var(--tsujido-white);
	border-top: 1px solid var(--tsujido-border);
}

.ts-social__links {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-bottom: 24px;
}

.ts-social__card {
	border-radius: 12px;
	overflow: hidden;
	text-decoration: none;
	display: block;
	transition: opacity 0.2s;
}

.ts-social__card:hover {
	opacity: 0.85;
}

.ts-social__card img {
	display: block;
	width: 100%;
	height: auto;
}

.ts-social__instagram {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 24px 0 16px;
}

.ts-social__instagram::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	border-top: 1px solid var(--tsujido-border);
}

.ts-social__instagram span {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 13px;
	padding: 0 20px;
	background: var(--tsujido-white);
	font-size: 16px;
	font-weight: 700;
	color: var(--tsujido-text-heading);
}

.ts-social__instagram img {
	width: 23px;
	height: 23px;
	display: block;
}

.ts-social__sns-links {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.ts-social__sns-btn {
	display: block;
	border-radius: 10px;
	overflow: hidden;
	text-decoration: none;
	transition: opacity 0.2s;
}

.ts-social__sns-btn:hover {
	opacity: 0.85;
}

.ts-social__sns-btn img {
	display: block;
	width: 100%;
	height: auto;
}

/* ============================================================
   採用情報バナー
   ============================================================ */
.ts-recruit__banner {
	display: flex;
	align-items: center;
	justify-content: center;
}

.ts-recruit__banner:hover {
	opacity: 0.9;
}

/* ============================================================
   交通アクセス
   ============================================================ */
.ts-access-map {
	overflow: hidden;
}

/* container と同じ幅に収め、2カラム（左:地図 / 右:院情報）で並べる */
.ts-access-map__inner {
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 10px;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	align-items: start;
}

/* 各カラムは縦積み。左右の高さは独立させ、意図しない余白を防ぐ */
.ts-access-map__col {
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

.ts-access-map__map {
	position: relative;
	min-height: 360px;
	border: 1px solid var(--tsujido-border-light);
	border-radius: 8px;
	overflow: hidden;
}

.ts-access-map__guidemap img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 8px;
}

.ts-access-map__map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.ts-access-map__photos {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

.ts-access-map__photos img {
	width: 100%;
	aspect-ratio: 279.5 / 184.9;
	object-fit: cover;
	border-radius: 8px;
	display: block;
}

.ts-access-map__head {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 64px 0 32px;
}

.ts-access-map__en {
	font-family: var(--tsujido-font-en);
	font-size: clamp(2rem, 3.4vw, 2.375rem);
	color: var(--tsujido-accent);
	line-height: 1;
	margin: 0 0 5px;
}

.ts-access-map__ja {
	font-family: var(--tsujido-font-mincho);
	font-size: 26px;
	font-weight: 500;
	color: var(--tsujido-text-primary);
	margin: 0;
}

/* 見出しの右隣に並べるマスコット（猫を乗せた疾走する犬） */
.ts-access-map__character {
	width: 150px;
	height: auto;
	opacity: 0.4;
	pointer-events: none;
	user-select: none;
}

.ts-access-map__clinic {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.ts-access-map__name {
	font-size: 20px;
	font-weight: 700;
	color: var(--tsujido-text-primary);
	line-height: 1.6;
	margin: 0 0 8px;
}

.ts-access-map__address {
	font-size: 16px;
	color: var(--tsujido-text-primary);
	line-height: 1.7;
	margin: 0 0 10px;
}

.ts-access-map__tel {
	display: inline-block;
	font-size: 25px;
	font-weight: 700;
	color: var(--tsujido-accent);
	text-decoration: underline;
	letter-spacing: 0.04em;
	margin-bottom: 14px;
}

.ts-access-map__map-btn {
	display: flex;
}

.ts-access-map__methods {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.ts-access-map__method {
	border: 1px solid var(--tsujido-border);
	padding: 30px;
}

.ts-access-map__method-title {
	font-size: 20px;
	font-weight: 700;
	color: var(--tsujido-text-primary);
	margin-bottom: 10px;
}

.ts-access-map__method p {
	font-size: 16px;
	color: var(--tsujido-text-primary);
	line-height: 1.7;
	margin: 0;
}

/* ============================================================
   ペット保険・クレジットカードロゴ
   ============================================================ */
.ts-payment {
	padding-top: 60px;
	padding-bottom: 60px;
	background: var(--tsujido-white);
}

.ts-payment__logos {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
}

.ts-payment__logos img {
	height: 32px;
	width: auto;
	object-fit: contain;
}

/* ============================================================
   レスポンシブ
   ============================================================ */
@media screen and (max-width: 999px) {
	/* FV — SPデザイン準拠: 画像2枚を縦並びにし、コピーは下部に重ねる */
	.ts-fv__split {
		grid-template-columns: 1fr;
		height: auto;
	}

	.ts-fv__split-left,
	.ts-fv__split-right {
		display: block;
		aspect-ratio: 430 / 325;
	}

	/* SPは上下を入れ替える（診察の様子を上、患者様とペットを下に） */
	.ts-fv__split-left {
		order: 2;
	}

	.ts-fv__split-right {
		order: 1;
	}

	.ts-fv__copy-overlay {
		align-items: flex-end;
		background: linear-gradient(to bottom, transparent 30%, rgba(6, 14, 31, 0.65) 65%, rgba(6, 14, 31, 0.95) 100%);
	}

	.ts-fv__copy-inner {
		padding: 0 24px 30px;
	}

	/* SPは背景画像によって白文字が沈むため、影でコントラストを補強 */
	.ts-fv__copy-main,
	.ts-fv__copy-en {
		text-shadow: 0 1px 6px rgba(6, 14, 31, 0.6);
	}

	/* SPデザインにはラベル・バッジが無いため非表示 */
	.ts-fv__copy-label,
	.ts-fv__copy-badges {
		display: none;
	}

	.ts-fv__copy-main {
		font-size: clamp(24px, 6.5vw, 32px);
		margin-bottom: 10px;
	}

	.ts-fv__copy-en {
		margin-bottom: 0;
	}

	/* クイックナビゲーション */
	.ts-quick-nav__panels {
		flex-direction: column;
		padding: 24px 20px;
		gap: 16px;
	}

	.ts-quick-nav__panel {
		width: 100%;
		box-sizing: border-box;
	}

	/* お知らせ — Figma SP準拠: 見出しは縦積み(左)、ボタンはカード下・中央 */
	.ts-info-news .container {
		display: flex;
		flex-direction: column;
	}

	/* head を contents 化して heading / more / cards を兄弟として並べ替える */
	.ts-info-news__head {
		display: contents;
	}

	.ts-info-news__heading {
		order: 1;
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
		margin-bottom: 24px;
	}

	.ts-info-news__en {
		font-size: clamp(2rem, 8vw, 3rem);
	}

	/* Figma SP: カードは横スクロール（複数時はカルーセル、単体時は全幅） */
	.ts-info-news__cards {
		order: 2;
		display: flex;
		gap: 16px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		/* 端のカードが見切れて見えるよう左右に余白 */
		scroll-padding: 0 4px;
	}

	.ts-info-news__card {
		flex: 0 0 82%;
		scroll-snap-align: start;
	}

	/* お知らせが1件のみのときは全幅で表示 */
	.ts-info-news__card:only-child {
		flex-basis: 100%;
	}

	.ts-info-news__more {
		order: 3;
		margin: 28px auto 0;
	}

	/* Medical Service (departments) */
	.ts-dept__cards {
		gap: 16px;
	}

	.ts-dept-card {
		flex-basis: 78vw;
		max-width: 78vw;
	}

	.ts-dept__num {
		font-size: clamp(2rem, 8vw, 3rem);
	}

	/* Figma SP: 「一覧」ボタンをカルーセル下・中央へ移動（head を contents 化して並べ替え） */
	.ts-dept__inner {
		display: flex;
		flex-direction: column;
	}

	.ts-dept__head {
		display: contents;
	}

	.ts-dept__heading {
		order: 1;
		margin-bottom: 12px;
	}

	.ts-dept__desc {
		order: 2;
	}

	.ts-dept__carousel {
		order: 3;
	}

	.ts-dept__head .ts-pill-btn {
		order: 4;
		align-self: center;
		margin-top: 28px;
	}

	.ts-quick-access__grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	/* SNS */
	.ts-social__links {
		grid-template-columns: 1fr;
	}

	.ts-social__sns-links {
		grid-template-columns: 1fr;
	}

	/* アクセスマップ — Figma SP準拠: 院情報→アクセス方法→地図→案内図 の順 */
	.ts-access-map__inner {
		grid-template-columns: 1fr;
	}

	/* 院情報(住所・TEL・方法)を先に、地図・案内図を後ろに並べ替え */
	.ts-access-map__col--info {
		order: 1;
	}

	.ts-access-map__col--maps {
		order: 2;
	}

	/* Figma SPには外観写真が無いため非表示 */
	.ts-access-map__photos {
		display: none;
	}

	/* Figma SP: 院情報(名称・住所・TEL・ボタン)は中央寄せ */
	.ts-access-map__clinic {
		align-items: center;
		text-align: center;
	}

	.ts-access-map__map-btn {
		justify-content: center;
	}

	/* Figma SP: 見出しは中央寄せ・縦積み、「Access」は大きく薄く、キャラは右端から覗く */
	.ts-access-map__head {
		position: relative;
		flex-direction: column;
		align-items: center;
		gap: 0;
		text-align: center;
	}

	.ts-access-map__heading {
		width: 100%;
	}

	.ts-access-map__en {
		font-size: clamp(4rem, 24vw, 5.875rem);
		opacity: 0.2;
		white-space: nowrap;
		margin: 0;
	}

	.ts-access-map__character {
		position: absolute;
		right: 0;
		bottom: 0;
		width: 96px;
	}

	.ts-access-map__map {
		min-height: 280px;
	}

	/* 当院について */
	.ts-about__inner {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	/* 診療時間 */
	.ts-clinic__inner {
		grid-template-columns: 1fr;
	}

	.ts-clinic__photo {
		height: 240px;
	}

	/* 予約CTA — Figma SP準拠: 上部に全幅の赤バー(予約方法/電話・WEB 横並び) */
	.ts-reservation__inner {
		flex-direction: column;
		text-align: center;
		padding: 0 0 28px;
		gap: 0;
		overflow: hidden;
		border: 1px solid var(--tsujido-red);
	}

	.ts-reservation__method {
		flex-direction: row;
		width: 100%;
		box-sizing: border-box;
		justify-content: center;
		align-items: center;
		gap: 16px;
		padding: 14px 20px;
		margin-bottom: 24px;
	}

	.ts-reservation__phone {
		padding: 0 20px;
	}

	.ts-reservation__tel {
		justify-content: center;
	}

	.ts-reservation__web-btn {
		margin: 24px 20px 0;
		justify-content: center;
	}

	/* コラム — Figma SP準拠: 見出しは縦積み(左)、ボタンはカード下・中央 */
	.ts-column .container {
		display: flex;
		flex-direction: column;
	}

	.ts-column__head {
		display: contents;
	}

	.ts-column__heading {
		order: 1;
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
		margin-bottom: 24px;
	}

	/* Figma SP: カードは横スクロール（複数時はカルーセル、単体時は全幅） */
	.ts-column__grid {
		order: 2;
		display: flex;
		gap: 16px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding: 0 4px;
	}

	.ts-column__card {
		flex: 0 0 82%;
		scroll-snap-align: start;
	}

	.ts-column__card:only-child {
		flex-basis: 100%;
	}

	.ts-column__more-link {
		order: 3;
		margin: 28px auto 0;
	}

	.ts-column__note {
		order: 4;
	}
}

/* ============================================================
   夜間診療時間 強調ブロック（page-night-time）
   ============================================================ */
.ts-nighthours {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, var(--tsujido-navy) 0%, var(--tsujido-navy-dark) 100%);
	border-radius: 14px;
	padding: 38px 32px 34px;
	text-align: center;
	color: var(--tsujido-white);
	box-shadow: 0 12px 30px rgba(6, 14, 31, 0.2);
}

/* 装飾：星 */
.ts-nighthours::before {
	content: '';
	position: absolute;
	top: 20px;
	left: 32px;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--tsujido-white);
	box-shadow:
		26px 16px 0 0 rgba(255, 255, 255, 0.7),
		58px 4px 0 -1px rgba(255, 255, 255, 0.5),
		12px 44px 0 0 rgba(255, 255, 255, 0.35);
	opacity: 0.8;
}

/* 装飾：月 */
.ts-nighthours__moon {
	position: absolute;
	top: 22px;
	right: 26px;
	width: 44px;
	height: 44px;
	opacity: 0.95;
}

.ts-nighthours__moon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.ts-nighthours__label {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	margin-bottom: 14px;
}

.ts-nighthours__en {
	font-family: var(--tsujido-font-en);
	font-size: 13px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--tsujido-accent);
}

.ts-nighthours__ja {
	font-family: var(--tsujido-font-mincho);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.08em;
}

.ts-nighthours__time {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(10px, 3vw, 24px);
	font-family: var(--tsujido-font-en);
	line-height: 1;
}

.ts-nighthours__num {
	font-size: clamp(2.6rem, 9vw, 4.2rem);
	font-weight: 400;
	letter-spacing: 0.02em;
}

.ts-nighthours__dash {
	font-size: clamp(1.6rem, 5vw, 2.4rem);
	color: var(--tsujido-accent);
}

.ts-nighthours .ts-nighthours__note {
	display: inline-block;
	margin-top: 18px;
	padding: 6px 22px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 24px;
	font-size: 14px;
	letter-spacing: 0.04em;
	color: var(--tsujido-white);
}

.ts-nighthours .ts-nighthours__note strong {
	color: var(--tsujido-accent);
	font-size: 17px;
	margin-left: 3px;
}

.ts-nighthours__desc {
	margin-top: 16px;
}

@media screen and (max-width: 767px) {
	.ts-nighthours {
		padding: 32px 18px 28px;
	}

	.ts-nighthours__moon {
		width: 36px;
		height: 36px;
		top: 16px;
		right: 16px;
	}
}

/* ============================================================
   トップページの円形矢印は画像に統一（Figma 217-1946 青 / 217-2046 緑）
   画像は「白い円＋色付きシェブロン」。白背景では円が透けてシェブロンのみ、
   色付き背景（quick-access など）では白い円が現れる。
   ※ 各カードの既存ルール（background:transparent ショートハンド）より後に
     置き、background-image が打ち消されないようにしている。
   ============================================================ */
.ts-info-news__card-arrow,
.ts-feature-card__arrow,
.ts-dept-card__arrow,
.ts-quick-access__arrow {
	background-color: transparent;
	background-image: url(../images/arrow-blue.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 21px 21px;
}

.ts-column__card-arrow {
	background-color: transparent;
	background-image: url(../images/arrow-green.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 21px 21px;
}

/* FV 開院予定の告知（バッジを置き換え・目立つように） */
.ts-fv__opening {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	margin-top: 4px;
	padding: 10px 22px;
	background: var(--tsujido-accent, #1a9c8e);
	border-radius: 8px;
	color: var(--tsujido-white, #fff);
	box-shadow: 0 6px 18px rgba(6, 14, 31, 0.25);
	position: relative;
	z-index: 10;
}

.ts-fv__opening-date {
	font-family: var(--tsujido-font-mincho);
	font-size: clamp(20px, 3vw, 32px);
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1;
}

.ts-fv__opening-text {
	font-family: var(--tsujido-font-mincho);
	font-size: clamp(20px, 3vw, 32px);
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1;
}

/* 写真のトーンをサイトに合わせて柔らかく（白っぽく・コントラスト緩和） */
.ts-tone-soft {
	position: relative;
}

.ts-tone-soft > img {
	filter: contrast(0.92) brightness(1.05) saturate(0.95);
}

.ts-tone-soft::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.16);
	pointer-events: none;
	z-index: 1;
}

/* FVのOPE（手術）写真はコピーの可読性確保のため暗めに。
   白コピーの可読性は主に .ts-fv__copy-overlay の左グラデが担保している。 */
.ts-fv__split--ope > img {
	filter: brightness(0.94) contrast(1) saturate(0.94);
}

.ts-fv__split--ope.ts-tone-soft::after {
	background: rgba(6, 14, 31, 0.1);
}

/* 採用バナー: デザイン(Group 128)準拠。高さを揃える */
.ts-recruit__banner img {
	height: 110px;
}

/* ---- PC（デザイン幅・1000px〜）のみ ---- */
@media (min-width: 1000px) {
	/* Web予約ボタンを右端へ寄せ、パネル右側にできていた余白を解消 */
	.ts-reservation__inner {
		padding-right: 40px;
	}
	.ts-reservation__web-btn {
		margin-left: auto;
	}
}

/* ---- SP（〜999px）: 既存SP調整と同じブレークポイント ---- */
@media (max-width: 999px) {
	/* 予約注記（※診療時間外…）は左寄せ */

	.ts-reservation__panel {
		flex-direction: column;
		align-items: center;
		gap: 8px;
	}

	.ts-reservation__note {
		text-align: left;
	}

	.ts-reservation__note .sp-only {
		display: inline;
	}

	/* 診療科の背景透かし(General/Specialized/Preventive Care)を画面幅内へ収める */
	.ts-dept__bg {
		font-size: clamp(40px, 13vw, 60px);
	}

	/* 獣医師勤務表の背景透かしはデザイン同様2行で折り返し（中央） */
	.ts-vet-schedule__bg {
		white-space: normal;
		width: 92%;
		text-align: center;
		line-height: 1.05;
		font-size: clamp(40px, 12vw, 64px);
	}
}