@charset "UTF-8";
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  list-style: none;
}
*:before, *:after {
  box-sizing: border-box;
}
*:focus {
  outline: none;
}

html {
  font-size: 62.5%;
  min-height: 100%;
  -webkit-overflow-scrolling: touch;
  position: relative;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html::-webkit-scrollbar {
  display: none;
}

body {
  font-family: "zen-maru-gothic", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 1.563vw;
  color: #eb68a2;
  background: #fffdfe;
  position: relative;
  z-index: 0;
}
body img {
  max-width: 100%;
  width: 100%;
}
@media screen and (max-width: 767px) {
  body {
    font-size: 4.206vw;
  }
  body img {
    pointer-events: none;
  }
}

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

.sp_inline {
  display: none;
}
@media screen and (max-width: 767px) {
  .sp_inline {
    display: inline-block;
  }
}

@media screen and (max-width: 767px) {
  .pc {
    display: none;
  }
}
.flex {
  display: flex;
}

.grid {
  display: grid;
}

section {
  position: relative;
  z-index: 0;
}

.active .inner-about {
  opacity: 1;
  transition-delay: 0.5s;
}

.inner {
  width: 90%;
  margin: 0 auto;
}
.inner-about {
  max-width: 74.167vw;
  height: 41.458vw;
  padding: 6.615vw 8.333vw;
  background: url(./images/about-bg.webp) no-repeat center top/contain;
  opacity: 0;
  transition: all 0.4s;
}
@media screen and (max-width: 767px) {
  .inner-about {
    width: 100%;
    max-width: none;
    height: 140.187vw;
    padding: 21.028vw 2.336vw 28.505vw;
    background: url(./images/about-bg.webp) no-repeat center top/cover;
  }
}

.active h1 {
  opacity: 1;
  transition-delay: 0.7s;
}
.active h2.h2-about {
  opacity: 1;
  transition-delay: 0.9s;
}

h1 {
  width: 33.854vw;
  margin: 0 auto;
  padding-top: 2.604vw;
  opacity: 0;
  transition: all ease-out 0.4s;
}
@media screen and (max-width: 767px) {
  h1 {
    width: 79.439vw;
    padding-top: 57.71vw;
  }
}

h2.h2-about {
  width: 41.198vw;
  margin: 0 auto;
  margin-bottom: 2.917vw;
  opacity: 0;
  transition: all 0.4s;
}
@media screen and (max-width: 767px) {
  h2.h2-about {
    width: 95.093vw;
    margin-bottom: 7.009vw;
  }
}
h2.h2-illust {
  width: 27.24vw;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  h2.h2-illust {
    width: 70.093vw;
  }
}

#load {
  background: #f7ebf3;
  position: fixed;
  height: 100svh;
  width: 100%;
  z-index: 999;
  transition: 0.2s;
  transition-delay: 2s;
}
#load.load_active {
  animation: view 0.5s ease-in-out forwards;
}
@keyframes view {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    pointer-events: none;
  }
}

main .grade_bg {
  background: #cef0fb;
  background: url(./images/bg_pattern.webp) repeat center top/5%, linear-gradient(180deg, rgb(206, 240, 251) 0%, rgb(255, 240, 250) 20%, rgb(255, 255, 237) 50%, rgb(206, 240, 251) 70%, rgb(255, 240, 250) 100%);
}
@media screen and (max-width: 767px) {
  main .grade_bg {
    margin-top: -7.009vw;
    background: #cef0fb;
    background: url(./images/bg_pattern.webp) repeat center top/11%, linear-gradient(180deg, rgb(255, 240, 250) 0%, rgb(255, 240, 250) 20%, rgb(255, 255, 237) 68%, rgb(206, 240, 251) 88%, rgb(255, 240, 250) 100%);
    position: relative;
    z-index: 1;
  }
}
main #mv {
  height: 56.25vw;
  background: url(./images/mv-bg.webp) no-repeat center top/cover;
}
main #mv::before {
  content: "";
  width: 100%;
  height: 4.01vw;
  background-image: url(./images/mv_ribbon.webp);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  bottom: -2.604vw;
  left: 0;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  main #mv {
    height: auto;
    background: none;
    overflow: hidden;
    z-index: auto;
  }
  main #mv::before {
    width: 194.159vw;
    height: 9.112vw;
    background-image: url(./images/sp/mv_ribbon.webp);
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
  }
  main #mv::after {
    content: "";
    width: 100%;
    height: 100lvh;
    background: url(./images/sp/mv-bg.webp) no-repeat center top/cover;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -3;
  }
}
@media screen and (min-width: 767px) {
  main #mv.active figure .mv_catch {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.7s;
  }
}
main #mv.active .mv_illust_li img {
  animation: floating-y 1.8s ease-in-out infinite alternate-reverse;
}
main #mv.active .mv_illust_li.animate_mochi {
  opacity: 1;
  animation: mochimochi 0.5s 1;
}
main #mv.active .mv_illust_li.mv_illust_li-02 img, main #mv.active .mv_illust_li.mv_illust_li-04 img {
  animation-delay: -0.9s;
}
main #mv.active .mv_illust_li.mv_illust_li-03 img, main #mv.active .mv_illust_li.mv_illust_li-05 img {
  animation-delay: -0.45s;
}
main #mv.active .mv_illust_li.mv_illust_li-07 img {
  animation-delay: -0.25s;
}
@media screen and (max-width: 767px) {
  main #mv.active .mv_illust_li.mv_illust_li-02 img {
    animation-delay: 0s;
  }
  main #mv.active .mv_illust_li.mv_illust_li-03 img {
    animation-delay: -0.2s;
  }
  main #mv.active .mv_illust_li.mv_illust_li-04 img, main #mv.active .mv_illust_li.mv_illust_li-01 img {
    animation-delay: -0.9s;
  }
  main #mv.active .mv_illust_li.mv_illust_li-05 img {
    animation-delay: -0.45s;
  }
  main #mv.active .mv_illust_li.mv_illust_li-07 img {
    animation-delay: -0.25s;
  }
}
main #mv.active .mv_deco_li.mv_deco_li-heart-01, main #mv.active .mv_deco_li.mv_deco_li-heart-03, main #mv.active .mv_deco_li.mv_deco_li-heart-05 {
  opacity: 1;
  transition-delay: 1s;
  animation: floating-y 1.8s ease-in-out infinite alternate-reverse;
}
main #mv.active .mv_deco_li.mv_deco_li-heart-02, main #mv.active .mv_deco_li.mv_deco_li-heart-04, main #mv.active .mv_deco_li.mv_deco_li-heart-06 {
  opacity: 1;
  transition-delay: 1s;
  animation: floating-y 1.8s ease-in-out 0.9s infinite alternate-reverse;
}
main #mv.active .mv_deco_li.mv_deco_li-kirakira-01, main #mv.active .mv_deco_li.mv_deco_li-kirakira-03, main #mv.active .mv_deco_li.mv_deco_li-kirakira-05 {
  animation: kirakira-move 2s ease-in-out infinite;
}
main #mv.active .mv_deco_li.mv_deco_li-kirakira-02, main #mv.active .mv_deco_li.mv_deco_li-kirakira-04, main #mv.active .mv_deco_li.mv_deco_li-kirakira-06 {
  animation: kirakira-move 2s ease-in-out -1s infinite;
}
main #mv.active .mv_deco_li.mv_deco_li-bubbles {
  opacity: 1;
  transition-delay: 1s;
}
main #mv.active .mv_deco_li.mv_deco_li-bubbles-01, main #mv.active .mv_deco_li.mv_deco_li-bubbles-03, main #mv.active .mv_deco_li.mv_deco_li-bubbles-05, main #mv.active .mv_deco_li.mv_deco_li-bubbles-07 {
  animation: bubbles-v-rich 5s ease-in-out infinite alternate;
}
main #mv.active .mv_deco_li.mv_deco_li-bubbles-02, main #mv.active .mv_deco_li.mv_deco_li-bubbles-04, main #mv.active .mv_deco_li.mv_deco_li-bubbles-06 {
  animation: bubbles-v-rich 7s ease-in-out infinite alternate;
  animation-direction: alternate-reverse;
}
main #mv figure {
  margin-top: 1.302vw;
  text-align: center;
}
main #mv figure .mv_catch {
  width: 63.594vw;
  opacity: 0;
  transform: translateY(10%);
  transition: all 0.4s;
}
@media screen and (max-width: 767px) {
  main #mv figure {
    margin-top: 0.701vw;
    margin-bottom: 16vw;
    opacity: 0;
    transform: translateY(10%);
    transition: all 0.4s;
  }
  main #mv figure.active {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.5s;
  }
  main #mv figure .mv_catch {
    width: 90.7vw;
    opacity: 1;
    transform: translateY(0);
  }
}
main #mv .mv_illust {
  width: 100%;
  max-width: 92.5vw;
  height: 45.885vw;
  position: absolute;
  top: 0;
  left: 6.406vw;
  z-index: -1;
}
@media screen and (max-width: 767px) {
  main #mv .mv_illust {
    max-width: none;
    height: 145.327vw;
    top: 9.813vw;
    left: 0;
  }
}
main #mv .mv_illust_li {
  position: absolute;
  opacity: 0;
  transition: all 0.4s;
}
main #mv .mv_illust_li img {
  transform: translateY(-2%);
}
main #mv .mv_illust_li-01 {
  width: 18.125vw;
  bottom: 0;
  left: 10.052vw;
  z-index: 2;
}
@media screen and (max-width: 767px) {
  main #mv .mv_illust_li-01 {
    width: 42.523vw;
    top: 0;
    bottom: auto;
    left: 29.206vw;
    z-index: 0;
  }
}
main #mv .mv_illust_li-02 {
  width: 17.135vw;
  top: 8.5vw;
  left: 0;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  main #mv .mv_illust_li-02 {
    width: 40.187vw;
    top: 10.047vw;
    left: -2.57vw;
  }
}
main #mv .mv_illust_li-03 {
  width: 16.094vw;
  top: 0;
  left: 15.521vw;
  z-index: 0;
}
@media screen and (max-width: 767px) {
  main #mv .mv_illust_li-03 {
    width: 37.85vw;
    top: 10.047vw;
    left: auto;
    right: -1.168vw;
    z-index: 1;
  }
}
main #mv .mv_illust_li-04 {
  width: 23.802vw;
  bottom: 0;
  right: 12.5vw;
  z-index: 3;
}
@media screen and (max-width: 767px) {
  main #mv .mv_illust_li-04 {
    width: 55.841vw;
    top: 53.738vw;
    bottom: auto;
    left: -15.888vw;
    right: auto;
  }
}
main #mv .mv_illust_li-05 {
  width: 19.271vw;
  top: 15.365vw;
  right: 0;
  z-index: 2;
}
@media screen and (max-width: 767px) {
  main #mv .mv_illust_li-05 {
    width: 45.093vw;
    top: 51.402vw;
    right: -9.579vw;
    z-index: 2;
  }
}
main #mv .mv_illust_li-06 {
  width: 19.271vw;
  top: 0;
  right: 21.563vw;
  z-index: 0;
}
@media screen and (max-width: 767px) {
  main #mv .mv_illust_li-06 {
    width: 46.963vw;
    top: auto;
    bottom: 0;
    left: 0;
    right: 2.57vw;
    z-index: 3;
  }
}
main #mv .mv_illust_li-07 {
  width: 20.052vw;
  top: 2.5vw;
  right: 9vw;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  main #mv .mv_illust_li-07 {
    width: 45.093vw;
    top: auto;
    bottom: 0;
    right: 5.374vw;
    z-index: 3;
  }
}
main #mv .mv_deco_li {
  position: absolute;
  z-index: -2;
  opacity: 0;
  transition: all ease-in-out 0.4s;
}
main #mv .mv_deco_li-heart-01 {
  width: 14.063vw;
  height: 7.76vw;
  background-image: url(./images/mv_deco-heart-01.webp);
  background-repeat: no-repeat;
  background-size: contain;
  top: 6.25vw;
  left: 57.552vw;
}
@media screen and (max-width: 767px) {
  main #mv .mv_deco_li-heart-01 {
    width: 31.308vw;
    height: 36.449vw;
    background-image: url(./images/sp/mv_deco-heart-01.webp);
    top: 9.346vw;
    left: 18.692vw;
  }
}
main #mv .mv_deco_li-heart-02 {
  width: 7.708vw;
  height: 6.667vw;
  background-image: url(./images/mv_deco-heart-02.webp);
  background-repeat: no-repeat;
  background-size: contain;
  top: 23.021vw;
  left: 33.49vw;
}
@media screen and (max-width: 767px) {
  main #mv .mv_deco_li-heart-02 {
    width: 15.187vw;
    height: 14.019vw;
    background-image: url(./images/sp/mv_deco-heart-02.webp);
    top: 147.196vw;
    left: 0;
  }
}
main #mv .mv_deco_li-heart-03 {
  width: 9.271vw;
  height: 10.833vw;
  background-image: url(./images/mv_deco-heart-03.webp);
  background-repeat: no-repeat;
  background-size: contain;
  top: 9.063vw;
  left: 34.74vw;
}
@media screen and (max-width: 767px) {
  main #mv .mv_deco_li-heart-03 {
    width: 31.308vw;
    height: 36.449vw;
    background-image: url(./images/sp/mv_deco-heart-01.webp);
    top: 100.467vw;
    left: 39.72vw;
  }
}
main #mv .mv_deco_li-heart-04 {
  width: 10.521vw;
  height: 11.146vw;
  background-image: url(./images/mv_deco-heart-04.webp);
  background-repeat: no-repeat;
  background-size: contain;
  top: 43.177vw;
  right: 2.344vw;
}
@media screen and (max-width: 767px) {
  main #mv .mv_deco_li-heart-04 {
    width: 24.065vw;
    height: 21.963vw;
    background-image: url(./images/sp/mv_deco-heart-04.webp);
    top: 142.523vw;
    right: 1.168vw;
  }
}
main #mv .mv_deco_li-heart-05 {
  width: 20.104vw;
  height: 28.438vw;
  background-image: url(./images/mv_deco-heart-05.webp);
  background-repeat: no-repeat;
  background-size: contain;
  top: 27.813vw;
  left: -3.854vw;
}
@media screen and (max-width: 767px) {
  main #mv .mv_deco_li-heart-05 {
    width: 15.187vw;
    height: 14.019vw;
    background-image: url(./images/sp/mv_deco-heart-02.webp);
    top: 195vw;
    left: 0;
  }
}
main #mv .mv_deco_li-heart-06 {
  width: 5.625vw;
  height: 6.354vw;
  background-image: url(./images/mv_deco-heart-06.webp);
  background-repeat: no-repeat;
  background-size: contain;
  top: 13.594vw;
  left: 0.885vw;
}
@media screen and (max-width: 767px) {
  main #mv .mv_deco_li-heart-06 {
    width: 24.065vw;
    height: 21.963vw;
    background-image: url(./images/sp/mv_deco-heart-04.webp);
    top: 192vw;
    left: auto;
    right: 1.168vw;
  }
}
main #mv .mv_deco_li-kirakira-01 {
  width: 6.771vw;
  height: 7.396vw;
  background-image: url(./images/mv_deco-kira-01.webp);
  background-repeat: no-repeat;
  background-size: contain;
  top: 7.031vw;
  left: 18.125vw;
}
@media screen and (max-width: 767px) {
  main #mv .mv_deco_li-kirakira-01 {
    width: 10.748vw;
    height: 11.682vw;
    background-image: url(./images/sp/mv_deco-kira-01.webp);
    top: 126.168vw;
    left: 31.542vw;
  }
}
main #mv .mv_deco_li-kirakira-02 {
  width: 5.052vw;
  height: 5.938vw;
  background-image: url(./images/mv_deco-kira-02.webp);
  background-repeat: no-repeat;
  background-size: contain;
  top: 20.469vw;
  left: 55.781vw;
}
@media screen and (max-width: 767px) {
  main #mv .mv_deco_li-kirakira-02 {
    width: 11.449vw;
    height: 12.383vw;
    background-image: url(./images/sp/mv_deco-kira-02.webp);
    top: 100.467vw;
    left: 0;
  }
}
main #mv .mv_deco_li-kirakira-03 {
  width: 7.656vw;
  height: 8.073vw;
  background-image: url(./images/mv_deco-kira-03.webp);
  background-repeat: no-repeat;
  background-size: contain;
  top: 35.885vw;
  left: 89.792vw;
}
@media screen and (max-width: 767px) {
  main #mv .mv_deco_li-kirakira-03 {
    width: 10.514vw;
    height: 11.449vw;
    background-image: url(./images/sp/mv_deco-kira-03.webp);
    top: 30.374vw;
    left: 0;
  }
}
main #mv .mv_deco_li-kirakira-04 {
  width: 5.729vw;
  height: 7.708vw;
  background-image: url(./images/mv_deco-kira-04.webp);
  background-repeat: no-repeat;
  background-size: contain;
  top: 34.375vw;
  left: -1.146vw;
}
@media screen and (max-width: 767px) {
  main #mv .mv_deco_li-kirakira-04 {
    width: 16.121vw;
    height: 16.822vw;
    background-image: url(./images/sp/mv_deco-kira-04.webp);
    top: 119.159vw;
    left: auto;
    right: 2.336vw;
  }
}
main #mv .mv_deco_li-kirakira-05 {
  width: 7.656vw;
  height: 8.073vw;
  background-image: url(./images/mv_deco-kira-05.webp);
  background-repeat: no-repeat;
  background-size: contain;
  top: 40.469vw;
  left: 1.719vw;
}
@media screen and (max-width: 767px) {
  main #mv .mv_deco_li-kirakira-05 {
    display: none;
  }
}
main #mv .mv_deco_li-kirakira-06 {
  width: 5.469vw;
  height: 6.615vw;
  background-image: url(./images/mv_deco-kira-06.webp);
  background-repeat: no-repeat;
  background-size: contain;
  top: 7.292vw;
  left: 88.594vw;
}
@media screen and (max-width: 767px) {
  main #mv .mv_deco_li-kirakira-06 {
    display: none;
  }
}
main #mv .mv_deco_li-bubbles {
  background-image: url(./images/mv_deco-bubbles-01.webp);
  background-repeat: no-repeat;
  background-size: contain;
  mix-blend-mode: screen;
}
main #mv .mv_deco_li-bubbles-01 {
  width: 4.583vw;
  height: 5.156vw;
  bottom: 1.042vw;
  right: 1.042vw;
}
@media screen and (max-width: 767px) {
  main #mv .mv_deco_li-bubbles-01 {
    width: 14.019vw;
    height: 15.888vw;
    bottom: 63.084vw;
    right: 1.402vw;
  }
}
main #mv .mv_deco_li-bubbles-02 {
  width: 9.479vw;
  height: 10.573vw;
  bottom: 5.729vw;
  right: 6.771vw;
}
@media screen and (max-width: 767px) {
  main #mv .mv_deco_li-bubbles-02 {
    display: none;
  }
}
main #mv .mv_deco_li-bubbles-03 {
  width: 5vw;
  height: 5.625vw;
  bottom: 5.208vw;
  left: 10.052vw;
}
@media screen and (max-width: 767px) {
  main #mv .mv_deco_li-bubbles-03 {
    width: 18.692vw;
    height: 21.028vw;
    bottom: 60.748vw;
    left: -1.869vw;
  }
}
main #mv .mv_deco_li-bubbles-04 {
  width: 4.167vw;
  height: 4.635vw;
  top: 7.344vw;
  left: 3.698vw;
}
@media screen and (max-width: 767px) {
  main #mv .mv_deco_li-bubbles-04 {
    display: none;
  }
}
main #mv .mv_deco_li-bubbles-05 {
  width: 8.229vw;
  height: 9.167vw;
  top: 34.323vw;
  left: 3.75vw;
}
@media screen and (max-width: 767px) {
  main #mv .mv_deco_li-bubbles-05 {
    display: none;
  }
}
main #mv .mv_deco_li-bubbles-06 {
  width: 9.531vw;
  height: 10.677vw;
  top: 4.01vw;
  right: 5vw;
}
@media screen and (max-width: 767px) {
  main #mv .mv_deco_li-bubbles-06 {
    width: 7.71vw;
    height: 8.645vw;
    top: 19.86vw;
    right: 21.729vw;
  }
}
main #mv .mv_deco_li-bubbles-07 {
  width: 5.208vw;
  height: 5.885vw;
  top: 10.625vw;
  right: 3.854vw;
}
@media screen and (max-width: 767px) {
  main #mv .mv_deco_li-bubbles-07 {
    width: 13.785vw;
    height: 15.654vw;
    top: 10.28vw;
    right: 23.832vw;
  }
}
main #mv .mv_deco_li-light {
  width: 101.875vw;
  height: 77.708vw;
  background-repeat: no-repeat;
  background-size: contain;
  top: -20.521vw;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
}
@media screen and (max-width: 767px) {
  main #mv .mv_deco_li-light {
    width: 313.318vw;
    height: 239.019vw;
    top: -51.402vw;
  }
}
main #mv .mv_deco_li-light-01 {
  background-image: url(./images/mv_deco-light-01.webp);
}
@media screen and (max-width: 767px) {
  main #mv .mv_deco_li-light-01 {
    background-image: url(./images/sp/mv_deco-light-01.webp);
  }
}
main #mv .mv_deco_li-light-02 {
  background-image: url(./images/mv_deco-light-02.webp);
}
@media screen and (max-width: 767px) {
  main #mv .mv_deco_li-light-02 {
    background-image: url(./images/sp/mv_deco-light-02.webp);
  }
}
main #mv .mv_deco_li-top-01 {
  width: 100%;
  height: 13.125vw;
  background-image: url(./images/mv_deco-top.webp);
  background-repeat: no-repeat;
  background-size: contain;
  top: 0;
  left: 0;
  opacity: 1;
}
@media screen and (max-width: 767px) {
  main #mv .mv_deco_li-top-01 {
    height: 34.346vw;
    background-image: url(./images/sp/mv_deco-top.webp);
  }
}
main #about {
  padding-top: 6.458vw;
  text-align: center;
  z-index: 2;
}
@media screen and (max-width: 767px) {
  main #about {
    padding-top: 17.523vw;
  }
}
main #about::before {
  content: "";
  width: 17.135vw;
  height: 19.01vw;
  background-image: url(./images/about_deco-kira-02.webp);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  bottom: -11.979vw;
  left: 7.917vw;
}
@media screen and (max-width: 767px) {
  main #about::before {
    width: 31.308vw;
    height: 35.748vw;
    bottom: -35.047vw;
    left: 0;
  }
}
main #about::after {
  content: "";
  width: 15.26vw;
  height: 20vw;
  background-image: url(./images/about_deco-kira-01.webp);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  bottom: -19.792vw;
  right: 12.917vw;
}
@media screen and (max-width: 767px) {
  main #about::after {
    width: 28.505vw;
    height: 37.383vw;
    bottom: -44.393vw;
    right: 0;
  }
}
main #about.active .note-paper {
  opacity: 1;
  transition-delay: 0.9s;
}
main #about .note-paper {
  margin-top: 2.917vw;
  line-height: 2.6;
  background-image: linear-gradient(to right, #eb68a2 50%, transparent 50%);
  background-position: bottom;
  background-size: 0.625vw 0.052vw;
  background-repeat: repeat-x;
  display: inline;
  padding-bottom: 0.885vw;
  word-break: break-all;
  opacity: 0;
  transition: all;
}
@media screen and (max-width: 767px) {
  main #about .note-paper {
    margin-top: 0;
    line-height: 2.4;
    background-size: 2.336vw 0.234vw;
    padding-bottom: 2.103vw;
  }
}
main #illust {
  height: 102.604vw;
  padding-top: 30.729vw;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  main #illust {
    height: 263.551vw;
    padding-top: 67.757vw;
    overflow: hidden;
  }
}
main #illust::before {
  content: "";
  width: 100%;
  height: 45.26vw;
  background-image: url(./images/illust_cloud.webp);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
}
@media screen and (max-width: 767px) {
  main #illust::before {
    width: 156.075vw;
    height: 98.598vw;
    background-image: url(./images/sp/illust_cloud.webp);
    left: 50%;
    transform: translateX(-50%);
  }
}
main #illust::after {
  content: "";
  width: 100%;
  height: 29.167vw;
  background-image: url(./images/illust_rainbow.webp);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  bottom: 31vw;
  left: 0;
  z-index: -1;
}
@media screen and (max-width: 767px) {
  main #illust::after {
    height: 85.748vw;
    background-image: url(./images/sp/illust_rainbow.webp);
    bottom: 60vw;
  }
}
main #illust .illust_box {
  width: 59.688vw;
  margin: 0 auto;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
  main #illust .illust_box {
    width: 100%;
    margin-top: 21.028vw;
  }
}
@media screen and (max-width: 767px) {
  main #illust .illust_box.active .illust_box_bottom {
    transform: translateY(108vw) !important;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
  }
}
main #illust .illust_box div {
  transition: all ease-out 0.4s;
}
@media screen and (max-width: 767px) {
  main #illust .illust_box div {
    transition: transform 0.05s ease-out;
  }
}
main #illust .illust_box_top {
  width: 59.688vw;
}
@media screen and (max-width: 767px) {
  main #illust .illust_box_top {
    width: 107.243vw;
    margin-left: -5.841vw;
  }
}
main #illust .illust_box_bottom {
  width: 54.063vw;
  margin-top: -29.167vw;
  margin-left: 6.615vw;
  position: relative;
  z-index: -1;
}
@media screen and (max-width: 767px) {
  main #illust .illust_box_bottom {
    width: 96.729vw;
    margin-top: -55vw;
    margin-left: 5.607vw;
  }
}
main #illust .illust_box_bottom.is-animating::before, main #illust .illust_box_bottom.is-animating::after {
  animation: pop-and-stay 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
main #illust .illust_box_bottom.is-animating::before {
  animation-delay: 0s;
}
main #illust .illust_box_bottom.is-animating::after {
  animation-delay: 0.1s;
}
main #illust .illust_box_bottom::before, main #illust .illust_box_bottom::after {
  content: "";
  position: absolute;
  opacity: 0;
  transform: scale(0) translateY(30px);
  transition: opacity 0.3s ease-out;
}
main #illust .illust_box_bottom::before {
  width: 11.354vw;
  height: 8.594vw;
  background-image: url(./images/illust_deco-left.webp);
  background-repeat: no-repeat;
  background-size: contain;
  top: 7vw;
  left: 2vw;
  transition-delay: 0.1s;
}
@media screen and (max-width: 767px) {
  main #illust .illust_box_bottom::before {
    width: 24.065vw;
    height: 18.224vw;
    top: -8vw;
    left: 1vw;
  }
}
main #illust .illust_box_bottom::after {
  width: 12.188vw;
  height: 9.219vw;
  background-image: url(./images/illust_deco-right.webp);
  background-repeat: no-repeat;
  background-size: contain;
  top: 6vw;
  right: 11vw;
  transition-delay: 0.15s;
}
@media screen and (max-width: 767px) {
  main #illust .illust_box_bottom::after {
    width: 22.664vw;
    height: 17.29vw;
    top: -8vw;
    right: 9vw;
  }
}
@keyframes pop-and-stay {
  0% {
    opacity: 0;
    transform: scale(0) translateY(30px) rotate(0deg);
  }
  60% {
    opacity: 1;
    /* 1.2倍まで大きく弾け、少し外側に傾ける */
    transform: scale(1.2) translateY(-10px) rotate(var(--pop-rotate, 10deg));
  }
  100% {
    opacity: 1;
    /* 定位置のサイズ1、角度も少し落ち着かせる */
    transform: scale(1) translateY(0) rotate(var(--final-rotate, 5deg));
  }
}
main #illust .illust_box_bottom::before {
  --pop-rotate: -15deg;
  --final-rotate: -5deg;
}
main #illust .illust_box_bottom::after {
  --pop-rotate: 15deg;
  --final-rotate: 5deg;
}
main #illust .illust_container {
  opacity: 0;
  visibility: hidden;
  /* 初期状態：箱の奥に小さく隠れているイメージ */
  transform: translateY(50px) scale(0.6);
  transition: opacity 0.6s ease-out, transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275), visibility 0.8s;
  pointer-events: none;
  position: relative;
  z-index: 3;
}
main #illust .illust_container.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1); /* 元のサイズに戻る */
  pointer-events: auto;
  transition-delay: 0.55s;
}
@media screen and (max-width: 767px) {
  main #illust .illust_container.active {
    transition-delay: 0.25s;
  }
}
main #illust .illust_container #illust_slider_inner {
  width: 100%;
  max-width: 80vw;
  margin: 0 auto;
  margin-top: 2.604vw;
  position: relative;
  height: 49.74vw;
}
@media screen and (max-width: 767px) {
  main #illust .illust_container #illust_slider_inner {
    max-width: none;
    margin-top: 11.682vw;
    height: 125.467vw;
  }
}
main #illust .illust_container .main_area {
  position: relative;
  width: 100%;
  height: 68%;
}
@media screen and (max-width: 767px) {
  main #illust .illust_container .main_area {
    width: 119%;
    height: 56%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}
main #illust .illust_container .illust_slider {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  position: relative;
}
main #illust .illust_container .illust_slider_li {
  position: absolute;
  height: 24.479vw;
  width: auto;
  top: 50%;
  left: 50%;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.6s;
  will-change: transform;
}
@media screen and (max-width: 767px) {
  main #illust .illust_container .illust_slider_li {
    height: 70.093vw;
  }
}
main #illust .illust_container .illust_slider_li.li_active img {
  animation: pyokon-high 0.8s cubic-bezier(0.4, 0, 0.2, 1.4) 1 forwards;
}
main #illust .illust_container .illust_slider_li img {
  height: 100%;
  width: auto;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
  transform-origin: bottom;
}
main #illust .illust_container {
  /* 名前・サムネイルの基本スタイル */
}
main #illust .illust_container #illust_name_slider {
  width: 14.635vw;
  height: 5.625vw;
  position: relative;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  main #illust .illust_container #illust_name_slider {
    width: 39.252vw;
    height: 15.187vw;
  }
}
main #illust .illust_container .illust_name_slider_li {
  width: 100%;
  height: 100%;
  color: #fffdfe;
  font-size: 2.083vw;
  opacity: 0;
  transition: 0.3s;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
  display: flex;
  justify-content: center;
  padding: 0.781vw;
}
@media screen and (max-width: 767px) {
  main #illust .illust_container .illust_name_slider_li {
    font-size: 5.374vw;
    padding: 2.336vw;
  }
}
main #illust .illust_container .illust_name_slider_li::before {
  content: "";
  width: 100%;
  height: 100%;
  background-image: url(./images/illust_ribbon-01.webp);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
main #illust .illust_container .illust_name_slider_li-02::before {
  background-image: url(./images/illust_ribbon-02.webp);
}
main #illust .illust_container .illust_name_slider_li-03::before {
  background-image: url(./images/illust_ribbon-03.webp);
}
main #illust .illust_container .illust_name_slider_li-04::before {
  background-image: url(./images/illust_ribbon-04.webp);
}
main #illust .illust_container .illust_name_slider_li-05::before {
  background-image: url(./images/illust_ribbon-05.webp);
}
main #illust .illust_container .illust_name_slider_li-06::before {
  background-image: url(./images/illust_ribbon-06.webp);
}
main #illust .illust_container .illust_name_slider_li-07::before {
  background-image: url(./images/illust_ribbon-07.webp);
}
main #illust .illust_container .name_active {
  opacity: 1 !important;
}
main #illust .illust_container #illust_thumb_slider {
  display: none;
}
@media screen and (max-width: 767px) {
  main #illust .illust_container #illust_thumb_slider {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.168vw 3.505vw;
    width: 100%;
    margin-top: 7.009vw;
  }
}
main #illust .illust_container .illust_thumb_slider_li {
  display: flex;
  width: 16.355vw;
  cursor: pointer;
  transition: 0.3s;
  position: relative;
}
main #illust .illust_container .illust_thumb_slider_li::before {
  content: "";
  width: 16.355vw;
  height: 14.72vw;
  background-image: url(./images/sp/illust_btn-line.webp);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 53%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: all 0.4s;
}
main #illust .illust_container #illust_thumb_slider::after {
  content: "";
  display: block;
  width: 100%;
  order: 0;
}
main #illust .illust_container .illust_thumb_slider_li:nth-child(-n+3) {
  order: 1;
}
main #illust .illust_container #illust_thumb_slider::before {
  content: "";
  flex-basis: 100%;
  width: 100%;
  order: 2;
}
main #illust .illust_container .illust_thumb_slider_li:nth-child(n+4) {
  order: 3;
}
main #illust .illust_container .thumb_active {
  opacity: 1;
  transform: scale(1.1);
}
main #illust .illust_container .thumb_active::before {
  opacity: 1;
}
main #illust .illust_container .slider_option {
  position: relative;
  width: 43%;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  main #illust .illust_container .slider_option {
    width: 85%;
  }
}
main #illust .illust_container .nav_btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;
  width: 5.052vw;
  height: 5.156vw;
  background: none;
  border: none;
  cursor: pointer;
  transition: transform 0.2s;
}
main #illust .illust_container .nav_btn::before {
  content: "";
  width: 100%;
  height: 100%;
  background-image: url(./images/icon-arrow.webp);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 0;
  left: 0;
}
@media screen and (max-width: 767px) {
  main #illust .illust_container .nav_btn {
    width: 13.551vw;
    height: 14.019vw;
  }
}
@media screen and (min-width: 767px) {
  main #illust .illust_container .nav_btn:hover {
    transform: translateY(-50%) scale(1.1);
  }
}
@media screen and (max-width: 767px) {
  main #illust .illust_container .nav_btn:active {
    transform: translateY(-50%) scale(1.1);
  }
}
main #illust .illust_container .nav_btn.prev {
  left: 0;
}
main #illust .illust_container .nav_btn.next {
  right: 0;
}
main #illust .illust_container .nav_btn.next::before {
  transform: scale(-1, 1);
}
main #goods {
  margin-top: -4.687vw;
  padding-bottom: 7.135vw;
  z-index: auto;
}
@media screen and (max-width: 767px) {
  main #goods {
    margin-top: -23.364vw;
    padding-bottom: 14.019vw;
  }
}
main #goods .goods_rainbow_bg {
  width: 100%;
  height: 44.792vw;
  position: absolute;
  top: -15vw;
  left: 0;
  z-index: 0;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  main #goods .goods_rainbow_bg {
    height: 81.308vw;
    top: -26vw;
  }
}
main #goods .goods_rainbow_bg::before {
  content: "";
  width: 94.323vw;
  height: 56.771vw;
  background-image: url(./images/goods_rainbow.webp);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
  main #goods .goods_rainbow_bg::before {
    width: 134.813vw;
    height: 81.308vw;
    background-image: url(./images/sp/goods_rainbow.webp);
  }
}
main #goods figure {
  text-align: center;
  position: relative;
  z-index: 2;
}
main #goods figure .goods_txt {
  width: 34.167vw;
  opacity: 0;
  transform: translateY(10%);
  transition: all 0.9s;
}
main #goods figure .goods_txt.active {
  opacity: 1;
  transform: translateY(0);
}
@media screen and (max-width: 767px) {
  main #goods figure .goods_txt {
    width: 83.178vw;
  }
}

footer {
  background: url(./images/footer_bg.webp) no-repeat center top/contain, linear-gradient(rgba(255, 255, 255, 0) 10%, #fff 20%, #fff);
  font-size: 0.833vw;
  line-height: 1.5;
  text-align: center;
  margin-top: -3.125vw;
  padding-top: 6.563vw;
  padding-bottom: 2.5vw;
  position: inherit;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  footer {
    background: url(./images/sp/footer_bg.webp) no-repeat center top/contain, linear-gradient(rgba(255, 255, 255, 0) 10%, #fff 20%, #fff);
    font-size: 2.804vw;
    padding-top: 12vw;
    padding-bottom: 7vw;
  }
}
footer p:first-of-type {
  margin-bottom: 0.833vw;
}
@media screen and (max-width: 767px) {
  footer p:first-of-type {
    margin-bottom: 3.972vw;
  }
}
footer .logo_ap {
  width: 7.135vw;
  margin: 0 auto;
  margin-top: 1.302vw;
}
@media screen and (max-width: 767px) {
  footer .logo_ap {
    width: 21.729vw;
    margin-top: 4.673vw;
  }
}
footer .logo_ap a {
  display: block;
  transition: all 0.4s;
}
@media screen and (min-width: 767px) {
  footer .logo_ap a:hover {
    opacity: 0.6;
  }
}
footer .btn_top {
  width: 8.854vw;
  height: 6.146vw;
  position: absolute;
  top: 7.969vw;
  right: 12.917vw;
}
@media screen and (max-width: 767px) {
  footer .btn_top {
    width: 13.318vw;
    height: 9.346vw;
    top: 25vw;
    right: 4.5vw;
  }
}
footer .btn_top a {
  display: block;
  position: relative;
}
footer .btn_top a::before {
  content: "";
  width: 9.375vw;
  height: 3.906vw;
  background-image: url(./images/back-top.webp);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: -2.656vw;
  left: -0.26vw;
  transition: all 0.4s;
}
@media screen and (max-width: 767px) {
  footer .btn_top a::before {
    width: 14.252vw;
    height: 5.841vw;
    top: -5vw;
    left: -0.5vw;
    animation: btn-top 1s ease infinite alternate-reverse;
  }
}
@media screen and (min-width: 767px) {
  footer .btn_top a:hover::before {
    transform: translateY(-35%);
  }
}

.x_btn {
  width: 20vw;
  height: 3.06vw;
  margin: 0 auto;
  position: relative;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2vw;
  transition: 0.2s;
}
@media screen and (min-width: 767px) {
  .x_btn:hover {
    transform: scale(1.02);
  }
}
@media screen and (max-width: 767px) {
  .x_btn {
    width: 50vw;
    height: 7.65vw;
    margin-bottom: 4vw;
  }
}
.x_btn::before {
  content: "";
  width: 1.66vw;
  height: 1.66vw;
  background: url(./images/x_star.webp) no-repeat center center/contain;
  position: absolute;
  top: 60%;
  left: -10%;
  animation: star 3s ease-in-out infinite;
  pointer-events: none;
}
@media screen and (max-width: 767px) {
  .x_btn::before {
    width: 5.06vw;
    height: 5.06vw;
    left: -13%;
  }
}
.x_btn::after {
  content: "";
  width: 20.31vw;
  height: 4.06vw;
  background: url(./images/x_frame.webp) no-repeat center center/contain;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2;
}
@media screen and (max-width: 767px) {
  .x_btn::after {
    width: 51vw;
    height: 10.15vw;
    top: 43%;
  }
}
.x_btn a {
  width: 96%;
  height: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  position: relative;
  z-index: 1;
  background: linear-gradient(to right, #fbd5e6, #fdead5, #e6d5f9, #cce9fd);
}
.x_btn a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: linear-gradient(to right, #cce9fd, #e6d5f9, #fdead5, #fbd5e6);
  transition: opacity 0.5s ease-in-out;
  z-index: 0;
  border-radius: 50px;
}
@media screen and (min-width: 767px) {
  .x_btn a:hover::before {
    opacity: 1;
  }
}
.x_btn a::after {
  content: "";
  width: 1.66vw;
  height: 1.66vw;
  background: url(./images/x_star.webp) no-repeat center center/contain;
  position: absolute;
  top: 60%;
  right: -12%;
  animation: star 3s ease-in-out 1s infinite reverse;
  pointer-events: none;
}
@media screen and (max-width: 767px) {
  .x_btn a::after {
    width: 5.06vw;
    height: 5.06vw;
    right: -14%;
  }
}
.x_btn a span {
  display: block;
  width: 85%;
  position: relative;
  z-index: 1;
}
.x_btn a span img {
  width: 100%;
  height: auto;
  vertical-align: middle;
}
.x_btn a span::before {
  content: "";
  width: 1.3vw;
  height: 1.3vw;
  background: url(./images/x_star.webp) no-repeat center center/contain;
  position: absolute;
  top: 0%;
  right: -30%;
  animation: star 3s ease-in-out 1.5s infinite;
  pointer-events: none;
}
@media screen and (max-width: 767px) {
  .x_btn a span::before {
    width: 4.06vw;
    height: 4.06vw;
    top: -10%;
  }
}
.x_btn a span::after {
  content: "";
  width: 1.3vw;
  height: 1.3vw;
  background: url(./images/x_star.webp) no-repeat center center/contain;
  position: absolute;
  top: 0%;
  left: -30%;
  animation: star 3s ease-in-out 0.5s infinite reverse;
  pointer-events: none;
}
@media screen and (max-width: 767px) {
  .x_btn a span::after {
    width: 4.06vw;
    height: 4.06vw;
    top: -10%;
  }
}

/* slider*/
/* 矢印カスタマイズ */
@keyframes mochimochi {
  0% {
    transform: scale(1, 0.8);
  }
  20% {
    transform: scale(0.8, 1.1);
  }
  100% {
    transform: scale(1, 1);
  }
}
@keyframes kirakira-move {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@keyframes floating-y {
  0% {
    transform: translateY(-2%);
  }
  100% {
    transform: translateY(2%);
  }
}
@keyframes bubbles-v-rich {
  0% {
    transform: translate(-15px, -10%) rotate(-5deg);
  }
  50% {
    transform: translate(0, 8%) rotate(0deg);
  }
  100% {
    transform: translate(15px, -10%) rotate(5deg);
  }
}
@keyframes pyokon-high {
  0% {
    transform: translateY(0);
  }
  15% {
    transform: translateY(2px);
  }
  45% {
    transform: translateY(-60px);
  }
  65% {
    transform: translateY(0);
  }
  70% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes btn-top {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-30%);
  }
}
@keyframes star {
  0%, 100% {
    filter: contrast(3);
  }
  25%, 75% {
    filter: contrast(1);
  }
}/*# sourceMappingURL=style.css.map */