@charset "utf-8";
/***************************************************************************************************
 下層共通
 ***************************************************************************************************/
/* 下層common */
ul{
  list-style-type: none;
}
img{
  display: block;
  width: 100%;
  height: auto;
}

/* 下層キービジュアル */
.lower_kv{
  position: relative;
  z-index: 18;
  background-color: #fff;
}
.lower_kv_inner{
  padding: 112px 0;
  max-width: 1248px;
  width: calc(100% - 48px);
  margin: auto;
  position: relative;
}
.lower_kv_ttl{
  display: flex;
  gap: 24px;
  align-items: flex-end;
}
.lower_kv_ttl .ja{
  font-weight: 700;
  font-size: 43px;
  line-height: 1;
  letter-spacing: 0.04%;
}
.lower_kv_ttl .en{
  font-family: "Roboto", serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;    
  letter-spacing: 0.04%;
}
.lower_kv_ill{
  width: 433px;
  position: absolute;
  right: 0;
  bottom: -32px;
}

/* レイアウト */
.lower_main{
  position: relative;
  z-index: 17;
  margin-bottom: 436px;
  background-color: #fff;
  padding-bottom: 150px;
}
.lower_inner{
  max-width: 1248px;
  margin: auto;
}
#footer{
  opacity: 1;
  pointer-events: auto;
}

/* 1000px以下---------------------------------------------------------------- */
@media screen and (min-width: 0px) and (max-width: 1000px) {
/* レイアウト */
.lower_main{
  margin-bottom: 580px;
  padding-bottom: 55px;
}
}

/* SP---------------------------------------------------------------- */
@media screen and (min-width: 0px) and (max-width: 768px) {
  
/* 下層キービジュアル */
.lower_kv_inner{
  padding: 56px 0;
}
.lower_kv_ttl{
  gap: 12px;
}
.lower_kv_ttl .ja{
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0;
}
.lower_kv_ttl .en{
  font-size: 9px;
  letter-spacing: 0%;
}
.lower_kv_ill{
  width: 189px;
  bottom: -27px;
}

}

/***************************************************************************************************
 動画でご紹介
 ***************************************************************************************************/

 .movie_container{
  padding: 112px 24px;
  position: relative;
 }
 .movie_container::before{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: calc((100% - 100vw)/2);
  background-color:#F3F3F3;
  height: 100%;
  width: calc(1477/1920 * 100vw);
  border-radius: 0 10px 10px 0;
 }

 .movie_list{
  display: flex;
  gap: 60px;
  flex-wrap: wrap;
 }
 .movie_list li{
  width: calc((100% - 60px)/2);
  cursor: pointer;
 }
 .movie_thumb{
  border-radius: 5px;
  overflow: hidden;
  isolation: isolate;
  position:relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.16);
 }
  .movie_thumb::before{
    content: "";
    display: block;
    width: 68px;
    height: 68px;
    background-image: url('../images/movie/common/icon_play.svg');
    background-size: contain;
    position: absolute;
    z-index: 2;
  }
 .movie_thumb img{
  aspect-ratio: 594/333;
  object-fit: cover;
 }
 .movie_caption{
  font-size: 18px;
  line-height: 1.444444;
  font-weight: 700;
  letter-spacing: 0.04%;
  text-align: center;
  margin-top: 18px;
 }


 /* 動画モーダル */
 .movie_modal{
  cursor: pointer;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 10003;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: .2s ease;
  /* user-select: none; */
  /* width: 100%;
  height: 100%; */
 }
  .movie_modal.is-active{
    opacity: 1;
    visibility: visible;
  }

 .movie_modal::before{
  content: "";
  display: block;
  position: absolute;
  pointer-events: none;
  inset: 0;
  background-color: rgba(0, 0, 0, .4);
  z-index: -1;
 }

 .movie_modal_inner{
  cursor: auto;
  position: relative;
  width: auto;
  max-width: calc(100% - 156px);
  /* max-height: 100vh; */
 }
 .movie_modal_close{
  position: absolute;
  right: -76px;
  top: 0;
  cursor: pointer;
 }
 .movie_modal_close img{
  width: 60px;
  height: 60px;
 }
 .movie_modal_content{
  /* border-radius: 5px;
  isolation: isolate;
  overflow: hidden; */
  position: relative;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 1000px;
  max-width: 100%;
 }
 .movie_modal_box{
  /* padding:56.25% 0 0 0; */
  position:relative;
  background-color: #333333;
  max-height: calc(100vh - 134px);
  aspect-ratio: 100 / 56.25;
  width: 100%;
  border-radius: 5px 5px 0 0;
  /* border-radius: 5px 5px 0 0;
  overflow: hidden;
  isolation: isolate; */
 }
 .movie_modal_box iframe{
  /* position:absolute; 
  top:0;
  left:0; */
  width:100%;
  height:100%;
  display: block;
  border-radius: 5px 5px 0 0;
 }
 .movie_modal_caption{
  height: 134px;
  overflow-y: auto;
  background-color: #fff;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
  align-items: center;
  border-radius: 0 0 5px 5px;
  width: 100%;
 }
 .movie_modal_ttl {
  font-weight: 700;
  font-size: 23px;
  line-height: 1.130434;
  letter-spacing: 0.04%;
 }
 .movie_modal_desc {
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6875;
  letter-spacing: 0.04%;
 }

 /* SP---------------------------------------------------------------- */
@media screen and (min-width: 0px) and (max-width: 768px) {
 .movie_container{
  padding: 64px 24px;
 }
 .movie_container::before{
  left: -24;
  width: calc(311/375 * 100vw);
  border-radius: 0 5px 5px 0;
 }
 .movie_list{
  gap: 32px;
 }
 .movie_list li{
  width: 100%;
 }
.movie_thumb::before{
  width: 51px;
  height: 51px;
}

 .movie_caption{
  font-size: 14px;
  text-align: left;
  margin-top: 8px;
 }


 /* 動画モーダル */
 .movie_modal_inner{
  max-width: calc(100% - 16px);
 }
 .movie_modal_close{
  right: 0;
  top: -56px;
 }
 .movie_modal_close img{
  width: 48px;
  height: 48px;
 }
  .movie_modal_box{
  max-height: calc(100vh - 180px);
  /* aspect-ratio: 100 / 56.25; */
 }
 .movie_modal_caption{
  padding: 24px;
  gap: 10px;
  height: 180px;
 }
 .movie_modal_ttl {
  font-size: 18px;
 }


}