@charset "UTF-8";
/* ============================================================
   木とベージュを基調にしたテーマ

   style.css の "後" に読み込む上書き専用ファイル。
   style.css には一切手を加えていないため、各HTMLからこの1行
       <link rel="stylesheet" href="css/theme-wood.css">
   を外せば、元のデザインに完全に戻ります。

   ・文言は変更していません。追加した要素の文字は、すべて
     ページ内に元からある表記をそのまま使っています。
     （欧文の小ラベル Feature / Access などは装飾として追加）
   ・2026年9月の改修で、クリニック名は画像（アウトライン化されたSVG）を
     やめて実テキストにした。書体をテーマごとに差し替えるため。
   ・写真はクライアント提供の実院内写真に差し替えている。
     さらに CSS の --photo でトーンを揃えている。
   ============================================================ */

:root {
	--gr: #7A5236;          /* 文字・罫線・塗りボタン用の濃い茶
	                           （地に対して6.52:1。小さな文字に使えるのはこちら） */
	--gr-b: #A87B4E;        /* ブランドの木の色。●印など面と印にだけ使う（3.59:1） */
	--gr-d: #5A3B26;        /* さらに濃い色（ホバー。9.64:1） */
	--ac: #BC6438;          /* 差し色：テラコッタ。★や罫線など「印」に使う（4.01:1） */
	--ac-t: #944E2B;        /* 差し色の文字用。欧文ラベルなど読ませる文字はこちら（5.95:1） */
	--pale: #F7F1E8;        /* 淡い面 */
	--hair: #E7DAC7;        /* 罫線 */
	--bg: #FCFAF5;          /* 地 */
	--ink: #332C25;         /* 本文（13.18:1） */
	--sub: #736A5E;         /* 補助テキスト（5.09:1） */
	--line-green: #3EA337;  /* LINE公式カラー（変更なし） */

	/* 半透明にして使う色は rgba() に数値で埋め込む必要があるため、
	   RGB の三つ組も変数で持つ。上の16進値と必ず同じ色にすること。 */
	--bg-rgb:  252, 250, 245;   /* = --bg  ヒーローと帯のグラデーション */
	--gr-rgb:  122,  82,  54;   /* = --gr  スクロールバーの溝 */
	--ink-rgb:  51,  44,  37;   /* = --ink ヘッダーの影 */

	--bg-2: #F8F4EC;        /* 地のグラデーション終端。--bg よりわずかに濃い */
	--pale-2: #FDFBF7;      /* 診療時間表 日・祝列の地 */
	--sub-2: #756C60;       /* 同 文字（下地に対して4.5:1を満たす濃さ） */

	--fd: "Zen Old Mincho", serif;
	--fb: "Noto Sans JP", sans-serif;
	--fl: "Cormorant Garamond", serif;
	/* クリニック名（ロゴタイプ）の書体。
	   字送りは em を付けずに数値で持つ。文字サイズの計算に使うため。 */
	--f-logo: "Klee One", cursive;
	--logo-weight: 600;
	--logo-ls-num: 0.045;
	--logo-chars: 10;       /* 「ひろき歯科クリニック」の文字数 */
	--logo-fit: 0.99;       /* 収まりの微調整。1 でコンテナ幅ちょうど */
	--logo-color: var(--gr);
	/* 院内写真は寒色（水色の壁・青緑のチェア・青い床）が多く、
	   そのままだと木とベージュの地色とぶつかる。彩度を落として
	   セピアを軽く乗せ、暖色側へ寄せて全体のトーンを揃えている。
	   これ以上強めると院長の顔色まで褪せるので上限に近い。 */
	--photo: saturate(.72) contrast(1.04) brightness(1.07) sepia(.28);
}

/* ========== ベース ========== */

body {
	background: var(--bg);
	color: var(--ink);
	font-family: var(--fb);
	line-height: 1.95;
	letter-spacing: 0.06em;
}

/* ========== ロゴ（クリニック名） ==========
   元は img/logo.svg（文字がアウトライン化されたパス）だったため、書体を
   変えようがなかった。2026年9月に実テキストへ置き換えている。
   読み上げと検索にも効く。logo.svg はどこからも参照していない。

   大きさは「文字数ぶんがコンテナ幅にちょうど収まる」よう計算で出すので、
   ヘッダー・メニュー・アクセス・フッターの4箇所を1つの指定で賄える。
   日本語は全角＝1em 幅なのでこの計算が成り立つ（実測で確認済み）。 */

.header__logo,
.g-nav__logo,
.top-access__logo,
.footer__logo {
	container-type: inline-size;
}

.logotype {
	/* block にすると幅が親いっぱいに決まってしまい、下の負の margin-right が
	   「箱を広げる」方向に働いて親から数px はみ出す（文字自体は溢れていない）。
	   内容で幅が決まる inline-block にして、余白を詰める意図どおりにする。 */
	display: inline-block;
	vertical-align: top;
	font-family: var(--f-logo);
	font-weight: var(--logo-weight);
	letter-spacing: calc(var(--logo-ls-num) * 1em);
	color: var(--logo-color);
	line-height: 1.12;
	white-space: nowrap;
	/* 実際に描く幅は「10文字 + 字送り9つぶん」。最後の1つは下の
	   margin-right で打ち消すので、分母は 10ls ではなく 9ls。
	   （文字数は「ひろき歯科クリニック」= 10。名前を変えたらここも直す） */
	font-size: calc(100cqw * var(--logo-fit)
	                / (var(--logo-chars) + (var(--logo-chars) - 1) * var(--logo-ls-num)));
	/* 最後の1文字ぶんの字送りが右の余白になるので詰める */
	margin-right: calc(var(--logo-ls-num) * -1em);
}

/* ========== ヘッダー ========== */

/* js/script.js が jQuery の .height()（＝コンテンツ高さ）で main の
   margin-top を決めているため、border を足すと高さが1pxずれる。
   線は内側の影で描いて、要素の高さを変えないようにする。 */
.header {
	background: #fff;
	-webkit-box-shadow: inset 0 -1px 0 var(--hair);
	        box-shadow: inset 0 -1px 0 var(--hair);
}

.header__tel {
	font-family: var(--fd);
	color: var(--gr);
	font-weight: 500;
	font-size: 0.8125rem;
	letter-spacing: 0.24em;
}

.header__tel .number {
	font-size: 1.375rem;
	letter-spacing: 0.06em;
}

.header__nav-item a {
	color: var(--ink);
	font-weight: 400;
	font-size: 0.875rem;
	letter-spacing: 0.16em;
}

@media (any-hover: hover) {
	.header__nav-item a:hover {
		color: var(--gr);
		opacity: 1;
	}
}

.header__cta {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	    -ms-flex-align: center;
	        align-items: center;
	padding-right: 30px;
}

.header__cta-btn {
	width: auto;
	height: auto;
	background: none;
	border: 1px solid var(--gr);
	padding: 14px 26px;
	color: var(--gr);
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.2em;
}

@media screen and (max-width: 1024px) {
	.header__cta-btn {
		width: auto;
		padding: 10px 16px;
		font-size: 0.8125rem;
		letter-spacing: 0.1em;
	}
}

@media (any-hover: hover) {
	.header__cta-btn:hover {
		background: var(--gr);
		color: #fff;
		opacity: 1;
	}
}

.header__cta-btn .right::before {
	content: "・";
}

/* SPのメニューボタン：塗りをやめて細い線に */
.menu-btn {
	background: none;
	border-left: 1px solid var(--hair);
}

.menu-btn::after {
	content: "menu";
	color: var(--sub);
	font-size: 0.6875rem;
	letter-spacing: 0.2em;
}

.menu-btn span {
	width: 28px;
	height: 1px;
	background-color: var(--gr);
}

/* ========== グローバルナビ（SP） ========== */

.g-nav {
	background: var(--bg);
}

.g-nav__item a,
.g-nav__address,
.g-nav__department,
.g-nav__tel,
.g-nav__tel a {
	color: var(--ink);
	letter-spacing: 0.1em;
}

.g-nav__tel a {
	font-family: var(--fd);
	color: var(--gr);
}

.g-nav-btn {
	border-radius: 0;
	border-color: var(--line-green);
}

/* ========== メインビジュアル ==========
   写真を ::before に移し、診療時間と情報の帯を
   写真の下の行に並べる（HTMLの順序は変えていない）。 */

.main-visual {
	aspect-ratio: auto;
	background: none;
	display: grid;
	grid-template-rows: auto auto auto;
	position: relative;
}

.main-visual::before {
	content: "";
	grid-area: 1/1;
	width: 100%;
	aspect-ratio: 1366/670;
	background:
		linear-gradient(90deg, rgba(var(--bg-rgb), .97) 0%, rgba(var(--bg-rgb), .88) 22%, rgba(var(--bg-rgb), 0) 42%),
		url(../img/main-visual.jpg) center bottom/cover no-repeat;
}

@media screen and (max-width: 780px) {
	.main-visual::before {
		aspect-ratio: 600/748;
		background:
			linear-gradient(180deg, rgba(var(--bg-rgb), 0) 24%, rgba(var(--bg-rgb), .9) 58%, var(--bg-2) 78%),
			url(../img/main-visual-sp.jpg) center/cover no-repeat;
	}
}

/* キャッチコピー：PCは縦組み */
.main-visual__heading {
	grid-area: 1/1;
	position: relative;
	z-index: 2;
	-webkit-writing-mode: vertical-rl;
	    -ms-writing-mode: tb-rl;
	        writing-mode: vertical-rl;
	font-family: var(--fd);
	font-weight: 400;
	font-size: clamp(1.5rem, 1.15rem + 1.15vw, 2.125rem);
	line-height: 2.35;
	letter-spacing: 0.3em;
	color: var(--gr);
	top: auto;
	left: auto;
	-webkit-transform: none;
	        transform: none;
	-webkit-align-self: center;
	    -ms-flex-item-align: center;
	        align-self: center;
	justify-self: start;
	margin: 3% 0 3% 4.5%;
	padding-left: 30px;
	border-left: 1px solid var(--ac);
	/* 縦組みは1列の長さと確保できる高さが近く、書体の読み込み前後や
	   環境差で「に、」だけ次の列にこぼれることがある。折り返しを禁止して
	   必ず3列に固定する（高さは十分に余裕がある）。 */
	white-space: nowrap;
}

/* PCでも3行に折る（md-brはSP用の改行だが、縦組みでは3列にしたい） */
.main-visual__heading .md-br {
	display: block;
}

/* SPは横組みに戻し、写真の下端に置く */
@media screen and (max-width: 780px) {
	.main-visual__heading {
		-webkit-writing-mode: horizontal-tb;
		    -ms-writing-mode: lr-tb;
		        writing-mode: horizontal-tb;
		-webkit-align-self: end;
		    -ms-flex-item-align: end;
		        align-self: end;
		justify-self: stretch;
		text-align: left;
		font-size: clamp(1.375rem, 1.05rem + 1.4vw, 1.75rem);
		line-height: 2.1;
		letter-spacing: 0.18em;
		margin: 0;
		padding: 0 22px 28px;
		border-left: 0;
		border-top: 0;
	}

	.main-visual__heading::before {
		content: "";
		display: block;
		width: 34px;
		height: 1px;
		background: var(--ac);
		margin-bottom: 16px;
	}
}

/* 情報の帯（診療科目・住所・アクセス） */
.mv-info {
	grid-area: 2/1;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	background: #fff;
	border-top: 1px solid var(--hair);
	border-bottom: 1px solid var(--hair);
}

.mv-info__item {
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	    -ms-flex: 1;
	        flex: 1;
	margin: 0;
	padding: 20px 30px;
	border-right: 1px solid var(--hair);
	font-size: 0.875rem;
	letter-spacing: 0.06em;
}

.mv-info__item:last-child {
	border-right: 0;
}

.mv-info__item dt {
	font-size: 0.75rem;
	letter-spacing: 0.24em;
	color: var(--ac-t);
	margin-bottom: 4px;
}

@media screen and (max-width: 780px) {
	.mv-info {
		display: block;
	}

	.mv-info__item {
		border-right: 0;
		border-bottom: 1px solid var(--hair);
		padding: 14px 22px;
		font-size: 0.8125rem;
	}

	.mv-info__item:last-child {
		border-bottom: 0;
	}
}

/* 診療時間の帯 */
.main-visual__office-hours {
	grid-area: 3/1;
	position: static;
	width: auto;
	background: var(--pale);
	border-radius: 0;
	padding: 34px 4.5% 38px;
	border-bottom: 1px solid var(--hair);
}

@media screen and (max-width: 1024px) {
	.main-visual__office-hours {
		width: auto;
		padding: 30px 22px 32px;
	}
}

@media screen and (max-width: 780px) {
	.main-visual__office-hours {
		width: auto;
		padding: 26px 18px 28px;
		bottom: auto;
	}
}

/* ========== 診療時間表 ==========
   極細の罫線で組み直し、曜日7列を等幅に固定する。 */

.office-hours {
	width: 100%;
	background: #fff;
	border: 1px solid var(--hair);
	border-radius: 0;
	overflow: hidden;
}

.office-hours__header,
.office-hours__grid {
	grid-template-columns: 22% repeat(7, 11.142%);
	font-size: inherit;
	font-weight: 400;
}

.office-hours__header {
	border-bottom: 1px solid var(--gr);
}

/* セルの中身は grid で上下左右とも中央に置く。
   元CSSは line-height:1 のブロックのまま上端に置いていたため、
   文字サイズの違うセル（時刻15px／●11px／★14px／−12px）が
   それぞれ違う高さに並び、●が9〜10px浮いて見えていた。 */
.office-hours__item {
	color: var(--ink);
	font-weight: 400;
	font-size: 0.875rem;
	letter-spacing: 0.02em;
	padding: 19px 2px;
	display: grid;
	place-content: center;
	text-align: center;
	border-right: 1px solid var(--hair);
	-webkit-font-feature-settings: "tnum";
	        font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

/* 曜日の各セルは、元CSSが :nth-child() 付きで緑（#00A58C）の縦罫線を
   当てている。詳細度が上の `.office-hours__item` より高いので、同じ形の
   セレクタで色だけ上書きしないと旧テーマの緑が残る。
   （緑テーマのときは色が一致していて気づけなかった箇所） */
.office-hours__item:nth-child(2),
.office-hours__item:nth-child(3),
.office-hours__item:nth-child(4),
.office-hours__item:nth-child(5),
.office-hours__item:nth-child(6),
.office-hours__item:nth-child(7) {
	border-right-color: var(--hair);
}

.office-hours__item:nth-child(8) {
	border-right: 0;
	font-size: 0.75rem;
	letter-spacing: 0;
}

.office-hours__item.large {
	font-size: 0.8125rem;
	color: var(--gr);
	letter-spacing: 0.12em;
}

/* 1列目（時間）は中央揃え・明朝。左揃えだと表の中で浮いて見えるため */
.office-hours__item:nth-child(1) {
	text-align: center;
	padding-left: 6px;
	padding-right: 6px;
	border-right: 1px solid var(--hair);
}

/* 元CSSは1列目だけ左右非対称の padding を当てている。
     アクセス欄 : padding: 10px 14px 12px 6px  →  右が8px多い
     メニュー内 : padding: 10px 12px 12px 0    →  右が12px多い
   詳細度が上の1行より高いため、text-align:center にしても時刻が左へずれる。
   同じ詳細度で上書きし、上下左右とも他のセルと揃える。 */
.top-access__office-hours .office-hours__item:nth-child(1) {
	padding: 19px 6px;
}

.g-nav__office-hours .office-hours__item:nth-child(1) {
	padding: 11px 6px;
}

.office-hours__grid .office-hours__item:nth-child(1) {
	font-family: var(--fd);
	color: var(--gr);
	font-size: 0.9375rem;
	letter-spacing: 0.06em;
}

.office-hours__item.blue {
	color: var(--gr-b);
	font-size: 0.6875rem;
}

.office-hours__grid.am {
	border-bottom: 1px solid var(--hair);
}

/* 日・祝の列を薄くして休診を分かりやすく */
.office-hours__header .office-hours__item:nth-child(8) {
	background: var(--pale-2);
	color: var(--sub);
}

.office-hours__grid .office-hours__item:nth-child(8) {
	background: var(--pale-2);
	/* 以前の #A7B2BB は下地に対して2.1:1しかなく、休診を示す「−」が
	   読み取れなかった。薄さを保ちつつ基準（4.5:1）を満たす濃さにする。 */
	color: var(--sub-2);
}

/* 土曜午後の★は注記と同じ色に */
.office-hours__grid.pm .office-hours__item:nth-child(7) {
	color: var(--ac);
	font-size: 0.875rem;
}

.office-hours__text {
	margin-top: 12px;
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--sub);
	letter-spacing: 0.08em;
}

.office-hours__text .star {
	color: var(--ac);
	margin-right: 6px;
}

@media screen and (max-width: 599px) {
	.office-hours__item {
		font-size: 0.6875rem;
		padding: 11px 1px;
		letter-spacing: 0.02em;
	}

	.office-hours__header,
	.office-hours__grid {
		grid-template-columns: 24% repeat(7, 10.857%);
	}

	.office-hours__item {
		padding: 14px 1px;
	}

	.office-hours__item:nth-child(1) {
		padding-left: 4px;
		padding-right: 4px;
	}

	/* 元CSSは599px以下でも1列目を padding: 6px 4px 8px 0（左0/右4px）に
	   していて左へずれる。詳細度を合わせて対称に戻す。 */
	.top-access__office-hours .office-hours__item:nth-child(1) {
		padding: 14px 4px;
	}

	.g-nav__office-hours .office-hours__item:nth-child(1) {
		padding: 11px 4px;
	}

	.office-hours__grid .office-hours__item:nth-child(1) {
		font-size: 0.6875rem;
		letter-spacing: 0;
	}

	.office-hours__item.large {
		font-size: 0.6875rem;
	}

	/* 「日・祝」は3文字あるので、この列だけ字を詰める */
	.office-hours__item:nth-child(8) {
		font-size: 0.625rem;
		letter-spacing: -0.02em;
	}
}

/* ========== 見出し ==========
   欧文の小ラベル＋和文＋右へ伸びる罫線。 */

.section-title,
.contact-title {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: baseline;
	-webkit-align-items: baseline;
	    -ms-flex-align: baseline;
	        align-items: baseline;
	gap: 22px;
	font-family: var(--fd);
	font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.625rem);
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: 0.22em;
	color: var(--gr);
	text-align: left;
}

.section-title::before,
.contact-title::before {
	font-family: var(--fl);
	font-style: italic;
	font-weight: 400;
	font-size: 0.9375rem;
	letter-spacing: 0.3em;
	color: var(--ac-t);
	-webkit-box-flex: 0;
	-webkit-flex: 0 0 auto;
	    -ms-flex: 0 0 auto;
	        flex: 0 0 auto;
	white-space: nowrap;
}

.section-title::after,
.contact-title::after {
	content: "";
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	    -ms-flex: 1;
	        flex: 1;
	height: 1px;
	background: var(--hair);
	width: auto;
	position: static;
	-webkit-transform: none;
	        transform: none;
	margin: 0;
}

.top-feature__title.section-title::before { content: "Feature"; }
.top-access__title.section-title::before { content: "Access"; }
.about-department__title.section-title::before { content: "Department"; }
.about-doctor__title.section-title::before { content: "Doctor"; }
.about-policy__title.section-title::before { content: "Policy"; }
.about-point__title.section-title::before { content: "Treatment"; }
.contact-tel__title.contact-title::before { content: "Tel"; }
.contact-line__title.contact-title::before { content: "Line"; }

/* 狭い画面では見出しが1行に収まらないので、欧文ラベルを上の行へ逃がす */
@media screen and (max-width: 599px) {
	.section-title,
	.contact-title {
		-webkit-flex-wrap: wrap;
		    -ms-flex-wrap: wrap;
		        flex-wrap: wrap;
		gap: 6px 14px;
		letter-spacing: 0.12em;
	}

	.section-title::before,
	.contact-title::before {
		-webkit-flex-basis: 100%;
		    -ms-flex-preferred-size: 100%;
		        flex-basis: 100%;
		font-size: 0.8125rem;
		letter-spacing: 0.22em;
	}
}

/* 320px級では見出しも1行に入らないので、さらに詰める */
@media screen and (max-width: 360px) {
	.section-title,
	.contact-title {
		font-size: 1.125rem;
		letter-spacing: 0.04em;
	}
}

/* ========== ボタン ==========
   塗りをやめ、文字と横罫だけにする。 */

.btn {
	width: auto;
	height: auto;
	margin-inline: 0;
	display: -webkit-inline-box;
	display: -webkit-inline-flex;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: 22px;
	background: none;
	color: var(--gr);
	font-size: 0.9375rem;
	letter-spacing: 0.24em;
	/* 文字の右に伸びる罫（::before）と下線を両方引くと、
	   ほぼ平行な線が2本並んで引き間違いのように見える。
	   罫だけを残す（ホバーで伸びるのもこちら）。 */
	padding: 0;
	border-bottom: 0;
	place-content: initial;
}

.btn::before {
	content: "";
	position: static;
	-webkit-transform: none;
	        transform: none;
	background: var(--gr);
	width: 46px;
	height: 1px;
	-webkit-box-ordinal-group: 3;
	-webkit-order: 2;
	    -ms-flex-order: 2;
	        order: 2;
}

@media (any-hover: hover) {
	.btn:hover {
		opacity: 1;
		color: var(--gr-d);
	}

	.btn:hover::before {
		left: auto;
		width: 62px;
	}
}

.top-feature__btn {
	text-align: left;
}

/* 元CSSは矢印（::before）をボタン左端に絶対配置しているが、
   ラベルは中央揃えなので、矢印だけが130pxほど離れて
   置き忘れのように見える。ラベルのすぐ左に並べる。 */
.line-btn {
	border-radius: 0;
	font-weight: 400;
	letter-spacing: 0.14em;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	gap: 14px;
}

.line-btn::before {
	position: static;
	left: auto;
	top: auto;
	-webkit-transform: none;
	        transform: none;
	-webkit-flex-shrink: 0;
	    -ms-flex-negative: 0;
	        flex-shrink: 0;
}

/* ========== トップ：動画・院の紹介 ========== */

/* 緑の木のイラストは配色に合わないため非表示（画像は残しています） */
.top-movie__block::before,
.top-movie__block::after {
	display: none;
}

.top-movie__text {
	font-family: var(--fd);
	font-weight: 400;
	color: var(--gr);
	font-size: clamp(1.0625rem, 0.9rem + 0.6vw, 1.375rem);
	line-height: 2.2;
	letter-spacing: 0.16em;
}

.top-heading__contents {
	background: var(--pale);
	border: 1px solid var(--hair);
	color: var(--ink);
	opacity: 1;
}

/* 元CSSはこのパネルを写真に重ねていた（PCは position:absolute で
   写真の中央、SPは margin-top:-60px で食い込ませる）。
   どちらも見出しに写真がかかって読みにくいため、
   重ねるのをやめて写真の真下に置く。 */
.top-heading__block {
	background: #fff;
}

.top-heading__contents {
	position: static;
	-webkit-transform: none;
	        transform: none;
	width: min(100% - 48px, 880px);
	max-width: none;
	min-width: 0;
	margin: 0 auto;
	padding: 64px 60px 68px;
	left: auto;
	top: auto;
}

@media screen and (max-width: 1300px) {
	.top-heading__contents {
		min-width: 0;
		padding: 56px 48px 60px;
	}
}

@media screen and (max-width: 1024px) {
	.top-heading__contents {
		width: min(100% - 48px, 620px);
		margin: 0 auto;
		padding: 52px 44px 56px;
	}
}

@media screen and (max-width: 599px) {
	.top-heading__contents {
		width: min(100% - 32px, 620px);
		min-width: 0;
		padding: 36px 24px 40px;
	}
}

.top-heading__text {
	color: var(--ink);
}

/* 元CSSは white-space:nowrap のため、幅によっては見出しがパネルから
   はみ出していた（元サイトからの症状）。折り返しを許可して解消する。 */
.top-heading__title {
	font-family: var(--fd);
	font-weight: 500;
	color: var(--gr);
	line-height: 2;
	letter-spacing: 0.02em;
	white-space: normal;
}

.top-heading__text {
	line-height: 2.15;
	letter-spacing: 0.08em;
}

/* ========== トップ：特徴 ========== */

.top-feature__block {
	background: #fff;
	border-top: 1px solid var(--hair);
}

.top-feature__img {
	max-width: 300px;
}

/* 特徴の丸い写真は、元は「円形にくり抜いた透過PNG」だった。
   実院内写真に差し替えるにあたり、切り抜きはCSS側の仕事にした。
   四角い写真をそのまま置けるので、素材の入れ替えが楽になる。 */
.top-feature__img img {
	border-radius: 50%;
	-o-object-fit: cover;
	   object-fit: cover;
	-webkit-filter: var(--photo);
	        filter: var(--photo);
}

.top-feature__text {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--hair);
	font-family: var(--fb);
	font-weight: 400;
	font-size: 0.9375rem;
	line-height: 2;
	letter-spacing: 0.08em;
	text-align: center;
	color: var(--ink);
}

/* ========== トップ：アクセス ========== */

.top-access__block {
	background: var(--bg);
	border-top: 1px solid var(--hair);
}

/* アクセス欄の表は、親が内容幅まで縮んで詰まって見えていた。
   住所リスト（507px）の残り幅いっぱいまで広げる。 */
@media screen and (min-width: 1025px) {
	.top-access__office-hours {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		    -ms-flex: 1;
		        flex: 1;
		min-width: 0;
		margin-inline: 0;
	}

	/* この表だけは全体幅が狭いので、時間の列の取り分を増やす */
	.top-access__office-hours .office-hours__header,
	.top-access__office-hours .office-hours__grid {
		grid-template-columns: 27% repeat(7, 10.428%);
	}
}

/* 1024px以下は縦積みになる。幅を確保しつつ、時間の列が切れないよう字を詰める。
   599px以下でも幅指定がなく、表が268pxまで縮んで密集していたため
   下の 1024px以下の指定で全域をカバーする。 */
@media screen and (max-width: 1024px) {
	.top-access__office-hours {
		width: 100%;
		max-width: 560px;
	}
}

@media screen and (min-width: 600px) and (max-width: 1024px) {

	.top-access__office-hours .office-hours__item {
		font-size: 0.8125rem;
	}

	.top-access__office-hours .office-hours__grid .office-hours__item:nth-child(1) {
		font-size: 0.8125rem;
		letter-spacing: 0;
	}

	.top-access__office-hours .office-hours__item:nth-child(1) {
		padding: 19px 8px;
	}
}

/* SPメニュー内の表はセル幅が51px前後と狭いので、この中だけ字を小さくする */
.g-nav__office-hours .office-hours__item {
	font-size: 0.75rem;
	letter-spacing: 0;
	padding: 11px 1px;
}

.g-nav__office-hours .office-hours__grid .office-hours__item:nth-child(1) {
	font-size: 0.75rem;
	letter-spacing: 0;
}

.g-nav__office-hours .office-hours__item:nth-child(8) {
	font-size: 0.6875rem;
}

.top-access__term {
	font-family: var(--fd);
	color: var(--gr);
	letter-spacing: 0.16em;
}

.top-access__desc,
.top-access__desc a {
	color: var(--ink);
	letter-spacing: 0.02em;
}

.top-access__item img {
	-webkit-filter: var(--photo);
	        filter: var(--photo);
}

/* ========== 下層ページ ========== */

.about-doctor__role,
.contact-tel__number,
.contact-tel__number a {
	color: var(--gr);
	font-family: var(--fd);
	letter-spacing: 0.12em;
}

/* 字間を広げたことで、狭い画面では電話番号が2行に折れていた。
   1行に収まるよう字間を戻し、折り返しも禁止する。 */
.contact-tel__number {
	white-space: nowrap;
}

@media screen and (max-width: 599px) {
	.contact-tel__number,
	.contact-tel__number a {
		letter-spacing: 0.01em;
	}

	.contact-tel__number .number {
		font-size: 1.75rem;
	}
}

.about-policy__block::before,
.about-point__block::before {
	background: var(--pale);
}

.about-policy__contents,
.about-point__contents {
	border: 1px solid var(--hair);
}

@media screen and (max-width: 599px) {
	.about-policy__contents,
	.about-point__contents {
		border: 0;
	}
}

.card {
	background: #fff;
	border: 1px solid var(--hair);
}

.card__title {
	font-family: var(--fd);
	font-weight: 500;
	color: var(--gr);
	letter-spacing: 0.14em;
}

.card__text {
	color: var(--ink);
	letter-spacing: 0.06em;
}

.about-doctor__img img,
.about-doctor__item img,
.about-policy__img img,
.about-point__img img,
.card__img img {
	-webkit-filter: var(--photo);
	        filter: var(--photo);
}

.contact-tel__text,
.contact-line__text {
	color: var(--sub);
	letter-spacing: 0.08em;
}

@media screen and (max-width: 599px) {
	.contact-tel__text,
	.contact-line__text {
		letter-spacing: 0.01em;
	}
}

/* 元CSSの word-break:keep-all のせいで、320px級の端末では
   この一文が折り返せず横スクロールが出ていた（元サイトからの症状）。
   狭い画面でだけ折り返しを許可する。 */
@media screen and (max-width: 400px) {
	.contact-line__text {
		word-break: normal;
	}
}

/* ========== 下層ページのファーストビュー ==========
   タイトルが画像（緑グラデ＋影のPNG）で、他の文字組みから浮いていた。
   同じ文言のまま実テキストに置き換え、トップと同じ「白いかすみ＋緑の明朝」
   に揃える。画像ファイルは残したまま、表示だけを止めている。 */

.page-fv {
	position: relative;
}

.page-fv::before {
	content: "";
	position: absolute;
	inset: 0;
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(var(--bg-rgb), .5)), to(rgba(var(--bg-rgb), .84)));
	background: linear-gradient(180deg, rgba(var(--bg-rgb), .5), rgba(var(--bg-rgb), .84));
}

.about-page-fv .page-fv__text,
.contact-page-fv .page-fv__text {
	width: auto;
}

.page-fv__text {
	position: relative;
	z-index: 1;
	padding-top: 0;
}

.page-fv__text img {
	display: none;
}

.page-fv__label {
	display: block;
	font-family: var(--fd);
	font-weight: 500;
	font-size: clamp(1.375rem, 1.05rem + 1.3vw, 2rem);
	line-height: 1.6;
	letter-spacing: 0.34em;
	/* 字送りのぶん右に寄るので、その分だけ戻して光学的に中央へ */
	text-indent: 0.34em;
	color: var(--gr);
	text-align: center;
}

@media screen and (max-width: 599px) {
	.page-fv__label {
		letter-spacing: 0.2em;
		text-indent: 0.2em;
	}
}

/* ========== 下層ページの本文まわり ========== */

/* リード文はトップの紹介文と同じ扱い（明朝・広い行間）に揃える */
.about-heading__title {
	font-family: var(--fd);
	font-weight: 500;
	color: var(--gr);
	font-size: clamp(1.0625rem, 0.9rem + 0.6vw, 1.375rem);
	line-height: 2.2;
	letter-spacing: 0.12em;
}

/* 1行が60字を超えて読みにくかったので、行の長さを抑える */
.about-heading__text,
.about-doctor__text {
	max-width: 44em;
	line-height: 2.15;
	letter-spacing: 0.04em;
}

/* 院長名も明朝に揃える */
.about-doctor__title {
	font-family: var(--fd);
	letter-spacing: 0.08em;
}

/* LINEの説明文が薄すぎて読みにくかったので本文色に戻す */
.contact-line__text {
	color: var(--ink);
}

/* ========== 右端の固定ボタン（PC） ========== */

.fixed-line {
	width: auto;
	height: auto;
	top: 300px;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-align: end;
	-webkit-align-items: flex-end;
	    -ms-flex-align: end;
	        align-items: flex-end;
	gap: 6px;
}

.fixed-line > a {
	width: 74px;
	height: 150px;
	border-radius: 0;
	border: 1px solid #fff;
	border-right: none;
	font-size: 0.875rem;
	font-weight: 400;
	letter-spacing: 0.08em;
}

.fixed-line .fixed-cta {
	width: 48px;
	height: auto;
	background: var(--gr);
	border: 1px solid #fff;
	border-right: none;
	border-radius: 0;
	padding: 26px 6px;
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0.18em;
	line-height: 1;
	-webkit-writing-mode: vertical-rl;
	    -ms-writing-mode: tb-rl;
	        writing-mode: vertical-rl;
	display: grid;
	place-content: center;
	-webkit-transition: 0.3s;
	transition: 0.3s;
}

.fixed-line .fixed-cta::before {
	content: none;
}

@media (any-hover: hover) {
	.fixed-line .fixed-cta:hover {
		background: var(--gr-d);
		opacity: 1;
	}
}

@media screen and (max-width: 780px) {
	.fixed-line {
		display: none;
	}
}

/* ========== SP：下部の固定バー ========== */

.sp-fixed-bar {
	display: none;
}

@media screen and (max-width: 780px) {
	.sp-fixed-bar {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9;
		background: #fff;
		border-top: 1px solid var(--hair);
		padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
		gap: 8px;
	}

	.sp-fixed-bar__item {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		    -ms-flex: 1;
		        flex: 1;
		min-width: 0;
		padding: 13px 0;
		display: grid;
		place-content: center;
		border: 1px solid var(--gr);
		color: var(--gr);
		font-size: 0.6875rem;
		font-weight: 400;
		letter-spacing: 0.04em;
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
	}

	.sp-fixed-bar__item.line {
		background: var(--line-green);
		border-color: var(--line-green);
		color: #fff;
	}

	.sp-fixed-bar__item.cta {
		background: var(--gr);
		color: #fff;
	}

	/* 固定バーはページの一番下に重なるので、その分だけ下に余白を作らないと
	   コピーライトの帯がバーに隠れて読めなくなる。
	   バーの実寸は70px（320〜360pxでは69px）。ノッチのある端末では
	   バー側の safe-area ぶんさらに下へ伸びるので、同じ値を足す。

	   .footer-bottom は height:45px 固定なので、そこに padding を足すと
	   緑の帯だけが間延びする。余白は帯の「下」に作ること。 */
	.footer {
		padding-bottom: calc(78px + env(safe-area-inset-bottom));
	}
}

/* 320px級の端末ではラベルが収まらないので、さらに詰める */
@media screen and (max-width: 360px) {
	.sp-fixed-bar {
		gap: 5px;
		padding-left: 8px;
		padding-right: 8px;
	}

	.sp-fixed-bar__item {
		font-size: 0.625rem;
		letter-spacing: -0.02em;
	}
}

/* 元CSSは768px以上で電話リンクを無効化しているが、780pxまでは
   SP用の導線（下部固定バー・メニュー内の電話）が出ている。
   この帯で電話が押せなくなるため、該当箇所だけ有効に戻す。 */
@media screen and (max-width: 780px) {
	.sp-fixed-bar__item[href^="tel:"],
	.g-nav__tel a {
		pointer-events: auto;
	}
}

/* サイト全体を直角で組んでいるなか、診療科目のカードだけ
   角丸14pxで浮いていたので揃える。 */
.about-department__item {
	border-radius: 0;
}

/* ========== 見出しと中身の左右の揃え ==========
   元CSSはいくつかの並びを「中央寄せ」で置いているため、
   見出しの罫線より中身が内側に入り、左右の端が揃わない。
   同じセクションの中で幅が3種類あるように見えるので、
   段組みの端を見出しに合わせる。 */

@media screen and (min-width: 781px) {
	/* トップ：特徴の3項目。
	   元は justify-content:center ＋ 写真300pxで、
	   並び全体が1006pxとなり見出し（1122px）より左右58px内側だった。
	   各項目を等幅にして端を揃える（写真は中で中央に置く）。 */
	.top-feature__item {
		-webkit-box-flex: 1;
		-webkit-flex: 1 1 0;
		    -ms-flex: 1 1 0;
		        flex: 1 1 0;
		min-width: 0;
	}

	/* トップ：アクセスの写真3枚。
	   .top-access__list だけ .inner の外にあり、画面幅いっぱいに
	   広がって地図や見出しより78px外側にはみ出していた。
	   .inner と同じ幅に合わせる。 */
	.top-access__list {
		width: min(100% - 60px, 1122px);
		margin-inline: auto;
	}

	/* 写真も幅28.55%固定＋中央寄せで内側に入るため、等幅にして端を揃える */
	.top-access__item {
		width: auto;
		-webkit-box-flex: 1;
		-webkit-flex: 1 1 0;
		    -ms-flex: 1 1 0;
		        flex: 1 1 0;
		min-width: 0;
	}

	/* 診療案内：院長紹介。
	   本文が flex:0 1 auto で余白を取らないため、余った117pxが
	   写真の margin-inline:auto に吸われ、写真だけ左に59px
	   入り込んでいた（本文の右端は揃っているので左右非対称）。
	   本文に余白を持たせ、写真を左端に戻す。 */
	.about-doctor__text-box {
		-webkit-box-flex: 1;
		-webkit-flex: 1 1 auto;
		    -ms-flex: 1 1 auto;
		        flex: 1 1 auto;
	}
}

/* ========== 押しやすさ・キーボード操作 ========== */

/* ロゴと電話のリンクは高さが24〜27pxしかなく、スマホで押しにくい。
   見た目を変えずに当たり判定だけ広げる（padding と同じ分だけ
   negative margin で戻すので、周りのレイアウトは動かない）。 */
@media screen and (max-width: 780px) {
	.header__logo a,
	.footer__logo a,
	.g-nav__tel a,
	.top-access__desc a[href^="tel:"] {
		display: inline-block;
		padding-top: 11px;
		padding-bottom: 11px;
		margin-top: -11px;
		margin-bottom: -11px;
	}
}

/* キーボードで操作したときに、今どこにいるかが分かるようにする。
   マウス操作では出ないので、見た目は変わらない。 */
:focus-visible {
	outline: 2px solid var(--gr);
	outline-offset: 3px;
}

.sp-fixed-bar__item:focus-visible,
.fixed-cta:focus-visible,
.header__cta-btn:focus-visible {
	outline-offset: -4px;
}

/* ========== 画面の動き ==========
   js/motion.js が付ける class に対する見た目の定義。
   JSを外せばこの節は一切効かない（要素は最初から見えている）。 */

.has-motion .mo {
	opacity: 0;
	-webkit-transform: translateY(12px);
	        transform: translateY(12px);
	-webkit-transition: opacity .9s ease, -webkit-transform .9s cubic-bezier(.2, .7, .2, 1);
	        transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1);
	will-change: opacity, transform;
}

.has-motion .mo--in {
	opacity: 1;
	-webkit-transform: none;
	        transform: none;
	will-change: auto;
}

/* ファーストビューのキャッチは、少し長めにゆっくり出す */
.has-motion .mo--hero {
	-webkit-transition: opacity 1.4s ease .25s, -webkit-transform 1.4s cubic-bezier(.2, .7, .2, 1) .25s;
	        transition: opacity 1.4s ease .25s, transform 1.4s cubic-bezier(.2, .7, .2, 1) .25s;
}

/* 縦組みなので、下からではなく右から出す（読む向きに合わせる）。
   表示後は必ず定位置に戻るよう、.mo--in を後に置いて優先させる。 */
@media screen and (min-width: 781px) {
	.has-motion .mo--hero {
		-webkit-transform: translateX(16px);
		        transform: translateX(16px);
	}

	.has-motion .mo--hero.mo--in {
		-webkit-transform: none;
		        transform: none;
	}
}

/* ヘッダーは少しスクロールしたら影を落とす */
.header {
	-webkit-transition: -webkit-box-shadow .45s ease;
	        transition: box-shadow .45s ease;
}

.header.is-scrolled {
	-webkit-box-shadow: inset 0 -1px 0 var(--hair), 0 8px 24px -18px rgba(var(--ink-rgb), .55);
	        box-shadow: inset 0 -1px 0 var(--hair), 0 8px 24px -18px rgba(var(--ink-rgb), .55);
}

/* 写真はホバーでゆっくり寄る */
.top-access__item,
.top-heading__img,
.about-doctor__item {
	overflow: hidden;
}

/* <picture> は既定で inline のため aspect-ratio が効かず、
   高さが行ボックス分（23px）になる。そこに overflow:hidden が重なると
   写真が切り落とされ、パネルが下のセクションに重なる。
   ブロック要素にして本来の比率で表示させる。 */
.top-heading__img {
	display: block;
}

.top-access__item img,
.top-heading__img img,
.about-doctor__item img,
.top-feature__img img {
	-webkit-transition: -webkit-transform 1.1s cubic-bezier(.2, .7, .2, 1);
	        transition: transform 1.1s cubic-bezier(.2, .7, .2, 1);
}

@media (any-hover: hover) {
	.top-access__item:hover img,
	.top-heading__img:hover img,
	.about-doctor__item:hover img {
		-webkit-transform: scale(1.045);
		        transform: scale(1.045);
	}

	.top-feature__item:hover .top-feature__img img {
		-webkit-transform: scale(1.05);
		        transform: scale(1.05);
	}
}

/* OS側で「視差効果を減らす」が有効なときは、動きを完全に止める */
@media (prefers-reduced-motion: reduce) {
	.has-motion .mo,
	.has-motion .mo--in {
		opacity: 1;
		-webkit-transform: none;
		        transform: none;
		-webkit-transition: none;
		        transition: none;
	}

	.top-access__item img,
	.top-heading__img img,
	.about-doctor__item img,
	.top-feature__img img,
	.header {
		-webkit-transition: none;
		        transition: none;
	}
}

/* ========== フッター ========== */

.footer-bottom {
	background: var(--gr);
}

.footer__nav-item span::after {
	background: var(--gr);
}

.footer__desc,
.footer__address,
.footer__nav-item a {
	color: var(--ink);
	letter-spacing: 0.08em;
}

.footer__tel a {
	font-family: var(--fd);
	color: var(--gr);
	letter-spacing: 0.1em;
}

.page-fv__text img {
	-webkit-filter: var(--photo);
	        filter: var(--photo);
}

/* ========== 院長紹介の写真を右から左へ流す ==========
   js/motion.js が写真6枚をもう1組複製し、親に .is-marquee を付けたときだけ
   横1列の流れに切り替わる。JSを外す・「視差効果を減らす」が有効・
   IntersectionObserver 非対応 のいずれでも、下の指定は当たらず
   刷新前と同じ2段の格子のまま止まって表示される。

   ・-50% ちょうどで1組ぶん進むよう、写真の幅と左右余白だけで間隔を作っている
     （gap を混ぜると半分の位置がずれて継ぎ目で跳ねる）
   ・.about__inner の左右余白を打ち消し、囲みの端まで流している
   ・マウスを載せている間と、キーボードで中に入った間は止まる */

.about-doctor__gallery.is-marquee {
	margin-top: 104px;
	margin-inline: -30px;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
	        mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.is-marquee .about-doctor__track {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	width: -webkit-max-content;
	width: -moz-max-content;
	width: max-content;
	-webkit-animation: doctor-marquee 45s linear infinite;
	        animation: doctor-marquee 45s linear infinite;
}

.is-marquee .about-doctor__list {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	margin: 0;
	gap: 0;
}

.is-marquee .about-doctor__item {
	-webkit-box-flex: 0;
	    -ms-flex: none;
	        flex: none;
	width: 390px;
	max-width: none;
	margin-inline: 10px;
}

@-webkit-keyframes doctor-marquee {
	from { -webkit-transform: translateX(0); transform: translateX(0); }
	to   { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}

@keyframes doctor-marquee {
	from { -webkit-transform: translateX(0); transform: translateX(0); }
	to   { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}

.about-doctor__gallery.is-marquee:hover .about-doctor__track,
.about-doctor__gallery.is-marquee:focus-within .about-doctor__track {
	-webkit-animation-play-state: paused;
	        animation-play-state: paused;
}

@media screen and (max-width: 780px) {
	.about-doctor__gallery.is-marquee {
		margin-top: 60px;
		margin-inline: -24px;
	}

	/* 写真が小さくなるぶん1周が短いので、見た目の速さを揃えるため時間も詰める */
	.is-marquee .about-doctor__track {
		-webkit-animation-duration: 30s;
		        animation-duration: 30s;
	}

	.is-marquee .about-doctor__item {
		width: 260px;
		margin-inline: 8px;
	}
}

/* ========== 診療科目：狭い画面では横に送って読む ==========
   1列に積むと6枚で画面5つぶんの高さになり、下まで指が届かなかった。
   横並びに変え、次のカードが少し覗く幅にしている（覗き＝まだ続く、の合図）。
   1枚ずつ吸い付いて止まるので、途中半端な位置で止まらない。

   ・囲みの左右余白ぶんだけ外へ出し、同じ幅を内側へ戻している。
     こうすると1枚目の左端が本文と揃ったまま、右端まで流れていく
   ・カードの左右の余白を詰めて、1行に入る文字数を稼いでいる
   ・781px以上は従来どおりの格子。この節は当たらない */

@media screen and (max-width: 780px) {
	.about-department__list {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		gap: 16px;
		/* 元CSSの中央寄せを必ず外すこと。横に溢れる並びを中央寄せにすると、
		   1枚目が左へはみ出したまま、そこまでスクロールできなくなる
		   （scrollLeft が0でも1枚目の左端が画面外、という状態になる） */
		-webkit-box-pack: start;
		-webkit-justify-content: flex-start;
		    -ms-flex-pack: start;
		        justify-content: flex-start;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		margin-inline: -24px;
		padding-inline: 24px;
		scroll-padding-inline: 24px;
		padding-bottom: 14px;
		scrollbar-width: thin;
		scrollbar-color: var(--gr) rgba(var(--gr-rgb), .12);
	}

	.about-department__item {
		-webkit-box-flex: 0;
		    -ms-flex: none;
		        flex: none;
		width: 78%;
		max-width: 320px;
		margin-inline: 0;
		scroll-snap-align: start;
	}

	/* 横スクロールの中では、カード1枚ずつのフェードインを止める。
	   3枚目より先は「画面の外」と判断されて出てこないうえ、
	   吸い付き（scroll-snap）の位置が動いている途中の値で決まってしまう。
	   広い画面では今までどおり順番に現れる。 */
	.has-motion .about-department__item.mo {
		opacity: 1;
		-webkit-transform: none;
		        transform: none;
		-webkit-transition: none;
		        transition: none;
	}

	/* カードの左右を詰めて、1行あたりの文字数を戻す */
	.about-department__item.card {
		padding: 40px 24px 32px;
	}

	/* アイコンの幅の決まり方を、ブラウザ任せにしない。
	   元CSSは figure が width:fit-content で、中の img が width:100%。
	   「親の幅が中身で決まり、中身の幅が親の割合で決まる」という循環で、
	   どの幅に落ち着くかは実装差に左右される。矯正歯科（3番目）だけ
	   高さを78pxに上書きしていて元の比率(313:172)から外れるため、
	   ここだけ幅が大きく出る余地がある。
	   高さと元の比率で幅を決め、カードの内寸を上限にする形に直す。 */
	.about-department__item .card__img {
		width: 100%;
	}

	.about-department__item .card__img img {
		width: auto;
		max-width: 100%;
		margin-inline: auto;
	}

	/* 覗きだけでは横に動くと気づかない人がいるので、細いつまみを残す */
	.about-department__list::-webkit-scrollbar {
		height: 4px;
	}

	.about-department__list::-webkit-scrollbar-track {
		background: rgba(var(--gr-rgb), .12);
		border-radius: 999px;
	}

	.about-department__list::-webkit-scrollbar-thumb {
		background: var(--gr);
		border-radius: 999px;
	}
}