@charset "utf-8";
/* # =================================================================
#### 01
# ================================================================= */
.section01{
	background-color : #F0ECEA;
}
.section01 .info{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	margin : 0 auto 30px;
}
.section01 .info p{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	text-align : center;
	font-size : var(--20px);
	margin-bottom : 50px;
}
.section01 .info h3{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	text-align : center;
	font-size : 40px;
	font-weight : bold;
	margin-bottom : 30px
}
.section01 .info figure{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
.section01 .info figure img{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
/* # =================================================================
#### 02
# ================================================================= */
.section02{
	background-color : #F0ECEA;
}
.processing-type{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	margin-bottom : 50px;
}
.processing-type h4{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	font-size : var(--20px);
	font-weight : bold;
	margin-bottom : 10px;
}
.processing-type .flex .box:nth-child(1){
	flex : 0 0 40%;
}
.processing-type .flex .box:nth-child(2){
	
}
.processing-type .flex .box figure{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
.processing-type .flex .box figure img{
	position : relative;
	display : block;
	width : 100%;
	height : auto
}
.processing-type .flex .box p{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	margin-bottom : 15px;
}
.processing-type .flex .box ul{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
.processing-type .flex .box ul li{
	position : relative;
	display : list-item;
	width : 100%;
	height : auto;
	text-align : justify;
	padding-left : 1em;
	margin-bottom : 5px;
}
.processing-type .flex .box ul li:last-child{
	margin-bottom : 0;
}
.processing-type .flex .box  ul li::before{
	content : "・";
	position : absolute;
	display : block;
	left : 0;
}



/* # =================================================================
#### 03
# ================================================================= */
.section03{
	
}
.section03 ol{
	position : relative;
	display : block;
	width : 600px;
	height : auto;
	margin : 0 auto;
}
.section03 ol li{
	position : relative;
	display : list-item;
	width : 100%;
	height : auto;
	border : 1px solid #E87D96;
	margin-bottom : 80px;
}
.section03 ol li:last-child{
	margin-bottom : 0;
}
.number{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	background-color : #E87D96;
	padding : 12px 0;
}
.number p{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	line-height : 1;
	text-align : center;
	color : #FFF;
	font-size : var(--22px);
	font-weight : bold;
}
.inner{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	padding : 15px 50px;
}
.inner h4{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	text-align : center;
	font-size : var(--20px);
	margin-bottom : 10px;
}
.inner p{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	text-align : justify;
}

.section03 ol li:nth-child(-n + 4)::after{
	content : "";
	position : absolute;
	display : block;
	top : auto;
	right : 0;
	bottom : -53px;
	left : 0;
	margin : auto auto;
	width : 40px;
	height : 20px;
	background-color : #E87D96;
	clip-path : polygon(0 0, 100% 0, 50% 100%);
}


/* # =================================================================
#### 04
# ================================================================= */
.section04{
	background-color : #F0ECEA;
}
.section04 .flex .box {
	display : flex;
	flex-direction : column;
	border : 1px solid #313131;
	background-color : #FFF;
}
.section04 .box h4{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	background-color : #313131;
	line-height : 1;
	text-align : center;
	color : #FFF;
	font-size : var(--20px);
	font-weight : bold;
	padding : 12px 0;
}
.section04 .box .inner{
	position : relative;
	display : flex;
	flex-direction : column;
	flex: 1;
	width : 100%;
	height : auto;
	padding : 30px;
}
.section04 .box p{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	text-align : justify;
}
.section04 .box p.caution{
	font-size : var(--14px);
	padding-left : 1em;
	margin-tp : 10px;
}
.section04 .box p.caution::before{
	content : "※";
	position : absolute;
	display : block;
	left : 0;
}
.section04 .box figure{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	margin-top : auto;
}
.section04 .box figure img{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
.section04 .box:nth-child(1) figure{
	padding : 10px 30px 0;
}
.section04 .box:nth-child(2) figure{
	padding : 10px 30px 0;
}
/* # =================================================================
#### エフェクト
# ================================================================= */
.section01 .info p{
	
}
.section01 .info h3{
	transition : all 0.8s ease-out .1s;
}
.section01 .info figure{
	transition : all 0.8s ease-out .2s;
}
.features ul li:nth-of-type(1){
	
}
.features ul li:nth-of-type(2){
	transition : all 0.8s ease-out .1s;
}
.features ul li:nth-of-type(3){
	transition : all 0.8s ease-out .2s;
}
.features ul li:nth-of-type(4){
	transition : all 0.8s ease-out .3s;
}
.features ul li:nth-of-type(5){
	transition : all 0.8s ease-out .4s;
}
.features ul li:nth-of-type(6){
	transition : all 0.8s ease-out .5s;
}
.section04 .flex .box:nth-of-type(1){
	transition : all 0.8s ease-out .1s;
}
.section04 .flex .box:nth-of-type(2){
	transition : all 0.8s ease-out .2s;
}
.section04 .flex .box:nth-of-type(3){
	transition : all 0.8s ease-out .3s;
}




/* # =================================================================
#### responsive
# ================================================================= */
/* # =================================================================
#### 1200px
# ================================================================= */
@media screen and (max-width: 1200px){

}/*** 1200px ***/
/* # =================================================================
#### 1024px
# ================================================================= */
@media screen and (max-width: 1024px){

}/*** 1024px ***/
/* # =================================================================
#### 896px
# ================================================================= */
@media screen and (max-width: 896px){

}/*** 896px ***/
/* # =================================================================
#### 600px
# ================================================================= */
@media screen and (max-width: 600px){

}/*** 600px ***/
/* # =================================================================
#### 480px
# ================================================================= */
@media screen and (max-width: 480px){

}/*** 480px ***/
/* # =================================================================
#### 320px
# ================================================================= */
@media screen and (max-width: 320px){

}/*** 320px ***/