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


  :root{
    --reveal: 400px;              /* 迫り上げ距離(px) */
    --duration: 600ms;            /* アニメ時間 */
    --easing: cubic-bezier(.2,.7,.2,1);
  }


  /* ロード時はこれが全画面で見える（後で下に隠れる） */
  .welcome_wrap{
    position: fixed;
    inset: 0;
    height: 100dvh;
    background: rgba(195,195,195,1);
    z-index: 1;
  }

  /* main_wrap は最初は画面上部の外にいる（固定配置） */
  .main_wrap{
    position: fixed;
    top: 0; left: 0; width: 100%;
    min-height: 1500px;           /* 必要に応じて調整 */
    background: rgba(255,255,255,0.96);
    transform: translateY(calc(-1 * var(--reveal)));
    opacity: 0;
    will-change: transform, opacity;
    z-index: 2;
  }

/* welcome 表示中は main_wrap をクリック不可に */
.main_wrap.is-blocked {
  pointer-events: none;   /* マウス/タッチの命中を遮断 */
}  

  /* 自動アニメ開始時（最初のスクロール検出で付与） */
  .main_wrap.reveal-go{
    transition:
      transform var(--duration) var(--easing),
      opacity   var(--duration) var(--easing);
    transform: translateY(0);
    opacity: 1;
  }

  /* アニメ完了後：通常フローへ（以後は普通にスクロール） */
  .main_wrap.revealed{
    position: relative;
    transform: none !important;
    opacity: 1 !important;
    will-change: auto;
  }

  .content{
    border-top:rgba(230,0,18,1.00) 4px solid;
    background-image:url("../images/tmp/bg/dot_01.png");
    background-size: 10% auto;
  }
   @media screen and (max-width: 800px) {
      .content{
         background-size: 20% auto;
      } 
   }
   @media screen and (max-width: 600px) {
      .content{
         background-size: 30% auto;
      } 
   }

  /* “もう一度”リンクの簡易スタイル */
  .replay{
    display: inline-block;
    margin-top: 12px;
    font: 600 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    text-decoration: underline;
    cursor: pointer;
  }
  

.first_wrap{
   position: relative;
   width: min(90% , 1600px);
   margin: auto;
   padding: 50px 0;
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
}
   @media screen and (max-width: 800px) {
      .first_wrap{
         display: block;
      } 
   }


.first_wrap .main_logo{
   position: relative;
   width: 55%;
}
   @media screen and (max-width: 1024px) {
      .first_wrap .main_logo{
         width: 50%;
      } 
   }
   @media screen and (max-width: 800px) {
      .first_wrap .main_logo{
         width: 50%;
         margin: auto;
         margin-bottom: 20px;
      } 
   }
   @media screen and (max-width: 600px) {
      .first_wrap .main_logo{
         width: 90%;
         margin: auto;
         margin-bottom: 20px;
         margin-top: 20px;
      } 
   }

.first_wrap .main_logo .pic_logo{
   width: 90%;
   margin: auto;
}


.first_wrap .menu_wrap{
   position: relative;
   width: 40%;
   display: grid;
   align-items: center;
}
   @media screen and (max-width: 1024px) {
      .first_wrap .menu_wrap{
         width: 45%;
      } 
   }
   @media screen and (max-width: 800px) {
      .first_wrap .menu_wrap{
         width: 100%;
      } 
   }


.first_wrap .menu_wrap ol{
   position: relative;
   overflow: hidden;
   width: 100%;
}
   @media screen and (max-width: 800px) {
      .first_wrap .menu_wrap ol{
      } 
   }

.first_wrap .menu_wrap li{
   position: relative;
   font-family: "Zen Kaku Gothic New", sans-serif;
   color: rgba(229,0,17,1.00);
   font-size: 180%;
   font-weight: 800;
   line-height: 1.4;
   margin-bottom: 5%;
   padding-left: 18px;
}
   @media screen and (max-width: 1400px) {
      .first_wrap .menu_wrap li{
         font-size: 2vw;
      } 
   }
   @media screen and (max-width: 800px) {
      .first_wrap .menu_wrap li{
         font-size: 3.5vw;
         width: auto;
         text-align: center;
         background-color: rgba(229,0,17,1.00);
         color: rgba(255,255,255,1.00);
         border-radius: 40px;
         padding: 8px 18px;
         margin-bottom: 15px;
         box-sizing: border-box;
      } 
      .first_wrap .menu_wrap li.w50{
         width: 50%;
      } 
      .first_wrap .menu_wrap li.w100{
         width: 100%;
      } 
   }
   @media screen and (max-width: 600px) {
      .first_wrap .menu_wrap li{
         font-size: 4.5vw;
         padding: 12px 18px;
      } 
   }


.first_wrap .menu_wrap li a{
   color: rgba(229,0,17,1.00);
}
   @media screen and (max-width: 800px) {
      .first_wrap .menu_wrap li a{
         color: rgba(255,255,255,1.00);
         display: block;
      }
   }
   
.first_wrap .menu_wrap li:hover {
  padding-right: 8px;
  border-left: solid 10px rgba(255,240,0,1.00);
  padding-left: 8px;
  box-sizing: border-box;
}
   @media screen and (max-width: 800px) {
      .first_wrap .menu_wrap li:hover{
           border-right: solid 10px rgba(255,240,0,1.00);

      }
   }

.first_wrap .b_welcome{
   position: relative;
   width: 250px;
   margin: 50px auto 0 auto;
   cursor: pointer;
}



.second_wrap{
   position: relative;
   width: 100%;
   margin: auto;
   margin-bottom: 0;
   padding: 50px 0;
   background-color: rgba(237,22,38,1.00);
   background-image: url("../images/top/k_001.png") , url("../images/top/k_002.png");
   background-position: left center , right bottom;
   background-repeat: no-repeat , no-repeat;
   background-size: auto 100% , auto 60%;
}
   @media screen and (max-width: 1024px) {
      .second_wrap{
         background-image: url("../images/top/k_001_m.png") , url("../images/top/k_002.png");
         background-size: auto 90% , auto 50%;
         background-position: left top , right bottom;
      } 
   }
   @media screen and (max-width: 800px) {
      .second_wrap{
         background-size: auto 80% , auto 40%;
         background-position: left top , right bottom;
      } 
   }
   @media screen and (max-width: 600px) {
      .second_wrap{
         background-size: auto 70% , auto 30%;
         background-position: left top , right bottom;
      } 
   }


.second_inner{
   position: relative;
   width: min(90% , 1600px);
   margin: auto;
}

.second_inner .i_news{
   position: relative;
   width: 460px;
   margin: 50px 0 20px 0;
}
   @media screen and (max-width: 1300px) {
      .second_inner .i_news{
         width: 40%;
         margin: 0px 0 20px 0;
      } 
   }
   @media screen and (max-width: 800px) {
      .second_inner .i_news{
         width: 50%;
      } 
   }
   @media screen and (max-width: 600px) {
      .second_inner .i_news{
         width: 60%;
      } 
   }

.second_inner .news_wrap{
   position: relative;
   overflow: hidden;
   width: min(90% , 1100px);
   background-color: rgba(255,255,255,0.98);
   border: rgba(0,0,0,1.00) 1px solid;
   margin: 0 auto 50px auto;
   padding: 30px 20px;
}
   @media screen and (max-width: 1300px) {
      .second_inner .news_wrap{
      } 
   }


.second_inner .b_twitter{
   position: relative;
   width: 280px;
   margin: 0 auto 50px auto;
}
   @media screen and (max-width: 1300px) {
      .second_inner .b_twitter{
         width: 20%;
      } 
   }
   @media screen and (max-width: 600px) {
      .second_inner .b_twitter{
         width: 40%;
      } 
   }




article.n_box{
   position: relative;
}



.news_box{
   position: relative;
   overflow-y: scroll;
   height: 400px;
}


.news_box article{
   position: relative;
   width: 95%;
   margin: auto;
   border-top: rgba(237,22,38,1.00) 1px solid;
}

.news_box article:last-child{
   border-bottom: rgba(237,22,38,1.00) 1px solid;
}

.news_list_box{
   position: relative;
   width: 95%;
   margin: auto;
   padding: 25px 0;
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
}

.news_list_box .day{
   position: relative;
   width: 6em;
   padding-right: 2em;
   font-family: "Dela Gothic One", sans-serif;
   color: rgba(237,22,38,1.00);
   font-size: 100%;
   font-weight: 400;
}
   @media screen and (max-width: 800px) {
      .news_list_box .day{
         width: 100%;
      } 
   }
   @media screen and (max-width: 600px) {
      .news_list_box .day{
        font-size: 3vw;
      } 
   }


.news_list_box .title{
   position: relative;
   width: calc(100% - 8em);
   font-size: 110%;
   font-weight: 600;
}
   @media screen and (max-width: 800px) {
      .news_list_box .title{
         width: 100%;
      } 
   }
   @media screen and (max-width: 600px) {
      .news_list_box .title{
         font-size: 3.0vw;
      } 
   }
   @media screen and (max-width: 480px) {
      .news_list_box .title{
         font-size: 3.8vw;
      } 
   }





.welcom_logo_wrap{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  margin: auto;
}
   @media screen and (max-width: 480px) {
      .welcom_logo_wrap{
         width: 90%;
      } 
   }

.welcom_logo_wrap {
  opacity: 1;
  transition: opacity 0.5s ease; /* 0.5秒でフェード */
}

.welcom_logo_wrap.is-fadeout {
  opacity: 0;
  transition: opacity 0.2s ease; /* 0.5秒でフェード */
}

.welcom_logo_wrap.is-fadein {
  opacity: 1;
  transition: opacity 1.5s ease; /* 0.5秒でフェード */
}


.welcom_logo_wrap .site_logo{
   position: relative;
   width: 500px;
   margin: auto;
   margin-bottom: 20px;
}
   @media screen and (max-width: 600px) {
      .welcom_logo_wrap .site_logo{
         width: 300px;
      } 
   }
   @media screen and (max-width: 480px) {
      .welcom_logo_wrap .site_logo{
         width: 90%;
      } 
   }

.welcom_logo_wrap .any20_logo{
   position: relative;
   width: 300px;
   margin: auto;
   margin-bottom: 20px;
}
   @media screen and (max-width: 600px) {
      .welcom_logo_wrap .any20_logo{
         width: 200px;
      } 
   }
   @media screen and (max-width: 480px) {
      .welcom_logo_wrap .any20_logo{
         width: 60%;
      } 
   }

.welcom_logo_wrap .b_comment_tanigawa{
   position: relative;
   width: 260px;
   margin: auto;
   cursor: pointer;
}
   @media screen and (max-width: 480px) {
      .welcom_logo_wrap .b_comment_tanigawa{
         width: 70%;
      } 
   }



a.title_link{
   position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}




.pv_wrap{
   position: relative;
   overflow: hidden;
   display: block;
}


.movie_area{
   position: relative;
   overflow: hidden;
   display: block;
   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 / 50;
  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(237,22,38,0.50);
   transition: all 0.5s; 
}

.movieWrap .kabuse{
   position: absolute;
   width: 100%;
   height: 100%;
   background-image: url("../images/tmp/bg/dot_02.png");
   background-size: 50px;
   transition: all 0.5s; 
}
.movie_area:hover .kabuse{
   transition: all 0.5s;
   opacity: 0.5;
}

.movie_area:hover .mov_kabuse{
   transition: all 0.5s;
   background-color: rgba(255,255,255,0.50);
}



.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%;
      } 
   }
   @media screen and (max-width: 600px) {
      .b_play{
         width: 20%;
      } 
   }


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


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

.movie_m .kabuse{
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background-image: url("../images/top/bg_02.png");
   background-size: 800px auto;
   opacity: 0.5;
   transition: all 1s;
}




footer{
   position: relative;
   width: 100%;
   background-color: rgba(237,22,38,1.0);
}


.footer_top{
   position: relative;
   overflow: hidden;
   width: 100%;
   background-color: rgba(255,255,255,1.00);
   background-image: url("../images/tmp/bg/dot_01.png") ,url("../images/tmp/bg/bg_kamifubuki.jpg");
   background-size: 10% auto ,cover;
}
   @media screen and (max-width: 800px) {
      .footer_top{
         background-size: 20% auto , cover;
      } 
   }
   @media screen and (max-width: 600px) {
      .footer_top{
         background-size: 30% auto , cover;
      } 
   }


.bn_wrap{
   position: relative;
   width: min(90% , 1600px);
   margin: auto;
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   padding: 200px 0 0 0;
}
   @media screen and (max-width: 1024px) {
      .bn_wrap{
         padding: 100px 0 0 0;
      } 
   }
   @media screen and (max-width: 480px) {
      .bn_wrap{
         display: block;
      } 
   }


.bn_wrap li{
   position: relative;
   width: 32%;
   border: rgba(237,22,38,1.0) 1px solid;
   background-color: rgba(212,208,208,1.00);
   margin-bottom: 15px;
   aspect-ratio : 700 / 280;
}
   @media screen and (max-width: 600px) {
      .bn_wrap li{
         width: 48%;
      } 
   }
   @media screen and (max-width: 480px) {
      .bn_wrap li{
         width: 70%;
         margin: 0 auto 10px auto;
      } 
   }


.bn_wrap li img{
   width: 100%;
   height: 100%;
   object-fit: contain;
}


.footer_logo{
   position: relative;
   width: 500px;
   margin: 100px auto 0 auto;
}
   @media screen and (max-width: 1300px) {
      .footer_logo{
         width: 400px;
      } 
   }
   @media screen and (max-width: 1024px) {
      .footer_logo{
         width: 40%;
      } 
   }
   @media screen and (max-width: 600px) {
      .footer_logo{
         width: 60%;
      } 
   }


.footer_title{
   position: relative;
   width: 550px;
   margin: auto;
   padding: 20px 0 200px 0;
}
   @media screen and (max-width: 1300px) {
      .footer_title{
         width: 450px;
      } 
   }
   @media screen and (max-width: 1024px) {
      .footer_title{
         width: 50%;
      } 
   }
   @media screen and (max-width: 600px) {
      .footer_title{
         width: 70%;
         padding: 0px 0 100px 0;
      } 
   }


/* -----------------------------------------
   リンク装飾
   -----------------------------------------*/
a.link_hover{
   color: rgba(229,0,17,1.00);
   text-decoration: none;
   font-weight: 600;
   border-bottom: rgba(255,241,0,1.00) 2px dotted;
}

a.link_hover:hover{
   background-color: rgba(229,0,17,1.00);
   color: rgba(255,255,255,1.00);
   border-bottom: none;
}

.link_img{
 background-color: rgba(255,255,255,1.00);
}

.link_img img:hover{
	opacity: 0.8;
}
/* -----------------------------------------
   フッダ領域
   -----------------------------------------*/

footer .f_sns_wrap{
   position: relative;
   width: 350px;
   margin: auto;
   padding-bottom: 20px;
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
}
   @media screen and (max-width: 600px) {
      footer .f_sns_wrap{
         width: 280px;
         padding: 0px 0 100px 0;
      } 
   }



footer .f_sns_wrap .sns_left{
   width: 38%;
}
footer .f_sns_wrap .sns_right{
   width: 62%;
}

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


footer .copy{
   position: relative;
   color: rgba(255,255,255,1.00);
   font-size: 80%;
   text-align: center;
   padding-bottom: 80px;
}