@charset "utf-8";

#movie{margin: 0 auto;position: relative;}
#movie {position: relative;X  padding-bottom: 56.25%;height: 100vh;overflow: hidden;}
#movie iframe {position:absolute;top:5%;left:5%;width:90%;height:85%;vertical-align:bottom;}
#movieWrap{overflow:hidden;font-size:14px;font-family: 'Noto Sans Japanese', "メイリオ", Meiryo, Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック", "MS PGothic", sans-serif;margin:0 auto;background:url(../../img/common/overlay.png) top center repeat!important;	box-sizing:border-box;}
#movieWrap .movBtn{position:absolute;bottom:0px;left:50%;-ms-transform: translate(-50%, 0);-webkit-transform: translate(-50%, 0);transform: translate(-50%, 0);width:100%;text-align:center;}
#movieWrap .movBtn li{border:2px solid #FFF;text-align:center;width:45%;margin-left:15px;display:inline-block;}
.sp #movieWrap .movBtn li a{color:#000;display:block;font-weight:bold;padding:5px 10px;}
.sp #movieWrap .movBtn li{border:2px solid #000;text-align:center;width:20%;margin-left:2%;display:inline-block;}
#movieWrap .movBtn li:first-child{margin-left:0;}
#movieWrap .movBtn li a{color:#FFF;display:block;font-weight:bold;padding:5px 10px;}
#movieWrap .movBtn li:hover,#movieWrap .movBtn li.active{border-color:#a846c3;color:#a846c3;}
#movieWrap .movBtn li:hover a,#movieWrap .movBtn li.active a{color:#a846c3;}
.sp {padding-top:80px;box-sizing:border-box;}
.sp #movie {padding-bottom:56.25%!important;height:0!important;}
.sp #movieWrap .movBtn{position:fixed;bottom:70px;left:50%;-ms-transform:translate(-50%, 0);-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0);width:100%;text-align: center;}