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

/* ====================================================================
   ヘッダ
   ==================================================================== */
   
header{
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   /*display: none;*/
   z-index: 20;
   transition: all 1s;
}

header.is-head{
   top: 0;
   transition: all 1s;
}

header .wrap{
   background-color: rgba(255,255,255,1.00);
   background-image: url("../images/top/bg_head.png");
   background-position: center top;
   background-repeat: repeat-x;
   background-size: 680px auto;
   transition: all 1s;
   opacity: 1;
}
   @media screen and (max-width: 1024px) {
      header .wrap{
         background-size: 780px auto;
         transition: all 1.0s; 
      } 
   }
   @media screen and (max-width: 480px) {
      header .wrap{
         background-color: rgba(255,255,255,1.00);
         background-size: 680px auto;
         transition: all 1s; 
      } 
  }




header.is-head .wrap{
   background-size: 680px auto;
   opacity: 1;
}
   @media screen and (max-width: 480px) {
      header.is-head .wrap{
         background-size: 680px auto;
      } 
   }

header .inner{
   position: relative;
   display: flex;
   justify-content: space-between;
   width: calc(100% - 100px);
   height: 100px;
   align-items: center;
   z-index: 11;
   transition: all 1s;
}
   @media screen and (max-width: 1024px) {
      header .inner{
         height: 80px;
         width: calc(100% - 10px - 80px);
      } 
   }
   @media screen and (max-width: 480px) {
      header .inner{
         height: 60px;
         width: calc(100% - 10px - 80px);
      } 
   }

header.is-head .inner{
   height: 100px;
}
   @media screen and (max-width: 1024px) {
      header.is-head .inner{
         height: 80px;
      } 
   }
   @media screen and (max-width: 480px) {
      header.is-head .inner{
         height: 60px;
      } 
   }




.border-line{
   width: 100%;
   height: 10px;
   background-image: repeating-linear-gradient( -45deg, transparent, transparent 6px, rgba(255,255,255,1.0) 6px, rgba(255,255,255,1.0) 12px );
}


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: 10px;
   left: 0px;
   width: 30%;
   margin: auto;
   transition: all 1s;
   z-index: 25;
   opacity: 1;
}
   @media screen and (max-width: 1200px) {
      .main_logo{
         width: 270px;
         top: 0;
      } 
   }
   @media screen and (max-width: 1024px) {
      .main_logo{
         width: 260px;
      } 
   }

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

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

.main_logo.is-head{
   top: 0;
   width: 280px;
   transition: all 1s;
   opacity: 1;
}
   @media screen and (max-width: 1200px) {
      .main_logo.is-head{
         width: 270px;
      } 
   }
    @media screen and (max-width: 1024px) {
      .main_logo.is-head{
         top: 10px;
         width: 180px;
      } 
   }
    @media screen and (max-width: 480px) {
      .main_logo.is-head{
         width: 140px;
      } 
   }


   .logo_img{
      margin-left: 0%;
   }



header .menu{
   position: relative;
   margin: 0 0 0 auto;
   width: 68%;
   box-sizing: border-box;
   transform: all 1s;
}
   @media screen and (max-width: 1200px) {
      header .menu{
         width: calc(100% - 300px);
      } 
   }

   @media screen and (max-width: 1024px) {
      header .menu{
         margin: 0 0 0 auto;
      } 
      header .menu ol{
         display: none;
      } 
   }


header.is-head .menu{
   margin: 0 0 0 auto;
}


header .menu.is-head{
   width: calc(100% - 300px);
}
   @media screen and (max-width: 1200px) {
      header .menu.is-head{
         width: calc(100% - 300px);
      } 
   }

.gmenu_wrap_pc{
   position: relative;
   width: 100%;
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-end;
}

.gmenu_wrap_pc ol{
   width: 100%;
   list-style: none;
   display: flex;
   justify-content: flex-end;
   flex-wrap: wrap;
   gap: 0 30px;
}
   @media screen and (max-width: 1200px) {
      .gmenu_wrap_pc ol{
         gap: 0 20px;
      } 
   }


.gmenu_wrap_pc ol li{
   font-family: "Sawarabi Mincho", serif;
   position: relative;
   line-height: 1.6;
   font-size: 100%;
   /*
   background-image: url("../images/tmp/kazari/k_menu_off.png");
   background-position: left center;
   background-repeat: no-repeat;
   background-size: 30px auto;
   padding-left: 35px;
   */
   transform: rotate(0.05deg);
}

   @media screen and (max-width: 1400px) {
      .gmenu_wrap_pc ol li{
         font-size: 95%;
      } 
   }
   @media screen and (max-width: 1400px) {
      .gmenu_wrap_pc ol li{
         background-image: none;
         padding-left: 0;
      } 
   }


.gmenu_wrap_pc ol li span{
}

.gmenu_wrap_pc ol li a{
   color: rgba(149,111,100,1.00);
   text-decoration: none;
   padding: 0;
   font-weight: 900;
   letter-spacing: 2px;
   display: block;
}
   @media screen and (max-width: 1400px) {
      .gmenu_wrap_pc ol li a{
         letter-spacing: 0px;
      } 
   }



.gmenu_wrap_pc ol li.select
/*
  background-image: url("../images/tmp/kazari/k_menu_on.png");
  */
}
   @media screen and (max-width: 1400px) {
      .gmenu_wrap_pc ol li.select{
         background-image: none;
      } 
   }


.gmenu_wrap_pc ol li.select a{
   color: var(--main-point-color);
}



.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;
}


.ch_oa{
   position: absolute;
   bottom: -70px;
   right: 0;
   width: 500px;
   transition: all 0.5s;
   opacity: 1;
}
   @media screen and (max-width: 1200px) {
      .ch_oa{
         width: 350px;
         bottom: -50px;
      } 
   }
   @media screen and (max-width: 1024px) {
      .ch_oa{
         position: relative;
         width: 350px;
         bottom: auto;
      } 
   }
   @media screen and (max-width: 600px) {
      .ch_oa{
         display: none;
      } 
   }


header.is-head .ch_oa{
   width: 350px;
   bottom: -50px;
   opacity: 0;
}
   @media screen and (max-width: 1200px) {
      header.is-head .ch_oa{
      } 
   }
   @media screen and (max-width: 1024px) {
      header.is-head .ch_oa{
         opacity: 1;
         bottom: 0;
      } 
   }

.top_left_inner{
   position: relative;
   width: 100%;
   padding-bottom: 60px;
}


.top_menu_wrap{
   position: relative;
   width: 90%;
   margin: 0 0 50px 0;
}

.top_menu_wrap li{
   position: relative;
   width: 100%;
   background-image: url("../images/top/menu/k_002.png");
   background-position: bottom left;
   background-repeat: no-repeat;
   background-size: 100% auto;
   padding-bottom: 2%;
   margin-bottom: 3%;
}

.top_menu_wrap li .menu_name{
   position: relative;
   width: 95%;
}

.top_menu_wrap .menu_k01{
   position: absolute;
   width: 120%;
   top: 20%;
   left: 0;
}

.top_menu_wrap li img{
   width: 100%;
   height: auto;
}

.top_menu_wrap li img.type2 {
   opacity: 0;
	position: absolute;
   top: 0;
   left: 0;
   width: 100%;
	-webkit-transition: .4s ease-in-out;
	transition: .4s ease-in-out;
}
.top_menu_wrap li:hover img.type2 {
	opacity: 1;
}



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

.movie_m{
   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 / 30.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-color: rgba(236,221,186,0.50);
   transition: all 1s;
}

.movieWrap .kabuse{
   position: absolute;
   width: 100%;
   height: 100%;
   background-image: url("../images/bg/bg_004.png");
   background-size: 30% auto;
   opacity: 0.5;
   transition: all 1s;
}
.movie_area:hover .kabuse{
   opacity: 0;
   transition: all 1s;
}

.movie_area:hover .mov_kabuse{
   background-color: rgba(236,221,186,0.10);
   transition: all 1s;
}



.b_play{
   position: absolute;
   width: 350px;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
  margin: auto;
   transition: all 1s;
}
   @media screen and (max-width: 1024px) {
      .b_play{
         width: 30%;
      } 
   }


.b_play_hover{
   position: absolute;
   width: 350px;
   top: 50%;
   left: 50%;
   transform: translateY(-50%) translateX(-50%);
   -webkit- transform: translateY(-50%) translateX(-50%);
   margin: auto;
   opacity: 0;
   transition: all 1s;
}
   @media screen and (max-width: 1024px) {
      .b_play_hover{
         width: 30%;
      } 
   }


.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_upper{
   position: relative;
   width: 100%;
   height: 40px;
   background-color: rgba(228,198,145,1.00);
}


.pv_m{
   position: relative;
   width: 100%;
   margin-bottom: 30px;
   border-bottom: rgba(126,76,67,1.00) 2px solid;
}

/* ====================================================================
   ビジュアル_セクション
   ==================================================================== */
.top_wrap{
   position: relative;
   width: 100%;
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
}

.visual_menu{
   position: relative;
   width: 23%;
   background-image: url("../images/tmp/bg/bg_003.jpg");
   background-repeat: no-repeat;
   background-size: auto 100%;
   background-attachment: fixed;
}
   @media screen and (max-width: 600px) {
      .visual_menu{
         display: none;
      } 
   }




.visual_menu_logo{
   position: relative;
   width: 95%;
   margin: 20px auto 20px auto;
}

.visual_wrap{
   position: relative;
   width: 100%;
   margin-top: 100px;
}
   @media screen and (max-width: 1024px) {
      .visual_wrap{
         
      } 
   }
   @media screen and (max-width: 600px) {
      .visual_wrap{
         width: 100%;
         overflow-x: auto;
         
      } 
   }
   @media screen and (max-width: 480px) {
      .visual_wrap{
         margin-top: 70px;
      } 
   }


.visual_wrap .v_pc{
   display: block;
}
   @media screen and (max-width: 600px) {
      .visual_wrap .v_pc{
         display: none;
      } 
   }

.visual_wrap .v_mobile{
   display: none;
}
   @media screen and (max-width: 600px) {
      .visual_wrap .v_mobile{
         display: block;
         width: 180%;
      } 
   }


.v_mobile.scl_right{
   width: 180%;
   position: absolute;
   left: 0;
   transition: left 2s ease-in-out; /* 2秒かけてアニメーションさせる */
}


.visual_upper {
  position: absolute;
  width: 100%;
  left: 0;
  background-color: rgba(0,0,0,0.00);
  z-index: 200;
}









.ch_main{
   position: relative;
   width: 70%;
   margin-left: 30%;
   margin-bottom: 40px;
}
   @media screen and (max-width: 1100px) {
      .ch_main{
         margin-bottom: 15px;
      } 
   }
   @media screen and (max-width: 700px) {
      .ch_main{
         top: 4%;
         
      } 
   }
   @media screen and (max-width: 600px) {
      .ch_main{
         top: auto;
         left: auto;
         bottom: 10px;
         right: 0;
         width: 80%;
         margin-bottom: 0;
         margin-left: 20%;
      } 
   }

.top_logo_m{
   display: none;
}
   @media screen and (max-width: 600px) {
      .top_logo_m{
         display: block;
         position: absolute;
         top: 30px;
         right: 8px;
         width: 57%;
      }

   }


.ch_oa_m{
   display: none;
}
   @media screen and (max-width: 600px) {
      .ch_oa_m{
         display: block;
         position: relative;
         width: 100%;
         background-color: rgba(255,255,255,1.00);
         background-image: url("../images/tmp/bg/bg_menu.png");
         background-position: top -50px center;
         background-repeat: repeat-x;
         background-size: 500px auto;
         padding: 10px 20px;
         box-sizing: border-box;
      } 
   }


.ch_oa01_wrap{
   position: fixed;
   display: block;
   width: 46%;
   bottom: 20px;
   right: 0;
   z-index: 10;
}
   @media screen and (max-width: 600px) {
      .ch_oa01_wrap{
         position: absolute;
         width: 80%;
         bottom: 0;
      }
   }



.ch_oa01_wrap .oa3{
      display: block;
}
   @media screen and (max-width: 600px) {
      .ch_oa01_wrap .oa3{
         display: none;
      }
   }



.top_oa_ch02{
   position: fixed;
   top: 0;
   right: 0;
   width: 40%;
   opacity: 1;
   transition: opacity 0.3s ease-in-out;
}
   @media screen and (max-width: 1024px) {
      .top_oa_ch02{
         display: none;
      } 
   }  

.top_oa_ch02.hidden {
    opacity: 1;
    pointer-events: none;
}
   @media screen and (max-width: 1024px) {
      .top_oa_ch02.hidden{
         opacity: 1;
      } 
   }  



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

#top{
   position: relative;
}


/* ====================================================================
   セクションタイトル
   ==================================================================== */

.sec_title{
   position: relative;
   width: 70%;
   margin: 0 0 0 0;
}
   @media screen and (max-width: 600px) {
      .sec_title{
         width: 95%;
         margin-left: 2%;
      } 
   }
   @media screen and (max-width: 480px) {
      .sec_title{
         width: 98%;
         margin-left: 2%;
      } 
   }



/* ====================================================================
   インフォ_セクション
   ==================================================================== */
.info_wrap{
   position: relative;
   width: 100%;
   background-color: rgba(193,87,87,1.00);
}

.info_content_wrap{
   position: relative;
   width: min(90% , 1400px);
   margin: auto;
   padding: 60px 0;
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
}
   @media screen and (max-width: 1024px) {
      .info_content_wrap{
         width: 95%;
      } 
   }
   @media screen and (max-width: 800px) {
      .info_content_wrap{
         padding: 30px 0;
         width: 95%;
      } 
   }

.info_content_wrap .news_wrap{
   position: relative;
   width: 70%;
}
   @media screen and (max-width: 1024px) {
      .info_content_wrap .news_wrap{
         width: 100%;
      } 
   }


.info_i_news{
   position: relative;
   width: 160px;
   margin: 0 0 40px 0;
}

.news_box{
   padding-left: 50px;
   box-sizing: border-box;
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap
}
   @media screen and (max-width: 1024px) {
      .news_box{
         padding-left: 0px;
      } 
   }
   @media screen and (max-width: 480px) {
      .news_box{
         height: 400px;
         overflow: auto;
         margin-bottom: 40px;
      } 
   }


.news_box article{
   width: 48%;
   background-image: url("../images/top/k_news.png");
   background-position: bottom center;
   background-repeat: no-repeat;
   background-size: 100% auto;
   padding: 0 25px 1.3em 25px;
   margin-bottom: 50px;
   display: flex;
   justify-content: space-between;
}
   @media screen and (max-width: 1024px) {
      .news_box article{
         width: 48%;
         background-image: url("../images/top/k_news_1024.png");
      } 
   }
   @media screen and (max-width: 600px) {
      .news_box article{
         width: 100%;
         margin-bottom: 20px;
      } 
   }


.news_box .title_link{
   display: block;
   width: 100%;
}

.news_list_box{
   font-family: "Sawarabi Mincho", serif;
}

.news_list_box .day{
   color: rgba(255,255,255,1.00);
   transform: rotate(0.05deg);
}

.news_list_box .title{
   color: rgba(255,255,255,1.00);
   transform: rotate(0.05deg);
}

.news_b_all_wrap{
   width: 100%;
   padding-left: 50px;
   box-sizing: border-box;
}
   @media screen and (max-width: 1024px) {
      .news_b_all_wrap{
         padding-left: 0;
         margin-bottom: 50px;
      } 
   }


.news_b_all{
   width: 30%;
   margin: auto;
}
   @media screen and (max-width: 600px) {
      .news_b_all{
         width: 60%;
      } 
   }




.info_content_wrap .twitter_wrap{
   position: relative;
   width: 30%;
   display: flex;
   align-items: center;
   justify-content: center;
}
   @media screen and (max-width: 1024px) {
      .info_content_wrap .twitter_wrap{
         width: 100%;
      } 
   }


.info_b_twitter{
   position: relative;
   width: 70%;
   margin-top: 50px;
}
   @media screen and (max-width: 1024px) {
      .info_b_twitter{
         display: none;
      } 
   }

.info_b_twitter_m{
   display: none;
}
   @media screen and (max-width: 1024px) {
      .info_b_twitter_m{
         display: block;
         margin: auto;
         width: 40%;
      } 
   }
   @media screen and (max-width: 600px) {
      .info_b_twitter_m{
         width: 80%;
      } 
   }


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

.movie_m{
   position: relative;
   width: 100%;
   display: none;
}
   @media screen and (max-width: 600px) {
      .movie_m{
         display: block;
      } 
   }


.movie_area{
   position: relative;
   overflow: hidden;
   background-color: rgba(255,255,255,1.00);
   border-top: rgba(0,0,0,1.00) 1px solid;
   border-bottom: rgba(0,0,0,1.00) 1px solid;
}
   @media screen and (max-width: 600px) {
      .movie_area{
         display: none;
      } 
   }


.movieWrap {
  position: relative;
  overflow: hidden;
  z-index: 1;
  width: 100%;
  aspect-ratio: 100 / 30.8;
  user-select: none;
  pointer-events: none;
  margin: 0 auto 0 auto;
}
   @media screen and (max-width: 1024px) {
      .movieWrap{
         aspect-ratio: 16 / 6;
      } 
   }


.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/tmp/bg_04.png");
}


.b_play{
   position: absolute;
   width: 150px;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
  margin: auto;
   transition: all 1s;
}
   @media screen and (max-width: 1024px) {
      .b_play{
         width: 80px;
      } 
   }

.b_play_hover{
   position: absolute;
   width: 150px;
   top: 50%;
   left: 50%;
   transform: translateY(-50%) translateX(-50%);
   -webkit- transform: translateY(-50%) translateX(-50%);
   margin: auto;
   opacity: 0;
   transition: all 1s;
}
   @media screen and (max-width: 1024px) {
      .b_play_hover{
         width: 80px;
      } 
   }


.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);
   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);
}


/* ====================================================================
   イントロ_セクション
   ==================================================================== */
.intro_wrap{
   position: relative;
   overflow: hidden;
   width: 100%;
   background-color: rgba(255,255,255,1.00);
   background-image: url("../images/bg/bg_003.jpg");
   background-size: cover;
   border-bottom: rgba(126,76,67,1.00) 1px solid;
   padding-bottom: 80px;
   
   height: 1000px;
}

   @media screen and (max-width: 1000px) {
      .intro_wrap{
         font-size: 80%;
      } 
   }
   @media screen and (max-width: 800px) {
      .intro_wrap{
         font-size: 2vw;
         background-size: cover;
      } 
   }
   @media screen and (max-width: 480px) {
      .intro_wrap{
         font-size: 3vw;
         background-size: cover;
      } 
   }




/* ====================================================================
   スタッフ_セクション
   ==================================================================== */
.staff_wrap{
   position: relative;
   overflow: hidden;
   width: 100%;
   background-color: rgba(255,255,255,1.00);
   background-image: url("../images/tmp/bg/bg_moyou3.png"), url("../images/tmp/bg/bg_001.jpg");
   background-size: 30% auto, cover;
   background-position: top left, bottom right;
   background-repeat: no-repeat;
}

.staff_content_wrap{
   position: relative;
   width: min(90% , 1400px);
   margin: auto;
   margin-bottom: 80px;
   padding: 60px 0;
}
   @media screen and (max-width: 1024px) {
      .staff_content_wrap{
         width: 95%;
      } 
   }
   @media screen and (max-width: 800px) {
      .staff_content_wrap{
         padding: 30px 0;
         width: 100%;
      } 
   }
   @media screen and (max-width: 480px) {
      .staff_content_wrap{
         margin-bottom: 0px;
      } 
   }

.i_staff{
   position: relative;
   width: 300px;
   margin: 80px auto 40px auto;
}
   @media screen and (max-width: 480px) {
      .i_staff{
         margin: 40px auto 40px auto;
      } 
   }


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

.staff_flex .sf_staff{
   width: 50%;
}

   @media screen and (max-width: 800px) {
      .staff_flex .sf_staff{
         width: 100%;
      } 
   }


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

.staff_box{
   text-align: center;
   width: 100%;
   color: var(--main-point-color);
   margin-bottom: 40px;
   font-family: 'Noto Serif JP', serif;
   line-height: 1.4;
}

.staff_box .posi{
   font-size: 110%;
   transform: rotate(0.05deg);
}

.staff_box .name{
   position: relative;
   font-size: 160%;
   letter-spacing: 2px;
   transform: rotate(0.05deg);
   font-weight: 700;
}

.staff_box .name span{
   position: relative;
   display: inline-block;
}

.staff_box .cap01{
   font-size: 110%;
   transform: rotate(0.05deg);
}

.staff_box .cap02{
   font-size: 95%;
   transform: rotate(0.05deg);
}

.staff_box .b_comment{
   position: absolute;
   width: 80px;
   top: 7px;
   right: -90px;
   display: grid;
   place-content: center;
   cursor: pointer;
}
   @media screen and (max-width: 480px) {
      .staff_box .b_comment{
         position: relative;
         width: 80px;
         top: auto;
         right: auto;
         display: block;
         margin: 10px auto 0 auto;
      } 
   }


/* ====================================================================
   GSAP_セクション
   ==================================================================== */
.g_visu_wrap{
   position: relative;
   overflow: hidden;
   width: 100%;
   height: 450px;
}
   @media screen and (max-width: 1024px) {
      .g_visu_wrap{
         height: 350px;
      } 
   }
   @media screen and (max-width: 800px) {
      .g_visu_wrap{
         height: 250px;
      } 
   }
   @media screen and (max-width: 600px) {
      .g_visu_wrap{
         height: 200px;
      } 
   }
   @media screen and (max-width: 480px) {
      .g_visu_wrap{
         height: 150px;
      } 
   }


.g_visu{
   position: absolute;
   top: 0;
   left: 0;
}

.g_visu img{
   width: 100%;
   height: auto;
}



/* ====================================================================
   原作_セクション
   ==================================================================== */
.books_wrap{
   position: relative;
   overflow: hidden;
   width: 100%;
   background-color: rgba(255,255,255,1.00);
   background-image: url("../images/tmp/bg/bg_moyou3.png"), url("../images/tmp/bg/bg_002.jpg");
   background-size: 30% auto, 100% auto;
   background-position: top left, top center;
   background-repeat: no-repeat, repeat;
   padding-bottom: 60px;
}
   @media screen and (max-width: 1200px) {
      .books_wrap{
         background-size: 1.5% auto, contain;
      } 
   }
   @media screen and (max-width: 800px) {
      .books_wrap{
         background-size: 2.0% auto, contain;
      } 
   }
   @media screen and (max-width: 480px) {
      .books_wrap{
         background-size: 3.0% auto, contain;
      } 
   }


.books_content_wrap{
   position: relative;
   width: min(90% , 1400px);
   margin: auto;
   padding: 60px 0;
}
   @media screen and (max-width: 800px) {
      .books_content_wrap{
         padding: 30px 0;
         width: 100%;
      } 
   }

.books_inner{
   position: relative;
   width: min(90% , 1100px);
   margin: 50px auto 0 auto;
}

.books_box{
   position: relative;
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
}
   @media screen and (max-width: 600px) {
      .books_box{
         display: block;
      } 
   }


.books_box .left_wrap{
   width: 10%;
}
   @media screen and (max-width: 800px) {
      .books_box .left_wrap{
         width: 60%;
      } 
   }
   @media screen and (max-width: 600px) {
      .books_box .left_wrap{
         width: 80%;
      } 
   }

.bk_i{
   display: block;
}
   @media screen and (max-width: 800px) {
      .bk_i{
         display: none;
      } 
   }


.bk_i_m{
   display: none;
}
   @media screen and (max-width: 800px) {
      .bk_i_m{
         display: block;
      } 
   }

.books_box .right_wrap{
   width: 88%;
}
   @media screen and (max-width: 800px) {
      .books_box .right_wrap{
         width: 100%;
      } 
   }



.books_title_wrap{
   width: 100%;
   margin-bottom: 15px;
   font-family: YakuHanMP, 'Noto Serif JP', serif;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
}

.books_title_wrap .title{
   font-size: 180%;
   display: inline-block;
   font-weight: 900;
   margin-right: 20px;
}
   @media screen and (max-width: 600px) {
      .books_title_wrap .title{
         font-size: 5vw;
         order: 0;
      } 
   }


.books_title_wrap .create{
   font-size: 110%;
   display: inline-block;
   margin-bottom: 20px;
}
   @media screen and (max-width: 600px) {
      .books_title_wrap .create{
         width: 100%;
         display: block;
         order: 3;
         font-size: 4vw;
         margin-bottom: 10px;
      } 
   }


.books_title_wrap .label{
   width: 100%;
   font-size: 120%;
   font-weight: 600;
   margin-left: 0.2em;
   margin-bottom: 10px;
}
   @media screen and (max-width: 600px) {
      .books_title_wrap .label{
         width: 100%;
         display: block;
         order: 2;
         margin-bottom: 10px;
         font-size: 3.5vw;
      } 
   }




.books_shoei_wrap{
   position: relative;
   width: 100%;
   gap: 20px 2%;
   display: flex;
   flex-wrap: wrap;
}

.books_shoei_box{
   width: 23%;
}
   @media screen and (max-width: 600px) {
      .books_shoei_box{
         width: 48%;
      } 
   }


.books_kugiri{
   position: relative;
   width: 100%;
   padding: 60px 0;
   box-sizing: border-box;
}
   @media screen and (max-width: 800px) {
      .books_kugiri{
         padding: 40px 0;
      } 
   }

.books_pr{
   width: 60%;
   margin: 5px auto 0 auto;
}

.books_link_wrap{
   position: relative;
   width: 100%;
   display: flex;
   margin: 60px auto 0 auto;
   flex-wrap: wrap;
   justify-content: center;
}
   @media screen and (max-width: 1024px) {
      .books_link_wrap{
         display: block;
      } 
   }


.books_link_wrap .box01{
   width: 32%;
}
   @media screen and (max-width: 1024px) {
      .books_link_wrap .box01{
         width: 100%;
         margin: 0 auto 20px auto;
      } 
   }


.books_b01{
   position: relative;
   width: 90%;
   margin: auto;
}
   @media screen and (max-width: 1024px) {
      .books_b01{
         width: 350px;
      } 
   }
   @media screen and (max-width: 480px) {
      .books_b01{
         width: 80%;
      } 
   }


.books_b02{
   position: relative;
   width: 350px;
}

.books_link_title{
   position: relative;
   text-align: center;
  display: grid;
  justify-items: center;
  align-items: center;
}

.books_link_title div{
   position: relative;
   display: inline-block;
   margin: auto;
   font-family: YakuHanMP, 'Noto Serif JP', serif;
   font-size: 100%;
   font-weight: 600;
   padding-left: 1.5em;
   padding-right: 1.5em;
}
   @media screen and (max-width: 480px) {
      .books_link_title div{
         line-height: 1.4;
         margin-bottom: 10px;
      } 
   }


.books_link_title div::before{
   content: "";
   position: absolute;
   left: 0;
   top: 0.17em;
   font-size: 120%;
   background-image: url("../images/tmp/kazari/k_007.png");
   background-repeat: no-repeat;
   width: 1.2em;
   height: 1em;
   background-size: contain;
   vertical-align: middle;
}
   @media screen and (max-width: 480px) {
      .books_link_title div::before{
         display: none;;
      } 
   }


.books_link_title div::after{
   content: "";
   position: absolute;
   right: 0;
   top: 0.17em;
   font-size: 120%;
   background-image: url("../images/tmp/kazari/k_007.png");
   background-repeat: no-repeat;
   width: 1.2em;
   height: 1em;
   background-size: contain;
   vertical-align: middle;
}
   @media screen and (max-width: 480px) {
      .books_link_title div::after{
         display: none;;
      } 
   }