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

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

   border-bottom: 1px solid;
   border-left: 0 solid;
   border-image: linear-gradient(to right, #FFFFFF 40%, #7E4C43, #7E4C43, #7E4C43) 1;
}
   @media screen and (max-width: 480px) {
      header {
         border-image: none;
         border-bottom: none;
      } 
   }



header.is-head{
   border-image: linear-gradient(to right, #7E4C43, #7E4C43, #7E4C43, #7E4C43) 1;
   transition: all 1s;
}
   @media screen and (max-width: 480px) {
      header.is-head {
         border-bottom: 1px solid;
         border-image: linear-gradient(to right, #7E4C43, #7E4C43, #7E4C43, #7E4C43) 1;
      } 
   }


header .wrap{
   background-color: rgba(255,255,255,1.00);
}
   @media screen and (max-width: 480px) {
      header .wrap{
         background-color: rgba(255,255,255,0.00);
         transition: all 0.3s; 
      } 
   }

   @media screen and (max-width: 480px) {
      header .wrap.is-head{
         background-color: rgba(255,255,255,1.00);
         transition: all 1s; 
      } 
   }


header .head_wrap{
   position: relative;
   width: 100%;
   display: flex;
   min-height: 100px;
}
   @media screen and (max-width: 1024px) {
      header .inner{
         min-height: 80px;
      } 
   }
   @media screen and (max-width: 480px) {
      header .inner{
         min-height: 60px;
      } 
   }


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: 1200px) {
      header .inner{
        height: 80px;
        width: calc(100% - 10px - 80px);
      } 
   }
   @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);
      } 
   }



.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: 0%;
   width: 35%;
   max-width: 1100px;
   margin: auto;
   transition: all 1s;
   z-index: 25;
}
   @media screen and (max-width: 1200px) {
      .main_logo{
         width: 35%;
      } 
   }
   @media screen and (max-width: 1024px) {
      .main_logo{
         width: 52%;
      } 
   }
   @media screen and (max-width: 480px) {
      .main_logo{
         width: 60%;
      } 
   }

.main_logo.is-head{
   top: 0%;
   width: 330px;
   transition: all 1s;
}
   @media screen and (max-width: 1200px) {
      .main_logo.is-head{
         width: 270px;
      } 
   }
   @media screen and (max-width: 480px) {
      .main_logo.is-head{
         width: 200px;
      } 
   }


   .logo_img{
      margin-left: 0%;
   }



header .menu{
   position: relative;
   margin: 0 0 0 auto;
   width: calc(100% - 44%);
   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;
      } 
   }



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


.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: 100%;
   padding-left: 1.2em;
}
   @media screen and (max-width: 1200px) {
      .gmenu_wrap_pc ol li{
         font-size: 90%;
      } 
   }


.gmenu_wrap_pc ol li::before{
  position: absolute;
  left: 0;
  top: 0.1em;
  font-family: "Font Awesome 5 Free";
  content: '\f0c8';
  font-weight: 400;
  color: rgba(149,111,100,1.00);
}

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



.gmenu_wrap_pc ol li.select::before{
   content: '\f0c8';
   font-weight: 600;
}

.gmenu_wrap_pc ol li:hover{
   background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(255,255,255,1) 0%, rgba(255,233,236,1) 40%, rgba(246,249,255,1) 66%, rgba(255,255,255,1) 100%);
}

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



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

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

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

.visual_wrap{
   position: relative;
   width: 100%;
   margin-top: 100px;
   border-bottom: rgba(126,76,67,1.00) 2px solid;
}
   @media screen and (max-width: 1200px) {
      .visual_wrap{
         margin-top: 80px;
      } 
   }
   @media screen and (max-width: 480px) {
      .visual_wrap{
         margin-top: 0px;
      } 
   }


.ch_area{
   display: block;
   position: absolute;
   width: 100%;
   width: 32%;
   left: 3%;
   transition: all 0.2s;
}
   @media screen and (max-width: 480px) {
      .ch_area{
         display: none;
      } 
   }

.ch_area_v2{
   display: block;
   position: relative;
   width: 90%;
   margin: auto;
   transition: all 0.2s;
   opacity: 1;
}
   @media screen and (max-width: 480px) {
      .ch_area_v2{
         display: none;
      } 
   }

.ch_area_v2.is-head{
   opacity: 0;
   transition: all 0.6s;
}


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

.ch_01{
   display: block;
   position: absolute;
   width: 50%;
   left: 2%;
   bottom: 6%;
}
   @media screen and (max-width: 480px) {
      .ch_01{
         display: none;
      } 
   }




.ch_area_m{
   display: none;
}
   @media screen and (max-width: 480px) {
      .ch_area_m{
         display: block;
         position: absolute;
         width: 100%;
         height: 100%;
         transition: all 0.2s;
         bottom: 0%;
         left: 0;
      }
      .ch_oa_m{
         position: relative;
         width: 100%;
         left: auto;
         bottom: auto;
         z-index: 5;
      }
      .ch_01_m{
         position: absolute;
         width: 80%;
         bottom: 3%;
         left: 1%;
      }

   }



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

.section_title_wrap{
   position: relative;
   width: min(90% , 1400px);
   border-bottom: rgba(126,76,67,1.00) 4px dotted;
   padding-bottom: 5px;
   margin: 60px auto 30px auto;
   letter-spacing: 4px;
   text-align: center;
}
   @media screen and (max-width: 1200px) {
      .section_title_wrap{
         width: 95%;
         margin: 40px auto 15px auto;
      } 
   }
   @media screen and (max-width: 1024px) {
      .section_title_wrap{
         width: 95%;
         margin: 40px auto 15px auto;
      }
   }
   @media screen and (max-width: 480px) {
      .section_title_wrap{
         width: 95%;
         margin: 15px auto 15px auto;
      } 
   }


.section_title{
   display: inline-block;
   text-align: center;
   font-weight: 900;
   font-size: 280%;
}
   @media screen and (max-width: 1200px) {
      .section_title{
         
      } 
   }
   @media screen and (max-width: 1024px) {
      .section_title{
         font-size: 4vw;
      } 
   }
   @media screen and (max-width: 800px) {
      .section_title{
         font-size: 5vw;
      } 
   }
   @media screen and (max-width: 480px) {
      .section_title{
         font-size: 6vw;
      } 
   }


.section_title span:nth-child(2n+1){
   color: rgba(236,109,128,1.00);
}
.section_title span:nth-child(2n){
   color: rgba(133,163,213,1.00);
}


/* ====================================================================
   インフォ_セクション
   ==================================================================== */
.info_wrap{
   position: relative;
   width: 100%;
   background-color: rgba(255,254,236,1.00);
   border-top: rgba(126,76,67,1.00) 1px solid;
   border-bottom: rgba(126,76,67,1.00) 1px solid;
}

.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 .info_index{
   background-color: rgba(126,76,67,1.00);
   text-align: center;
   color: rgba(235,221,186,1.00);
   font-size: 200%;
   font-weight: 900;
   line-height: 1.2;
   padding-bottom: 2px;
   letter-spacing: 6px;
   margin-bottom: 40px;
}
   @media screen and (max-width: 800px) {
      .info_content_wrap .info_index{
         font-size: 160%;
         margin-bottom: 15px;
      }
      .info_content_wrap .twitter_wrap .info_index{
         display: none;
      }
   }


/* ニュース */
.info_content_wrap .news_wrap{
   position: relative;
   width: 59.45%;
}
   @media screen and (max-width: 800px) {
      .info_content_wrap .news_wrap{
         width: 100%;
         margin-bottom: 30px;
      } 
   }


.info_content_wrap .news_wrap .news_box{
   position: relative;
   width: 100%;
}

.news_box{
   position: relative;
   overflow: auto;
   height: 200px;
   box-sizing: border-box;
}

.news_box article{
   position: relative;
   width: 100%;
   margin-bottom: 15px;
}

.news_list_box{
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
}

.news_list_box .day{
   width: 100px;
}
   @media screen and (max-width: 600px) {
      .news_list_box .day{
         font-size: 90%;
         width: 80px;
      } 
   }


.news_list_box .day span{
   background-color: rgba(126,76,67,1.00);
   color: rgba(255,255,255,1.00);
   text-align: center;
   display: inline-block;
   padding: 0 10px;
}


.news_list_box .title{
   width: calc(100% - 120px);
   font-family: 'M PLUS Rounded 1c', sans-serif;
   transform: rotate(0.03deg);
   padding-right: 15px;
   box-sizing: border-box;
   font-weight: 700;
}
   @media screen and (max-width: 600px) {
      .news_list_box .title{
         width: 100%;
      } 
   }

a .news_list_box .title {
   color: var(--main-txt-color);
}

.news_b_more{
   position: relative;
   width: 100%;
   padding-left: 67%;
   padding-right: 8%;
   box-sizing: border-box;
   margin-top: 15px;
}
   @media screen and (max-width: 1200px) {
      .news_b_more{
        padding-left: 65%; 
      } 
   }
   @media screen and (max-width: 800px) {
      .news_b_more{
        padding-left: 70%; 
        padding-right: 0;
      } 
   }
   @media screen and (max-width: 480px) {
      .news_b_more{
        padding-left: 60%; 
      } 
   }



.info_content_wrap .twitter_wrap{
   position: relative;
   width: 37.54%;
}
   @media screen and (max-width: 800px) {
      .info_content_wrap .twitter_wrap{
         width: 100%;
      } 
   }


/* ツイッター */
.twitter_box{
   position: relative;
   overflow: auto;
   height: 200px;
   box-sizing: border-box;
   display: grid;
   place-content: center;
}
   @media screen and (max-width: 800px) {
      .twitter_box{
         height: auto;
      } 
   }

.twitter_box .twitter_bn{
   width: 80%;
   margin: auto;
}

.info_under{
   position: relative;
   width: 100%;
   border-bottom: rgba(126,76,67,1.00) 6px solid;
   margin-top: 40px;
}

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


.info_under .kazari{
   position: absolute;
   top: -20px;
   right: 0;
   width: 65px;
}
   @media screen and (max-width: 1200px) {
      .info_under .kazari{
         width: 50px;
      } 
   }
   @media screen and (max-width: 800px) {
      .info_under .kazari{
         display: none;
      } 
   }


/* ====================================================================
   イントロ_セクション
   ==================================================================== */
.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;
}

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


.intro_wrap_kabuse{
   position: absolute;
   width: 90%;
   height: 100%;
   background-image: url("../images/bg/bg_003_kabuse01.png");
   background-size: 100% auto;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
   @media screen and (max-width: 800px) {
      .intro_wrap_kabuse{
         position: absolute;
         width: 100%;
         height: 100%;
         background-image: none;
         background-color: rgba(255,255,255,0.60);
      } 
   }
   
   
   


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

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


.intro_ch01_wrap{
   position: relative;
   margin: auto;
   margin-top: 60px;
   text-align: center;
   color: rgba(255,255,255,1.00);
  font-family: 'Zen Maru Gothic', serif;
}



.intro_ch01{
   position: relative;
  display: inline-block;
  font-size: 200%;
  font-weight: 900;
  background: linear-gradient(90deg, #6FA4FB, #6FA4FB 20%, #F36D98 50%, #F36D98);
  background: -webkit-linear-gradient(0deg, #6FA4FB, #6FA4FB 20%, #F36D98 50%, #F36D98);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: blur(3px);
}

.intro_ch01::before{
   content: "いつまでも、ただの幼なじみじゃ居られない──";
   position: absolute;
   top: 0;
   left: 0;
  background: linear-gradient(90deg, #6FA4FB, #6FA4FB 20%, #F36D98 50%, #F36D98);
  background: -webkit-linear-gradient(0deg, #6FA4FB, #6FA4FB 20%, #F36D98 50%, #F36D98);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: blur(2px);
}

.intro_ch01::after{
   content: "いつまでも、ただの幼なじみじゃ居られない──";
   position: absolute;
   top: 0;
   left: 0;
  background: linear-gradient(90deg, #6FA4FB, #6FA4FB 20%, #F36D98 50%, #F36D98);
  background: -webkit-linear-gradient(0deg, #6FA4FB, #6FA4FB 20%, #F36D98 50%, #F36D98);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: blur(2px);
}

.intro_ch01_over{
   position: absolute;
  font-size: 200%;
  filter: none;
  font-weight: 500;
  width: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}




.intro_ch02_wrap{
   position: relative;
   margin: auto;
   text-align: center;
   color: rgba(255,255,255,1.00);
  font-family: 'Zen Maru Gothic', serif;
}

.intro_ch02{
   position: relative;
  display: inline-block;
  font-size: 200%;
  font-weight: 900;
  background: linear-gradient(90deg, #A896F3, #A896F3 10%, #F36D98 50%, #F36D98, #7A95FB);
  background: -webkit-linear-gradient(0deg, #A896F3, #A896F3 10%, #F36D98 50%, #F36D98, #7A95FB);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: blur(3px);
  margin-bottom: 60px;
}

.intro_ch02::before{
   content: "初恋こじらせ系双子ラブコメ開幕！";
   position: absolute;
   top: 0;
   left: 0;
  background: linear-gradient(90deg, #A896F3, #A896F3 10%, #F36D98 50%, #F36D98, #7A95FB);
  background: -webkit-linear-gradient(0deg, #A896F3, #A896F3 10%, #F36D98 50%, #F36D98, #7A95FB);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: blur(2px);
}

.intro_ch02::after{
   content: "初恋こじらせ系双子ラブコメ開幕！";
   position: absolute;
   top: 0;
   left: 0;
  background: linear-gradient(90deg, #A896F3, #A896F3 10%, #F36D98 50%, #F36D98, #7A95FB);
  background: -webkit-linear-gradient(0deg, #A896F3, #A896F3 10%, #F36D98 50%, #F36D98, #7A95FB);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: blur(2px);
}

.intro_ch02_over{
   position: absolute;
  font-size: 200%;
  filter: none;
  font-weight: 500;
  width: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}








/*モバイル */
.intro_ch01_wrap_m{
   position: relative;
   margin: auto;
   margin-top: 40px;
   text-align: center;
   color: rgba(255,255,255,1.00);
  font-family: 'Zen Maru Gothic', serif;
}



.intro_ch01_m{
   position: relative;
  display: inline-block;
  font-size: 180%;
  font-weight: 900;
  background: linear-gradient(90deg, #6FA4FB, #6FA4FB 20%, #F36D98 50%, #F36D98);
  background: -webkit-linear-gradient(0deg, #6FA4FB, #6FA4FB 20%, #F36D98 50%, #F36D98);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: blur(3px);
}

.intro_ch01_m::before{
   content: "いつまでも、ただの幼なじみじゃ";
   position: absolute;
   top: 0;
   left: 0;
  background: linear-gradient(90deg, #6FA4FB, #6FA4FB 20%, #F36D98 50%, #F36D98);
  background: -webkit-linear-gradient(0deg, #6FA4FB, #6FA4FB 20%, #F36D98 50%, #F36D98);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: blur(2px);
}

.intro_ch01_m::after{
   content: "いつまでも、ただの幼なじみじゃ";
   position: absolute;
   top: 0;
   left: 0;
  background: linear-gradient(90deg, #6FA4FB, #6FA4FB 20%, #F36D98 50%, #F36D98);
  background: -webkit-linear-gradient(0deg, #6FA4FB, #6FA4FB 20%, #F36D98 50%, #F36D98);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: blur(2px);
}

.intro_ch01_over_m{
   position: absolute;
  font-size: 180%;
  filter: none;
  font-weight: 500;
  width: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}




.intro_ch01_02_wrap_m{
   position: relative;
   margin: auto;
   text-align: center;
   color: rgba(255,255,255,1.00);
  font-family: 'Zen Maru Gothic', serif;
}

.intro_ch01_02_m{
   position: relative;
  display: inline-block;
  font-size: 180%;
  font-weight: 900;
  background: linear-gradient(90deg, #6FA4FB, #6FA4FB 20%, #F36D98 50%, #F36D98);
  background: -webkit-linear-gradient(0deg, #6FA4FB, #6FA4FB 20%, #F36D98 50%, #F36D98);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: blur(3px);
}

.intro_ch01_02_m::before{
   content: "居られない──";
   position: absolute;
   top: 0;
   left: 0;
  background: linear-gradient(90deg, #6FA4FB, #6FA4FB 20%, #F36D98 50%, #F36D98);
  background: -webkit-linear-gradient(0deg, #6FA4FB, #6FA4FB 20%, #F36D98 50%, #F36D98);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: blur(2px);
}

.intro_ch01_02_m::after{
   content: "居られない──";
   position: absolute;
   top: 0;
   left: 0;
  background: linear-gradient(90deg, #6FA4FB, #6FA4FB 20%, #F36D98 50%, #F36D98);
  background: -webkit-linear-gradient(0deg, #6FA4FB, #6FA4FB 20%, #F36D98 50%, #F36D98);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: blur(2px);
}



.intro_ch01_02_over_m{
   position: absolute;
  font-size: 180%;
  filter: none;
  font-weight: 500;
  width: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}






.intro_ch02_wrap{
   position: relative;
   margin: auto;
   text-align: center;
   color: rgba(255,255,255,1.00);
  font-family: 'Zen Maru Gothic', serif;
}

.intro_ch02{
   position: relative;
  display: inline-block;
  font-size: 200%;
  font-weight: 900;
  background: linear-gradient(90deg, #A896F3, #A896F3 10%, #F36D98 50%, #F36D98, #7A95FB);
  background: -webkit-linear-gradient(0deg, #A896F3, #A896F3 10%, #F36D98 50%, #F36D98, #7A95FB);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: blur(3px);
  margin-bottom: 60px;
}

.intro_ch02::before{
   content: "初恋こじらせ系双子ラブコメ開幕！";
   position: absolute;
   top: 0;
   left: 0;
  background: linear-gradient(90deg, #A896F3, #A896F3 10%, #F36D98 50%, #F36D98, #7A95FB);
  background: -webkit-linear-gradient(0deg, #A896F3, #A896F3 10%, #F36D98 50%, #F36D98, #7A95FB);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: blur(2px);
}

.intro_ch02::after{
   content: "初恋こじらせ系双子ラブコメ開幕！";
   position: absolute;
   top: 0;
   left: 0;
  background: linear-gradient(90deg, #A896F3, #A896F3 10%, #F36D98 50%, #F36D98, #7A95FB);
  background: -webkit-linear-gradient(0deg, #A896F3, #A896F3 10%, #F36D98 50%, #F36D98, #7A95FB);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: blur(2px);
}

.intro_ch02_over{
   position: absolute;
  font-size: 200%;
  filter: none;
  font-weight: 500;
  width: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}


/* モバイル */


.intro_ch02_wrap_m{
   position: relative;
   margin: auto;
   text-align: center;
   color: rgba(255,255,255,1.00);
  font-family: 'Zen Maru Gothic', serif;
}

.intro_ch02_m{
   position: relative;
  display: inline-block;
  font-size: 180%;
  font-weight: 900;
  background: linear-gradient(90deg, #A896F3, #A896F3 10%, #F36D98 50%, #F36D98, #7A95FB);
  background: -webkit-linear-gradient(0deg, #A896F3, #A896F3 10%, #F36D98 50%, #F36D98, #7A95FB);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: blur(3px);
  margin-bottom: 60px;
}
   @media screen and (max-width: 480px) {
      .intro_ch02_m{
         margin-bottom: 30px;
      } 
   }

.intro_ch02_m::before{
   content: "初恋こじらせ系双子ラブコメ開幕！";
   position: absolute;
   top: 0;
   left: 0;
  background: linear-gradient(90deg, #A896F3, #A896F3 10%, #F36D98 50%, #F36D98, #7A95FB);
  background: -webkit-linear-gradient(0deg, #A896F3, #A896F3 10%, #F36D98 50%, #F36D98, #7A95FB);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: blur(2px);
}

.intro_ch02_m::after{
   content: "初恋こじらせ系双子ラブコメ開幕！";
   position: absolute;
   top: 0;
   left: 0;
  background: linear-gradient(90deg, #A896F3, #A896F3 10%, #F36D98 50%, #F36D98, #7A95FB);
  background: -webkit-linear-gradient(0deg, #A896F3, #A896F3 10%, #F36D98 50%, #F36D98, #7A95FB);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: blur(2px);
}

.intro_ch02_over_m{
   position: absolute;
  font-size: 180%;
  filter: none;
  font-weight: 500;
  width: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}








.intro_txt01{
   position: relative;
   font-family: 'Kiwi Maru', serif;
   font-size: 120%;
   color: rgba(126,76,67,1.00);
   font-weight: 500;
   text-align: center;
   z-index: 2;line-height: 2.0;
   margin-bottom: 50px;
}
   @media screen and (max-width: 480px) {
      .intro_txt01{
         margin-bottom: 30px;
      } 
   }


.intro_futo{
   font-family: 'Noto Sans JP', sans-serif;
   font-weight: 900;
   font-size: 140%;
   vertical-align: sub;
   padding: 0 5px;
}

.intro_futo.t01{
   color: rgba(247,176,29,1.00);
}
.intro_futo.t02{
   color: rgba(136,163,212,1.00);
}
.intro_futo.t03{
   color: rgba(235,109,128,1.00);
}
.intro_futo.t04{
   color: rgba(125,194,109,1.00);
}
.intro_futo.t05{
   color: rgba(187,141,190,1.00);
}


/*
.intro_txt02{
   position: relative;
   color: rgba(255,255,255,1.00);
   margin-bottom: 50px;
   text-align: center;
   font-size: 180%;
   font-weight: 500;
   font-family: 'Zen Maru Gothic', serif;
   text-shadow: 2px 2px 10px rgba(122,160,223,1.00),
   2px 2px 8px rgba(122,160,223,1.00),
   -2px 2px 8px rgba(122,160,223,1.00),
   2px -2px 8px rgba(122,160,223,1.00),
   -2px -2px 8px rgba(122,160,223,1.00);
}
   @media screen and (max-width: 480px) {
      .intro_txt02{
         margin-bottom: 30px;
      } 
   }
*/

.intro_txt02{
   position: relative;
   color: rgba(255,255,255,1.00);
   margin-bottom: 50px;
   text-align: center;
   font-size: 180%;
   font-weight: 500;
   font-family: 'Zen Maru Gothic', serif;
   text-shadow: 2px 2px 10px rgba(122,160,223,1.00),
   2px 2px 8px rgba(122,160,223,1.00),
   -2px 2px 8px rgba(122,160,223,1.00),
   2px -2px 8px rgba(122,160,223,1.00),
   -2px -2px 8px rgba(122,160,223,1.00);
}
   @media screen and (max-width: 480px) {
      .intro_txt02{
         margin-bottom: 30px;
      } 
   }



/* ====================================================================
   スタッフ_セクション
   ==================================================================== */
.staff_wrap{
   position: relative;
   overflow: hidden;
   width: 100%;
   background-image: url("../images/bg/bg_007.jpg");
   background-size: 100% 100%;
}

.staff_content_wrap{
   position: relative;
   width: min(90% , 1400px);
   margin: auto;
   margin-bottom: 0px;
   padding: 60px 0 0 0;
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
}
   @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;
      } 
   }



.staff_content_wrap .staff_index_wrap{
   width: 100%;
   display: grid;
   place-content: center;
}
   @media screen and (max-width: 800px) {
      .staff_content_wrap .staff_index_wrap{
         display: block;
      }
   }


.staff_content_wrap .staff_index{
   background-color: rgba(126,76,67,1.00);
   text-align: center;
   color: rgba(235,221,186,1.00);
   font-size: 200%;
   font-weight: 900;
   line-height: 1.2;
   padding-bottom: 2px;
   letter-spacing: 6px;
   margin: auto;
   margin-bottom: 40px;
   display: inline-block;
   padding: 0 40px 5px 40px;
}
   @media screen and (max-width: 800px) {
      .staff_content_wrap .staff_index{
         font-size: 160%;
         display: block;
         width: 100%;
         margin-bottom: 15px;
         padding: 0;
      }
   }


.staff_box{
   position: relative;
   width: min(98% , 1200px);
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   margin: auto;
   margin-bottom: 80px;
}

.staff_box.gensaku{
   justify-content: center;
   margin-bottom: 40px;
}
   @media screen and (max-width: 600px) {
      .staff_box.gensaku{
         margin-bottom: 0px;
      } 
   }



.staff_box article{
   position: relative;
   width: 32%;
   margin-bottom: 30px;
   line-height: 1.4;
}
   @media screen and (max-width: 480px) {
      .staff_box article{
         width: 100%;
      } 
   }

.staff_box article.gensaku{
   width: 100%;
}
   @media screen and (max-width: 1000px) {
      .staff_box article.gensaku{
         width: 100%;
      } 
   }
   @media screen and (max-width: 480px) {
      .staff_box article.gensaku{
         width: 100%;
      } 
   }


.staff_box article .left_box_cast, .staff_box article .left_box_staff{
   position: relative;
   align-items: center;
   width: 100%;
}

.staff_box article .position{
   font-family: 'Kiwi Maru', serif;
   text-align: center;
   font-size: 120%;
}
   @media screen and (max-width: 1000px) {
      .staff_box article .position{
         font-size: 100%;
      } 
   }
   @media screen and (max-width: 600px) {
      .staff_box article .position{
         font-size: 90%;
      } 
   }
   @media screen and (max-width: 480px) {
      .staff_box article .position{
         font-size: 4.6vw;
      } 
   }

.staff_box article.cast .position{
   color: rgba(236,109,128,1.00);
}

.staff_box article.staff .position{
   color: rgba(133,163,213,1.00);
}


.staff_box article .name{
   font-family: 'Kiwi Maru', serif;
   text-align: center;
   font-size: 200%;
   font-weight: 500;
}
   @media screen and (max-width: 1000px) {
      .staff_box article .name{
         font-size: 160%;
      } 
   }
   @media screen and (max-width: 600px) {
      .staff_box article .name{
         font-size: 120%;
      } 
   }
   @media screen and (max-width: 480px) {
      .staff_box article .name{
         font-size: 6vw;
      } 
   }


.staff_box article .name_cap{
   font-family: 'Kiwi Maru', serif;
   text-align: center;
   font-size: 100%;
   font-weight: 400;
   color: rgba(126,76,67,1.00);
}
   @media screen and (max-width: 1000px) {
      .staff_box article .name_cap{
         font-size: 90%;
      } 
   }
   @media screen and (max-width: 600px) {
      .staff_box article .name_cap{
         font-size: 80%;
      } 
   }
   @media screen and (max-width: 480px) {
      .staff_box article .name_cap{
         font-size: 3vw;
      } 
   }


.staff_box article.cast .name, .staff_box article.staff .name{
   color: rgba(126,76,67,1.00);
}

.staff_box article .b_comment{
   font-family: 'Kiwi Maru', serif;
   margin: auto;
   margin-top: 4px;
   text-align: center;
}

.staff_box article .b_comment span{
   font-size: 100%;
   color: rgba(255,255,255,1.00);
   padding: 2px 20px;
   box-sizing: border-box;
   border-radius: 20px;
   cursor: pointer;
}
   @media screen and (max-width: 800px) {
      .staff_box article .b_comment span{
         font-size: 90%;
      } 
   }
   @media screen and (max-width: 600px) {
      .staff_box article .b_comment span{
         font-size: 70%;
      } 
   }
   @media screen and (max-width: 480px) {
      .staff_box article .b_comment span{
         font-size: 3.5vw;
      } 
   }

.staff_box article.cast .b_comment span{
   background-color: rgba(236,109,128,1.00);
}

.staff_box article.staff .b_comment span{
   background-color: rgba(133,163,213,1.00);
}

/* ====================================================================
   原作_セクション
   ==================================================================== */
.books_wrap{
   position: relative;
   overflow: hidden;
   width: 100%;
   background-image: url("../images/bg/bg_005_02.png"),url("../images/bg/bg_005.png");
   background-size:  1% auto, contain;
}
   @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;
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
}
   @media screen and (max-width: 800px) {
      .books_content_wrap{
         padding: 30px 0;
         width: 100%;
      } 
   }



.books_content_wrap .books_index{
   background-color: rgba(126,76,67,1.00);
   text-align: center;
   color: rgba(235,221,186,1.00);
   font-size: 200%;
   font-weight: 900;
   line-height: 1.2;
   padding-bottom: 2px;
   letter-spacing: 6px;
   margin-bottom: 15px;
}
   @media screen and (max-width: 800px) {
      .books_content_wrap .books_index{
         font-size: 160%;
         margin-bottom: 15px;
      }
   }


.books_box{
   position: relative;
   width: 48%;
   margin-bottom: 100px;
}
   @media screen and (max-width: 800px) {
      .books_box{
         padding: 0 0 20px 0;
         width: 95%;
         margin: auto;
         margin-bottom: 30px;
      } 
   }


.books_ch01{
   text-align: center;
   font-size: 180%;
   font-weight: 600;
   font-family: 'M PLUS Rounded 1c', sans-serif;
   letter-spacing: 3px;
   margin-bottom: 15px;
}
   @media screen and (max-width: 1024px) {
      .books_ch01{
         font-size: 2.5vw;
      } 
   }
   @media screen and (max-width: 800px) {
      .books_ch01{
         font-size: 4vw;
      } 
   }
   @media screen and (max-width: 480px) {
      .books_ch01{
         font-size: 6vw;
      } 
   }


.books_ch01.novel{
   color: var(--main-point-color);
}

.books_ch01.comics{
   color: var(--main-point2-color);
}

.books_ch02{
   text-align: center;
   font-size: 140%;
   font-weight: 600;
   font-family: 'Zen Maru Gothic', serif;
   letter-spacing: 1px;
   transform: rotate(0.003deg);
   color: var(--main-txt-color);
}
   @media screen and (max-width: 1024px) {
      .books_ch02{
         font-size: 2vw;
      } 
   }
   @media screen and (max-width: 800px) {
      .books_ch02{
         font-size: 4vw;
      } 
   }
   @media screen and (max-width: 480px) {
      .books_ch02{
         font-size: 6vw;
      } 
   }


.books_ch03{
   text-align: center;
   font-size: 120%;
   font-weight: 600;
   font-family: 'Zen Maru Gothic', serif;
   letter-spacing: 1px;
   color: var(--main-txt-color);
   transform: rotate(0.003deg);
   margin-bottom: 10px;
}
   @media screen and (max-width: 1024px) {
      .books_ch03{
         font-size: 1.2vw;
      } 
   }
   @media screen and (max-width: 800px) {
      .books_ch03{
         font-size: 2.5vw;
      } 
   }
   @media screen and (max-width: 480px) {
      .books_ch03{
         font-size: 4vw;
         left: 0;
      } 
   }



.books_ch04{
   text-align: center;
   font-size: 110%;
   font-weight: 400;
   font-family: 'Zen Maru Gothic', serif;
   letter-spacing: 1px;
   color: var(--main-txt-color);
   transform: rotate(0.003deg);
   margin-bottom: 40px;
}
   @media screen and (max-width: 1024px) {
      .books_ch04{
         font-size: 1.4vw;
      } 
   }
   @media screen and (max-width: 800px) {
      .books_ch04{
         font-size: 2.4vw;
      } 
   }
   @media screen and (max-width: 480px) {
      .books_ch04{
         font-size: 3.4vw;
         left: 0;
      } 
   }


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

.books_shoei_wrap li{
   position: relative;
   width: 31%;
   box-sizing: border-box;
}

.books_shoei_wrap li .book_pic{
   border: rgba(126,76,67,1.00) 1px solid;
   box-sizing: border-box;
}

.books_shoei_wrap li .book_ch01{
   position: relative;
   width: 100%;
   margin-top: 5px;
}
   @media screen and (max-width: 800px) {
      .books_shoei_wrap li .book_ch01{
         margin-top: 0;
      } 
   }


.books_bn_01{
   position: relative;
   width: 68%;
   margin: 80px auto auto auto;
}
   @media screen and (max-width: 800px) {
      .books_bn_01{
         margin: 40px auto auto auto;
      } 
   }


.books_bn_01 .b_click{
   position: absolute;
   width: 90px;
   left: -100px;
   top: -50px
}
   @media screen and (max-width: 1200px) {
      .books_bn_01 .b_click{
         width: 60px;
         left: -65px;
         top: -30px
      } 
   }
   @media screen and (max-width: 480px) {
      .books_bn_01 .b_click{
         width: 50px;
         left: -55px;
         top: -25px
      } 
   }


.books_bn_02 .b_click2{
   position: absolute;
   width: 90px;
   right: -65px;
   top: -40px;
}
   @media screen and (max-width: 1200px) {
      .books_bn_02 .b_click2{
         width: 60px;
         right: -40px;
         top: -35px;
      } 
   }
   @media screen and (max-width: 480px) {
      .books_bn_02 .b_click2{
         width: 50px;
         right: -35px;
         top: -25px;
      } 
   }

.books_bn_02{
   position: relative;
   width: 60%;
   border: rgba(126,76,67,1.00) 2px solid;
   border-radius: 50%;
   margin: 80px auto auto auto;
   display: grid;
   place-content: center;
   background-color: rgba(255,255,255,0.80);
}
   @media screen and (max-width: 800px) {
      .books_bn_02{
         width: 40%;
         margin: 40px auto auto auto;
      } 
   }
   @media screen and (max-width: 480px) {
      .books_bn_02{
         width: 60%;
         margin: 40px auto auto auto;
      } 
   }


.books_bn_02 .inner{
   position: relative;
   width: 90%;
   margin: auto;
}

.books_pv_wrap{
   position: relative;
   width: 40%;
   margin: auto;
   margin-bottom: 100px;
}
   @media screen and (max-width: 1200px) {
      .books_pv_wrap{
         width: 70%;
      } 
   }
   @media screen and (max-width: 800px) {
      .books_pv_wrap{
         width: 80%;
      } 
   }


.books_pv{
   width: 100%;
   margin-bottom: 15px;
   border: rgba(126,76,67,1.00) 1px solid;
}

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