@keyframes btnSd{
	0%{transform: translateY(-100%);}
	100%{transform: translateY(100%);}

}

/* kv
------------------------------------*/

#kv{
	position: relative;
	z-index: 300;
	background: #fff;
}

#kv-slide{
	transition: opacity 500ms ease;
	opacity: 0;		
}
.loaded #kv-slide{
	opacity: 1;
}
#kv figure{
	position: absolute;
	width: 100%;
	height: 100%;
	transition: opacity 1000ms ease;
	opacity: 1;
}
#kv figure span{
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: 50% 50%;
}
#kv figure.hide{
	opacity: 0;
}

.kv-btn,.btn-rec-sd{
	opacity: 0;
}
.loaded #kv .kv-btn,
.loaded #kv .btn-rec-sd{
	opacity: 1;
	transition: opacity 300ms ease;
}

.header-inner{
	opacity: 0;
}
.loaded .header-inner{
	opacity: 1;
	transition: opacity 300ms ease;
}


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


/* kv
------------------------------------*/

	#kv figure span.kv-sp{
		display: none;
	}
	.kv-logo{
		position: absolute;
		left: 140px;
		top: 50%;
		transform: translateY(-50%);
		z-index: 200;
	}
	.kv-logo img{
		position: relative;
		transform-origin: left center;
	}
	.kv-btn{
		position: absolute;
		right: 40px;
		bottom: 10px;
		z-index: 200;
	}
	.kv-btn div + div{
		margin-top: 25px;

	}

	.btn-entry{
		position: absolute;
		top: -150px;
		right: 40px;
		z-index: 120;
		transition: transform 300ms ease;
	}
	.btn-entry div + div{
		margin-top: 25px;
	}
	.btn-entry.fixed{
		position: fixed;
		top: 20px;
	}
	.btn-entry.fixed.on{
		transform: translateY(92px);
	}



/* sd
------------------------------------*/

	.btn-rec-sd{
		position: absolute;
		margin: auto;
		left: 0;
		right: 0;
		bottom: 0;
		width: 107px;
		height: 173px;
		z-index: 200;
		transform: translateY(70px);
	}
	.btn-rec-sd a{
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
	}
	.btn-rec-sd a:hover{
		opacity: 0.7;
		transition: opacity 300ms ease;
	}
	.btn-rec-sd a span{
		position: absolute;
		margin: auto;
		bottom: 0;
		left: 0;
		right: 0;
		width: 1px;
		height: calc(100% - 68px);
		overflow: hidden;
	}
	.btn-rec-sd a span i{
		position: absolute;
		margin: auto;
		bottom: 0;
		left: 0;
		right: 0;
		width: 1px;
		height: 100%;
		background: #fff;
		animation: btnSd 1000ms linear infinite;
	}


/* concept
------------------------------------*/

	#concept{
		position: relative;
		z-index: 100;
	}

	.concept-inner{
		margin: auto;
		padding: 100px 90px;
		width: 100%;
		max-width: 1180px;
		box-sizing: border-box;
	}
	.concept-inner p{
		font-size: 18px;
		line-height: 2.2;
		overflow: hidden;
/*		width: 0;
*/	}
	.concept-inner p.on{
		transition: width 1000ms ease;
		width: 100%;
	}

	.concept-inner .txt + .txt{
		margin-top: 40px;
	}
	.concept-inner p span{
		display: block;
		width: 100vw;
	}
	.concept-inner p i{
		padding: 5px;
		background: #fff;
	}
	.concept-inner p strong{
		font-weight: 700;
		color: #65adad;
	}



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

	#interview .btn-index-link{
		margin-top: 30px;
	}

	#interview .office-tour-fig{
		display: flex;
	}
	#interview .office-tour-fig figure{
		/* width: 50%; */
		width: 100%;
	}
	#interview .office-tour-fig figure img{
		width: 100%;
		height: auto;
	}
	#interview .office-tour-fig + .btn-index-link{
		margin-top: 40px;
	}



}







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

/* kv
------------------------------------*/

	#kv figure span.kv-pc{
		display: none;
	}
	.kv-logo{
		position: absolute;
		left: 25px;
		top: 50%;
		transform: translateY(-50%);
		z-index: 200;
	}
	.kv-logo img{
		position: relative;
		width: 477px;
		height: 649px;
		transform-origin: left center;
	}
	.kv-btn{
		position: absolute;
		right: 18px;
		bottom: 10px;
		z-index: 200;
	}

	.kv-btn div + div{
		margin-top: 18px;

	}

	.btn-entry{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 10px 5px 5px 10px;
		background: #fff;
		box-sizing: border-box;
		z-index: 500;
		transition: transform 300ms ease;
		transform: translateY(100%);
	}
	.btn-entry div + div{
		margin-top: 18px;

	}
	.btn-entry.fixed{
		transform: translateY(0);
	}


/* sd
------------------------------------*/

	.btn-rec-sd{
		position: absolute;
		margin: auto;
		left: 25px;
		bottom: 0;
		width: 80px;
		height: 110px;
		z-index: 200;
		transform: translateY(40px);
	}
	.btn-rec-sd a{
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
	}
	.btn-rec-sd a span{
		position: absolute;
		margin: auto;
		bottom: 0;
		left: 0;
		right: 0;
		width: 1px;
		height: calc(100% - 52px);
		overflow: hidden;
	}
	.btn-rec-sd a span i{
		position: absolute;
		margin: auto;
		bottom: 0;
		left: 0;
		right: 0;
		width: 1px;
		height: 100%;
		background: #fff;
		animation: btnSd 1000ms linear infinite;
	}


/* concept
------------------------------------*/

	#concept{
		position: relative;
		z-index: 100;
	}

	.concept-inner{
		margin: auto;
		padding: 50px 25px;
		width: 100%;
		max-width: 1180px;
		box-sizing: border-box;
	}
	.concept-inner p{
		font-size: 13px;
		overflow: hidden;
/*		width: 0;
*/	}
	.concept-inner p + p{
		margin-top: 4px;
	}
	.concept-inner p.on{
		transition: width 1000ms ease;
		width: 100%;
	}
	.lead .txt:nth-child(1) p{
		width: 100%;
	}

	.concept-inner .txt + .txt{
		margin-top: 30px;
	}
	.concept-inner p span{
		display: block;
		width: 100vw;
	}
	.concept-inner p i{
		padding: 5px;
		background: #fff;
	}
	.concept-inner p strong{
		font-weight: 700;
		color: #65adad;
	}



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

	#interview .btn-index-link{
		margin-top: 40px;
	}

	#interview .office-tour-fig figure img{
		width: 100%;
		height: auto;
	}

	#interview .office-tour-fig + .btn-index-link{
		margin-top: 25px;
	}

}


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

	.concept-inner p i{
		font-size: 12px;
	}



}