@charset "utf-8";

:root {
	--vw: 1vw;
	--main-font-color: #231815;
	--main-color: #55b4bc;
	--main-color-middle: #e5bb9b;
	--main-color-light: #fadeca;
	--main-color-super-light: #fbf3ec;
	--blue: #55b4bc;
	--blue-light01: #6dc7ec;
	--orange: #f39754;
	--orange-light01: #efb78e;
	--gray: #a0a0a0;
	--default-letter-spacing: 0.05em;
	--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, "Zen Maru Gothic";
	--font-en: "Montserrat", sans-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);
}

.img_bg_block {
	padding: 13vw 0;
}

#wrapper {
	padding-top: 52px;
}

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

.m_ttl01 .txt01 {
	font-size: 1.3rem;
	letter-spacing: 0.28em;
	color: #ada190;
	font-family: var(--font-en);
	font-weight: 500;
	line-height: 1;
}

.m_ttl01 .txt02 {
	font-family: var(--font-maru);
	font-size: 1.8rem;
	letter-spacing: 0.15em;
	line-height: 1.5;
	font-weight: 500;
	margin-top: 2.3vw;
}

.m_ttl01 .txt03 {
	font-family: var(--font-maru);
	font-size: 2.5rem;
	letter-spacing: 0.19em;
	line-height: 1.5;
	font-weight: 500;
}

.m_ttl01 .txt03 span {
	font-size: 1.9rem;
	letter-spacing: 0.19em;
	position: relative;
	top: -0.1em;
}

.m_txt p {
	line-height: 1.875;
	font-size: 1.5rem;
}

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

.btn01 {
	--btn-height: 13vw;
	--btn-width: auto;
	--icon-color: #fff;
	--border-radius: calc(var(--btn-height) / 2);
	--border-width: 0px;
	font-size: 1.5rem;
	padding: 3vw 8vw 3.1vw;
	background: #efb78e;
	color: #fff;
	letter-spacing: 0.1em;
	line-height: 1.4;
	font-family: var(--font-maru);
	border-radius: var(--border-radius);
	border: var(--border-width) solid #fff;
	min-width: var(--btn-width);
	min-height: var(--btn-height);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-inline: auto;
	font-weight: 500;
}

.btn01:before {
	content: "";
	position: absolute;
	border: 0;
	top: 50%;
	right: 2.5vw;
	width: 2vw;
	height: auto;
	aspect-ratio: 7/10;
	transform: translateY(-50%);
	-webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	background: var(--icon-color);
}

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

.btn_white {
	--icon-color: #55b4bc;
	color: #55b4bc;
	background: #fff;
}

/*______________________________________________________________________________________
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
m_mv
______________________________
^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/
.m_mv {
	position: relative;
}

.m_mv img {
	width: 100%;
}

.m_mv_inner {
	position: relative;
}

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

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

/*______________________________________________________________________________________
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
t_trouble
______________________________
^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/
.t_trouble {
	background: #f1fbfa url(../images/top/trouble_bg_sp.jpg) center top / 100% no-repeat;
}

.t_trouble .img_bg_block {
	padding: 13vw 0 20vw;
}

.t_trouble .inner {
	position: static;
}

.t_trouble_ttl {
	width: 50vw;
}

.t_trouble_list {
	display: grid;
	gap: 3vw;
	margin-top: 9vw;
}

.t_trouble_list li {
	position: relative;
	isolation: isolate;
	padding: 3vw 3vw 3.1vw 8vw;

	&:before {
		content: '';
		display: block;
		position: absolute;
		top: 3.4vw;
		left: 2vw;
		width: 4.2vw;
		aspect-ratio: 1/1;
		z-index: 10;
		background: url(../images/icon_check.png) center / 100% no-repeat;
	}

	&:after {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: 1px solid #84ccc9;
		background: rgba(255, 255, 255, 0.5);
		z-index: 1;
	}

	span {
		position: relative;
		z-index: 5;
		font-size: 1.5rem;
		line-height: 1.5;
		display: block;
	}

	.shadow {
		--gutter: 3rem;
		--deg: 4.3deg;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		--webkit-clip-path: polygon(0 calc(100% + var(--gutter)), 100% calc(100% + var(--gutter)), 100% 100%, 0% 100%);
		clip-path: polygon(0 calc(100% + var(--gutter)), 100% calc(100% + var(--gutter)), 100% 100%, 0% 100%);
		z-index: -1;

		&:before,
		&:after {
			content: "";
			position: absolute;
			z-index: -1;
			bottom: 0;
			display: block;
			width: 70%;
			height: 100%;
			box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.3);
		}

		&:before {
			left: 5%;
			transform-origin: left bottom;
			transform: rotate(calc(var(--deg) * -1));
		}

		&:after {
			right: 5%;
			transform: rotate(var(--deg));
			transform-origin: right bottom;
		}
	}
}

.t_trouble_etc {
	font-family: var(--font-en);
	letter-spacing: 0.2em;
	font-size: 1.6rem;
	margin-top: 3vw;
}

.t_trouble_en {
	width: 70vw;
	position: absolute;
	bottom: 3vw;
	right: 3vw;
}

/*______________________________________________________________________________________
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
t_feature
______________________________
^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/
.t_feature {
	background: url(../images/top/feature_bg_top.jpg) center top / 100% no-repeat,
		url(../images/top/feature_bg_bottom.jpg) center bottom / 100% no-repeat;
	background-color: #eaf6f5;
}

.t_feature_block {
	margin-top: 10vw;
}

.m_feature {
	&+& {
		margin-top: 14vw;
	}
}

.m_feature_head {
	display: flex;
	align-items: center;
	gap: 7vw;
	flex-direction: row-reverse;
	justify-content: center;
}

.m_feature_head_img {
	position: relative;
	isolation: isolate;
	z-index: 1;
	width: 43vw;

	&:before {
		content: '';
		display: block;
		position: absolute;
		top: 3vw;
		left: 6vw;
		width: 100%;
		height: 100%;
		z-index: -1;
		background: #fff;
		opacity: 0.5;
	}

	figure {
		--gutter: 3vw;
		--gutter02: 2vw;
		position: relative;

		&:before {
			content: '';
			display: block;
			position: absolute;
			top: calc(var(--gutter) * -1);
			left: calc(var(--gutter) * -1);
			width: 100%;
			height: 100%;
			z-index: 10;
			border: 2px solid #fff;
			-webkit-clip-path: polygon(var(--gutter02) var(--gutter), 100% var(--gutter), 100% 100%, var(--gutter02) 100%);
			clip-path: polygon(var(--gutter02) var(--gutter), 100% var(--gutter), 100% 100%, var(--gutter02) 100%);
		}

		&:after {
			content: '';
			display: block;
			position: absolute;
			top: calc(var(--gutter) * -1);
			left: calc(var(--gutter) * -1);
			width: 100%;
			height: 100%;
			z-index: 1;
			border: 2px solid #c1e4e3;
		}

		img {
			position: relative;
			z-index: 5;
		}
	}
}

.m_feature_en {
	color: #ada190;
	font-family: var(--font-en);
	font-weight: 500;
	display: flex;
	align-items: flex-end;
	flex-direction: column;
	gap: 1vw;

	span {
		letter-spacing: 0.2em;
		line-height: 1;
		font-size: 2.2rem;
	}

	em {
		letter-spacing: 0.03em;
		line-height: 1;
		font-size: 3.8rem;
	}
}

.m_feature_ttl {
	font-weight: 500;
	letter-spacing: 0.15em;
	line-height: 1.5;
	font-size: 1.85rem;
	margin-top: 5vw;
}

.m_feature_txt {
	margin-top: 4vw;

	p {
		letter-spacing: 0.1em;
	}
}

.m_feature_btn {
	margin-top: 5vw;
}

/*______________________________________________________________________________________
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
.t_menu
______________________________
^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/

.t_menu .img_bg_block {
	padding-bottom: 0;
}

.t_menu_catch {
	font-size: 1.8rem;
	text-align: center;
	letter-spacing: 0.1em;

	span {
		background: linear-gradient(transparent 60%, rgba(239, 183, 142, 0.2) 60%);
		letter-spacing: 0.1em;
		padding: 0 0.1em;
	}
}

.t_menu_block {
	margin-top: 10vw;
}

.t_menu_item {
	--bg: url(../images/top/menu_bg01.jpg);
	--color: #55b4bc;
	position: relative;
	padding-bottom: 14vw;
	isolation: isolate;

	&:before {
		content: '';
		display: block;
		position: absolute;
		bottom: 0;
		left: 50%;
		width: 100vw;
		height: calc(100% - 20vw);
		transform: translateX(-50%);
		z-index: -1;
		background: var(--bg) center;
	}

	+& {
		margin-top: 14vw;
	}

	.btn {
		background: var(--color);
		--border-width: 2px;
	}
}

.t_menu_home {
	--bg: url(../images/top/menu_bg02.jpg);
	--color: #6dc7ec;
}

.t_menu_dual {
	--bg: url(../images/top/menu_bg03.jpg);
	--color: #efab79;
}

.m_menu {
	background: #fff;
box-shadow: 0px 0px 4.2rem -0.4rem rgba(0, 0, 0, 0.2);
	padding: 5vw;
}

.m_menu_body {
	margin-top: 3vw;
}

.m_menu_ttl {
	display: flex;
	flex-direction: column;

	span {
		font-size: 2rem;
		font-weight: 500;
		letter-spacing: 0.15em;
	}

	em {
		font-family: var(--font-en);
		letter-spacing: 0.78em;
		font-weight: 500;
		color: var(--color);
		font-size: 1.1rem;
	}
}

.m_menu_txt {
	margin-top: 5vw;

	p {
		letter-spacing: 0.1em;
	}
}

.m_menu_bottom {
	margin-top: 13vw;
	display: grid;
	gap: 12vw;
}

.m_menu_md {
	--mb-color: var(--orange);
	--mb-check: url(../images/top/menu_check01.png);
	position: relative;
	border: 1px solid var(--mb-color);
	padding: 12vw 5vw 5vw;

	&:nth-of-type(2) {
		--mb-color: var(--gray);
		--mb-check: url(../images/top/menu_check02.png);
	}
}

.m_menu_md_ttl {
	border: 1px solid var(--mb-color);
	border-radius: 10rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	color: var(--mb-color);
	font-weight: 500;
	background: #fff;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 2vw 8vw;
	width: 62vw;

	span {
		letter-spacing: 0.025em;
		font-size: 1.5rem;
		line-height: 1.4;
	}

	em {
		letter-spacing: 0.15em;
		font-size: 1.9rem;
		line-height: 1.3;
	}
}

.m_menu_md_list {
	display: grid;
	gap: 2vw;

	li {
		position: relative;
		isolation: isolate;
		padding: 0 0 0 6.4vw;
		font-size: 1.45rem;
		
		
		

		&:before {
			content: '';
			display: block;
			position: absolute;
			top: 1.1vw;
			left: 0vw;
			width: 4.2vw;
			aspect-ratio: 1/1;
			z-index: 10;
			background: var(--mb-check) center / 100% no-repeat;
		}
	}
}

.t_menu_btn {
	margin-top: 8vw;
}

/*______________________________________________________________________________________
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
t_case
______________________________
^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/
.t_case {
	background: #838783 url(../images/top/case_bg.jpg) center;
	position: relative;
	isolation: isolate;
}

.t_case:before {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 50vw;
	aspect-ratio: 670/678;
	z-index: -1;
	transform: translateX(-50%);
	background: url(../images/top/case_img01.png) center bottom / 100% no-repeat;
}

.t_case .img_bg_block {
	padding: 13vw 0 50vw;
}

.t_case_ttl {
	color: #fff;
	position: relative;
	isolation: isolate;
}

.t_case_ttl span {
	font-size: 3rem;
	letter-spacing: 0.19em;
	font-weight: 500;
	line-height: 1;
	position: relative;
	z-index: 10;
	display: block;
}

.t_case_ttl em {
	position: absolute;
	top: 1vw;
	right: 13vw;
	width: 60vw;
	z-index: -1;
}

.t_case_txt {
	color: #fff;
	margin-top: 8vw;

	p {
		letter-spacing: 0.1em;
	}
}

.t_case_btn {
	margin-top: 8vw;
}

/*______________________________________________________________________________________
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
t_tech
______________________________
^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/
.t_tech {
	background: #dcf2f6 url(../images/top/tech_bg_sp.jpg) center / cover no-repeat;
}

.t_tech_catch01 {
	text-align: center;
	font-family: var(--font-maru);
	font-size: 2rem;
	letter-spacing: 0.15em;
	line-height: 1.8;
	font-weight: 500;

	span {
		letter-spacing: 0.15em;
		background: linear-gradient(transparent 60%, rgba(239, 183, 142, 0.5) 60%);
		padding: 0 0.1em;
	}
}

.t_tech_catch02 {
	font-family: var(--font-maru);
	color: var(--orange);
	font-size: 2.2rem;
	letter-spacing: 0.1em;
	line-height: 1.8;
	font-weight: 700;
	margin-top: 3vw;
	text-align: center;
}

.t_tech_txt {
	font-size: 1.5rem;
	letter-spacing: 0.1em;
	line-height: 1.8;
	text-align: center;
	margin-top: 4vw;
}

.t_tech_block {
	display: grid;
	margin-top: 8vw;
	gap: 8vw;
}

.t_tech_item {
	background: #fff;
	box-shadow: 0px 0px 4.2rem -0.4rem rgba(0, 0, 0, 0.2);
	padding: 5vw;
}

.m_tech_ttl {
	display: flex;
	align-items: center;
	font-family: var(--font-en);
	letter-spacing: 0.07em;
	font-size: 2.2rem;
	line-height: 1;
	gap: 4vw;

	&:after {
		content: '';
		display: block;
		flex: 1;
		height: 1px;
		z-index: 1;
		background: #231815;
	}
}

.m_tech_img {
	margin-top: 4vw;
}

.m_tech_txt {
	margin-top: 5vw;

	p {
		letter-spacing: 0.1em;
	}
}

.t_tech_btn {
    margin-top: 8vw;
}

/*______________________________________________________________________________________
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
m_slider
______________________________
^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/
.m_slider {
	margin-top: 5vw;
	margin-bottom: 5vw;
}

/*______________________________________________________________________________________
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
t_faq
______________________________
^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/
.t_faq {
	background: url(../images/top/faq_bg_left.png) left top / 80vw no-repeat,
		url(../images/top/faq_bg_right.png) right bottom / 80vw no-repeat;
	background-color: #f9fffe;
}

.t_faq_ttl {
	width: 58vw;
	margin: 0 auto;
}

.t_faq_block {
	margin-top: 8vw;
	display: grid;
	gap: 3vw;
}

.m_faq_head {
	border: 1px solid #84ccc9;
	display: flex;
	position: relative;

	&:before {
		content: 'Q';
		width: 11vw;
		color: #fff;
		font-family: var(--font-en);
		font-size: 2.3rem;
		line-height: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #84ccc9;
	}
}

.m_faq_ttl {
	flex: 1;
	font-weight: 500;
	font-size: 1.5rem;
	letter-spacing: 0.19em;
	background: #fff;
	padding: 3vw 8vw 3vw 4vw;
	line-height: 1.5;
	

	&:before,
	&:after {
		content: '';
		display: block;
		position: absolute;
		top: 50%;
		right: 2.5vw;
		width: 4vw;
		height: 2px;
		z-index: 1;
		background: #efb78e;
		transform: translateY(-1px);
		transition: 0.5s;
	}

	&:after {
		transform: translateY(-1px) rotate(90deg);
	}

	.m_faq.on &:after {
		transform: translateY(-1px) rotate(0deg);
	}
}

.m_faq_body {
	background: #c1e4e3;
	padding: 3vw 5vw;
	display: none;

	p {
		font-size: 1.4rem;
		letter-spacing: 0.1em;
	}
}

.t_faq_btn {
	margin-top: 8vw;
}

/*______________________________________________________________________________________
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
t_contact
______________________________
^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/
.t_contact {
	background: #09aba5;
}

.t_contact .img_bg_block {
    padding: 8vw 0;
}

.t_contact_block {
	display: flex;
	flex-direction: column;
	gap: 1.8vw;
}

.t_contact_info {
	display: flex;
	align-items: center;
	gap: 3vw;
	justify-content: space-between;
}

.t_contact_logo {
	width: 37vw;
}

.t_contact_tel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1;

	p {
		color: #fff;
		letter-spacing: 0.1em;
		font-size: 1.2rem;
	}
}

.t_contact_btns {
	display: flex;
	gap: 2vw;
}

/*______________________________________________________________________________________
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
t_clinic
______________________________
^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/
.t_clinic_head {
	.oft {
		height: 52vw;
	}
}

.t_clinic_logo {
	width: 30vw;
	display: block;
	margin: 4vw auto 0;
}

.t_clinic_table {
	margin-top: 5vw;
}

.t_clinic_hosoku {
	margin-top: 3vw;
}