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

body{
   background-color: rgba(7,19,21,1.00);
}

/*=======================================================
   ビジュアル領域
  =======================================================*/

.first_wrap{
   position: relative;
   width: 100%;
   background-image: url("../images_08th/top/bg/bg_001.jpg");
   background-position: top left;
   background-repeat: no-repeat;
   background-size: cover;
}
   @media screen and (max-width: 1024px) {
      .first_wrap{
         background-image: url("../images_08th/top/bg/bg_001m.jpg");
      } 
   }


.visual_wrap{
   position: relative;
   width: 100%;
   display: flex;
   justify-content: space-between;
}

.visual01_wrap{
   position: relative;
   width: 32%;
   margin-left: 43%;
}
   @media screen and (max-width: 1024px) {
      .visual01_wrap{
         width: 60%;
         margin: auto;
      } 
   }


/*========================
   SNS_ビジュアル領域用
  =======================*/
.first_wrap .f_sns_wrap{
   position: fixed;
   right: 0;
   bottom: 20px;
   width: 200px;
   margin-left: 0;
   padding-top: 0;
   padding-bottom: 0;
   z-index: 9999;
}
   @media screen and (max-width: 800px) {
      .first_wrap .f_sns_wrap{
         width: 150px;
         bottom: 10px;
      } 
   }

  
/* bottom_wrap が見えたら：first_wrap の下部に固定 */
.first_wrap .f_sns_wrap.is-absolute{
   position: absolute;
   right: 0;
   bottom: 20px;
}
   @media screen and (max-width: 600px) {
      .first_wrap .f_sns_wrap.is-absolute{
         bottom: 10px;
      } 
   }


/* 中身 */
.share_wrap{
   position: relative;
   width: 100%;
}


.visual01_mask{
  mask-image: url("../images_08th/top/visual/v_001_kabuse.png") ;
  mask-repeat: no-repeat;
  mask-position: 0 0;
  mask-size: auto 100%;
}

/*========================
   ロゴ
  =======================*/
.logo_wrap{
   position: absolute;
   top: 5%;
   left: 7%;
   width: 33%;
}
   @media screen and (max-width: 1024px) {
      .logo_wrap{
         position: relative;
         width: 55%;
         top: auto;
         left: auto;
         margin: auto;
         padding: 20px 0 0 0;
      } 
   }


/*========================
   オンエアキャッチ
  =======================*/
.ch_oa01{
   position: absolute;
   top: 30%;
   left: 17%;
   width: 10%;
   /*opacity: 0;
   filter: blur(14px);
   transform: translateY(8px) scale(1.08);
   animation: ch_oa01_fade 1.2s ease-out forwards;
   will-change: opacity, filter, transform;*/
}
   @media screen and (max-width: 1024px) {
      .ch_oa01{
         top: 40%;
         left: 3%;
         width: 15%;
      } 
   }
   @media screen and (max-width: 800px) {
      .ch_oa01{
         top: 50%;
         left: 3%;
         width: 15%;
      } 
   }
   @media screen and (max-width: 600px) {
      .ch_oa01{
         top: 45%;
         left: 3%;
         width: 17%;
      } 
   }


.ch_oa01{ animation-delay: 1.46s; }
@keyframes ch_oa01_fade {
   0% {
      opacity: 0;
      filter: blur(16px);
   }

   100% {
      opacity: 1;
      filter: blur(0);
   }
}



/*========================
   おかえり
  =======================*/
.ch01_wrap{
   position: absolute;
   width: 6.2%;
   top: 5%;
   right: 16%;
}
   @media screen and (max-width: 1024px) {
      .ch01_wrap{
         top: 250px;
         right: 10%;
         width: 8%;
      } 
   }
   @media screen and (max-width: 800px) {
      .ch01_wrap{
         top: 250px;
         right: 14%;
         width: 7.5%;
      } 
   }
   @media screen and (max-width: 600px) {
      .ch01_wrap{
         top: 180px;
         right: 14%;
         width: 8.8%;
      } 
   }
   @media screen and (max-width: 480px) {
      .ch01_wrap{
         top: 130px;
         right: 10%;
         width: 9.0%;
      } 
   }


.ch01_flex{
   position: relative;
   width: 100%;
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
}

.ch01_flex li{
   width: 100%;
   opacity: 0;
   filter: blur(14px);
   transform: translateY(8px) scale(1.08);
   animation: ch01_fade_blur 0.9s ease-out forwards;
   will-change: opacity, filter, transform;
}

.ch01_flex li img{
   width: 100%;
   height: auto;
   display: block;
}

/* 上から順番に表示 */
.ch01_flex li:nth-child(1){ animation-delay: 0.2s; }
.ch01_flex li:nth-child(2){ animation-delay: 0.38s; }
.ch01_flex li:nth-child(3){ animation-delay: 0.56s; }
.ch01_flex li:nth-child(4){ animation-delay: 0.74s; }
.ch01_flex li:nth-child(5){ animation-delay: 0.92s; }
.ch01_flex li:nth-child(6){ animation-delay: 1.10s; }
.ch01_flex li:nth-child(7){ animation-delay: 1.28s; }
.ch01_flex li:nth-child(8){ animation-delay: 1.46s; }

@keyframes ch01_fade_blur {
   0% {
      opacity: 0;
      filter: blur(16px);
      transform: translateY(10px) scale(1.12);
   }

   60% {
      opacity: 1;
      filter: blur(4px);
      transform: translateY(0) scale(1.03);
   }

   100% {
      opacity: 1;
      filter: blur(0);
      transform: translateY(0) scale(1);
   }
}


/*=======================================================
   スタッフ＆キャスト領域
  =======================================================*/
.bottom_wrap{
   position: relative;
   overflow: hidden;
   width: 100%;
   background-image: url("../images_08th/top/bg/bg_002.jpg");
   background-position: top left;
   background-repeat: no-repeat;
   background-size: cover;
   border-top: rgba(0,0,0,1.00) 4px solid;
}

.h_staff{
   position: relative;
   width: min(80% , 1100px);
   margin: 0 auto 100px auto;
}
   @media screen and (max-width: 1024px) {
      .h_staff{
         margin: 0 auto 60px auto;
      } 
   }
   @media screen and (max-width: 480px) {
      .h_staff{
         margin: 0 auto 30px auto;
      } 
   }


.i_staff{
   font-family: "Hina Mincho", serif;
   font-size: 170%;
   font-weight: 800;
   text-align: center;
   color: rgba(255,255,255,1.00);
   margin-bottom: 60px;
   text-shadow: 0px 0px 6px rgba(67, 71, 129, 1), 0px 0px 6px rgba(67, 71, 129, 1);
}
   @media screen and (max-width: 1024px) {
      .i_staff{
         font-size: 2.6vw;
         margin-bottom: 50px;
      } 
   }
   @media screen and (max-width: 800px) {
      .i_staff{
         font-size: 3.0vw;
         margin-bottom: 50px;
      } 
   }
   @media screen and (max-width: 600px) {
      .i_staff{
         font-size: 3.8vw;
         margin-bottom: 50px;
      } 
   }
   @media screen and (max-width: 480px) {
      .i_staff{
         font-size: 4.8vw;
         margin-bottom: 40px;
      } 
   }


.staff_wrap{
   position: relative;
   margin-bottom: 160px;

}
   @media screen and (max-width: 1024px) {
      .staff_wrap{
         margin-bottom: 100px;
      } 
   }
   @media screen and (max-width: 800px) {
      .staff_wrap{
         margin-bottom: 100px;
      } 
   }


.cast_wrap{
   position: relative;
   margin-bottom: 160px;
}
   @media screen and (max-width: 1024px) {
      .cast_wrap{
         margin-bottom: 100px;
      } 
   }
   @media screen and (max-width: 800px) {
      .cast_wrap{
         margin-bottom: 100px;
      } 
   }

.staff_box{
   position: relative;
   margin: auto;
   text-align: center;
   font-family: "Hina Mincho", serif;
   color: rgba(255,255,255,1.00);
   margin-bottom: 50px;
}
   @media screen and (max-width: 480px) {
      .staff_box{
         margin-bottom: 30px;
      } 
   }


.staff_box .posi{
   font-size: 120%;
   text-shadow: 0px 0px 6px rgba(67, 71, 129, 1), 0px 0px 6px rgba(67, 71, 129, 1);
}
   @media screen and (max-width: 1024px) {
      .staff_box .posi{
         font-size: 1.8vw;
      } 
   }
   @media screen and (max-width: 800px) {
      .staff_box .posi{
         font-size: 2.4vw;
      } 
   }
   @media screen and (max-width: 600px) {
      .staff_box .posi{
         font-size: 2.8vw;
      } 
   }
   @media screen and (max-width: 480px) {
      .staff_box .posi{
         font-size: 3.8vw;
      } 
   }


.staff_box .name{
   font-size: 220%;
   margin-bottom: 10px;
   text-shadow: 0px 0px 6px rgba(67, 71, 129, 1), 0px 0px 6px rgba(67, 71, 129, 1);
}
   @media screen and (max-width: 1024px) {
      .staff_box .name{
         font-size: 2.8vw;
      } 
   }
   @media screen and (max-width: 800px) {
      .staff_box .name{
         font-size: 3.8vw;
      } 
   }
   @media screen and (max-width: 600px) {
      .staff_box .name{
         font-size: 4.8vw;
      } 
   }
   @media screen and (max-width: 480px) {
      .staff_box .name{
         font-size: 6.0vw;
         margin-bottom: 5px;
      } 
   }


.staff_box .b_comment{
   position: relative;
   width: 150px;
   margin: auto;
}
   @media screen and (max-width: 480px) {
      .staff_box .b_comment{
         width: 30%;
      } 
   }


.staff_bottom{
   position: relative;
   width: 100%;
   line-height: 1;
   background-color: rgba(0,0,0,1.00);
   height: 6px;
   margin-bottom: 6px;
}




/*=======================================================
   コメント
  =======================================================*/
.commen_wrap{
   position: relative;
   width: min(95% , 1000px);
   background-color: rgba(255,255,255,0.80);
   padding: 50px 80px;
   margin: 50px auto;
   background-image: url("../images_08th/top/i_comment.png");
   background-position: top center;
   background-repeat: no-repeat;
   background-size: 60% auto;
}
   @media screen and (max-width: 800px) {
      .commen_wrap{
         padding: 50px 40px;
      } 
   }
   @media screen and (max-width: 600px) {
      .commen_wrap{
         padding: 30px 20px;
         width: 98%;
         background-size: 80% auto;
      } 
   }

.comment_i_box{
   position: relative;
   width: 100%;
   margin: 50px auto 50px auto;
   text-align: center;
   font-family: "Hina Mincho", serif;
}
   @media screen and (max-width: 800px) {
      .comment_i_box{
        margin: 30px auto 50px auto;
      } 
   }
   @media screen and (max-width: 600px) {
      .comment_i_box{
        margin: 40px auto 30px auto;
      } 
   }
   @media screen and (max-width: 480px) {
      .comment_i_box{
        margin: 30px auto 20px auto;
      } 
   }


.comment_i_box .i_posi{
   font-size: 110%;
   color: rgba(0,0,0,1.00);
   letter-spacing: 2px;
}

.comment_i_box .i_name{
   font-size: 240%;
   color: rgba(0,0,0,1.00);
   letter-spacing: 6px;
}

.comment_box{
   position: relative;
   width: 100%;
   margin-bottom: 50px;
}

.comment_q{
   position: relative;
   width: 100%;
   font-size: 100%;
   margin-bottom: 15px;
   font-family: "Hina Mincho", serif;

   /*background-image: url("../images_08th/tmp/h5.png");
   background-position: top left;
   background-repeat: no-repeat;
   background-size: 18px auto;
   font-weight: 700;
   text-align: left;
   padding-left: 25px;*/
   line-height: 1.8;
   background-color: rgba(216,199,214,1.00);
   padding: 3px 15px;
}

.comment_a{
   position: relative;
   width: 100%;
   font-size: 110%;
   line-height: 1.8;
   font-family: "Noto Serif JP", serif;
}

.comment_bottom_logo{
   position: relative;
   width: 250px;
   margin: 0 auto 40px auto;
}