:root {
  --drop-shadow: drop-shadow(10px 10px 24px rgba(0, 0, 0, 0.1));
}

@media only screen and (max-width: 768px) {
  :root {
    --drop-shadow: drop-shadow(1.5625vw 1.5625vw 2.34375vw rgba(0, 0, 0, 0.1));
  }
}
/* body
---------------------------------------------------*/
body {
  background-color: #f1a2c5;
}

#Footer {
  margin-top: 0;
  padding-top: 80px;
}

sup {
  position: static;
  font-size: 50%;
  vertical-align: super;
}

/* wrap */
#wrapper {
  min-width: auto;
  overflow: hidden;
}

#page-shinako {
  width: 100%;
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-feature-settings: "palt";
  background-color: #fae7f0;
  margin: 0 auto;
}
#page-shinako img {
  max-width: 100%;
  height: auto;
}

.btn_cart {
  border-color: #5b3468;
  background-color: #5b3468;
  margin-top: min(40px, 3.0769230769vw);
}
@media screen and (max-width: 768px) {
  .btn_cart {
    width: 78.125vw;
    height: 12.5vw;
    margin-top: 5.9375vw;
  }
}
.btn_cart a {
  text-indent: 1.3em;
  line-height: 76px;
}
@media screen and (max-width: 768px) {
  .btn_cart a {
    line-height: calc(12.5vw - 4px);
    font-size: 4.6875vw;
  }
}
.btn_cart a span {
  display: inline-block;
  letter-spacing: 0;
  vertical-align: middle;
  text-indent: 0.5em;
}
.btn_cart a span:before {
  left: -1.2em;
  top: 46%;
  width: min(30px, 2.3076923077vw);
  height: min(32px, 2.4615384615vw);
  background-image: url("../img/icon_cart.svg");
}
@media screen and (max-width: 768px) {
  .btn_cart a span:before {
    width: 4.6875vw;
    height: 5vw;
  }
}
.btn_cart:hover {
  background-color: #fff;
}
.btn_cart:hover a {
  color: #5b3468;
}
.btn_cart:hover a span:before {
  background-image: url("../img/icon_cart_on.svg");
}

/* hero
---------------------------------------------------*/
#hero {
  position: relative;
  width: 100%;
  background-color: #f1a2c5;
  margin: 0 auto;
  z-index: 10;
}
#hero .inner {
  position: relative;
  width: 100%;
  max-width: 1300px;
  aspect-ratio: 1300/939;
  margin: 0 auto;
  z-index: 2;
}
@media screen and (min-width: 1560px) {
  #hero .inner {
    max-width: calc(1300px * 1.2);
  }
}
@media screen and (max-width: 768px) {
  #hero .inner {
    aspect-ratio: 640/759;
  }
}
#hero .inner img {
  width: 100%;
  max-width: none;
  user-select: none;
  pointer-events: none;
}
#hero .inner .hero-logo {
  position: absolute;
  top: min(675px, 51.9230769231vw);
  left: min(65px, 5vw);
  width: min(1170px, 90vw);
  z-index: 40;
}
@media screen and (min-width: 1560px) {
  #hero .inner .hero-logo {
    top: min(675px * 1.2, 62.3076923077vw);
    left: min(65px * 1.2, 6vw);
    width: min(1170px * 1.2, 108vw);
  }
}
@media screen and (max-width: 768px) {
  #hero .inner .hero-logo {
    top: 102.03125vw;
    left: 0.9375vw;
    width: 98.4375vw;
  }
}
#hero .inner .hero-shinako {
  position: absolute;
  top: min(-5px, -0.3846153846vw);
  left: min(-6px, -0.4615384615vw);
  width: min(908px, 69.8461538462vw);
  z-index: 12;
}
@media screen and (min-width: 1560px) {
  #hero .inner .hero-shinako {
    top: min(-5px * 1.2, -0.4615384615vw);
    left: min(-6px * 1.2, -0.5538461538vw);
    width: min(908px * 1.2, 83.8153846154vw);
  }
}
@media screen and (max-width: 768px) {
  #hero .inner .hero-shinako {
    top: 2.1875vw;
    left: -12.03125vw;
    width: 113.4375vw;
  }
}
#hero .inner .hero-item01 {
  position: absolute;
  top: min(43px, 3.3076923077vw);
  left: min(739px, 56.8461538462vw);
  width: min(138px, 10.6153846154vw);
  z-index: 23;
}
@media screen and (min-width: 1560px) {
  #hero .inner .hero-item01 {
    top: min(43px * 1.2, 3.9692307692vw);
    left: min(739px * 1.2, 68.2153846154vw);
    width: min(138px * 1.2, 12.7384615385vw);
  }
}
@media screen and (max-width: 768px) {
  #hero .inner .hero-item01 {
    top: 31.09375vw;
    left: 64.6875vw;
    width: 16.09375vw;
  }
}
#hero .inner .hero-item02 {
  position: absolute;
  top: min(98px, 7.5384615385vw);
  left: min(865px, 66.5384615385vw);
  width: min(157px, 12.0769230769vw);
  z-index: 22;
}
@media screen and (min-width: 1560px) {
  #hero .inner .hero-item02 {
    top: min(98px * 1.2, 9.0461538462vw);
    left: min(865px * 1.2, 79.8461538462vw);
    width: min(157px * 1.2, 14.4923076923vw);
  }
}
@media screen and (max-width: 768px) {
  #hero .inner .hero-item02 {
    top: 37.8125vw;
    left: 77.34375vw;
    width: 18.125vw;
  }
}
#hero .inner .hero-item03 {
  position: absolute;
  top: min(309px, 23.7692307692vw);
  left: min(997px, 76.6923076923vw);
  width: min(241px, 18.5384615385vw);
  z-index: 21;
}
@media screen and (min-width: 1560px) {
  #hero .inner .hero-item03 {
    top: min(309px * 1.2, 28.5230769231vw);
    left: min(997px * 1.2, 92.0307692308vw);
    width: min(241px * 1.2, 22.2461538462vw);
  }
}
@media screen and (max-width: 768px) {
  #hero .inner .hero-item03 {
    top: 9.6875vw;
    left: 67.65625vw;
    width: 27.5vw;
  }
}
#hero .inner .hero-heart01 {
  position: absolute;
  top: min(42px, 3.2307692308vw);
  left: min(1053px, 81vw);
  width: min(151px, 11.6153846154vw);
  z-index: 31;
}
@media screen and (min-width: 1560px) {
  #hero .inner .hero-heart01 {
    top: min(42px * 1.2, 3.8769230769vw);
    left: min(1053px * 1.2, 97.2vw);
    width: min(151px * 1.2, 13.9384615385vw);
  }
}
@media screen and (max-width: 768px) {
  #hero .inner .hero-heart01 {
    top: 2.03125vw;
    left: 85vw;
    width: 15.9375vw;
    z-index: 20;
  }
}
#hero .inner .hero-heart02 {
  position: absolute;
  top: min(573px, 44.0769230769vw);
  left: min(1147px, 88.2307692308vw);
  width: min(109px, 8.3846153846vw);
  z-index: 32;
}
@media screen and (min-width: 1560px) {
  #hero .inner .hero-heart02 {
    top: min(573px * 1.2, 52.8923076923vw);
    left: min(1147px * 1.2, 105.8769230769vw);
    width: min(109px * 1.2, 10.0615384615vw);
  }
}
@media screen and (max-width: 768px) {
  #hero .inner .hero-heart02 {
    display: none;
  }
}
#hero .inner .hero-heart03 {
  position: absolute;
  top: min(503px, 38.6923076923vw);
  left: min(21px, 1.6153846154vw);
  width: min(162px, 12.4615384615vw);
  z-index: 33;
}
@media screen and (min-width: 1560px) {
  #hero .inner .hero-heart03 {
    top: min(503px * 1.2, 46.4307692308vw);
    left: min(21px * 1.2, 1.9384615385vw);
    width: min(162px * 1.2, 14.9538461538vw);
  }
}
@media screen and (max-width: 768px) {
  #hero .inner .hero-heart03 {
    top: 68.90625vw;
    left: -3.90625vw;
    width: 25.3125vw;
  }
}
#hero .inner .hero-cloud {
  position: absolute;
  top: min(440px, 33.8461538462vw);
  left: max(-219px, -16.8461538462vw);
  width: min(2606px, 200.4615384615vw);
  z-index: 13;
}
@media screen and (min-width: 1560px) {
  #hero .inner .hero-cloud {
    top: min(440px * 1.2, 40.6153846154vw);
    left: max(-219px * 1.2, -20.2153846154vw);
    width: min(2606px * 1.2, 240.5538461538vw);
  }
}
@media screen and (max-width: 768px) {
  #hero .inner .hero-cloud {
    top: 73.125vw;
    left: 0;
    width: 100%;
  }
}
#hero .inner .hero-cloud::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 6.1538461538vw;
  background-color: #fae7f0;
  z-index: 1;
}
@media screen and (min-width: 1560px) {
  #hero .inner .hero-cloud::before {
    height: min(55px * 1.2, 5.0769230769vw);
  }
}
@media screen and (max-width: 768px) {
  #hero .inner .hero-cloud::before {
    height: 8.59375vw;
  }
}
#hero .hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(136, 112, 178, 0.5) 60%, rgb(136, 112, 178) 77%);
  z-index: 1;
}
#hero .hero-bg-inner {
  position: relative;
  width: 100%;
  max-width: 1300px;
  height: 100%;
  margin-inline: auto;
}
#hero .hero-bg-inner .hero-rainbow {
  position: absolute;
  top: min(15px, 1.1538461538vw);
  left: min(28px, 2.1538461538vw);
  width: min(1486px, 114.3076923077vw);
  z-index: 1;
}
@media screen and (min-width: 1560px) {
  #hero .hero-bg-inner .hero-rainbow {
    top: min(15px * 1.2, 1.3846153846vw);
    left: min(28px * 1.2, 2.5846153846vw);
    width: min(1486px * 1.2, 137.1692307692vw);
  }
}
@media screen and (max-width: 768px) {
  #hero .hero-bg-inner .hero-rainbow {
    top: -3.90625vw;
    left: -9.21875vw;
    width: 162.1875vw;
  }
}
#hero .hero-bg-inner .hero-star01 {
  position: absolute;
  top: min(666px, 51.2307692308vw);
  left: min(22px, 1.6923076923vw);
  width: min(70px, 5.3846153846vw);
  z-index: 2;
}
@media screen and (min-width: 1560px) {
  #hero .hero-bg-inner .hero-star01 {
    top: min(666px * 1.2, 61.4769230769vw);
    left: min(22px * 1.2, 2.0307692308vw);
    width: min(70px * 1.2, 6.4615384615vw);
  }
}
@media screen and (max-width: 768px) {
  #hero .hero-bg-inner .hero-star01 {
    top: 0.46875vw;
    left: 1.71875vw;
    width: 10.9375vw;
  }
}
#hero .hero-bg-inner .hero-star02 {
  position: absolute;
  top: min(58px, 4.4615384615vw);
  left: min(826px, 63.5384615385vw);
  width: min(49px, 3.7692307692vw);
  z-index: 3;
}
@media screen and (min-width: 1560px) {
  #hero .hero-bg-inner .hero-star02 {
    top: min(58px * 1.2, 5.3538461538vw);
    left: min(826px * 1.2, 76.2461538462vw);
    width: min(49px * 1.2, 4.5230769231vw);
  }
}
@media screen and (max-width: 768px) {
  #hero .hero-bg-inner .hero-star02 {
    top: 29.375vw;
    left: 92.65625vw;
    width: 7.65625vw;
  }
}
#hero .hero-bg-inner .hero-star03 {
  position: absolute;
  top: min(44px, 3.3846153846vw);
  left: min(53px, 4.0769230769vw);
  width: min(49px, 3.7692307692vw);
  z-index: 4;
}
@media screen and (min-width: 1560px) {
  #hero .hero-bg-inner .hero-star03 {
    top: min(44px * 1.2, 4.0615384615vw);
    left: min(53px * 1.2, 4.8923076923vw);
    width: min(49px * 1.2, 4.5230769231vw);
  }
}
@media screen and (max-width: 768px) {
  #hero .hero-bg-inner .hero-star03 {
    top: 50.9375vw;
    left: 94.375vw;
    width: 7.65625vw;
  }
}
#hero .hero-bg-inner .hero-star04 {
  position: absolute;
  top: min(275px, 21.1538461538vw);
  left: min(1238px, 95.2307692308vw);
  width: min(49px, 3.7692307692vw);
  z-index: 5;
}
@media screen and (min-width: 1560px) {
  #hero .hero-bg-inner .hero-star04 {
    top: min(275px * 1.2, 25.3846153846vw);
    left: min(1238px * 1.2, 114.2769230769vw);
    width: min(49px * 1.2, 4.5230769231vw);
  }
}
@media screen and (max-width: 768px) {
  #hero .hero-bg-inner .hero-star04 {
    top: 42.8125vw;
    left: 141.875vw;
    width: 7.65625vw;
  }
}
#hero .hero-bg-inner .hero-star05 {
  position: absolute;
  top: min(281px, 21.6153846154vw);
  left: min(1138px, 87.5384615385vw);
  width: min(57px, 4.3846153846vw);
  z-index: 6;
}
@media screen and (min-width: 1560px) {
  #hero .hero-bg-inner .hero-star05 {
    top: min(281px * 1.2, 25.9384615385vw);
    left: min(1138px * 1.2, 105.0461538462vw);
    width: min(57px * 1.2, 5.2615384615vw);
  }
}
@media screen and (max-width: 768px) {
  #hero .hero-bg-inner .hero-star05 {
    top: 43.75vw;
    left: 126.25vw;
    width: 8.90625vw;
  }
}

#hero.js-hero-animated .hero-logo {
  opacity: 0;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-delay: 2.4s;
}
#hero.js-hero-animated .hero-shinako {
  opacity: 0;
  translate: min(100px, 7.6923076923vw) min(100px, 7.6923076923vw);
  transition: opacity 0.5s, translate 1s;
  transition-delay: 1.2s;
}
#hero.js-hero-animated .hero-item01,
#hero.js-hero-animated .hero-item02,
#hero.js-hero-animated .hero-item03 {
  opacity: 0;
  translate: min(100px, 7.6923076923vw) min(100px, 7.6923076923vw);
  transition: opacity 0.5s, translate 1s;
}
#hero.js-hero-animated .hero-item01 {
  transition-delay: 1.2s;
}
#hero.js-hero-animated .hero-item02 {
  transition-delay: 1.2s;
}
#hero.js-hero-animated .hero-item03 {
  transition-delay: 1.2s;
}
#hero.js-hero-animated .hero-heart01,
#hero.js-hero-animated .hero-heart02,
#hero.js-hero-animated .hero-heart03 {
  opacity: 0;
  animation-duration: 2s;
  animation-fill-mode: both;
}
#hero.js-hero-animated .hero-heart01 {
  animation-delay: 1.8s;
}
#hero.js-hero-animated .hero-heart02 {
  animation-delay: 2.2s;
}
#hero.js-hero-animated .hero-heart03 {
  animation-delay: 2s;
}
#hero.js-hero-animated .hero-bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f1a2c5;
  transition: opacity 3s;
}
#hero.js-hero-animated .hero-bg .hero-rainbow {
  opacity: 0;
  clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  transition: opacity 0.5s, clip-path 1s;
  transition-delay: 0.8s;
}
#hero.js-hero-animated .hero-bg .hero-star01,
#hero.js-hero-animated .hero-bg .hero-star02,
#hero.js-hero-animated .hero-bg .hero-star03,
#hero.js-hero-animated .hero-bg .hero-star04,
#hero.js-hero-animated .hero-bg .hero-star05 {
  opacity: 0;
  transition: opacity 0.8s;
  transition-delay: 1.5s;
}
#hero.js-hero-animated .hero-bg .hero-star01 {
  transition-delay: 1.5s;
}
#hero.js-hero-animated .hero-bg .hero-star02 {
  transition-delay: 1.6s;
}
#hero.js-hero-animated .hero-bg .hero-star03 {
  transition-delay: 1.7s;
}
#hero.js-hero-animated .hero-bg .hero-star04 {
  transition-delay: 1.8s;
}
#hero.js-hero-animated .hero-bg .hero-star05 {
  transition-delay: 1.9s;
}
#hero.js-hero-animated.is-did .hero-logo {
  opacity: 1;
  animation-name: fadeInUp;
}
#hero.js-hero-animated.is-did .hero-shinako {
  opacity: 1;
  translate: 0 0;
}
#hero.js-hero-animated.is-did .hero-item01,
#hero.js-hero-animated.is-did .hero-item02,
#hero.js-hero-animated.is-did .hero-item03 {
  opacity: 1;
  translate: 0 0;
}
#hero.js-hero-animated.is-did .hero-heart01,
#hero.js-hero-animated.is-did .hero-heart02,
#hero.js-hero-animated.is-did .hero-heart03 {
  opacity: 1;
  animation-name: bounceInUp;
}
#hero.js-hero-animated.is-did .hero-bg::after {
  opacity: 0;
}
#hero.js-hero-animated.is-did .hero-bg .hero-rainbow {
  opacity: 1;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
#hero.js-hero-animated.is-did .hero-bg .hero-star01,
#hero.js-hero-animated.is-did .hero-bg .hero-star02,
#hero.js-hero-animated.is-did .hero-bg .hero-star03,
#hero.js-hero-animated.is-did .hero-bg .hero-star04,
#hero.js-hero-animated.is-did .hero-bg .hero-star05 {
  opacity: 1;
}

/* award
---------------------------------------------------*/
#award {
  position: relative;
}
#award .inner {
  padding-top: 8.3076923077vw;
  padding-bottom: min(86px, 6.6153846154vw);
}
@media screen and (max-width: 768px) {
  #award .inner {
    padding-top: 16.40625vw;
    padding-bottom: 11.875vw;
  }
}
#award .inner .figure {
  width: min(533px, 41vw);
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  #award .inner .figure {
    width: 64.6875vw;
  }
}
#award .inner .figure img {
  width: 100%;
}
#award .inner .note {
  text-align: center;
  line-height: 1.66;
  color: rgba(0, 0, 0, 0.8);
  font-size: min(12px, 0.9230769231vw);
  letter-spacing: 0.1em;
  margin-top: min(20px, 1.5384615385vw);
}
@media screen and (max-width: 768px) {
  #award .inner .note {
    line-height: 1.64;
    font-size: 2.1875vw;
    letter-spacing: 0.075em;
    margin: 3.125vw 3.125vw 0;
  }
}

/* message
---------------------------------------------------*/
#message {
  position: relative;
}
#message .inner .message-wrap {
  position: relative;
  width: min(806px, 62vw);
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  #message .inner .message-wrap {
    width: 93.59375vw;
  }
}
#message .inner .message-wrap img {
  width: 100%;
}
#message .inner .message-wrap .message-title {
  position: absolute;
  top: max(-56px, -4.3076923077vw);
  left: min(232px, 17.8461538462vw);
  width: min(597px, 45.9230769231vw);
  z-index: 10;
}
@media screen and (max-width: 768px) {
  #message .inner .message-wrap .message-title {
    top: -3.90625vw;
    left: 26.25vw;
    width: 65.3125vw;
  }
}
#message .inner .message-wrap .message-letter {
  width: 100%;
  filter: drop-shadow(3rem 3rem 3rem rgba(189, 132, 159, 0.3));
}
#message .inner .message-wrap .message-heart01 {
  position: absolute;
  top: min(172px, 13.2307692308vw);
  left: min(781px, 60.0769230769vw);
  width: min(110px, 8.4615384615vw);
}
@media screen and (max-width: 768px) {
  #message .inner .message-wrap .message-heart01 {
    top: 21.25vw;
    left: 80vw;
    width: 12.03125vw;
  }
}
#message .inner .message-wrap .message-heart02 {
  position: absolute;
  top: min(103px, 7.9230769231vw);
  left: max(-118px, -9.0769230769vw);
  width: min(179px, 13.7692307692vw);
}
@media screen and (max-width: 768px) {
  #message .inner .message-wrap .message-heart02 {
    top: 13.59375vw;
    left: -7.5vw;
    width: 19.6875vw;
  }
}
#message .inner .message-wrap .message-heart03 {
  position: absolute;
  top: min(425px, 32.6923076923vw);
  left: min(733px, 56.3846153846vw);
  width: min(188px, 14.4615384615vw);
}
@media screen and (max-width: 768px) {
  #message .inner .message-wrap .message-heart03 {
    top: 48.75vw;
    left: 81.09375vw;
    width: 20.625vw;
  }
}

#message .inner.animated .message-heart01,
#message .inner.animated .message-heart02,
#message .inner.animated .message-heart03 {
  opacity: 0;
  animation-duration: 2s;
  animation-fill-mode: both;
}
#message .inner.animated .message-heart01 {
  animation-delay: 0.4s;
}
#message .inner.animated .message-heart02 {
  animation-delay: 0.2s;
}
#message .inner.animated .message-heart03 {
  animation-delay: 0.6s;
}
#message .inner.animated.is-did .message-heart01,
#message .inner.animated.is-did .message-heart02,
#message .inner.animated.is-did .message-heart03 {
  opacity: 1;
  animation-name: bounceInUp;
}

/* lineup
---------------------------------------------------*/
#lineup {
  position: relative;
  z-index: 2;
}
#lineup .inner {
  position: relative;
  width: 100%;
  padding-top: min(88px, 6.7692307692vw);
  padding-bottom: min(60px, 4.6153846154vw);
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  #lineup .inner {
    padding-top: 29.6875vw;
    padding-bottom: 11.71875vw;
  }
}
#lineup .inner .lineup-title-wrap {
  position: relative;
  width: 100%;
  max-width: 1300px;
  height: min(213px, 16.3846153846vw);
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  #lineup .inner .lineup-title-wrap {
    height: 28.28125vw;
  }
}
#lineup .inner .lineup-title-wrap img {
  width: 100%;
}
#lineup .inner .lineup-title-wrap .lineup-title {
  position: absolute;
  top: min(20px, 1.5384615385vw);
  left: min(347px, 26.6923076923vw);
  width: min(624px, 48vw);
  z-index: 4;
}
@media screen and (max-width: 768px) {
  #lineup .inner .lineup-title-wrap .lineup-title {
    top: 2.8125vw;
    left: 12.03125vw;
    width: 75.9375vw;
  }
}
#lineup .inner .lineup-title-wrap .lineup-mij {
  position: absolute;
  top: min(18px, 1.3846153846vw);
  left: min(163px, 12.5384615385vw);
  width: min(151px, 11.6153846154vw);
  z-index: 3;
}
@media screen and (max-width: 768px) {
  #lineup .inner .lineup-title-wrap .lineup-mij {
    top: -10.3125vw;
    left: 2.34375vw;
    width: 18.90625vw;
  }
}
#lineup .inner .lineup-title-wrap .lineup-unicorn {
  position: absolute;
  top: min(14px, 1.0769230769vw);
  left: min(980px, 75.3846153846vw);
  width: min(267px, 20.5384615385vw);
  z-index: 2;
}
@media screen and (max-width: 768px) {
  #lineup .inner .lineup-title-wrap .lineup-unicorn {
    top: -22.5vw;
    left: 71.875vw;
    width: 37.96875vw;
  }
}
#lineup .inner .lineup-title-wrap .lineup-rainbow {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1818px, 139.8461538462vw);
  aspect-ratio: 1818/319;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  #lineup .inner .lineup-title-wrap .lineup-rainbow {
    top: 0;
    left: 0;
    transform: translateX(0);
    width: 100vw;
  }
}
#lineup .inner .lineup-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  column-gap: min(85px, 6.5384615385vw);
}
@media screen and (max-width: 768px) {
  #lineup .inner .lineup-list {
    column-gap: 8.75vw;
    row-gap: 7.03125vw;
  }
}
#lineup .inner .lineup-list .lineup a {
  position: relative;
  display: block;
  padding-bottom: min(37px, 2.8461538462vw);
}
@media screen and (max-width: 768px) {
  #lineup .inner .lineup-list .lineup a {
    padding-bottom: 5.9375vw;
  }
}
#lineup .inner .lineup-list .lineup a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(28px, 2.1538461538vw);
  aspect-ratio: 28/16;
  background-image: url("../img/lineup_arrow.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
@media screen and (max-width: 768px) {
  #lineup .inner .lineup-list .lineup a::after {
    width: 4.375vw;
  }
}
#lineup .inner .lineup-list .pkg {
  text-align: center;
}
#lineup .inner .lineup-list .type {
  text-align: center;
  line-height: 1.36;
  color: #5b3468;
  font-size: min(22px, 1.6923076923vw);
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-top: min(20px, 1.5384615385vw);
}
@media screen and (max-width: 768px) {
  #lineup .inner .lineup-list .type {
    font-size: 3.4375vw;
    margin-top: 2.34375vw;
  }
}
#lineup .inner .lineup-list .eyeliner .pkg img {
  width: min(218px, 16.7692307692vw);
}
@media screen and (max-width: 768px) {
  #lineup .inner .lineup-list .eyeliner .pkg img {
    width: 27.34375vw;
  }
}
#lineup .inner .lineup-list .ponpon .pkg img {
  width: min(280px, 21.5384615385vw);
}
@media screen and (max-width: 768px) {
  #lineup .inner .lineup-list .ponpon .pkg img {
    width: 35.15625vw;
  }
}
#lineup .inner .lineup-list .eyecolor .pkg img {
  width: min(195px, 15vw);
}
@media screen and (max-width: 768px) {
  #lineup .inner .lineup-list .eyecolor .pkg img {
    width: 56.5625vw;
  }
}

#lineup .lineup-title-wrap.animated .lineup-title {
  opacity: 0;
  animation-duration: 0.8s;
  animation-fill-mode: both;
  animation-delay: 1s;
}
#lineup .lineup-title-wrap.animated .lineup-mij {
  opacity: 0;
  animation-duration: 2s;
  animation-fill-mode: both;
  animation-delay: 1.4s;
}
#lineup .lineup-title-wrap.animated .lineup-unicorn {
  opacity: 0;
  animation-duration: 2s;
  animation-fill-mode: both;
  animation-delay: 1.2s;
}
#lineup .lineup-title-wrap.animated .lineup-rainbow {
  opacity: 0;
  clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  transition: opacity 0.5s, clip-path 1s;
  transition-delay: 0.2s;
}
#lineup .lineup-title-wrap.animated.is-did .lineup-title {
  opacity: 1;
  animation-name: fadeInUp;
}
#lineup .lineup-title-wrap.animated.is-did .lineup-mij {
  opacity: 1;
  animation-name: bounceInUp;
}
#lineup .lineup-title-wrap.animated.is-did .lineup-unicorn {
  opacity: 1;
  animation-name: bounceInUp;
}
#lineup .lineup-title-wrap.animated.is-did .lineup-rainbow {
  opacity: 1;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

/* introduce
---------------------------------------------------*/
.introduce {
  position: relative;
  background: #e782af;
}
.introduce img {
  width: 100%;
}
.introduce .inner {
  position: relative;
  background: #e782af;
  background: linear-gradient(180deg, #8870B2 0%, #E782AF 100%);
  z-index: 1;
}
.introduce .inner::before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  aspect-ratio: 1300/520;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  z-index: -1;
}
.introduce .inner .heading .logo {
  text-align: center;
}
.introduce .inner .items-pkg {
  position: relative;
  width: min(1180px, 90.7692307692vw);
  margin-inline: auto;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .introduce .inner .items-pkg {
    width: 100%;
  }
}
.introduce .inner .items-pkg-fig {
  position: absolute;
  filter: drop-shadow(min(18px, 1.3846153846vw) min(18px, 1.3846153846vw) min(60px, 4.6153846154vw) rgba(0, 0, 0, 0.25));
}
@media screen and (max-width: 768px) {
  .introduce .inner .items-pkg-fig {
    position: relative;
    width: 100%;
    filter: drop-shadow(2.8125vw 2.8125vw 9.375vw rgba(0, 0, 0, 0.25));
  }
}
.introduce .inner .items-pkg-exp-name {
  line-height: 1.75;
  color: #fae7f0;
  font-size: min(20px, 1.5384615385vw);
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-left: min(22px, 1.6923076923vw);
}
@media screen and (max-width: 768px) {
  .introduce .inner .items-pkg-exp-name {
    line-height: 1.5;
    font-size: 3.125vw;
    margin-left: 3.4375vw;
  }
}
.introduce .inner .items-pkg-exp-price {
  line-height: 1.75;
  color: #fae7f0;
  font-size: min(20px, 1.5384615385vw);
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-left: min(22px, 1.6923076923vw);
}
@media screen and (max-width: 768px) {
  .introduce .inner .items-pkg-exp-price {
    line-height: 1.5;
    font-size: 3.125vw;
    margin-left: 3.4375vw;
    margin-top: 1.40625vw;
  }
}
.introduce .inner .items-pkg-exp-eye {
  position: relative;
}
.introduce .inner .items-pkg-exp-eye .icon {
  position: absolute;
}
.introduce .inner .items-pkg-exp-eye .line {
  position: absolute;
}
.introduce .inner .items-pkg-exp .items-pkg-exp-txt {
  line-height: 1.5;
  color: #fae7f0;
  font-size: min(20px, 1.5384615385vw);
  font-weight: 700;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 768px) {
  .introduce .inner .items-pkg-exp .items-pkg-exp-txt {
    font-size: 3.125vw;
  }
}
.introduce .inner .items-pkg-exp-note p {
  text-align: right;
  line-height: 1.66;
  color: rgba(255, 255, 255, 0.5);
  font-size: min(12px, 0.9230769231vw);
  letter-spacing: 0.05em;
}
@media screen and (max-width: 768px) {
  .introduce .inner .items-pkg-exp-note p {
    line-height: 1.57;
    font-size: 2.1875vw;
  }
}
.introduce .inner .spec-type-block {
  position: relative;
  z-index: 10;
}
.introduce .decoration {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
  width: 100%;
  max-width: 1300px;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}
.introduce .decoration img {
  width: 100%;
}
.introduce .decoration .star,
.introduce .decoration .heart {
  position: absolute;
}
.introduce#liquid .inner {
  padding-top: min(231px, 17.7692307692vw);
  padding-bottom: min(100px, 7.6923076923vw);
}
@media screen and (max-width: 768px) {
  .introduce#liquid .inner {
    padding-top: 31.5625vw;
    padding-bottom: 4.6875vw;
  }
}
.introduce#liquid .inner::before {
  top: -26.9230769231vw;
  background-image: url("../img/liquid_cloud.webp");
}
@media screen and (max-width: 768px) {
  .introduce#liquid .inner::before {
    top: -20.78125vw;
    background-image: url("../img/liquid_cloud_sp.webp");
  }
}
.introduce#liquid .inner .heading {
  margin-bottom: min(61px, 4.6923076923vw);
}
@media screen and (max-width: 768px) {
  .introduce#liquid .inner .heading {
    margin-bottom: 5.46875vw;
  }
}
.introduce#liquid .inner .heading .logo img {
  width: min(982px, 75.5384615385vw);
}
@media screen and (max-width: 768px) {
  .introduce#liquid .inner .heading .logo img {
    width: 84.53125vw;
  }
}
.introduce#liquid .inner .items-pkg-fig {
  top: max(-4px, -0.3076923077vw);
  left: min(84px, 6.4615384615vw);
}
@media screen and (max-width: 768px) {
  .introduce#liquid .inner .items-pkg-fig {
    top: 0;
    left: 0;
    height: 88.75vw;
  }
}
.introduce#liquid .inner .items-pkg-fig .fig01 {
  position: absolute;
  top: 0;
  left: 0;
  width: min(247px, 19vw);
}
@media screen and (max-width: 768px) {
  .introduce#liquid .inner .items-pkg-fig .fig01 {
    top: 0;
    left: 27.8125vw;
    width: 34.0625vw;
  }
}
.introduce#liquid .inner .items-pkg-fig .fig02 {
  position: absolute;
  top: min(6px, 0.4615384615vw);
  left: min(216px, 16.6153846154vw);
  width: min(92px, 7.0769230769vw);
}
@media screen and (max-width: 768px) {
  .introduce#liquid .inner .items-pkg-fig .fig02 {
    top: 0.78125vw;
    left: 57.65625vw;
    width: 12.65625vw;
  }
}
.introduce#liquid .inner .items-pkg-exp {
  position: relative;
  padding-bottom: min(6px, 0.4615384615vw);
  margin-left: min(445px, 34.2307692308vw);
}
@media screen and (max-width: 768px) {
  .introduce#liquid .inner .items-pkg-exp {
    padding-bottom: 7.03125vw;
    margin-left: 3.90625vw;
  }
}
.introduce#liquid .inner .items-pkg-exp-tag {
  width: min(441px, 33.9230769231vw);
}
@media screen and (max-width: 768px) {
  .introduce#liquid .inner .items-pkg-exp-tag {
    width: 68.90625vw;
  }
}
.introduce#liquid .inner .items-pkg-exp-title {
  width: min(646px, 49.6923076923vw);
  margin-top: max(-4px, -0.3076923077vw);
  margin-left: min(4px, 0.3076923077vw);
  margin-bottom: min(8px, 0.6153846154vw);
}
@media screen and (max-width: 768px) {
  .introduce#liquid .inner .items-pkg-exp-title {
    width: 91.09375vw;
    margin-top: -0.15625vw;
    margin-left: 0.46875vw;
    margin-bottom: 1.09375vw;
  }
}
.introduce#liquid .inner .items-pkg-exp-eye-wrap {
  display: flex;
  column-gap: min(68px, 5.2307692308vw);
  margin-top: min(18px, 1.3846153846vw);
  margin-left: min(24px, 1.8461538462vw);
}
@media screen and (max-width: 768px) {
  .introduce#liquid .inner .items-pkg-exp-eye-wrap {
    column-gap: 8.75vw;
    margin-top: 3.125vw;
    margin-left: 4.0625vw;
  }
}
.introduce#liquid .inner .items-pkg-exp-eye {
  width: min(294px, 22.6153846154vw);
  margin-top: min(23px, 1.7692307692vw);
}
@media screen and (max-width: 768px) {
  .introduce#liquid .inner .items-pkg-exp-eye {
    width: 45.9375vw;
    margin-top: 1.71875vw;
  }
}
.introduce#liquid .inner .items-pkg-exp-eye .icon {
  top: max(-17px, -1.3076923077vw);
  right: max(-47px, -3.6153846154vw);
  width: min(102px, 7.8461538462vw);
}
@media screen and (max-width: 768px) {
  .introduce#liquid .inner .items-pkg-exp-eye .icon {
    top: -2.65625vw;
    right: -7.34375vw;
    width: 15.9375vw;
  }
}
.introduce#liquid .inner .items-pkg-exp-eye .line {
  top: min(95px, 7.3076923077vw);
  right: max(-59px, -4.5384615385vw);
  width: min(153px, 11.7692307692vw);
}
@media screen and (max-width: 768px) {
  .introduce#liquid .inner .items-pkg-exp-eye .line {
    top: 14.84375vw;
    right: -9.21875vw;
    width: 23.90625vw;
  }
}
.introduce#liquid .inner .items-pkg-exp-eye .items-pkg-exp-txt {
  margin-top: min(18px, 1.3846153846vw);
  margin-left: min(5px, 0.3846153846vw);
}
@media screen and (max-width: 768px) {
  .introduce#liquid .inner .items-pkg-exp-eye .items-pkg-exp-txt {
    margin-top: 2.8125vw;
    margin-left: 0.78125vw;
  }
}
.introduce#liquid .inner .items-pkg-exp-refill {
  width: min(243px, 18.6923076923vw);
}
@media screen and (max-width: 768px) {
  .introduce#liquid .inner .items-pkg-exp-refill {
    width: 33.125vw;
  }
}
.introduce#liquid .inner .items-pkg-exp-note {
  position: absolute;
  bottom: 0;
  right: min(105px, 8.0769230769vw);
}
@media screen and (max-width: 768px) {
  .introduce#liquid .inner .items-pkg-exp-note {
    right: 3.4375vw;
  }
}
.introduce#liquid .inner .spec-type-block {
  margin-top: min(97px, 7.4615384615vw);
}
@media screen and (max-width: 768px) {
  .introduce#liquid .inner .spec-type-block {
    margin-top: 7.8125vw;
  }
}
.introduce#liquid .inner .spec-type-block .spec-type-block-title {
  margin-bottom: min(34px, 2.6153846154vw);
}
@media screen and (max-width: 768px) {
  .introduce#liquid .inner .spec-type-block .spec-type-block-title {
    margin-bottom: 5.625vw;
  }
}
.introduce#liquid .inner .spec-type-block .spec-type-block-title img {
  width: min(579px, 44.5384615385vw);
}
@media screen and (max-width: 768px) {
  .introduce#liquid .inner .spec-type-block .spec-type-block-title img {
    width: 75.46875vw;
  }
}
.introduce#liquid .inner .decoration .star01 {
  top: min(125px, 9.6153846154vw);
  left: min(871px, 67vw);
  width: min(58px, 4.4615384615vw);
}
@media screen and (max-width: 768px) {
  .introduce#liquid .inner .decoration .star01 {
    top: 19.0625vw;
    left: 75vw;
    width: 9.0625vw;
  }
}
.introduce#liquid .inner .decoration .star02 {
  top: min(701px, 53.9230769231vw);
  left: min(1202px, 92.4615384615vw);
  width: min(58px, 4.4615384615vw);
}
@media screen and (max-width: 768px) {
  .introduce#liquid .inner .decoration .star02 {
    top: 88.4375vw;
    left: 76.875vw;
    width: 9.0625vw;
  }
}
.introduce#liquid .inner .decoration .star03 {
  top: min(862px, 66.3076923077vw);
  left: min(68px, 5.2307692308vw);
  width: min(68px, 5.2307692308vw);
}
@media screen and (max-width: 768px) {
  .introduce#liquid .inner .decoration .star03 {
    top: 108.75vw;
    left: 15.3125vw;
    width: 10.625vw;
  }
}
.introduce#liquid .inner .decoration .star04 {
  top: min(328px, 25.2307692308vw);
  left: min(1196px, 92vw);
  width: min(68px, 5.2307692308vw);
}
@media screen and (max-width: 768px) {
  .introduce#liquid .inner .decoration .star04 {
    top: 50.3125vw;
    left: 77.34375vw;
    width: 10.625vw;
  }
}
.introduce#liquid .inner .decoration .star05 {
  top: min(267px, 20.5384615385vw);
  left: min(25px, 1.9230769231vw);
  width: min(68px, 5.2307692308vw);
}
@media screen and (max-width: 768px) {
  .introduce#liquid .inner .decoration .star05 {
    top: 48.75vw;
    left: 3.75vw;
    width: 10.625vw;
  }
}
.introduce#liquid .inner .decoration .heart01 {
  top: max(-38px, -2.9230769231vw);
  left: min(964px, 74.1538461538vw);
  width: min(188px, 14.4615384615vw);
}
@media screen and (max-width: 768px) {
  .introduce#liquid .inner .decoration .heart01 {
    top: 2.03125vw;
    left: 20.78125vw;
    width: 29.375vw;
  }
}
.introduce#liquid .inner .decoration .heart02 {
  top: min(618px, 47.5384615385vw);
  left: max(-24px, -1.8461538462vw);
  width: min(108px, 8.3076923077vw);
}
@media screen and (max-width: 768px) {
  .introduce#liquid .inner .decoration .heart02 {
    top: 82.03125vw;
    left: 2.96875vw;
    width: 16.71875vw;
  }
}
.introduce#liquid .inner .decoration .heart03 {
  top: min(1035px, 79.6153846154vw);
  left: min(1173px, 90.2307692308vw);
  width: min(110px, 8.4615384615vw);
}
@media screen and (max-width: 768px) {
  .introduce#liquid .inner .decoration .heart03 {
    top: 106.25vw;
    left: 78.59375vw;
    width: 17.1875vw;
  }
}
.introduce#liquid .inner .items-wrap-liquid .items-title img {
  width: min(780px, 60vw);
}
@media screen and (max-width: 768px) {
  .introduce#liquid .inner .items-wrap-liquid .items-title img {
    width: 89.53125vw;
  }
}
.introduce#liquid .inner .items-wrap-liquid .items-list-wrap .refill-icon {
  position: absolute;
  top: max(-178px, -13.6923076923vw);
  right: max(-38px, -2.9230769231vw);
  width: min(234px, 18vw);
  filter: drop-shadow(min(8px, 0.6153846154vw) min(8px, 0.6153846154vw) min(24px, 1.8461538462vw) rgba(0, 0, 0, 0.4));
  user-select: none;
  pointer-events: none;
  z-index: 99;
}
@media screen and (max-width: 768px) {
  .introduce#liquid .inner .items-wrap-liquid .items-list-wrap .refill-icon {
    top: -24.6875vw;
    right: auto;
    left: 50%;
    translate: -50% 0;
    width: 36.5625vw;
    filter: drop-shadow(1.25vw 1.25vw 3.75vw rgba(0, 0, 0, 0.4));
  }
}
.introduce#liquid .inner .items-wrap-liquid .items-list-wrap .items-list-liquid .bk {
  color: #000;
}
.introduce#liquid .inner .items-wrap-liquid .items-list-wrap .items-list-liquid .bk .item-wrap .title-wrap .title .en {
  width: min(153px, 11.7692307692vw);
}
@media screen and (max-width: 768px) {
  .introduce#liquid .inner .items-wrap-liquid .items-list-wrap .items-list-liquid .bk .item-wrap .title-wrap .title .en {
    width: 23.90625vw;
  }
}
.introduce#liquid .inner .items-wrap-liquid .items-list-wrap .items-list-liquid .bk .item-wrap .item {
  width: min(849px, 65.3076923077vw);
}
@media screen and (max-width: 768px) {
  .introduce#liquid .inner .items-wrap-liquid .items-list-wrap .items-list-liquid .bk .item-wrap .item {
    width: 106.25vw;
  }
}
.introduce#liquid .inner .items-wrap-liquid .items-list-wrap .items-list-liquid .dbr {
  color: #5c3c31;
}
@media screen and (max-width: 768px) {
  .introduce#liquid .inner .items-wrap-liquid .items-list-wrap .items-list-liquid .dbr .item-wrap .title-wrap {
    padding-bottom: 14.84375vw;
  }
}
.introduce#liquid .inner .items-wrap-liquid .items-list-wrap .items-list-liquid .dbr .item-wrap .title-wrap .title .en {
  width: min(326px, 25.0769230769vw);
}
@media screen and (max-width: 768px) {
  .introduce#liquid .inner .items-wrap-liquid .items-list-wrap .items-list-liquid .dbr .item-wrap .title-wrap .title .en {
    width: 24.84375vw;
  }
}
.introduce#liquid .inner .items-wrap-liquid .items-list-wrap .items-list-liquid .dbr .item-wrap .item {
  width: min(793px, 61vw);
}
@media screen and (max-width: 768px) {
  .introduce#liquid .inner .items-wrap-liquid .items-list-wrap .items-list-liquid .dbr .item-wrap .item {
    width: 99.53125vw;
  }
}
@media screen and (max-width: 768px) {
  .introduce#liquid .inner .items-wrap-liquid-s .items-title {
    margin-bottom: 7.96875vw;
  }
}
.introduce#liquid .inner .items-wrap-liquid-s .items-title img {
  width: min(940px, 72.3076923077vw);
}
@media screen and (max-width: 768px) {
  .introduce#liquid .inner .items-wrap-liquid-s .items-title img {
    width: 90.234375vw;
  }
}
.introduce#liquid .inner .items-wrap-liquid-s .items-list-wrap .items-list-liquid-s .bk {
  color: #000;
}
@media screen and (max-width: 768px) {
  .introduce#liquid .inner .items-wrap-liquid-s .items-list-wrap .items-list-liquid-s .bk .item-wrap {
    padding-top: 1.5625vw;
  }
}
.introduce#liquid .inner .items-wrap-liquid-s .items-list-wrap .items-list-liquid-s .bk .item-wrap .title-wrap .title .en {
  width: min(153px, 11.7692307692vw);
}
@media screen and (max-width: 768px) {
  .introduce#liquid .inner .items-wrap-liquid-s .items-list-wrap .items-list-liquid-s .bk .item-wrap .title-wrap .title .en {
    width: 23.90625vw;
  }
}
.introduce#liquid .inner .items-wrap-liquid-s .items-list-wrap .items-list-liquid-s .bk .item-wrap .item {
  width: min(843px, 64.8461538462vw);
}
@media screen and (max-width: 768px) {
  .introduce#liquid .inner .items-wrap-liquid-s .items-list-wrap .items-list-liquid-s .bk .item-wrap .item {
    width: 106.40625vw;
  }
}
.introduce#liquid .inner .items-wrap-liquid-s .items-list-wrap .items-list-liquid-s .dbr {
  color: #5c3c31;
}
@media screen and (max-width: 768px) {
  .introduce#liquid .inner .items-wrap-liquid-s .items-list-wrap .items-list-liquid-s .dbr .item-wrap {
    padding-top: 1.5625vw;
  }
}
@media screen and (max-width: 768px) {
  .introduce#liquid .inner .items-wrap-liquid-s .items-list-wrap .items-list-liquid-s .dbr .item-wrap .title-wrap {
    padding-bottom: 12.5vw;
  }
}
.introduce#liquid .inner .items-wrap-liquid-s .items-list-wrap .items-list-liquid-s .dbr .item-wrap .title-wrap .title .en {
  width: min(326px, 25.0769230769vw);
}
@media screen and (max-width: 768px) {
  .introduce#liquid .inner .items-wrap-liquid-s .items-list-wrap .items-list-liquid-s .dbr .item-wrap .title-wrap .title .en {
    width: 27.1875vw;
  }
}
.introduce#liquid .inner .items-wrap-liquid-s .items-list-wrap .items-list-liquid-s .dbr .item-wrap .title-wrap .title .mark {
  top: max(-30px, -2.3076923077vw);
  right: max(-100px, -7.6923076923vw);
}
@media screen and (max-width: 768px) {
  .introduce#liquid .inner .items-wrap-liquid-s .items-list-wrap .items-list-liquid-s .dbr .item-wrap .title-wrap .title .mark {
    top: -6.25vw;
    right: -4.6875vw;
  }
}
.introduce#liquid .inner .items-wrap-liquid-s .items-list-wrap .items-list-liquid-s .dbr .item-wrap .item {
  width: min(793px, 61vw);
}
@media screen and (max-width: 768px) {
  .introduce#liquid .inner .items-wrap-liquid-s .items-list-wrap .items-list-liquid-s .dbr .item-wrap .item {
    width: 100.15625vw;
  }
}
.introduce#ponpon .inner {
  padding-top: min(198px, 15.2307692308vw);
  padding-bottom: min(80px, 6.1538461538vw);
}
@media screen and (max-width: 768px) {
  .introduce#ponpon .inner {
    padding-top: 39.84375vw;
    padding-bottom: 13.59375vw;
  }
}
.introduce#ponpon .inner::before {
  top: -1.1538461538vw;
  aspect-ratio: 1300/177;
  background-image: url("../img/ponpon_cloud.webp");
}
@media screen and (max-width: 768px) {
  .introduce#ponpon .inner::before {
    top: -2.8125vw;
    aspect-ratio: 640/200;
    background-image: url("../img/ponpon_cloud_sp.webp");
  }
}
.introduce#ponpon .inner .heading {
  margin-bottom: min(70px, 5.3846153846vw);
}
@media screen and (max-width: 768px) {
  .introduce#ponpon .inner .heading {
    margin-bottom: 7.5vw;
  }
}
.introduce#ponpon .inner .heading .logo img {
  width: min(982px, 75.5384615385vw);
}
@media screen and (max-width: 768px) {
  .introduce#ponpon .inner .heading .logo img {
    width: 84.375vw;
  }
}
.introduce#ponpon .inner .items-pkg-fig {
  top: max(-8px, -0.6153846154vw);
  left: min(81px, 6.2307692308vw);
}
@media screen and (max-width: 768px) {
  .introduce#ponpon .inner .items-pkg-fig {
    top: 0;
    left: 0;
    height: 82.1875vw;
  }
}
.introduce#ponpon .inner .items-pkg-fig .fig01 {
  position: absolute;
  top: 0;
  left: 0;
  width: min(250px, 19.2307692308vw);
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .introduce#ponpon .inner .items-pkg-fig .fig01 {
    top: 0;
    left: 27.1875vw;
    width: 31.40625vw;
  }
}
.introduce#ponpon .inner .items-pkg-fig .fig02 {
  position: absolute;
  top: min(84px, 6.4615384615vw);
  left: min(240px, 18.4615384615vw);
  width: min(66px, 5.0769230769vw);
  z-index: 3;
}
@media screen and (max-width: 768px) {
  .introduce#ponpon .inner .items-pkg-fig .fig02 {
    top: 10.46875vw;
    left: 57.34375vw;
    width: 8.28125vw;
  }
}
.introduce#ponpon .inner .items-pkg-fig .fig03 {
  position: absolute;
  top: min(77px, 5.9230769231vw);
  left: min(259px, 19.9230769231vw);
  width: min(106px, 8.1538461538vw);
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .introduce#ponpon .inner .items-pkg-fig .fig03 {
    top: 9.84375vw;
    left: 59.53125vw;
    width: 13.28125vw;
  }
}
.introduce#ponpon .inner .items-pkg-exp {
  position: relative;
  padding-bottom: min(90px, 6.9230769231vw);
  margin-left: min(482px, 37.0769230769vw);
}
@media screen and (max-width: 768px) {
  .introduce#ponpon .inner .items-pkg-exp {
    padding-bottom: 14.0625vw;
    margin-left: 2.8125vw;
  }
}
.introduce#ponpon .inner .items-pkg-exp-tag {
  width: min(442px, 34vw);
}
@media screen and (max-width: 768px) {
  .introduce#ponpon .inner .items-pkg-exp-tag {
    width: 68.90625vw;
  }
}
.introduce#ponpon .inner .items-pkg-exp-title {
  width: min(648px, 49.8461538462vw);
  margin-top: min(4px, 0.3076923077vw);
  margin-left: min(4px, 0.3076923077vw);
  margin-bottom: min(8px, 0.6153846154vw);
}
@media screen and (max-width: 768px) {
  .introduce#ponpon .inner .items-pkg-exp-title {
    width: 93.125vw;
    margin-top: 0.3125vw;
    margin-left: 0.625vw;
    margin-bottom: 1.25vw;
  }
}
.introduce#ponpon .inner .items-pkg-exp-eye-wrap {
  display: flex;
  align-items: center;
  column-gap: min(92px, 7.0769230769vw);
  margin-top: min(18px, 1.3846153846vw);
  margin-left: min(24px, 1.8461538462vw);
}
@media screen and (max-width: 768px) {
  .introduce#ponpon .inner .items-pkg-exp-eye-wrap {
    column-gap: 15.15625vw;
    margin-top: 5.3125vw;
    margin-left: 3.75vw;
  }
}
.introduce#ponpon .inner .items-pkg-exp-eye {
  width: min(264px, 20.3076923077vw);
  margin-top: min(18px, 1.3846153846vw);
}
@media screen and (max-width: 768px) {
  .introduce#ponpon .inner .items-pkg-exp-eye {
    width: 41.25vw;
    margin-top: 0;
  }
}
.introduce#ponpon .inner .items-pkg-exp-eye .icon {
  top: max(-17px, -1.3076923077vw);
  right: max(-47px, -3.6153846154vw);
  width: min(102px, 7.8461538462vw);
}
@media screen and (max-width: 768px) {
  .introduce#ponpon .inner .items-pkg-exp-eye .icon {
    top: -2.65625vw;
    right: -7.96875vw;
    width: 15.9375vw;
  }
}
.introduce#ponpon .inner .items-pkg-exp-eye .line {
  top: min(65px, 5vw);
  right: max(-69px, -5.3076923077vw);
  width: min(125px, 9.6153846154vw);
}
@media screen and (max-width: 768px) {
  .introduce#ponpon .inner .items-pkg-exp-eye .line {
    top: 10.15625vw;
    right: -11.09375vw;
    width: 19.53125vw;
  }
}
.introduce#ponpon .inner .items-pkg-exp-note {
  position: absolute;
  bottom: 0;
  right: min(69px, 5.3076923077vw);
}
@media screen and (max-width: 768px) {
  .introduce#ponpon .inner .items-pkg-exp-note {
    right: 4.375vw;
  }
}
.introduce#ponpon .inner .spec-type-block {
  padding-top: min(70px, 5.3846153846vw);
  padding-bottom: min(50px, 3.8461538462vw);
  margin-top: min(65px, 5vw);
}
@media screen and (max-width: 768px) {
  .introduce#ponpon .inner .spec-type-block {
    padding: 9.0625vw 0 4.6875vw;
    margin-top: 3.4375vw;
  }
}
.introduce#ponpon .inner .spec-type-block-inner {
  margin-bottom: min(50px, 3.8461538462vw);
}
@media screen and (max-width: 768px) {
  .introduce#ponpon .inner .spec-type-block-inner {
    padding: 0;
    margin-bottom: 7.5vw;
  }
}
.introduce#ponpon .inner .spec-type-block-inner .spec-type-block-title {
  margin-bottom: min(44px, 3.3846153846vw);
}
@media screen and (max-width: 768px) {
  .introduce#ponpon .inner .spec-type-block-inner .spec-type-block-title {
    margin-bottom: 6.25vw;
  }
}
.introduce#ponpon .inner .spec-type-block-inner .spec-type-block-title img {
  width: min(675px, 51.9230769231vw);
}
@media screen and (max-width: 768px) {
  .introduce#ponpon .inner .spec-type-block-inner .spec-type-block-title img {
    width: 78.90625vw;
  }
}
.introduce#ponpon .inner .spec-type-block-inner .spec-type-block-fig {
  text-align: center;
}
@media screen and (max-width: 768px) {
  .introduce#ponpon .inner .spec-type-block-inner .spec-type-block-fig {
    text-align: right;
  }
}
.introduce#ponpon .inner .spec-type-block-inner .spec-type-block-fig img {
  width: min(946px, 72.7692307692vw);
}
@media screen and (max-width: 768px) {
  .introduce#ponpon .inner .spec-type-block-inner .spec-type-block-fig img {
    width: 89.6875vw;
  }
}
.introduce#ponpon .inner .spec-type-block .function img {
  width: min(809px, 62.2307692308vw);
}
@media screen and (max-width: 768px) {
  .introduce#ponpon .inner .spec-type-block .function img {
    width: 53.59375vw;
  }
}
.introduce#ponpon .inner .spec-type-block .note {
  text-align: right;
  color: rgba(0, 0, 0, 0.5);
  font-size: min(11px, 0.8461538462vw);
  letter-spacing: 0.1em;
  opacity: 0.5;
  margin-top: min(8px, 0.6153846154vw);
}
@media screen and (max-width: 768px) {
  .introduce#ponpon .inner .spec-type-block .note {
    font-size: 2.1875vw;
    margin-top: 6.25vw;
  }
}
.introduce#ponpon .inner .decoration .star01 {
  top: min(114px, 8.7692307692vw);
  left: min(202px, 15.5384615385vw);
  width: min(58px, 4.4615384615vw);
}
@media screen and (max-width: 768px) {
  .introduce#ponpon .inner .decoration .star01 {
    top: 24.21875vw;
    left: 7.8125vw;
    width: 9.0625vw;
  }
}
.introduce#ponpon .inner .decoration .star02 {
  top: min(520px, 40vw);
  left: min(1185px, 91.1538461538vw);
  width: min(58px, 4.4615384615vw);
}
@media screen and (max-width: 768px) {
  .introduce#ponpon .inner .decoration .star02 {
    top: 64.375vw;
    left: 82.5vw;
    width: 9.0625vw;
  }
}
.introduce#ponpon .inner .decoration .star03 {
  top: min(756px, 58.1538461538vw);
  left: min(52px, 4vw);
  width: min(68px, 5.2307692308vw);
}
@media screen and (max-width: 768px) {
  .introduce#ponpon .inner .decoration .star03 {
    top: 60.46875vw;
    left: 8.4375vw;
    width: 10.625vw;
  }
}
.introduce#ponpon .inner .decoration .star04 {
  top: min(302px, 23.2307692308vw);
  left: min(1163px, 89.4615384615vw);
  width: min(68px, 5.2307692308vw);
}
@media screen and (max-width: 768px) {
  .introduce#ponpon .inner .decoration .star04 {
    top: 81.09375vw;
    left: 82.03125vw;
    width: 10.625vw;
  }
}
.introduce#ponpon .inner .decoration .star05 {
  top: min(276px, 21.2307692308vw);
  left: min(50px, 3.8461538462vw);
  width: min(68px, 5.2307692308vw);
}
@media screen and (max-width: 768px) {
  .introduce#ponpon .inner .decoration .star05 {
    top: 135.46875vw;
    left: 85.625vw;
    width: 10.625vw;
  }
}
.introduce#ponpon .inner .decoration .heart01 {
  top: max(-52px, -4vw);
  left: min(208px, 16vw);
  width: min(187px, 14.3846153846vw);
}
@media screen and (max-width: 768px) {
  .introduce#ponpon .inner .decoration .heart01 {
    top: 5.46875vw;
    left: 21.5625vw;
    width: 29.21875vw;
  }
}
.introduce#ponpon .inner .decoration .heart02 {
  top: min(552px, 42.4615384615vw);
  left: max(-24px, -1.8461538462vw);
  width: min(108px, 8.3076923077vw);
}
@media screen and (max-width: 768px) {
  .introduce#ponpon .inner .decoration .heart02 {
    top: 105vw;
    left: 80.3125vw;
    width: 17.34375vw;
  }
}
.introduce#ponpon .inner .decoration .heart03 {
  top: min(875px, 67.3076923077vw);
  left: min(1140px, 87.6923076923vw);
  width: min(141px, 10.8461538462vw);
}
@media screen and (max-width: 768px) {
  .introduce#ponpon .inner .decoration .heart03 {
    top: 89.84375vw;
    left: -3.4375vw;
    width: 22.03125vw;
  }
}
.introduce#eyecolor .inner {
  padding-top: min(233px, 17.9230769231vw);
  padding-bottom: min(71px, 5.4615384615vw);
}
@media screen and (max-width: 768px) {
  .introduce#eyecolor .inner {
    padding-top: 33.59375vw;
    padding-bottom: 16.875vw;
  }
}
.introduce#eyecolor .inner::before {
  top: -0.3846153846vw;
  aspect-ratio: 1300/177;
  background-image: url("../img/eyecolor_cloud.webp");
}
@media screen and (max-width: 768px) {
  .introduce#eyecolor .inner::before {
    top: -11.25vw;
    aspect-ratio: 640/200;
    background-image: url("../img/eyecolor_cloud_sp.webp");
  }
}
.introduce#eyecolor .inner .heading {
  margin-bottom: min(63px, 4.8461538462vw);
}
@media screen and (max-width: 768px) {
  .introduce#eyecolor .inner .heading {
    margin-bottom: 7.5vw;
  }
}
.introduce#eyecolor .inner .heading .logo img {
  width: min(979px, 75.3076923077vw);
}
@media screen and (max-width: 768px) {
  .introduce#eyecolor .inner .heading .logo img {
    width: 84.53125vw;
  }
}
.introduce#eyecolor .inner .items-pkg-fig {
  top: min(17px, 1.3076923077vw);
  left: min(85px, 6.5384615385vw);
}
@media screen and (max-width: 768px) {
  .introduce#eyecolor .inner .items-pkg-fig {
    top: 0;
    left: 0;
    height: 59.0625vw;
  }
}
.introduce#eyecolor .inner .items-pkg-fig .fig01 {
  position: absolute;
  top: 0;
  left: 0;
  width: min(267px, 20.5384615385vw);
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .introduce#eyecolor .inner .items-pkg-fig .fig01 {
    top: 0;
    left: 15.9375vw;
    width: 40vw;
  }
}
.introduce#eyecolor .inner .items-pkg-fig .fig02 {
  position: absolute;
  top: min(222px, 17.0769230769vw);
  left: min(204px, 15.6923076923vw);
  width: min(250px, 19.2307692308vw);
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .introduce#eyecolor .inner .items-pkg-fig .fig02 {
    top: 20.46875vw;
    left: 51.71875vw;
    width: 35.15625vw;
  }
}
.introduce#eyecolor .inner .items-pkg-fig .icon {
  position: absolute;
  top: min(38px, 2.9230769231vw);
  left: min(261px, 20.0769230769vw);
  width: min(151px, 11.6153846154vw);
  z-index: 3;
}
@media screen and (max-width: 768px) {
  .introduce#eyecolor .inner .items-pkg-fig .icon {
    top: 0vw;
    left: 58.4375vw;
    width: 21.09375vw;
  }
}
.introduce#eyecolor .inner .items-pkg-exp {
  position: relative;
  padding-bottom: min(48px, 3.6923076923vw);
  margin-left: min(568px, 43.6923076923vw);
}
@media screen and (max-width: 768px) {
  .introduce#eyecolor .inner .items-pkg-exp {
    padding-bottom: 8.75vw;
    margin-left: 7.03125vw;
  }
}
.introduce#eyecolor .inner .items-pkg-exp-tag {
  width: min(430px, 33.0769230769vw);
}
@media screen and (max-width: 768px) {
  .introduce#eyecolor .inner .items-pkg-exp-tag {
    width: 67.1875vw;
  }
}
.introduce#eyecolor .inner .items-pkg-exp-title {
  width: min(546px, 42vw);
  margin-top: min(10px, 0.7692307692vw);
  margin-left: min(2px, 0.1538461538vw);
  margin-bottom: min(15px, 1.1538461538vw);
}
@media screen and (max-width: 768px) {
  .introduce#eyecolor .inner .items-pkg-exp-title {
    width: 85.3125vw;
    margin-top: 0.46875vw;
    margin-left: 0.3125vw;
    margin-bottom: 2.8125vw;
  }
}
.introduce#eyecolor .inner .items-pkg-exp-eye-wrap {
  display: flex;
  align-items: center;
  margin-top: min(18px, 1.3846153846vw);
  margin-left: min(24px, 1.8461538462vw);
}
@media screen and (max-width: 768px) {
  .introduce#eyecolor .inner .items-pkg-exp-eye-wrap {
    margin-top: 4.375vw;
    margin-left: 3.75vw;
  }
}
.introduce#eyecolor .inner .items-pkg-exp-eye {
  width: min(220px, 16.9230769231vw);
  height: min(132px, 10.1538461538vw);
}
@media screen and (max-width: 768px) {
  .introduce#eyecolor .inner .items-pkg-exp-eye {
    width: 34.375vw;
    height: 20.3125vw;
  }
}
.introduce#eyecolor .inner .items-pkg-exp-eye .icon {
  top: 0;
  right: min(14px, 1.0769230769vw);
  width: min(102px, 7.8461538462vw);
}
@media screen and (max-width: 768px) {
  .introduce#eyecolor .inner .items-pkg-exp-eye .icon {
    right: 2.1875vw;
    width: 15.9375vw;
  }
}
.introduce#eyecolor .inner .items-pkg-exp-eye .line {
  top: min(20px, 1.5384615385vw);
  left: max(-7px, -0.5384615385vw);
  width: min(134px, 10.3076923077vw);
}
@media screen and (max-width: 768px) {
  .introduce#eyecolor .inner .items-pkg-exp-eye .line {
    top: 3.125vw;
    left: -1.09375vw;
    width: 20.9375vw;
  }
}
.introduce#eyecolor .inner .items-pkg-exp-note {
  position: absolute;
  bottom: 0;
  right: min(69px, 5.3076923077vw);
}
@media screen and (max-width: 768px) {
  .introduce#eyecolor .inner .items-pkg-exp-note {
    right: 4.375vw;
  }
}
.introduce#eyecolor .inner .spec-type-block {
  padding-top: min(72px, 5.5384615385vw);
  padding-bottom: min(58px, 4.4615384615vw);
  margin-top: min(36px, 2.7692307692vw);
}
@media screen and (max-width: 768px) {
  .introduce#eyecolor .inner .spec-type-block {
    padding-top: 7.8125vw;
    padding-bottom: 3.125vw;
    margin-top: 6.09375vw;
  }
}
.introduce#eyecolor .inner .spec-type-block-inner .spec-type-block-title {
  margin-bottom: min(50px, 3.8461538462vw);
}
@media screen and (max-width: 768px) {
  .introduce#eyecolor .inner .spec-type-block-inner .spec-type-block-title {
    margin-bottom: 7.8125vw;
  }
}
.introduce#eyecolor .inner .spec-type-block-inner .spec-type-block-title img {
  width: min(744px, 57.2307692308vw);
}
@media screen and (max-width: 768px) {
  .introduce#eyecolor .inner .spec-type-block-inner .spec-type-block-title img {
    width: 55.625vw;
  }
}
.introduce#eyecolor .inner .spec-type-block .function .function-list {
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .introduce#eyecolor .inner .spec-type-block .function .function-list {
    display: block;
  }
}
.introduce#eyecolor .inner .spec-type-block .function .function-list-item {
  padding-top: min(25px, 1.9230769231vw);
}
@media screen and (max-width: 768px) {
  .introduce#eyecolor .inner .spec-type-block .function .function-list-item {
    padding-top: 0;
  }
}
.introduce#eyecolor .inner .spec-type-block .function .function-list-item:not(:last-child) {
  border-right: 2px solid rgba(0, 0, 0, 0.2);
}
@media screen and (max-width: 768px) {
  .introduce#eyecolor .inner .spec-type-block .function .function-list-item:not(:last-child) {
    border-right: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  }
}
.introduce#eyecolor .inner .spec-type-block .function .function-list-item .title {
  text-align: center;
  line-height: 1.45;
  font-size: min(22px, 1.6923076923vw);
  font-weight: 700;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 768px) {
  .introduce#eyecolor .inner .spec-type-block .function .function-list-item .title {
    font-size: 3.4375vw;
  }
}
.introduce#eyecolor .inner .spec-type-block .function .function-list-item .fig {
  text-align: center;
}
.introduce#eyecolor .inner .spec-type-block .function .function-list-item .note {
  text-align: right;
  line-height: 1.4;
  color: rgba(0, 0, 0, 0.5);
  font-size: min(11px, 0.8461538462vw);
  letter-spacing: 0.1em;
  margin-top: min(50px, 3.8461538462vw);
  margin-right: min(20px, 1.5384615385vw);
}
@media screen and (max-width: 768px) {
  .introduce#eyecolor .inner .spec-type-block .function .function-list-item .note {
    font-size: 2.1875vw;
    margin-top: 3.125vw;
    margin-right: 3.125vw;
  }
}
.introduce#eyecolor .inner .spec-type-block .function .function-list .item01 {
  padding-right: min(48px, 3.6923076923vw);
}
@media screen and (max-width: 768px) {
  .introduce#eyecolor .inner .spec-type-block .function .function-list .item01 {
    padding-right: 0;
    padding-bottom: 4.375vw;
    margin-bottom: 5.9375vw;
  }
}
.introduce#eyecolor .inner .spec-type-block .function .function-list .item01 .fig {
  margin-top: min(80px, 6.1538461538vw);
}
@media screen and (max-width: 768px) {
  .introduce#eyecolor .inner .spec-type-block .function .function-list .item01 .fig {
    margin-top: 3.28125vw;
  }
}
.introduce#eyecolor .inner .spec-type-block .function .function-list .item01 .fig img {
  width: min(168px, 12.9230769231vw);
}
@media screen and (max-width: 768px) {
  .introduce#eyecolor .inner .spec-type-block .function .function-list .item01 .fig img {
    width: 21.09375vw;
  }
}
.introduce#eyecolor .inner .spec-type-block .function .function-list .item02 {
  padding-left: min(48px, 3.6923076923vw);
  padding-right: min(48px, 3.6923076923vw);
}
@media screen and (max-width: 768px) {
  .introduce#eyecolor .inner .spec-type-block .function .function-list .item02 {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 6.25vw;
    margin-bottom: 6.25vw;
  }
}
.introduce#eyecolor .inner .spec-type-block .function .function-list .item02 .fig {
  margin-top: min(28px, 2.1538461538vw);
}
@media screen and (max-width: 768px) {
  .introduce#eyecolor .inner .spec-type-block .function .function-list .item02 .fig {
    margin-top: 2.5vw;
  }
}
.introduce#eyecolor .inner .spec-type-block .function .function-list .item02 .fig img {
  width: min(269px, 20.6923076923vw);
}
@media screen and (max-width: 768px) {
  .introduce#eyecolor .inner .spec-type-block .function .function-list .item02 .fig img {
    width: 84.6875vw;
  }
}
.introduce#eyecolor .inner .spec-type-block .function .function-list .item03 {
  padding-left: min(40px, 3.0769230769vw);
}
@media screen and (max-width: 768px) {
  .introduce#eyecolor .inner .spec-type-block .function .function-list .item03 {
    padding-left: 0;
  }
}
.introduce#eyecolor .inner .spec-type-block .function .function-list .item03 .fig {
  margin-top: min(68px, 5.2307692308vw);
}
@media screen and (max-width: 768px) {
  .introduce#eyecolor .inner .spec-type-block .function .function-list .item03 .fig {
    margin-top: 3.125vw;
  }
}
.introduce#eyecolor .inner .spec-type-block .function .function-list .item03 .fig img {
  width: min(408px, 31.3846153846vw);
}
@media screen and (max-width: 768px) {
  .introduce#eyecolor .inner .spec-type-block .function .function-list .item03 .fig img {
    width: 70vw;
  }
}
.introduce#eyecolor .inner .logo-shinako {
  width: min(189px, 14.5384615385vw);
  margin-inline: auto;
  margin-top: min(75px, 5.7692307692vw);
}
@media screen and (max-width: 768px) {
  .introduce#eyecolor .inner .logo-shinako {
    width: 29.53125vw;
    margin-top: 14.21875vw;
  }
}
.introduce#eyecolor .inner .logo-shinako img {
  width: 100%;
}
.introduce#eyecolor .inner .decoration .star01 {
  top: min(151px, 11.6153846154vw);
  left: min(1198px, 92.1538461538vw);
  width: min(58px, 4.4615384615vw);
}
@media screen and (max-width: 768px) {
  .introduce#eyecolor .inner .decoration .star01 {
    top: 18.28125vw;
    left: 82.8125vw;
    width: 9.0625vw;
  }
}
.introduce#eyecolor .inner .decoration .star02 {
  top: min(837px, 64.3846153846vw);
  left: min(264px, 20.3076923077vw);
  width: min(58px, 4.4615384615vw);
}
@media screen and (max-width: 768px) {
  .introduce#eyecolor .inner .decoration .star02 {
    top: 66.40625vw;
    left: 2.34375vw;
    width: 9.0625vw;
  }
}
.introduce#eyecolor .inner .decoration .star03 {
  top: min(492px, 37.8461538462vw);
  left: min(22px, 1.6923076923vw);
  width: min(123px, 9.4615384615vw);
}
@media screen and (max-width: 768px) {
  .introduce#eyecolor .inner .decoration .star03 {
    top: 16.71875vw;
    left: 53.125vw;
    width: 19.21875vw;
  }
}
.introduce#eyecolor .inner .decoration .star04 {
  top: min(307px, 23.6153846154vw);
  left: min(1178px, 90.6153846154vw);
  width: min(68px, 5.2307692308vw);
}
@media screen and (max-width: 768px) {
  .introduce#eyecolor .inner .decoration .star04 {
    top: 51.875vw;
    left: 87.03125vw;
    width: 10.625vw;
  }
}
.introduce#eyecolor .inner .decoration .star05 {
  top: min(307px, 23.6153846154vw);
  left: min(34px, 2.6153846154vw);
  width: min(68px, 5.2307692308vw);
}
@media screen and (max-width: 768px) {
  .introduce#eyecolor .inner .decoration .star05 {
    top: 85.625vw;
    left: 90.3125vw;
    width: 10.625vw;
  }
}
.introduce#eyecolor .inner .decoration .heart01 {
  top: min(27px, 2.0769230769vw);
  left: min(791px, 60.8461538462vw);
  width: min(187px, 14.3846153846vw);
}
@media screen and (max-width: 768px) {
  .introduce#eyecolor .inner .decoration .heart01 {
    top: -3.28125vw;
    left: 17.8125vw;
    width: 28.59375vw;
  }
}
.introduce#eyecolor .inner .decoration .heart02 {
  top: min(410px, 31.5384615385vw);
  left: min(1176px, 90.4615384615vw);
  width: min(111px, 8.5384615385vw);
}
@media screen and (max-width: 768px) {
  .introduce#eyecolor .inner .decoration .heart02 {
    top: 109.6875vw;
    left: 81.5625vw;
    width: 17.34375vw;
  }
}
.introduce#eyecolor .inner .decoration .heart03 {
  top: min(792px, 60.9230769231vw);
  left: min(15px, 1.1538461538vw);
  width: min(130px, 10vw);
}
@media screen and (max-width: 768px) {
  .introduce#eyecolor .inner .decoration .heart03 {
    top: 78.90625vw;
    left: -3.28125vw;
    width: 17.1875vw;
  }
}

.introduce .animated .fig01,
.introduce .animated .fig02,
.introduce .animated .fig03 {
  opacity: 0;
  rotate: -10deg;
  transform-origin: left bottom;
  transition: opacity 0.5s, rotate 1s;
}
.introduce .animated .fig02 {
  transition-delay: 0.2s;
}
.introduce .animated .fig03 {
  transition-delay: 0.4s;
}
.introduce .animated.is-did .fig01,
.introduce .animated.is-did .fig02,
.introduce .animated.is-did .fig03 {
  opacity: 1;
  rotate: 0deg;
}

/* spec-type-block
---------------------------------------------------*/
.spec-type-block {
  position: relative;
  width: min(1180px, 90.7692307692vw);
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: min(20px, 1.5384615385vw);
  padding: min(62px, 4.7692307692vw) min(50px, 3.8461538462vw) min(54px, 4.1538461538vw);
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .spec-type-block {
    width: 93.75vw;
    border-radius: 3.125vw;
    padding: 9.0625vw 2.34375vw 3.125vw;
  }
}
.spec-type-block-inner {
  position: relative;
  margin-bottom: min(30px, 2.3076923077vw);
}
@media screen and (max-width: 768px) {
  .spec-type-block-inner {
    padding-left: 2.34375vw;
    padding-right: 2.34375vw;
    margin-bottom: 8.28125vw;
  }
}
.spec-type-block-inner .spec-type-block-title {
  text-align: center;
}
.spec-type-block-inner .img {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .spec-type-block-inner .img {
    width: 156.25vw;
    max-width: none;
  }
}
.spec-type-block-inner .img img {
  width: 100%;
  max-width: none;
}
.spec-type-block-inner .scroll-wrapper {
  position: relative;
}
.spec-type-block-inner .scroll-wrapper .icon {
  position: absolute;
  top: -54px;
  left: 60px;
  width: 142px;
}
@media screen and (max-width: 768px) {
  .spec-type-block-inner .scroll-wrapper .icon {
    top: -8.59375vw;
    left: -2.8125vw;
    width: 22.1875vw;
  }
}
.spec-type-block-inner .scroll-wrapper .icon img {
  width: 100%;
}
.spec-type-block-inner .cover {
  position: relative;
  overflow: hidden;
}
.spec-type-block-inner .cover:after {
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30px;
  background-color: transparent;
  z-index: 99;
}
@media screen and (max-width: 768px) {
  .spec-type-block-inner .cover:after {
    height: 4.6875vw;
  }
}
.spec-type-block-inner .scrollable {
  overflow: hidden;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  -webkit-appearance: none;
  padding-bottom: 0;
}
@media screen and (max-width: 768px) {
  .spec-type-block-inner .scrollable {
    padding-bottom: 4.375vw;
  }
}
.spec-type-block-inner .scrollable::-webkit-scrollbar {
  display: none;
  -webkit-appearance: none;
}
.spec-type-block-inner .scrollbar {
  display: none;
}
@media screen and (max-width: 768px) {
  .spec-type-block-inner .scrollbar {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0.9375vw;
    background-color: rgba(209, 209, 209, 0.5);
  }
}
.spec-type-block-inner .scrollbar-thumb {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  width: 26px;
  aspect-ratio: 1/1;
  background-color: #5b3468;
  border-radius: 50%;
  -webkit-border-radius: 50%;
}
@media screen and (max-width: 768px) {
  .spec-type-block-inner .scrollbar-thumb {
    width: 4.0625vw;
  }
}
.spec-type-block .function {
  text-align: center;
}
.spec-type-block .function img {
  width: min(1002px, 77.0769230769vw);
}
@media screen and (max-width: 768px) {
  .spec-type-block .function img {
    width: 66.875vw;
  }
}
.spec-type-block .function-txt {
  text-align: center;
  font-size: min(20px, 1.5384615385vw);
  font-weight: 700;
  letter-spacing: 0.025em;
  margin-bottom: min(40px, 3.0769230769vw);
}
@media screen and (max-width: 768px) {
  .spec-type-block .function-txt {
    font-size: 3.125vw;
    margin-bottom: 5vw;
  }
}
.spec-type-block .explain {
  border-top: 3px solid rgba(0, 0, 0, 0.2);
  padding-top: min(27px, 2.0769230769vw);
  margin-top: min(34px, 2.6153846154vw);
}
@media screen and (max-width: 768px) {
  .spec-type-block .explain {
    border-top-width: 2px;
    padding: 5.625vw 1.875vw 0;
    margin-top: 5.9375vw;
  }
}
.spec-type-block .explain-list {
  display: flex;
  align-items: center;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .spec-type-block .explain-list {
    display: block;
  }
}
.spec-type-block .explain-list .ttl {
  font-size: min(20px, 1.5384615385vw);
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-left: min(37px, 2.8461538462vw);
}
@media screen and (max-width: 768px) {
  .spec-type-block .explain-list .ttl {
    text-align: center;
    font-size: 3.125vw;
    margin-left: 0;
    margin-bottom: 2.34375vw;
  }
}
.spec-type-block .explain-list .txt {
  font-size: min(20px, 1.5384615385vw);
  font-weight: 400;
  letter-spacing: 0.05em;
  margin-left: min(20px, 1.5384615385vw);
}
@media screen and (max-width: 768px) {
  .spec-type-block .explain-list .txt {
    text-align: center;
    line-height: 1.4;
    font-size: 3.125vw;
    margin-left: 0;
  }
}
.spec-type-block .explain-list .note ul {
  line-height: 1.45;
  font-size: min(11px, 0.8461538462vw);
  font-weight: 400;
  letter-spacing: 0.1em;
  opacity: 0.5;
  margin-left: min(16px, 1.2307692308vw);
}
@media screen and (max-width: 768px) {
  .spec-type-block .explain-list .note ul {
    text-align: right;
    line-height: 1.4;
    font-size: 2.1875vw;
    margin-left: 0;
    margin-top: 2em;
  }
}

/* animation
---------------------------------------------------*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.animated.delay-05s {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
.animated.delay-1s {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}
.animated.delay-2s {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}
.animated.delay-3s {
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}
.animated.delay-4s {
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}
.animated.delay-5s {
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}
.animated.fast {
  -webkit-animation-duration: 800ms;
  animation-duration: 800ms;
}
.animated.faster {
  -webkit-animation-duration: 500ms;
  animation-duration: 500ms;
}
.animated.slow {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}
.animated.slower {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
}

@media print and (prefers-reduced-motion: reduce) {
  .animated {
    -webkit-animation-duration: 1ms !important;
    animation-duration: 1ms !important;
    -webkit-transition-duration: 1ms !important;
    transition-duration: 1ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
  }
}
@keyframes bounceInUp {
  0%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, 50%, 0) scaleY(0.4) scaleX(0.4);
  }
  40% {
    opacity: 1;
    transform: translate3d(0, -3%, 0);
  }
  70% {
    transform: translate3d(0, 3%, 0);
  }
  to {
    transform: translate3d(0, 0, 0) scaleY(1) scaleX(1);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 60%, 0);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes flash {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
@keyframes rotate {
  0% {
    rotate: 0deg;
  }
  100% {
    rotate: 360deg;
  }
}

/*# sourceMappingURL=main.css.map */