/*****************************

filmp__mv

******************************/

.filmp__mv{
	background: url(../img/filmportrait/mv.jpg) no-repeat 50% 50% / cover;
	height: 376px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 80px;
}

.filmp__mv__ttl{
	text-align: center;
	color: #fff;
	font-size: 65px;
	font-style: italic;
	font-weight: 200;
	letter-spacing: .08em;
}

@media screen and (max-width: 1023px) {
	.filmp__mv{
		margin-top: 72px;
	}

}

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

	.filmp__mv{
		background: url(../img/filmportrait/mv-sp.jpg) no-repeat 50% 50% / cover;
		height: 182px;
		margin-top: 54px;
	}

	.filmp__mv__ttl{
		font-size: 28px;
	}

}


/*****************************

filmp__story

******************************/

.filmp__story{
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
}

.filmp__story img{
	position: absolute;
	z-index: 7;
}

.filmp__story img:nth-child(1){
	left: 0;
	top: -75px;
	width: 28.5%;
	opacity: 0;
	animation: imgFadein .4s .8s linear forwards;
}

.filmp__story img:nth-child(2){
	right: 8%;
	top: 48px;
	width: 22.5%;
	opacity: 0;
	animation: imgFadein .4s 1s linear forwards;
}

.filmp__story img:nth-child(3){
	right:0;
	top: 446px;
	width: 25%;
	opacity: 0;
	animation: imgFadein .4s 1.2s linear forwards;
}

.filmp__story img:nth-child(4){
	left: 0;
	top: 562px;
	width: 25.5%;
	opacity: 0;
	animation: imgFadein .4s 1.4s linear forwards;
}

@keyframes imgFadein {
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}

.filmp__story__txt{
	max-width: 715px;
	width: 90%;
	margin: 152px auto 263px;
	text-align: center;
	padding: 90px 0;
	color: #1E1E1E;
	position: relative;
}

.filmp__story__txt span.bd{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}

.filmp__story__txt span.bd01::before,
.filmp__story__txt span.bd01::after,
.filmp__story__txt span.bd02::before,
.filmp__story__txt span.bd02::after{
	content: "";
	position: absolute;
	background-color: #707070;
}

.filmp__story__txt span.bd01::before{
	width: 0%;
	height: 1px;
	top: 0;
	left: 0;
	animation: widthBd .2s .8s forwards;
}

.filmp__story__txt span.bd01::after{
	width: 1px;
	height: 0%;
	right: 0;
	top: 0;
	animation: heightBd .2s 1s forwards;
}

.filmp__story__txt span.bd02::before{
	width: 0%;
	height: 1px;
	bottom: 0;
	right: 0;
	animation: widthBd .2s 1.2s forwards;
}

.filmp__story__txt span.bd02::after{
	width: 1px;
	height: 0%;
	left: 0;
	bottom: 0;
	animation: heightBd .2s 1.4s forwards;
}

@keyframes widthBd {
	0%{
		width: 0%;
	}
	100%{
		width: 100%;
	}
}

@keyframes heightBd {
	0%{
		height: 0%;
	}
	100%{
		height: 100%;
	}
}

.filmp__story__txt::before,
.filmp__story__txt::after{
	content: "";
	width: 1px;
	height: 0;
	background-color: #707070;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
}

.filmp__story__txt::before{
	top: -152px;
	animation: heightBdTop .5s .5s forwards;
}

.filmp__story__txt::after{
	bottom: -152px;
	animation: heightBdBottpm 1.5s .5s infinite;
}

@keyframes heightBdTop {
	0%{
		height: 0px;
	}
	100%{
		height: 183px;
	}
}

@keyframes heightBdBottpm {
	0%{
		height: 0px;
		bottom: 31px;
	}
	70%{
		height: 183px;
		bottom: -152px;
	}

	100%{
		height: 0px;
		bottom: -152px;
	}
}

.filmp__story__txt h2{
	text-align: center;
	font-size: 50px;
	font-weight: 200;
	font-style: italic;
	margin-bottom: 37px;
	letter-spacing: .08em;
	transform: translateY(-10px);
	opacity: 0;
	animation: TxtFadein .8s 1.8s forwards;
}

.filmp__story__txt p{
	font-size: 16px;
	line-height: 2.12;
	font-weight: 600;
	transform: translateY(-10px);
	opacity: 0;
	animation: TxtFadein .8s 2.2s forwards;
}

@keyframes TxtFadein {
	0%{
		opacity: 0;
		transform: translateY(-10px);
	}
	100%{
		opacity: 1;
		transform: translateY(0px);
	}
}


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

	.filmp__story img:nth-child(2){
		right: 0%;
	}

	.filmp__story img:nth-child(3){
		right:0;
		top: auto;
		bottom: -75px;
	}

	.filmp__story img:nth-child(4){
		left: -40px;
		top: auto;
		bottom: -20px;
	}

}

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

	.filmp__story img{
		display: none;
	}

	.filmp__story .sp img{
		display: block;
		position: static;
		width: 60%;
		margin: 0 auto 20px;
	}


	.filmp__story__txt{
		max-width: 715px;
		width: auto;
		margin: 63px 0px 126px;
		padding: 48px 0;
	}

	.filmp__story__txt::before,
	.filmp__story__txt::after{
		height: 0;
	}

	.filmp__story__txt::before{
		top: -63px;
	}

	.filmp__story__txt::after{
		bottom: -63px;
	}

	.filmp__story__txt h2{
		font-size: 25px;
		margin-bottom: 14px;
	}

	.filmp__story__txt p{
		font-size: 12px;
		line-height: 1.75;
		margin: 0 auto;
	}


		.filmp__story__txt span.bd01::after,
		.filmp__story__txt span.bd02::after{
			display: none;
		}

		.filmp__story__txt span.bd01::before{
			width: 0%;
			height: 1px;
			top: 0;
			left: 0;
			right: 0;
			margin: auto;
			animation: widthBd .3s .8s forwards;
		}

		.filmp__story__txt span.bd02::before{
			width: 0%;
			height: 1px;
			bottom: 0;
			right: 0;
			left: 0;
			margin: auto;
			animation: widthBd .2s 1.6s forwards;
		}

		.filmp__story__txt h2{
			animation: TxtFadein .8s 1s forwards;
		}

		.filmp__story__txt p.sp{
			animation: TxtFadein .8s 1.2s forwards;
		}

		.filmp__story__txt p{
			animation: TxtFadein .8s 1.4s forwards;
		}

       @keyframes heightBdTop {
			0%{
				height: 0px;
			}
			100%{
				height: 84px;
			}
		}

		@keyframes heightBdBottpm {
			0%{
				height: 0px;
				bottom: 21px;
			}
			70%{
				height: 84px;
				bottom: -63px;
			}

			100%{
				height: 0px;
				bottom: -63px;
			}
		}

		@keyframes widthBd {
			0%{
				width: 0%;
			}
			100%{
				width: 73%;
			}
		}

		@keyframes heightBd {
			0%{
				height: 0%;
			}
			100%{
				height: 73%;
			}
		}

}



@media only screen and (max-device-width : 767px){
	    @keyframes heightBdTop {
			0%{
				height: 0px;
			}
			100%{
				height: 84px;
			}
		}

		@keyframes heightBdBottpm {
			0%{
				height: 0px;
				bottom: 21px;
			}
			70%{
				height: 84px;
				bottom: -63px;
			}

			100%{
				height: 0px;
				bottom: -63px;
			}
		}

		@keyframes widthBd {
			0%{
				width: 0%;
			}
			100%{
				width: 73%;
			}
		}

		@keyframes heightBd {
			0%{
				height: 0%;
			}
			100%{
				height: 73%;
			}
		}
}

/*****************************

filmp__images

******************************/
.filmp__images__box{
	width: 90%;
	margin: 0 auto 176px;
}

.filmp__images__box.medium{
	max-width: 708px;
}

.filmp__images__box.wide{
	max-width: 940px;
}

.filmp__images__box.small{
	max-width: 530px;
}

.filmp__images__box img{
	margin-bottom: 20px;
}

.filmp__images__box ul{
	display: flex;
	justify-content: space-between;
}

.filmp__images__box ul li{
	margin-right: 10px;
}

.filmp__images__box ul li:last-child{
	margin-right: 0;
}

.filmp__images__box p{
	font-size: 16px;
	line-height: 1.56;
	font-weight: 600;
	color: #1E1E1E;
}

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

	.filmp__images__box{
		width: 73.3%;
		margin: 0 auto 112px;
	}

	.filmp__images__box img{
		margin-bottom: 15px;
	}

	.filmp__images__box ul{
		display: block;
		max-width: 80%;
		margin: 0 auto;
	}

	.filmp__images__box ul li{
		margin-right: 0px;
	}

	.filmp__images__box p{
		font-size: 12px;
		line-height: 1.5;
	}


	.filmp__images__box.medium img{
		max-width: 100%;
		display: block;
		margin: 0  auto 10px;
	}

	.filmp__images__box.small img{
		max-width: 80%;
		display: block;
		margin: 0 auto 10px
	}

}


/*****************************

filmp__link

******************************/
.filmp__link a{
	font-size: 16px;
	font-weight: 600;
	display: block;
	width: 289px;
	padding: 5px 0;
	margin: 0 auto;
	border: 1px solid #707070;
	position: relative;
	text-align: center;
	margin-bottom: 131px;
	margin-top: -100px;
}

.filmp__link a span{
	position: relative;
	z-index: 1;
}

.filmp__link a::after{
	content: "";
	width: 0%;
	height: 100%;
	background-color: #00006E;
	position: absolute;
	left: 0;
	top: 0;
	transition: .3s;
}

.filmp__link a::before{
	content: "";
	width: 10px;
	height: 1px;
	background-color: #707070;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	transition: .3s;
	z-index: 2;
}

.filmp__link a.hover{
	color: #fff;
}

.filmp__link a.hover::after{
	width: 100%;
}

.filmp__link a.hover::before{
	background-color: #fff;
}




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

	.filmp__link a{
		font-size: 14px;
		padding: 5px 0 6px;
		margin-top: -50px;
		margin-bottom: 76px;
	}

	.filmp__link a::before{
		width: 16px;
	}


	.filmp__link a.hover{
		color: #010022;
	}

	.filmp__link a.hover::after{
		display: none;
	}

	.filmp__link a.hover::before{
		background-color: #707070;
	}

}