@charset "utf-8";
/* Common */
@media (min-width: 768px){
	.lowerpage-bg:before{background: url("../img/benefits/mv.jpg") no-repeat top center/cover;}
	.mv-img{margin-bottom: 25px;}
}

@media (max-width: 767px){
	.lowerpage-bg:before{background: url("../img/benefits/mv_sp.jpg") no-repeat top center/cover;}
	
	.mv-img{width: 104px; margin-bottom: 15px;}	
}

/* Subnav */
.subnav{display: flex; justify-content: space-between; max-width: 656px; margin: 0 auto 70px; width: 96%;}
.subnav li{width: 48.17%; padding: 1px 0;
background-image: url("../img/common/dash.png"), url("../img/common/dash.png"); background-repeat: repeat-x,repeat-x; background-size: auto 1px, auto 1px; background-position: top left, bottom left;}
.subnav a{height: 62px; position: relative; padding: 0 0 0 10%; letter-spacing: 0.1em; font-weight: 500; font-family: 'Zen Kaku Gothic New', sans-serif; overflow: hidden; z-index: 10; position: relative; color: #00458d; display: flex; align-items: center;}
.subnav a:before{content: ''; width: 100%; height: 100%; top: 0; left: -115%; position: absolute; background: #e6ff1d; transition: all .8s cubic-bezier(0.23, 1, 0.32, 1); transform: scale(1.2); border-radius: 120px; z-index: -1;}
.subnav a:after{content: ''; position: absolute; top: 50%; right: 10%; border: solid #00458d; border-width: 0 2px 2px 0; display: inline-block; padding: 4px; transform: rotate(45deg); margin-top: -4px;}
.subnav a.is-active:before,
.subnav a:hover:before{left: 0;}

@media (max-width: 767px){
	.subnav{margin: 0 auto 40px;}
	.subnav li{width: 47%;}
	.subnav a{height: 46px; padding: 0; justify-content: center;}
	.subnav a:after{position: static; margin: 0 0 0 7px; padding: 3px;}
}

/* Frame - Line */
.m-ifrm{position: relative; margin-bottom: 50px !important;}
.m-ifrm_outer{padding: 80px 7.3% 10px;}

.lineL-yellowT{top: -90px; left: 30%;}
.lineL-lblueT{top: 170px; left: -120px;}
.lineL-purpleT{top: 80px; right: -170px;}
.lineL-blueT{top: -130px; left: 57%; width: 164px; height: 164px;}

@media (max-width: 767px){
	.m-ifrm{margin-bottom: 0 !important;}
	.m-ifrm_outer{padding: 45px 20px 0;}
	
	.lineL-yellowT{top: 5px;}
	.lineS-blue{top: -15px; left: 44%;}
	.lineL-purpleT{top: 60px; right: -80px;}
}

/* Benefit */
.benefit-head{max-width: 832px; width: 100%; margin: 0 auto; position: relative;}
.benefit-head_img{border-radius: 224px; overflow: hidden;}
.benefit-head_tit{width: 156px; height: 64px; border: 2px solid #00458d; border-radius: 64px; font-size: 2.4rem; color: #00458d; font-weight: bold; display: flex; justify-content: center; align-items: center; background: #fff; position: absolute; bottom: -24px; left: 0; right: 0; margin: 0 auto; font-family: 'Zen Kaku Gothic New', sans-serif;}
.benefit-head_illus{position: absolute; left: 5%; bottom: -20px;}

.benefit-desc{max-width: 656px; width: 100%; margin: 0 auto; padding: 50px 0 60px;}

.benefit-box{padding: 0 0 30px; position: relative;}
.benefit-tit{height: 46px; position: relative; border-bottom: 2px solid #00458d; margin: 0 0 50px;}
.benefit-tit span{position: absolute; bottom: -2px; left: 0; display: inline-block; border: 2px solid #00458d; border-bottom: none; background: #fff; height: 46px; padding: 17px 30px 0; font-size: 2.4rem; line-height: 1; color: #00458d; font-weight: bold; font-family: 'Zen Kaku Gothic New', sans-serif; border-radius: 20px 20px 0 0;}

.benefit-list{display: flex; flex-wrap: wrap; max-width: 832px; width: 100%; margin: 0 auto;}
.benefit-item{width: 48.2%; margin: 0 3.6% 3.6% 0; position: relative; padding: 0 30px 30px; font-size: 1.4rem; z-index: 1;}
.benefit-item:nth-of-type(2n){margin-right: 0;}
.benefit-item:before{content: ''; position: absolute; top: 25px; left: 0; right: 0; bottom: 0; background: #f1f9fa; border-radius: 16px; display: block; z-index: -1;}
.benefit-item_img{text-align: center;}
.benefit-item_tit{text-align: center; padding: 10px 0; color: #00458d; font-weight: bold; font-family: 'Zen Kaku Gothic New', sans-serif;}

.training{margin: 0 0 80px; position: relative;}
.training .line2-lblue1{top: -75px; left: -140px;}
.training .line2-lblue2{top: 270px; right: -190px;}

.training1 .lineR-yellow{top: 305px; left: -140px;}
.training2 .line2-blue{top: 50px; right: -140px;}
.training2 .lineL-lblue{bottom: -105px; left: -225px;}

.welfare{position: relative;}
.welfare .benefit-head_illus{left: auto; right: 0; bottom: -30px;}
.welfare .lineL-lblue1{top: -175px; left: 56%;}
.welfare1 .lineL-purple{top: -228px; right: -290px;}
.welfare2 .lineL-dblue{top: -10px; left: -350px;}
.welfare3 .lineL-blue{top: 130px; left: -260px;}
.welfare3 .lineL-yellow{top: -90px; right: -260px;}

@media (max-width: 767px){
	.benefit-head_img{border-radius: 64px;}
	.benefit-head_tit{width: 125px; height: 50px; font-size: 1.8rem;}
	.benefit-desc{padding: 40px 0;}
	.benefit-box{padding: 0 0 10px;}
	.benefit-item{width: 100%; margin: 0 0 30px; padding: 0 20px 20px;}
	.benefit-tit{font-size: 1.8rem; height: 36px; margin: 0 0 30px;}
	.benefit-tit span{width: 210px; height: 36px; right: 0; margin: 0 auto; padding: 15px 0 0 0; text-align: center; font-size: 1.8rem;}
	
	.training{margin: 0 0 35px;}
	.training .line2-lblue1{top: -30px; left: -110px;}
	.training1 .lineR-yellow{top: 60px; left: -105px;}
	.training1 .lineL-lblue{top: 43.5%; right: -110px;}
	
	.training2 .line2-blue{top: -43px; right: -106px;}
	.training2 .lineS-purple{top: -18px; left: -28px;}
	.training2 .lineS-lblue{bottom: 135px; left: -36px;}
	
	.welfare .lineL-lblue1{top: -45px; width: 70px; height: 70px;}
	.welfare1 .lineL-purple{top: -34px; right: -103px;}
	.welfare1 .lineL-blue{top: 51%; left: -103px;}
	.welfare2 .lineL-dblue{top: 44.5%; left: auto; right: -100px;}
	.welfare3 .lineL-blue{top: -30px; left: -90px;}
	.welfare3 .lineL-yellow{top: 43.5%; right: -100px;}
}