@charset "utf-8";
/*
Theme Name:mrp-child
Template:mrp
Version: 1.0.0
*/
/*
DesignCode CSS: ver 0.01
*/
/*------------------------------------------------------
Theme Material
------------------------------------------------------*/


/* 
ACFで設定したカラーを使用する場合は以下のように記述してください。

--local-municipality-primary-color
--local-municipality-secondary-color
--local-municipality-accent-color

が動的に読み込まれているので、使用可能です。
このカラーは自治体TOPページで選択されたカラーが適用されます。 */


/*------@import------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
	/*------▼基本設定▼------*/
	--color-background: #fff;
	--color-backgroun02: #F9F6F0;
	--color-font: #333;
	--color-primary: ;
	--color-primary-shade: ;
	--color-primary-tint: ;
	--color-secondary: ;
	--color-secondary-tint: ;
	--color-table-border: #ccc;
	--body-font-size: min(calc(1.6rem + (1vw - 1.92rem) * 0.1294), 1.8rem);
	/* 1.6-1.4rem (1920-375) */
	--body-font-family: "Noto Sans JP", sans-serif;
	--content-max-width: 1240px;
	/*------▼ヘッダー設定▼------*/
	--header-background: #fff;
	--header-color-font: ;
	--header-color-primary: ;
	--header-secondary: ;
	--header-color-primary-shade: ;
	--header-color-primary-tint: ;
	/*------▼フッター設定▼------*/
	--footer-background: ;
	--footer-color-font: ;
	--footer-color-primary: ;
	/*------▼フォント設定▼------*/
	--font-family01: "Noto Sans JP", sans-serif;
	--font-family02: "Poppins", sans-serif;
	--font-family03: ;
	--font-family04: ;
}

/*--メディアクエリ--------------------------------------------*/
@media print,
screen and (min-width: 1024px) {}

@media print,
screen and (max-width: 1023px) {}

@media print,
screen and (min-width: 769px) {}

@media print,
screen and (max-width: 768px) {}


h2.checkup-method-title {
	background-color: var(--local-municipality-accent-color);
}

/* 各自治体ヘッダー部分 */
#header .logo {
	display: flex;
	align-items: center;
	line-height: 1.2;
}

body.mobile #header .logo .mark {
	display: flex;
	align-items: center;
}

.site-header .local-name {
	font-size: var(--rem28);
	font-weight: bold;
}

.local-munisiparity-header {
	background: var(--local-municipality-secondary-color);
	text-align: center;
	position: relative;
	overflow: hidden;
}

.local-munisiparity-header-catch {
	position: absolute;
	top: var(--rem30);
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	z-index: 100;
}

.local-munisiparity-header-catch p {
	font-size: var(--rem48);
	font-weight: bold;
	line-height: 1.6;
	margin: 0.5em 0;
	color: #333;
	white-space: nowrap;
}

.local-munisiparity-header-catch .header-highlight {
	background-color: var(--local-municipality-primary-color);
	color: #fff;
	padding: 0.2em 0.6em;
	border-radius: 4px;
}

.local-munisiparity-header-catch .header-highlight-underline {
	background: linear-gradient(transparent 60%, #F8E328 40%);
	font-weight: bold;
	color: #333;
	display: inline-block;
}

.local-munisiparity-header-image {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
	z-index: 1;
	position: relative;
}

@media print,
screen and (max-width: 768px) {
	.local-munisiparity-header-catch p {
		font-size: var(--rem30);
	}

	/* body.mobile {
		margin-top: 14px;
	} */
}

@media print,
screen and (max-width: 640px) {
	.local-munisiparity-header-catch p {
		font-size: var(--rem20);
	}

	.local-munisiparity-header {
		aspect-ratio: 4 / 3;
	}

	.local-munisiparity-header-image {
		aspect-ratio: 4 / 3;
		object-fit: cover;
	}
}


@media print,
screen and (max-width: 450px) {
	.local-munisiparity-header-catch {
		top: 22px;
	}

	.local-munisiparity-header-catch p {
		font-size: 18px;
	}
}

/*================================
  共通
================================*/
#content,
body:not(.home) #content.wide {
	padding-top: 0;
}

.widearea {
	margin-right: calc(((100vw - 100%) / 2)* -1);
	margin-left: calc(((100vw - 100%) / 2)* -1);
}

a#scrollUp {
	background: var(--local-municipality-primary-color);
}


@media print,
screen and (max-width: 450px) {
	#scrollUp {
		bottom: 60px !important;
	}
}

/*================================
  btn
================================*/
.linkBtn,
.post .linkBtn {
	background: var(--local-municipality-accent-color) !important;
	border-radius: 50vh !important;
	max-width: 300px;
	font-size: var(--rem20);

	&:hover {
		opacity: 0.7;
	}
}


/*================================
  header
================================*/
.spmenu #menu span,
.spmenu #menu span:before,
.spmenu #menu span:after {
	width: 35px;
	background: var(--local-municipality-primary-color);
}

nav#mainNav ul li a:hover {
	color: var(--local-municipality-primary-color);
}

/*================================
  footer
================================*/
#footer {
	background-color: var(--local-municipality-primary-color);
}

.contact-section {
	h2.contact-title {
		font-size: var(--rem24);
		color: #fff;
		text-align: center;
		margin-bottom: var(--rem30);
		font-weight: bold;
	}

	.contact-lead {
		text-align: center;
		color: #fff;
		margin-bottom: var(--rem30);
	}
}

.contact-list-box {
	max-width: 260px;
	width: 100%;
	border: 1px solid #fff;
	border-radius: 10px;
	margin: 0 auto var(--rem20);
	padding: var(--rem30);
}

.contact-list {
	color: #fff;

	.contact-area-name {
		margin-right: 10px;
	}
}

.footer-free-text {
	color: #fff;
	text-align: center;
}

.footer-copy {
	color: #fff;
	text-align: center;
}

.official-web-list-box {
	display: grid;
	justify-content: center;
	margin-bottom: var(--rem40);
}


#footer .official-web-list-box ul.official-web-list {
	display: grid;
	justify-content: center;
	gap: var(--rem12);
	border: 1px solid #fff;
	border-radius: 10px;
	padding: var(--rem30);
}

#footer .official-web-list-box ul.official-web-list li a {
	color: #fff;
	display: grid;
	justify-content: center;
	text-align: center;
}

@media print,
screen and (max-width: 768px) {
	#footer {
		padding: var(--px50) 5% var(--px30);
	}
}

/*================================
  TOP
================================*/
/* -----お知らせ----- */
.postlist .ttls {
	overflow: hidden;
	white-space: wrap;
	text-overflow: ellipsis;
}

.new-info-section {
	margin: var(--px60) 0 var(--px120);
}

h2.new-info-section-title {
	font-size: var(--rem36);
	font-weight: bold;
	padding-bottom: var(--rem20);
	position: relative;

	&::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 50%;
		width: 7px;
		height: 7px;
		background-color: var(--local-municipality-primary-color);
		border-radius: 50%;
		transform: translateX(-50%);
		box-shadow: -24px 0 0 var(--local-municipality-primary-color), -12px 0 0 var(--local-municipality-primary-color), 12px 0 0 var(--local-municipality-primary-color), 24px 0 0 var(--local-municipality-primary-color);
	}
}

.postlist li {
	border-bottom: 1px solid #ddd;
}

.post .time,
.postlist .time,
.post2b .time,
.post4b .time {
	background-color: var(--local-municipality-primary-color);
	color: #fff;
}

.link-for-local-wrap {
	text-align: center;
	margin-top: var(--rem40);
}

/* -----もくじ----- */

.toc-section {
	margin-bottom: var(--px120);
}

h2.toc-title {
	font-size: var(--rem36);
	font-weight: bold;
	padding-bottom: var(--rem20);
	position: relative;

	&::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 50%;
		width: 7px;
		height: 7px;
		background-color: var(--local-municipality-primary-color);
		border-radius: 50%;
		transform: translateX(-50%);
		box-shadow: -24px 0 0 var(--local-municipality-primary-color), -12px 0 0 var(--local-municipality-primary-color), 12px 0 0 var(--local-municipality-primary-color), 24px 0 0 var(--local-municipality-primary-color);
	}
}

.toc-buttons-wrap {
	padding: var(--rem80) 0;
	background: var(--local-municipality-secondary-color);
}

.toc-buttons {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--rem40);
}

.toc-button-wrap {
	width: 100%;
	height: var(--rem80);
	background: #fff;
	border-radius: 50em;

	.toc-button {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		width: 100%;
		height: 100%;
	}

	.toc-arrow {
		display: block;

		&::after {
			content: "\f107";
			display: block;
			font-family: 'FontAwesome';
			font-size: 1.4rem;
			font-weight: 400;
			line-height: 1;
		}
	}
}

@media print,
screen and (max-width: 450px) {
	.toc-buttons {
		grid-template-columns: repeat(2, 1fr);
	}
}


/* -----受診方法について----- */
.checkup-method-section {
	margin-bottom: var(--px120);
}

h2.checkup-method-title {
	font-size: var(--rem36);
	font-weight: bold;
	padding-bottom: var(--rem20);
	position: relative;
	background: transparent;

	&::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 50%;
		width: 7px;
		height: 7px;
		background-color: var(--local-municipality-primary-color);
		border-radius: 50%;
		transform: translateX(-50%);
		box-shadow: -24px 0 0 var(--local-municipality-primary-color), -12px 0 0 var(--local-municipality-primary-color), 12px 0 0 var(--local-municipality-primary-color), 24px 0 0 var(--local-municipality-primary-color);
	}
}

h2.section-title {
	font-size: var(--rem36);
	font-weight: bold;
	padding-bottom: var(--rem20);
	position: relative;

	&::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 50%;
		width: 7px;
		height: 7px;
		background-color: var(--local-municipality-primary-color);
		border-radius: 50%;
		transform: translateX(-50%);
		box-shadow: -24px 0 0 var(--local-municipality-primary-color), -12px 0 0 var(--local-municipality-primary-color), 12px 0 0 var(--local-municipality-primary-color), 24px 0 0 var(--local-municipality-primary-color);
	}
}

.checkup-method-subtitle {
	text-align: center;
	font-size: var(--rem18);
	margin-bottom: var(--rem40);
}

.checkup-method-box {
	background: var(--color-backgroun02);
	text-align: center;
	padding: var(--rem60) 0;
	border-radius: 30px;
}

p.checkup-method-type {
	display: inline-block;
	padding: 10px;
	background: var(--local-municipality-primary-color);
	color: #fff;
	font-size: var(--rem20);
	margin-bottom: var(--rem30);
}

.checkup-period-box {
	max-width: 570px;
	width: 100%;
	margin: 0 auto var(--rem30);
	border: 2px solid var(--local-municipality-primary-color);
	border-radius: 10px;
	padding: var(--rem30) var(--rem16);
	background: #fff;
	color: var(--color-font);

	.checkup-period-label {
		font-size: var(--rem18);
		font-weight: bold;
		margin-bottom: var(--rem20);
	}

	.checkup-period-dates {
		color: var(--color-font);
		font-size: var(--rem18);
		display: flex;
		flex-direction: column;
		margin-bottom: var(--rem16);
	}
}

.checkup-method-image {
	margin-bottom: var(--rem30);
}

@media print,
screen and (max-width: 450px) {
	.checkup-method-box {
		padding: var(--rem60) 5%;
	}

	.checkup-period-box {
		.checkup-period-dates {
			display: flex;
			flex-wrap: wrap;

			&:not(:last-child) {
				margin-bottom: 10px;
			}
		}
	}
}

/* -----健診内容のご案内----- */
.examination-section {
	margin-bottom: var(--px120);
}

.examination-item-wrap {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--rem60);
	margin-bottom: var(--rem60);
}

h2.examination-title {
	font-size: var(--rem36);
	font-weight: bold;
	padding-bottom: var(--rem20);
	position: relative;
	background: transparent;

	&::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 50%;
		width: 7px;
		height: 7px;
		background-color: var(--local-municipality-primary-color);
		border-radius: 50%;
		transform: translateX(-50%);
		box-shadow: -24px 0 0 var(--local-municipality-primary-color), -12px 0 0 var(--local-municipality-primary-color), 12px 0 0 var(--local-municipality-primary-color), 24px 0 0 var(--local-municipality-primary-color);
	}
}

h3.examination-subtitle {
	font-size: var(--rem24);
	font-weight: 600;
	text-align: left;
	color: var(--local-municipality-primary-color);
	line-height: 1.4;
	overflow-wrap: break-word;
	padding: 0 0 0 var(--rem16);
	margin: var(--rem42) auto var(--rem30);
	border: none;
	background: transparent;
	border-left: min(calc(6px + (1vw - 19.2px) * 0.1294), 6px) solid var(--local-municipality-primary-color);

	&::before,
	&:after {
		content: none;
	}
}

.examination-items {
	margin-bottom: var(--rem80);
}

.examination-item {
	text-align: center;
	font-size: var(--rem20);
	font-weight: bold;

	.checkup-image-icon {
		margin-bottom: var(--rem20);
	}
}

.examination-item.list {
	ul {
		display: flex;
		flex-wrap: wrap;
		gap: var(--rem48);
	}

	li {
		font-size: var(--rem18);
		background-color: var(--color-backgroun02);
		padding: 10px var(--rem20);
		font-weight: bold;
		border-radius: 10px;
	}
}

.health-check-notes-wrap {
	margin-top: var(--rem20)
}

.examination-disease {
	margin-bottom: var(--rem80);
}

.disease-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--rem24);
	margin: 0 0 var(--rem30) 0;

	li {
		position: relative;
		list-style: none;
		padding-left: 3rem;
		padding-bottom: var(--rem20);
		margin-left: 0;
		font-size: var(--rem20);
		font-weight: bold;
		border-bottom: 2px dashed var(--local-municipality-primary-color);
		display: flex;
		align-items: center;

		&::before {
			content: '\f058';
			color: var(--local-municipality-primary-color);
			position: absolute;
			font-family: 'FontAwesome';
			font-weight: 400;
			left: 0;
		}
	}
}

.etc-disease {
	text-align: right;
	font-weight: bold;
}

.examination-summary {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--rem40);
}

.link-for-area-wrap {
	text-align: center;
	margin-top: var(--rem40);
}

.summary-box {
	display: flex;
	flex-direction: column;

	.summary-box-main {
		background: var(--color-backgroun02);
		padding: var(--rem60) 0 var(--rem80);
		border-radius: 20px;
		text-align: center;
		margin-bottom: var(--rem20);

		.summary-note {
			font-weight: bold;
		}
	}

	.summary-title {
		color: var(--local-municipality-primary-color);
		font-size: var(--rem24);
		padding-left: 0;

		&::before,
		&::after {
			content: none;
		}
	}

	.summary-time,
	.summary-cost {
		margin-bottom: var(--rem30);
	}

	.highlight {
		font-size: var(--rem40);
		line-height: 1;
	}

	.highlight-number-prce.highlight-number {
		font-family: var(--font-family02);
		color: var(--local-municipality-primary-color);
		font-size: var(--rem72);
		font-weight: 600;
	}

	.highlight-number-time.highlight-number {
		font-family: var(--font-family02);
		color: var(--local-municipality-primary-color);
		font-size: var(--rem72);
		font-weight: 600;
	}
}

@media print,
screen and (max-width: 768px) {}

@media print,
screen and (max-width: 450px) {
	.examination-item-wrap {
		grid-template-columns: repeat(3, 1fr);
	}

	.disease-list {
		grid-template-columns: repeat(2, 1fr);
	}

	.examination-summary {
		grid-template-columns: initial;
	}
}

/* -----健康診断で得られる3つのメリット----- */
.merit-section {
	margin-bottom: var(--px120);
	padding: var(--px180) 0;
	background: var(--local-municipality-secondary-color);
	position: relative;

	&::before {
		content: "";
		display: block;
		width: 100%;
		height: 15%;
		background: url(/wp-content/uploads/wave02.png) no-repeat center / cover;
		position: absolute;
		top: -0.5%;
		left: 0;
	}

	&::after {
		content: "";
		display: block;
		width: 100%;
		height: 15%;
		background: url(/wp-content/uploads/wave.png) no-repeat center / cover;
		position: absolute;
		bottom: 0;
		left: 0;
	}
}

@media print,
screen and (max-width: 450px) {
	.merit-section {

		&::before {
			height: 5%;
		}

		&::after {
			height: 5%;
		}
	}
}

h2.merit-title {
	font-size: var(--rem36);
	font-weight: bold;
	padding-bottom: var(--rem20);
	position: relative;
	background: transparent;

	&::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 50%;
		width: 7px;
		height: 7px;
		background-color: var(--local-municipality-primary-color);
		border-radius: 50%;
		transform: translateX(-50%);
		box-shadow: -24px 0 0 var(--local-municipality-primary-color), -12px 0 0 var(--local-municipality-primary-color), 12px 0 0 var(--local-municipality-primary-color), 24px 0 0 var(--local-municipality-primary-color);
	}
}

.merit-items {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: var(--rem80);
}

.merit-image {
	position: relative;
	margin-bottom: var(--rem20);

	.merit-number {
		display: flex;
		align-items: center;
		justify-content: center;
		width: var(--rem80);
		height: var(--rem80);
		font-size: var(--rem48);
		font-family: var(--font-family02);
		font-weight: 600;
		color: #fff;
		background: var(--local-municipality-primary-color);
		border-radius: 50em;
		line-height: 1;
		position: absolute;
		top: 0;
		left: var(--rem20);
	}
}

.merit-content {
	h3.merit-heading {
		text-align: center;
		font-size: var(--rem22);
		border-bottom: none;
		margin-bottom: var(--rem20);
	}
}

@media print,
screen and (max-width: 450px) {
	.merit-items {
		grid-template-columns: initial;
		row-gap: var(--rem40);
	}

	.merit-image {
		width: 60%;
		margin: 0 auto;
	}
}

/* -----よくあるご質問----- */
h2.faq-title {
	font-size: var(--rem36);
	font-weight: bold;
	padding-bottom: var(--rem20);
	position: relative;
	background: transparent;

	&::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 50%;
		width: 7px;
		height: 7px;
		background-color: var(--local-municipality-primary-color);
		border-radius: 50%;
		transform: translateX(-50%);
		box-shadow: -24px 0 0 var(--local-municipality-primary-color), -12px 0 0 var(--local-municipality-primary-color), 12px 0 0 var(--local-municipality-primary-color), 24px 0 0 var(--local-municipality-primary-color);
	}
}

.faq-item {
	background: var(--color-backgroun02);
	padding: var(--rem30);
	border-radius: 10px;
	margin-bottom: var(--rem20);
}

.faq-question {
	font-size: var(--rem20);
	font-weight: bold;
	border-bottom: 1px solid var(--color-table-border);
	padding-bottom: var(--rem20);

	.faq-label {
		color: var(--local-municipality-primary-color);
		font-size: var(--rem30);
		font-family: var(--font-family02);
	}
}

.faq-answer {
	padding-top: var(--rem20);
	font-size: var(--rem18);
}

/*================================
  医療機関一覧(地区有：地区一覧後遷移/地区無：直接遷移)
================================*/
/* -----kv----- */
.header-kv {
	margin-right: calc(((100vw - 100%) / 2)* -1);
	margin-left: calc(((100vw - 100%) / 2)* -1);
	padding: var(--rem120) var(--rem20);
	background-color: var(--local-municipality-secondary-color);

	.title.first {
		margin-bottom: 0;
	}
}


/* -----申し込み先----- */
.application-section {
	margin: var(--px120) 0 var(--px120);

	.contact-instruction {
		width: 70%;
		margin: 0 auto var(--rem40);
		background-color: var(--local-municipality-primary-color);
		color: #fff;
		text-align: center;
		padding: var(--rem16);
		border-radius: 10px;
		font-size: var(--rem20);
	}
}


.info-boxes {
	display: grid;
	grid-template-columns: repeat(2, 2fr);
	column-gap: var(--rem20);
	margin-bottom: var(--rem20);
}

.info-item {
	background: var(--color-backgroun02);
	padding: var(--rem40);
	border-radius: 20px;
}

h3.info-heading {
	color: var(--local-municipality-primary-color);
	border: none;
	text-align: center;
	padding: 0;
}

.info-wrap {
	max-width: 520px;
	width: 100%;
	height: auto;
	margin: 0 auto var(--rem20);
	border: 2px solid var(--local-municipality-primary-color);
	border-radius: 15px;
	background: #fff;
	display: flex;
	row-gap: 10px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--rem20) var(--rem14) var(--rem18);
}

.info-main {
	font-size: var(--rem18);
	color: var(--color-font);
}

span.clinic-name {
	display: block;
	text-align: center;
}

.info-main-date {
	display: flex;
	align-items: center;
	justify-content: center;
}


.info-sub {
	font-weight: bold;
	text-align: center;
	color: var(--color-font);
	font-size: var(--rem16);
}

.info-price {
	font-size: var(--rem60);
	color: var(--local-municipality-primary-color);
	font-weight: bold;
	line-height: 1;
}

.belongings-info {
	background: var(--color-backgroun02);
	padding: var(--rem40);
	border-radius: 20px;
}

.belongings-list {
	display: flex;
	gap: var(--rem20);
	align-items: center;
	justify-content: center;
	max-width: 960px;
	width: 100%;
	margin: 0 auto var(--rem20) !important;
	padding: var(--rem20);
	border: 2px solid var(--local-municipality-primary-color);
	border-radius: 15px;
	font-size: var(--rem20);
	color: var(--color-font);
	font-weight: bold;
	background: #fff;
	flex-direction: column;
}

@media print,
screen and (max-width: 768px) {
	.info-boxes {
		grid-template-columns: initial;
		row-gap: var(--rem20);
	}
}


/* -----受診可能な医療機関一覧----- */
.search-conditions {
	max-width: 540px;
	width: 100%;
	margin: 0 auto var(--rem30);
	background: #fff;
	padding: var(--rem30);
	text-align: center;
	border-radius: 20px;
	border: 2px solid var(--local-municipality-primary-color);

	.search-label {
		font-size: var(--rem24);
		font-weight: bold;
		margin-bottom: var(--rem16);
	}

	.search-value {
		font-size: var(--rem24);
		font-weight: bold;
	}
}

.result-count {
	font-size: var(--rem42);
	text-align: center;
	font-weight: bold;
	color: var(--local-municipality-primary-color);
	margin-bottom: var(--px120);
}

.map-disclaimer {
	margin-bottom: var(--rem40);
}

.facility-item {
	background: var(--color-backgroun02);
	padding: var(--rem40);
	margin-bottom: var(--rem40);

	.facility-name {
		text-align: center;
		padding: 0 0 0.4em;
		border-bottom: 1px solid #a6a6a6;
	}

	.facility-address {
		margin-bottom: var(--rem20);
		padding: 0 0 var(--rem20);
		border-bottom: 1px solid #a6a6a6;
	}

	.map-link {
		text-align: center;
		margin-bottom: var(--rem40);

		a {
			border-bottom: 1px solid #333;

			&::before {
				content: "\f3c5";
				display: inline;
				font-family: 'FontAwesome';
				font-size: 1.4rem;
				font-weight: 400;
				line-height: 1;
				color: var(--local-municipality-accent-color);
				margin-right: 1rem;
			}
		}
	}
}

.facility-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	column-gap: var(--rem20);

	.action-button {
		position: relative;
		display: inline-block;
		width: 100%;
		max-width: 240px;
		font-size: var(--rem16);
		line-height: 1.8;
		text-align: center;
		font-weight: 600;
		padding: var(--rem20) 30px var(--rem20) 20px;
		margin: 0;
		border: none;
		border-radius: 50vh;
		transition: all .3s;
		color: #fff;
		background: var(--local-municipality-accent-color);

		&::after {
			display: block;
			content: '';
			position: absolute;
			top: 50%;
			right: 20px;
			width: 6px;
			height: 6px;
			border-right: 1px solid #fff;
			border-bottom: 1px solid #fff;
			-webkit-transform: rotate(-45deg);
			transform: rotate(-45deg);
			margin-top: -3px;
			transition: all .3s;
		}

		&:hover {
			opacity: 0.7;
		}

		&.tel-button {
			.icon-phone {
				&::before {
					content: "\f095";
					display: inline;
					font-family: 'FontAwesome';
					font-size: 1.4rem;
					font-weight: 400;
					line-height: 1;
				}
			}
		}
	}
}

@media print,
screen and (max-width: 768px) {
	.facility-actions {
		flex-direction: column;
		row-gap: var(--rem20);
	}
}

/* -----医療機関を探す----- */
.google-map-section-wrap {
	margin-bottom: var(--px120);

	.contact-instruction {
		padding: var(--rem40);
		background: #F9F6F0;

		h3 {
			font-size: var(--rem24);
			font-weight: 600;
			text-align: left;
			color: var(--local-municipality-primary-color);
			line-height: 1.4;
			overflow-wrap: break-word;
			padding: 0 0 0 var(--rem16);
			margin: 0 auto var(--rem30);
			border: none;
			background: transparent;
			border-left: min(calc(6px + (1vw - 19.2px) * 0.1294), 6px) solid var(--local-municipality-primary-color);
		}

		p {
			text-align: center;


			&:first-child {
				font-weight: bold;
			}
		}
	}
}

@media print,
screen and (max-width: 768px) {
	.google-map-section-wrap {

		.contact-instruction {

			p {
				text-align: left;
			}
		}
	}
}

h3.google-map-title {
	font-size: var(--rem24w);
	font-family: var(--font-family01);
	font-weight: 600;
	letter-spacing: .1rem;
	padding: .4em;
	margin: var(--px60) auto var(--px20);
	border-bottom: none;
	background: var(--local-municipality-primary-color);
	color: #fff;
	text-align: center;
	position: relative;

	&:hover {
		cursor: pointer;
	}

	&::before,
	&::after {
		content: '';
		display: inline-block;
		width: 20px;
		height: 2px;
		background-color: #fff;
		position: absolute;
		right: 20px;
		top: 50%;
		transform: translateY(-50%);
		transition: opacity 1s;
	}

	&::after {
		transform: translateY(-50%) rotate(90deg);
		transition: transform 1s;
	}
}

.google-map-section-1.active,
.google-map-section-2.active {
	h3.google-map-title {

		&::after {
			transform: translateY(-50%) rotate(180deg);
		}
	}
}

.google-map-section-1 {
	margin-bottom: var(--rem80);
}

.custom-map-modal-content {
	position: relative;
	background: #F9F6F0;
	padding: 20px;
	border-radius: 8px;
	max-width: 740px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	z-index: 1002;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.popup-info-row.address .popup-info-label,
.popup-info-row.tel .popup-info-label,
.popup-info-row.lat,
.popup-info-row.lng,
.popup-info-row.mapsURL .popup-info-label {
	display: none;
}

.popup-info-container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-column-gap: 0px;
	grid-row-gap: 0px;
	align-items: center;
}

.popup-info-container .popup-info-row.webURL {
	grid-area: 3 / 2 / 4 / 3;
}

.popup-info-container .popup-info-row.webURL .popup-info-label {
	display: none;
}

.popup-info-container .popup-info-row.webURL .popup-info-value a {
	position: relative;
	display: inline-block;
	width: 100%;
	max-width: 240px;
	font-size: var(--rem16);
	line-height: 1.8;
	text-align: center;
	font-weight: 600;
	padding: var(--rem20) 30px var(--rem20) 20px;
	margin: 0;
	border: none;
	border-radius: 50vh;
	transition: all .3s;
	color: #fff;
	background: var(--local-municipality-accent-color);

	&::after {
		display: block;
		content: '';
		position: absolute;
		top: 50%;
		right: 20px;
		width: 6px;
		height: 6px;
		border-right: 1px solid #fff;
		border-bottom: 1px solid #fff;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
		margin-top: -3px;
		transition: all .3s;
	}
}

.popup-info-row {
	&.address {
		order: 1;
	}

	&.tel {
		order: 3;
		text-align: right;
		margin-right: var(--rem20);
		grid-area: 3 / 1 / 4 / 2;

		.popup-info-value {
			display: inline-block;
			width: 100%;
			max-width: 240px;
			font-size: var(--rem16);
			line-height: 1.8;
			text-align: center;
			font-weight: 600;
			padding: var(--rem20) 30px var(--rem20) 20px;
			margin: 0;
			border: none;
			border-radius: 50vh;
			transition: all .3s;
			color: #fff;
			background: var(--local-municipality-accent-color);

			&::before {
				content: "\f095";
				display: inline;
				font-family: 'FontAwesome';
				font-size: 1.4rem;
				font-weight: 400;
				line-height: 1;
				margin-right: 10px;
			}
		}
	}

	&.mapsURL {
		order: 2;
		grid-area: 2 / 1 / 3 / 3;

		.popup-info-value {
			text-align: center;
			margin-bottom: var(--rem20);

			a {
				border-bottom: 1px solid var(--color-font);

				&::before {
					content: "\f3c5";
					display: inline;
					font-family: 'FontAwesome';
					font-size: 1.4rem;
					font-weight: 400;
					line-height: 1;
					color: var(--local-municipality-accent-color);
					margin-right: 1rem;
				}
			}
		}
	}

	&.custom-important_notes {
		grid-area: 4 / 1 / 5 / 3;
		text-align: center;
		margin-top: 10px;
	}
}




.custom-map-modal-content {
	.marker-popup {
		h3 {
			font-size: var(--rem24w);
			font-family: var(--font-family01);
			font-weight: 600;
			letter-spacing: .1rem;
			text-align: center;
			padding: 0 0 0.4em;
			border-bottom: 1px solid #a6a6a6;
		}
	}

	.popup-info-row.address {
		margin-bottom: var(--rem20);
		padding: var(--rem20) 0 var(--rem20);
		border-bottom: 1px solid #a6a6a6;
		grid-area: 1 / 1 / 2 / 3;
	}
}

.contact-instruction-title {
	text-align: center;

	a {
		display: inline-block;
		max-width: 300px;
		padding: var(--rem20);
		width: 100%;
		border: 2px solid var(--local-municipality-primary-color);
		color: var(--local-municipality-primary-color);
		position: relative;
		background: #fff;
		font-weight: bold;
		margin-bottom: var(--rem20);

		&:after {
			display: block;
			content: '';
			position: absolute;
			top: 50%;
			right: 20px;
			width: 6px;
			height: 6px;
			border-right: 2px solid var(--local-municipality-primary-color);
			border-bottom: 2px solid var(--local-municipality-primary-color);
			-webkit-transform: rotate(45deg);
			transform: rotate(45deg);
			margin-top: -3px;
			transition: all .3s;
		}
	}
}

.search-conditions-title {
	text-align: center;

	a {
		display: inline-block;
		max-width: 700px;
		padding: var(--rem20);
		width: 100%;
		border: 2px solid var(--local-municipality-primary-color);
		color: var(--local-municipality-primary-color);
		position: relative;
		background: #fff;
		font-weight: bold;
		position: fixed;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);


		&:after {
			display: block;
			content: '';
			position: absolute;
			top: 50%;
			right: 20px;
			width: 6px;
			height: 6px;
			border-right: 2px solid var(--local-municipality-primary-color);
			border-bottom: 2px solid var(--local-municipality-primary-color);
			-webkit-transform: rotate(-135deg);
			transform: rotate(-135deg);
			margin-top: -3px;
			transition: all .3s;
		}
	}
}

@media print,
screen and (max-width: 450px) {
	#custom-map-modal {
		padding: 0 5%;
	}

	.custom-map-modal-content {
		.popup-info-row.address {
			grid-area: 1 / 1 / 2 / 3;
		}
	}

	.popup-info-row {
		&.tel {
			text-align: center;
			margin-bottom: var(--rem20);
			margin-right: 0;
			grid-area: 3 / 1 / 3 / 3;
		}
	}

	.popup-info-container .popup-info-row.webURL {
		grid-area: 4 / 1 / 4 / 4;
		text-align: center;
	}

	.popup-info-row {
		&.mapsURL {
			grid-area: 2 / 1 / 3 / 3;
		}
	}
}

/*================================
  受診する医療機関を選ぶ(地区別ページ有の場合のみ)
================================*/
.area-list {
	margin-top: var(--px120);
	display: grid;
	grid-template-columns: minmax(auto, 320px);
	justify-content: center;
	row-gap: var(--rem40);
}

.area-link {
	position: relative;
	display: inline-block;
	width: 100%;
	font-size: var(--rem16);
	line-height: 1.8;
	text-align: center;
	font-weight: 600;
	padding: var(--rem20) 30px var(--rem20) 20px;
	margin: 0;
	border: none;
	border-radius: 50vh;
	transition: all .3s;
	color: #fff;
	background: var(--local-municipality-accent-color);

	&::after {
		display: block;
		content: '';
		position: absolute;
		top: 50%;
		right: 20px;
		width: 6px;
		height: 6px;
		border-right: 1px solid #fff;
		border-bottom: 1px solid #fff;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
		margin-top: -3px;
		transition: all .3s;
	}

	&:hover {
		opacity: 0.7;
		color: #fff;
	}

	&.tel-button {
		.icon-phone {
			&::before {
				content: "\f095";
				display: inline;
				font-family: 'FontAwesome';
				font-size: 1.4rem;
				font-weight: 400;
				line-height: 1;
			}
		}
	}
}

.back-to-top {
	margin-top: var(--rem80);
	text-align: center;

	.back-link {
		border-bottom: 1px solid #333;
		padding-bottom: 10px;
		font-weight: bold;

		&::before {
			content: "\f0a8";
			display: inline;
			font-family: 'FontAwesome';
			font-size: 1.4rem;
			font-weight: 400;
			line-height: 1;
			margin-right: 1rem;
		}
	}
}

.important-notes {
	margin-top: var(--rem20);
	text-align: center;
	line-height: 1.6em;
}