@charset "utf-8";
.metaslider .flexslider{

}
/* # =================================================================
#### front-page専用
# ================================================================= */
.main-slider{
	position : relative;
	display : block;
	width : 88%;
	height : auto;
	padding-top : 30px;
	aspect-ratio : 7 / 4;
}
.metaslider .slides img{
	border-radius : 0 15px 15px 0;
}
.main-slider h2.headline{
	top : 200px;
	right : 100px;
	bottom : auto;
	left : auto;
}
.slider-pc{
	display : block;
}
.slider-sp{
	display : none;
}
/* # =================================================================
#### content01
# ================================================================= */
.content01{
	overflow : hidden;
}
.content01 .wrap{
	position : relative;
	display : flex;
	flex-wrap : wrap;
	width : 1200px;
	height : auto;
	margin : 0 auto;
	padding : 50px 0;
}
.content01 .flex{
	position : relative;
	display : flex;
	flex-wrap : wrap;
	justify-content : space-between;
	width : 100%;
	height : auto;
}
.content01 .flex .box{
	position : relative;
	display : block;
	width : 48%;
	height :auto;
}
.content01 .flex .box:nth-of-type(1){
	width : 80%;
	margin : 0 auto;
}
.content01 .view-more{
	margin-top : 20px;
}
.content01 .view-more a{
	margin : 0 0 0 auto;
}

.content01 .icon-header h3.blue,
.content01 .icon-header h3.orange{
	padding-bottom : 0;
	border-bottom : none;
}
/* # =================================================================
#### content02
# ================================================================= */
.content02{
	
}
.content02 .wrap{
	position : relative;
	display : block;
	width : 800px;
	height : auto;
	padding : 50px 0 130px;
	margin : 0 auto;
}
.content02 figure{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
.content02 figure a{
	
}
.content02 figure a:hover{
	opacity : 0.5;
}
.content02 figure img{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}





/* # =================================================================
#### content03
# ================================================================= */
.content03{
	position : relative;
	display : block;
	width : 90%;
	height : auto;
	margin : 0 0 0 auto;
}
.content03 .wrap{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	border-radius : 50px 0 0 0;
	background : url(../../images/common/back-item.jpg)center / cover no-repeat;
	padding : 80px 100px 160px 0;
}
.content03 h3{
	position : absolute;

	width : 1000px;
	height : auto;
	top : -135px;
	right : auto;
	bottom : auto;
	left : -100px;
	margin : auto auto;
}
.content03 h3 img{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
.content03 h3.pc{
	display : block;
}
.content03 h3.sp{
	display : none;
}
.front-about{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
.front-about .flex{
	position : relative;
	display : flex;
	flex-wrap : wrap;
	justify-content : space-between;
	width : 100%;
	height : auto;
}
.front-about .flex .text-box{
	position : relative;
	display : block;
	width : calc(100% - 550px);
	height : auto;
}
.front-about .flex .text-box h4{
	position : relative;
	display : block;
	width : 500px;
	height : auto;
	left : -30px;
}
.front-about .flex .text-box h4 img{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
.front-about .flex .text-box p{
	position : absolute;
	display : flex;
	align-items : center;
	justify-content : center;
	top : 0;
	right : 0;
	bottom : 0;
	left : 0;
	margin : auto auto;
	text-align : center;
	font-size : 25px;
	font-weight : 600;
}

/* # =================================================================
#### content04
# ================================================================= */
.content04{
	margin-top : -130px;
}
/* # =================================================================
#### content05
# ================================================================= */
.content05{
	margin-top : 100px;
}
.content05 .sp-box{
	display : none;
}
.content05 .wrap{
	background : url(../../images/common/abouto_back.png)bottom / cover no-repeat;
	padding-bottom : 100px;
}
.content05 .flex{
	position : relative;
	display : flex;
	flex-wrap : wrap;
	justify-content : space-between;
	width : 950px;
	height : auto;
	margin : 0 auto 100px;
}
.content05 .flex .box{
	position : relative;
	display : block;
	width : 50%;
	height : auto;
}
.content05 .flex .box:nth-child(1){
	order : 2;
}
.content05 .flex .box:nth-child(2){
	order : 1;
	padding-right : 50px;
}
.content05 .flex .box p{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
.content05 .flex .box img{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	box-shadow : 10px -10px 30px #00000029;
}
.content05 .image-button.fees-button{
	margin : 30px 0 0 auto;
}
.content05 .banner{
	position : relative;
	display : block;
	width : 400px;
	height : auto;
	margin : 0 auto;
}
.content05 .banner a{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
.content05 .banner a:hover{
	opacity : 0.5;
}
.content05 .banner a img{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
/* # =================================================================
#### content06
# ================================================================= */
.content06{

}
.content06 .wrap{
	position : relative;
	display : block;
	width : 1000px;
	height : auto;
	margin : 0 auto;
	padding : 50px 0 200px;
}
.content06 .flex{
	display : grid;
	grid-template-columns : 33.5fr 33.5fr 40fr;
	gap : 20px;
}
.content06 .flex .box{
	position : relative;
	display : block;

	height : auto;
}
.content06 .flex .box a{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
.content06 .flex .box a:hover{
	opacity : 0.5;
}
.content06 .flex .box a img{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
.content06 .flex .box.banner{
	position : relative;
	display : flex;
	flex-wrap : wrap;
	justify-content : space-between;

}
.content06 .flex .box.banner a{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
.content06 .flex .box.banner a:first-child{
	margin-bottom : 10px;
}
.content06 .flex .box.banner a:hover{
	opacity : 1;
}
.content06 .flex .box.banner a img{
	transition: 0.5s;
}
.content06 .flex .box.banner a:hover img{
	opacity : 0.5;
	transition: 0.5s;
}





/* # =================================================================
#### エフェクト
# ================================================================= */
.content02 figure img{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}


.content03 h3{
	transition: all 0.8s ease-out .2s;
}
.front-about .flex .text-box{
	transition: all 0.8s ease-out .3s;
}
.about-point{
	transition: all 0.8s ease-out .4s;
}


.content05 .flex .box:nth-child(1){
	transition: all 0.8s ease-out .2s;
}
.content05 .flex .box:nth-child(2){
	transition: all 0.8s ease-out .4s;
}
.content05 .banner a img{
	transition : all 0.8s ease-out .3s;
}


.content06 .flex .box:nth-child(1){
	transition : all 0.8s ease-out .2s;
}
.content06 .flex .box:nth-child(2){
	transition : all 0.8s ease-out .3s;
}
.content06 .flex .box:nth-child(3) a:nth-child(1){
	transition : all 0.8s ease-out .4s;
}
.content06 .flex .box:nth-child(3) a:nth-child(2){
	transition : all 0.8s ease-out .5s;
}






/* # =================================================================
#### responsive
# ================================================================= */
/* # =================================================================
#### 1700px
# ================================================================= */
@media screen and (max-width: 1700px){
/* # =================================================================
#### content03
# ================================================================= */
.content03 .wrap{
	border-radius : 50px 0 0 0;
	padding : 50px 100px 160px 0;
}
.content03 h3.pc{
	display : none;
}
.content03 h3.sp{
	position : relative;
	display : block;
	width : 100%;
	top : 0;
	left : 0;
	margin : 0;
}
.front-about .flex .text-box h4{
	left : 0;
}
}/*** 1700px ***/
/* # =================================================================
#### 1600px
# ================================================================= */
@media screen and (max-width: 1600px){
/* # =================================================================
#### content01
# ================================================================= */
.content01 .wrap{
	width : 100%;
	padding : 50px 15px;
}
/* # =================================================================
#### content02
# ================================================================= */


/* # =================================================================
#### content03
# ================================================================= */
.content03{
	width : 93%;
}
.content03 .wrap{
	padding : 50px 50px 160px 0;
}
.front-about .flex .text-box{
	width : calc(100% - 60%);
}
.front-about .flex .text-box h4{
	width : 95%;
}
.content03 .about-point{
	width : 60%;
}
.front-about .swiper-button-next{
	right : -35px;
}
/* # =================================================================
#### content04
# ================================================================= */

/* # =================================================================
#### content05
# ================================================================= */
.content05 .flex{
	width : 95%;
	margin : 0 auto 50px;
}




/* # =================================================================
#### content06
# ================================================================= */
.content06 .wrap{
	width : 100%;
	padding : 50px 15px 200px;
}





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




/* # =================================================================
#### main_slider
# ================================================================= */
.main-slider{
	width : 90%;
}
.main-slider h2.headline{
	right : 75px;
}
/* # =================================================================
#### content02
# ================================================================= */
.content02 .wrap{
	width : 600px;
}
/* # =================================================================
#### content03
# ================================================================= */
.content03{
	width : 90%;
}
.content03 .about-point{
	width : 50%;
}
.about-point ul li .point h4{
	font-size : 22px;
}
/* # =================================================================
#### content06
# ================================================================= */
.content06 .wrap{
	width : 80%;
}






}/*** 1400px ***/
/* # =================================================================
#### 1240px
# ================================================================= */
@media screen and (max-width: 1240px){
/* # =================================================================
#### front-page専用
# ================================================================= */
.main-slider{
	width : 100%;
	padding-top : 0;
}
.metaslider .slides img{
	border-radius : 0;
}
.main-slider h2.headline{
	top : auto;
	right : auto;
	bottom : 40px;
	left : 0;
}
/* # =================================================================
#### content03
# ================================================================= */
.content03 h3.sp{
	width : 95%;
}



}/*** 1240px ***/
/* # =================================================================
#### 1024px
# ================================================================= */
@media screen and (max-width: 1024px){
/* # =================================================================
#### content05
# ================================================================= */
.content05{
	overflow : hidden;
}
.content05 .flex {
	width : 100%;
}
.content05 .wrap{
	padding : 0 15px 100px;
}




.content06{
	overflow : hidden;
}
}/*** 1024px ***/
/* # =================================================================
#### 896px
# ================================================================= */
@media screen and (max-width: 896px){
/* # =================================================================
#### content01
# ================================================================= */
.content01 .flex .box:nth-of-type(1){
	width : 100%;
}
/*
.content01 .flex .box:nth-child(1){
	order : 2;
}
.content01 .flex .box:nth-child(2){
	order : 1;
	margin-bottom : 50px;
}
*/
/* # =================================================================
#### content02
# ================================================================= */
.content02 .wrap{
	width : 100%;
	padding : 50px 15px 95px;
}
/* # =================================================================
#### content03
# ================================================================= */
.content03 .about-point{
	padding-top : 50px;
	margin-top : -50px;
	width : 500px;
}
.front-about .flex .text-box{
	width : 100%;
	margin-bottom : 50px;
}
.front-about .flex .text-box h4{
	width : 500px;
	margin-bottom : 30px;
}
.front-about .flex .text-box p{
	position : relative;
	display : block;
	text-align : left;
	padding-left : 50px;
	margin : 0;
}
.front-about .flex .text-box p br:nth-child(1),
.front-about .flex .text-box p br:nth-child(3){
	display : none;
}
.about-point .swiper-slide figure img{

}
.front-about .swiper-button-next {
	right : 0;
	top : 430px;
}
/* # =================================================================
#### content05
# ================================================================= */
.content05{
	margin-top : 50px;
}
.content05 .flex{
	margin : 0 0 30px;
}
.content05 .wrap{
	background : url(../../images/common/abouto_back.png) bottom / cover no-repeat;
	background-position : center 300px;
	padding : 0 15px;
}
.content05 .flex .box:nth-child(1){
	order : 1;
}
.content05 .flex .box p{
	display : none;
}
.content05 .image-button.fees-button{
	display : none;
}
.content05 .flex .box:nth-child(2){
	order : 2;
	padding-right : 0;
}

.content05 .flex .box .icon-header{
	position : absolute;
	display : flex;
	align-items : center;
	width : 100%;
	top : 0;
	bottom : 0;
}
.content05 .sp-box{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	margin-bottom : 50px;
}
.content05 .sp-box p{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	line-height : 2;
	text-align : justify;
	font-weight : 500;
}
.content05 .sp-box .image-button.fees-button{
	display : block;
	margin : 30px auto 0;
}
/* # =================================================================
#### content06
# ================================================================= */
.content06 .wrap{
	padding : 50px 15px 100px;
}


}/*** 896px ***/
/* # =================================================================
#### 600px
# ================================================================= */
@media screen and (max-width: 600px){
.slider-pc{
	display : none;
}
.slider-sp{
	display : block;
}
/* # =================================================================
#### content01
# ================================================================= */
.post-list dl dt{
	display : flex;
	flex-wrap : wrap;
	justify-content : flex-start;
	border-bottom : none;
	width : 100%;
	padding : 10px;
}
.post-list dl dt time{
	margin-right : 15px;
}
.post-list dl dd{
	width : 100%;
	padding : 0 10px 10px;
}
/* # =================================================================
#### content02
# ================================================================= */
.content02 .wrap{
	padding : 25px 15px 75px;
}
/* # =================================================================
#### content03
# ================================================================= */
.content03 {
	width : 100%;
	padding-left : 10px;
}
.content03 .wrap{
	padding : 30px 20px 160px 10px;
}
.front-about .flex .text-box h4{
	width : 80%;
}
.front-about .flex .text-box p{
	font-size : 20px;
	padding-left : 0;
}
.content03 .about-point{
	width : 100%;
}
.front-about .swiper-button-next{
	width : 60px;
	height : 60px;
	top : 290px;
	right : -5px;
}
/* # =================================================================
#### content05
# ================================================================= */
.content05{
	margin-top : 50px;
}
.content05 .banner{
	width : 100%;
}
.content05 .flex .box:nth-child(1){
	width : 200px
}
.content05 .flex .box:nth-child(2){
	width : calc(100% - 200px);
}
/* # =================================================================
#### content06
# ================================================================= */
.content06 .wrap{
	width : 100%;
	padding : 50px 15px 50px;
}
.content06 .flex{
	position : relative;
	display : flex;
	flex-wrap : wrap;
	justify-content : center;
}
.content06 .flex .box:nth-child(1),
.content06 .flex .box:nth-child(2){
	width : 40%;
}
.content06 .flex .box.banner{
	width : 60%;
}


















.content02,
.content03,
.content04,
.content05{
	overflow : hidden;
}
}/*** 600px ***/
/* # =================================================================
#### 480px
# ================================================================= */
@media screen and (max-width: 480px){

/* # =================================================================
#### content02
# ================================================================= */
.content02 .wrap{
	padding : 30px 15px 70px;
}
/* # =================================================================
#### content03
# ================================================================= */
.front-about .swiper-button-next {
	width : 50px;
	height : 50px;
	top : 200px;
	right : -5px;
}

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


/* # =================================================================
#### content02
# ================================================================= */


/* # =================================================================
#### content03
# ================================================================= */


/* # =================================================================
#### content04
# ================================================================= */


/* # =================================================================
#### content05
# ================================================================= */


/* # =================================================================
#### content06
# ================================================================= */


}/*** 320px ***/