@charset "utf-8";

.blockInner > .bg{
	position: absolute;
	top: calc(50% - 205px);
	width: 450px;
	height: 410px;
}

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

	main > section{
		padding: 0 5vw;
	}

	.blockInner{
		height: 100%;
	}

	.blockInner > .bg{
		width: 60vw;
		height: 78vw;
	}

	}/* --- max-width:979px */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ mvBlock */

.mvBlock{
	position: relative;
	height: 660px;
	background: url(../img/mv.jpg) no-repeat center;
	background-size: cover;
	overflow: hidden;
}

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

	.mvBlock{
		padding: 0;
		height: auto;
	}

	}/* --- max-width:979px */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ topBlock */

.topBlock{
	background: #f2f2f2;
	height: 600px;
	position: relative;
	overflow: hidden;
}

.topBlock:before{
	content: '';
	position: absolute;
	display: block;
	width: calc((100% - 1000px) / 2);
	height: 410px;
	background: #fff;
	top: calc(50% - 205px);
	right: 0;
}

.topBlock .bg{
	right: 0;
	background: #fff;
}

.topBlock .bg:before{
	content: '';
	position: absolute;
	display: block;
	top: calc(50% - 205px);
	right: 450px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 410px 175px;
	border-color: transparent transparent #fff transparent;
}

.topBlock .blockInner{
	position: relative;
	overflow: hidden;
	display: block;
}

.topBlock .txt{
	position: absolute;
	top: calc(50% - 112px);
	right: 0;
	width: 410px;
	font-size: 16px;
	line-height: 1.8;
}

#words_white{
	position: absolute;
	color: #fff;
	top: 200px;
/*	transition: all 0.5s;*/
}

#words_black{
	position: absolute;
	color: #000;
	top: -459px;
/*	transition: all 0.5s;*/
}

.btn_white{
	width: 220px;
	height: 50px;
}

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

	.topBlock{
		padding-top: 0;
		padding-bottom: 0;
		height: 94vw;
	}

	.topBlock:before{
		display: none;
	}

	.topBlock .bg{
		top: 8vw;
		right: -5vw;
		background: #fff;
	}

	.topBlock .bg:before{
		top: 0;
		right: 60vw;
		border-width: 0 0 78vw 34vw;
	}

	.topBlock .txt{
		top: 14vw;
		width: 100%;
		padding: 0 5vw;
		font-size: 4vw;
	}

	.btn_white{
		width: 30vw;
		height: 10vw;
	}

	.btn_white span{
		font-size: 3vw;
		padding: 0;
		text-align: center;
	}

	}/* --- max-width:979px */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ companyBlock */

.companyBlock{
	background: #fff;
	padding-top: 100px;
	padding-bottom: 100px;
	height: auto;
}

.companyBlock:before{
	content: '';
	position: absolute;
	display: block;
	width: calc((100% - 1000px) / 2);
	height: 410px;
	background: #f2f2f2;
	top: 100px;
	left: 0;
}

.companyBlock .bg{
	top: 0;
	left: 0;
	background: #f2f2f2;
}

.companyBlock .bg:before{
	content: '';
	position: absolute;
	display: block;
	top: 0;
	left: 450px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 410px 175px 0 0;
	border-color: #f2f2f2 transparent transparent transparent;
}

.companyBlock .blockInner{
	padding-top: 70px;
}

.companyBlock .ttlBox{
	margin-bottom: 50px;
}

.companyBlock .sub{
	position: relative;
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 50px;
	line-height: 1.8;
}

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

	.companyBlock{
		padding-top: 8vw;
		padding-bottom: 13vw;
		height: auto;
	}

	.companyBlock:before{
		display: none;
	}

	.companyBlock .bg{
		top: 0;
		left: -5vw;
	}

	.companyBlock .bg:before{
		left: 60vw;
		border-width: 78vw 34vw 0 0;
	}

	.companyBlock .blockInner{
		padding-top: 8vw;
	}

	.companyBlock .ttlBox{
		margin-bottom: 6.5vw;
	}

	.companyBlock .sub{
		font-size: 3.7vw;
		margin-bottom: 10vw;
	}

	}/* --- max-width:979px */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ recruitBlock */

.recruitBlock{
	background: #f2f2f2;
	padding-top: 100px;
	padding-bottom: 50px;
	height: auto;
}

.recruitBlock:before{
	content: '';
	position: absolute;
	display: block;
	width: calc((100% - 1000px) / 2);
	height: 410px;
	background: #fff;
	top: 100px;
	left: 0;
}

.recruitBlock .bg{
	top: 0;
	left: 0;
	background: #fff;
}

.recruitBlock .bg:before{
	content: '';
	position: absolute;
	display: block;
	top: 0;
	left: 450px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 410px 175px 0 0;
	border-color: #fff transparent transparent transparent;
}

.recruitBlock .blockInner{
	padding-top: 70px;
}

.recruitBlock .ttlBox{
	margin-bottom: 50px;
}

.recruitBlock .sub{
	position: relative;
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 50px;
	line-height: 1.8;
}

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

	.recruitBlock{
		padding-top: 8vw;
		padding-bottom: 13vw;
		height: auto;
	}

	.recruitBlock:before{
		display: none;
	}

	.recruitBlock .bg{
		top: 0;
		left: -5vw;
	}

	.recruitBlock .bg:before{
		left: 60vw;
		border-width: 78vw 34vw 0 0;
	}

	.recruitBlock .blockInner{
		padding-top: 8vw;
	}

	.recruitBlock .ttlBox{
		margin-bottom: 6.5vw;
	}

	.recruitBlock .sub{
		font-size: 3.7vw;
		margin-bottom: 10vw;
	}

	}/* --- max-width:979px */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ aboutBlock */

.aboutBlock{
	background: #d9d9d9;
	padding-top: 100px;
	padding-bottom: 100px;
}

.aboutBlock .ttl_main {
	margin-bottom: 50px;
}

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

	.aboutBlock{
		padding-top: 14vw;
		padding-bottom: 13vw;
		height: auto;
	}

	.aboutBlock .ttl_main{
		margin-bottom: 10vw;
	}

	}/* --- max-width:979px */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ etc */

.infoBox{
	position: relative;
	width: 100%;
	max-width: 1000px;
	margin: auto;
	height: 100%;
}

.infoBox li{
	padding: 30px 0;
	margin-top: 1.3rem;
}
.infoBox li:first-child{margin: 0;}

.infoBox li a,
.infoBox li span{
	font-weight: bold;
}

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

	.infoBox li{
		padding: 5vw 4vw;
	}

	}/* --- max-width:979px */