@charset "UTF-8";




/* flex */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
.flex {
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.flex-start {
	display: flex;
	display: -webkit-flex;
	justify-content: space-between;
}
.flex-end {
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: reverse;
	 -ms-flex-direction: row-reverse;
		 flex-direction: row-reverse;
}
.flex-center {
	display: flex;
	justify-content: center;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}





/* movie */
.movie .inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 50px;
	position: relative;
}
@media screen and (max-width:1200px) {
	.movie .inner {
		padding: 0 5%;
	}
}





/* kv */
#kv {
	width: 100%;
	padding: 0;
	background: url("../images/movie/dot.png") repeat;
	position: relative;
}
	#kv #video-area {
		position: fixed;
		z-index: -1;
		top: 0;
		right:0;
		left:0;
		bottom:0;
		overflow: hidden;
	}
		#kv #video-area #video {
			position: absolute;
			z-index: -1;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 177.77777778vh;
			height: 56.25vw; 
			min-height: 100%;
			min-width: 100%;
		}

	#kv .inner {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		height: -webkit-calc(100vh - 120px);
		height: calc(100vh - 120px);
	}
		#kv .inner .text {
			color: #fff;
		}
			#kv .inner .text .en {
				font-size: 6.0rem;
				font-weight: 700;
				line-height: 1;
				margin-bottom: 10px;
			}
			#kv .inner .text h1 {
				font-size: 2.0rem;
				font-weight: 700;
				line-height: 1;
			}
@media screen and (max-width:1200px) {
}
@media screen and (max-width:900px) {
	#kv #video-area {
		position: absolute;
		width: 100%;
		height: 100%;
		aspect-ratio: 16 / 9;
	}
		#kv #video-area #video {
			top: 0;
			left: 0;
			transform: translate(0, 0);
			width: 100%;
			height: 100%;
			aspect-ratio: 16 / 9;
		}

	#kv .inner {
		width: 100%;
		height: 100%;
		aspect-ratio: 16 / 9;
	}
		#kv .inner .text {
			color: #fff;
		}
			#kv .inner .text .en {
				font-size: 8.0vw;
				margin-bottom: 3vw;
			}
			#kv .inner .text h1 {
				font-size: 4.0vw;
			}
}



/* movie-list */
#movie-list {
	background: #fff;
	padding-top: 100px;
	padding-bottom: 100px;
}
	#movie-list .set {
		margin-bottom: 50px;
	}
	#movie-list .set:nth-last-child(1) {
		margin-bottom: 0;
	}
		#movie-list .set h2 {
			font-size: 30px;
			font-weight: 700;
			color: #0056b9;
			line-height: 1.3em;
			border-bottom: solid 1px #ddd;
			padding-bottom: 10px;
			margin-bottom: 40px;
		}

		#movie-list .set .list a.linkbox {
			width: 31%;
			margin-right: 3.5%;
			margin-bottom: 3.5%;
		}
		#movie-list .set .list a.linkbox:nth-child(3n) {
			margin-right: 0;
		}
		#movie-list .set .list a.linkbox:hover {
			opacity: 0.7;
		}
		#movie-list #digest .list a.linkbox {
			width: 100%;
			margin-right: 0;
		}
			#movie-list .set .list a.linkbox .pht {
				position: relative;
			}
			#movie-list .set .list a.linkbox .pht:before {
				content: "";
				width: 100%;
				height: 100%;
				background: url("../images/movie/btn.svg") no-repeat center / 50px;
				position: absolute;
				top: 0;
				left: 0;
				transition: 0.3s;
				-webkit-transition: 0.3s;
			}
			#movie-list .set .list a.linkbox:hover .pht:before {
				background: url("../images/movie/btn.svg") no-repeat center / 60px;
			}

			#movie-list .set .list a.linkbox h3 {
				font-size: 18px;
				font-weight: 700;
				line-height: 1.3em;
				margin-top: 10px;
			}
@media screen and (max-width:1200px) {
}
@media screen and (max-width:900px) {
	#movie-list {
		padding-top: 15vw;
		padding-bottom: 15vw;
	}
		#movie-list .set {
			margin-bottom: 5vw;
		}
			#movie-list .set h2 {
				font-size: 6.0vw;
				padding-bottom: 10px;
				margin-bottom: 6vw;
			}

			#movie-list .set .list a.linkbox {
				width: 48%;
				margin-right: 4%;
				margin-bottom: 8vw;
			}
			#movie-list .set .list a.linkbox:nth-child(3n) {
				margin-right: 4%;
			}
			#movie-list .set .list a.linkbox:nth-child(2n) {
				margin-right: 0;
			}
			#movie-list #digest .list a.linkbox {
				width: 100%;
				margin-right: 0;
			}
				#movie-list .set .list a.linkbox .pht:before {
					content: "";
					width: 100%;
					height: 100%;
					background: url("../images/movie/btn.svg") no-repeat center / 10vw;
					position: absolute;
					top: 0;
					left: 0;
					transition: 0.3s;
					-webkit-transition: 0.3s;
				}
				#movie-list .set .list a.linkbox:hover .pht:before {
					background: url("../images/movie/btn.svg") no-repeat center / 10vw;
				}
	
				#movie-list .set .list a.linkbox h3 {
					font-size: 4.0vw;
					margin-top: 3vw;
				}
}