@charset "utf-8";

:root {
	--vw: 1vw;
	--main-font-color: #464646;
	--main-color-dark: #0a5859;
	--main-color: #00a5a8;
	--main-color-middle: #edf7f7;
	--main-color-light: #c2edee;
	--main-color-super-light: #eaf6f6;
	--default-letter-spacing: 0.05em;
	--default-transition: 0.5s;
	--max-width: 1200px;
	--inner-padding: 40px;
	--inner-width: calc(var(--max-width) + var(--inner-padding) * 2);
	--over-margin: min(calc((-1 * var(--vw) * 100 + var(--max-width)) / 2),
			calc(-1 * var(--inner-padding)));
	/* noto入れるの忘れない */
	--font-main: YakuHanJPs, "Noto Sans JP", "メイリオ", "Meiryo", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Hiragino Sans, "Osaka", "MS PGothic", -apple-system,
		BlinkMacSystemFont, arial, helvetica, sans-serif;
	--font-min: YakuHanMPs;
	--font-maru: YakuHanRPs, "Kosugi Maru", sans-serif;
	--font-en: "Marcellus", serif;
}

/*共通*/
.catch_copy,
.flow_arrow_box .tl,
.flow_arrow_box .tl_block .step p,
#under .catch,
.m_col_ttl,
.reason_line_text_ttl,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-maru);
}

.t_section {
	padding: 13vw 0;
}

.under_page_wrap  #wrapper {
	padding-top: 13.867vw;
}

/*その他の追加変更 ここから*/
.m_ttl01 {
	text-align: center;
	margin-bottom: 8vw;

	.txt01 {
		font-size: 2.2rem;
		letter-spacing: 0.12em;
		display: block;
		line-height: 1.5;
	}

	.txt02 {
		font-size: 1.6rem;
		letter-spacing: 0.48em;
		display: block;
		color: var(--main-color);
		line-height: 1.5;
		font-family: var(--font-en);
		margin-top: 2vw;
	}
}

.m_txt p {
	line-height: 1.875;
}

.m_txt p+p {
	margin-top: 1em;
}

.btn01 {
	--btn-height: 13vw;
	--btn-width: auto;
	--icon-right: 2vw;
	--icon-size: 5vw;
	--icon-color: #fff;
	--border-radius: 0;
	--border-width: 2px;
	font-size: 1.7rem;
	padding: 2.9vw 8vw 2.4vw;
	background: #fff;
	color: var(--main-color);
	letter-spacing: 0.1em;
	line-height: 1.4;
	border-radius: var(--border-radius);
	font-family: var(--font-maru);
	border: var(--border-width) solid var(--main-color);
	min-width: var(--btn-width);
	min-height: var(--btn-height);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-inline: auto;
}

.btn01:before {
	content: "";
	position: absolute;
	border: 0;
	top: 50%;
	right: var(--icon-right);
	width: var(--icon-size);
	height: auto;
	aspect-ratio: 1/1;
	transform: translateY(-50%);
	background: url(../images/icon_arrow02.webp) center / 100% no-repeat;
}

.btn01:after {
	display: none;
}

.btn01 span:before {
	border-radius: var(--border-radius);
	content: '';
	display: block;
	position: absolute;
	top: calc(var(--border-width) * -1);
	left: calc(var(--border-width) * -1);
	width: calc(100% + var(--border-width) * 2);
	height: calc(100% + var(--border-width) * 2);
	z-index: 10;
	background: #fff;
	opacity: 0;
	pointer-events: none;
	border-radius: var(--border-radius);
	transition: 0.5s;
}

/*______________________________________________________________________________________
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
m_mv
______________________________
^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/
.m_mv {
	position: relative;
	padding-top: 13.9vw;
}

.m_mv img {
	width: 100%;
}

.m_mv_inner {
	position: relative;
}

.m_mv_main {
	position: relative;
	z-index: 1;
}

.m_mv_main video {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 110%;
	height: 55.5vw;
	z-index: 1;
	-webkit-transform: rotate3d(1, 1, 1, 0.001deg) translate(-50%, -50%);
	transform: rotate3d(1, 1, 1, 0.001deg) translate(-50%, -50%);
}

.m_mv_txt {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	width: 100%;
	height: 100%;
}

/*______________________________________________________________________________________
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
t_info
______________________________
^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/
.t_info {

	.t_info_block {
		display: grid;
		gap: 8vw;
	}

	.t_info_item {
		overflow: hidden;
	}

	.m_newslist {
		overflow: hidden;
		border-top: 2px solid var(--main-font-color);
		border-bottom: 2px solid var(--main-font-color);
	}

	.m_newslist_item {
		border-bottom: 1px solid var(--main-font-color);
	}

	.m_newslist_item:last-of-type {
		border-bottom: 0;
	}

	.m_newslist_item_in {
		display: flex;
		overflow: hidden;
		padding: 4vw 0.5vw;
		text-decoration: none;
		gap: 3vw;
	}

	.m_newslist_item_in .date {
		letter-spacing: 0.14em;
		color: var(--main-color);
		margin-right: 0;
	}

	.m_newslist_item_in em {
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		line-height: 1.85;
	}

	.t_info_cta {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 2vw;
		margin-top: 5vw;
	}
}

.m_table_clinic_box {
	background: #edf7f7;
	padding: 2.5vw;
}

.m_table_clinic_ttl {
	color: #fff;
	background: var(--main-color);
	text-align: center;
	padding: 1vw;
	margin-bottom: 0vw;
}

.m_table_clinic_hosoku_box {
	margin-top: 1.7vw;
}

.m_table_clinic_hosoku {
	font-size: 1.4rem;
}

.m_address {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2vw;
	margin-top: 2.7vw;
}

.m_address01 {
	padding-left: 4vw;
	position: relative;

	&:before {
		content: '';
		display: block;
		position: absolute;
		top: 50%;
		left: 0;
		width: 3vw;
		aspect-ratio: 30/44;
		z-index: 1;
		transform: translateY(-50%);
		background: url(../images/icon_pin.webp) center / 100% no-repeat;
	}
}

.m_address02 {
	border: 1px solid var(--main-font-color);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-maru);
	padding: 2vw 18vw;
	border-radius: 10rem;
}

.m_info_head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 5vw;

	a {
		text-decoration: none;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 22vw;
		height: 8vw;
		color: var(--main-color);
		font-size: 1.4rem;
		border: 1px solid var(--main-color);
		letter-spacing: 0.1em;
	}
}

.m_info_head_ttl {
	color: var(--main-color);
	font-family: var(--font-en);
	letter-spacing: 0.1em;
	line-height: 1;
	font-size: 2.4rem;
}

/*______________________________________________________________________________________
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
t_message
______________________________
^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/
.t_message {
	background: url(../images/top/message_bg_sp.webp) center top / 100% no-repeat;
	position: relative;
	isolation: isolate;
	padding: 10vw 0 13vw;

	&:before {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -1;
		background: linear-gradient(90deg, rgba(0, 165, 168, 0.16) 0%, rgba(255, 255, 255, 0) 100%);
		opacity: 0.6;
	}

	.t_message_ttl {
		width: 80vw;
		margin: 0 auto;
	}

	.t_message_block {
		display: flex;
		flex-direction: column;
	}

	.t_message_imgs {
		position: relative;
		margin-top: 6vw;
	}

	.t_message_img01 {
		width: 40vw;
		margin-left: auto;
		position: relative;
		left: -3vw;
		z-index: 5;
	}

	.t_message_img_box {
		position: relative;
		left: 0;
		bottom: 0;
		width: 40vw;
		margin-top: -11vw;
		margin-left: -1.6vw;
	}

	.t_message_img02 {
		position: relative;
		z-index: 1;
	}

	.t_message_logo {
		position: absolute;
		left: 80%;
		bottom: -3vw;
		width: 23vw;
		z-index: 10;
	}

	.t_message_txt {
		margin-top: 5vw;
	}

	.t_message_btn {
		display: grid;
		gap: 2vw;
		margin-top: 6vw;

		.btn {
			margin-top: 0;
		}
	}

	.t_message_img03 {
		width: 31vw;
		margin-top: -12vw;
		margin-left: auto;
		margin-right: -2vw;
	}
}

/*______________________________________________________________________________________
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
t_trouble
______________________________
^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/
.t_trouble {
	background: url(../images/top/trouble_bg.webp) center bottom / 120% no-repeat;
	padding-bottom: 60vw;

	.t_trouble_list {
		counter-reset: trouble-list;
		display: grid;
		gap: 2vw;

		li {
			counter-increment: trouble-list;
		}

		a {
			background: #188384;
			color: #fff;
			font-family: var(--font-maru);
			line-height: 1.5;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			isolation: isolate;
			overflow: hidden;
			min-height: 17vw;
			font-size: 1.7rem;
			text-decoration: none;

			&:before {
				content: '0' counter(trouble-list);
				display: block;
				position: absolute;
				top: -0.4vw;
				left: -0.2vw;
				z-index: -1;
				font-family: var(--font-maru);
				font-size: 4rem;
				opacity: 0.1;
				letter-spacing: 0.025em;
				line-height: 1;
			}

			&:after {
				content: '';
				display: block;
				position: absolute;
				bottom: 1.3vw;
				right: 1.3vw;
				width: 5.4vw;
				aspect-ratio: 1/1;
				z-index: -1;
				border-bottom: 1px solid #fff;
				border-right: 1px solid #fff;
			}

			li:nth-of-type(2n) & {
				background: var(--main-color);
			}

			li:nth-of-type(n+10) & {
				&:before {
					content: counter(trouble-list);
				}
			}
		}
	}
}

/*______________________________________________________________________________________
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
t_medical
______________________________
^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/
.t_medical {
	background: url(../images/top/medical_bg_sp.webp) center bottom / 100% no-repeat;
	border-top: 1px solid var(--main-color);
	padding-top: 0;

	.t_medical_ttl {
		background: var(--main-color);
		width: 34vw;
		aspect-ratio: 1/1;
		border-radius: 50%;
		color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		gap: 3vw;
		z-index: 10;
		position: absolute;
		top: 0;
		left: 50%;
		transform: translate(-50%, -50%);

		.txt01 {
			line-height: 1;
			letter-spacing: 0.12em;
			font-size: 2rem;
		}

		.txt02 {
			font-family: var(--font-en);
			letter-spacing: 0.48em;
			font-size: 1rem;
			line-height: 1;
		}
	}

	.t_medical_list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 3vw;
		padding-top: 23vw;
	}

	.t_medical_item_in {
		--gap: 1.5vw;
		text-decoration: none;
		background: #fff;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		min-height: 36vw;
		box-shadow: 0px 0px 1.4rem -0.4rem color-mix(in srgb, #000 20%, transparent);

		&:before {
			content: '';
			display: block;
			position: absolute;
			top: var(--gap);
			left: var(--gap);
			width: calc(100% - var(--gap) * 2);
			height: calc(100% - var(--gap) * 2);
			z-index: 1;
			border: 1px solid var(--main-color);
			pointer-events: none;
		}
	}

	.t_medical_item_content {
		/* アロー */
		--arrow-url: url(../images/icon_arrow.svg);
		--arrow-color: #fff;
		--arrow-size: 4vw;
		/* 円 */
		--circle-pos: -0.8vw;
		--circle-size: 6vw;
		--circle-height: var(--circle-size);
		--circle-bg-color: var(--main-color);

		&:before {
			content: '';
			display: block;
			position: absolute;
			bottom: var(--circle-pos);
			right: var(--circle-pos);
			width: var(--circle-size);
			height: var(--circle-height);
			-webkit-mask: var(--arrow-url) left 55% top 50% / var(--arrow-size) no-repeat;
			mask: var(--arrow-url) left 55% top 50% / var(--arrow-size) no-repeat;
			background: var(--arrow-color);
			z-index: 2;
			transition: var(--default-transition);
		}

		&:after {
			content: '';
			display: block;
			position: absolute;
			right: var(--circle-pos);
			bottom: var(--circle-pos);
			width: var(--circle-size);
			height: var(--circle-height);
			z-index: 1;
			border-radius: 50%;
			background: var(--circle-bg-color);
			transition: var(--default-transition);
		}
	}

	.t_medical_item_icon {
		width: 14vw;
		margin: 0 auto;
	}

	.t_medical_item_ttl {
		display: flex;
		flex-direction: column;
		align-items: center;

		.txt01 {
			font-family: var(--font-maru);
			letter-spacing: 0.01em;
			line-height: 1.3;
			font-size: 1.7rem;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			min-height: 2.5em;

			span {
				font-size: 1.2rem;
				letter-spacing: 0.01em;
			}
		}

		.txt02 {
			font-family: var(--font-en);
			color: var(--main-color);
			letter-spacing: 0.2em;
			font-size: 1.2rem;
			line-height: 1;
		}
	}
}

/*______________________________________________________________________________________
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
t_reason
______________________________
^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/
.t_reason {
	padding: 0;

	.t_reason_head {
		position: relative;
		border-top: 1px solid var(--main-color);
		border-bottom: 1px solid var(--main-color);
		background: #fff;
		box-shadow: 0px 0px 1.4rem -0.4rem color-mix(in srgb, #000 20%, transparent);
		padding: 7vw 0;
		isolation: isolate;
		margin: 0 -5vw;

		&:before {
			content: '';
			display: block;
			position: absolute;
			top: 4px;
			left: 0;
			width: 100%;
			height: calc(100% - 8px);
			z-index: -1;
			background: url(../images/top/reason_head_bg.webp) center / cover no-repeat;
		}
	}

	.t_reason_ttl {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;

		.txt01 {
			font-family: var(--font-en);
			padding-left: 0.3em;
			letter-spacing: 0.3em;
			color: var(--main-color);
			font-size: 4.5rem;
			line-height: 1.2;
		}

		.txt02 {
			font-family: var(--font-maru);
			display: flex;
			align-items: center;
			gap: 2vw;
			font-size: 1.4rem;

			&:before,
			&:after {
				content: '';
				display: block;
				width: 4vw;
				height: 1px;
				z-index: 1;
				background: var(--main-font-color);
			}
		}
	}

	.t_reason_body {
		padding: 12vw 0;
	}

	.m_reason_head {
		position: relative;
	}

	.m_reason_img {
		position: relative;
		isolation: isolate;
		z-index: 1;

		&:before {
			content: '';
			display: block;
			position: absolute;
			width: 30vw;
			z-index: -1;
			border: 1px solid var(--main-color);
		}
	}

	.m_reason_catch {
		font-family: var(--font-maru);
		text-align: center;
		letter-spacing: 0.12em;
		line-height: 1.5;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 10;
	}

	.m_reason_body {
		margin-top: 5vw;
	}

	.m_reason_num {
		position: relative;
		font-size: 4rem;
		font-family: var(--font-en);
		color: var(--main-color);
		text-align: center;
		padding-top: 3.6vw;
		line-height: 1;

		&::first-letter {
			color: #cdcdcd;
		}

		&:before {
			content: '';
			display: block;
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 15vw;
			aspect-ratio: 140/36;
			z-index: 1;
			background: url(../images/top/reason_en.webp) center top / 100% no-repeat;
		}
	}

	.m_reason_ttl {
		border-top: 1px solid var(--main-font-color);
		border-bottom: 1px solid var(--main-font-color);
		text-align: center;
		padding: 4vw 0 3.8vw;
		letter-spacing: 0.12em;
		line-height: calc(36/23);
		margin-top: 4vw;
		font-size: 1.8rem;
	}

	.m_reason_txt {
		margin-top: 4vw;
	}

	.m_reason_btn {
		margin-top: 5vw;
	}

	.m_reason_bnr_list {
		display: grid;
		gap: 3vw;
		margin-top: 6vw;

		li {
			background: #fff;
		}

		a {
			display: block;
		}
	}

	.m_reason01 {
		.m_reason_catch {
			background: color-mix(in srgb, #f58220 80%, transparent);
			aspect-ratio: 300/210;
			border-radius: 50%;
			width: 43vw;
			position: absolute;
			right: 0;
			bottom: -5vw;
		}

		.m_reason_img01 {
			width: 75vw;

			&:before {
				border-color: #b2e4e5;
				aspect-ratio: 200/150;
				width: calc(200 / 430 * 100%);
				left: -5%;
				top: -5%;
			}
		}

		.m_reason_imgs {
			display: flex;
			gap: 5vw;
			margin-top: 5vw;
			justify-content: flex-end;
		}

		.m_reason_img02 {
			width: 43vw;

			&:before {
				aspect-ratio: 400/240;
				width: calc(400 / 480 * 100%);
				right: -5%;
				bottom: -15%;
			}
		}

		.m_reason_img03 {
			width: 36vw;

			&:before {
				aspect-ratio: 400/240;
				width: calc(400 / 400 * 100%);
				border-color: #b2e4e5;
				right: -5%;
				top: -8%;
			}
		}
	}

	.m_reason02 {
		margin-top: 15vw;

		.m_reason_catch {
			background: color-mix(in srgb, #00a5a8 80%, transparent);
			aspect-ratio: 1/1;
			border-radius: 50%;
			width: 43vw;
			position: absolute;
			left: 3vw;
			bottom: -5vw;
			font-size: 1.4rem;
		}

		.m_reason_img01 {
			width: 86vw;

			&:before {
				aspect-ratio: 430/300;
				width: calc(430 / 490 * 100%);
				left: -5%;
				top: -3%;
			}

			&:after {
				content: '';
				display: block;
				position: absolute;
				aspect-ratio: 230/200;
				width: calc(230 / 490 * 100%);
				right: -5%;
				bottom: 4%;
				z-index: -1;
				border: 1px solid var(--main-color);
				border-color: #b2e4e5;
			}
		}
	}

	.m_reason03 {
		margin: 10vw -5vw 0;
		padding: 6vw 5vw 51vw;
		background: #929292 url(../images/top/reason03_bg_sp.webp) center bottom / 100% no-repeat;
		color: #fff;

		.m_reason_num {
			color: #fff;

			&::first-letter {
				color: #fff;
			}

			&:before {
				background-image: url(../images/top/reason_en_white.webp);
			}
		}

		.m_reason_ttl {
			border-color: #fff;
		}

		.m_reason_img01 {
			width: 75vw;

			&:before {
				border-color: #b2e4e5;
				aspect-ratio: 200/150;
				width: calc(200 / 430 * 100%);
				left: -5%;
				top: -5%;
			}
		}
	}

	.m_reason04 {
		margin-top: 10vw;

		.m_reason_catch {
			background: color-mix(in srgb, #f58220 80%, transparent);
			aspect-ratio: 300/210;
			border-radius: 50%;
			width: 37vw;
			position: absolute;
			left: 69%;
			transform: translateX(-50%);
			bottom: 5vw;
			font-size: 1.3rem;
		}

		.m_reason_img01 {
			width: 100%;

			&:before {
				aspect-ratio: 1/1;
				width: calc(110 / 510 * 100%);
				right: -3%;
				top: -5%;
			}

			&:after {
				content: '';
				display: block;
				position: absolute;
				aspect-ratio: 1/1;
				width: calc(110 / 490 * 100%);
				left: -2.3%;
				bottom: -5%;
				z-index: -1;
				border: 1px solid var(--main-color);
			}
		}
	}

	.m_reason05 {
		position: relative;
		isolation: isolate;
		margin-top: 10vw;

		&:before {
			content: '';
			display: block;
			position: absolute;
			top: -15vw;
			right: -5vw;
			width: 150vw;
			aspect-ratio: 1600/500;
			z-index: -1;
			background: url(../images/top/reason05_bg.webp) center / 100% no-repeat;
		}

		.m_reason_catch {
			background: color-mix(in srgb, var(--main-color) 80%, transparent);
			aspect-ratio: 300/210;
			border-radius: 50%;
			width: 39vw;
			position: absolute;
			right: 12vw;
			bottom: 22vw;
		}

		.m_reason_img01 {
			width: 80vw;
			margin-left: auto;

			&:before {
				aspect-ratio: 450/370;
				width: calc(450 / 450 * 100%);
				left: -5%;
				top: 5%;
			}
		}

		.m_reason_img_row {
			display: flex;
			align-items: flex-start;
			justify-content: flex-end;
			margin-top: 8vw;
			gap: 5vw;
		}

		.m_reason_img02 {
			width: 51vw;
			margin-top: 4vw;

			&:before {
				border-color: #b2e4e5;
				aspect-ratio: 1/1;
				width: calc(170 / 360 * 100%);
				left: -18%;
				bottom: -39%;
			}
		}

		.m_reason_img03 {
			width: 15vw;

			&:before {
				aspect-ratio: 115/220;
				width: calc(115 / 115 * 100%);
				left: 5%;
				top: 5%;
			}
		}
	}
}

/*______________________________________________________________________________________
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
t_pickup_btns
______________________________
^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/
.t_pickup_btns {
	margin-top: 12vw;

	a {
		display: block;
	}
}

/*______________________________________________________________________________________
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
t_info02
______________________________
^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/
.t_info02 {
	padding: 0;

	.t_info02_item {
		background: #edf7f7;

		&:nth-of-type(2) {
			background: #d7f1f1;
		}
	}

	.t_info02_in {
		padding: 13vw 5vw;
	}

	.t_info02_ttl {
		&.m_ttl01 {}
	}

	.btn {
		width: 80%;
		margin-top: -7vw;
	}
}

/*______________________________________________________________________________________
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
t_insta
______________________________
^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/
.t_insta {
	position: relative;

	.t_insta_btn {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -33%);
		z-index: 10;
		width: 23vw;
		filter: drop-shadow(0px 0px 1rem color-mix(in srgb, #000 30%, transparent));
	}

	.t_insta_block {
		position: relative;
		z-index: 1;
	}

	#sbi_load {
		margin-top: 3vw;
	}

	.sb_instagram_header {
		padding-left: 5px !important;
	}
}