@charset "UTF-8";

/* =========================================
    　　　　　　共通
============================================*/

html,
body {
  margin: 0;
  padding: 0;
  border: 0;
}

.page_wrap {
    overflow: hidden;
    text-align: center;
    font-family: "Noto Sans JP", sans-serif;
}

.page_wrap * {
    margin: 0;
    padding: 0;
    font-family:"MS Pゴシック",sans-serif;
    font-feature-settings: "palt" 1;
    box-sizing: border-box;
}

.page_wrap ul,
.page_wrap ol {
    list-style: none;
}

.page_wrap img {
    max-width: 100%;
}

.page_wrap picture {
    display: flex;
    justify-content: center;
    align-items: center;
}

.page_wrap section {
  padding: 10% 5% 0 5%;
}

.page_wrap h2 {
  width: 80%;
  margin: 0 auto 5% auto;
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.48));
}

.page_wrap h3 {
  width: 90%;
  margin: 0 auto 8% auto;
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.48));
}

.line {
  width: 100vw;
  height: 2px;
  margin: 10% calc(50% - 50vw) 0 calc(50% - 50vw);
  background-color: #fecb00;
  filter: drop-shadow(0px -8px 6px rgba(0, 0, 0, 0.5));
}





@media screen and (min-width: 768px) {

  .page_wrap section {
    padding: clamp(90px, 4vw, 100px) 3% 0 3%;
  }  

  .page_wrap h2 {
    width: 55%;
    max-width: 550px;
    margin: 0 auto clamp(40px, 4vw, 50px) auto;
  }
  
  .page_wrap h3 {
    margin: 0 auto clamp(50px, 4vw, 60px) auto;
  }

  .line {
    height: 4px;
    margin: clamp(90px, 4vw, 100px) calc(50% - 50vw) 0 calc(50% - 50vw);
    filter: drop-shadow(0px -8px 10px rgba(0, 0, 0, 0.4));
  }

  .inner_wrap {
    max-width: 1600px;
    margin: 0 auto;
  }

}



/* =========================================
    　　　　　　メインビジュアル
============================================*/

.mv {
  position: relative;
}

.mv h1 {
  position: absolute;
  left: 5%;
  top: 5%;
  width: 90%;
  animation: anime1 0.75s ease 0s infinite alternate;
  transform-origin: center;
}


@keyframes anime1 {
    0% {
      transform: scale(1.05, 1.05);
  }
  100% {
      transform: scale(0.95, 0.95);
  }
}

@media screen and (min-width: 768px) {

  .mv h1 {
    left: 1%;
    top: 14%;
    width: 48%;
  }

}

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

.intro {
  /* background: url(/sp/kanshasai/images/bg_knit_sp.png) repeat center center / 100%,
                    linear-gradient(0deg, #004d10, #388d4b); */
  background: 
              url(/sp/kanshasai/images/bg_circle-green_sp.png) no-repeat top center / 100%,
              url(/sp/kanshasai/images/bg_circle-green2_pc.png) no-repeat bottom center / 100%,
              linear-gradient(0deg, #004d10, #388d4b);
}

.intro h4 {
  margin-top: 8%;
}


/* -----番宣動画----- */
.movie_wrap {
  max-width: 600px;
  margin: 0 auto;
  text-align: left;
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.4));
}

#movie {
  position: relative;
  width: 100%;
  padding-top: calc(9 / 16 * 100%);
  margin: 0 auto;
  overflow: hidden;
}

.tvo-video {
  position: absolute;
  width: 100%; 
  height: 100%;
  top: 0;
  right: 0;
}


@media screen and (min-width: 768px) {

  .intro {
    background: 
                url(/sp/kanshasai/images/bg_circle-green_pc.png) no-repeat top center / 100%,
                linear-gradient(0deg, #004d10, #388d4b);
  }

  .intro h4 {
    margin-top: clamp(50px, 4vw, 60px);
  }  

  .movie_wrap {
    max-width: 900px;
  }

}


/* =========================================
    　　　　　　スタジオゲスト
============================================*/

.studio {
  background: url(/sp/kanshasai/images/bg_circle-red_sp.png) no-repeat top center / 100%,
              url(/sp/kanshasai/images/bg_circle-green2_pc.png) no-repeat bottom center / 100%,
              linear-gradient(0deg, #b70003, #dd001e);
}

.studio ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 2%;
  row-gap: 2.5vw;
}

.studio ul li {
  width: 49%;
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.48));
}

.studio ul .fujiwara {
  width: 80%;
}

.studio_mc h4 {
  color: #fff;
  font-size: clamp(18px, 4vw, 22px);
  text-shadow: 2px 2px 3px rgba(134, 0, 0, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10% auto 2% auto;
}

.studio_mc h4::before,
.studio_mc h4::after {
  background-color: #fff;
  content: "";
  height: 1px;
  width: 50%;
}

.studio_mc h4::before {
  margin-right: 5%;
}

.studio_mc h4::after {
  margin-left: 5%;
}

/* .studio_mc ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 2%;
}

.studio_mc ul li {
  width: 49%;
} */

.pc_break {
  display: none;
}

@media screen and (min-width: 768px) {
  
  .studio {
    background: url(/sp/kanshasai/images/bg_circle-red_pc.png) no-repeat top center / 100%,
                url(/sp/kanshasai/images/bg_circle-green2_pc.png) no-repeat bottom center / 100%,
                linear-gradient(0deg, #b70003, #dd001e);
  }


  .studio ul {
    column-gap: 5%;
    max-width: 900px;
    margin: 0 auto;
  }

  .studio ul li {
    width: 45%;
  }



}

@media screen and (min-width: 1200px) {

  .studio ul {
    column-gap: 2%;
    max-width: unset;
  }

  .studio ul li {
    width: 27%;
  }

  .studio ul .fujiwara {
    width: 42%;
  }

  .studio_mc h4 {
    font-size: clamp(24px, 4vw, 28px);
    margin: clamp(50px, 7vw, 90px) auto clamp(10px, 4vw, 20px) auto;
    max-width: 800px;
  }

  .pc_break {
    display: block;
    width: 20% !important;
  }

}

/* =========================================
    　　　　　　コラボVTR
============================================*/

.collabo {
  background: url(/sp/kanshasai/images/bg_circle-green_sp.png) no-repeat top center / 100%,
              url(/sp/kanshasai/images/bg_circle-green2_pc.png) no-repeat bottom center / 100%,
              linear-gradient(0deg, #004d10, #388d4b);
}

.collabo_box li {
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.48));
}

.collabo_box li:not(:last-of-type) {
  margin-bottom: 10%;
}



/* -----画像スクロール----- */
.swiper_wrap {
  margin: 8% calc(50% - 50vw) 10% calc(50% - 50vw);
  width: 100vw;
}

.swiper {
  pointer-events: none;
}

.swiper-wrapper {
  transition-timing-function: linear !important;
}

.swiper li {
  padding-right: 15px;
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.48));
}


@media screen and (min-width: 768px) {

  .collabo{
    background: 
    url(/sp/kanshasai/images/bg_circle-green_pc.png) no-repeat top center / 100%,
    url(/sp/kanshasai/images/bg_circle-green2_pc.png) no-repeat bottom center / 100%,
    linear-gradient(0deg, #004d10, #388d4b);
  }

  .collabo_box li:not(:last-of-type) {
    margin-bottom: 7%;
  }
  
  /* -----画像スクロール----- */
  .swiper_wrap {
    margin: clamp(50px, 4vw, 60px) calc(50% - 50vw) clamp(70px, 7vw, 90px) calc(50% - 50vw);
  }

}

@media screen and (min-width: 1200px) {

  .collabo_box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 2%;
    row-gap: 2vw;
  }

  .collabo_box li {
    width: 49%;
  }

  .collabo_box li:not(:last-of-type) {
    margin-bottom: 0;
  }

}


/* =========================================
  　　　　　　プレゼントマラソン
============================================*/

.present {
  background: url(/sp/kanshasai/images/bg_circle-red_sp.png) no-repeat top center / 100%,
  url(/sp/kanshasai/images/bg_circle-green2_pc.png) no-repeat bottom center / 100%,
              linear-gradient(0deg, #b70003, #dd001e);
}

.present h4 {
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.48));
}


@media screen and (min-width: 768px) {
  
  .present {
    background: url(/sp/kanshasai/images/bg_circle-red_pc.png) no-repeat top center / 100%,
                url(/sp/kanshasai/images/bg_circle-green2_pc.png) no-repeat bottom center / 100%,
                linear-gradient(0deg, #b70003, #dd001e);
  }


}






/* =========================================
    　　　　　　トップボタン（page-top）
============================================*/

#page-top {
  position: fixed;
  bottom: 1%;
  right: 1%;
  width: 15%;
  max-width: 110px;
  aspect-ratio: 138 / 138;
  background: url(/sp/kanshasai/images/btn_top.png) no-repeat center / 100%;
  z-index: 100;
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.25));
}

@media screen and (min-width: 768px) {
  #page-top {
      transition-duration: .1s;
  }

  #page-top:hover {
      opacity: .7;
  }
}



/* =========================================
    　　　　　　アニメーション
============================================*/
/* .zoom {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.75);
  transition-timing-function: ease;
  transition: .5s;
  transition-delay: .5s;
}

.zoom.is-show {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
} */


.slidein {
  opacity: 0;
  visibility: hidden;
  transform: translateY(120px);
  transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
  transition: .6s;
  transition-delay: .1s;
}

.slidein.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}







/* -----スタジオゲスト・コラボVTR----- */

/* .zoom {
  opacity: 0;
  visibility: hidden;
}

.zoom.is-show {
  visibility: visible;
  animation: blink .7s ease 0.5s forwards;
}

.zoom_2 {
  opacity: 0;
  visibility: hidden;
}

.zoom_2.is-show {
  visibility: visible;
  animation: blink .7s ease 0.7s forwards;
}

@keyframes blink {
  0% {
    opacity: 0;
    transform: scale(0.75);
  }
  50% {
    opacity: 1;
    transform: scale(1.125);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
} */