/*common
----------------------------------------------------------------------*/
#toppage article{
	margin: 0 20px 0 20px;
}
#toppage .wrapper{
	width: 1024px;
}
@media screen and (max-width: 1024px){
    #toppage article{
        margin: 0 20px 0 20px;
    }
    #toppage .wrapper{
        width: 100%;
    }
}
/*title*/
.center-ttl-box{
	position: relative;
	text-align: center;
	padding: 5em 0 2em;
	margin-bottom: 3em;
	font-weight: 600;
}
.center-ttl-box h1{
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	font-size: 2em;
	z-index: 10;
}
.center-ttl-box .sub {
	position: absolute;
	top: -55px;
	left: 50%;
	transform: translateX(-50%);
	color: #FFF;
	font-size: 7.5em;
	z-index: 5;
}

/*icon title*/
.icon-ttl-box{
	margin-bottom: 30px;
}
.icon-ttl-box h1{
	font-size: 2em;
	font-weight: 600;
}
.icon-ttl-box h1 img{
	vertical-align: middle;
	height: 80px;
	width: auto;
	margin-right: 20px;
}
.icon-ttl-box .sub {
	font-size: 0.813em;
}


/*link buttton*/
ul.links{
	padding: 40px 0 40px;
}
ul.links li{
	margin: 15px 0;
	width: 380px;

}
ul.links li a{
	padding: 15px 0 15px 60px;
	box-sizing: border-box;
	display: block;
	color: #000;
	text-decoration: none;
	background: url("../../img/common/ar_black.svg") no-repeat center left 20px #FFF;
	transition: all .3s;
	border-radius: 50px;
	box-shadow:0px 0px 5px #999;
}
ul.links li a:hover{
	background: url("../../img/common/ar_black.svg") no-repeat center left 27px #FFF;
}

/*more buttton*/
.btn_viewmore {
	text-align: center;
	margin: 0 auto;
}
.btn_viewmore a{
	width: 350px;
	padding: 18px 25px 18px 50px;
	box-sizing: border-box;
	color: #FFF;
	line-height: 1;
	font-size: 1.125em;
	text-decoration: none;
	background: url("../../img/common/ar_white.svg") no-repeat left 20px center #778EB6;
	display: inline-block;
	border-radius: 50px;
	transition: all .3s;
	margin: 0 auto;
}
.btn_viewmore a:hover{
	background: url("../../img/common/ar_white.svg") no-repeat left 27px center #778EB6;
}

@media screen and (max-width: 1024px){
    .center-ttl-box .sub {
        left: 0%;
        transform: none;
        font-size: 5.5em;
    }
    ul.links{
    	padding: 40px 20px 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        column-gap: 20px;
        row-gap: 20px;
    }
    ul.links li{
        margin: 0;
        width: auto;

    }
}
@media screen and (max-width: 599px) {
    .center-ttl-box .sub {
        font-size: 3.5em;
    }
    .center-ttl-box{
        padding: 2em 0 2em;
    }
    ul.links{
        grid-template-columns: 1fr;
    }
    .center-ttl-box h1{
        left: 0%;
        transform: none;
        text-align: center;
        width: 100%;
    }
    .btn_viewmore a{
	    width: 95%;
    }
}

/* eyecatch
-------------------------------------------------------------------*/

#eyecatch-area{
	width: 100%;
	height: /*49.8vw;*/37vw;
	padding: 0 20px 0;
	box-sizing: border-box;
}

#eyecatch-area .swiper {
	display: block;
	width: 100%;
	height: 100%;
}
.swiper-slide,
.swiper-slide a{
	text-align: center;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
	width: 100%;
	height: 100%;
}
.swiper-slide img{
	margin: 0 auto;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.swiper-button-next,.swiper-button-prev {
    top: 50%;
	transform: rotateY(-50%);
}
@media screen and (max-width: 768px){
    .swiper-button-next,.swiper-button-prev{
        display: none !important;
    }
}

/* #about
-------------------------------------------------------------------*/
#about{
	background: rgb(237,241,247);
	background: -moz-linear-gradient(90deg, rgba(237,241,247,1) 0%, rgba(217,230,249,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(237,241,247,1) 0%, rgba(217,230,249,1) 100%);
	background: linear-gradient(90deg, rgba(237,241,247,1) 0%, rgba(217,230,249,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#edf1f7",endColorstr="#d9e6f9",GradientType=1);
}

#about .wrapper{
	background: url("../../img/toppage/bg_about.jpg") no-repeat left top 50px;
	background-size: 650px auto;
}
.about_inframe{
	padding: 0 0 0 50%;
}
.about_intro{
	padding: 40px;
	background-color: rgba(255,255,255,0.7);
	line-height: 1.6;
}
@media screen and (max-width: 1024px){
    #about .wrapper{
        background: url("../../img/toppage/bg_about.jpg") no-repeat left top 0px;
        background-size: 100% auto;
    }
    .about_inframe{
        padding: 20% 0 0;
    }
    .about_intro{
        padding: 20px;
        background-color: rgba(255,255,255,0.7);
        line-height: 1.6;
        margin: 0 5%;
    }
}


/* program
-------------------------------------------------------------------*/

#program .center-ttl-box .sub{
	color: #EAF1F5;
}
.frame_program{
	background: url("../../img/toppage/bg_program.jpg") no-repeat left top;
	background-size: 60% auto;
}

.program_inframe{
	padding: 50px 0 0 50%;
}
.program_intro{
	padding: 40px;
	background-color: rgba(255,255,255,0.7);
	line-height: 1.6;
	box-shadow:0px 0px 5px #999;
}
@media screen and (max-width: 1024px){
    .program_inframe{
        padding: 20% 0 0;
    }
}

/* service
-------------------------------------------------------------------*/
#service{
	border-top: 1px solid #707070;
}
.frame_service{
	background: url("../../img/toppage/bg_service.jpg") no-repeat right top;
	background-size: 48% auto;
	height: 600px;
}
.service_inframe{
	margin: 0 50% 0 0;
	width: 50%;
	box-sizing: border-box;
	height: 600px;
	line-height: 1.7;
	position: relative;
}
.service_inframe .btn_viewmore {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
}
@media screen and (max-width: 1024px){
    .frame_service{
        background: url("../../img/toppage/bg_service.jpg") no-repeat right top;
        background-size: 30% auto;
        height: auto;
    }
    .service_inframe{
        margin: 0;
        width: 100%;
        height: auto;
        padding-right: 35%;
    }
    .service_inframe .btn_viewmore {
        position: static;
        margin-top: 30px;
    }
}
@media screen and (max-width: 599px) {
    .frame_service{
        background: url("../../img/toppage/bg_service.jpg") no-repeat right top;
        background-size: 100% 250px;
        height: auto;
    }
    .service_inframe{
        margin: 0;
        width: 100%;
        height: auto;
        padding: 300px 0 0 0;
    }
}

/* admission
-------------------------------------------------------------------*/
#admission{
background: rgb(237,247,245);
background: -moz-linear-gradient(90deg, rgba(237,247,245,1) 0%, rgba(237,241,247,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(237,247,245,1) 0%, rgba(237,241,247,1) 100%);
background: linear-gradient(90deg, rgba(237,247,245,1) 0%, rgba(237,241,247,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#edf7f5",endColorstr="#edf1f7",GradientType=1);
}

.frame_admission{
	background: url("../../img/toppage/bg_admission.jpg") no-repeat left top;
	background-size: 48% auto;
	height: 600px;
}
.admission_inframe{
	margin: 0 0 0 50%;
	width: 50%;
	box-sizing: border-box;
	height: 600px;
	line-height: 1.7;
	position: relative;
}
.admission_inframe .btn_viewmore {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
}

@media screen and (max-width: 1024px){
    .frame_admission{
        background: url("../../img/toppage/bg_admission.jpg") no-repeat left top;
        background-size: 30% auto;
        height: auto;
    }
    .admission_inframe{
        margin: 0;
        width: 100%;
        height: auto;
        padding-left: 35%;
    }
    .admission_inframe .btn_viewmore {
        position: static;
        margin-top: 30px;
    }
}
@media screen and (max-width: 599px) {
    article#admission{
        padding-top: 0;
    }
    .frame_admission{
        background: url("../../img/toppage/bg_admission.jpg") no-repeat left top 0;
        background-size: 100% 250px;
        height: auto;
    }
    .admission_inframe{
        margin: 0;
        width: 100%;
        height: auto;
        padding: 300px 1em 1em;
    }
}

/* NEWS
-------------------------------------------------------------------*/
#news{
}
#news .icon-ttl-box h1 img{
	height: 35px;
}
#news .icon-ttl-box .sub {
	font-size: 0.813em;
	margin-left: 60px;
}


#news .f_newslist{
	overflow-y: scroll;
	height: 600px;
}
#news .f_newslist li{
	padding: 1.5em;
	border-bottom: 1px solid #BDCEEC;
	display: flex;
}
#news .f_newslist li:first-child{
	border-top: 1px solid #BDCEEC;
}
#news .f_newslist li .date{
	font-size: 0.875em;
	padding-right: 30px;
	color: #778EB6;
	font-weight: bold;
}
@media screen and (max-width: 599px) {
    #news .f_newslist li{
        display: block;
    }
    #news .f_newslist li .date{
        padding: 0 0 .4em;
    }
}