@charset "UTF-8";
/* CSS Document */


html{
  background: linear-gradient(#3FE3B6,#27C4B0);
  min-height: 100vh;
}

.wrap::before{
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background: url(../images/movie_bk.jpg) center center;
  background-size: cover;
  position: fixed;
  transform: scale(1.1);
  mix-blend-mode: hue;
  opacity: 0;
  left: 0;
  top: 0;
  transition: 1.5s;
  z-index: -1;
} 
.wrap.mov::before{
  opacity: 0.2;
  transform: scale(1);
}

/*******************************
共通
********************************/

#movie h2 {
  color: #FFF; font-weight: bold;
  height: 80px;
  /* border-bottom: 1px solid #0D2835; */
  line-height: 80px;
  /* padding-left: 40px; */
  /* position: absolute; */
  position: relative;
  margin: 0 auto;
  top: 0;
}
#movie h2 p{
  background: url(../images/movie_i.svg) no-repeat left center;
  text-indent: 45px;
  color: #0D2835;
  width: 220px;
  margin: 0 auto;
}

.hash{
  display: flex;
  justify-content: left;
  flex-wrap: wrap;
}
.hash.top{
  justify-content: center;
  margin-bottom: 50px;
}

.hash li{
  line-height: 38px;
  padding: 0 15px;
  margin-right: 5px;
  margin-bottom: 5px;
  font-size: 20px;
  cursor: pointer;
  color: #DCFF00;
  background: #05293A;
}

.hash li.active{
  background: #DCFF00;
  color: #000;
}
.hash li.active{transform: translate(3px,3px);}


.mov_wrap{
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  justify-content: start;
  gap: 30px;
}
.mov_wrap .mov_item{width: 400px; position: relative;}
.mov_wrap .mov_item a{
  display: block;color: #000; text-decoration: none; width: 100%; height: 100%;
  transition: .3s;
}

.mov_wrap li .thum img{object-fit: cover; width: 100%; height: 100%;}
.mov_wrap li .thum{
  border-radius: 6px; 
  overflow: hidden;
  width: 100%;
  height: 224px;
  position: relative;
}

.mov_wrap li .thum::before{
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background: rgba(0,0,0,0.5);
  transition: .3s;
  opacity: 0;
  left: 0;
  top: 0;
  z-index: 1;
  pointer-events: none;
}

.mov_wrap li .thum::after{
  content: '動画を見る';
  position: absolute;
  z-index: 1;
  color: #FFF;
  text-align: center;
  display: block;
  left: 0;
  line-height: 224px;
  width: 100%;
  font-size: 22px;
  pointer-events: none;
  top: 0px;
  opacity: 0;
  transition: .5s;
  transform: translateY(-10px);
}
.mov_wrap li .hash{left: 0px;}

.tab{
  border-bottom: 1px solid rgba(0,0,0,0.3);
  display: flex;
  width: 100%;
  justify-content: center;
  margin-bottom: 30px;
}
.tab .tab01,.tab .tab02{
  line-height: 80px;
  width: 280px;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  position: relative;
}
.tab .tab01:before,
.tab .tab02:before{
  content: '';
  width: 100%;
  height: 8px;
  position:absolute;
  background: #0046A2;
  bottom: -4px;
  left: 0;
  opacity: 0;
  transition: .3s;
}
.tab .tab01.active,
.tab .tab02.active{
  opacity: 1;
  color: #0046A2;
  pointer-events: none;
}
.tab .tab01.active:before,
.tab .tab02.active:before{
  opacity: 1;
}

.mov_item .hash li{
  line-height: 25px;
  padding: 0 10px;
  margin-right: 5px;
  margin-bottom: 5px;
  font-size: 16px;
  color: #05293A;
  background: #DCFF00;
}
.mov_item .thum{
  margin-bottom: 20px;
}
.mov_item .day{
  color: #FFF;
  font-family: 'Roboto',sans-serif;
  font-size: 18px;
  margin-bottom: 10px;
}
.mov_item .title{
  font-size: 20px;
  font-weight: bold;
}
.tab_contents {
  position: relative;
}
.tab > div {
  cursor: pointer;
}
.tab > div.active {
  font-weight: bold;
  color: #000;
}

p.blank{
  padding: 50px;
  text-align: center;
  font-size: 1.2em;
  font-weight: bold;
  width: 100%;
}

/* .tab_contents .mov_wrap .mov_item{opacity: 0; transition: 1s; transform: translateY(10px);}
.tab_contents.active .mov_wrap .mov_item{opacity: 1; transform: translateY(0px);}
.tab_contents .mov_wrap .mov_item:nth-child(1){transition-delay: 0.5s;}
.tab_contents .mov_wrap .mov_item:nth-child(2){transition-delay: 0.6s;}
.tab_contents .mov_wrap .mov_item:nth-child(3){transition-delay: 0.7s;}
.tab_contents .mov_wrap .mov_item:nth-child(4){transition-delay: 0.8s;}
.tab_contents .mov_wrap .mov_item:nth-child(5){transition-delay: 0.9s;}
.tab_contents .mov_wrap .mov_item:nth-child(6){transition-delay: 1.0s;}
.tab_contents .mov_wrap .mov_item:nth-child(7){transition-delay: 1.1s;}
.tab_contents .mov_wrap .mov_item:nth-child(8){transition-delay: 1.2s;}
.tab_contents .mov_wrap .mov_item:nth-child(9){transition-delay: 1.3s;}
.tab_contents .mov_wrap .mov_item:nth-child(10){transition-delay: 1.4s;}
.tab_contents .mov_wrap .mov_item:nth-child(11){transition-delay: 1.5s;}
.tab_contents .mov_wrap .mov_item:nth-child(12){transition-delay: 1.6s;} */


/***********************************************************************
「★PC版 CSS★」ブラウザの幅が769px以上ならここの記述が有効になる
**********************************************************************/
@media only all and (min-width: 769px) {

#movie .wrap{
  padding-top: 50px; 
  position: relative;
}
#movie h2 {
  font-size: 36px; 
  padding-right: 40px;
  margin-bottom: 10px;
  text-align: center;
}

.hash li:hover{
  background: #DCFF00;
  color: #000;
}

.hash{position: relative; left: -30px;} 

.tab{position: relative; left: -30px;}

.mov_wrap{
  width: 1260px;
  position: relative;
  left: -30px;
}

.mov_wrap .mov_item{margin-bottom: 30px;}

.tab .tab01,
.tab .tab02{transition: .3s;}
.tab .tab01:hover,
.tab .tab02:hover{
  color: #0046A2;
}
.mov_wrap li a:hover .thum::before{
  opacity: 1;
}
.mov_wrap li a .metadata{transition: .3s;}
.mov_wrap li a:hover .metadata{
  opacity: 0.6;
}
.mov_wrap li a:hover .thum img{
  transform: scale(1.05);
}
.mov_wrap li a:hover .thum::after{
  transform: translateY(0);
  opacity: 1;
}


}


/***********************************************************************
「★SP版 CSS★」ブラウザの幅が750px未満ならここの記述が有効になる
**********************************************************************/
@media only all and (max-width: 750px) { 
 
#movie{
  width: 100%;
  background: linear-gradient(#3FE3B6,#27C4B0);}

.wrap{padding-top: 40px;}
 
#movie h2 {font-size: 22px; background: none;}

#movie h2 p{padding-left: 85px; font-size: 38px; text-indent: 0; line-height: 70px; background-size:70px auto; height: 96px; background-position: left top; position: relative; top: -0px;}
 
#movie h2{
  width: auto;margin: 0 auto;position: relative;
  padding-bottom: 15px;
  display: block;
  width: 650px;
  margin-bottom: 25px;
  border-bottom: 1px solid #0D2835;
}

.mov_wrap{gap: 0;}

.tab .tab01, .tab .tab02{
  font-size: 34px;
  line-height: 1.2em;
  padding: 20px 0 30px 0;
}

.hash li{line-height: 50px;padding: 0 25px; font-size: 28px;}

.mov_wrap .mov_item{
  width: 100%;
  margin-bottom: 0;
  overflow: hidden;
}
.mov_wrap .mov_item a{display: flex;
  gap: 20px;
  padding: 30px 20px;}
.mov_wrap .mov_item:nth-child(odd) a{background: #3CF2CB;}
.mov_wrap .mov_item:nth-child(even) a{background: #3CDFBC;}

.mov_wrap li .thum{height: auto; margin: 0;}
.mov_wrap li .thum{
  width: 280px;
}

.metadata{width: 410px;}

.mov_item .day{font-size: 20px;}
.mov_item .hash li{font-size: 20px; line-height: 34px;}
.mov_item .hash {margin-bottom: 8px;}

.mov_item .title{
  font-size: 24px;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.mov_wrap li .thum img {
    object-fit: cover;
    width: 100%;
    height: 158px;
}
p.blank {
    padding: 100px;
    font-size: 30px;
}
.menu{
  display: block;
}


.wrap{padding-bottom: 340px;}
.menu h2{display: none;}
.menu .logo{display: none;}
#countdown_sp{background:none;}
#countdown_sp p{
  display: none;
}
#countdown_sp::before{
  top: 20px;
}
#countdown_sp  .text::before,
#countdown_sp  .text::after{
  display: none;
}

    .menu_right {
        background: url(../images/menu_boat_sp.svg) center bottom 80px no-repeat ;}

    /* メニュー本体 */
    .menu_right_wrapper {
      display: block;
      height: 100%;
      position: relative;
      top: 0;
      z-index: 100;
      margin-top: 10px;
      margin-top: -300px;
    }
    .menu_right{
      position: relative;
    }
}