@charset "utf-8";
.inMain .content{
	padding-top: 80px;
}
.inMain .contentIn{
	padding-top: min(calc(80 / var(--vw-min) * 100vw), 80px);
}

@media screen and (max-width:768px){
	.inMain .content{
		padding-top: calc(96 / var(--vw-min) * 100vw);
	}
	.inMain .contentIn{
		padding-top: calc(48 / var(--vw-min) * 100vw);
	}
}
/*----------------
* MOVIE
-----------------*/
#movie .contentIn{
	width: 100%;
    max-width: calc(1200px * var(--max-percent));
    margin: 0 auto;
    position: relative;
}
.movieAreaContent{
	width: 86.6667%;
	min-width: min(1040px, 100%);
	padding: 0 min(3.8462vw, 40px);
	margin: 0 auto;
}
.movieAreaContentIn{
	position: relative;
	width: 100%;
	overflow: hidden;
	padding: min(calc(40 / var(--vw-min) * 100vw), calc(40px * var(--max-percent)));
	background-color: #fff;
}
.movieAreaContentIn:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	background: url(../img/common/textur_paper.png) repeat center;
	mix-blend-mode: multiply;
}

@media screen and (max-width:768px){
	.movieAreaContent{
		width: 100%;
		padding: 0 calc(48 / var(--vw-min) * 100vw);
	}
	.movieAreaContentIn{
		padding: calc(48 / var(--vw-min) * 100vw);
		padding-top: calc(16 / var(--vw-min) * 100vw);
	}
}
.movieCont{
	position: relative;
}
.inPage_contentArea.-nobgc .movieAreaContentIn{
	padding: unset;
	background-color: unset;
}
.inPage_contentArea.-nobgc .movieAreaContentIn:before{
	content: unset;
}


/*----------------
* movie - lists
-----------------*/
.movieLists{
	display: grid;
	width: 100%;
	margin: 0 auto;
	grid-template-columns: repeat(2, 1fr);
	column-gap: min(calc(72 / var(--vw-min) * 100vw), calc(72px * var(--max-percent)));
	row-gap: min(calc(40 / var(--vw-min) * 100vw), calc(40px * var(--max-percent)));
}
.movieList{
	width: 100%;
}
.movieList__link{
	display: block;
	width: 100%;
	text-decoration: none;
	font-size: min(calc(18 / var(--vw-min) * 100vw), 18px);
}
.movieList__link--thumb{
	display: block;
	width: 100%;
	padding-top: 52.5%;
	position: relative;
	border: 1px solid var(--color-brown);
	overflow: hidden;
}
.movieList__link--thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
}
.movieList__link--title{
	display: block;
	padding-top: 1em;
}

@media screen and (max-width:768px){
	.movieLists{
		grid-template-columns: repeat(1, 1fr);
        column-gap: calc(48 / var(--vw-min) * 100vw);
	}
	.movieList__link{
		font-size: calc(24 / var(--vw-min) * 100vw);
	}
}

@media screen and (hover:hover) and (pointer: fine){
	.movieList__link--thumb img{
		transition: transform .3s ease, filter .3s ease;
	}
	.movieList__link:hover .movieList__link--thumb img{
		transform: scale(105%);
		filter: brightness(115%);
	}

	.movieList__link--title > span{
		background-repeat: no-repeat;
		background-image: linear-gradient(rgba(235, 100, 0, 30%), rgba(235, 100, 0, 30%));
		background-position: right bottom;
		background-size: 0% 40%;
		transition: background-size .4s ease;
	}
	.movieList__link:hover .specialList__link--title > span{
		background-size: 100% 40%;
		background-position: left bottom;
	}
}


/*----------------
* movieList
-----------------*/
.movieList__inner{
	width: 100%;
	padding-top: 56.25%;
	position: relative;
	background-color: #fff;
}

.movieFrameWrap{
	position: absolute;
	top: 4px;
	right: 4px;
	bottom: 4px;
	left: 4px;
	margin: auto;
	z-index: 2;
	pointer-events: none;
}
.movie_bFrameWrap{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url(../img/common/frame/frame_movie_lt.svg), url(../img/common/frame/frame_movie_rt.svg), url(../img/common/frame/frame_movie_rb.svg), url(../img/common/frame/frame_movie_lb.svg);
	background-repeat: no-repeat;
	background-position: left top, right top, right bottom, left bottom;
	background-size: 16px 16px;
}
.movie_bFrame--line{
	position: absolute;
}
.movie_bFrame--line:before,
.movie_bFrame--line:after{
	content: '';
	position: absolute;
	background-color: var(--color-brown);
}
.movie_bFrame--line.-tb{
	top: 0;
	bottom: 0;
	left: 16px;
	right: 16px;
}
.movie_bFrame--line.-tb:before{
	top: 0;
	width: 100%;
	height: 2px;
}
.movie_bFrame--line.-tb:after{
	bottom: 0;
	width: 100%;
	height: 2px;
}

.movie_bFrame--line.-lr{
	right: 0;
	left: 0;
	top: 16px;
	bottom: 16px;
}
.movie_bFrame--line.-lr:before{
	left: 0;
	width: 2px;
	height: 100%;
}
.movie_bFrame--line.-lr:after{
	right: 0;
	width: 2px;
	height: 100%;
}


.movie_lFrameWrap{
	position: absolute;
	top: 4px;
	right: 4px;
	bottom: 4px;
	left: 4px;
	margin: auto;
}
.movie_lFrame--line{
	position: absolute;
}
.movie_lFrame--line:before,
.movie_lFrame--line:after{
	content: '';
	position: absolute;
	background-color: var(--color-brown);
}
.movie_lFrame--line.-t,
.movie_lFrame--line.-b{
	height: 1px;
}
.movie_lFrame--line.-t{
	top: 0;
	left: 0;
	right: 0;
}
.movie_lFrame--line.-t:before,
.movie_lFrame--line.-t:after{
	top: 0;
}

.movie_lFrame--line.-b{
	bottom: 0;
	left: 0;
	right: 0;
}
.movie_lFrame--line.-b:before,
.movie_lFrame--line.-b:after{
	bottom: 0;
}
.movie_lFrame--line.-t:before,
.movie_lFrame--line.-t:after,
.movie_lFrame--line.-b:before,
.movie_lFrame--line.-b:after{
	content: '';
	position: absolute;
	width: calc(50% - 11.5px);
	height: 100%;
}
.movie_lFrame--line.-t:before,
.movie_lFrame--line.-b:before{
	left: 0;
}
.movie_lFrame--line.-t:after,
.movie_lFrame--line.-b:after{
	right: 0;
}
.movie_lFrame--line.-lr{
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
}
.movie_lFrame--line.-lr:before{
	left: 0;
	top: 0;
	bottom: 0;
	width: 1px;
}
.movie_lFrame--line.-lr:after{
	right: 0;
	top: 0;
	bottom: 0;
	width: 1px;
}



.movie_tbFrame{
	position: absolute;
	top: -7px;
	bottom: -7px;
	width: 23px;
	left: 0;
	right: 0;
	margin: 0 auto;
}
.movie_tbFrame:before,
.movie_tbFrame:after{
	content: '';
	width: 100%;
	height: 13px;
	position: absolute;
	background-repeat: no-repeat;
	background-size: contain;
}
.movie_tbFrame:before{
	top: 0;
	background-image: url(../img/common/frame/frame_movie_ct.svg);
	background-position: center top;
}
.movie_tbFrame:after{
	bottom: 0;
	background-image: url(../img/common/frame/frame_movie_cb.svg);
	background-position: center bottom;
}

@media screen and (max-width:768px){
	.movieFrameWrap{
		top: calc(8 / var(--vw-min) * 100vw);
		right: calc(8 / var(--vw-min) * 100vw);
		bottom: calc(8 / var(--vw-min) * 100vw);
		left: calc(8 / var(--vw-min) * 100vw);
	}
	.movie_bFrameWrap{
		background-size: calc(32 / var(--vw-min) * 100vw) calc(32 / var(--vw-min) * 100vw);
	}
	.movie_bFrame--line.-tb{
		left: calc(32 / var(--vw-min) * 100vw);
		right: calc(32 / var(--vw-min) * 100vw);
	}
	.movie_bFrame--line.-tb:before{
		height: calc(4 / var(--vw-min) * 100vw);
	}
	.movie_bFrame--line.-tb:after{
		height: calc(4 / var(--vw-min) * 100vw);
	}
	.movie_bFrame--line.-lr{
		top: calc(32 / var(--vw-min) * 100vw);
		bottom: calc(32 / var(--vw-min) * 100vw);
	}
	.movie_bFrame--line.-lr:before{
		width: calc(4 / var(--vw-min) * 100vw);
	}
	.movie_bFrame--line.-lr:after{
		width: calc(4 / var(--vw-min) * 100vw);
	}
	.movie_lFrameWrap{
		top: calc(8 / var(--vw-min) * 100vw);
		right: calc(8 / var(--vw-min) * 100vw);
		bottom: calc(8 / var(--vw-min) * 100vw);
		left: calc(8 / var(--vw-min) * 100vw);
	}
	.movie_lFrame--line.-t,
	.movie_lFrame--line.-b{
		height: calc(2 / var(--vw-min) * 100vw);
	}
	.movie_lFrame--line.-t:before,
	.movie_lFrame--line.-t:after,
	.movie_lFrame--line.-b:before,
	.movie_lFrame--line.-b:after{
		width: calc(50% - 3.0667vw);
	}
	.movie_lFrame--line.-lr:before,
	.movie_lFrame--line.-lr:after{
		width: calc(2 / var(--vw-min) * 100vw);
	}

	.movie_tbFrame{
		top: calc(-14 / var(--vw-min) * 100vw);
		bottom: calc(-14 / var(--vw-min) * 100vw);
		width: calc(46 / var(--vw-min) * 100vw);
	}
	.movie_tbFrame:before,
	.movie_tbFrame:after{
		height: calc(26 / var(--vw-min) * 100vw);
	}
}


/*
* btn_moviePlay
*/
.btn_moviePlay{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 1;
}
.btn_moviePlay:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255,255,255,40%);
	transition: opacity .3s ease;
}
.icon_play{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: min(calc(82 / var(--vw-min) * 100vw), calc(82px * var(--max-percent)));
	height: min(calc(82 / var(--vw-min) * 100vw), calc(82px * var(--max-percent)));
	margin: auto;
}
.icon_play:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../img/common/icon_movieplay-txt.svg) no-repeat center / contain;
	animation: 14s rotate linear infinite;
}
.icon_play:after{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: min(calc(4 / var(--vw-min) * 100vw), calc(4px * var(--max-percent)));
	width: min(calc(40 / var(--vw-min) * 100vw), calc(40px * var(--max-percent)));
	height: min(calc(28 / var(--vw-min) * 100vw), calc(28px * var(--max-percent)));
	background: url(../img/common/icon_movieplay-arrow.svg) no-repeat center / contain;
	margin: auto;
	transition: transform .3s ease;
}
body.--yt-apmov-stop .icon_play:before{
	animation-play-state: paused;
}

@media screen and (hover:hover) and (pointer: fine){
	.btn_moviePlay:hover::before{
		opacity: 60%;
	}
	.btn_moviePlay:hover .icon_play:before{
		animation-play-state: paused;
	}
	.btn_moviePlay:hover .icon_play:after{
		transform: scale(80%);
	}
}

@media screen and (max-width:768px){
	.icon_play{
		width: calc(123 / var(--vw-min) * 100vw);
		height: calc(123 / var(--vw-min) * 100vw);
	}
	.icon_play:after{
		left: calc(6 / var(--vw-min) * 100vw);
		width: calc(60 / var(--vw-min) * 100vw);
		height: calc(42 / var(--vw-min) * 100vw);
	}
}


/*
* moviebg
*/
.moviebg{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.moviebg__img{
	position: absolute;
	width: 100%;
	height: 100%;
}
.moviebg__img img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}