@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Sawarabi+Mincho&family=Kiwi+Maru:wght@500&family=Great+Vibes&display=swap");

body {
  background-color: #f0f0f0;
  z-index: -10;
  font-family: sans-serif;
}

.container {
  background-image: none;
}


/* ------------------------------------------------------ */
/* ----------------------- Top ----------------------- */
/* ------------------------------------------------------ */
.c-main-top {
  position: relative;
  background-image: url("/assets/img/top/bg_top.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top center;
  background-color: #ffffff;
  padding-top: min( calc( 48 / 430 * 100vw), calc( 48 / 430 * 700px) );
  padding-bottom: min( calc( 48 / 430 * 100vw), calc( 48 / 430 * 700px) );
}
.c-main-top__switch {
  position: absolute;
  left: min( calc( 24 / 430 * 100vw), calc( 24 / 430 * 700px) );
  top: min( calc( 24 / 430 * 100vw), calc( 24 / 430 * 700px) );
  width: min( calc( 60 / 430 * 100vw), calc( 60 / 430 * 700px) );
}
.c-main-top__switch img {
  width: 100%;
  height: auto;
}
.c-main-top__content {
  padding-top: min( calc( 320 / 430 * 100vw), calc( 320 / 430 * 700px) );
}
.c-main-top__content__logo {
  width: min( calc( 300 / 430 * 100vw), calc( 300 / 430 * 700px) );
  margin-inline: auto;
}
.c-main-top__content__logo img {
  width: 100%;
  height: auto;
}
.c-main-top__content__release {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: min( calc( 64 / 430 * 100vw), calc( 64 / 430 * 700px) );
  font-size: min( calc( 24 / 430 * 100vw), calc( 24 / 430 * 700px) );
  font-family: "Sawarabi Mincho", serif;
  color: #AF0115;
  text-align: center;
}
#.c-main-top__content__release::before,
#.c-main-top__content__release::after {
#  content: "";
#  background-color: #AF0115;
#  height: min( calc( 3 / 430 * 100vw), calc( 3 / 430 * 700px) );
#  width: min( calc( 24 / 430 * 100vw), calc( 24 / 430 * 700px) );
#}
#.c-main-top__content__release::before {
#  margin-right: min( calc( 1 / 430 * 100vw), calc( 1 / 430 * 700px) );
#  transform: rotate(60deg);
#}
#.c-main-top__content__release::after {
#  margin-left: min( calc( 1 / 430 * 100vw), calc( 1 / 430 * 700px) );
#  transform: rotate(-60deg);
#}

.lp-carousel-wrapper {
  margin-top: min( calc( 16 / 430 * 100vw), calc( 16 / 430 * 700px) );
}
.lp-youtube-swiper {
  margin-bottom: min(calc(36 / 430 * 100vw), calc(36 / 430 * 700px));
}
.lp-youtube-swiper img {
  width: 100%;
}
.lp-youtube-swiper .swiper-slide {
  padding-inline: 10%;
}
/* 前へ次への矢印カスタマイズ */
.lp-youtube-swiper .swiper-button-prev:after,
.lp-youtube-swiper .swiper-button-next:after {
  bottom: 0;
  content: "";
  height: 0;
  margin: auto;
  position: absolute;
  top: 0;
  width: 0;
}
.lp-youtube-swiper .swiper-button-prev::after,
.lp-youtube-swiper .swiper-button-next::after {
  width: min( calc( 17 / 430 * 100vw), calc( 17 / 430 * 700px) );
  height: min( calc( 29 / 430 * 100vw), calc( 29 / 430 * 700px) );
  background-repeat: no-repeat;
  background-size: cover;
}
.lp-youtube-swiper .swiper-button-prev:after {
  background-image: url("/assets/img/common/arrow_prev_blue.png");
}
.lp-youtube-swiper .swiper-button-next:after {
  background-image: url("/assets/img/common/arrow_next_blue.png");
}
.lp-youtube-swiper .swiper-button-next,
.lp-youtube-swiper .swiper-rtl .swiper-button-prev {
  right: min( 2vw, 25px);
  left: auto;
}
.lp-youtube-swiper .swiper-button-prev,
.lp-youtube-swiper .swiper-rtl .swiper-button-next {
  left: min( 2vw, 25px);
  right: auto;
}


.c-main-top__content__bonus {
  width: min( calc( 270 / 430 * 100vw), calc( 270 / 430 * 700px) );
  margin-inline: auto;
}
.c-main-top__content__bonus img {
  width: 100%;
  height: auto;
}


  /* ------------------------------------------------------ */
/* ----------------------- News ----------------------- */
/* ------------------------------------------------------ */
.c-main-news {
  background-image: url("/assets/img/top/bg_top_news.png");
  background-color: #EBF8FA;
}
.title-news {
  margin-top: min( calc( 16 / 430 * 100vw), calc( 16 / 430 * 700px) );
  width: min( calc( 130 / 430 * 100vw), calc( 130 / 430 * 700px) );
  margin-inline: auto;
}
.title-news img {
  width: 100%;
  height: auto;
}

.line-flower {
  width: 100%;
  height: min( calc( 27 / 430 * 100vw), calc( 27 / 430 * 700px) );
  background-image: url("/assets/img/common/line_flower.png");
  background-size: contain;
  background-repeat: repeat-x;
}

.line-wavy {
  position: relative;
  top: min( calc( 5 / 430 * 100vw), calc( 5 / 430 * 700px) );
  z-index: 50;
  width: 100%;
  height: min( calc( 10 / 430 * 100vw), calc( 10 / 430 * 700px) );
  background-image: url("/assets/img/common/line_wavy.png");
  background-size: contain;
  background-repeat: repeat-x;
}

.c-main-news__description {
  margin-top: min( calc( 12 / 430 * 100vw), calc( 12 / 430 * 700px) );
  font-size: min( calc( 14 / 430 * 100vw), calc( 14 / 430 * 700px) );;
  text-align: center;
}

.lp-news-swiper {
  margin-top: min( calc( 36 / 430 * 100vw), calc( 36 / 430 * 700px) );
}
.lp-news-swiper .swiper-slide {
  margin-bottom: min( calc( 4 / 430 * 100vw), calc( 4 / 430 * 700px) );;
  padding-inline: min( calc( 12 / 430 * 100vw), calc( 12 / 430 * 700px) );
}
.lp-news-swiper .swiper-slide a {
  text-decoration: none;
  color: #000000;
}
.lp-news-swiper .news-item {
  overflow: hidden;
  border-radius: min( calc( 8 / 430 * 100vw), calc( 8 / 430 * 700px) );
  box-shadow: inset 0 0 0 2px white, 0px 2px 6px rgba(0, 0, 0, 0.15);
  background-color: #ffffff;
}
.lp-news-swiper .news-item-status {
  display: flex;
  justify-content: left;
  font-size: min( calc( 10 / 430 * 100vw), calc( 10 / 430 * 700px) );
  padding-block: min( calc( 6 / 430 * 100vw), calc( 6 / 430 * 700px) );
  padding-inline: min( calc( 12 / 430 * 100vw), calc( 12 / 430 * 700px) );
}
.lp-news-swiper .news-item-text {
  font-size: min( calc( 14 / 430 * 100vw), calc( 14 / 430 * 700px) );
  padding-inline: min( calc( 12 / 430 * 100vw), calc( 12 / 430 * 700px) );
  padding-bottom: min( calc( 12 / 430 * 100vw), calc( 12 / 430 * 700px) );
}

/* 前へ次への矢印カスタマイズ */
.lp-news-swiper .swiper-button-prev:after,
.lp-news-swiper .swiper-button-next:after {
  bottom: 0;
  content: "";
  height: 0;
  margin: auto;
  position: absolute;
  top: 0;
  width: 0;
}
.lp-news-swiper .swiper-button-prev::after,
.lp-news-swiper .swiper-button-next::after {
  width: min( calc( 17 / 430 * 100vw), calc( 17 / 430 * 700px) );
  height: min( calc( 29 / 430 * 100vw), calc( 29 / 430 * 700px) );
  background-repeat: no-repeat;
  background-size: cover;
}
.lp-news-swiper .swiper-button-prev:after {
  background-image: url("/assets/img/common/arrow_prev_blue.png");
}
.lp-news-swiper .swiper-button-next:after {
  background-image: url("/assets/img/common/arrow_next_blue.png");
}
.lp-news-swiper .swiper-button-next,
.lp-news-swiper .swiper-rtl .swiper-button-prev {
  right: min( 2vw, 25px);
  left: auto;
}
.lp-news-swiper .swiper-button-prev,
.lp-news-swiper .swiper-rtl .swiper-button-next {
  left: min( 2vw, 25px);
  right: auto;
}
.lp-news-swiper .swiper-slide-next,
.lp-news-swiper .swiper-slide-prev {
  pointer-events: none;
}

.c-main-news__more {
  width: min( calc( 270 / 430 * 100vw), calc( 270 / 430 * 700px) );
  margin-top: min( calc( 32 / 430 * 100vw), calc( 32 / 430 * 700px) );
  margin-inline: auto;
}
.c-main-news__more img {
  width: 100%;
  height: auto;
}

.c-main-news__sns {
  text-align: center;
  color: #AF0115;
  margin-top: min( calc( 32 / 430 * 100vw), calc( 32 / 430 * 700px) );
  margin-bottom: min( calc( 32 / 430 * 100vw), calc( 32 / 430 * 700px) );
  font-family: "Sawarabi Mincho", serif;
}
.c-main-news__sns h2 {
  font-size: min( calc( 24 / 430 * 100vw), calc( 24 / 430 * 700px) );
}
.c-main-news__sns p {
  font-size: min( calc( 14 / 430 * 100vw), calc( 14 / 430 * 700px) );
}

/* ------------------------------------------------------ */
/* ----------------------- About ----------------------- */
/* ------------------------------------------------------ */
.c-main-about {
  background-image: url("/assets/img/top/bg_about.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top center;
  background-color: #EBF8FA;
  padding-top: min( calc( 48 / 430 * 100vw), calc( 48 / 430 * 700px) );
}
.title-about {
  width: min( calc( 158 / 430 * 100vw), calc( 158 / 430 * 700px) );
  margin-inline: auto;
}
.title-about img {
  width: 100%;
  height: auto;
}
.c-main-about__detail {
  margin-top: min( calc( 280 / 430 * 100vw), calc( 280 / 430 * 700px) );
  text-align: center;
  font-family: "Sawarabi Mincho", serif;
}
.c-main-about__detail h3 {
  font-size: min( calc( 24 / 430 * 100vw), calc( 24 / 430 * 700px) );;
  font-weight: normal;
}
.c-main-about__detail p {
  padding-top: min( calc( 32 / 430 * 100vw), calc( 32 / 430 * 700px) );
  font-size: min( calc( 18 / 430 * 100vw), calc( 18 / 430 * 700px) );;
  font-weight: normal;
}
.c-main-about__illust {
  width: 100%;
  padding-left: min( calc( 24 / 430 * 100vw), calc( 24 / 430 * 700px) );
  padding-bottom: min( calc( 24 / 430 * 100vw), calc( 24 / 430 * 700px) );
}
.c-main-about__illust img {
  width: 100%;
  height: auto;
}

/* ------------------------------------------------------ */
/* ----------------------- Introduction ----------------------- */
/* ------------------------------------------------------ */
.c-main-introduction {
  color: #ffffff;
  text-align: center;
  background-color: #AF0115;
  padding-top: min( calc( 72 / 430 * 100vw), calc( 72 / 430 * 700px) );
}
.title-introduction {
  width: min( calc( 370 / 430 * 100vw), calc( 370 / 430 * 700px) );
  margin-inline: auto;
}
.title-introduction img {
  width: 100%;
  height: auto;
}
.introduction-figure {
  width: min( calc( 330 / 430 * 100vw), calc( 330 / 430 * 700px) );
  margin-top: min( calc( 16 / 430 * 100vw), calc( 16 / 430 * 700px) );
  margin-inline: auto;
}
.introduction-figure img {
  width: 100%;
  height: auto;
}
.intro-slogan {
  margin-top: min( calc( 16 / 430 * 100vw), calc( 16 / 430 * 700px) );
  font-size: min( calc( 24 / 430 * 100vw), calc( 24 / 430 * 700px) );
  font-family: "Sawarabi Mincho", serif;
}
.intro-point-block {
}
.point-3 {
  padding-bottom: min( calc( 72 / 430 * 100vw), calc( 72 / 430 * 700px) );
}
.intro-point-block .point-title {
  margin-top: min( calc( 40 / 430 * 100vw), calc( 40 / 430 * 700px) );
  font-size: min( calc( 48 / 430 * 100vw), calc( 48 / 430 * 700px) );
  font-weight: bold;
  font-family: "Great Vibes";
}
.intro-point-block .point-subtitle {
  font-size: min( calc( 20 / 430 * 100vw), calc( 20 / 430 * 700px) );
  font-family: "Sawarabi Mincho", serif;
  margin-top: min( calc( 5 / 430 * 100vw), calc( 5 / 430 * 700px) );
}
.intro-point-block .point-description {
  font-size: min( calc( 16 / 430 * 100vw), calc( 16 / 430 * 700px) );
  margin-top: min( calc( 15 / 430 * 100vw), calc( 15 / 430 * 700px) );
}
.intro-swiper {
  margin-top: min( calc( 24 / 430 * 100vw), calc( 24 / 430 * 700px) );
}
.intro-swiper .swiper-slide {
  padding-inline: 10%;
  margin-bottom: min( calc( 36 / 430 * 100vw), calc( 36 / 430 * 700px) );
}

.intro-swiper .slide-content {
  position: relative;
  padding-bottom: unset;
}
.dammy-text {
  font-weight: bold;
  background-color: #f9f9f9;
  color: #AF0115;
}
.swiper-slide img{
  width:100%;
  height: auto;
}

/* 前へ次への矢印カスタマイズ */
.intro-point-block .swiper-button-prev:after,
.intro-point-block .swiper-button-next:after {
  bottom: 0;
  content: "";
  height: 0;
  margin: auto;
  position: absolute;
  top: 0;
  width: 0;
}
.intro-point-block .swiper-button-prev::after,
.intro-point-block .swiper-button-next::after {
  width: min( calc( 17 / 430 * 100vw), calc( 17 / 430 * 700px) );
  height: min( calc( 29 / 430 * 100vw), calc( 29 / 430 * 700px) );
  background-repeat: no-repeat;
  background-size: cover;
}
.intro-point-block .swiper-button-prev:after {
  background-image: url("/assets/img/common/arrow_prev.png");
}
.intro-point-block .swiper-button-next:after {
  background-image: url("/assets/img/common/arrow_next.png");
}

.swiper-button-next, .swiper-rtl .swiper-button-prev {
  right: min( 2vw, 25px);
  left: auto;
}
.swiper-button-prev, .swiper-rtl .swiper-button-next {
  left: min( 2vw, 25px);
  right: auto;
}


/* ------------------------------------------------------ */
/* ----------------------- Character ----------------------- */
/* ------------------------------------------------------ */
.c-main-character {
  position: relative;
  height: min( calc( 1030 / 430 * 100vw), calc( 1030 / 430 * 700px) );
  padding-top: min(calc( 72 / 430 * 100vw), calc( 72 / 430 * 700px));
  background-color: #F3E9E3;
}

.title-character {
  width: 80%;
  margin-inline: auto;
}
.title-character img {
  width: 100%;
  height: 100%;
}

.swiper-slide-character {
  width: 100%;
}
.swiper-slide-character img {
  position: relative;
  top: max( calc( -70 / 430 * 700px), calc( -70 / 430 * 100vw) );
  width: 100%;
  height: 100%;
}

.swiper-slide-detail {
  position: absolute;
  left: 0;
  top: min( calc( 445 / 430 * 100vw), calc( 445 / 430 * 700px) );
}

.swiper-slide-detail h3 {
  width: min( calc( 230 / 430 * 100vw), calc( 230 / 430 * 700px) );
  font-size:  min( calc( 36 / 430 * 100vw), calc( 36 / 430 * 700px) );
  font-family: "Sawarabi Mincho", serif;
  font-weight: normal;
  color: #ffffff;
  background-color: #AF0115;
  border-block: 1px solid #E09255;
  border-right: 1px solid #E09255;
  padding-left: min( calc( 28 / 430 * 100vw), calc( 28 / 430 * 700px) );
}
.swiper-slide-detail p {
  font-size:  min( calc( 18 / 430 * 100vw), calc( 18 / 430 * 700px) );
  font-family: "Kiwi Maru", serif;
  padding-top: min( calc( 16 / 430 * 100vw), calc( 16 / 430 * 700px) );;
  padding-left: min( calc( 32 / 430 * 100vw), calc( 32 / 430 * 700px) );;
}


.char-thumb-swiper {
  top: max( calc( -190 / 430 * 700px), calc( -190 / 430 * 100vw) );
}
.swiper-slide-nav {
  width: min( calc( 100 / 430 * 100vw), calc( 100 / 430 * 700px) );
  height: min( calc( 100 / 430 * 100vw), calc( 100 / 430 * 700px) );
  background-color: #E09255;
  border-radius: 50%;
  cursor: pointer;
}
.swiper-slide-nav img {
  width: 100%;
  height: auto;
}

.swiper-slide-nav.swiper-slide-active {
  background-color: #ffffff;
}
.swiper-slide-nav.swiper-slide-active img {
  opacity: 0.6;
}

/* ------------------------------------------------------------------------------------------------ */
/* FAB -------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------ */
.l-fab {
  position: fixed;
  right: 2vw;
  bottom: 3vw;
  z-index: 300;
}
.l-fab a {
  display: block;
  width: 40vw;
}
.l-fab a img {
  width: 100%;
  height: auto;
}
@media (min-width: 1024px) {
  .l-fab {
    display: none;
  }
}

/* FABアニメーション */
#js-fab.UpMove {
  animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime {
  from {
    opacity: 0;
    transform: translateY(320px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#js-fab.DownMove {
  animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 1;
    transform: translateY(320px);
  }
}


/* CTAボタンアニメーション */
.bounce-top {
  -webkit-animation: bounce-top 1.8s infinite both;
  animation: bounce-top 1.8s infinite both;
}

@keyframes bounce-top {
  0% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1;
  }
  49% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1;
  }
  50% {
    -webkit-transform: translateY(-45px);
    transform: translateY(-45px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 1;
  }
  62% {
    opacity: 1;
  }
  70% {
    -webkit-transform: translateY(-24px);
    transform: translateY(-24px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  82.5% {
    -webkit-transform: translateY(-12px);
    transform: translateY(-12px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  91% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  96.5% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  62.5%,
  77.5%,
  87.5%,
  93.5% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1;
  }
}