@charset "utf-8";

/* CTAエリア
----------------------------------------------*/
.cta_area{
	background: linear-gradient(1deg,rgba(197, 157, 206, 0) 0%, rgba(197, 157, 206, 0.4) 34%, rgba(249, 175, 186, 0.4) 68%, rgba(249, 175, 186, 0) 100%);
	padding: 100px/*280px*/ 0 280px;
	position: relative;
}
.cta_area::after{
	content: '';
	width: 100%;
	height: 222px;
	background: url("../images/home/slide_text.webp") repeat-x center / 1556px;
	position: absolute;
	bottom: 0;
	left: 0;
	mix-blend-mode: multiply;
	animation: slide_text 400s linear infinite;
	z-index: -1;
}
@keyframes slide_text{
	0%{background-position: 0 top;}
	100%{background-position: -30000px top;}
}
.cta_area > div{
	background: url("../images/home/stork_illust_w.webp") no-repeat right bottom / 43%;
	padding-bottom: 95px;
}
.cta_btn{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 15px;
}
.cta_btn > a:nth-child(2){
    grid-column-start: 1;
    grid-row-start: 2;
}
.cta_btn > a:nth-child(3){
    grid-column-start: 1;
    grid-row-start: 3;
}
.cta_btn > a:nth-child(4){
    grid-row: span 2 / span 2;
    grid-column-start: 2;
    grid-row-start: 1;
}
.cta_btn > a{
	display: block;
	background: #fff url("../images/btn_icon_circle_p.webp") no-repeat 95% center / 60px;
	border-radius: 8px;
	padding: 60px 120px 65px 40px;
}
.cta_btn > a .bbp_dashed{
	padding-bottom: 50px;
	margin-bottom: 50px;
}
.cta_btn > a h3{
	display: flex;
	align-items: center;
}
.cta_btn > a h3::before{
	content: '';
	width: 41px;
	aspect-ratio: 41 / 11;
	background: url("../images/home/dia_side.webp") no-repeat center / contain;
	margin-right: 10px;
}
.cta_btn > a ul{
	display: flex;
	flex-wrap: wrap;
}
.cta_btn > a ul li{
	width: fit-content;
	background-color: #f7f3f2;
	padding: 15px 35px 18px;
	border-radius: 3px;
	margin: 5px;
}
@media (any-hover: hover){.cta_btn > a:hover{background-position: 96% center;}}



/* 1025px以下から
------------------------------------------------------------*/
@media only screen and (max-width:1025px){

	/* CTAエリア
	-------------------------------*/
	/*.cta_area{padding: 150px 0 150px;}*/
    
    .cta_area{
	background: linear-gradient(1deg,rgba(197, 157, 206, 0) 0%, rgba(197, 157, 206, 0.4) 34%, rgba(249, 175, 186, 0.4) 68%, rgba(249, 175, 186, 0) 100%);
	padding: 50px 0 150px;
	position: relative;
}
    
    
	.cta_area::after{
		height: 130px;
		background-size: 912px;
	}
	.cta_area > div{
		background: transparent;
		padding-bottom: 0;
	}
	.cta_btn{
		display: flex;
		flex-wrap: wrap;
	}
	.cta_btn > a{
		width: 100%;
		background-size: 35px;
		background-position: 97% center;
		border-radius: 5px;
		padding: 40px 80px 45px 30px;
	}
	.cta_btn > a:first-child{order: 1;}
	.cta_btn > a:nth-child(2){order: 4;}
	.cta_btn > a:nth-child(3){order: 3;}
	.cta_btn > a:nth-child(4){order: 2;}
	.cta_btn > a .bbp_dashed{
		padding-bottom: 30px;
		margin-bottom: 30px;
	}
	.cta_area .ffm.fs18{
		font-size: 12px!important;
		margin-bottom: 5px!important;
	}
	.cta_btn > a h3::before{
		width: 30px;
		margin-right: 7px;
	}
	.cta_btn > a ul li{padding: 10px 25px 13px;}
}	



/* 500px以下から
------------------------------------------------------------*/
@media only screen and (max-width:500px){	
	
	/* CTAエリア
	-------------------------------*/
	/*.cta_area {padding: 0 0 130px;}*/
    
    
        .cta_area{
	background: linear-gradient(1deg,rgba(197, 157, 206, 0) 0%, rgba(197, 157, 206, 0.4) 34%, rgba(249, 175, 186, 0.4) 68%, rgba(249, 175, 186, 0) 100%);
	padding: 50px 0 130px;
	position: relative;
}

    
	.cta_area::after{
		height: 100px;
		background-size: 701px;
	}
	.cta_btn > a{
		padding: 30px 20px 50px;
		background-size: 25px;
		background-position: right 10px bottom 13px;
	}
	@media (any-hover: hover){.cta_btn > a:hover{background-position: right 10px bottom 13px;}}
	.cta_btn > a h2{
		line-height: 1.4;
		margin-bottom: 15px!important;
	}
	.cta_btn > a h3{
		justify-content: center;
		margin-bottom: 18px!important;
	}
	.cta_btn > a h3::after{
		content: '';
		width: 30px;
        height: 8px;
		background: url("../images/home/dia_side.webp") no-repeat center / contain;
		margin-left: 7px;
	}
	.cta_btn > a ul li{
		width: 100%;
		margin: 0;
		text-align: center;
	}
	.cta_btn > a ul li:not(:last-child){margin-bottom: 10px;}

}