@charset 'utf-8';

/* movie__top
------------------------------------------------ */
.movie__top { position: relative; padding: 70px 0 110px; }
.movie__top .title--3 { margin-bottom: 20px; color: #c49c62; }
.movie__top .title--3 .en,
.movie__top .title--3 .ja { display: block; }
.movie__top .title--3 .en { width: 142px; }
.movie__top .title--3 .ja { margin: 12px 0 0; }
.movie__top--lead { margin-bottom: 46px; font-size: 1.2rem; font-weight: bold; }
.movie__lists {}
.movie__lists--item {}
.movie__lists--date { margin-bottom: 8px; font-size: 1.4rem; color: #808080; }
.movie__lists--media { position: relative; padding: 20px; background: #000; }
.movie__lists--media--play { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; }
.movie__lists--media--play a { display: block; width: 100%; height: 100%; background-size: 100%; text-indent: -9999px; white-space: nowrap; overflow: hidden; }
.movie__lists--media--play a:after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 155px; height: 155px; background: url(../../img/share/play1.png) no-repeat center center; background-size: 100%; text-indent: -9999px; white-space: nowrap; overflow: hidden; }
.movie__lists--media--photo { position: relative; z-index: 1; }
.movie__lists--media--video { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; }
.movie__lists--media--video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.movie__lists--media--overlay { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,.8); z-index: 99; }
.movie__lists--title { margin-top: 10px; font-size: 1.2rem; font-weight: bold; }
.movie__lists--title span { color: #898989; }

@media screen and (min-width: 769px) {
	.movie__lists--media--overlay { display: none !important; }
}

@media screen and (max-width: 768px) {
	.topicpath { display: none; }
	.movie__top { padding: 30px 0 55px; }
	.movie__top .title--3 { margin-bottom: 12px; text-align: center; }
	.movie__top .title--3 .en { margin: 0 auto; width: 108px; }
	.movie__top .title--3 .ja { margin-top: 6px; }
	.movie__top--lead { margin-bottom: 32px; text-align: center; font-size: .7rem; }
	.movie__lists { margin: 0 10px; }
	.movie__lists--item {}
	.movie__lists--date { margin-bottom: 6px; font-size: .7rem; }
	.movie__lists--media { padding: 0; }
	.movie__lists--media--play a:after { width: 50px; height: 50px; }
	.movie__lists--media--video { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); padding-bottom: 56.25225009%; width: 100vw; height: 0; overflow: hidden; }
	.movie__lists--title { margin-top: 8px; font-size: 1rem; }
}