@charset "utf-8";
/* CSS Document */

body { color: #434343; }

/*============================
ClearFix
============================*/
.clearFix::after { clear: both; display: block; content: ""; height: 0; line-height: 0; }

#movie .visual.movie { margin-top: 125px; }
#movie .visual.movie .visual__inner { background-image: url(/common_old/img/movie/bg_indexmovie.jpg); background-position: 50% 100%; }
#movie .movie__index { padding: 50px 0 90px; }
#movie .movie__index .movie__index--inner { margin: 0 auto; max-width: 1140px; width: 100%; }
#movie .movie__index .movie__index--inner .movie__index--title {}
#movie .movie__index .movie__index--inner .movie__index--title h2 { text-align: center; font-size: 32px; font-size: 3.2rem; }
#movie .movie__index .movie__index--inner .movie__index--title p { text-align: center; margin-top: 20px; font-size: 1.5rem; line-height: 2; }
#movie .movie__index .movie__index--inner .movie__menu { margin-top: 60px; }
#movie .movie__index .movie__index--inner .movie__menu ul { box-sizing: border-box; }
#movie .movie__index .movie__index--inner .movie__menu ul li { float: left; width: 48%; margin-right: 4%; margin-top: 40px; height: auto; text-align: left; }
#movie .movie__index .movie__index--inner .movie__menu ul li .category { margin-top: 10px; }
#movie .movie__index .movie__index--inner .movie__menu ul li .category span { display: inline-block; background: #eee; color: #555; padding: 1px 5px; font-size: 0.875em; }
#movie .movie__index .movie__index--inner .movie__menu ul li .title { height: 50px; margin-top: 10px; font-weight: bold; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
#movie .movie__index .movie__index--inner .movie__menu ul li .text { font-size: 0.9125em; margin-top: 10px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; height: 70px; overflow: hidden; }
#movie .movie__index .movie__index--inner .movie__menu ul li:nth-child(2n) { margin-right: 0; }
#movie .movie__index .movie__index--inner .movie__menu ul li iframe { width: 100%; height: 310px; }
#movie .movie__index .movie__index--inner .movie__menu .formButton { text-align: center; padding: 100px 0; background: #eee; }
#movie .movie__index .movie__index--inner .movie__menu .formButton input { border: 1px solid #000000; color: #000000; background: #fff; border-radius: 0.25em; padding: 1em 2em 0.8em; line-height: 1; cursor: pointer; }
#movie .movie__index .movie__index--inner .movie__menu .formButton a { text-decoration: underline; }

@media only screen and (max-width: 767px){
#movie .visual.movie { width: 100%; margin-top: 15px; }
#movie .visual.movie .visual__inner { background-image: url(/common_old/img/movie/bg_indexmovie_sp.jpg)!important; background-position: 50% 50%; }
#movie .visual.movie .visual__inner--title h1 { font-size: 4rem; }
#movie .visual.movie .visual__inner--title p { line-height: 1.5; text-align: center; }
#movie .visual.movie .visual__inner--title { width: 100%; height: 200px; vertical-align: middle; position: static; top: auto; left: auto; display: table-cell; }
#movie .movie__index { padding-bottom: 40px; }
#movie .movie__index .movie__index--inner .movie__index--title h2 { font-size: 2.3rem; }
#movie .movie__index .movie__index--inner .movie__index--title p { text-align: left; margin: 10px auto 0; width: 80%; font-size: 1.3rem; }
#movie .movie__index .movie__index--inner .movie__menu { margin: 40px auto 0; }
#movie .movie__index .movie__index--inner .movie__menu ul { width: 100%; margin-right: 0; padding: 0 20px; }
#movie .movie__index .movie__index--inner .movie__menu ul li { width: 100%; margin: 0 auto; padding-bottom: 20px; margin-top: 20px; }
#movie .movie__index .movie__index--inner .movie__menu ul li .category {}
#movie .movie__index .movie__index--inner .movie__menu ul li .category span {}
#movie .movie__index .movie__index--inner .movie__menu ul li .title { height: inherit; -webkit-line-clamp: inherit; }
#movie .movie__index .movie__index--inner .movie__menu ul li .text { margin-top: 5px; height: 62px; }
#movie .movie__index .movie__index--inner .movie__menu ul li iframe { width: 100%; height: 250px; }
#movie .movie__index .movie__index--inner .movie__menu .formButton { text-align: center; padding: 60px 0; }
	
}