@charset "utf-8";
  

  

/*--------------------------------
	top
--------------------------------*/
/*visual*/
#top-visual{
	background:url(../images/recruit/top_visual.jpg) top center no-repeat;
	background-size: cover;
	height:100vh;
	width:100vw;
	opacity:0;
}

.top-visual-inner{
background:url(../images/recruit/visual-overlay.png) top left no-repeat;top:0;margin:0;
background-size: 60%;
	height:100vh;
	width:100vw;
}

.header-logo{
	position:relative;
	top:24px;
	left:24px;
}

.top-visual-title{
	position:relative;
	top:36%;
	left:5%;
}

.top-visual-title img{
	width:40%;
	max-width:700px;
}

@media screen and (min-width:1366px) {
.top-mv-message{
	position:absolute;
	right:8%;
	bottom:240px
	}
}


@media screen and (min-width:769px) and ( max-width:1365px) {
.top-mv-message{
	position:absolute;
	right:20px;
	bottom:240px;
	}
}


@media screen and (max-width:768px) {
	.top-mv-message{
		bottom:270px;
		position:absolute;
		text-align:center;
		width:100%;
		padding:0 4%;
	}
	.top-mv-message img{
	width:88%;
	max-width:480px;
	}
}


.top-info{
	bottom:0;
	position:absolute;
	text-align:center;
	width:100%;
	padding:0 8%;
}

.top-info-inner{
	display:flex;
	align-items:stretch;
	align-items:flex-start;
	width:100%;
	margin:0 auto;
	background-color:#fff;
}

.top-info-inner > *{
	display:flex;
	flex-wrap:wrap;
	width:100%;
}

.new-label{
	padding:0 1em;
	display:inline;
	font-family:  "Oswald";
	font-size:1.5rem;
	color:#f79512
}


.top-info dt,.top-info dd{
	display:none;
}

.top-info dt:first-of-type,.top-info dd:first-of-type{
	display:block;
}

.top-info .list-btn span::before{
	font-family: 'fa-solid-900';
    content: "\f106";
    color:#0e767c;
    font-size:1.4rem;
    margin-right:.5em;
}

.top-info.active .list-btn span::before{
	font-family: 'fa-solid-900';
    content: "\f107";
    color:#0e767c;
    font-size:1.4rem;
    margin-right:.5em;
}

.top-info .list-btn span.close,.top-info.active .list-btn span.more{
	display:none;
}

.top-info.active .list-btn span.close{
	display:block;
}

 @media screen and (max-width: 1400px) {
 
 .top-visual-title img{
	width:40%;
}

}

@media screen and (min-width:769px) and ( max-width:1400px) {
 
 	.top-visual-title img{
		width:40%;
	}

}

@media screen and (min-width:769px) and ( max-width:1365px) {

 	.top-visual-title img{
		width:50%;
	}

}

@media screen and (min-width:769px) {
	.top-info{
		margin-bottom:110px;
	}

	.top-info-title{
		margin:0;
		padding:30px 0 0;
		width:10em;
		font-size:1.8rem;
		text-align:center;
		color:#22979e;
		font-weight:500;
		font-family:  "Oswald";
	}
	
	.top-info-title span{
		padding:0 38px;
		margin:0 10px;
		width:100%;
		display:inline-block;
		border-right:1px solid #ddd;
	}
	
	.top-info dl{
		padding:30px 20px 0;
		margin:0;
		text-align:left;
		align-items:stretch;
		line-height:1.6;
		width:calc(92% - 10em);
	}
	
	.top-info dt{
		width:13em;
		color:#777;
	}
	
	.top-info dd{
		width:calc(100% - 13em);
	}
	
	.top-info dt:first-of-type,.top-info dd:first-of-type{
		padding-top:0;
	}
	
	.no-info{
		padding:30px 20px;
		margin:0;
	}
	
	.top-info dt,.top-info dd{
		margin-bottom:30px;
	}
	
	.top-info dt:last-of-type,.top-info dd:last-of-type{
		margin-bottom:40px;
	}
	
	.top-info .list-btn{
		width:8%;
		line-height:85px;
		cursor:pointer;
		position:relative;
	}
	
	.top-info .list-btn span{
		height:100%;
		width:100%;
		color:#0e767c;
		font-size:1.2rem;
	display:block;
	
	}
	
	.top-info.active .list-btn span.close{
		background:#f1f1f1;
	}


}

 @media screen and (max-width: 768px) {

	 #top-visual{
		background:url(../images/recruit/top_visual-sp.jpg) top right no-repeat;
		background-size: cover;
		width:100%;
		opacity:1;
	}
	
	.top-visual-inner{
		background:url(../images/recruit/visual-overlay.png) top left no-repeat;
		top:0;
		margin:0;
		background-size: 100%;
		height:100vh;
		width:100%;
	}

	.header-logo{
		margin:10px 0 0 4%;
		position:static;
	}
 
	 .header-logo img{
		width:70%;
	}

	.top-visual-title{
		position:relative;
		top:36%;
		left:0;
		padding:0 4%;
	}

	.top-visual-title img{
		width:100%;
	}
	
	.top-info{
		text-align:left;
		width:100%;
		height:auto;
		padding:0 4%;
		margin-bottom:90px;
	}

.top-info-inner{
	width:100%;
	flex-direction:column;
	align-items:auto;
	height:auto;
	background:none;
}

.top-info-title{
	margin:0;
	padding:12px 4%;
	width:100%;
	font-size:1.8rem;
	text-align:left;
	color:#fff;
	background:#22979e;
	font-family:  "Oswald";
}

.top-info-title span{
	padding:0;
	border:none;
}

.top-info dl{
	width:100%;
	background-color:rgba(255,255,255,0.95);
	flex-direction:column;
	align-items: flex-start;
	padding:15px 4% 0;
	margin:0 0 10px 0;
	text-align:left;
	display: -webkit-flex;
	display: flex;
	align-items: center;
	line-height:1.6;
	width:100%;
}

.top-info dt{
	text-align:left;
	width:100%;
	color:#0e767c;
	padding-right:1.5em;
	margin-bottom:4px;
}

.top-info dd{
	padding:0;
	width:100%;
	margin-bottom:20px;
}


.top-info .list-btn{
	width:auto;
	height:auto;
	text-align:right;
	position:absolute;
	top:0;
	right:4%;
	background:none;
}

.top-info .list-btn span{
	color:#fff;
	padding:17px 16px 17px 10px;
	display:block;
	font-size:1.2rem;
}


.top-info .list-btn span::before,.top-info.active .list-btn span::before{

	color:#fff;
}

.no-info{
	width:100%;
	padding:18px 20px;
	background:#fff;
}


}


 @media screen and (max-width: 340px) {
	.top-visual-title{
		top:32%;
	}
}

 @media screen and (min-width: 640px) and  (orientation: portrait){

	 #top-visual{
		background:url(../images/recruit/top_visual.jpg) top right no-repeat;
		background-size: cover;
		background-position:65% 0;
		width:100%;
		opacity:1;
	}
	
	.top-visual-inner{
		background-size: 70%;
	}

	
	.top-visual-title img{
		width:100%;
	}
	
}

 @media screen and (max-height: 640px)  and (orientation: landscape){

	 #top-visual{
		background:url(../images/recruit/top_visual.jpg) top right no-repeat;
		background-size: cover;
		background-position:-40vw -16vh;
		height:160vh!important;
	}
	
	.top-visual-inner{
		background-size: 64%;
	}
	
	.top-visual-title img{
		width:70%;
	}
	
}

/*section*/

.sec-card-odd,.sec-card-even{
	display: flex;
}


.sec-card-odd .sec-card-background{
	position: absolute;
	bottom: 0;
	left:0;
	width: 0%;
	height: 0vh;
	background: #e7f5f6;
	z-index: 0;
	transition: all  0.6s ease;
}

.sec-card-even .sec-card-background{
	position: absolute;
	bottom: 0;
	right:0;
	width: 0%;
	height: 0vh;
	background: #fff7e8;
	z-index: 0;
	transition: all  0.6s ease;
}


.sec-card-odd .sec-card-box{
	width: 100%;
	max-width:1120px;
	margin:calc(30vh - 100px) auto 0;
	z-index: 2;
	text-align:left;
	justify-content:center;
}

.sec-card-even .sec-card-box{
	width: 100%;
	max-width:1120px;
	margin:calc(30vh - 100px) auto 0;
	z-index: 2;
}

.sec-card-odd .sec-card-image{
	position: absolute;
	top 0;
	right: -130%;
	width: 61%;
	max-width:1140px;
	height:80%;
	z-index: 1;
	opacity:0;
     -webkit-transition: all 0.6s ease;
	-moz-transition: all 0.6s ease;
	-o-transition: all 0.6s ease;
	transition: all  0.6s ease;
}



.sec-card-even .sec-card-image{
	position: absolute;
	top 0;
	left:-130%;
	width: 61%;
	max-width:1140px;
	height:80%;
	z-index: 1;
	 -webkit-transition: all 0.6s ease;
	-moz-transition: all 0.6s ease;
	-o-transition: all 0.6s ease;
	transition: all  0.6s ease;
}

.sec-card-box h2{
	color:#22979e;
	font-size:7.5rem;
	font-family:  "Oswald";
	font-weight:700;
	line-height:1.1;
}

#mission .sec-card-odd .sec-card-box h2::before{
	content:"01";
	display:block;
	font-size:5rem;
	font-weight:500;
	color:#9bd1d5;
}


#about .sec-card-even .sec-card-box h2::before{
	content:"02";
	display:block;
	font-size:5rem;
	font-weight:500;
	color:#9bd1d5;
}

#business .sec-card-odd .sec-card-box h2::before{
	content:"03";
	display:block;
	font-size:5rem;
	font-weight:500;
	color:#9bd1d5;
}

#job .sec-card-even .sec-card-box h2::before{
	content:"04";
	display:block;
	font-size:5rem;
	font-weight:500;
	color:#9bd1d5;
}

.sec-card-box h2 span.text-s{
	font-size:5.5rem;
}

.sec-card-box h2 span.text-ss{
	font-size:1.8rem;
	font-weight:700;
	display:block;
	margin:10px 0 40px;
	font-family:  "Noto Sans JP", "Yu Gothic", "Hiragino kaku Gothic ProN", Meiryo, sans-serif;
}

.sec-card-even h2{
	text-align:right;
}

.sec-card-box p{
	width:30%;
	line-height:2;
}

.sec-card-even .sec-card-box p{
	margin-left:70%;
}

.sec-card-box a{
	display:block;
	width:240px;
	text-align:center;
	font-family:  "Oswald";
	font-weight:700;
	line-height:1.1;
	color:#22979e;
	background:#fff;
	border:1px solid #22979e;
	padding:20px;
	margin-top:65px;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all  .5s ease;
}

.sec-card-box a:hover{
	color:#fff;
	background:#22979e;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all  .5s ease;
	 animation: pulse .5s 1;
}

.sec-card-even .sec-card-box a{
	margin-left:calc(100% - 240px);
	
}
	
#education{
	background: #e7f5f6;
}

.sec-education{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display:flex;
	
	width:88%;
	height:100vh;
	min-height:600px;
	margin:0 auto;
	align-items:center;
}
.sec-education-inner{
	background:#22979e;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display:flex;
	flex-direction:row-reverse;
	align-items:center;
	width:100%;
	-webkit-transition: all 0.9s ease;
	-moz-transition: all 0.9s ease;
	-o-transition: all 0.9s ease;
	transition: all  0.9s ease;
	opacity:0;
}
.sec-education .sec-education-image{
	width:50%;
}

.sec-education .sec-education-box{
	width:50%;
	padding:0 100px;
	
}

.sec-education .sec-education-box h2{
	color:#fff;
	font-size:4rem;
	font-family:  "Oswald";
	font-weight:700;
	line-height:1.1;
	margin-bottom:40px;
	text-align:center;
}
.sec-education .sec-education-box h2 span.text-ss{
	font-size:1.8rem;
	font-weight:700;
	display:block;
	margin:10px 0 40px;
	font-family:  "Noto Sans JP", "Yu Gothic", "Hiragino kaku Gothic ProN", Meiryo, sans-serif;
}

.sec-education .sec-education-box p{
	color:#fff;
}

.sec-education .sec-education-box a{
	display:block;
	width:240px;
	text-align:center;
	font-family:  "Oswald";
	font-weight:700;
	line-height:1.1;
	color:#22979e;
	background:#fff;
	border:1px solid #22979e;
	padding:20px;
	margin:50px auto 0;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all  .5s ease;
}

.sec-education .sec-education-box a:hover{
	color:#fff;
	background:#22979e;
	border:1px solid #fff;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all  .5s ease;
	 animation: pulse-w .5s 1;
}

.sec-application,.sec-application ul{
	text-align:center;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display:flex;
	justify-content:center;
}

.sec-application{
	background:url(../images/recruit/background_application.png) top center no-repeat;
	background-size:150%;
	height:calc(100vh - 200px);
	align-items:center;	
	width:100%;
}

.sec-application-inner,.sec-application-inner ul{
	width:100%;
}

.sec-application li a{
	display:block;
	text-align:center;
	font-family:  "Oswald";
	font-size:2.1rem;
	font-weight:500;
	line-height:1.1;
	color:#22979e;
	background:#fff;
	border:1px solid #22979e;
	padding:36px 0;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all  .5s ease;
}

.sec-application li a:hover{
	color:#fff;
	background:#22979e;
	border:1px solid #22979e;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all  .5s ease;
	 animation: pulse .5s 1;
}


.sec-application h2 {
	font-size:3.6rem;
	font-weight:700;
	line-height:1.1;
	 margin-bottom:100px;
}

.sec-application-inner{
	-webkit-transition: all 0.9s ease;
	-moz-transition: all 0.9s ease;
	-o-transition: all 0.9s ease;
	transition: all  0.9s ease;
	opacity:0;
}
	

.sec-application-inner ul li{

width:50%;
max-width:420px;
margin:0 5%;
}

.sec-application p {
	 margin-bottom:70px;
	 line-height:2.4;
}





.page-title {
    height: 480px;
    width: 100%;
    background-size: cover;
    background-position:center top;
    display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	align-items:center;
	justify-content:center;
}

.page-title h1 {
	color:#22979e;
	font-size:4.8rem;
	font-family:  "Oswald";
	font-weight:700;
	line-height:1.1;
	text-align:center;
	margin:40px 0;
}

.page-title h1 .title-jp{
	font-family:  "Noto Sans JP", "Yu Gothic", "Hiragino kaku Gothic ProN", Meiryo, sans-serif;
	font-size:2.4rem;
	font-weight:700;
	color:#222;
	display:block;
	margin-top:20px;
}




 @media screen and (max-width: 768px) {
.page-title {
    height: 240px;
}



.page-title h1 {
	font-size:3.2rem;
	margin:40px 0 0;
}

.page-title h1 .title-jp{
	font-size:1.8rem;
}


}

 @media screen and (max-width: 1365px) {
 
 	.sec-education{
 		padding:0;
 	}
 	
 	.sec-application{
 		padding:20px;
 	}
	

}

@media screen and (min-width:769px) and ( max-width:1365px) {

	.top-info{
		padding:0 20px;
	}

	.top-info-title span{
		padding:0 20px;
	}


	.sec-card-odd .sec-card-box,.sec-card-even .sec-card-box{
		padding-right:40px;
		margin:calc(30vh - 85px) auto 0;
	}

	.sec-card-odd .sec-card-box,.sec-card-even .sec-card-box{
		padding-left:40px;
	}
	
	.sec-card-box h2{
		font-size:5rem;
	}


.sec-card-box p{
	width:32%;
	line-height:1.8;
}

.sec-card-even .sec-card-box p{
	margin-left:68%;
}
	
	
	.sec-education .sec-education-image{
		width:56%;
	}

	.sec-education .sec-education-box{
		width:44%;
		padding:0 20px;
	}

	
	.sec-education .sec-education-box h2{
		font-size:3rem;
		margin-bottom:20px;
	}
	

	.sec-education .sec-education-box h2{
		font-size:3rem;
		margin-bottom:20px;
	}
	
	.sec-education .sec-education-box h2 span.text-ss{
		margin:10px 0 20px;
	}

	.sec-education .sec-education-box a{
		margin:30px auto 0;
	}

	.sec-application li a{
		padding:24px 0;
		font-size:1.8rem;
	}
	
	.sec-application h2 {
		font-size:3rem;
		 margin-bottom:120px;
	}
	
	.sec-application p {
		 margin-bottom:40px;
	}


}


 @media screen and (max-width: 768px) {
 
  .sec-card-odd,.sec-card-even{
	flex-direction:column-reverse;
	margin-top:50px;
	padding:4%;
}


 .sec-card-odd .sec-card-background, .sec-card-even .sec-card-background{

	bottom: 0;
	width: 100%;
	height: 70%;
}

.sec-card-odd .sec-card-box,.sec-card-even .sec-card-box{
	margin:auto auto 0;
	padding:20px 4% 50px;
	justify-content:center;
}
 
 .sec-card-odd .sec-card-image,.sec-card-even .sec-card-image{
	position: relative;
	top:0;
	left:4%;
	width: 92%;
	height:260px;
	opacity:1;
}
 
 
 .sec-card-box h2{
	font-size:4.2rem;
	margin:0;
	text-align:center;
}

#mission .sec-card-odd .sec-card-box h2::before,#about .sec-card-even .sec-card-box h2::before,#business .sec-card-odd .sec-card-box h2::before,#job .sec-card-even .sec-card-box h2::before{
	font-size:4.2rem;
	display:inline-block;margin-right:0.2em;
}

.sec-card-box h2 span.text-s{
	font-size:3rem;
}


.sec-card-box h2 span.text-ss{
	font-size:1.8rem;
	font-weight:700;
	display:block;
	margin:10px 0 40px;
}

.sec-card-box p{
	width:100%;
	line-height:2;
	margin:0;
}

.sec-card-odd .sec-card-box p,.sec-card-even .sec-card-box p{
	margin:0;
}
 
 .sec-card-box a{
	width:100%;
}


.sec-card-odd .sec-card-box a,.sec-card-even .sec-card-box a{
	margin:30px 0 0;
	
}

	#education{
		padding:0 4%;
	}
	
	.sec-education{
		width:100%;
		height:auto;
		padding:80px 0;
	}

	.sec-education-inner{
		flex-direction:column;
		opacity:1;
	}
	
	.sec-education .sec-education-image,.sec-education .sec-education-image img{
		width:100%;
	}

	.sec-education .sec-education-box{
		width:100%;
		padding:40px;
	}
	
	.sec-education .sec-education-box h2{
		font-size:3rem;
		margin-bottom:20px;
	}
	
	.sec-education .sec-education-box h2 span.text-ss{
		margin:10px 0 20px;
	}

	.sec-education .sec-education-box a{
		width:100%;
		margin:30px auto 0;

	}
	
	#application{
		height:100%;
	}
	
	.sec-application{
		background-size:400%;
		background-position:bottom center;
		height:auto;
	}
	
	.sec-application-inner{
		opacity:1;
		padding:80px 0 40px;
	}
	
	.sec-application,.sec-application ul{
		flex-direction:column;
	}

	
	.sec-application li a{
	padding:24px 0;
	font-size:1.8rem;
	
	width:100%;	
	}
	
	.sec-application h2 {
	font-size:2.4rem;
	 margin-bottom:40px;
	 line-height:1.8;
}

.sec-application-inner ul{

width:100%;
padding-bottom:20px;
}

.sec-application-inner ul li{
width:100%;
max-width:480px;
margin:0 auto 20px;

}


.sec-application p {
	 margin-bottom:30px;
	 text-align:left;
}



}



@media screen and (max-width: 376px) {

	.sec-card-box h2{
		font-size:3rem;
	}

	#mission .sec-card-odd .sec-card-box h2::before,#about .sec-card-even .sec-card-box h2::before,#business .sec-card-odd .sec-card-box h2::before,#job .sec-card-even .sec-card-box h2::before{
		font-size:3rem;
	}

	.sec-card-box h2 span.text-s{
		font-size:2.4rem;
	}
	
	.sec-card-box h2 span.text-ss{
		font-size:1.6rem;
	}
	
	.sec-education .sec-education-box{
		width:100%;
		padding:20px;
	}

}


@media screen and (max-width: 768px) and (orientation: landscape) {
	.sec-education{
		width:60%;
		padding:80px 0;
	}
	
.sec-application{
		background-size:200%;
		background-position:bottom center;
	}
	
.sec-application-inner ul{
	justify-content:space-between;
	flex-direction:row;
	padding:0 4% 40px;

}

.sec-application-inner ul li{

width:45%;margin:0;

}

}

@media screen and (min-width: 769px) and (orientation: portrait) {
#mission,#about,#business,#job{
	margin-bottom:80px;
}

	.sec-card-odd .sec-card-background,.sec-card-even .sec-card-background{
		width: 70%;
		height: 64%;
}

	.sec-card-odd .sec-card-box,.sec-card-even .sec-card-box{
		margin:16% auto 0!important;
	}

	.sec-card-odd,.sec-card-even{
		flex-direction:column-reverse;
		padding:0 4% 10%;
	}

	.sec-card-odd .sec-card-image{
		position: absolute;
		top:0;
		right:0;
		width:58%;
		height:70%;
		opacity:1;
	}

	.sec-card-even .sec-card-image{
		position: absolute;
		top:0;
		left:0;
		width:58%;
		height:64%;
		opacity:1;
	}


/*----------*/
	#education{
		padding:0 8%;
	}
	
	.sec-education{
		height:auto;

	}
	
	.sec-education-inner{
		flex-direction:column;
		opacity:1;
	}
	
	.sec-education .sec-education-image,.sec-education .sec-education-image img{
		width:100%;
	}

	.sec-education .sec-education-box{
		width:100%;
		padding:40px;
	}
	
	.sec-education{
		width:80%;
		padding:80px 0;
	}
	
	.sec-application{
		background-size:200%;
		background-position:bottom center;
		height:auto;padding:120px 0;
	}
	
	.sec-application-inner{
		opacity:1;	
	}
	
	.sec-application h2 {
	 margin-bottom:50px;
	 }

	.sec-application-inner ul{
		justify-content:space-between;
		flex-direction:row;
		padding:0 4% 40px;
	}

	.sec-application-inner ul li{
		width:45%;
		margin:0;
	}

}