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

/* ====================================================================
   全体統一
   ==================================================================== */

#info,#intro,#staff {
   font-size: 100%;
}
   @media screen and (max-width: 1200px) {
      #info,#intro,#staff{
         font-size: 90%;
      } 
   }




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

.bg_base{
   background-image: url("../images/bg/bg_001.jpg");
   background-repeat: repeat;
   background-position: top center;
   background-size: 100% auto;
}

.top_wrap{
   position: relative;
   width: 100%;
   background-image: url("../images/top/k_visual01.png");
   background-position: top left;
   background-repeat: no-repeat;
   background-size: 13% auto;
}

.visual_wrap{
   position: relative;
   width: 90%;
   max-width: 1600px;
   margin: auto;
   margin-bottom: 80px;
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   align-items: flex-start;
}
   @media screen and (max-width: 1024px) {
      .visual_wrap{
         width: 100%;
         margin-bottom: 0;
      } 
   }


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


.visual_pic_wrap .visual{
   position: relative;
}


.visual_pc_mask{
   -webkit-mask-image: url("../images/top/visual/v001_mask.png");
   -webkit-mask-size: contain;
   -webkit-mask-repeat: no-repeat;
   mask-image: url("../images/top/visual/v001_mask.png");
   mask-size: contain;
   mask-repeat: no-repeat;
}
   @media screen and (max-width: 1024px) {
      .visual_pc_mask{
         mask-image:none;
      } 
   }

.visual_logo{
   position: absolute;
   width: 65%;
   top: 25px;
   right: 4.5%;
}
   @media screen and (max-width: 1200px) {
      .visual_logo{
         right: 6.5%;
      } 
   }
   @media screen and (max-width: 1024px) {
      .visual_logo{
         width: 80%;
         top: 15px;
         right: auto;
         left: 20px;
      } 
   }
   @media screen and (max-width: 650px) {
      .visual_logo{
         width: 75%;
      } 
   }
   @media screen and (max-width: 400px) {
      .visual_logo{
         width: 70%;
      } 
   }


.visual_right_wrap{
   position: relative;
   width: 30%;
   padding-top: 24%;
}
   @media screen and (max-width: 1024px) {
      .visual_right_wrap{
         display: none;
      } 
   }


.ch_wrap{
   position: relative;
   width: 60%;
   margin-left: 30%;
}

.ch_wrap_m{
   display: none;
}

   @media screen and (max-width: 1024px) {
      .ch_wrap_m{
         display: block;
         position: absolute;
         width: 35%;
         bottom: -12%;
         left: 10px;
      } 
   }


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

.i_movie_m{
}
   @media screen and (max-width: 1024px) {
      .i_movie_m{
         display: block;
         position: relative;
         width: 18%;
         margin: 10px 0 10px 68%;
      } 
   }

.i_movie_pc{
   position: relative;
   width: 25%;
   margin: 0 0 8px 0;
}

.k_movie_m{
   position: absolute;
   width: 15%;
   top: -22%;
   right: 0;
}




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




/* ====================================================================
   セクション共通
   ==================================================================== */

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

.section_title{
   position: relative;
   width: 100%;
   text-align: center;
   font-size: 340%;
   font-weight: 800;
   font-family: 'M PLUS Rounded 1c', sans-serif;
   line-height: 1.2;
}
   @media screen and (max-width: 600px) {
      .section_title{
         font-size: 6.8vw;
      } 
   }


.section_title_jp{
   position: relative;
   width: 100%;
   text-align: center;
   font-size: 120%;
   font-weight: 700;
   font-family: 'M PLUS Rounded 1c', sans-serif;
   letter-spacing: 5px;
   line-height: 1.2;
   transform: rotate(0.03deg);
}
   @media screen and (max-width: 600px) {
      .section_title_jp{
         font-size: 2.5vw;
      } 
   }


/* ====================================================================
   インフォセクション
   ==================================================================== */

.info_wrap{
   position: relative;
   border: rgba(0,0,0,1.00) 4px solid;
   border-radius: 40px;
   padding: 10px;
   width: 90%;
   max-width: 1600px;
   margin: auto;
   background-color: rgba(255,255,255,1.00);
   margin-bottom: 80px;
}
   @media screen and (max-width: 1024px) {
      .info_wrap{
         padding: 10px;
         width: 95%;
      } 
   }
   @media screen and (max-width: 600px) {
      .info_wrap{
         border-radius: 20px;
         padding: 6px;
         width: 95%;
      } 
   }

.info_waku{
   position: relative;
   background-image: url("../images/tmp/k_pink.png"),url("../images/bg/bg_maru_01.png");
   background-position: top left,top center;
   background-size: 100px,300px;
   background-repeat: no-repeat,repeat;
   border-radius: 30px;
}
   @media screen and (max-width: 1024px) {
      .info_waku{
         background-size: 80px,300px;
      } 
   }
   @media screen and (max-width: 600px) {
      .info_waku{
         background-size: 60px,300px;
         border-radius: 16px;
      } 
   }


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


.news_list_box{
   position: relative;
   width: 100%;
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   align-items: center;
   transform: translateY(30px);
   margin-top: 40px;
}
   @media screen and (max-width: 1024px) {
      .news_list_box{
         width: 95%;
         margin: auto;
         margin-top: 40px;
      } 
   }


.news_list_box.active{
   transform: translateY(0);
   }




.news_list_box article{
   border: rgba(0,0,0,1.00) 2px solid;
   border-radius: 100px;
   width: 48%;
   margin-bottom: 40px;
   transition: all .5s ease-in-out;
   box-shadow: 5px 5px rgba(255,213,240,1.00);
}
   @media screen and (max-width: 1024px) {
      .news_list_box article{
         width: 100%;
         margin-bottom: 20px;
      } 
   }


.news_list_box article:hover{
   transform: scale(1.05);
   transition: all .5s ease-in-out;
}

.news_box{
   position: relative;
   width: 100%;
   display: flex;
   justify-content: space-between;
   font-family: 'M PLUS Rounded 1c', sans-serif;
   transform: rotate(0.03deg);
}

.news_box .news_left{
   position: relative;
   width: 100px;
   background-color: rgba(255,45,180,1.00);
   border-top-left-radius: 100px;
   border-bottom-left-radius: 100px;
   padding: 20px 0 20px 0;
   text-align: center;
   display: flex;
   flex-wrap: wrap;
   align-content: center;
}
   @media screen and (max-width: 600px) {
      .news_box .news_left{
         width: 70px;
      } 
   }


.news_box .news_right{
   position: relative;
   width: calc(100% - 100px);
   padding: 20px;
   background-color: rgba(255,255,255,1.00);
   border-top-right-radius: 100px;
   border-bottom-right-radius: 100px;
}
   @media screen and (max-width: 600px) {
      .news_box .news_right{
         width: calc(100% - 70px);
      } 
   }




a .news_box .day{
   width: 100%;
   color: rgba(255,255,255,1.00);
   font-weight: 600;
   display: grid;
   place-content: center;
   font-size: 90%;
   transform: rotate(0.03deg);
   text-align: center;
   line-height: 1;
}


a .news_box .day2{
   width: 100%;
   color: rgba(255,255,255,1.00);
   font-weight: 600;
   font-size: 260%;
   display: grid;
   place-content: center;
   transform: rotate(0.03deg);
   text-align: center;
   line-height: 1;
}
   @media screen and (max-width: 600px) {
      a .news_box .day2{
        font-size: 6vw;
      } 
   }


a .news_box .title{
   color: rgba(0,0,0,1.00);
   transform: rotate(0.03deg);
}


.b_all_news{
   width: 250px;
   margin: auto;
}
   @media screen and (max-width: 600px) {
      .b_all_news{
        width: 50%;
      } 
   }


.b_all_news:hover{
	animation: heartBeat 1s;
    animation-iteration-count: 1;
	-webkit-animation: heartBeat 1s;
	-webkit-animation-iteration-count: 1;
}




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

.intro_wrap{
   position: relative;
   border: rgba(0,0,0,1.00) 4px solid;
   border-radius: 40px;
   background-color: rgba(255,255,255,1.00);
   padding: 10px;
   width: 90%;
   max-width: 1600px;
   margin: auto;
   margin-bottom: 80px;
}
   @media screen and (max-width: 1024px) {
      .intro_wrap{
         width: 95%;
      } 
   }
   @media screen and (max-width: 600px) {
      .intro_wrap{
         border-radius: 20px;
         padding: 5px;
      } 
   }


.intro_waku{
   position: relative;
   background-color: rgba(195,239,253,1.00);
   background-image: url("../images/tmp/k_blue.png"),url("../images/bg/bg_maru_02.png");
   background-position: top left,top center;
   background-size: 100px,300px;
   background-repeat: no-repeat,repeat;
   border-radius: 30px;
}
   @media screen and (max-width: 1024px) {
      .intro_waku{
         background-size: 80px,300px;
      } 
   }
   @media screen and (max-width: 600px) {
      .intro_waku{
         background-size: 60px,300px;
         border-radius: 16px;
      } 
   }



.intro_inner{
   position: relative;
   width: 100%;
   padding: 80px;
}
   @media screen and (max-width: 1200px) {
      .intro_inner{
         padding: 40px;
      } 
   }
   @media screen and (max-width: 800px) {
      .intro_inner{
         padding: 20px;
      } 
   }
   @media screen and (max-width: 600px) {
      .intro_inner{
         padding: 10px;
         border-radius: 18px;
      } 
   }


.intro_content{
   position: relative;
   width: 100%;
   background-color: rgba(255,255,255,0.60);
   border-radius: 30px;
   padding: 40px;
}
   @media screen and (max-width: 800px) {
      .intro_content{
         padding: 20px;
         border-radius: 20px;
         background-image: url("../images/tmp/k_blue.png");
         background-position: top left;
         background-repeat: no-repeat;
         background-size: 40px auto;
      } 
   }
   @media screen and (max-width: 1024px) {
      .intro_content{
         padding: 30px 10px 20px 10px;
      } 
   }
   @media screen and (max-width: 600px) {
      .intro_content{
         padding: 30px 10px;
         border-radius: 15px;
      } 
   }


.intro_k01{
   position: relative;
   width: 180px;
   margin: 30px auto 70px auto;
}
   @media screen and (max-width: 600px) {
      .intro_k01{
         width: 100px;
         margin: 20px auto 40px auto;
      } 
   }




.intro_txt{
   position: relative;
   width: 100%;
   text-align: center;
   font-size: 100%;
   line-height: 1.6;
   font-family: 'M PLUS Rounded 1c', sans-serif;
   font-weight: 800;
   letter-spacing: 1px;
   transform: translateY(30px) rotate(0.03deg);
}
.intro_txt.active{
   transform: translateY(0) rotate(0.03deg);
}

   @media screen and (max-width: 1100px) {
      .intro_txt{
         font-size: 80%;
      } 
   }
   @media screen and (max-width: 600px) {
      .intro_txt{
         letter-spacing: 0;
      } 
   }



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

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


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




.intro_txt .bppl{
   color: rgba(200,130,255,1.00);
}
.intro_txt .bppl2{
   color: rgba(204,102,255,1.00);
}
.intro_txt .bblu{
   color: rgba(0,181,238,1.00);
}
   @media screen and (max-width: 900px) {
      .intro_txt .bblu{
         color: rgba(204,102,255,1.00);
      } 
   }


.intro_txt .bigt01{
   font-size: 130%;
}
.intro_txt .bigt02{
   font-size: 120%;
}
   @media screen and (max-width: 900px) {
      .intro_txt .bigt02.kigyou{
         color: rgba(0,181,238,1.00);
      } 
   }


.intro_txt .bigt03{
   font-size: 128%;
}

.intro_txt .chousei01{
   padding: 0 3px;
}


.intro_txt .t01{
   font-size: 140%;
   margin-bottom: 40px;
}
   @media screen and (max-width: 600px) {
      .intro_txt .t01{
         font-size: 3.5vw;
         margin-bottom: 30px;
      } 
   }


.intro_txt .t02{
   font-size: 140%;   
   margin-bottom: 40px;
}
   @media screen and (max-width: 600px) {
      .intro_txt .t02{
         font-size: 3.5vw;
         margin-bottom: 30px;
      } 
   }


.intro_txt .t03{
   font-size: 140%;   
   margin-bottom: 40px;
}
   @media screen and (max-width: 600px) {
      .intro_txt .t03{
         font-size: 3.5vw;
         margin-bottom: 30px;
      } 
   }


.intro_txt .t04{
   font-size: 140%;   
   margin-bottom: 40px;
}
   @media screen and (max-width: 600px) {
      .intro_txt .t04{
         font-size: 3.5vw;
         margin-bottom: 30px;
      } 
   }


.intro_txt .t05{
   font-size: 160%;   
   margin-bottom: 40px;
}
   @media screen and (max-width: 600px) {
      .intro_txt .t05{
         font-size: 4.0vw;
         margin-bottom: 30px;
      } 
   }


.intro_txt .t06{
   font-size: 140%;   
}
   @media screen and (max-width: 600px) {
      .intro_txt .t06{
         font-size: 3.5vw;
         margin-bottom: 30px;
      } 
   }


.intro_txt .t07{
   font-size: 170%;   
   margin-bottom: 70px;
}
   @media screen and (max-width: 600px) {
      .intro_txt .t07{
         font-size: 4.2vw;
         margin-bottom: 30px;
      } 
   }



.intro_txt .t11{
   font-size: 150%;   
   margin-bottom: 15px;
   letter-spacing: 2px;
}
   @media screen and (max-width: 900px) {
      .intro_txt .t11{
         font-size: 170%;
         margin-bottom: 60px;
      } 
   }
   @media screen and (max-width: 600px) {
      .intro_txt .t11{
         font-size: 4.0vw;
         margin-bottom: 30px;
      } 
   }


.intro_txt .t11 span{
   background-color: rgba(0,0,0,1.00);
   padding: 2px 40px 2px 40px;
   color: rgba(255,255,255,1.00);
}
   @media screen and (max-width: 900px) {
      .intro_txt .t11 span{
         background-color:transparent;
         padding: 0;
         color: rgba(0,0,0,1.00);
      } 
   }


.intro_txt .t12{
   font-size: 180%;   
   margin-bottom: 10px;
}
   @media screen and (max-width: 600px) {
      .intro_txt .t12{
         font-size: 4.4vw;
         margin-bottom: 30px;
      } 
   }


.intro_txt .t12 span{
   background-color: rgba(0,0,0,1.00);
   padding: 2px 30px 2px 30px;
   color: rgba(255,255,255,1.00);
}
   @media screen and (max-width: 800px) {
      .intro_txt .t12 span{
         padding: 2px 0;
      } 
   }






/* 対象になる t01〜t07 を一括指定 */
.intro_txt .t01,
.intro_txt .t02,
.intro_txt .t03,
.intro_txt .t04,
.intro_txt .t05,
.intro_txt .t06,
.intro_txt .t07,
.intro_txt .t11,
.intro_txt .t12 {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease-out, transform .6s ease-out;
}

/* .show が付与されたらフェードイン＆スライドアップ */
.intro_txt .t01.show,
.intro_txt .t02.show,
.intro_txt .t03.show,
.intro_txt .t04.show,
.intro_txt .t05.show,
.intro_txt .t06.show,
.intro_txt .t07.show,
.intro_txt .t11.show,
.intro_txt .t12.show {
  opacity: 1;
  transform: translateY(0);
}


/* ====================================================================
   スタッフセクション
   ==================================================================== */

.staff_wrap{
   position: relative;
   border: rgba(0,0,0,1.00) 4px solid;
   border-radius: 40px;
   background-color: rgba(255,255,255,1.00);
   padding: 10px;
   width: 90%;
   max-width: 1600px;
   margin: auto;
   margin-bottom: 80px;
}
   @media screen and (max-width: 1024px) {
      .staff_wrap{
         width: 95%;
      } 
   }
   @media screen and (max-width: 600px) {
      .staff_wrap{
         border-radius: 20px;
         padding: 5px;
      } 
   }


.staff_waku{
   position: relative;
   background-color: rgba(255,225,175,1.00);
   background-image: url("../images/tmp/k_orange.png"),url("../images/bg/bg_maru_03.png");
   background-position: top left,top center;
   background-size: 100px,300px;
   background-repeat: no-repeat,repeat;
   border-radius: 30px;
}
   @media screen and (max-width: 1024px) {
      .staff_waku{
         background-size: 80px,300px;
      } 
   }
   @media screen and (max-width: 600px) {
      .staff_waku{
         background-size: 60px,300px;
         border-radius: 16px;
      } 
   }


.staff_inner{
   position: relative;
   width: 100%;
   padding: 80px 40px 40px 40px;
}
   @media screen and (max-width: 1024px) {
      .staff_inner{
         padding: 30px 20px 20px 30px;
      } 
   }





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



.staff_list_box{
   transform: translateY(30px);
}
.staff_list_box.active{
   transform: translateY(0);
   }


.staff_txt_box{
   position: relative;
   width: 100%;
   text-align: center;
}


.staff_box{
   position: relative;
   overflow: hidden;
   text-align: center;
   margin-bottom: 30px;
}

.staff_box .position{
   letter-spacing: 3px;
   font-size: 150%;
   font-weight: 800;
   font-family: 'M PLUS Rounded 1c', sans-serif;
   transform: rotate(0.03deg);
}
   @media screen and (max-width: 600px) {
      .staff_box .position{
         font-size: 4.8vw;
      } 
   }


.staff_box .name{
   font-size: 200%;
   font-weight: 800;
   letter-spacing: 15px;
   font-family: 'M PLUS Rounded 1c', sans-serif;
   transform: rotate(0.03deg);
}
   @media screen and (max-width: 600px) {
      .staff_box .name{
         font-size: 6.0vw;
      } 
   }

.staff_box .name span{
   background-color: rgba(0,0,0,1.00);
   color: rgba(255,255,255,1.00);
   padding: 2px 35px 2px 45px;
}

.staff_box .name span.name5{
   background-color: rgba(0,0,0,1.00);
   color: rgba(255,255,255,1.00);
   padding: 2px 11px 2px 22px;
}

.staff_box .t01{
   font-size: 80%;
   letter-spacing: 1px;
   color: rgba(0,0,0,1.00);
   margin-bottom: 20px;
}

.b_comment{
   position: relative;
   width: 150px;
   margin: 10px auto 0 auto;
   cursor: pointer;
}
   @media screen and (max-width: 600px) {
      .b_comment{
         width: 130px;
      } 
   }

/* ====================================================================
   原作情報
   ==================================================================== */

.books_wrap{
   position: relative;
   border: rgba(0,0,0,1.00) 4px solid;
   border-radius: 40px;
   background-color: rgba(255,255,255,1.00);
   padding: 10px;
   width: 90%;
   max-width: 1600px;
   margin: auto;
   margin-bottom: 80px;
}
   @media screen and (max-width: 1024px) {
      .books_wrap{
         width: 95%;
      } 
   }
   @media screen and (max-width: 600px) {
      .books_wrap{
         border-radius: 20px;
         padding: 5px;
      } 
   }


.books_waku{
   position: relative;
   background-color: rgba(215,242,177,1.00);
   background-image: url("../images/tmp/k_green.png"),url("../images/bg/bg_maru_02.png");
   background-position: top left,top center;
   background-size: 100px,300px;
   background-repeat: no-repeat,repeat;
   border-radius: 30px;
}
   @media screen and (max-width: 1024px) {
      .books_waku{
         background-size: 80px,300px;
      } 
   }
   @media screen and (max-width: 600px) {
      .books_waku{
         background-size: 60px,300px;
         border-radius: 16px;
      } 
   }


.books_inner{
   position: relative;
   width: 100%;
   border-radius: 40px;
   padding: 80px 40px 40px 40px;
}
   @media screen and (max-width: 1024px) {
      .books_inner{
         padding-top: 30px;
      } 
   }
   @media screen and (max-width: 600px) {
      .books_inner{
         padding: 30px 10px 10px 10px;
      } 
   }


.books_content{
   position: relative;
   width: min(90% , 1000px);
   margin: auto;
   margin-bottom: 40px;
   font-size: 100%;
   transition: all .6s ease-out;
}
   @media screen and (max-width: 600px) {
      .books_content{
         width: 100%;
      } 
   }


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


.books_txt{
   font-size: 100%;
}
   @media screen and (max-width: 1200px) {
      .books_txt{
         font-size: 80%;
      } 
   }
   @media screen and (max-width: 1024px) {
      .books_txt{
         font-size: 65%;
      } 
   }
   @media screen and (max-width: 700px) {
      .books_txt{
         font-size: 50%;
      } 
   }


.books_title{
   font-family: 'M PLUS Rounded 1c', sans-serif;
   transform: rotate(0.03deg);
   font-size: 360%;
   font-weight: 800;
   text-align: center;

}


.books_credit_wrap{
   position: relative;
   width: 100%;
   text-align: center;
   margin-bottom: 20px;
}
.books_credit_wrap span{
   background-color: rgba(0,0,0,1.00);
   color: rgba(255,255,255,1.00);
   font-family: 'M PLUS Rounded 1c', sans-serif;
   transform: rotate(0.03deg);
   font-size: 260%;
   font-weight: 700;
   padding: 2px 40px 2px 50px;
   letter-spacing: 1px;
   transition: all .6s ease-out;
}
   @media screen and (max-width: 600px) {
      .books_credit_wrap span{
         font-size: 4vw;
      } 
   }



.books_credit_wrap span i.saku{
   color: rgba(127,190,39,1.00);
   font-size: 90%;
}

.books_pr01{
   position: relative;
   width: 100%;
   background-color: rgba(255,255,255,1.00);
   text-align: center;
   font-family: 'M PLUS Rounded 1c', sans-serif;
   transform: rotate(0.03deg);
   font-size: 260%;
   font-weight: 800;
   color: rgba(127,190,39,1.00);
   letter-spacing: 2px;
   transition: all .6s ease-out;
   margin-bottom: 40px;
}
   @media screen and (max-width: 600px) {
      .books_pr01{
         font-size: 4vw;
      } 
   }


.books_pr01.active{
   	animation: bounceIn 1s;
    animation-iteration-count: 1;
	-webkit-animation: bounceIn 1s;
	-webkit-animation-iteration-count: 1;

   }



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

.books_jk_wrap li{
   position: relative;
   width: 32%;
   margin-bottom: 10px;
   border: rgba(0,0,0,1.00) 1px solid;
}
   @media screen and (max-width: 600px) {
      .books_jk_wrap li{
         width: 48%;
      } 
   }


.books_jk_wrap li.spc{
   margin-bottom: 0;
   border: none;
}

.b_tameshi{
   width: 400px;
   margin: auto;
}
.b_tameshi:hover{
	animation: heartBeat 1s;
    animation-iteration-count: 1;
	-webkit-animation: heartBeat 1s;
	-webkit-animation-iteration-count: 1;
}


   @media screen and (max-width: 600px) {
      .b_tameshi{
         width: 70%;
      } 
   }


/* ====================================================================
   ペンキ
   ==================================================================== */
.k_penki_01{
   position: absolute;
   width: 13%;
   right: 4%;
   top: -15%;
   z-index: -1;
}
   @media screen and (max-width: 1024px) {
      .k_penki_01{
         width: 15%;
         right: -7%;
         top: -8%;
      } 
   }
   @media screen and (max-width: 600px) {
      .k_penki_01{
         width: 25%;
         right: -7%;
         top: -8%;
      } 
   }


.k_penki_02{
   position: absolute;
   width: 14%;
   left: -8%;
   top: 2%;
   z-index: -1;
}
   @media screen and (max-width: 1024px) {
      .k_penki_02{
         width: 14%;
         left: auto;
         right: -4%;
         top: auto;
         bottom: -6%;
      } 
   }
   @media screen and (max-width: 600px) {
      .k_penki_02{
         width: 22%;
         left: auto;
         right: -10%;
         top: auto;
         bottom: -5%;
      } 
   }


.k_penki_03{
   position: absolute;
   width: 12%;
   right: -1%;
   top: -6%;
   z-index: -1;
}
   @media screen and (max-width: 1024px) {
      .k_penki_03{
         display: none;
      } 
   }


.k_penki_04{
   position: absolute;
   width: 12%;
   left: -7%;
   top: 32%;
   z-index: -1;
}
   @media screen and (max-width: 1024px) {
      .k_penki_04{
         width: 14%;
         left: auto;
         right: 8%;
         top: auto;
         bottom: -8%;
      } 
   }
   @media screen and (max-width: 600px) {
      .k_penki_04{
         width: 22%;
         left: auto;
         right: 8%;
         top: auto;
         bottom: -8%;
      } 
   }



.k_penki_05{
   position: absolute;
   width: 12%;
   left: -6%;
   top: 10%;
   z-index: -1;
}
   @media screen and (max-width: 1024px) {
      .k_penki_05{
         width: 14%;
         left: 16%;
         top: -3%;
         z-index: -1;
      } 
   }
   @media screen and (max-width: 600px) {
      .k_penki_05{
         width: 20%;
         left: 16%;
         top: -2.5%;
         z-index: -1;
      } 
   }



/* ====================================================================
   TWITTER
   ==================================================================== */

.b_twitter{
   position: relative;
   width: 300px;
   margin: auto;
   margin-bottom: 80px;
}

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

.movie_pc_wrap{
   position: relative;
   width: 100%;
   padding-left: 20px;
   margin-top: 10%;
}

.movie_pc_k01{
   position: absolute;
   width: 73%;
   top: -2%;
   left: -20%;
}

.movie_pc_k02{
   position: relative;
   width: 18%;
   margin-left: 97%;
}

.movie_pc{
   position: relative;
   width: 115%;
   background-color: rgba(0,0,0,1.00);
   padding: 20px 0;
}

.movie_m{
   display: none;
}
   @media screen and (max-width: 1024px) {
      .movie_m{
         position: relative;
         display: block;
         width: 100%;
         background-color: rgba(0,0,0,1.00);
         padding: 20px 0;
         z-index: 10;
         margin-bottom: 60px;
      } 
   }


.movie_thumb{
   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-image: url("../images/top/pv_over2.png");
   background-size: 100% 100%;*/
   opacity: 1.0;
   transition: all 1s;
}

.movieWrap .kabuse{
   position: absolute;
   width: 100%;
   height: 100%;
   /*background-image: url("../images/top/pv_over.jpg");
   background-size: 100% 100%;*/
   opacity: 0.5;
   transition: all 1s;
}
.movie_area:hover .kabuse{
   opacity: 0;
   transition: all 1s;
}

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



.b_play{
   position: absolute;
   width: 120px;
   top: 50%;
   left: 50%;
   transform: translateY(-50%) translateX(-50%);
   -webkit- transform: translateY(-50%) translateX(-50%);
   margin: auto;
   transition: all 1s;
   opacity: 0.8;
}

.b_play_hover{
   position: absolute;
   width: 120px;
   top: 50%;
   left: 50%;
   transform: translateY(-50%) translateX(-50%);
   -webkit- transform: translateY(-50%) translateX(-50%);
   margin: auto;
   opacity: 0;
   transition: all 1s;
}


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



/* 追加 */