/* main visual -------------------*/

#main-visual{
	position: relative;
	overflow: hidden;
	width: 100%;
	height: calc(100vh - 60px);
}
.slider li{
	width: 100%;
	height: calc(100vh - 60px);
	background-size: cover;
	background-position: center center;
	animation: topScale 8s linear infinite;
	-webkit-animation: topScale 8s linear infinite;
}
.bx-viewport{
	height: calc(100vh - 60px);
}
.slider li:first-child{
	background-image: url(../img/top/slider_1.jpg);
}
.slider li:nth-child(2){
	background-image: url(../img/top/slider_2.jpg);
}
.slider li:nth-child(3){
	background-image: url(../img/top/slider_3.jpg);
}
.slider li:nth-child(4){
	background-image: url(../img/top/slider_4.jpg);
}
@-webkit-keyframes topScale{
	0%{ transform: scale(1); }
	100%{ transform: scale(1.15); }
}
@keyframes topScale{
	0%{ transform: scale(1); }
	100%{ transform: scale(1.15); }
}
.main-copy{
	position: absolute;
	right: 6%;
	bottom: 8%;
	width: 50vw;
	height: auto;
	z-index: 100;
}
.scroll-down{
	position: absolute;
	right: 20px;
	bottom: 40px;
	width: 20px;
	height: auto;
}

@media screen and (max-width: 1080px){
	#main-visual{
		height: 650px;
	}
	.slider li{
		height: 650px;
	}
	.main-copy{
		position: absolute;
		right: 50px;
		bottom: 3%;
		width: 65%;
		margin: 0 auto;
		text-align: center;
	}
	.scroll-down{
		position: absolute;
		right: 10px;
		top: 40%;
	}
}
@media screen and (max-width: 650px){
	#main-visual,
	.slider li{
		height: 50vh;
	}
	.main-copy{
		position: absolute;
		right: 0;
		left: 0;
		bottom: 5%;
		width: 90%;
	}
	.scroll-down{
		display: none;
	}
}

/* top contents -------------------*/

#main .outer{
	margin: 180px auto;
}
.outer .title{
	font-weight: bold;
	letter-spacing: 0.3em;
	padding-bottom: 70px;
}
.outer .title h2{
	font-size: 28px;
	font-size: 2.8rem;
	font-family: 'Roboto Condensed', sans-serif;
}
.outer .title p{
	color: #777;
	padding-top: 14px;
}

@media screen and (max-width: 1080px){
	#main .outer{
		margin: 120px auto;
	}
	.outer .title{
		padding-bottom: 70px;
	}
}
@media screen and (max-width: 650px){
	#main .outer{
		margin: 80px auto;
	}
	.outer .title{
		padding-bottom: 30px;
	}
	.outer .title h2{
		font-size: 21px;
		font-size: 2.1rem;
	}
	.outer .title p{
		padding-top: 8px;
		letter-spacing: 0.15em;
	}
}

/* message -------------------*/

#main #message{
	position: relative;
	width: 100%;
	height: auto;
	padding: 40px;
	margin: 140px auto;
	background: url(../img/top/message_bg.jpg) right 45% no-repeat;
}
#message .text{
	width: 100%;
	letter-spacing: 0.15em;
}
#message .text h3.read{
	color: #6ec85a;
	font-size: 28px;
	font-size: 2.8rem;
}
#message .text p{
	line-height: 2;
	padding-top: 50px;
}

@media screen and (max-width: 1080px){
	#main #message{
		padding: 60px 0 80px;
		margin: 80px auto;
		background: url(../img/top/message_bg.jpg) right 45% no-repeat;
		background-size: 50% auto;
	}
	#message .text h3.read{
		font-size: 23px;
		font-size: 2.3rem;
	}
	#message .text p{
		padding-top: 30px;
	}
}
@media screen and (max-width: 650px){
	#main #message{
		padding: 0;
		margin: 70px auto;
		background: url(../img/top/message_bg.jpg) right bottom no-repeat;
		background-size: 320px auto;
	}
	#message .text{
		width: 86%;
		margin: 0 auto;
	}
	#message .text h3.read{
		font-size: 20px;
		font-size: 2.0rem;
		line-height: 1.5;
	}
	#message .text p{
		text-align: left;
		text-align: justify;
		text-justify: inter-ideograph;
		line-height: 1.8;
		letter-spacing: 0;
		padding-top: 16px;
	}
}

/* interview -------------------*/

#interview{
	position: relative;
	width: 100%;
	height: auto;
}
.interview-list{
	position: relative;
	width: calc(100% - 20%);
	height: auto;
	margin: 0 auto;
	padding-bottom: 120px;
}
.interview-list ul{
	display: -webkit-flexbox;
	display: -webkit-flex;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -moz-flexbox;
	display: -moz-flex;
	display: -moz-box;
	-js-display: flex;
	display: flex;
	justify-content: space-between;
	-webkit-justify-content: space-between;
}
.interview-list li{
	position: relative;
	width: 22%;
	height: auto;
}
.interview-list li img{
	position: relative;
	z-index: 0;
}
.interview-list .staff_1{
	background: url(../img/top/interview_1_bg.gif) right bottom no-repeat;
}
.interview-list .staff_2{
	background: url(../img/top/interview_2_bg.gif) right top no-repeat;
}
.interview-list .staff_3{
	background: url(../img/top/interview_3_bg.gif) right bottom no-repeat;
}
.interview-list .staff_4{
	background: url(../img/top/interview_4_bg.gif) right top no-repeat;
}
.interview-list .staff_1,
.interview-list .staff_2,
.interview-list .staff_3,
.interview-list .staff_4{
	background-size: 80% auto;
}
.interview-list .staff_2,
.interview-list .staff_4{
	padding-top: 10px;
	margin-top: 100px;
}
.interview-list .staff_1 img,
.interview-list .staff_3 img{
	width: 100%;
	height: auto;
}
.interview-list .staff_2 img,
.interview-list .staff_4 img{
	width: 64%;
	height: auto;
	position: absolute;
	left: 0;
}
.interview-list li p{
	position: absolute;
	z-index: 1;
	font-size: 21px;
	letter-spacing: 0.15em;
	font-weight: bold;
	text-align: left;
}
.interview-list li p span{
	display: block;
	font-size: 14px;
	padding-bottom: 10px;
}
.interview-list .staff_1 p{
	top: 40%;
	right: 5%;
}
.interview-list .staff_2 p{
	top: 80%;
	right: 0;
}
.interview-list .staff_3 p{
	top: 40%;
	right: 10%;
}
.interview-list .staff_4 p{
	top: 75%;
	right: 5%;
}

@media screen and (max-width: 1800px){
	.interview-list{
		width: calc(100% - 14%);
	}
	.interview-list li{
		width: 23%;
	}
}
@media screen and (max-width: 1300px){
	.interview-list{
		width: calc(100% - 6%);
	}
	.interview-list li{
		width: 24%;
	}
	.interview-list .staff_1,
	.interview-list .staff_2,
	.interview-list .staff_3,
	.interview-list .staff_4{
		background-size: 80% auto;
	}
	.interview-list .staff_1 p,
	.interview-list .staff_2 p,
	.interview-list .staff_3 p,
	.interview-list .staff_4 p{
		right: 0;
	}
}
@media screen and (max-width: 1080px){
	.interview-list{
		width: calc(100% - 4%);
		padding-bottom: 150px;
	}
	.interview-list li{
		width: 25%;
	}
	.interview-list .staff_1,
	.interview-list .staff_2,
	.interview-list .staff_3,
	.interview-list .staff_4{
		background-size: 65% auto;
	}
	.interview-list .staff_2,
	.interview-list .staff_4{
		padding-top: 20px;
	}
	.interview-list li p{
		font-size: 17px;
		font-size: 1.7rem;
	}
	.interview-list .staff_2 p,
	.interview-list .staff_4 p{
		top: 100%;
	}
}
@media screen and (max-width: 650px){
	.interview-list{
		position: relative;
		overflow: hidden;
		width: 90%;
		padding-bottom: 0;
	}
	.interview-list ul{
		display: block;
		justify-content: inherit;
		width: 101%;
		margin: 0 auto;
	}
	.interview-list li{
		position: relative;
		overflow: hidden;
		float: left;
		width: 49%;
		height: 220px;
		margin: 0 1% 0 0;
	}
	.interview-list .staff_1{
		background: url(../img/top/interview_1_bg.gif) left 80% no-repeat;
	}
	.interview-list .staff_2{
		background: url(../img/top/interview_2_bg.gif) right 20% no-repeat;
	}
	.interview-list .staff_3{
		background: url(../img/top/interview_3_bg.gif) left 80% no-repeat;
	}
	.interview-list .staff_4{
		background: url(../img/top/interview_4_bg.gif) right 20% no-repeat;
	}
	.interview-list .staff_1,
	.interview-list .staff_2,
	.interview-list .staff_3,
	.interview-list .staff_4{
		background-size: 80% auto;
	}
	.interview-list .staff_1 img,
	.interview-list .staff_3 img{
		width: auto;
		height: 100%;
		position: absolute;
		left: 10px;
		top: 0;
	}
	.interview-list .staff_2 img,
	.interview-list .staff_4 img{
		width: auto;
		height: 96%;
		position: absolute;
		left: 10px;
		top: 10px;
	}
	.interview-list .staff_2,
	.interview-list .staff_4{
		padding-top: 0;
		margin-top: 0;
	}
	.interview-list li p{
		font-size: 17px;
	}
	.interview-list li p span{
		font-size: 13px;
	}
	.interview-list .staff_1 p,
	.interview-list .staff_2 p,
	.interview-list .staff_3 p,
	.interview-list .staff_4 p{
		top: 65%;
		right: 6%;
	}
}
@media screen and (max-width: 550px){
	.interview-list li{
		height: 200px;
	}
}

/* job -------------------*/

#job{
	position: relative;
	overflow: hidden;
	width: calc(100% - 20px);
	height: auto;
	padding: 6% 0;
	margin: 0 auto;
}
#job .thumbnail{
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: auto;
}
#job .thumbnail img{
	width: 100%;
	height: auto;
}
#job .inner{
	position: relative;
	z-index: 1;
	width: calc(100% - 140px);
	height: auto;
	padding: 10% 0;
	margin: 0 auto;
	text-align: center;
	color: #fff;
	background-color: rgba(110, 200, 90, 0.8)
}
#job .inner .title{
	padding-bottom: 40px;
}
#job .inner p{
	color: #fff;
	font-size: 14px;
	font-size: 1.4rem;
}
#job .inner .text{
	width: 80%;
	margin: 0 auto;
	line-height: 2;
}
#job .inner .more a{
	display: block;
	width: 370px;
	height: 60px;
	line-height: 62px;
	border-radius: 30px;
	margin: 30px auto 0;
	color: #fff;
	font-size: 15px;
	font-weight: 1.5rem;
	background-color: #3a3a3a;
	letter-spacing: 0.15em;
}
#job .inner .more a:hover{
	background-color: #2a2a2a;
}

@media screen and (max-width: 1080px){
	#job{
		padding: 8% 0;
	}
	#job .inner{
		width: calc(100% - 10%);
		padding: 8% 0;
	}
	#job .inner .text{
		font-size: 13px;
		font-size: 1.3rem;
	}
	#job .inner .text br{
		display: none;
	}
	#job .inner .more a{
		font-size: 14px;
		font-weight: 1.4rem;
	}
}
@media screen and (max-width: 650px){
	#job{
		padding: 6% 0;
	}
	#job .inner{
		padding: 8% 0;
	}
	#job .inner .title{
		padding-bottom: 20px;
	}
	#job .inner .text{
		line-height: 1.8;
	}
	#job .inner .text,
	#job .inner .more a{
		font-size: 11px;
		font-size: 1.1rem;
	}
	#job .inner .more a{
		width: 64%;
		height: 44px;
		line-height: 44px;
		border-radius: 22px;
		margin-top: 20px;
	}
}

/* Instagam -------------------*/

#ig{
	position: relative;
	overflow: hidden;
	width: 90%;
	height: auto;
	max-width: 860px;
	margin: 0 auto;
	border-radius: 10px;
}