@charset "UTF-8";
/* ---------------------------------------------------------------------
 movie
 * --------------------------------------------------------------------- */
   /*ヘッダー固定表示時に、アンカーポイントやページ内リンクの位置
  <a id="test" class="anker"></a>*/
  a.anker{
   display: block;
   margin-top:-130px;
   padding-top:130px;
}
 .bg{background: url("../images/concept/bg.jpg") no-repeat center top;background-size: cover;}
.pages_main_title{height: auto; padding: 0px;text-align: center;color: #fff;}

.pages_main_title h2{font-size: 40px;letter-spacing: 0.2em;text-indent: 0.2em;}
.pages_main_title h2 span{font-size: 24px;letter-spacing: 0.1em;text-indent: 0.1em;}


#body_movie{padding: 80px 0}
#body_movie h3{text-align: left; border-left: 3px solid #fff;border-bottom: 1px solid #fff;margin-bottom: 12px;color: #fff;font-size: 20px;letter-spacing: 0.1em;padding: 10px 0 10px 18px;}

#body_movie .douga li{margin: 0 1% 40px}
#body_movie .douga li p{position: relative}
#body_movie .douga li p .cap{width:100%;height: auto;/*height:300px; object-fit: cover;*/}
#body_movie .douga li p .icon{position: absolute;top: 50%;left: 50%;transform: translateY(-50%) translateX(-50%);-webkit-transform: translateY(-50%) translateX(-50%);}
#body_movie .douga li .notice{color: #fff;text-align: left;margin-top: 12px;}

#body_movie .douga li.col1 p .cap{width:100%;height:280px; object-fit: cover;}

body.fixed {position: fixed;width: 100%;height: 100%;left: 0;}
.modal{display: none;height: 100vh;position: fixed;top: 0;left: 0;width: 100%;z-index: 100}
.modal__bg{background: rgba(0,0,0,0.8);height: 120vh;position: absolute;left: 0;top: 0; width: 100%;}
.modal__content{background: #fff;left: 50%;padding:0px;position: absolute;top: 50%;transform: translate(-50%,-50%);width: 70%;}
.modal__content a{text-decoration: none}
.js-modal-close{position: absolute;top: -40px;right: -40px;font-size: 60px;display: block;color: #fff}
.movie-wrap { position: relative; padding-bottom: 47.25%;height: 0; overflow: hidden;}

.movie-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

.modal__content.st2{background: #fff;left: 50%;padding:0px;position: absolute;top: 50%;transform: translate(-50%,-50%);width: 30%;max-width:460px}
.modal__content.st2 .movie-wrap { position: relative; padding-bottom: 177%;height: 0; overflow: hidden;}
/*===============================================================================
===============================================================================*/
@media screen and (min-width: 768px) { /*PC設定*/
}
/*===============================================================================
===============================================================================*/
@media screen and (max-width: 767px) {/*スマホ設定*/
  a.anker{
   display: block;
   margin-top:-70px;
   padding-top:70px;
}

.pages_main_title h2{font-size: 30px;}
.pages_main_title h2 span{font-size: 16px;}
#body_movie{padding: 40px 0}
#body_movie h3{font-size: 15px;margin-bottom: 20px}
#body_movie h3 span{margin-bottom: 0;font-size:18px}
#body_movie li.col2{width: 100%!important}
#body_movie .douga{width: 80%;margin:0px auto 0}
#body_movie .douga li{width:100%;margin-bottom: 30px}
#body_movie .douga li p .cap{width:100%;height:auto;}
#body_movie .douga li p .icon{width: 50px;height: 50px}
#body_movie h4{font-size: 13px;}
#body_movie .douga li.col1{width: 60%;margin: 2%}
#body_movie .douga li.col1 p .cap{width:100%;height:140px; object-fit: cover;}    
#body_movie .douga li .notice{font-size: 11px}
.js-modal-close{position: absolute;top: -60px;right: 0px;font-size: 60px;display: block;color: #fff}
.modal__content{padding: 0px;width: 96%;}

.modal__content.st2{width: 70%;}

}