@charset "utf-8";
/*--------------------------------------
	copyright : yuyu design.
--------------------------------------*/

@import url(reset.css);
@import url(common.css);
@import url(../libs/fontawesome/css/all.min.css);
@import url(../libs/aos/aos.css);
/* @import url(../libs/OwlCarousel/assets/owl.carousel.min.css); @import url(../libs/OwlCarousel/assets/owl.theme.default.min.css); */
/* @import url(../libs/lightGallery/css/lightgallery.min.css); */
/* @import url(../libs/Remodal/remodal.css); @import url(../libs/Remodal/remodal-default-theme.css); */


/*
 index
==============================*/


/* mv ----------*/
#mv { position: relative; background-color: #D6DFEC; width: 100%; overflow: hidden; }
#mv h2 { width: 100%; }
#mv .fix { position: absolute; }
#mv .max { width: 100%; z-index: 2; } 
#mv h2 { z-index: 3; }
#mv .map { z-index: 1; }



/* message ----------*/
#message { overflow: hidden; padding-left: 12rem !important; padding-right: 12rem !important; }
#message .w { position: relative; max-width: 62rem; margin: auto; display: grid; grid-template-columns: 1fr; gap: 2.4rem; place-items: center; }
#message .w::before, #message .w::after { content: ""; display: block; width: 39.5rem; height: 29rem; position: absolute; top: 0; bottom: 0; margin: auto; background-repeat: no-repeat; background-position: center; background-size: contain; }
#message .w::before { background-image: url(../img/index/deco_01_a.svg); left: -40rem; }
#message .w::after { background-image: url(../img/index/deco_01_b.svg); right: -40rem; }
#message .w p { text-align: center; font-size: 1.8rem; }
@media screen and (max-width:896px) { /* m */
	#message .w::before, #message .w::after { width: 16rem; }
	#message .w::before { left: -17rem; }
	#message .w::after { right: -17rem; }
}
@media screen and (max-width:480px) { /* s */
	#message { padding-top: 8rem !important; padding-bottom: 8rem !important; padding-left: 10% !important; padding-right: 10% !important; }
	#message .w { gap: 2rem; }
	#message .w p { font-size: 1.6rem; }
	#message .w::before, #message .w::after { width: 50%; }
	#message .w::before { left: -35%; bottom: 100%; }
	#message .w::after { right: -35%; top: 100%; }
}


/* common ----------*/
.photo_layout {}
.photo_layout .inner { max-width: 136rem; }
.photo_layout .w { display: flex; gap: 6rem; }
.photo_layout .tw { width: 40%; padding-left: 7rem; padding-top: 4rem; }
.photo_layout .tw .h2 { margin-bottom: 8rem; }
.photo_layout .pw { width: 60%; }
.photo_layout .pw .p { aspect-ratio: 72 / 47; }
.photo_layout .pw .btw { margin-top: -3rem; text-align: center; }
@media screen and (max-width:1200px) {
	.photo_layout .tw { width: 50%; padding-top: 0; }
	.photo_layout .pw { width: 50%; }
	.photo_layout .tw .h2 { margin-bottom: 3rem; }
}
@media screen and (max-width:896px) { /* m */
	.photo_layout .w { display: block; padding: 0 10rem; }
	.photo_layout .tw { width: 100%;  padding-left: 0; }
	.photo_layout .pw { width: 100%; margin-top: 4rem; }
}
@media screen and (max-width:480px) { /* s */
	.photo_layout .w { padding: 0 2rem; }
}


/* about ----------*/
#about { padding-bottom: 8rem !important;
	background-image: url(../img/index/deco_02_a.svg), url(../img/index/deco_02_b.svg);
	background-repeat: no-repeat;
	background-position: left top, left bottom;
}
#about .inner { max-width: 136rem; }
#about .tw p { text-shadow: 2px 2px 0 #D6DFEC, -2px 2px 0 #D6DFEC, -2px -2px 0 #D6DFEC, 2px -2px 0 #D6DFEC, 2px 0 0 #D6DFEC, -2px 0 0 #D6DFEC, 0 2px 0 #D6DFEC, 0 -2px 0 #D6DFEC; }
#about .pw .p .-d1 { top: -0.3rem; left: -7rem; }
#about .pw .p .-d2 { top: 0; right: 0; }
#about .pw .p .-d3 { bottom: -0.9rem; left: -7rem; }
#about .pw .p .-d4 { bottom: -8rem; right: -0.4rem; }
@media screen and (max-width:480px) { /* s */
	#about { background-size: 10%, 20%; }
	#about .pw .p .-d1 { transform: scale(0.6, 0.6); transform-origin: right top; }
	#about .pw .p .-d2 { transform: scale(0.6, 0.6); transform-origin: right top; }
	#about .pw .p .-d3 { transform: scale(0.6, 0.6); transform-origin: right bottom; }
	#about .pw .p .-d4 { transform: scale(0.6, 0.6); transform-origin: right bottom; }
}



/* job ----------*/
#job { position: relative; background-color: #01398D; padding-bottom: 12rem !important; overflow: hidden;
	background-image: url(../img/index/deco_03_a.svg), url(../img/index/deco_03_d.svg), url(../img/index/deco_03_e.svg), url(../img/index/deco_03_g.svg);
	background-repeat: no-repeat;
	background-position: left top, right 23% top 13%, left bottom, right bottom;
}
#job .job_list {}
#job .job_list li {}
#job .job_list li a { text-decoration: none; }
#job .job_list li span { display: block; }
#job .job_list li .p { aspect-ratio: 34 / 37; }
#job .job_list li .btw { width: 100%; text-align: center; margin-top: -3rem; }
#job .job_list li .btw .bt { display: inline-block; }
#job .deco { position: absolute; }
#job .deco.-d1 { top: 0; right: 0; }
#job .deco.-d2 { top: 15%; right: 30%; }
@media screen and (max-width:480px) { /* s */
	#job { background-size: 20%, 9%, 37%, 20%; background-position: left top, right 1% top 15%, left bottom, right bottom; }
	#job .h2 span { max-width: 27rem; }
	#job .job_list_wrap { padding: 0 10%; }
	#job .deco.-d1 { top: -2%; right: -5%; transform: scale(0.6, 0.6); transform-origin: right top;  }
	#job .deco.-d2 { top: 8%; right: 21%; transform: scale(0.4, 0.4); transform-origin: right top;  }
}


/* common ----------*/
.horizontal { overflow: hidden; }
.horizontal .inner { display: flex; gap: 18%; }
.horizontal .inner > div { width: 50%;}
.horizontal .inner > div:first-child { position: relative; }
.horizontal .inner > div:first-child::after { content: ""; position: absolute; width: 0; height: 100%; border-right: solid 1px #000; right: -20%; top: 0; }
.horizontal .h2 { margin-bottom: 0.5rem; }
.horizontal .p { margin: 0 -10%; }
.horizontal p { margin-top: 2.5rem; }
.horizontal .btw { text-align: center; margin-top: 3rem; }
.horizontal .btw .bt.-more { max-width: 22rem; }
@media screen and (max-width:1024px) { /* l */
	.horizontal .inner { display: block; }
	.horizontal .inner > div { width: 100%; }
	.horizontal .p { margin: 0; text-align: center; }
	.horizontal .p img { max-width: 40rem; }
	.horizontal .inner > div:first-child { margin-bottom: 12rem; }
	.horizontal .inner > div:first-child::after { top: auto; bottom: -6rem; left: 0; right: auto; width: 100%; height: 0; border-right: none; border-bottom: solid 1px #000; }
}

/* trainingCarrier ----------*/
#trainingCarrier {}


/* benefits ----------*/
#benefits {}


/* enquete ----------*/
#enquete {}


/* faq ----------*/
#faq {}


/* forParentsTeachers ----------*/
#forParentsTeachers { padding-bottom: 8rem !important; overflow: hidden; 
	background-image: url(../img/index/deco_06_a.svg);
	background-repeat: no-repeat;
	background-position: left bottom;
}
#forParentsTeachers .tw { padding-bottom: 8rem;
	background-image: url(../img/index/deco_06_b.svg);
	background-repeat: no-repeat;
	background-position: right bottom;
}
#forParentsTeachers .tw .h2 span { max-width: 45rem; }
#forParentsTeachers .tw p { text-shadow: 2px 2px 0 #FFF, -2px 2px 0 #FFF, -2px -2px 0 #FFF, 2px -2px 0 #FFF, 2px 0 0 #FFF, -2px 0 0 #FFF, 0 2px 0 #FFF, 0 -2px 0 #FFF; }
#forParentsTeachers .pw .p .-d1 { top: -6rem; left: -3rem; }
#forParentsTeachers .pw .p .-d2 { top: -5rem; right: -5rem; }
#forParentsTeachers .pw .p .-d3 { bottom: -7rem; right: -3rem; }
@media screen and (max-width:480px) { /* s */
	#forParentsTeachers { background-size: 15%; background-position: left bottom; }
	#forParentsTeachers .tw { background-size: 80%; background-position: center bottom; }
	#forParentsTeachers .pw .p .-d1 { top: -6rem; left: -3rem; transform: scale(0.6, 0.6); transform-origin: left top; }
	#forParentsTeachers .pw .p .-d2 { top: -5rem; right: -5rem; transform: scale(0.6, 0.6); transform-origin: left top; }
	#forParentsTeachers .pw .p .-d3 { bottom: -7rem; right: -3rem; transform: scale(0.6, 0.6); transform-origin: right top; }
}


/* recruit ----------*/
#recruit { position: relative; height: 48.6vw; background-image: url(../img/index/rc_bg.svg); background-repeat: no-repeat; background-position: center; background-size: cover; }
#recruit .btw { width: 47rem; position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); }
@media screen and (max-width:480px) { /* s */
	#recruit .btw { width: 100%; padding: 0 4rem; }
}