/* =========================================================
   そしがや駅前耳鼻咽喉科クリニック サイト共通CSS
   ヘッダー（header.php）／フッター（footer.php）／ボタン／CTA／医院情報
   ---------------------------------------------------------
   ・PC：デザインカンプ（幅1280px）準拠
   ・999px以下はSP・タブレット表示（メニューボタン＋画面下の固定ボタン）
   ・トップページだけのデザインは front-page.css
========================================================= */

:root {
	--color-brown: #4c291b;
	--color-teal: #05a9b5;
	--color-mint: #5ebeb0;
	--color-orange: #eb6100;
	--color-cream: #fcf9f4;
	--color-gray: #f4f4f4;
	--color-pale: #e8f3f1;
	/* サイト全体の書体（Zen Kaku Gothic New を最優先。読み込みは header.php） */
	--font-base: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	--font-en: "Roboto", "Zen Kaku Gothic New", sans-serif;
	--header-h: 60px;
	--admin-bar: var(--wp-admin--admin-bar--height, 0px);
}
@media (min-width: 999px) {
	:root {
		--header-h: 70px;
	}
}

/* ページ内リンク（#付きリンク）で移動した時に止まる位置
   固定ヘッダーの下に、ふりがな付き見出しのふりがな（約26px）＋余白15px が見える位置で止める。
   余白を変えたいときは --anchor-space の数字を変更してください。 */
html {
	--anchor-space: 41px;
}
/* ページ内リンクのなめらかなスクロールは site.js（4.）で行っています */
:where([id]) {
	scroll-margin-top: calc(var(--header-h) + var(--admin-bar) + var(--anchor-space));
}

body {
	--ark-font_family: var(--font-base); /* テーマ標準（Arkhe）部分の書体もそろえる */
	font-family: var(--font-base);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.skip-link:focus {
	z-index: 1000;
	top: 8px;
	left: 8px;
	width: auto;
	height: auto;
	padding: 8px 16px;
	clip: auto;
	background: #fff;
	color: var(--color-brown);
}

.site-header,
.drawer,
.site-footer,
.cta,
.sp-cta {
	color: var(--color-brown);
	font-family: var(--font-base);
	letter-spacing: .04em;
}
:is(.site-header, .drawer, .site-footer, .cta, .sp-cta) *,
:is(.site-header, .drawer, .site-footer, .cta, .sp-cta) *::before,
:is(.site-header, .drawer, .site-footer, .cta, .sp-cta) *::after {
	box-sizing: border-box;
}
:is(.site-header, .drawer, .site-footer, .cta) :is(ul, p, h2, h3, address) {
	margin: 0;
	padding: 0;
}
:is(.site-header, .drawer, .site-footer) ul {
	list-style: none;
}
:where(.site-header, .drawer, .site-footer, .cta, .sp-cta) a { /* :where … ボタン（.btn）の白文字を上書きしないよう、強さを弱めています */
	color: inherit;
	text-decoration: none;
}
:is(.site-header, .drawer, .site-footer, .cta) img {
	display: block;
	max-width: 100%;
	height: auto;
}


/* =========================================================
   ボタン
   ホバー時：背景が白になり、文字が元の背景色に（1pxの枠線だけ残る）
   色はクラスで指定：btn-mint／btn-teal／btn-orange／btn-white
========================================================= */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 10px 24px;
	border-radius: 4px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
}
.btn,
.header-cta-btn,
.sp-cta-btn {
	border: 1px solid var(--btn-color, var(--color-mint));
	background: var(--btn-color, var(--color-mint));
	color: #fff;
	transition: background-color .3s, color .3s;
}
.btn:hover,
.btn:focus-visible,
.header-cta-btn:hover,
.header-cta-btn:focus-visible,
.sp-cta-btn:hover,
.sp-cta-btn:focus-visible {
	background: #fff;
	color: var(--btn-color, var(--color-mint));
}
.btn-mint   { --btn-color: var(--color-mint); }
.btn-teal   { --btn-color: var(--color-teal); }
.btn-orange { --btn-color: var(--color-orange); }

/* 白いボタン（青緑の背景の上で使用）：ホバーで背景が透明・文字が白に */
.btn.btn-white {
	--btn-color: #fff;
	color: var(--color-teal);
}
.btn.btn-white:hover,
.btn.btn-white:focus-visible {
	background: transparent;
	color: #fff;
}


/* =========================================================
   パンくずリスト（各ページのH1タイトルの下）
   HTMLは inc/custom/soshigaya-site.php の soshigaya_breadcrumb()
========================================================= */
.breadcrumb {
	position: relative;
	z-index: 1;
	margin-top: 14px;
	font-size: 11px;
	font-weight: 500;
	line-height: 2.2;
	letter-spacing: normal;
}
.breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 .3em;
	margin: 35px 0 0;
	padding: 0;
	list-style: none;
	text-decoration: none;
}
.breadcrumb li {
	margin: 0;
}
.breadcrumb li + li::before {
	content: "＞";
	margin-right: .3em;
	opacity: .6;
}
.breadcrumb a {
	color: inherit;
	text-decoration: none;
}
.breadcrumb a:hover {
	text-decoration: none;
}
/* 写真の上のタイトル（白文字） */
:is(.p-ssgHero, .p-about-hero) {
	flex-direction: column;
}
:is(.p-ssgHero, .p-about-hero) .breadcrumb {
	margin-top: 6px;
	color: #fff;
	text-shadow: 0 0 8px rgba(0, 0, 0, .5);
}
/* 診療案内のタイトル（クリーム背景） */
.p-ssgMedicalHero .breadcrumb {
	margin-top: 20px;
	color: var(--color-brown);
}
@media (max-width: 767px) {
	.p-ssgMedicalHero .breadcrumb {
		margin-top: 14px;
	}
}


/* =========================================================
   ヘッダー
========================================================= */
.site-header {
	position: fixed;
	z-index: 100;
	top: var(--admin-bar);
	left: 0;
	right: 0;
	background: #fff;
	transition: box-shadow .3s, background-color .3s;
}
.site-header.is-scrolled,
.site-header:not(.is-top) {
	box-shadow: 0 2px 10px rgb(0 0 0 / .06);
}
.header-inner {
	display: flex;
	align-items: center;
	height: var(--header-h);
	padding: 0 16px;
	transition: height .3s;
}

/* ロゴ：通常は横長、トップページの最初だけ縦長 */
.header-logo {
	flex-shrink: 0;
}
.header-logo-horizontal {
	width: 200px;
}
.header-logo-vertical {
	display: none !important;
}

/* メニュー */
.header-nav {
	display: none;
	margin-left: auto;
}
.header-menu {
	display: flex;
	align-items: center;
}
.header-menu > li {
	position: relative;
}
.header-menu > li + li::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 1px;
	height: 24px;
	background: #f0b37e;
	translate: 0 -50%;
}
.header-menu > li > a {
	position: relative;
	display: block;
	padding: 10px 15px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
	white-space: nowrap;
	transition: color .2s;
}
.header-menu > li > a:hover {
	color: var(--color-teal);
}

/* 診療案内（ホバーで記事一覧） */
.header-menu > .has-sub > a::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -4px;
	border-top: 7px solid var(--color-mint);
	border-inline: 5px solid transparent;
	translate: -50% 0;
}
.header-sub {
	position: absolute;
	z-index: 2; /* 右端のWEB予約ボタンより手前に表示 */
	top: 100%;
	left: 50%;
	width: min(760px, 90vw);
	margin-top: 4px;
	padding: 30px 34px 40px;
	border: 3px solid var(--color-mint);
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 10px 24px rgb(0 0 0 / .1);
	opacity: 0;
	visibility: hidden;
	translate: -50% 8px;
	transition: opacity .25s, translate .25s, visibility .25s;
}
.has-sub:hover > .header-sub,
.has-sub:focus-within > .header-sub {
	opacity: 1;
	visibility: visible;
	translate: -50% 0;
}

/* 診療案内メニューの中身（ヘッダー・SPメニュー共通） */
.medical-menu-top {
	display: inline-block;
	margin-bottom: 16px;
	color: var(--color-teal) !important;
	font-size: 15px;
	font-weight: 700;
}
.medical-menu-top::before {
	content: "▶";
	margin-right: 6px;
	font-size: 11px;
}
.medical-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 20px 40px;
}
.medical-menu-title {
	margin-top: 25px !important;
	margin-bottom: 15px !important;
	padding-bottom: 10px !important;
	border-bottom: 2px dotted var(--color-mint);
	font-size: 16px;
	font-weight: 700;
}
.medical-menu-list li + li {
	margin-top: 6px;
}
.medical-menu-list a {
	position: relative;
	display: block;
	font-size: 14px;
	line-height: 1.6;
	transition: color .2s;
}
.medical-menu-list a:hover {
	color: var(--color-teal);
}
a.medical-menu-title {
	display: block;
	transition: color .2s;
}
a.medical-menu-title:hover {
	color: var(--color-teal);
}

/* 見出しにオレンジの三角と点線（PCのホバーメニュー・SPメニュー共通） */
:is(.header-sub, .drawer-medical) .medical-menu-top,
:is(.header-sub, .drawer-medical) .medical-menu-title {
	position: relative;
	display: block;
	margin: 0 !important;
	padding: 0 0 10px 18px !important;
	border-bottom: 2px dotted var(--color-mint);
	color: var(--color-brown) !important;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
}
:is(.header-sub, .drawer-medical) .medical-menu-top::before,
:is(.header-sub, .drawer-medical) .medical-menu-title::before {
	content: "";
	position: absolute;
	top: 7px;
	left: 0;
	margin: 0;
	border-left: 8px solid var(--color-orange);
	border-block: 5px solid transparent;
}
:is(.header-sub, .drawer-medical) a.medical-menu-top:hover,
:is(.header-sub, .drawer-medical) a.medical-menu-title:hover {
	color: var(--color-teal) !important;
}
/* PCは2列 */
.header-sub .medical-menu {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 36px 30px;
	margin-top: 36px;
}
.header-sub .medical-menu-list {
	margin-top: 16px;
}
.header-sub .medical-menu-list li + li {
	margin-top: 8px;
}

/* WEB予約・WEB問診票（通常：画面右端に縦並びで固定） */
.header-cta {
	display: none;
}
.header-cta-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
}
.header-cta-btn small {
	font-size: 11px;
	font-weight: 500;
}

/* SP用メニューボタン */
.header-menu-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 60px;
	height: 60px;
	margin: 0 -16px 0 auto;
	padding-top: 8px !important;
	padding: 0;
	border: 0;
	background: var(--color-teal);
	color: #fff;
	cursor: pointer;
}
.header-menu-icon,
.header-menu-icon::before,
.header-menu-icon::after {
	display: block;
	width: 24px;
	height: 2px;
	background: currentColor;
	transition: rotate .3s, translate .3s, opacity .3s;
}
.header-menu-icon {
	position: relative;
}
.header-menu-icon::before,
.header-menu-icon::after {
	content: "";
	position: absolute;
	left: 0;
}
.header-menu-icon::before { top: -7px; }
.header-menu-icon::after  { top: 7px; }
.header-menu-label {
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
}
.is-drawer-open .header-menu-icon { background: transparent; }
.is-drawer-open .header-menu-icon::before { translate: 0 7px; rotate: 45deg; }
.is-drawer-open .header-menu-icon::after  { translate: 0 -7px; rotate: -45deg; }

/* ---------- PC ---------- */
@media (min-width: 999px) {
	.header-inner {
		padding: 0 10px 0 16px;
	}
	.header-nav {
		display: block;
	}
	.header-menu-btn {
		display: none;
	}
	.header-cta {
		position: fixed;
		top: calc(var(--admin-bar) + 105px);
		right: 0;
		display: flex;
		flex-direction: column;
		gap: 20px;
	}
	.header-cta-btn {
		width: 130px;
		height: 50px;
		border-radius: 10px 0 0 10px;
	}

	/* トップページの最初（スクロール前）：縦長ロゴ＋ボタン横並び */
	.site-header.is-top:not(.is-scrolled) .header-inner {
		height: 96px;
		padding-left: 230px;
	}
	.site-header.is-top:not(.is-scrolled) .header-logo {
		position: absolute;
		top: 28px;
		left: 38px;
	}
	.site-header.is-top:not(.is-scrolled) .header-logo-vertical {
		display: block !important;
		width: 152px;
	}
	.site-header.is-top:not(.is-scrolled) .header-logo-horizontal {
		display: none;
	}
	.site-header.is-top:not(.is-scrolled) .header-cta {
		position: static;
		flex-direction: row;
		gap: 10px;
		margin-left: 12px;
	}
	.site-header.is-top:not(.is-scrolled) .header-cta-btn {
		width: 110px;
		border-radius: 8px;
	}
	.site-header.is-top:not(.is-scrolled) .header-menu > li > a {
		padding-inline: 12px;
		letter-spacing: .02em;
	}
}
/* 1269px以下：メニューを少し詰める。スクロール前もWEB予約・WEB問診票は右端に縦並び（横に並べると収まらないため） */
@media (min-width: 999px) and (max-width: 1269px) {
	.header-menu > li > a,
	.site-header.is-top:not(.is-scrolled) .header-menu > li > a {
		padding-inline: 11px;
		font-size: 14px;
	}
	.site-header.is-top:not(.is-scrolled) .header-inner {
		padding-left: 190px;
	}
	.site-header.is-top:not(.is-scrolled) .header-logo {
		left: 24px;
	}
	.site-header.is-top:not(.is-scrolled) .header-logo-vertical {
		width: 136px;
	}
	.site-header.is-top:not(.is-scrolled) .header-cta {
		position: fixed;
		flex-direction: column;
		gap: 20px;
		margin-left: 0;
	}
	.site-header.is-top:not(.is-scrolled) .header-cta-btn {
		width: 130px;
		border-radius: 10px 0 0 10px;
	}
}
@media (min-width: 999px) and (max-width: 1099px) {
	.header-menu > li > a,
	.site-header.is-top:not(.is-scrolled) .header-menu > li > a {
		padding-inline: 8px;
		font-size: 13px;
		letter-spacing: 0;
	}
	.header-logo-horizontal {
		width: 170px;
	}
}

/* テーマ標準のページ（404など）は固定ヘッダーの分だけ下げる
   ※トップページ・p-ssgPage（下層ページ）・p-aboutPage（当院について）は各ページのCSS側で調整済み */
@media (min-width: 999px) {
	body:not(.home):not(.p-ssgPage):not(.p-aboutPage) .l-content {
		padding-top: var(--header-h);
	}
}

/* ---------- SP・タブレット ---------- */
@media (max-width: 998px) {
	body {
		padding-top: var(--header-h);
		padding-bottom: 60px;
	}
	.header-logo-horizontal {
		width: 180px;
	}

	/* トップページ：ファーストビューの上ではヘッダーの背景を透明にし、写真をヘッダーの下まで広げる
	   （スクロールすると .is-scrolled が付いて白に戻ります。assets/js/site.js） */
	body.home {
		padding-top: 0;
	}
	.site-header.is-top:not(.is-scrolled) {
		background: transparent;
	}
	.is-drawer-open .site-header.is-top {
		background: #fff; /* メニューを開いている間は白 */
	}
}

/* <small> の文字が半透明で読みにくいため、親テーマの opacity を解除 */
small {
	opacity: 1;
}


/* =========================================================
   SP・タブレット用メニュー（ドロワー）
========================================================= */
.drawer {
	position: fixed;
	z-index: 99;
	top: calc(var(--admin-bar) + var(--header-h));
	left: 0;
	right: 0;
	bottom: 0;
	overflow-y: auto;
	background: #fff;
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s, visibility .3s;
}
.is-drawer-open {
	overflow: hidden;
}
.is-drawer-open .drawer {
	opacity: 1;
	visibility: visible;
}
.drawer-inner {
	display: block;
	padding: 10px 0 100px;
	letter-spacing: normal;
}
.drawer-menu a {
	display: block;
	padding: 14px 26px;
	border-bottom: 1px solid #e6e0d6;
	font-size: 16px;
	font-weight: 700;
}
/* 診療案内（画面幅いっぱいのクリーム色の帯） */
.drawer-medical {
	margin-top: 30px;
	padding: 36px 20px 40px;
	background: var(--color-cream);
}
.drawer-medical .medical-menu {
	display: block;
}
.drawer-medical .medical-menu-group {
	margin-top: 32px;
}
.drawer-medical .medical-menu-list {
	margin-top: 12px;
}
.drawer-medical .medical-menu-list li + li {
	margin-top: 0;
}
.drawer-medical .medical-menu-list a {
	padding-block: 6px;
	font-size: 15px;
}
.drawer-cta {
	display: grid;
	gap: 12px;
	margin: 30px 26px 0;
}
@media (min-width: 999px) {
	.drawer {
		display: none;
	}
}


/* =========================================================
   公式LINE（PCのみ・画面右下に追従。999px未満は非表示）
========================================================= */
.line-fix {
	display: none;
}
@media (min-width: 999px) {
	.line-fix {
		position: fixed;
		z-index: 90;
		right: 0;
		bottom: 20px;
		display: flex;
		align-items: center;
		gap: 18px;
		height: 58px;
		padding: 0 20px 0 30px;
		border: 1px solid #5cb531;
		border-right: none;
		border-radius: 8px 0 0 8px;
		background: #5cb531;
		box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
		color: #fff;
		font-family: var(--font-base);
		font-size: 15px;
		font-weight: 700;
		letter-spacing: .04em;
		text-decoration: none;
		white-space: nowrap;
		transition: background-color .3s, color .3s;
	}
	.line-fix:hover,
	.line-fix:focus-visible {
		background: #fff;
		color: #5cb531;
	}
}


/* =========================================================
   SP・タブレット：画面下の固定ボタン
========================================================= */
.sp-cta {
	position: fixed;
	z-index: 98;
	left: 0;
	right: 0;
	bottom: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.sp-cta-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 60px;
	padding-bottom: env(safe-area-inset-bottom);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
}
.sp-cta-btn small {
	font-size: 11px;
	font-weight: 500;
}
@media (min-width: 999px) {
	.sp-cta {
		display: none;
	}
}


/* =========================================================
   CTA「気になる症状がございましたら」
   （トップページ：ページ途中／下層ページ：フッターの上）
========================================================= */
.cta {
	display: grid;
	grid-template-columns: minmax(0, 640px) minmax(0, 585px);
	gap: 40px;
	align-items: center;
	padding: 40px 20px 50px 0;
	background: #fff;
}
.cta-image img {
	width: 100%;
	aspect-ratio: 2 / 1;
	object-fit: cover;
	border-radius: 0 160px 160px 0 / 0 50% 50% 0;
}
.cta-title {
	font-size: 26px;
	font-weight: 700;
	line-height: 1.75;
}
.cta-buttons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-top: 20px;
}
.cta-tel-title {
	margin-top: 30px !important;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.6;
}
.cta-note {
	margin-top: 6px !important;
	font-size: 13px;
	line-height: 1.9;
}
@media (max-width: 998px) {
	.cta {
		grid-template-columns: 1fr;
		gap: 24px;
		padding: 40px 20px 50px;
	}
	.cta-image {
		margin-left: -20px;
	}
	.cta-image img {
		border-radius: 0 100px 100px 0 / 0 50% 50% 0;
	}
	.cta-title {
		font-size: 20px;
	}
	.cta-tel-title {
		font-size: 16px;
	}
	.cta-tel-title a {
		color: var(--color-teal);
		text-decoration: underline;
	}
}


/* =========================================================
   医院情報（地図・住所・診療時間）
   トップページ：.clinic-info／フッター：.clinic-info.is-footer
========================================================= */
.clinic-info-top {
	display: grid;
	grid-template-columns: minmax(0, 588px) minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}
.clinic-map iframe {
	display: block;
	width: 100%;
	aspect-ratio: 588 / 357;
	height: auto;
	border: 0;
	border-radius: 8px;
}
.clinic-logo {
	width: 268px;
}
.clinic-name {
	margin-top: 22px !important;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.5;
}
.clinic-depts {
	margin-top: 10px !important;
	font-size: 14px;
	font-weight: 700;
}
.clinic-depts span::before {
	content: "｜";
	margin: 0 2px;
	opacity: .6;
}
.clinic-address {
	margin-top: 44px !important;
	font-size: 15px;
	font-style: normal;
	line-height: 1.85;
}
.clinic-access-btn {
	width: min(427px, 100%);
	margin-top: 22px;
}

.hours {
	margin-top: 60px;
}
.hours-table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	color: var(--color-brown);
	font-size: 16px;
	line-height: 1.6;
	text-align: center;
	table-layout: fixed;
}
.hours-table th,
.hours-table td {
	height: 86px;
	padding: 8px 4px;
	border: 1px solid var(--color-teal);
	vertical-align: middle;
}
.hours-table thead th {
	height: 42px;
	background: var(--color-teal);
	color: #fff;
	font-weight: 700;
}
.hours-table thead th:first-child,
.hours-table tbody th {
	width: 172px;
}
.hours-table tbody th {
	font-weight: 700;
}
.hours-table small {
	display: block;
	font-size: 13px;
	font-weight: 400;
}
.hours-note {
	margin-top: 22px !important;
	font-size: 14px;
}

/* フッター版（青緑の背景） */
.clinic-info.is-footer {
	color: #fff;
}
.is-footer .clinic-detail {
	font-weight: 700;
}
.is-footer .hours-table th,
.is-footer .hours-table td {
	border-color: #ddd;
}
.is-footer .hours-table thead th {
	border-color: #6b4a3d;
	background: var(--color-brown);
}
.is-footer .hours-table td {
	background: #faf7f2;
}
.is-footer .hours-table td:nth-child(5),
.is-footer .hours-table td:nth-child(7) {
	background: #fff;
}

@media (max-width: 998px) {
	.clinic-info-top {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.clinic-logo {
		width: 200px;
	}
	.clinic-name {
		font-size: 20px;
	}
	.clinic-address {
		margin-top: 20px !important;
	}
	.hours {
		margin-top: 40px;
		overflow-x: auto;
	}
	.hours-table {
		min-width: 600px;
		font-size: 14px;
	}
	.hours-table th,
	.hours-table td {
		height: 70px;
	}
	.hours-table thead th:first-child,
	.hours-table tbody th {
		width: 120px;
	}
}


/* =========================================================
   フッター
========================================================= */
.site-footer {
	background: linear-gradient(160deg, #05a9b5 0%, #0498a3 100%);
	color: #fff;
}
.footer-inner {
	max-width: 1096px;
	margin: 0 auto;
	padding: 90px 20px 30px;
}
.footer-payment {
	margin-top: 60px;
	padding: 40px 0;
	border-block: 2px dotted rgb(255 255 255 / .8);
}
.footer-payment-title {
	font-size: 15px;
}
.footer-payment-title strong {
	margin-right: 22px;
	font-size: 20px;
}
.footer-payment-cards {
	width: 622px;
	margin-top: 26px;
}
.footer-payment-note {
	margin-top: 22px !important;
	font-size: 13px;
	line-height: 1.9;
}

.footer-nav {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	padding-top: 56px;
	font-weight: 700;
}
.footer-main-links li + li {
	margin-top: 18px;
}
.footer-main-links a,
.footer-medical-title {
	font-size: 19px;
	line-height: 1.5;
}
.footer-medical-title {
	display: inline-block;
	margin-bottom: 12px;
}
.footer-sub-links li + li {
	margin-top: 10px;
}
.footer-sub-links a {
	font-size: 14px;
	line-height: 1.6;
}
.footer-sub-links a::before {
	content: "- ";
}
.footer-nav a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.footer-bottom {
	display: flex;
	align-items: flex-end;
	gap: 64px;
	margin-top: 40px;
}
.footer-logo img {
	width: 260px;
}
.footer-buttons {
	display: flex;
	gap: 20px;
	margin-bottom: 10px;
}
.footer-buttons .btn {
	width: 207px;
	min-height: 60px;
	font-size: 14px;
}
.footer-btn-sub {
	margin-left: 8px;
	padding-left: 8px;
	border-left: 1px solid currentColor;
	font-weight: 500;
}
.footer-banner {
	margin-left: auto;
	padding: 6px;
	border-radius: 4px;
	background: #fff;
	transition: opacity .2s;
}
.footer-banner:hover {
	opacity: .85;
}
.footer-banner img {
	width: 148px;
}
.footer-copyright {
	margin-top: 60px !important;
	font-size: 14px;
	font-weight: 700;
	text-align: center;
}
.footer-copyright small {
	font-size: inherit;
}

@media (max-width: 998px) {
	.footer-inner {
		padding: 60px 20px 30px;
	}
	.footer-payment-cards {
		width: 100%;
	}
	.footer-nav {
		grid-template-columns: 1fr;
		gap: 30px;
		padding-top: 40px;
	}
	.footer-main-links {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 14px 10px;
	}
	.footer-main-links li + li {
		margin-top: 0;
	}
	.footer-main-links a,
	.footer-medical-title {
		font-size: 16px;
	}
	.footer-bottom {
		flex-direction: column;
		align-items: center;
		gap: 24px;
	}
	.footer-buttons {
		flex-direction: column;
		width: 100%;
		margin: 0;
	}
	.footer-buttons .btn {
		width: 100%;
	}
	.footer-banner {
		margin: 0;
	}
	.footer-copyright {
		margin-top: 40px !important;
	}
}