@charset "utf-8";
/* CSS Document */
.fv{
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}
.fv::after{
	content: "";
	position: absolute;
	width: 10px;
	height: 100vh;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	background-color: #fff;
}
.fv a:hover{
	opacity: 1;
}
.fv .leftbox{
	position: absolute;
	left: -25vw;
	top: 0;
	width: 75vw;
	height: 100%;
	transform: skewX(30deg) translateX(0);
	overflow: hidden;
	z-index: 2;
	border-right: 5px solid #fff;;
}
.fv .rightbox{
	position: absolute;
	right: 0;
	top: 0;
	width: 75vw;
	height: 100%;
	overflow: hidden;
	z-index: 1;
}
.fv .leftbox a{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: skewX(-30deg) translate(-50%,-50%);
	width: 100%;
	height: 100%;
}
.fv .rightbox a{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 100%;
	height: 100%;
}
.fv a .imgbox{
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	transform: translate(-50%,-50%);
	-ms-filter: blur(5px);
	filter: blur(5px);
	transition: ease 0.4s;
}
.fv a:hover .imgbox{
	-ms-filter: blur(0px);
	filter: blur(0px);
}
.fv .leftbox a::before,.fv .leftbox a::after{
	content: "";
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 100%;
	height: 100%;
	transition: ease 0.3s;
}
.fv .leftbox a::before{
	background-color: #3C3C3C;
	opacity: 0.6;
	mix-blend-mode: multiply;
	z-index: 2;
}
.fv .leftbox a::after{
	background-color: #7745A7;
	opacity: 0.4;
	mix-blend-mode: overlay;
	z-index: 3;
}
.fv .rightbox a::after{
	content: "";
	position: absolute;
	z-index: 2;
	background-color: #4A4A4A;
	opacity: 0.4;
	mix-blend-mode: multiply;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 100%;
	height: 100%;
}

.fv .leftbox a:hover::before,.fv .leftbox a:hover::after,.fv .rightbox a:hover::after{
	opacity: 0.3;
}
body:not(.on) .fv .leftbox a::before,body:not(.on) .fv .leftbox a::after,body:not(.on) .fv .rightbox a::after{
	display: none;
}

.fv a .txtbox{
	position: absolute;
	z-index: 9;
	top: 50%;
	right: 50%;
	transform: translate(50%,-50%);
}
.fv .rightbox a .txtbox{
	transform: translate(100%,-50%);
}
.fv a .txtbox h2{
	position: relative;
	padding-bottom: 60px;
	margin-bottom: 30px;
	line-height: 1;
}
.fv a .txtbox h2::after{
	content: "";
	width: 2px;
	height: 30px;
	background-color: #fff;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}

.copyright{
	position: fixed;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	color: #fff;
	z-index: 9;
}
/* ---------- 縦向き ---------- */
@media (orientation: portrait){
	.fv .leftbox{
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 50%;
		transform: translate(0);
		overflow: hidden;
		z-index: 2;
		border-right: none;
		border-bottom: 5px solid #fff;
	}
	.fv .rightbox{
		position: absolute;
		right: 0;
		top: auto;
		bottom: 0;
		width: 100%;
		height: 50%;
		overflow: hidden;
		z-index: 1;
	}
	.fv .leftbox a{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: skewX(0) translate(-50%,-50%);
		width: 100%;
		height: 100%;
	}
	.fv .rightbox a{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		width: 100%;
		height: 100%;
	}
	.fv .rightbox a .txtbox{
		transform: translate(50%,-50%);
	}
}
/* ---------- IEのみ ---------- */
@media all and (-ms-high-contrast: none) {
}
/* ---------- 1280px ~ ---------- */
@media screen and (max-width: 1280px){
}
/* ---------- 1080px ~ ---------- */
@media screen and (max-width: 1080px){
	.fv a .imgbox{
		position: absolute;
		z-index: 1;
		top: 50%;
		left: 50%;
		width: 100%;
		height: 100%;
		transform: translate(-50%,-50%);
		-ms-filter: blur(0px);
		filter: blur(0px);
		transition: ease 0.4s;
	}
}
/* ---------- 768px ~ ---------- */
@media screen and (max-width: 768px){
}
/* ---------- 576px ~ ---------- */
@media screen and (max-width: 576px){
	.fv h1{
		top: 15px;
	}
	.fv .leftbox{
		border-bottom-width: 3px;
	}
	.fv a .txtbox{
		width: 100%;
		text-align: center;
	}
	.fv a .txtbox h2{
		padding-bottom: 40px;
		margin-bottom: 20px;
	}
	.fv a .txtbox h2::after{
		width: 2px;
		height: 20px;
	}
}
/* ---------- 350px ~ ---------- */
@media screen and (max-width: 350px){
}