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


/* ====================================================================
   ヘッダ
   ==================================================================== */
header{
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   background-color: rgba(0,0,0,1.00);
   background-image: url("../images/bg/bg_002.jpg");
   background-position: top center;
   background-size: 100% auto;
   opacity: 0;
   transition: all 1s;
   margin-top: -100px;
   z-index: 230;
   border-bottom: rgba(104,192,217,1.00) 4px solid;
}

/* ヘッダ背景 */
header.is-head{
   opacity: 1;
   transition: all 1s;
   z-index: 230;
   margin-top: 0;
}


/* ヘッダインナー */
header .inner{
   position: relative;
   display: flex;
   justify-content: space-between;
   width: calc(100% - 150px);
   height: 100px;
   align-items: center;
   z-index: 240;
   transition: all 1s;
}
   @media screen and (max-width: 1200px) {
      header .inner{
        height: 80px;
        width: calc(100% - 10px - 90px);
      } 
   }
   @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 .logo{
   position: absolute;
   top: 7px;
   left: 2%;
   width: 170px;
   margin: auto;
   opacity: 0;
   transition: all 1s;
   z-index: 250;
}
   @media screen and (max-width: 1200px) {
      header .logo{
         width: 130px;
         left: 1%;
         top: 7px;
      } 
   }
   @media screen and (max-width: 1024px) {
      header .logo{
         width: 130px;
      } 
   }
   @media screen and (max-width: 600px) {
      header .logo{
     } 
   }
   @media screen and (max-width: 480px) {
      header .logo{
         width: 96px;
      } 
   }


header.is-head .logo{
   opacity: 1;
   transition: all 1s;
}
   @media screen and (max-width: 1200px) {
      header.is-head .logo{
         width: 130px;
      } 
   }
   @media screen and (max-width: 1024px) {
      header.is-head .logo{
         width: 130px;
         left: 1%;
      } 
   }
   @media screen and (max-width: 600px) {
      header.is-head .logo{
          left: 1%;
      } 
   }
   @media screen and (max-width: 480px) {
      header.is-head .logo{
          width: 96px;
      } 
   }



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


header .menu{
   position: relative;
   margin: 0 0 0 auto;
   width: calc(100% - 35%);
   box-sizing: border-box;
}
   @media screen and (max-width: 1200px) {
      header .menu{
         width: calc(100% - 39%);
      } 
   }
   @media screen and (max-width: 1024px) {
      header .menu{
         display: none;
      } 
   }




.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) {
      header .menu.is-head{
         gap: 0 10px;
      } 
   }


.gmenu_wrap_pc ol li{
   position: relative;
   line-height: 1.6;
   font-size: 110%;
   padding-left: 1.2em;
}
   @media screen and (max-width: 1200px) {
      .gmenu_wrap_pc ol li{
         font-size: 90%;
      } 
   }


.gmenu_wrap_pc ol li a{
   border-bottom: rgba(255,255,255,0.00) 1px solid;
}

.gmenu_wrap_pc ol li.select a{
   color: rgba(49,196,181,1.00);
}




.gmenu_wrap_pc ol li a{
  color: rgba(0,0,0,1.00);
   text-decoration: none;
   padding: 0;
   font-weight: 600;
   letter-spacing: 2px;
   display: block;
   transition: all 1s;
}
   @media screen and (max-width: 1200px) {
      .gmenu_wrap_pc ol li a{
         letter-spacing: 0px;
      } 
   }


.is-head .gmenu_wrap_pc ol li a{
   transition: all 1s;
}

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



/* ====================================================================
   フッター追加要素
   ==================================================================== */

footer .k_foot_bg{
   position: absolute;
   width: 40%;
   bottom: 0;
   left: 10%;
}
   @media screen and (max-width: 1024px) {
      footer .k_foot_bg{
         width: 70%;
         left: 20%;
      } 
   }
   @media screen and (max-width: 600px) {
      footer .k_foot_bg{
         width: 95%;
         left: 5%;
      } 
   }

/* ====================================================================
   トップセクション
   ==================================================================== */

.top_wrap{
   position: relative;
   width: 100%;
   background: linear-gradient(180deg, rgb(255, 212, 219), rgb(255, 178, 187));
}

.top_inner{
   position: relative;
   width: 100%;
   background-image: url("../images/top/bg_k_visual.png");
   background-size: 200px auto;
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
}

.top_left_wrap{
   position: relative;
   width: 28%;
}
   @media screen and (max-width: 1024px) {
      .top_left_wrap{
         position: absolute;
         width: 40%;
      } 
   }
   @media screen and (max-width: 800px) {
      .top_left_wrap{
         position: absolute;
         top: 0;
         left: 0;
      } 
   }


.top_left_inner{
   position: relative;
   width: 100%;
   margin-bottom: 100px;
   z-index: 10;
}
.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 15px;
}

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


.visual_wrap{
   position: relative;
   width: 100%;
   padding: 30px 30px 30px 0;
   box-sizing: border-box;
}
   @media screen and (max-width: 1024px) {
      .visual_wrap{
         padding: 30px 30px 30px 30px;
      } 
   }
   @media screen and (max-width: 600px) {
      .visual_wrap{
         padding: 0;
      } 
   }


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

.top_menu_wrap{
   position: relative;
}

.top_logo{
   position: relative;
   width: 105%;
}
   @media screen and (max-width: 1024px) {
      .top_logo{
         margin-top: 5px;
      } 
   }



.top_main_ch{
   position: absolute;
   width: 10%;
   top: 14%;
   left: 2.5%;
}
   @media screen and (max-width: 1024px) {
      .top_main_ch{
         top: 18%;
         left: 50px;
      } 
   }
   @media screen and (max-width: 600px) {
      .top_main_ch{
         width: 12%;
         left: 1.0%;
      } 
   }




.top_oa_ch01{
   position: relative;
   width: 100%;
   margin: 0 auto 20px auto;
}


.top_oa_ch01m{
   display: none;
}
   @media screen and (max-width: 1024px) {
      .top_oa_ch01m{
         display: block;
         position: absolute;
         width: 50%;
         bottom: 40px;
         right: 40px;
      } 
   }
   @media screen and (max-width: 600px) {
      .top_oa_ch01m{
         bottom: 10px;
         right: 10px;
         width: 60%;
      } 
   }


.top_menu_inner{
   position: relative;
   padding: 5% 10px 0 20px;
   font-size: 200%;
}

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

.top_menu .menu_bg{
   position: relative;
   width: 100%;
}

.top_menu .menu_bg .menu{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   /*background-color: rgba(0,0,0,0.30);*/
}

.top_menu .menu_bg .menu ol{
   position: relative;
   width: 100%;
   padding: 20% 15%;
   /*background-color: rgba(233,95,98,0.30);*/
}

.top_menu .menu_bg .menu ol li{
   position: relative;
   width: 100%;
   padding: 3% 0;
   border-bottom: rgba(199,199,199,1.00) 1px solid;
}

.top_menu .menu_bg .menu ol li img{
   transition: all 0.5s;
}

.top_menu .menu_bg .menu ol li img:hover{
   transform: scale(1.03);
   transition: transform 0.5s;
}

.dmy_01{
   position: relative;
   width: 100%;
   height: 800px;
}

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

.section_index_wrap{
   position: relative;
   width: min(40% , 450px);
   margin: 30px auto 40px auto;
}
   @media screen and (max-width: 800px) {
      .section_index_wrap{
         width: 60%;
         margin: 30px auto 20px auto;
      } 
   }


/* ====================================================================
   インフォ
   ==================================================================== */

.info_section{
   position: relative;
   overflow: hidden;
   width: 100%;
   background-image: url("../images/tmp/bg_001.jpg");
   border-top: rgba(196,147,77,1.00) 1px solid;
   border-bottom: rgba(196,147,77,1.00) 1px solid;
}

.info_inner{
   position: relative;
   width: min(95% , 1200px);
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   margin: auto;
   align-items: center;
   margin-bottom: 50px;
}
   @media screen and (max-width: 800px) {
      .info_inner {
         margin-bottom: 20px;
      } 
   }


.info_inner .news_wrap{
   position: relative;
   width: 80%;
}
   @media screen and (max-width: 800px) {
      .info_inner .news_wrap{
         width: 100%;
         margin-bottom: 30px;
      } 
   }

.info_inner .news_wrap .news_waku{
   position: relative;
   width: 100%;
}

.info_inner .news_wrap .news_waku .w_pc{
   display: block;
}
   @media screen and (max-width: 800px) {
      .info_inner .news_wrap .news_waku .w_pc{
         display: none;
      } 
   }

.info_inner .news_wrap .news_waku .w_mobile{
   display: none;
}
   @media screen and (max-width: 800px) {
      .info_inner .news_wrap .news_waku .w_mobile{
         display: block;
      } 
   }

.info_inner .news_wrap .news_waku .news_inner{
   position: absolute;
   top: 10%;
   left: 0;
   right: 0;
   margin: auto;
   height: 70%;
   width: 85%;
   /*background-color: rgba(0,0,0,0.10);*/
}

.news_box_wrap{
   position: relative;
   width: 100%;
   height: 100%;
   overflow-y: auto;
}

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

.b_allnews{
   width: 98%;
   padding-left: 80%;
   padding-top: 10px;
}
   @media screen and (max-width: 1024px) {
      .b_allnews{
         padding-left: 75%;
         padding-top: 10px;
      } 
   }
   @media screen and (max-width: 800px) {
      .b_allnews{
         padding-left: 70%;
         padding-top: 20px;
      } 
   }
   @media screen and (max-width: 600px) {
      .b_allnews{
         padding-left: 65%;
         padding-top: 20px;
      } 
   }



.info_inner .twitter_wrap{
   position: relative;
   width: 17%;
   margin-bottom: 10%;
}
   @media screen and (max-width: 800px) {
      .info_inner .twitter_wrap{
         width: 100%;
      } 
   }


.info_inner .twitter_wrap .btn_twitter{
   position: relative;
   width: 100%;
}
   @media screen and (max-width: 800px) {
      .info_inner .twitter_wrap .btn_twitter{
         width: 40%;
         margin: auto;
      } 
   }


.news_box article{
   background-image: url("../images/tmp/border_k01.png");
   background-position: bottom center;
   background-repeat: no-repeat;
   background-size: 100% auto;
   padding-bottom: 20px;
   padding-top: 10px;
}

.news_box .day{
   position: relative;
   width: 100%;
}
.news_box .day span{
   color: rgba(255,255,255,1.00);
   background-image: url("../images/top/bg_news_day.png");
   background-repeat: no-repeat;
   background-position: center;
   background-size: 100% auto;
   padding: 2px 25px;
   font-family: 'Noto Serif JP', serif;
   font-weight: 600;
   letter-spacing: 2px;
   font-size: 90%;
}

.news_box a .title{
   font-family: "Kiwi Maru", serif;
   color: rgba(0,0,0,1.00);
   font-weight: 500;
   font-size: 105%;
}

/* ====================================================================
   イントロ
   ==================================================================== */

.intro_section{
   position: relative;
   overflow: hidden;
   width: 100%;
   background-image: url("../images/top/bg_intro.jpg");
   border-bottom: rgba(196,147,77,1.00) 1px solid;
   background-position: top center;
   background-size: cover;
}

.intro_inner{
   position: relative;
   width: min(95% , 1000px);
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   margin: auto;
   align-items: center;
   margin-bottom: 50px;
   box-shadow: 0px 0px 7px rgba(107,45,0,.3),
            -0px -0px 7px rgba(107,45,0,.3);
}

.intro_cont{
   position: relative;
   width: 100%;
   background-color: rgba(255,255,248,1.00);
   box-shadow: inset 45px 45px 65px rgba(247,222,178,.5),
            inset -45px -45px 65px rgba(247,222,178,.5);
}

.intro_txt_wrap{
   position: relative;
   width: 100%;
   padding: 50px;
   text-align: center;
}
   @media screen and (max-width: 600px) {
      .intro_txt_wrap{
         padding: 50px 20px;
      } 
   }


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


.intro_t_01{
   font-family: "Kaisei Decol", serif;
   color: rgba(249,128,134,1.00);
   font-size: 140%;
}
   @media screen and (max-width: 800px) {
      .intro_t_01{
         font-size: 2.3vw;
      } 
   }
   @media screen and (max-width: 600px) {
      .intro_t_01{
         font-size: 4.0vw;
      } 
   }


.intro_t_02{
   font-family: 'Zen Maru Gothic', serif;
   color: rgba(108,44,47,1.00);
   font-size: 120%;
   font-weight: 500;
   margin-bottom: 30px;
}
   @media screen and (max-width: 800px) {
      .intro_t_02{
         font-size: 2.0vw;
      }
   }
   @media screen and (max-width: 600px) {
      .intro_t_02{
         font-size: 3.8vw;
      } 
   }

   
.intro_t_03{
   font-family: "Zen Old Mincho", serif;
   color: rgba(23,82,136,1.00);
   font-size: 140%;
   font-weight: 600;
   margin-bottom: 30px;
}
   @media screen and (max-width: 800px) {
      .intro_t_03{
         font-size: 2.3vw;
      } 
   }
   @media screen and (max-width: 600px) {
      .intro_t_03{
         font-size: 4.0vw;
      } 
   }



.intro_k_top{
   position: relative;
   width: 250px;
   margin: 0 auto 10px auto;
}

.intro_k_bottom{
   position: relative;
   width: 250px;
   margin: 10px auto 30px auto;
}


.intro_k02_top_left{
   position: absolute;
   width: 80px;
   top: 20px;
   left: 20px;
}
   @media screen and (max-width: 1024px) {
      .intro_k02_top_left{
         width: 60px;
         top: 15px;
         left: 15px;
      } 
   }
   @media screen and (max-width: 600px) {
      .intro_k02_top_left{
         width: 12%;
         top: 10px;
         left: 10px;
      } 
   }


.intro_k02_top_right{
   position: absolute;
   width: 80px;
   top: 20px;
   right: 20px;
}
   @media screen and (max-width: 1024px) {
      .intro_k02_top_right{
         width: 60px;
         top: 15px;
         right: 15px;
      } 
   }
   @media screen and (max-width: 600px) {
      .intro_k02_top_right{
         width: 12%;
         top: 10px;
         right: 10px;
      } 
   }


.intro_k02_bottom_left{
   position: absolute;
   width: 80px;
   bottom: 20px;
   left: 20px;
}
   @media screen and (max-width: 1024px) {
      .intro_k02_bottom_left{
         width: 60px;
         bottom: 15px;
         left: 15px;
      } 
   }
   @media screen and (max-width: 600px) {
      .intro_k02_bottom_left{
         width: 12%;
         bottom: 10px;
         left: 10px;
      } 
   }

.intro_k02_bottom_right{
   position: absolute;
   width: 80px;
   bottom: 20px;
   right: 20px;
}
   @media screen and (max-width: 1024px) {
      .intro_k02_bottom_right{
         width: 60px;
         bottom: 15px;
         right: 15px;
      } 
   }
   @media screen and (max-width: 600px) {
      .intro_k02_bottom_right{
         width: 12%;
         bottom: 10px;
         right: 10px;
      } 
   }

/* ====================================================================
   スタッフ＆キャスト
   ==================================================================== */
.staff_section{
   position: relative;
   overflow: hidden;
   width: 100%;
   background-color: rgba(255,255,255,1.00);
   background-image: url("../images/tmp/k_03.png");
   border-bottom: rgba(196,147,77,1.00) 1px solid;
   background-position: top center;
   background-size: 200px;;
}

.cast_wrap{
   margin-bottom: 80px;
}

.staff_wrap{
   margin-bottom: 100px;
}

.staff_flex{
   position: relative;
   width: min(98% , 1100px);
   margin: auto;
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
}

.staff_flex .left_wrap{
   position: relative;
   width: 50%;
}
   @media screen and (max-width: 1024px) {
      .staff_flex .left_wrap{
         width: 100%;
      } 
   }

.staff_flex .right_wrap{
   position: relative;
   width: 50%;
}
   @media screen and (max-width: 1024px) {
      .staff_flex .right_wrap{
         width: 100%;
      } 
   }

.i_staff{
   font-family: 'Noto Serif JP', serif;
   font-size: 180%;
   font-weight: 600;
   text-align: center;
   color: rgba(108,44,47,1.00);
   margin-bottom: 40px;
}

.staff_box{
   text-align: center;
   line-height: 1.2;
   margin-bottom: 20px;
}
.staff_box.cast{
   margin-bottom: 30px;
}

.staff_box .posi{
   font-family: 'Zen Maru Gothic', serif;
   font-size: 120%;
   font-weight: 500;
   color: rgba(108,44,47,1.00);
}

.staff_box .name{
   font-family: 'Zen Maru Gothic', serif;
   font-size: 180%;
   font-weight: 600;
   letter-spacing: 2px;
   color: rgba(108,44,47,1.00);
}

.staff_box .name.staff{
   font-size: 150%;
}

.staff_box .name.staff2{
   font-size: 130%;
   letter-spacing: 0;
}

.staff_box .corp{
   font-family: 'Zen Maru Gothic', serif;
   font-size: 100%;
   font-weight: 600;
   letter-spacing: 2px;
   color: rgba(108,44,47,1.00);
}

.staff_box .b_comment{
   position: relative;
   margin: 5px auto auto auto;
   width: 120px;
   cursor: pointer;
}

/* ====================================================================
   原作紹介
   ==================================================================== */
.books_section{
   position: relative;
   overflow: hidden;
   width: 100%;
   background-color: rgba(252,215,218,1.00);
   background-image: url("../images/tmp/bg_k_001.png");
   background-position: top center;
   background-size: 140px;
}

.books_wrap{
   position: relative;
   overflow: hidden;
   width: 100%;
}

.books_wrap.end{
   margin-bottom: 40px;
}

.books_inner{
   position: relative;
   width: min(95% , 1000px);
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   margin: auto;
   align-items: center;
   margin-bottom: 50px;
   box-shadow: 0px 0px 7px rgba(107,45,0,.3),
            -0px -0px 7px rgba(107,45,0,.3);
}

.books_cont{
   position: relative;
   width: 100%;
   padding: 10px;
   background-color: rgba(255,255,248,1.00);
   box-shadow: inset 25px 25px 35px rgba(247,222,178,.5),
            inset -25px -25px 35px rgba(247,222,178,.5);
}

.books_waku{
   position: relative;
   width: 100%;
   border: rgba(247,168,164,1.00) 2px solid;
}




.books_k03_top_left{
   position: absolute;
   width: 80px;
   top: 20px;
   left: 20px;
}
   @media screen and (max-width: 1024px) {
      .books_k03_top_left{
         width: 60px;
         top: 15px;
         left: 15px;
      } 
   }
   @media screen and (max-width: 600px) {
      .books_k03_top_left{
         width: 12%;
         top: 10px;
         left: 10px;
      } 
   }


.books_k03_top_right{
   position: absolute;
   width: 80px;
   top: 20px;
   right: 20px;
}
   @media screen and (max-width: 1024px) {
      .books_k03_top_right{
         width: 60px;
         top: 15px;
         right: 15px;
      } 
   }
   @media screen and (max-width: 600px) {
      .books_k03_top_right{
         width: 12%;
         top: 10px;
         right: 10px;
      } 
   }


.books_k03_bottom_left{
   position: absolute;
   width: 80px;
   bottom: 20px;
   left: 20px;
}
   @media screen and (max-width: 1024px) {
      .books_k03_bottom_left{
         width: 60px;
         bottom: 15px;
         left: 15px;
      } 
   }
   @media screen and (max-width: 600px) {
      .books_k03_bottom_left{
         width: 12%;
         bottom: 10px;
         left: 10px;
      } 
   }

.books_k03_bottom_right{
   position: absolute;
   width: 80px;
   bottom: 20px;
   right: 20px;
}
   @media screen and (max-width: 1024px) {
      .books_k03_bottom_right{
         width: 60px;
         bottom: 15px;
         right: 15px;
      } 
   }
   @media screen and (max-width: 600px) {
      .books_k03_bottom_right{
         width: 12%;
         bottom: 10px;
         right: 10px;
      } 
   }


.books_index{
   position: relative;
   width: 320px;
   margin: 30px auto 10px auto;
}
   @media screen and (max-width: 600px) {
      .books_index{
         width: 70%;
      } 
   }


.books_info{
   font-family: 'Zen Maru Gothic', serif;
   font-size: 110%;
   font-weight: 600;
   text-align: center;
}
   @media screen and (max-width: 600px) {
      .books_info{
         font-size: 3.8vw;
      } 
   }

.books_info2{
   font-family: "Kaisei Decol", serif;
   font-size: 140%;
   font-weight: 600;
   text-align: center;
   color: rgba(128,59,45,1.00);
   margin-bottom: 20px;
}
   @media screen and (max-width: 600px) {
      .books_info2{
         font-size: 4.2vw;
      } 
   }


.books_shoei_wrap{
   position: relative;
   width: 70%;
   margin: auto;
   display: flex;
   flex-wrap: wrap;
   gap: 15px 1%;
   margin-bottom: 50px;
}
   @media screen and (max-width: 1024px) {
      .books_shoei_wrap{
         width: 80%;
      } 
   }


.books_shoei_wrap li{
   width: 19%;
   border: rgba(200,200,200,1.00) 1px solid;
}
   @media screen and (max-width: 800px) {
      .books_shoei_wrap li{
         width: 24%;
      } 
   }
   @media screen and (max-width: 600px) {
      .books_shoei_wrap li{
         width: 32.5%;
      } 
   }


/* ====================================================================
   トップページ用フッダー
   ==================================================================== */
.top_foot{
   position: relative;
   width: 100%;
   background-image: url("../images/top/bg_footer.png");
   background-repeat: repeat-x;
   background-size: 400px auto;
   background-position: bottom center;
}
   @media screen and (max-width: 1200px) {
      .top_foot{
         background-size: 250px auto;
      } 
   }
   @media screen and (max-width: 1024px) {
      .top_foot{
         background-size: 220px auto;
      } 
   }

.top_foot .i_share{
   position: relative;
   width: 120px;
   margin: auto;
   margin-bottom: 10px;
}

.copy_page{
   position: relative;
   padding: 10px 0 50px 0;
   text-align: center;
   color: rgba(127,76,66,1.00);
   font-size: 90%;
}

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

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


.movie_area{
   position: relative;
   background-color: rgba(255,255,255,1.00);
   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;
}
.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/bg_04.png");
}

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

.movie_area:hover .mov_kabuse{
   transition: all 1s;
}



.b_play{
   position: absolute;
   width: 160px;
  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: 120px;
      } 
   }
   @media screen and (max-width: 800px) {
      .b_play{
         width: 10%;
      } 
   }


.b_play_hover{
   position: absolute;
   width: 160px;
   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: 120px;
      } 
   }
   @media screen and (max-width: 1024px) {
      .b_play_hover{
         width: 10%;
      } 
   }


.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{
   display: none;
   position: relative;
   width: 100%;
}
   @media screen and (max-width: 600px) {
      .pv_m{
         display: block;
         width: 100%;
      } 
   }



/* 追加 */