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

/* ====================================================================
   ヘッダ
   ==================================================================== */
   
header{
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   background-color: rgba(255,255,255,0.00);
   /*display: none;*/
   border-bottom: none;
   z-index: 10;
   transition: all 1s;
}

header.is-head{
   opacity:1;
   background-color: rgba(255,255,255,1.00);
   border-bottom: rgba(41,41,41,1.00) 1px solid;
   transition: all 1s;
}

header .head_wrap{
   position: relative;
   width: 100%;
   display: flex;
   min-height: 90px;
}

header .inner{
   position: relative;
   display: flex;
   justify-content: space-between;
   width: calc(100% - 90px);
   height: 90px;
   align-items: center;
   border-right: rgba(0,0,0,1.00) 1px solid;
   z-index: 11;
   transition: all 1s;
   background-image: url("../images/tmp/spc.png");
   background-position: top center;
   background-repeat: no-repeat;
   background-size: 100% auto;
}

header.is-head .inner{
   opacity: 1;
   transition: all 1s;
   background-image: url("../images/bg/bg_head.jpg");
   background-position: top center;
   background-repeat: no-repeat;
   background-size: 100% auto;
   }
   @media screen and (max-width: 1200px) {
      header .inner{
         width: calc(100% - 10px - 80px);
      } 
   }

header .logo{
   position: absolute;
   top: 10%;
   left: 3%;
   width: 30%;
   margin: auto;
   transition: all 1s;
   z-index: 10;
}

header.is-head .logo{
   top: 0%;
   width: 180px;
   transition: all 1s;
}


   @media screen and (max-width: 1200px) {
      header .logo{
         width: 250px;
      } 
   }






.main_logo{
   position: fixed;
   top: 0.5%;
   width: 20%;
   margin: auto;
   transition: all 1s;
   z-index: 25;
}

.logo_img{
   margin-left: 10%;
}

   .main_logo.is-head{
      top: 0%;
      width: 180px;
      transition: all 1s;
   }


   @media screen and (max-width: 1200px) {
      .main_logo{
         width: 200px;
      } 
   }


.oa_ch01{
   position: relative;
   left: 0;
   width: 130%;
   margin-top: 1%;
   transition: all 1s;
   opacity: 1;
   background-color: rgba(0,0,0,0.40);
   border-top: rgba(255,255,255,1.00) 1px solid;
   border-right: rgba(255,255,255,1.00) 1px solid;
   border-bottom: rgba(255,255,255,1.00) 1px solid;
}

   @media screen and (max-width: 1200px) {
      .oa_ch01{
         width: 150%;
      } 
   }


   .oa_ch01.is-head{
      top: 7%;
      width: 120%;
      margin-top: 3%;
      background-color: rgba(0,0,0,0.80);
      opacity: 0;
      transition: all 1s;
   }

header .menu{
   position: relative;
   margin: 0 30px 0 auto;
}
   @media screen and (max-width: 1500px) {
      header .menu{
         margin: 0 10px 0 auto
      } 
   }
   @media screen and (max-width: 1200px) {
      header .menu{
         display: none;
      } 
   }


.gmenu_wrap_pc ol{
   width: 100%;
   list-style: none;
   display: flex;
   justify-content: flex-end;
   flex-wrap: wrap;
}


.gmenu_wrap_pc ol li{
   position: relative;
   min-width: 150px;
   line-height: 1.6;
   letter-spacing: 3px;
   text-align: center;
   margin: 2px 6px;
   border: rgba(0,0,0,1.00) 1px solid;
   background-color: rgba(255,255,255,1.00);
   font-size: 90%;
}

   @media screen and (max-width: 1500px) {
      .gmenu_wrap_pc ol li{
          margin: 2px 6px;
          font-size: 80%;
          min-width: 100px;
      } 
   }

.gmenu_wrap_pc ol li a{
   color: rgba(0,0,0,1.00);
   /*text-shadow:  0 0 6px #000,0 0 6px #000,0 0 6px #000,0 0 6px #000,0 0 6px #000,0 0 6px #000;*/
   text-decoration: none;
   align-items: center;
   padding: 0 5px;
   font-weight: 400;
   letter-spacing: 2px;
   transform: scale(0.9, 1);
   display: block;
} 
   @media screen and (max-width: 1500px) {
      .gmenu_wrap_pc ol li a{
         padding: 0 10px;
         left: 1px;
      }
   }

.gmenu_wrap_pc ol li.intro2 a{
      padding: 0 5px;
}


.gmenu_wrap_pc ol li.select{
   background-color: rgba(0,0,0,1.00);
   /*box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 1);*/
}

.gmenu_wrap_pc ol li.select a{
   color: rgba(255,255,255,1.00) !important;
}


.gmenu_wrap_pc ol li:hover{
   background: linear-gradient(90deg, rgb(255, 69, 38), rgb(255, 8, 43));
}

.gmenu_wrap_pc ol li:hover a{
   color: rgba(255,255,255,1.00);
}



.view {
  opacity: 0;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}
.view.active{
   opacity: 1;
}

.overflow_wrap{
   position: relative;
   overflow: hidden;
}


/* ====================================================================
   ビジュアル
   ==================================================================== */
.wrapper{
   position: relative;
   width: 100%;
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
}

.sns_wrap{
   position: relative;
   z-index: 30;
   width: 90px;
   margin-bottom: 15px;
}

.sns_inner{
   width: 100%;
   margin-top: 80px;
   border-top: rgba(0,0,0,1.00) 1px solid;
   padding-top: 50px;
}

.sns_index{
   width: 36px;
   margin: 0 auto 1.2em auto;
   border: rgba(0,0,0,1.00) 1px solid;
}

.snsfix_top{
  position: -webkit-sticky;
  position: sticky;
  top: 90px;
}

.sns_wrap .site_url{
   position: relative;
   display: grid;
   place-items: center;
   margin-top: 20px;
}

.sns_wrap .site_url .txt_url{
   writing-mode: vertical-rl;
   font-size: 70%;
   font-family: 'Noto Serif JP', serif;
   letter-spacing: 2px;
}

.sns_wrap .site_url .txt_url a{
   text-decoration: none;
   color: rgba(0,0,0,1.00);
}
   
   
   

.visual_wrap{
   position: relative;
   overflow: hidden;
   width: calc(100% - 90px);
   border-right: rgba(0,0,0,1.00) 1px solid;
}

/* ビジュアル */
.visual_wrap .visual_pic{
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   /*filter: blur(19px) brightness(900%) opacity(30%);*/
   transition: filter 1s;
}

.visual_wrap .visual_pic .mask_chara{
   -webkit-mask-image: url("../images/visual/001/visual01_chara_mask.png");
   -webkit-mask-size: contain;
   -webkit-mask-repeat: no-repeat;
   mask-image: url("../images/visual/001/visual01_chara_mask.png");
   mask-size: contain;
   mask-repeat: no-repeat;
}

.visual_wrap .visual_pic.normal{
   /*filter: blur(0) brightness(100%) opacity(100%);*/
   transition: filter 1s;
}

.visual_wrap .visual_pic img{
   width: 100%;
   height: auto;
}

.visual_wrap_m{
   display: none;
}

.visual_wrap_m .oa_ch01m{
   position: absolute;
   width: 75%;
   bottom: 6px;
   left: 0;
   right: 0;
   margin: auto;
}


/* 背景 */

.visual_wrap .visual_bg{
   position: relative;
   width: 100%;
}



/**/
.visual_wrap .visual_bg{
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   filter: blur(10px);
   transition: filter 1s;
   background-image:url("../images/visual/002/v_002.jpg");
   background-size: 100% auto;
}
.visual_wrap .visual_bg.normal{
   filter: blur(0px);
   transition: filter 2s;
}

.visual_wrap .visual_bg.normal img{
   width: 100%;
   height: auto;
}




/* BOOK */
.visual_wrap .visual_book{
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
}

.visual_wrap .visual_book img{
   width: 100%;
   height: auto;
}


.visual_wrap .visual_book .mask_book{
   -webkit-mask-image: url("../images/visual/001/visual01_book_mask.png");
   -webkit-mask-size: contain;
   -webkit-mask-repeat: no-repeat;
   mask-image: url("../images/visual/001/visual01_book_mask.png");
   mask-size: contain;
   mask-repeat: no-repeat;
}


.visual_wrap .visual_book_lay{
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   mix-blend-mode: multiply;
}

.visual_wrap .visual_book_lay img{
   width: 100%;
   height: auto;
}




.top_logo{
   width: 40%;
   position: absolute;
   top: 2%;
   left: 2%;
}

.top_ch01{
   position: absolute;
   top: 9%;
   right: 14%;
   width: 45%;
   font-size: 2.5vw;
   font-weight: 200;
   color: rgba(255,255,255,1.00);
   text-shadow:  0 0 6px #000,0 0 6px #000,0 0 6px #000,0 0 6px #000,0 0 6px #000,0 0 6px #000;
}

.ch_area{
   position: absolute;
   width: 100%;
   top: 0;
   left: 0;
   height: 240px;
   /*background-color: rgba(255,255,255,0.20);
   border-bottom: rgba(0,0,0,1.00) 1px solid;*/
   opacity: 1;
   transition: all 1s;
   /*z-index: 25;*/
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
}
   @media screen and (max-width: 1300px) {
      .ch_area{
         height: 200px;
      } 
   }

   @media screen and (max-width: 1200px) {
      .ch_area{
         height: 140px;
      } 
   }

.ch_innre{
   position: relative;
   width: calc(100% - 90px);
   height: 100%;
   border-right: rgba(0,0,0,1.00) 1px solid;
}
   @media screen and (max-width: 1024px) {
      .ch_innre{
         width: 100%;
      }
   }


.ch_right{
   width: 90px;
}

.ch_main{
   position: absolute;
   width: 12%;
   max-width: 700px;
   top: 0;
   bottom: 0;
   right: 3%;
   margin: auto;
}
   @media screen and (max-width: 1024px) {
      .ch_main{
         right: 0%;
         width: 16%;
      }
   }


.ch_main img{
   position: absolute;
   width: 100%;
   top: 110px;
   /*margin: auto; */  
}
   
.bn_nazo{
   position: absolute;
   width: 14%;
   bottom: 4%;
   right: 3%;
   z-index: 10;
}
   @media screen and (max-width: 1024px) {
      .bn_nazo{
         display: none;
      }
   }

.bn_nazo_m{
   display: none;
}
   @media screen and (max-width: 1024px) {
      .bn_nazo_m{
         display: block;
         position: absolute;
         width: 16%;
         bottom: 4%;
         left: 3%;
      }
   }
   @media screen and (max-width: 600px) {
      .bn_nazo_m{
         display: none;
      }
   }

.bn_nazo_mobile{
   position: relative;
   width: 70%;
   margin:  20px auto 40px auto;
   border: rgba(0,0,0,1.00) 1px solid;
}

/* ====================================================================
   インフォ
   ==================================================================== */
#info{
   z-index: 2;

}

.info_wrap{
   position: absolute;
   bottom: 1%;
   left: 1%;
   width: 98%;
   box-sizing: border-box;
   /*display: flex;
   justify-content: space-between;*/
   height: 25%;
}

.info_i_box{
   width: 18%;
   margin-bottom: 1.5%;
}

.b_info_more{
   position: relative;
   width: 25%;
   margin-left: 75%;
}

.news_section{
   position: relative;
   overflow: hidden;
   /*width: 49%;*/
   width: 60%;
   margin: auto;
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   height: 100%;
}

.news_index{
   width: 100%;
}

.news_wrapper{
   position: relative;
   width: 100%;
   height: 65%;
   border: rgba(255,255,255,1.00) 1px solid;
   padding: 10px;
   box-sizing: border-box;
}

.news_wrap{
   position: relative;
   height: 100%;
   padding: 10px;
   box-sizing: border-box;
   overflow-y: auto;
}
 /* twitter対策追加 */
 @media screen and (max-width: 1200px) {
   .news_wrap{
      /*height: 220px;*/
   }  
 }

.news_inner{
   position: relative;
   /*border: rgba(0,0,0,1.00) 1px solid;
   background-color: rgba(255,255,255,0.40);*/
   width: 100%;

}

.news_list_box{
   position: relative;
   width: 100%;
   display: flex;
   justify-content: flex-start;
   padding: 15px 30px 15px 30px;
   box-sizing: border-box;
   margin: 0 auto 10px auto;
   line-height: 1.4;
   letter-spacing: 2px;
   color: rgba(82,53,13,1.00);
   border: rgba(0,0,0,1.00) 1px solid;
   background-color: rgba(255,255,255,1.00);
}
 @media screen and (max-width: 1200px) {
   .news_list_box{
      padding: 15px 0px 15px 0px;
   }  
 }


.news_list_box .day{
   position: relative;
   width: 114px;
   font-family: 'Noto Serif JP', serif;
   font-size: 14px;
   color: rgba(0,0,0,1.00);
}

.news_list_box .title{
   font-family: 'Noto Serif JP', serif;
   font-size: 14px;
   width: calc(100% - 120px);
   text-decoration: none;
   padding-left: 6px;
}

a .news_list_box{
   color: rgba(0,0,0,1.00);
}

a{
   text-decoration: none;
}


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

.twitter_index{
   width: 100%;
}

.twitter_wrap{
   position: relative;
   width: 100%;
   height: 100%;
   border: rgba(255,255,255,1.00) 1px solid;
   padding: 10px;
   box-sizing: border-box;
   font-weight: 900;
   color: rgba(255,255,255,1.00);
   font-size: 400%;
}

.twitter_inner{
   position: relative;
   overflow: auto;
   width: 100%;
   height: calc(100% - 0px);
   border: rgba(0,0,0,1.00) 1px solid;
   background-color: rgba(255,255,255,1.00);
}

.twitter_buttom{
   position: absolute;
   width: 20%;
   height: 100%;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   margin: auto;
}

.twitter_buttom img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
  margin: auto;
}


/* ====================================================================
   下部統一パーツ
   ==================================================================== */
.under_wrap{
   position: relative;
   overflow: hidden;
}

.index_wrap{
   position: relative;
   width: 100%;
   font-weight: 700;
   font-size: 130%;
   text-align: center;
   padding: 80px 0 100px 0;
   letter-spacing: 2px;
   box-sizing: border-box;
}



/* ====================================================================
   イントロダクション
   ==================================================================== */

.intro_wrap{
   position: relative;
   overflow: hidden;
   width: 100%;
   background-color: rgba(255,255,255,1.00);
   border-bottom: rgba(0,0,0,1.00) 1px solid;
}


.intro_wrap .scrbook_content_01-01{
   position: absolute;
   width: 100%;
   height: 170%;
   top: 0;
   left: 0;
   background-image: url("../images/bg/book_top_under_01-01.png");
   background-position: top center;
   background-size: 100% auto;
   z-index: 0;
}

.intro_wrap .scrbook_content_01-02{
   position: absolute;
   width: 100%;
   height: 170%;
   top: 0;
   left: 0;
   background-image: url("../images/bg/book_top_under_01-02.png");
   background-position: top center;
   background-size: 100% auto;
   z-index: 0;
}

.intro_content{
   position: relative;
   background-color: rgba(255,255,255,0.50);
   overflow: hidden;
   padding-bottom: 100px;
}

.intro_txt_wrap{
   position: relative;
   width: min(95%, 1200px);
   margin: auto;
}

.intro_txt_head{
   font-family: 'Noto Serif JP', serif;
   font-size: 200%;
   text-align: center;
   letter-spacing: 3px;
   margin-bottom: 50px;
}

.intro_txt_head span{
   letter-spacing: 0px;
}

.intro_txt_detail{
   font-weight: 400;
   font-size: 130%;
   text-align: center;
   margin: 0 auto 40px auto;
   line-height: 1.8;
}

.intro_txt_bottom{
   font-weight: 600;
   font-size: 140%;
   text-align: center;
   margin-bottom: 40px;
   color: rgba(239,0,2,1.00);
}

.intro_txt_serifu{
   font-weight: 600;
   font-size: 140%;
   text-align: center;
   margin-bottom: 40px;
   color: rgba(239,0,2,1.00);
   line-height: 1.2;
}

.intro_txt_serifu span{
   background-color: rgba(0,0,0,1.00);
   padding: 0px 10px 2px 10px;
   color: rgba(255,255,255,1.00);
   background: linear-gradient(90deg, rgb(255, 69, 38), rgb(255, 8, 43));
}

.intro_txt_serifu .ruby{
   display: inline-block;
   position: relative;
}

.intro_txt_serifu .ruby .rt{
   position: absolute;
   top: -1.8em;
   left: 0.2em;
   padding: 1px 3px;
   background: linear-gradient(90deg, rgb(255, 69, 38), rgb(255, 8, 43));
   color: rgba(255,255,255,1.00);
   font-size: 50%;
}

.intro_s{
   display: none;
}

/* ====================================================================
   スタッフ
   ==================================================================== */
.staff_wrap{
   position: relative;
   overflow: hidden;
   width: 100%;
   background-color: rgba(255,255,255,1.00);
   background-image: url("../images/bg/bg_03_02.png");
   background-position: center top;
   background-size: 15% auto;
   
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   padding-bottom: 90px;
   border-bottom: rgba(0,0,0,1.00) 1px solid;
}


.index_wrap.staff{
   padding-bottom: 40px;
}

.staff_wrap .scrbook_content_02-01{
   position: absolute;
   width: 100%;
   height: 170%;
   top: 0;
   left: 0;
   background-image: url("../images/bg/book_top_under_02-01.png");
   background-position: top center;
   background-size: 100% auto;
   z-index: 0;
}

.staff_wrap .scrbook_content_02-02{
   position: absolute;
   width: 100%;
   height: 170%;
   top: 0;
   left: 0;
   background-image: url("../images/bg/book_top_under_02-02.png");
   background-position: top center;
   background-size: 100% auto;
   z-index: 0;
}

.staff_inner{
   position: relative;
   z-index: 1;
}





.staff_wrap .left_wrap{
   width: 32%;
   display: flex;
   justify-content: flex-end;

}

.staff_wrap .center_wrap{
   width: 30%;
}

.staff_wrap .right_wrap{
   width: 32%;
   display: flex;
   justify-content: flex-start;
}

.staff_chara_box{
   position: relative;
   overflow: hidden;
   width: 90%;
   border: rgba(0,0,0,1.00) 1px solid;
   margin-top: 80px;
}

.staff_wrap .left_wrap .staff_chara_box{
   background-image: url("../images/top/chara_01.jpg");
   background-position: top center;
   background-repeat: no-repeat;
   background-size: cover;
}

.staff_wrap .right_wrap .staff_chara_box{
   background-image: url("../images/top/chara_02.jpg");
   background-position: top center;
   background-repeat: no-repeat;
   background-size: cover;
}

.staff_chara_box .staff_kabuse{
   position: absolute;
   width: 100%;
   height: 100%;
   background-image: url("../images/bg/bg_04.png");
}



.staff_i01{
   font-size: 130%;
   font-weight: 600;
   letter-spacing: 2px;
   color: rgba(230,0,0,1.00);
   text-align: center;
}

.staff_txt_wrap{
   position: relative;
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
}

.staff_txt_wrap ol{
   position: relative;
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   width: 100%;
   margin-bottom: 60px;
}

.staff_txt_wrap li{
   position: relative;
   width: 100%;
   margin-bottom: 30px;
}

.staff_txt_wrap li .position{
   font-size: 90%;
   font-weight: 600;
   text-align: center;
   letter-spacing: 2px;
   line-height: 1.2;
}

.staff_txt_wrap li .name{
   font-size: 130%;
   font-weight: 700;
   text-align: center;
   letter-spacing: 2px;
}

.staff_txt_wrap li .txt01{
   font-size: 80%;
   font-weight: 600;
   text-align: center;
}

.staff_txt_wrap .corp_txt{
   font-size: 60%;
   padding-left: 10px;
   letter-spacing: 0;
}

.b_comment{
   width: 26%;
   margin: auto;
   text-align: center;
}

.b_comment img{
   cursor: pointer;
}



/* ====================================================================
   原作
   ==================================================================== */
.books_wrap{
   position: relative;
   width: 100%;
   display: flex;
   justify-content: space-between;
   border-bottom: rgba(0,0,0,1.00) 1px solid;
}

.books_wrap .novel_wrap{
   position: relative;
   width: 50%;
   border-right: rgba(0,0,0,1.00) 1px solid;
}

.books_wrap .comics_wrap{
   position: relative;
   width: 50%;
}




.books_wrap .book_header{
   position: relative;
   width: 100%;
}

.books_wrap .novel_wrap .book_header{
   background-image: url("../images/top/i_novels.png");
   background-position: top right;
   background-repeat: no-repeat;
   background-size: 40% auto;
}

.books_wrap .comics_wrap .book_header{
   background-image: url("../images/top/i_comics.png");
   background-position: top right;
   background-repeat: no-repeat;
   background-size: 40% auto;
}




.books_wrap .book_header .i_book{
   position: relative;
   width: 30%;
   padding: 40px 10px;
   text-align: center;
   font-weight: 600;
   border-right: rgba(0,0,0,1.00) 1px solid;
   border-bottom: rgba(0,0,0,1.00) 1px solid;
}


.books_wrap .novel_wrap .txt_inner{
   font-weight: 600;
   line-height: 1.8;
   margin-bottom: 20px;
   text-align: center;
}

.books_wrap .comics_wrap .txt_inner{
   font-weight: 600;
   line-height: 1.8;
   margin-bottom: 20px;
   text-align: center;
}
.books_wrap .txt_inner2{
   font-weight: 600;
   line-height: 1.8;
   margin: 20px auto 20px auto;
   text-align: center;
   font-size: 120%;
}



.books_shoei_wrap{
   position: relative;
   width: 90%;
   margin: 0 auto 20px auto;
   z-index: 10;
}

.books_shoei_wrap ol{
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
}

.books_shoei_wrap li{
   width: 24%;
   margin: 0 0.5% 10px 0.5%;
}

.books_shoei_wrap li img{
   border: rgba(0,0,0,1.00) 1px solid;
}

.books_bg{
   position: absolute;
   width: 100%;
   height: 50%;
   bottom: 0;
   left: 0;
   background-image: url("../images/top/bg_books.png");
   background-position: top center;
   background-size: 100% auto;
   z-index: 5;
}

.books_i_title{
   font-size: 120%;
   margin-bottom: 15px;
}

.books_link{
   position: relative;
   margin: auto;
   text-align: center;
   margin-bottom: 40px;
   z-index: 10;
}

.books_link a{
   font-size: 120%;
   color: rgba(255,255,255,1.00);
   display: inline-block;
   background-color: rgba(230,0,0,1.00);
   padding: 2px 25px;
   border-radius: 30px;
}


/* ====================================================================
   ムービー領域
   ==================================================================== */

.movie_k01{
   position: relative;
   width: 100%;
}

.movie_area{
   position: relative;
   overflow: hidden;
   background-color: rgba(255,255,255,1.00);
   border-bottom: rgba(0,0,0,1.00) 1px solid;
}

.movieWrap {
  position: relative;
  overflow: hidden;
  z-index: 1;
  width: 100%;
  aspect-ratio: 100 / 24.8;
  user-select: none;
  pointer-events: none;
  margin: 0 auto 0 auto;
}
.movieWrap .movie_inner{
   position: relative;
   width: 100vw;
   height: 100%;
   margin: auto;
}

.movieWrap .mov_kabuse{
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background-image: url("../images/top/mov_kabuse.png");
   background-size: cover;
}

.movieWrap .b_play{
   position: absolute;
   width: 150px;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
  margin: auto;}

.movieWrap .left{
   position: absolute;
   width: 0%;
   height: 100%;
   background-color: rgba(233,84,107,1.00);
   top: 0;
   left: 0;
}
.movieWrap .right{
   position: absolute;
   width: 0%;
   height: 100%;
   background-color: rgba(89,118,186,1.00);
   top: 0;
   right: 0;
}

.movieWrap iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 56.25vw;
    min-height: 100%;
    min-width: 100%;
    transform: translate(-50%,-50%);
}
.movieWrap .kabuse{
   position: absolute;
   width: 100%;
   height: 100%;
   background-color: rgba(255,255,255,0.50);
   background-image: url("../images/bg/bg_02.png");
   transition: all 1s; 
}
.movie_area:hover .kabuse{
   background-color: rgba(255,255,255,0.20);
   background-image: none;
   transition: all 1s; 
}


.movieWrap_upper{
   position: relative;
   width: 100%;
   height: 40px;
   background-color: rgba(228,198,145,1.00);
}

.movieWrap_under{
   position: relative;
   width: 100%;
   height: 60px;
   display: flex;
   justify-content: space-between;
}
.movieWrap_under .left{
   width: calc(100% - 80px);
   height: 40px;
   background-color: rgba(228,198,145,1.00);
}
.movieWrap_under .right{
   width: 80px;
}

/* ====================================================================
   メニューエリア（スマホ）
   ==================================================================== */
.bn_wrap{
   display: none;
}

/* ====================================================================
   フッダ
   ==================================================================== */

footer{
   position: relative;
   border-top: rgba(0,0,0,1.00) 1px solid;
   background-image: url("../images/bg/bg_footer.jpg");
   background-position: center top;
   background-repeat: no-repeat;
   background-size: cover;
}

footer .inner{
   background-color: rgba(255,255,255,0.50);
   background-image: url("../images/bg/bg_01.png");
}

footer .logo{
   position: relative;
   width: 180px;
}

footer .copy span{
   border: 1px solid;
   padding: 1px 10px;
   box-sizing: border-box;
   background-color: rgba(255,255,255,1.00);
}

/* 〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
   タブレット版
   〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓 */

@media screen and (max-width: 1024px) {

html,body{
   min-width: 100%;
}

header{
   /*display: none !important;*/
   min-height: 60px;
}

header .wrap{
   min-height: 60px;
}

header .menu{
   display: none !important;
}

header .logo{
   width: 30%;
   margin: 0;
}


header .inner{
   width: calc(100% - 80px);
   height: 80px;
}



/* ====================================================================
   ビジュアル
   ==================================================================== */
.visual_wrap{
   height: auto !important;
   width: 100%;
}   

.visual_wrap .visual_pic{
   display: none;
}

.visual_wrap .visual_bg{
   display: none;
}

.visual_wrap .visual_book{
   display: none;
}

.main_logo{
   width: 22%;
}

.ch_area{
   height: 140px;
}
   @media screen and (max-width: 700px) {
      .ch_area{
         height: 100px; 
      }
   }

.ch_innre{
   border-right: none;
}

.ch_right{
   display: none;
}

.sns_wrap{
   width: 100%;
}

.sns_inner{
   margin-top: 0;
}

.sns_wrap .site_url{
   margin-top: 0;
}

.sns_wrap .site_url .txt_url{
   writing-mode: horizontal-tb;
   font-size: 70%;
   font-family: 'Noto Serif JP', serif;
   letter-spacing: 2px;
}


.twitter_buttom{
   width: 40%;
}

/* ====================================================================
   ムービー領域
   ==================================================================== */

.movieWrap {
  aspect-ratio: 100 / 35;
}


.movieWrap .b_play{
   width: 100px;
}


/* ====================================================================
   インフォメーション
   ==================================================================== */
.info_wrap{
   position: relative;
   flex-wrap: wrap;
}

.info_i_box{
   width: 60%;
   background-color: rgba(0,0,0,1.00);
   padding: 0 10px;
}

.news_section{
   width: 98%;
   margin: 20px auto 30px auto;
}

.news_index{
   width: 30%;
}

.news_wrap{
   width: 100%;
   height: 300px;
}

.news_wrap{
   padding: 10px;
   border: rgba(0,0,0,1.00) 1px solid;
   box-sizing: border-box;
}


.news_inner{
   padding: 10px;
   box-sizing: border-box;
}

.news_list_box{
   border: none;
   border-bottom: rgba(0,0,0,1.00) dotted 1px;
   flex-wrap: wrap;
}

.news_list_box .day{
   width: 100%;
}

.news_list_box .title{
   width: 100%;
}


.twitter_section{
   width: 98%;
   margin: 0 auto 30px auto;
}

.twitter_index{
   width: 30%;
}

.twitter_wrap{
   width: 70%;
   height: 300px;
   border: rgba(0,0,0,1.00) 1px solid;
}

.twitter_inner{
   border: none;
}


/* ====================================================================
   イントロダクション
   ==================================================================== */
.intro_wrap{
   background-position: top left;
   background-size: cover;
}

.intro_content{
   background-color: rgba(255,255,255,0.80);
}

.intro_txt_head{
   font-size: min(3.6vw , 160%);
   margin-bottom: 50px;
}

.intro_txt_detail{
   font-size: min(2.8vw , 120%);
   margin: 0 auto 40px auto;
}

.intro_txt_bottom{
   font-weight: 600;
   font-size: min(3.2vw , 130%);
   margin-bottom: 40px;
}

.intro_txt_serifu{
   font-weight: 600;
   font-size: min(3.0vw , 130%);
   margin-bottom: 40px;
}


.intro_s{
   display: block;
}


/* ====================================================================
   スタッフ
   ==================================================================== */
.staff_wrap{
   background-size: 20% auto;
}

.staff_wrap .scrbook_content01{
   background-size: 150% auto;
   z-index: 0;
}

.staff_wrap .scrbook_content02{
   background-size: 150% auto;
   z-index: 0;
}

/* ====================================================================
   キャラクター
   ==================================================================== */
.staff_wrap .left_wrap{
   width: 20%;
}

.staff_wrap .center_wrap{
   width: 60%;
}

.staff_wrap .right_wrap{
   width: 20%;
}

/* ====================================================================
   コミック
   ==================================================================== */
.comic_wrap{
   background-size: 10% auto;
}

.books_wrap{
   flex-wrap: wrap;
}

.books_wrap .novel_wrap{
   width: 100%;
   border-bottom: rgba(0,0,0,1.00) 1px solid;
}

.books_wrap .comics_wrap{
   width: 100%;
}

.books_wrap .novel_wrap .book_header{
   margin-bottom: 15px;
}

.books_wrap .comics_wrap .book_header{
   margin-bottom: 15px;
}

.books_wrap .book_header .i_book{
   width: 40%;
   padding: 20px 5px;
}

.books_i_title{
   font-size: 120%;
   margin-bottom: 15px;
}


}

/* 〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
   スマホ版
   〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓 */

@media screen and (max-width: 600px) {

.style_tab{
   display: none !important;
}

.style_mobile{
  display: block !important;
}

.style_pc{
  display: none !important;
}

header{
   min-height: 50px;
}

header .wrap{
   min-height: 50px;
}

header .menu{
   display: none !important;
}

header .inner{
   height: 60px;
   width: calc(100% - 60px);
   border-right: none;
}

header.is-head .inner{
   height: 60px;
}

.visual_wrap_m{
   position: relative;
   overflow: hidden;
   display: block;
   width: 100%;
}

.main_logo{
   width: 32%;
   margin: 0;
}

.logo_img{
   margin-left: 5%;
}
.main_logo.is-head{
   width: 90px;
}

.oa_ch01{
   display: none;
}

.bar_section{
   background-size: 6% auto;
}

/* ====================================================================
   ビジュアル
   ==================================================================== */
.visual_wrap{
   width: 100%;
   border-right: none;
}

.sns_wrap{
   width: 100%;
}

.sns_inner{
   margin: 10px auto 10px auto;
}

/* ====================================================================
   ビジュアル領域
   ==================================================================== */
.visual_wrap .visual_pic{
   display: none;
}

.ch_area{
   display: none;
}


/* ====================================================================
   インフォメーション
   ==================================================================== */

.info_wrap{
   position: relative;
   bottom: auto;
   left: auto;
   overflow: hidden;
   width: 100%;
   box-sizing: border-box;
   flex-wrap: wrap;
}

.info_i_box{
   width: 30%;
   background-color: rgba(0,0,0,1.00);
   padding: 0 10px;
}

.news_index{
   width: 100%;
}

.news_wrap{
   width: 100%;
   border: rgba(0,0,0,1.00) 1px solid;
   padding: 10px;
   box-sizing: border-box;
}

.news_inner{
   border: none;
}

.news_list_box{
   border: none;
   border-bottom: rgba(0,0,0,1.00) 1px dotted;
}

.twitter_index{
   width: 100%;
}

.twitter_wrap{
   width: 100%;
}

.twitter_buttom{
   width: 80%;
}

/* ====================================================================
   PV
   ==================================================================== */
.pv_m_wrap{
   position: relative;
   width: 100%;
   margin: 0 auto 20px auto;
}

/* ====================================================================
   イントロダクション
   ==================================================================== */
.intro_txt_head{
   font-size: 5vw;;
   margin-bottom: 50px;
}

.intro_txt_detail{
   font-size: 4vw;
   margin: 0 auto 40px auto;
}

.intro_txt_bottom{
   font-weight: 600;
   font-size: 4vw;
   margin-bottom: 40px;
}

.intro_txt_serifu{
   font-weight: 600;
   font-size: 4vw;
   margin-bottom: 10px;
}

.intro_txt_serifu.bottom{
   margin-bottom: 40px;
}

.intro_txt_serifu .ruby .rt{
   width: 3.5em;
   padding: 0;
}

.intro_s{
   display: none;
}

.b_info_more{
   width: 40%;
   margin-left: 60%;
   margin-bottom: 30px;
}

/* ====================================================================
   キャラクター
   ==================================================================== */
.staff_wrap .left_wrap{
   width: 0%;
}

.staff_wrap .center_wrap{
   width: 100%;
}

.staff_wrap .right_wrap{
   width: 0;
}


/* ====================================================================
   スタッフ
   ==================================================================== */
.staff_wrap{
   background-size: 30% auto;
}

.staff_wrap .scrbook_content01{
   background-size: 160% auto;
   z-index: 0;
}

.staff_wrap .scrbook_content02{
   background-size: 160% auto;
   z-index: 0;
}

.staff_txt_wrap li .position{
   font-size: 3.5vw;
}

.staff_txt_wrap li .name{
   font-size: 5.0vw;
}

.staff_txt_wrap li .txt01{
   font-size: 3vw;
}

.staff_txt_wrap .corp_txt{
   font-size: 3vw;
}


/* ====================================================================
   コミック
   ==================================================================== */
.books_shoei_wrap li{
   width: 32%;
   margin: 0 0.5% 10px 0.5%;
}

/* ====================================================================
   バナーエリア（スマホ）
   ==================================================================== */


}