@charset "UTF-8";

/*===================================
	メインビジュアル
===================================*/
.kvBlock{
	width:100%;
	height:100vh;
	position:relative;
}
.kvBlock > .kvInnerBlock{position: absolute;bottom: 0;right: 0;}
.kvBlock > div > img{ width:100%; height:100%; object-fit:cover; }

.kvBlock .kvText{
	width:550px;
	font-weight:900;
	margin-right:200px;
	font-feature-settings: "palt";
}

.kvBlock .kvText h1{
	color:#1d2088;
	font-size:4.8rem;
	line-height: 7rem;
	font-weight:900;
	letter-spacing:0.05em;
	text-shadow: 0 0 2px #fff,
	0 0 4px #fff,
	0 0 8px #fff,
	0 0 10px #fff;
}
.kvBlock .kvText h1 span{
	font-size:4rem;
	line-height:4rem;
}
.kvBlock .kvText p{
	margin-top: 30px;
	color:#1d2088;
	font-size:2.5rem;
	font-weight: 500;
	font-family:'Outfit';
	text-shadow: 0 0 2px #fff,
	0 0 4px #fff,
	0 0 8px #fff,
	0 0 10px #fff;
}
.kvBlock > ul{ min-height:90px; width:calc(100% - 80px); margin:0 40px;  display:flex;  position:absolute; bottom:-45px; }
.kvBlock > ul li{ width:calc(100% / 3); }
.kvBlock > ul li + li{ border-left:1px solid #fff; }
.kvBlock > ul li a{
	width:100%;
	padding:15px 20px 15px 30px;
	height:100%;
	align-items:center;
	display:flex;
	color:#fff;
	font-weight:700;
	letter-spacing:0.09em;
	text-decoration:none;
	background:#217bbe;
	position:relative;
}
.kvBlock > ul li a:after{
	content:"";
	width:11px;
	height:11px;
	display:block;
	background:url(../img/arrow-white.svg) no-repeat center / 11px 11px;
	position:absolute;
	top:50%;
	right:20px;
	transform:translateY(-50%);
	-webkit-transform:translateY(-50%);
	-ms-transform:translateY(-50%);
}

.kvBlock > ul li a span{ display:block; font-size:1.5rem; font-weight:400; }
.kvBlock > ul li a img{ margin-right:10px; height:50px; }

.kvBlock > ul li a:hover{background:#D13D20;}
.kvBlock > ul li a:hover img{ opacity:1; }
.kvBlock > ul li p{ padding-right:15px; letter-spacing:0; }

.kvBlock .pc{ display:block; }
.kvBlock .middle,
.kvBlock .sp{ display:none; }

.kvBlock .splide img{
	height:100vh;
	margin:auto;
	max-height:100%;
	max-width:100%;
	object-fit:cover;
	width:100%;
}
.kvBlock .kvEntBlock{
	width:643px;
	padding:30px 40px;
	margin-top: 130px;
	margin-left: auto;
	background:#f4f4f4;
}
.kvBlock .kvEntBlock h2:first-letter{ color:inherit; }
.kvBlock .kvEntBlock h2:before{
	content:"";
	width:10px;
	height:10px;
	margin-right:20px;
	border-radius:50%;
	display:inline-block;
	background:#e60012;
}
.kvBlock .kvEntBlock h3{
	margin-bottom:12px;
	color:#1d2088;
	font-size:2rem;
	line-height:3rem;
}
.kvBlock .btnList{ width:562px; }

@media print,screen and (max-width:1400px){
	.kvBlock .kvText{right:214px;margin-right: 100px;}
	.kvBlock .kvEntBlock{
		margin-top: 100px;
	}
	.kvBlock .kvText h1{
		font-size:3.6rem;
		line-height: 5.8rem;
	}
	.kvBlock .kvText h1 span{
		font-size: 3rem;
		line-height:3rem;
	}
	.kvBlock .kvText p{
		margin-top: 20px;
		font-size: 1.8rem;
	}
}
@media print,screen and (max-width:1080px){
	.kvBlock .kvText{ width: 400px; margin-left: auto; margin-bottom: 120px; margin-right: 50px; }
	.kvBlock > .kvInnerBlock{ width: 450px; }
}


@media print,screen and (min-width:701px){
	.kvBlock .spOnly{
		display:none;
	}
	.kvBlock .pcOnly{
		display:block;
	}
}
@media print,screen and (max-width:700px){
	.kvBlock > .kvInnerBlock{ width:100%;position: static; }
	.kvBlock .kvText{
		width: 330px;
		margin-left: auto;
		margin-bottom:120px;
		padding-right:0;
		margin-right: 0;
		position:absolute;
		top: 240px;
		right: 20px;
	}
	.kvBlock .spOnly{
		display:block;
	}
	.kvBlock .pcOnly{
		display:none;
	}
	.kvBlock .kvText h1 {
		font-size: 3rem;
		line-height: 5.2rem;
	}
	.kvBlock .kvText h1 span {
		font-size: 2.6rem;
		line-height: 3rem;
	}
}



@media print,screen and (max-width:550px){
	.kvBlock .kvEntBlock{ padding:30px 20px; }
	.kvBlock .kvText{
		width: 254px;
		margin-left: auto;
		right: 15px;
	}
	.kvBlock .kvText h1{
		color:#1d2088;
		font-size: 2.4rem;
		line-height: 4.8rem;
		font-weight:900;
		letter-spacing: 0.02em;
	}
	.kvBlock .kvText h1 span{
		font-size: 2.2rem;
		line-height: 2.2rem;
	}
	.kvBlock .kvText p{
		font-size: 1.6rem;
	}
}


.kvBlock .kvEntBlock > div > div + div{ margin-top:20px; }

.kvBlock .kvEntBlock h2{
	padding-bottom:15px;
	margin-bottom:20px;
	display:flex;
	color: #212476;
	border-bottom:1px solid #1d2088;
	font-size:2.2rem;
	line-height:2.2rem;
	font-weight: 700;
	align-items:center;
}
@media print,screen and (max-width:1080px){
	.kvBlock{ height:100%; }
	.kvBlock .btnList,
	.kvBlock .kvEntBlock{
		width:100%;
	}
	.kvBlock .kvEntBlock{
		margin-top:0;
		display:block;
		position:static;
	}
}



/*===================================
採用メッセージ
===================================*/

.message > div{
	display:flex;
	width:1170px;
	padding:80px 0 100px;
	margin:0 auto;
	justify-content:space-between;
}
.message > div ul{ display:flex; }

.message > div ul > li{ width:calc((100% - 40px) / 2); margin-right:40px; }
.message > div ul > li:first-of-type{ margin-top:60px; }
.message > div ul > li:nth-of-type(2n){ margin-right:0; }
.message p{line-height:3.2rem;font-weight: 500;}


@media print,screen and (min-width:1231px){
	.message > div{
		display:flex;
	}
	.message > div > div{
		width:calc(100% - 690px);
	}
	.message > div ul{ 
		width:600px; margin-left:90px; 
	}
}
@media print,screen and (max-width:1230px){
	.message > div{
		width:100%;
		padding:80px 20px 100px;
	}
	.message > div > div{
		width:calc(100% - 660px);
	}
	.message > div ul{ 
		width:600px; margin-left:60px; 
	}
}
@media print,screen and (max-width:1080px){
	.message > div{display:block;padding: 60px 20px 80px;}
	.message > div > div{
		width:100%;
	}
	.message > div ul{
		width:100%;
		margin-left:0;
		margin-top:30px;
	}
}
@media print,screen and (max-width:700px){
	.message > div ul > li{ width:calc((100% - 30px) / 2); margin-right:30px; }
}
/*===================================
仕事を知る
===================================*/

.jobs{
	width:1170px;
	padding:80px 0 100px;
	margin:0 auto;
}

@media print,screen and (max-width:1230px){
	.jobs{ width:1080px; }
}
@media print,screen and (max-width:1120px){
	.jobs{width:100%;padding: 60px 20px 80px;}
}

.jobs h2{ display:inline-block; }
.jobs h2 span{ margin-right:20px; display:inline; }

.jobs > div{ display:flex; justify-content:space-between; }

@media print,screen and (max-width:700px){
	.jobs > div{ display:block; margin-bottom:60px; }
}

.jobs > ul{ display:flex; align-items:stretch; }
.jobs > ul > li{
	width:calc((100% - 40px) / 2);
	display:flex;
	flex-direction:column;
	position:relative;
	overflow:hidden;
}
.jobs > ul > li a{
	height:100%;
	color:#fff;
	display:flex;
	flex-direction:column;
	text-decoration:none;
}
.jobs > ul > li:hover img{ opacity:1; transform:scale(1.1, 1.1); }

.jobs > ul > li:before{
	content:"";
	width:24px;
	height:18px;
	display:block;
	background:url(../img/arrow.svg) 100% / 100% no-repeat;
	position:absolute;
	bottom:40px;
	right:40px;
	z-index:3;
}
.jobs > ul > li:hover:before{
	 animation:arrowmove .5s cubic-bezier(0.16, 1, 0.3, 1) 0s normal;
}
@keyframes arrowmove{
	0%,100%{
		opacity:1;
		translate:0 0;
	}

	50%{
		opacity:0;
		translate:.8rem 0;
	}

	50.1%{
		opacity:0;
		translate:-0.8rem 0;
	}
}


.jobs > ul > li + li{ margin-left:40px; }

.jobs > ul > li .imgWrap{
	width:100%;
	height:100%;
	position:relative;
	flex:1;
}
.jobs > ul > li .imgWrap img{
	width:100%;
	height:100%;
	display:block;
	object-fit:cover;
}

.jobs > ul li .imgWrap h3{
	font-size:3.2rem; 
	position:absolute;
	bottom:30px;
	left:40px;
	z-index:2;
}

.jobs > ul li .imgWrap .enText{
	margin-bottom:20px;
	display:block;
	font-family:'Outfit';
	font-size:1.6rem;
	font-weight:700;
}

.jobs > ul > li .imgWrap:after{
	content:"";
	width:100%;
	height:145px;
	position:absolute;
	bottom:0;
}

.jobs > ul .ironworks .imgWrap:after{
	background-image:linear-gradient(180deg, rgba(22, 67, 148, 0), rgba(22, 67, 148, 1));
}
.jobs > ul .construction .imgWrap:after{
	background-image:linear-gradient(180deg, rgba(1, 125, 110, 0), rgba(1, 125, 110, 1));
}
.jobs > ul li .textWrap{
	padding:10px 40px 90px;
	flex:1;
	z-index:2;
}

.jobs > ul .ironworks .textWrap{
	background:#164394;
}
.jobs > ul .construction .textWrap{
	background:#017d6e;
}


@media print,screen and (max-width:700px){
	.jobs > ul{ display:block; }
	.jobs > ul > li{ width:100%; }
	.jobs > ul > li + li{ margin-left:0; margin-top:40px; }
	.jobs > ul > li:before{
		width:20px;
		height:16px;
	}
	.jobs > ul li .imgWrap h3{
		font-size:2.8rem;
	}
	.jobs > ul li .imgWrap .enText{
		margin-bottom:10px;
		font-size:1.4rem;
	}
}

/*===================================
働く環境
===================================*/
.environment > div{
	width:1170px;
	padding:80px 0 100px;
	margin:0 auto;
	display:flex;
	justify-content:space-between;
}
.environment > div ul li{ position:relative; }
.environment > div ul li + li{ margin-top:60px; }
.environment > div ul li a{
	width:500px;
	height:230px;
	display:block;
	overflow:hidden;
}

@media print,screen and (max-width:1230px){
	.environment > div{
		width:1080px;
		padding:80px 20px 100px;
	}
}
@media print,screen and (max-width:1120px){
	.environment > div{
		width:100%;
		padding:80px 20px 100px;
	}
	.environment > div > div{ width:calc((100% - 80px) - 400px); }
	.environment > div > ul{ width:400px; margin-left:80px; }
	.environment > div ul li a{ width:400px; }
}
@media print,screen and (max-width:870px){
	.environment > div{ display:block; }
	.environment > div > div{ width:100%; }
	.environment > div > ul{
		width:100%;
		margin-top:60px;
		margin-left:0;
	}
	.environment > div ul li a,
	.environment > div ul li a img{ width:100%; height:100%; }
}

.environment > div ul li a .btn{
	width:calc(100% - 20px);
	padding:12px 20px;
	display:flex;
	color:#fff;
	font-size: 1.8rem;
	letter-spacing: 0.1em;
	align-items:center;
	justify-content:space-between;
	text-decoration:none;
	transition:all .3s ease;
	background-image:linear-gradient(135deg, #E60012 50%, #212476 50%);
	background-position:100%;
	background-size:300%;
	position:absolute;
	bottom:-25px;
	right:0;
}
.environment > div ul li a .btn:after{
	content:"";
	width:16px;
	height:12px;
	display:block;
	background:url(../img/arrow.svg) 100% no-repeat;
}
.environment > div ul li a:hover .btn{ background-position:0; }
.environment > div ul li a:hover img{
	opacity:1;
	transform:scale(1.1, 1.1);
}
.environment > div > div > .btn{ margin-top:70px; }
.environment h2 + p{ line-height:3.2rem; }

@media print,screen and (max-width:700px){
	.environment > div{ padding:60px 20px; }
}


/*===================================
フロー、QA
===================================*/
.otherList{
	width:810px;
	padding:80px 0;
	margin:0 auto;
	display:flex;
	justify-content:center;
}
.otherList li{ width:calc((100% - 60px) / 2); }
.otherList li a{
	width:100%;
	height:100%;
	padding-bottom:20px;
	color:#1d2088;
	border-bottom:1px solid #1d2088;
	font-size:2rem;
	font-weight:700;
	display:inline-flex;
	align-items:center;
	text-decoration:none;
	position:relative;
}
.otherList li a:before{
	content:"";
	width:56px;
	height:40px;
	margin-right:20px;
	display:inline-block;
}
.otherList li a:after{
	content:"";
	width:16px;
	height:12px;
	display:block;
	background:url(../img/arrow-blue.svg) 100% / 100% no-repeat;
	position:absolute;
	top:50%;
	right:0;
	transform:translateY(-50%);
	-webkit-transform:translateY(-50%);
	-ms-transform:translateY(-50%);
	transition:all .3s ease;
}
.otherList li a:hover{
	padding-left:20px;
	color:#e71122;
	border-bottom:1px solid #e71122;
}
.otherList li a:hover:after{
	background:url(../img/arrow-red.svg) 100% no-repeat;
	right:20px;
}

.otherList li + li{ margin-left:60px; }

.otherList .flow a:before{
	background:url(../../img/flow-icon.svg) 100% / 100% no-repeat;
}
.otherList .qa a:before{
	background:url(../../img/qa-icon.svg) 100% / 100% no-repeat;
}
.otherList .flow a:hover:before{
	background:url(../../img/flow-icon-red.svg) 100% / 100% no-repeat;
}
.otherList .qa a:hover:before{
	background:url(../../img/qa-icon-red.svg) 100% / 100% no-repeat;
}

@media print,screen and (max-width:900px){
	.otherList{
		width:100%;
		padding:80px 20px;
	}
	.otherList li a:before{
		width:46px;
		height:34px;
	}
}
@media print,screen and (max-width:700px){
	.otherList{ display:block; padding:60px 20px; }
	.otherList li{ width:100%; }
	.otherList li + li{ margin-left:0; margin-top:20px; }
}