/*
----------------------------------------

home

----------------------------------------
*/

@keyframes scroll-line {

	0% {
		top: 0;
		bottom: 100%;
	}
	30% {
		top: 0;
		bottom: 0;
	}
	70% {
		top: 0;
		bottom: 0;
	}
	100% {
		top: 100%;
		bottom: 0;
	}

}

.scroll-line {
	width: 1px;
	height: 80px;
	background: #eee;
	position: absolute;
	bottom: 0;
	left: 50%;
}

.scroll-line::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 100%;
	left: 0;
	background: #000;
	animation: scroll-line 1.6s ease-in-out 1.2s infinite backwards;
}

/* fv-slider */

.fv-slider {
	background: #F5F5F5;
}

.fv-slider .slider {
	opacity: 0;
	visibility: hidden;
}

.fv-slider .slider.slick-slider {
	opacity: 1;
	visibility: visible;
}

.fv-slider .img a {
	display: block;
}

.fv-slider .img {
	padding: 3rem;
}

/* fv-img-01 */

.fv-img-01 {
	padding: 0 0 120px 200px;
	position: relative;
}

/* fv-img-01 */

.fv-img-01 .txt {
	position: absolute;
	top: calc( 50% - 55px );
	left: 80px;
	transform: translateY( -50% );
	text-align: left;
	z-index: 99;
}

.fv-img-01 .txt .en {
	font-size: 12rem;
	font-weight: 300;
	line-height: 1.2;
}

.fv-img-01 .txt .en br:last-of-type {
	display: none;
}

.fv-img-01 .txt .en span {
	display: inline-block;
	line-height: 1.0834;
	padding: 0 20px;
	margin: 10px 0;
}

.fv-img-01 .txt .jp {
	font-size: 2.4rem;
	margin-top: 10px;
}

.fv-img-01 .txt .jp span {
	display: inline-block;
	padding: 6px 20px;
	margin: 10px 0;
	letter-spacing: 2px;
}

.fv-img-01 .img img {
	width: 100%;
	height: calc( 100vh - 200px );
}

.fv-img-01.type-02 .txt .en span {
	background: var( --base-color );
	color: #fff;
}

.fv-img-01.type-02 .txt .jp span {
	background: #fff;
}

/* fv-mov */

.fv-mov {
	position: relative;
	color: #fff;
}

.fv-mov::after {
	content: '';
	background: var( --base-color );
	opacity: .8;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
}

.fv-mov .wrap {
	position: relative;
	z-index: 99;
}

#ytPlayerWrap {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
}

.fv-mov .txt-wrap {
	width: 100%;
	height: calc( 100vh - 80px );
	justify-content: center;
	align-items: center;
	text-align: center;
}

.fv-mov .txt-wrap .logo {
	padding: .4rem 0 2.8rem;

}

.fv-mov .txt-wrap .read {
	font-size: 1.8rem;
	letter-spacing: 2px;
}

.fv-mov .scroll-txt {
	position: absolute;
	right: 0;
	bottom: 90px;
	left: 0;
	font-size: 2.4rem;
	text-transform: uppercase;
	text-align: center;
}

.fv-cover-img {
	width: 100vw;
	height: calc( 100vh - 8rem );
	position: relative;
}

.fv-cover-img .fv-bg {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}

.fv-cover-img .cont-wrap {
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
}

.fv-cover-img .wrap {
	text-align: center;
}

.fv-cover-img .img {
	margin-bottom: 3rem;
}

.fv-cover-img .read {
	font-size: 1.8rem;
}

#wrapper .fv-box .slick-prev,
#wrapper .fv-box .slick-next {
	border-radius: 50%;
}

#wrapper .fv-box .slick-prev {
	left: calc( 13.75vw - 60px );
}

#wrapper .fv-box .slick-next {
	right: calc( 13.75vw - 60px );
}

#wrapper .fv-box .slick-dotted.slick-slider {
	margin-bottom: 12rem;
}


/*
----------------------------------------

1400

----------------------------------------
*/

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

	.fv-slider .img {
		padding: 3rem 2.5rem;
	}

	#wrapper .fv-box .slick-prev,
	#wrapper .fv-box .slick-next {
		width: 50px;
		height: 50px;
	}

	#wrapper .fv-box .slick-prev {
		left: 30px;
	}

	#wrapper .fv-box .slick-next {
		right: 30px;
	}

}


/*
----------------------------------------

1200

----------------------------------------
*/

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

	.fv-img-01 .txt {
		left: 4vw;
	}

	.fv-img-01 .txt .en {
		font-size: 10rem;
	}

	.fv-img-01 .txt .jp {
		font-size: 2.2rem;
	}

	.fv-mov .txt-wrap .logo {
		padding: 0 0 2rem;
	}

	.fv-mov .txt-wrap .read {
		font-size: 1.6rem;
	}

	.fv-cover-img .read {
		font-size: 1.6rem;
	}

}


/*
----------------------------------------

1000

----------------------------------------
*/

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

	.fv-img-01 {
		padding: 0 0 80px 20vw;
	}

	.fv-img-01 .img img {
		height: 50vw;
	}

	.fv-img-01 .txt .en {
		font-size: 9vw;
	}

	.fv-img-01 .txt .jp {
		font-size: 2vw;
	}

	.fv-mov .txt-wrap {
		height: 60vw;
		padding-bottom: 70px;
	}

	.fv-mov .scroll-txt {
		font-size: 2vw;
		bottom: 60px;
	}

	.scroll-line {
		height: 50px;
	}

	.fv-cover-img {
		height: 60vw;
	}

	.fv-cover-img .img {
		margin-bottom: 2rem;
	}

}

/*
----------------------------------------

768

----------------------------------------
*/

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

	#wrapper .fv-box .slick-dotted.slick-slider {
		margin-bottom: 8rem;
	}

	.fv-slider .img {
		padding: 2rem .5rem;
	}

	.fv-img-01 .txt {
		top: 25vw;
	}

	.fv-img-01 .txt .en span {
		padding: 0 10px;
		margin: 8px 0;
	}

	.fv-img-01 .txt .jp {
		margin-top: 0;
	}

	.fv-img-01 .txt .jp span {
		font-size: 1.2rem;
		background: #fff;
	}

	.fv-img-01 .txt .jp span {
		margin: 8px 0;
		padding: 4px 10px;
	}

	.fv-mov .txt-wrap {
		height: calc( 100vh - 60px );
		padding: 0;
	}

	.fv-mov .txt-wrap .logo img {
		max-width: 60vw;
	}

	.fv-mov .txt-wrap .read {
		font-size: 1.5rem;
	}

	.fv-mov .scroll-txt {
		font-size: 1.6rem;
	}

	.fv-cover-img {
		height: calc( 100vh - 6rem );
	}

	.fv-cover-img .img img {
		max-width: 60vw;
	}

	.fv-cover-img .read {
		font-size: 1.5rem;
	}

}


/*
----------------------------------------

hove

----------------------------------------
*/

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

	.fv-slider .img a:hover {
		opacity: .85;
	}

}