@charset "UTF-8";

#lower header{width:100%;height:260px;background:url("_img/bg_header.jpg")}
#lower header .pict{width:1100px; margin:0 auto;}

section#main{width:996px; margin:40px auto;}

#main h2{width:639px;margin:20px auto; }

ul#movieList{width:1000px;display:flex; flex-wrap: wrap; margin:0 auto;}
ul#movieList li{width:49%;margin:0.5%;position: relative;}
ul#movieList li div{
width: 100%;
padding-bottom: 56.25%;
height: 0px;
position: relative;
}
ul#movieList li div iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.modalWin{width:100%;padding:50px;background:#e4e4e4;box-sizing: border-box;font-size:18px; line-height:1.4em;color:#333333;text-align: center;}
.modalWin p{text-align:left;}
.modalWin .name{font-size:32px; font-weight:bold;margin:10px 0; }
.modalWin .name span{font-size:20px;font-weight:normal;}
.modalWin button{-webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  border-radius: 0;
  background: #e4e4e4;font-size:16px;text-align:center;display: inline-block; margin:20px auto;}

ul#castList{width:996px;display:flex; flex-wrap: wrap; margin:0 auto;}
ul#castList li{width:50%;margin-right:-20px;margin-bottom:25px;}

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

section#main{width:100%;}
#main h2{width:100%;margin:3% auto; }
#lower header{width:100%;height:auto;padding-bottom: calc(100%*260/750);background:url("_img/header_sp.jpg")no-repeat;background-size: 100% auto;}
#lower header .pict{display:none;}

ul#movieList{width:96%;display:flex; flex-wrap: wrap; margin:0 auto;}
ul#movieList li{width:98%;margin:1%;position: relative;}
    
ul#castList{width:96%;display:flex; flex-wrap: wrap; margin:0 auto;}
ul#castList li{width:100%;margin-right:0px;margin-bottom:3%;}   
    
.modalWin{width:100%;padding:3%;font-size:3vw}
.modalWin .name{font-size:6vw;  }
.modalWin .name span{font-size:4vw;}
    
.modalWin button{font-size:3.4vw;}
    
    }