@charset "UTF-8";
/* ============================================================
   緑を基調にした精緻版テーマ

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

   ・文言は変更していません。追加した要素の文字は、すべて
     ページ内に元からある表記をそのまま使っています。
     （欧文の小ラベル Feature / Access などは装飾として追加）
   ・img/ の画像は削除・差し替えをしていません。
     ロゴは元の緑のまま使用。写真のトーン調整はCSSの表示指定だけで
     行っているため、画像ファイルは無変更です。
   ============================================================ */

:root {
	--gr: #0A6B5B;          /* 文字・罫線・塗りボタン用の濃い緑
	                           （#19A890 は白地でコントラスト2.98:1しかなく、
	                             小さな文字に使えないため暗くした版を用意） */
	--gr-b: #19A890;        /* ブランドの緑。●印など面と印にだけ使う */
	--gr-d: #075247;        /* さらに濃い色（ホバー） */
	--ac: #D2762E;          /* 差し色：緑の補色側のオレンジ */
	--pale: #EFF7F5;        /* 淡い面 */
	--hair: #D8E9E4;        /* 罫線 */
	--bg: #F7FCFA;          /* 地 */
	--ink: #2A312F;         /* 本文 */
	--sub: #78857F;         /* 補助テキスト */
	--line-green: #3EA337;  /* LINE公式カラー（変更なし） */
	--fd: "Shippori Mincho B1", serif;
	--fb: "Noto Sans JP", sans-serif;
	--fl: "Cormorant Garamond", serif;
	--photo: saturate(.88) contrast(1.02) brightness(1.02);
}

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

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

/* ========== ロゴ ==========
   ヘッダーが白地になるので、白抜きのfilterだけ解除する。
   色はロゴ本来の緑（#00A58C）のまま。画像も無変更。 */

.header__logo img {
	-webkit-filter: none;
	        filter: none;
}

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

/* 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(247, 252, 250, .97) 0%, rgba(247, 252, 250, .88) 22%, rgba(247, 252, 250, 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(247, 252, 250, 0) 24%, rgba(247, 252, 250, .9) 58%, #F8FAFB 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);
	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: 23% repeat(7, 11%);
	font-size: inherit;
	font-weight: 400;
}

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

.office-hours__item {
	color: var(--ink);
	font-weight: 400;
	font-size: 0.875rem;
	letter-spacing: 0.02em;
	padding: 14px 2px;
	text-align: center;
	border-right: 1px solid var(--hair);
	-webkit-font-feature-settings: "tnum";
	        font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

.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: left;
	padding-left: 20px;
	padding-right: 6px;
	border-right: 1px solid var(--hair);
}

.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: #FAFCFD;
	color: var(--sub);
}

.office-hours__grid .office-hours__item:nth-child(8) {
	background: #FAFCFD;
	color: #A7B2BB;
}

/* 土曜午後の★は注記と同じ色に */
.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: 26% repeat(7, 10.571%);
	}

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

	.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);
	-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;
	padding: 0 0 12px;
	border-bottom: 1px solid var(--gr);
	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;
}

.line-btn {
	border-radius: 0;
	font-weight: 400;
	letter-spacing: 0.14em;
}

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

/* 緑の木のイラストは配色に合わないため非表示（画像は残しています） */
.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;
}

.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;
}

.top-feature__img img {
	-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以下は縦積みになる。幅を確保しつつ、時間の列が切れないよう字を詰める */
@media screen and (min-width: 600px) and (max-width: 1024px) {
	.top-access__office-hours {
		width: 100%;
		max-width: 560px;
	}

	.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-left: 12px;
	}
}

/* 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(1) {
	padding-left: 10px;
}

.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,
.about-doctor__history-title,
.history-item__year,
.contact-tel__number,
.contact-tel__number a {
	color: var(--gr);
	font-family: var(--fd);
	letter-spacing: 0.12em;
}

.about-doctor__history {
	background: var(--pale);
	border: 1px solid var(--hair);
}

.history-item {
	border-bottom: 1px solid var(--hair);
}

.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(247, 252, 250, .5)), to(rgba(247, 252, 250, .84)));
	background: linear-gradient(180deg, rgba(247, 252, 250, .5), rgba(247, 252, 250, .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;
	}
}

/* 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;
	}

	/* バーの高さ分だけフッター下に余白を作る */
	.footer-bottom {
		padding-bottom: calc(62px + env(safe-area-inset-bottom));
	}
}

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

/* ========== 画面の動き ==========
   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(42, 49, 47, .55);
	        box-shadow: inset 0 -1px 0 var(--hair), 0 8px 24px -18px rgba(42, 49, 47, .55);
}

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

.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);
}