@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); */


/*
 training_carrier
==============================*/

/* mvp ----------*/
#mvp { background-image: url(../img/training_carrier/mv_bg.svg); background-repeat: no-repeat; background-size: contain; background-position: center bottom; }
@media screen and (max-width:480px) { /* s */
	#mvp { background-size: 110% auto; background-position: right bottom 20%; }
}

/* h2 ----------*/
.h2.-page span { background-color: #D6DFEC; }

/* h3 ----------*/
.dh3 { margin-top: 3rem; margin-bottom: 2rem; }
.dh3 span { position: relative; display: inline-block; font-size: 2.6rem; font-weight: var(--bold); background-color: #CFB72C; color: #FFF; line-height: 1; padding: 1rem 5rem; border-radius: 1rem; border: solid 2px #01398D; }
.dh3 span img { position: absolute; top: 0; bottom: 0; margin: auto; left: calc(100% - 3rem); }


/* main ----------*/
#main .sec { padding-left: 6rem !important; padding-right: 6rem !important; }
@media screen and (max-width:480px) { /* s */
	#main .sec { padding-left: 4rem !important; padding-right: 4rem !important; }
}


/* career ----------*/
#career {
	background-image: url(../img/training_carrier/bg_01_01.svg), url(../img/training_carrier/bg_01_02.svg), url(../img/training_carrier/bg_01_03.svg);
	background-repeat: no-repeat;
	background-position: left top, right center, left bottom;
}
#career .career_list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; }
#career .career_list li { position: relative; background-color: #FEFFEB; border: solid 1px #01398D; border-radius: 2rem; padding: 2rem; }
#career .career_list li::after { content: ""; position: absolute; right: -3.1rem; top: 0; bottom: 0; margin: auto; width: 3rem; height: 3rem; background-image: url(../img/training_carrier/icon_arrow_01.svg); background-repeat: no-repeat; background-position: center; background-size: contain; }
#career .career_list li:last-child:after { display: none; }
#career .career_list li h4 { background-color: #01398D; color: #FFF; border-radius: 2rem; padding: 0.8rem 1.5rem; font-size: 2rem; line-height: 1.3; margin-bottom: 1.4rem; }
#career .career_list li p { font-size: 1.4rem; font-weight: var(--regular); line-height: 1.77; }
@media screen and (max-width:1260px) { /* x */
	#career { background-size: 60% auto; }
}
@media screen and (max-width:1024px) { /* l */
	#career .career_list { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width:480px) { /* s */
	#career { background-size: 80% auto; }
	#career .career_list { grid-template-columns: 1fr; }
	#career .career_list li::after { right: 0; left: 0; top: auto; bottom: -3.1rem; transform: rotate(90deg); }
}

/* training ----------*/
#training {
	background-image: url(../img/training_carrier/bg_02_01.svg), url(../img/training_carrier/bg_02_02.svg);
	background-repeat: no-repeat;
	background-position: left top, right bottom;
}
#training .training_list { }
#training .training_list li { border-radius: 2rem; background-color: #FFF; padding: 2rem 4rem; }
#training .training_list li.nodes { border-radius: 0; background-color: transparent; padding: 0; }
#training .training_list li span { display: block; }
#training .training_list li h3 { font-size: 2.8rem; text-align: center; font-weight: var(--bold); color: #01398D; line-height: 1.4; margin-bottom: 1.4rem; }
#training .training_list li .p { text-align: center; margin-bottom: 1rem; }
#training .training_list li .t { font-size: 1.4rem; font-weight: var(--regular); line-height: 1.77; margin-top: 1.4rem; }
@media screen and (max-width:1260px) { /* x */
	#training { background-size: 60% auto; }
}
@media screen and (max-width:480px) { /* s */
	#training { background-size: 80% auto; }
}