@charset "utf-8";
/* CSS Document */


.bg_wide_pic {
	background-repeat: no-repeat !important;
}
#section01 .bg_wide_pic {
	background: url(img/section01_lead.png) #f9f7e7;
}

/*幅微調整*/
#ttl_area .txt {
	width: 434px;
}

/*flex box
----------------------------------*/
/*flex01*/
.flex01 {
	display: flex;
	justify-content: flex-start;
	align-items: stretch;
	flex-flow: row wrap;
	gap: 40px;
}
.flex01_item {
	width: calc(100%/2 - 40px/2);
}
/*flex02*/
.flex02 {
	display: flex;
	justify-content: flex-start;
	align-items: stretch;
	flex-flow: row wrap;
	gap: 40px;
}
.flex02_item {
	width: calc(100%/3 - 40px*2/3);
}
/*flex03*/
.flex03 {
	display: flex;
	justify-content: flex-start;
	align-items: stretch;
	flex-flow: row wrap;
	gap: 40px;
}
.flex03 .pic_wrap {
	width: 44%;
}
.flex03 .txt_wrap {
	width: calc(100% - (44% + 40px));
}

/*frame
----------------------------------*/
.frame01 {
	padding: 30px;
	background: #fff;
	border: solid 2px #e4dfdb;
	box-shadow: 0 3px 6px rgba(0,0,0,0.02);
}
.frame02 {
	padding: 20px;
	background: #fff;
	border: solid 2px #e4dfdb;
	box-shadow: 0 3px 6px rgba(0,0,0,0.02);
}

/*リンクボタン
----------------------------------*/
.link_btn {
	position: relative;
	z-index: 1;
	display: block;
	margin-inline: auto;
	width: fit-content;
	padding: 0 34px 2px 20px;
	background: #bbd587;
	border-radius: 5px;
	font-size: 15px;
	text-align: center;
	text-decoration: none!important;
	color: #fff !important;
}
.link_btn::before {
	position: absolute;
	z-index: 1;
	content: "";
	right: 20px;
	top: 50%;
	translate: 0 -50%;
	width: 8px;
	height: 12px;
	background: #fff;
	clip-path: polygon(0 0,100% 50%,0 100%);
}

/*こんなお悩みございませんか？
----------------------------------*/
.cases_group {
	display: flex;
	justify-content: flex-start;
	align-items: stretch;
	flex-flow: row wrap;
	gap: 40px;
}
.cases_item {
	width: calc(100%/3 - 40px*2/3);
}

/*ここがポイント！
----------------------------------*/
.point_frame {
	padding: 40px 50px;
	background: #ffefc0;
	/*border: 2px solid #e4dfdb;*/
	border-radius: 15px;
	text-align: center;
}
.point_ttl {
	margin-bottom: 20px;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	line-height: 1.7em;
}
.point_ttl span {
	display: inline-block;
	padding: 0 10px 4px;
	border-bottom: 2px solid #f8b551;
}
.point_frame .check_list {
	width: fit-content;
	margin-inline: auto;
}
.point_frame .check_list li {
	display: block;
	width: auto !important;
}

/*折り畳み式スイッチ
----------------------------------*/
.folding {}
.folding_switch {
	transition: 0.4s;
	width: fit-content;
	min-width: 270px;
	margin-inline: auto;
	padding: 0 20px;
	background: #5288af;
	border-radius: 4px;
	text-align: center;
	color: #fff;
	line-height: 1.6;
	cursor: pointer;
}
.folding_switch:hover {}
.folding_detail {
	overflow: hidden;
	transition-duration: 0.6s;
	transform-origin: top;
	transform: scaleY(0);
	height: 0;
	opacity: 0;
}
.folding_switch.open {}
.folding_detail.open {
	transform: scaleY(1);
	height: auto;
	opacity: 1;
	margin-top: 20px;
}

/*マウスピース型矯正装置の使用について
----------------------------------*/
.mouthpiece_ttl {
	display: flex;
	justify-content: flex-start;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid #5288af;
}
.mouthpiece_ttl .num,
.mouthpiece_ttl .main {
	font-size: 17px;
	font-weight: bold;
	text-align: left;
	color: #5288af;
}
.mouthpiece_ttl .num {
	width: 20px;
}
.mouthpiece_ttl .main {
	width: calc(100% - (20px + 10px));
}


/*=======================================
MAX～768pxまで
=======================================*/
@media screen and (min-width: 768px) {
	.bg_wide_pic {
		background-position: center !important;
	}
	.bg_wide_pic p.txt {
		letter-spacing: 1.2px;
	}
	.bg_stclover_round {
		margin-top: -40px !important;
		padding: 215px 0 70px !important;
	}
}




/*=======================================
767px～0まで
=======================================*/
@media screen and (max-width: 767px) {
	.bg_wide_pic {
		background-position: right 27% bottom !important;
		background-size: 265% !important;
		z-index: -1;
		position: relative;
	}
	.bg_wide_pic .inner_in {
		padding-bottom: 69% !important;
	}
	.bg_stclover_round {
		margin-top: -110px !important;
		padding: 185px 0 45px !important;
	}
	
	/*打消し*/
	img.center {
		width: auto;
	}

	/*画像幅の調整*/
	.object img {
		max-width: 100%;
		height: auto;
	}
	
	/*幅微調整*/
	#ttl_area .txt {
		width: 75%;
	}
	

	/*flex box
	----------------------------------*/
	/*flex01*/
	.flex01 {}
	.flex01_item {
		width: 100%;
	}
	/*flex02*/
	.flex02 {}
	.flex02_item {
		width: 100%;
	}
	/*flex03*/
	.flex03 {}
	.flex03 .pic_wrap {
		width: 100%;
	}
	.flex03 .txt_wrap {
		width: 100%;
	}

	/*frame
	----------------------------------*/
	.frame01 {
		padding: 30px;
	}
	.frame02 {
		padding: 30px;
	}

	/*リンクボタン
	----------------------------------*/
	.link_btn {}
	.link_btn::before {}

	/*こんなお悩みございませんか？
	----------------------------------*/
	.cases_group {
		gap: 20px;
	}
	.cases_item {
		width: calc(100%/2 - 20px/2);
	}

	/*ここがポイント！
	----------------------------------*/
	.point_frame {
		padding: 20px;
	}
	.point_ttl {}
	.point_ttl span {}
	.point_frame .check_list {}
	.point_frame .check_list li {}

	/*折り畳み式スイッチ
	----------------------------------*/
	.folding {}
	.folding_switch {}
	.folding_switch:hover {}
	.folding_detail {}
	.folding_switch.open {}
	.folding_detail.open {}

	/*マウスピース型矯正装置の使用について
	----------------------------------*/
	.mouthpiece_ttl {}
	.mouthpiece_ttl .num,
	.mouthpiece_ttl .main {}
	.mouthpiece_ttl .num {}
	.mouthpiece_ttl .main {}
	
	
}