@charset "UTF-8";
/* ---------------------------------------------------------------------
 movie
 * --------------------------------------------------------------------- */
   /*ヘッダー固定表示時に、アンカーポイントやページ内リンクの位置
  <a id="test" class="anker"></a>*/
  a.anker{
   display: block;
   margin-top:-130px;
   padding-top:130px;
}
.pages_main_image{height:auto;position: relative;}
.pages_main_image .images{width: 100%;height: auto;min-width: 1200px;height: 700px!important;object-fit: cover}
.pages_main_image picture figcaption{width: 1200px;left: 0;right: 0;margin: auto;}
.pages_main_image .inner{position: absolute;width: 1200px;left: 0;right: 0;top: 0px; margin: auto}
.pages_main_image h2{color: #fff;font-size: 36px;letter-spacing: 0.2em;position: absolute;top: 50%;left: 50%;transform: translateY(-50%) translateX(-50%);-webkit-transform: translateY(-50%) translateX(-50%);z-index: 2;font-weight: normal;}
@media screen and (max-width: 767px) {/*スマホ設定*/
.pages_main_image .images{min-width: 100%;height: 220px!important;}
.pages_main_image .inner{display: none}
.pages_main_image h2{font-size: 25px;}
.pages_main_image picture figcaption{width: 96%;bottom: 10px}
}


#body_movie{padding: 80px 0}
#body_movie h2{font-size: 20px;letter-spacing: 0.1em; font-weight: normal;margin-bottom: 120px}
#body_movie h3{font-size: 24px;letter-spacing: 0.1em; text-indent: -0.1em; font-weight: normal;color: #9a9265;margin-bottom: 30px}
#body_movie .douga li.col2{width: 48%;margin-bottom: 40px}
#body_movie .douga li p{position: relative}
#body_movie .douga li p .cap{width:100%;}
#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;}


/*===============================================================================
===============================================================================*/
@media screen and (min-width: 768px) { /*PC設定*/
}
/*===============================================================================
===============================================================================*/
@media screen and (max-width: 767px) {/*スマホ設定*/
  a.anker{
   display: block;
   margin-top:-70px;
   padding-top:70px;
}

#body_movie{padding: 40px 0}
#body_movie h2{margin-bottom: 40px;font-size: 16px;}
#body_movie h3{font-size: 20px;margin-bottom: 15px}

#body_movie li.col2{width: 100%!important}
#body_movie .douga{width: 80%;margin:0px auto 0}
#body_movie .douga li{width:100%;margin-bottom: 0px}
#body_movie .douga li p .cap{width:100%;height:160px; object-fit: cover;}
#body_movie .douga li p .icon{width: 50px;height: 50px}

#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-wrap {  position: fixed;  top: 0;  left: 0;  z-index: 999999;  width: 100%;  height: 100vh;  display: none;  justify-content: center;  align-items: center;  background: rgba(0,0,0,0.7);}
.modal-wrap.shown {  display: flex;}
.modal-panel {  width:70%;  max-width: 1200px;  position: relative; z-index: 999999; }
.modal-frame {  position: relative;  width: 100%;  padding-top: 56.25%;}
.modal-frame iframe {  display: none;  position: absolute;  top: 0;  right: 0;  width: 100% !important;  height: 100% !important;}
.modal-close{position: absolute;top: -80px;right: -50px;font-size: 80px;display: block;cursor: pointer;color: #fff}
@media screen and (max-width: 896px) {/*スマホのスタイル*/
.modal-panel {  width:96%; }
.modal-close{position: absolute;top: -80px;right: 0px;font-size: 60px;display: block;color: #fff}
.modal__content{padding: 0px;width: 96%;}
}