@charset "utf-8";
/* CSS Document */
/* slider ---------------------------------------- */
.mask{
	background: rgba(4, 78, 162, 0.3);
	width: 100%;
	height: 100vh;
	position: absolute;
	z-index: 100;
	top: 0;
}
.slider{
	width: 100% !important;
	height: 100vh !important;
}
.slide01 .img{
	background: url(../img/slide01.jpg);
}

.slide02 .img{
	background: url(../img/slide03.jpg);
}
.slide03 .img{
	background: url(../img/slide02.jpg);
}
.slide01 .img,
.slide02 .img,
.slide03 .img{
	height: 100vh !important;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
.slick-complete .slick-slide .img{
  transition: transform 6s linear;
}
.slick-complete .slick-slide.slick-current .img {
  transform:scale(1.1);
}
/* common ---------------------------------------- */
.co-w{
	width: 100%;
	max-width: 1200px;
	margin: 0 auto 0;
	padding: 0 10px;
}
main h2,
main .co.balboa{
	text-align: center;
	color: #044EA2;
}
main h2{
	font-weight: bold;
}
hr.co{
	border: solid 1px #044EA2;
}
main .co.balboa{
	font-size: 40px;
}
/* message ---------------------------------------- */
#message{
    margin: -20px 0;
    padding: 20px 0;
}
#message .flex{
	width: 80%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 60px auto;
}
#message .img{
	width: 24%;
}
#message .img img {
    border-radius: 50%;
    margin: 0 0 20px;
    width: 70%;
}
#message .text{
	width: 76%;
}
#message .text h3{
	font-size: 24px;
	font-weight: bold;
	margin: 0 0 10px;
}
#message .text p{
	line-height: 30px;
}
#message .name{
	text-align: right;
	margin: 30px 0 0;
}
#message .img-box{
	width: 80%;
	margin: auto;
}
#message .img-box ul{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#message .img-box li{
	width: 48%;
	margin: 0 0 4%;
}
/* business ---------------------------------------- */
#business{
    margin: -20px 0;
    padding: 20px 0;
}
#business .box{
	position: relative;
	padding: 0 0 60px;
	margin: 60px 0 0;
}
#business .img{
	width: 60%;
    padding-top: 40%;
	background: url(../img/business_main01.jpg);
	background-repeat: no-repeat;
	background-size: cover;
    background-position: center center;
}
#business .text{
    width: 60%;
    height: 400px;
    background: #044EA2;
    position: absolute;
    top: 24%;
    right: 0;
    color: #fff;
    padding: 126px 40px;
    line-height: 30px;
    font-weight: bold;
}
#business .text h3{
	font-size: 20px;
	font-weight: bold;
	margin: 0 0 40px;
}
main #business .eligibility .co.balboa {
    font-size: 26px;
}
#business .eligibility{
	margin: 100px 0 0;
}
#business .eligibility .content{
	width: 100%;
	max-width: 800px;
    background: #044EA2;
    padding: 40px;
    margin: 30px auto 0;
}
#business .eligibility .content ul{
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}
#business .eligibility .content li{
	color: #fff;
	width: 50%;
	line-height: 32px;
    text-indent: -1em;
    padding-left: 1em;
    display: block;
    font-weight: bold;
}

/* recruit ---------------------------------------- */
#recruit{
    margin: -20px 0;
    padding: 20px 0;
}
#recruit .co-w:nth-child(1){
	margin: 0 auto;
}
#recruit .bg-img{
	width: 100%;
    padding-top: 450px;
	background: url(../img/bg-recruit.jpg);
	background-repeat: no-repeat;
	background-size: cover;
    background-position: center center;
    position: relative;
    margin: 60px 0 0;
}
#recruit .bg-img .mask{
	height: 0 !important;
    padding-top: 450px;
}
#recruit .bg-img p{
	font-weight: bold;
	font-size: 24px;
	line-height: 30px;
	text-align: center;
	color: #fff;
	position: absolute;
	top: 40%;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 100;
}
#recruit .staff h3{
    text-align: center;
    color: #044EA2;
    font-weight: bold;
    margin: 60px 0 0;
}
#recruit .staff .flex{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 60px 0 100px;
}
#recruit .staff .box{
	width: 40%;
	margin: 0 auto;
}
#recruit .staff .box img{
	border-radius: 50%;
    margin: 0 auto 20px;
    width: 50%;
}
#recruit .staff .flex-c {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    color: #044EA2;
}
#recruit .staff .box .face01{
    /*background:url(../img/profile.svg) center no-repeat;*/
    background:url(../img/member01.jpg) center no-repeat;
	background-size:cover;
	padding-top:100%;
	border-radius:50%;
	border:1px #044EA2 solid;
	width:150px;
	height:0;
	margin:0 0 10px;
}
#recruit .staff .box .face02{
    /*background:url(../img/profile.svg) center no-repeat;*/
    background:url(../img/member03.jpg) center no-repeat;
	background-size:cover;
	padding-top:100%;
	border-radius:50%;
	border:1px #044EA2 solid;
	width:150px;
	height:0;
	margin:0 0 10px;
}
#recruit .staff .box .img{
	width: 30%;
	margin:0 0 20px;
	max-width:150px;
}

#recruit .staff .box .face01,
#recruit .staff .box .face02
{
	width:100%;
}


#recruit .staff .box .details{
	width: 68%;
	border-bottom:1px #044EA2 solid;
}
#recruit .staff .box .details p{
	line-height: 1.5;
	padding: 0px 10px 5px;
	font-weight: bold;
    font-size: 17px;

}
#recruit .staff .box .name p {
	text-align: center;
	color: #044EA2;
    font-weight: bold;
    font-size: 18px;
    margin: 35px 0 20px;
}
#recruit .staff .box .name span{
	display: block;
	font-size: 14px;
}
#recruit .staff .box p{
	line-height: 30px;
}

#recruit .staff .box .text{
	margin: 0 0 10px;
    padding: 0 0 10px;
    border-bottom: 1px dotted #000;
}
#recruit .staff .box .text h4{
    font-weight: bold;
    font-size: 18px;
    margin: 0 0 5px;
}
#recruit .bg-co{
	width: 100%;
	background: #044EA2;
	padding: 100px 0;
	margin: 0 0 0;
}
#recruit .bg-co .co.balboa{
	color: #fff !important;
}
#recruit h3{
    text-align: center;
    color: #fff;
    font-weight: bold;
}
#recruit .list{
	margin: 60px 0 0;
}
#recruit .list dl, #recruit .list p {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	color: #fff;
	padding: 30px 10px;
	border-top: solid 1px #fff;
}
#recruit .list p {
    border-top: none;
    line-height: 30px;
}
#recruit .list dl:last-child{
	border-bottom: solid 1px #fff;
}
#recruit .list dt{
	width: 20%;
	font-weight: bold;
	font-size: 18px;
}
#recruit .list dd{
	padding: 0 0 0 10px;
}


#recruit .right-img {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	margin-bottom:30px;
}
#recruit .right-img p {
	padding:0 50px 0 0;
}
#recruit .right-img img {
	width:45%;
}

/* company ---------------------------------------- */
#company{
    margin: 0px 0;
    padding: 100px 0 20px;
}
#company .flex{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 60px 0 0;
}
#company .logo{
	width: 150px;
	margin: 0 0 40px;
}
#company .text{
	margin: 0 0 0 40px;
}
.company-list{
	display: flex;
	margin: 0 0 5px;
}
.company-list p{
	line-height: 30px;
}
.company-list p:nth-child(1){
	width: 50px;
    color: #044EA2;
    font-weight: bold;
}
.company-list p:nth-child(2){
	padding: 0 5px;
    color: #044EA2;
}
.company-list p:nth-child(3){
	flex:  1 auto;
}
#company .map{
	height: 400px;
	margin: 0 0 100px;
}
/* contact ---------------------------------------- */
#contact{
    margin: -20px 0;
    padding: 20px 0;
}
#contact p.text{
	margin: 40px 0;
	text-align: center;
}
#contact .tel{
    width: 240px;
    height: 50px;
    line-height: 50px;
    background: #044EA2;
    border: 1px solid #044EA2;
    color: #fff;
    font-weight: bold;
    text-align: center;
    margin: 0 auto 40px;
}
#contact .tel:hover{
    background: #fff;
    border: 1px solid #044EA2;
    color: #044EA2;
    opacity: 1;
}
#contact .fa-phone-square{
	transform: scale(-1, 1);
}
/* anima ---------------------------------------- */

/* anima header-box */
.header-box .logo .fadeIn{
	animation-duration: 8s;
	animation-delay: 0s;
}
/* anima message */
#message .img{
  	animation-delay: 0s;
}
#message .text{
  	animation-delay: 0.4s;
}
#message .img-box .zi1{
  	animation-delay: 0s;
  	width: 100%;
    margin: 0 auto 4%;
}
#message .img-box .zi2{
  	animation-delay: 0.4s;
}
#message .img-box .zi3{
  	animation-delay: 0.8s;
}
#message .img-box .zi4{
  	animation-delay: 1.2s;
}
/* anima business */
#business .img{
 	animation-delay: 0s;
}
#business .text{
 	animation-delay: 0.4s;
}
/* anima recruit */
#recruit .bg-img p{
	animation-duration: 2s;
	animation-delay: 0s;
}
#slide-2 {
  margin-top: 0;
	/* margin-bottom: 100px; */
  width: 100%;
}
#recruit .staff .fi1,
#recruit .staff .fi2,
#recruit .staff .fi3{
	animation-duration: 1.5s;
}
#recruit .staff .fi1{
  	animation-delay: 0s;
}
#recruit .staff .fi2{
  	animation-delay: 0.2s;
}
#recruit .staff .fi3{
  	animation-delay: 0.4s;
}
#recruit .list dl{
  	animation-duration: 2s;
}
/* anima company */
#company .logo,
#company .text{
  	animation-duration: 2s;
}
#company .logo{
  	animation-delay: 0s;
}
#company .text{
  	animation-delay: 0.2s;
}
#company .map{
	animation-duration: 4s;
	animation-delay: 0.4s;
}
/* anima contact */
#contact .si1,
#contact .si2,
#contact .si3{
	animation-duration: 1s;
}

#contact .si1{
	animation-delay: 0s;
}
#contact .si2{
	animation-delay: 0.4s;
}
#contact .si3{
	animation-delay: 0.6s;
}
@media screen and (max-width:899px){
/* message ---------------------------------------- */
	#message .img{
		width: 200px;
		margin: auto;
	}
	#message .img img {
	    margin: 0 auto 40px;
	    width: 70%;
	}
	#message .text{
		width: 100%;
	}
	#message .text h3{
		font-size: 20px;
		font-weight: bold;
		margin: 0 0 10px;
	}
/* business ---------------------------------------- */
	#business .img{
		width:100%;
	    padding-top: 70%;
	    margin: 0 0 20px;
	}
	#business .text{
		width:100%;
		height: auto;
	    position: inherit;
		padding: 40px 20px;
	}
	#business .eligibility .content li{
		width:100%;
	}

/* recruit ---------------------------------------- */
	#recruit .bg-img p{
		font-size: 18px;
	}
	#recruit .list dt{
		width: 100%;
		margin: 0 0 10px;
	}
	#recruit .list dd{
		padding: 0;
	}
	#recruit .staff .box .face01,
	#recruit .staff .box .face02 {
	    margin: 0 auto 10px;
	}


	#recruit .staff .box .img {
		width: 100%;
		margin:0 auto;
	}
	#recruit .staff .box .details{
		width: 100%;
		margin:0 0 20px;
	}
	#recruit .staff .box .details{
		text-align:center;
	}
	#recruit .right-img {
		flex-wrap: wrap;
	}
	#recruit .right-img p {
		padding:0 0 30px 0;
	}
	#recruit .right-img img {
		width:100%;
	}

}
@media screen and (max-width:767px){
/* recruit ---------------------------------------- */
	#recruit .staff .box{
		width: 60%;
		margin: 0 auto 40px;
	}


	#message .img-box .zi1{
	  	animation-delay: 0s;
	  	width: 100%;
	    margin: 0 auto 4%;
	}

}
@media screen and (max-width:599px){
/* message ---------------------------------------- */
	#message .flex,
	#message .img-box{
		width: 100%;
	}
/* recruit ---------------------------------------- */
	#recruit .bg-img,
	#recruit .bg-img .mask{
	    padding-top: 400px;
	}
	#recruit .bg-img p{
		font-size: 16px;
	}
	#recruit .staff .box{
		width: 80%;
	}
/* company ---------------------------------------- */
	#company .text{
		margin: 0;
	}
	#company .map{
		height: 350px;
	}
/* contact ---------------------------------------- */
	#contact p.text{
		text-align: left;
	}
}
@media screen and (max-width:320px){
	#business .eligibility .content{
	    padding: 40px 30px;

	}


/* recruit ---------------------------------------- */
	#recruit .bg-img,
	#recruit .bg-img .mask{
	    padding-top: 350px;
	}
	#recruit .bg-img p{
		font-size: 13px;
		line-height: 24px;
	}
}