@charset "UTF-8";
* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  list-style: none;
}
*:before, *:after {
  -webkit-box-sizing: border-box;
  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.354vw;
  color: #eb68a2;
  background: url(./images/main_bg.webp) no-repeat center bottom/cover;
  position: relative;
  z-index: 0;
}
body::before {
  content: "";
  width: 73.542vw;
  height: 100vh;
  background-image: url(./images/scroll_bg.webp);
  background-repeat: repeat-y;
  background-size: contain;
  background-position: center;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}
@media screen and (max-width: 767px) {
  body::before {
    width: 95.093vw;
    background-image: url(./images/sp/scroll_bg.webp);
  }
}
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;
}
section.active h3 {
  opacity: 1;
  transform: translateY(0%);
}
section.active h3::before, section.active h3::after {
  clip-path: inset(0);
  transition-delay: 0.4s;
}

main {
  position: relative;
  overflow: hidden;
  /*見出し*/
}
main h3 {
  width: 55.99vw;
  font-family: "kaisei-decol", sans-serif;
  font-size: 2.396vw;
  color: #ffffff;
  text-align: center;
  position: relative;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(10%);
  transition: all ease-in-out 0.4s;
}
@media screen and (max-width: 767px) {
  main h3 {
    width: 84.112vw;
    font-size: 5.841vw;
  }
}
main h3::before, main h3::after {
  content: "";
  width: 13.542vw;
  height: 3.49vw;
  background-image: url(./images/title_deco.webp);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 3.906vw;
  clip-path: inset(0 0 0 100%);
  transition: all 0.4s;
}
@media screen and (max-width: 767px) {
  main h3::before, main h3::after {
    width: 24.533vw;
    height: 6.308vw;
    top: -5.841vw;
  }
}
main h3::before {
  left: 0;
}
main h3::after {
  right: 0;
  transform: scale(-1, 1);
}
main h3 span {
  position: relative;
}
main h3 span::before {
  content: "";
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}
main .inner {
  width: 90%;
  margin: 0 auto;
}
main #mv {
  height: 56.354vw;
  background: url(./images/mv_bg.webp) no-repeat center top/cover;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  main #mv {
    height: 217.29vw;
    background: url(./images/sp/mv_bg.webp) no-repeat center top/cover;
  }
}
main #mv.active .mv_chara_box .mv_chara_img {
  opacity: 1;
  animation: poyonUp 0.8s cubic-bezier(0.18, 0.89, 0.32, 1.28) 1 forwards;
}
main #mv.active .mv_logo_box {
  opacity: 1;
  transition-delay: 0.8s;
}
main #mv.active .mv_bg_deco_box .mv_bg_deco_img {
  opacity: 1;
  transition-delay: 0.8s;
}
main #mv .mv_chara_box .mv_chara_img {
  width: 32.521vw;
  position: absolute;
  opacity: 0;
}
main #mv .mv_chara_box .mv_chara_img img {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
main #mv .mv_chara_box .mv_chara_img.animate img {
  animation: poyopoyo 2s ease-out 1;
}
main #mv .mv_chara_box .mv_chara_img.img_01 {
  width: 17vw;
  top: 4.146vw;
  left: 65.375vw;
  z-index: 2;
}
@media screen and (max-width: 767px) {
  main #mv .mv_chara_box .mv_chara_img.img_01 {
    width: 40.813vw;
    top: 28.467vw;
    left: 0.907vw;
    z-index: 1;
  }
}
main #mv .mv_chara_box .mv_chara_img.img_02 {
  top: 0.458vw;
  left: 33.74vw;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  main #mv .mv_chara_box .mv_chara_img.img_02 {
    width: 63.411vw;
    top: 28.037vw;
    left: auto;
    right: 0.738vw;
    z-index: 2;
  }
}
main #mv .mv_chara_box .mv_chara_img.img_03 {
  top: 3.323vw;
  left: 3.844vw;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  main #mv .mv_chara_box .mv_chara_img.img_03 {
    width: 57.944vw;
    top: 62.121vw;
    left: -3.037vw;
    z-index: 4;
  }
}
main #mv .mv_chara_box .mv_chara_img.img_04 {
  width: 20vw;
  top: 3.385vw;
  right: -0.5vw;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  main #mv .mv_chara_box .mv_chara_img.img_04 {
    width: 53vw;
    top: 63.178vw;
    right: -2.009vw;
    z-index: 3;
  }
}
main #mv .mv_chara_box .mv_chara_img.img_05 {
  top: 22.344vw;
  left: 4.635vw;
  z-index: 2;
}
@media screen and (max-width: 767px) {
  main #mv .mv_chara_box .mv_chara_img.img_05 {
    width: 76.252vw;
    top: 87vw;
    left: -8.374vw;
    z-index: 6;
  }
}
main #mv .mv_chara_box .mv_chara_img.img_06 {
  top: 22.823vw;
  right: 4.583vw;
  z-index: 2;
}
@media screen and (max-width: 767px) {
  main #mv .mv_chara_box .mv_chara_img.img_06 {
    width: 68.813vw;
    top: 86.43vw;
    left: 40.561vw;
    z-index: 5;
  }
}
main #mv .mv_logo_box {
  width: 55.729vw;
  padding-top: 13.729vw;
  margin-left: 21.302vw;
  text-align: center;
  z-index: 3;
  opacity: 0;
  transition: all ease-in-out 0.4s;
  position: relative;
}
@media screen and (max-width: 767px) {
  main #mv .mv_logo_box {
    display: block;
    width: 100%;
    padding-top: 0;
    margin: 0 auto;
    z-index: 7;
  }
}
main #mv .mv_logo_box h1 {
  width: 29.635vw;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  main #mv .mv_logo_box h1 {
    width: 60.047vw;
    margin-top: -0.935vw;
  }
}
main #mv .mv_logo_box ul {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-top: -2.7vw;
}
@media screen and (max-width: 767px) {
  main #mv .mv_logo_box ul {
    position: absolute;
    top: 134.86vw;
    left: 50%;
    transform: translateX(-50%);
  }
}
main #mv .mv_logo_box ul .logo_01 {
  width: 13.438vw;
  margin-bottom: 2.083vw;
}
@media screen and (max-width: 767px) {
  main #mv .mv_logo_box ul .logo_01 {
    width: 43.458vw;
    margin-bottom: 0;
  }
}
main #mv .mv_logo_box ul .logo_02 {
  width: 12.188vw;
  margin-bottom: 2.083vw;
}
@media screen and (max-width: 767px) {
  main #mv .mv_logo_box ul .logo_02 {
    width: 37.85vw;
    margin-bottom: 0;
  }
}
main #mv .mv_logo_box .vol {
  width: 35.52vw;
  margin: 0 auto;
  margin-top: -3.5vw;
}
@media screen and (max-width: 767px) {
  main #mv .mv_logo_box .vol {
    width: 100%;
    position: absolute;
    top: 160.86vw;
    left: 50%;
    transform: translateX(-50%);
  }
}
main #mv .mv_bg_deco_box .mv_bg_deco_img {
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  z-index: -1;
  opacity: 0;
  transition: all ease-in-out 0.4s;
  pointer-events: none;
}
main #mv .mv_bg_deco_box .mv_bg_deco_img.bg_01 {
  width: 101.094vw;
  height: 50.781vw;
  background-image: url(./images/mv_deco_01.webp);
  top: -2.76vw;
  left: 0.26vw;
  transform: translateY(-2%);
  animation: floating-y 1.8s ease-in-out infinite alternate-reverse;
}
@media screen and (max-width: 767px) {
  main #mv .mv_bg_deco_box .mv_bg_deco_img.bg_01 {
    width: 100vw;
    height: 25.467vw;
    background-image: url(./images/sp/mv_deco_01.webp);
    top: 0;
    left: 0;
  }
}
main #mv .mv_bg_deco_box .mv_bg_deco_img.bg_02 {
  width: 95.313vw;
  height: 28.854vw;
  background-image: url(./images/mv_deco_02.webp);
  top: 0.729vw;
  left: 3.49vw;
  transform: translateY(-2%);
  animation: floating-y 1.8s ease-in-out 0.9s infinite alternate-reverse;
}
@media screen and (max-width: 767px) {
  main #mv .mv_bg_deco_box .mv_bg_deco_img.bg_02 {
    width: 101.402vw;
    height: 158.879vw;
    background-image: url(./images/sp/mv_deco_02.webp);
    top: 7.477vw;
    left: -5.607vw;
  }
}
main #mv .mv_bg_deco_box .mv_bg_deco_img.bg_03 {
  width: 94.844vw;
  height: 41.927vw;
  background-image: url(./images/mv_deco_03.webp);
  top: 0.8vw;
  left: 2.5vw;
  transform: translateY(-2%);
  animation: floating-y 1.8s ease-in-out infinite alternate-reverse;
}
@media screen and (max-width: 767px) {
  main #mv .mv_bg_deco_box .mv_bg_deco_img.bg_03 {
    width: 109.346vw;
    height: 39.019vw;
    background-image: url(./images/sp/mv_deco_03.webp);
    top: 113.084vw;
    left: 0;
  }
}
main #intro {
  text-align: center;
  color: #bf88bf;
  margin-top: -3.125vw;
}
@media screen and (max-width: 767px) {
  main #intro {
    margin-top: -11.682vw;
  }
}
main #intro::before {
  content: "";
  width: 100vw;
  height: 78.177vw;
  background: url(./images/intro_bg.webp) no-repeat center top/cover;
  position: absolute;
  top: -26.042vw;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}
@media screen and (max-width: 767px) {
  main #intro::before {
    height: 233.645vw;
    background: url(./images/sp/intro_bg.webp) no-repeat center top/cover;
    top: -60.748vw;
  }
}
main #intro .intro_box {
  width: 87.083vw;
  height: 57.135vw;
  margin: 0 auto;
  padding-top: 4.063vw;
  position: relative;
}
@media screen and (max-width: 767px) {
  main #intro .intro_box {
    width: 100%;
    height: 123.131vw;
    padding-top: 4.673vw;
  }
}
main #intro .intro_box.active .intro_txt {
  opacity: 1;
  transform: translateY(0%);
}
main #intro .intro_box.active::before, main #intro .intro_box.active::after {
  animation: popup 0.8s cubic-bezier(0.25, 0.47, 0.43, 1.04) 0.5s forwards;
}
main #intro .intro_box::before {
  content: "";
  width: 16.406vw;
  height: 19.01vw;
  background-image: url(./images/intro_deco_01.webp);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 4.167vw;
  left: 3.958vw;
  z-index: 1;
  opacity: 0;
}
@media screen and (max-width: 767px) {
  main #intro .intro_box::before {
    width: 29.439vw;
    height: 33.879vw;
    background-image: url(./images/sp/intro_deco_01.webp);
    top: 2.336vw;
    left: -4.673vw;
  }
}
main #intro .intro_box::after {
  content: "";
  width: 14.948vw;
  height: 20.052vw;
  background-image: url(./images/intro_deco_02.webp);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 3.125vw;
  right: 4.167vw;
  z-index: 1;
  opacity: 0;
}
@media screen and (max-width: 767px) {
  main #intro .intro_box::after {
    width: 23.832vw;
    height: 34.813vw;
    background-image: url(./images/sp/intro_deco_02.webp);
    top: 2.336vw;
    right: -4.009vw;
  }
}
main #intro .intro_txt {
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: translateY(10%);
  transition: all ease-in-out 0.4s;
}
main #intro .intro_box_light {
  width: 92.865vw;
  height: 42.708vw;
  background-image: url(./images/intro_deco_light.webp);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: -11.667vw;
  left: -2.292vw;
}
@media screen and (max-width: 767px) {
  main #intro .intro_box_light {
    width: 152.336vw;
    height: 151.402vw;
    background-image: url(./images/sp/intro_deco_light.webp);
    top: -18.367vw;
    left: -24.766vw;
  }
}
main #intro .intro_box_box {
  width: 87.083vw;
  height: 57.135vw;
  background-image: url(./images/intro_bg_box.webp);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: -7.812vw;
  left: 0;
  z-index: -1;
}
@media screen and (max-width: 767px) {
  main #intro .intro_box_box {
    width: 97.664vw;
    height: 45.794vw;
    background-image: url(./images/sp/intro_bg_box.webp);
    top: 85.271vw;
    left: auto;
    right: 0;
  }
}
main #intro h2 {
  width: 27.5vw;
  margin: 0 auto;
  padding-bottom: 1.771vw;
  margin-bottom: 1.771vw;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  main #intro h2 {
    width: 78.271vw;
    padding-bottom: 3.738vw;
    margin-bottom: 5.374vw;
  }
}
main #intro h2::before {
  content: "";
  width: 39.115vw;
  height: 0.521vw;
  background-image: url(./images/intro_line.webp);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
  main #intro h2::before {
    width: 81.542vw;
    height: 1.168vw;
  }
}
main #intro p {
  width: 62.969vw;
  line-height: 1.53;
  margin: 0 auto;
  text-shadow: 0px 0px 7px rgb(255, 255, 255), 0px 0px 7px rgb(255, 255, 255), 0px 0px 7px rgb(255, 255, 255), 0px 0px 7px rgb(255, 255, 255);
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  main #intro p {
    width: 90.654vw;
    line-height: 1.66;
    text-shadow: 0px 0px 5px rgb(255, 255, 255), 0px 0px 5px rgb(255, 255, 255), 0px 0px 5px rgb(255, 255, 255), 0px 0px 5px rgb(255, 255, 255), 0px 0px 5px rgb(255, 255, 255), 0px 0px 5px rgb(255, 255, 255);
  }
}
main #intro p::before {
  content: "";
  width: 11.042vw;
  height: 7.135vw;
  background-image: url(./images/intro_deco_03.webp);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 5.104vw;
  left: 8.333vw;
}
@media screen and (max-width: 767px) {
  main #intro p::before {
    width: 32.009vw;
    height: 17.29vw;
    background-image: url(./images/sp/intro_deco_03.webp);
    top: 42.056vw;
    left: 2.336vw;
  }
}
main #intro p::after {
  content: "";
  width: 10.521vw;
  height: 7.969vw;
  background-image: url(./images/intro_deco_04.webp);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 4.427vw;
  right: 9.896vw;
}
@media screen and (max-width: 767px) {
  main #intro p::after {
    width: 30.607vw;
    height: 19.393vw;
    background-image: url(./images/sp/intro_deco_04.webp);
    top: 41.589vw;
    right: 1.168vw;
  }
}
main #intro p small {
  font-size: 0.83vw;
}
@media screen and (max-width: 767px) {
  main #intro p small {
    font-size: 2.5vw;
  }
}
main #character {
  margin-top: -4.167vw;
  margin-bottom: 8.073vw;
}
@media screen and (max-width: 767px) {
  main #character {
    margin-top: 30.4vw;
    margin-bottom: 20vw;
  }
}
main #character.active .character_slider_inner {
  opacity: 1;
  transform: translateY(0%);
}
main #character .inner {
  max-width: 66.25vw;
  opacity: 0;
  transform: translateY(10%);
  transition: all ease-in-out 0.4s;
}
@media screen and (max-width: 767px) {
  main #character .inner {
    max-width: 84.112vw;
  }
}
main #character h3 {
  width: 59.896vw;
}
@media screen and (max-width: 767px) {
  main #character h3 {
    width: 84.112vw;
    padding-top: 2.336vw;
  }
}
main #character h3 span {
  padding: 0.208vw;
}
@media screen and (max-width: 767px) {
  main #character h3 span {
    padding: 0.701vw;
  }
}
main #character h3 span::before {
  width: 30.052vw;
  height: 6.406vw;
  background-image: url(./images/chara_title_bg.webp);
}
@media screen and (max-width: 767px) {
  main #character h3 span::before {
    width: 81.075vw;
    height: 17.523vw;
  }
}
main #character .character_slider_main {
  position: relative;
  width: 90%;
  margin: 0 auto;
}
main #character .character_slider_main .swiper-pointer-events {
  padding: 5vw 0;
}
main #character .character_slider_main img {
  transition: 0.4s;
}
main #character .character_slider_main .swiper-slide-active img {
  transform: scale(1.8);
}
@media screen and (max-width: 767px) {
  main #character .character_slider_main {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
    margin-top: -4.673vw;
  }
  main #character .character_slider_main .slide-inner {
    height: 107.477vw;
    overflow: hidden;
    position: relative;
  }
  main #character .character_slider_main .slide-inner img {
    width: 115%;
    max-width: none;
    position: absolute;
    top: 50%;
    left: 45%;
    transform: translate(-50%, -50%);
  }
}
main #character .character_slider_main .swiper-button-prev {
  left: 0%;
}
@media screen and (max-width: 767px) {
  main #character .character_slider_main .swiper-button-prev {
    left: 8%;
  }
}
@media screen and (min-width: 767px) {
  main #character .character_slider_main .swiper-button-prev:hover {
    transform: translateX(-20%);
  }
}
main #character .character_slider_main .swiper-button-next {
  right: 0%;
}
main #character .character_slider_main .swiper-button-next::after {
  transform: scale(-1, 1);
}
@media screen and (max-width: 767px) {
  main #character .character_slider_main .swiper-button-next {
    right: 8%;
  }
}
@media screen and (min-width: 767px) {
  main #character .character_slider_main .swiper-button-next:hover {
    transform: translateX(20%);
  }
}
main #character .thumb_slider_inner {
  width: 75%;
  max-width: 51.771vw;
  margin: 0 auto;
  margin-top: -4.167vw;
}
@media screen and (max-width: 767px) {
  main #character .thumb_slider_inner {
    width: 100%;
    max-width: none;
    margin-top: -4.2vw;
  }
}
main #character .slider-thumbnail {
  width: 100%;
}
@media screen and (max-width: 767px) {
  main #character .slider-thumbnail {
    margin-top: -20vw;
  }
}
main #character .slider-thumbnail .swiper-wrapper {
  display: flex;
  flex-wrap: wrap; /* 折り返し許可 */
  justify-content: center; /* 常に中央揃え */
  gap: 0 4px;
}
@media screen and (max-width: 767px) {
  main #character .slider-thumbnail .swiper-wrapper {
    gap: 4px;
  }
}
main #character .slider-thumbnail .swiper-slide {
  width: calc((100% - 24px) / 7) !important;
  cursor: pointer;
  padding: 0.2%;
}
@media screen and (max-width: 767px) {
  main #character .slider-thumbnail .swiper-slide {
    width: 18.1818181818% !important;
    padding: 0.5%;
  }
}
main #character .slider-thumbnail .swiper-slide:first-child {
  margin-left: calc((100% - 24px) / 7 / 2 + 2px);
}
@media screen and (max-width: 767px) {
  main #character .slider-thumbnail .swiper-slide:first-child {
    margin-left: 0;
  }
}
main #character .slider-thumbnail .swiper-slide:nth-child(6) {
  margin-right: calc((100% - 24px) / 7 / 2 + 2px);
}
@media screen and (max-width: 767px) {
  main #character .slider-thumbnail .swiper-slide:nth-child(6) {
    margin-right: 0;
  }
}
main #character .slider-thumbnail .swiper-slide .thum_illust_box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 0;
  transition: all 0.4s;
}
main #character .slider-thumbnail .swiper-slide .thum_illust_box img {
  width: 99%;
  height: 99%;
  object-fit: contain;
  opacity: 1;
  transition: all 0.4s;
}
@media screen and (min-width: 767px) {
  main #character .slider-thumbnail .swiper-slide .thum_illust_box:hover img {
    opacity: 0.5;
  }
}
main #character .slider-thumbnail .swiper-slide.swiper-slide-thumb-active {
  filter: drop-shadow(0px 0px 3px red);
}
main #character .slider-thumbnail .swiper-slide.swiper-slide-thumb-active .thum_illust_box img {
  opacity: 1 !important;
}
@media screen and (min-width: 767px) {
  main #character .slider-thumbnail .swiper-slide.swiper-slide-thumb-active .thum_illust_box:hover img {
    opacity: 0.5;
  }
}
main #lineup {
  margin-bottom: 9.219vw;
}
@media screen and (max-width: 767px) {
  main #lineup {
    margin-bottom: 21.028vw;
  }
}
main #lineup.active .lineup_contents {
  opacity: 1;
  transform: translateY(0%);
}
main #lineup .inner {
  max-width: 60.781vw;
}
@media screen and (max-width: 767px) {
  main #lineup .inner {
    max-width: 84.112vw;
  }
}
main #lineup .lineup_contents {
  opacity: 0;
  transform: translateY(10%);
  transition: all ease-in-out 0.5s;
}
@media screen and (max-width: 767px) {
  main #lineup h3 {
    padding-top: 2.336vw;
  }
}
main #lineup h3 span {
  padding: 0.208vw;
}
@media screen and (max-width: 767px) {
  main #lineup h3 span {
    padding: 0.701vw;
  }
}
main #lineup h3 span::before {
  width: 27.5vw;
  height: 6.563vw;
  background-image: url(./images/lineup_title_bg.webp);
}
@media screen and (max-width: 767px) {
  main #lineup h3 span::before {
    width: 70.794vw;
    height: 16.822vw;
  }
}
main #lineup .lineupbtn_box {
  flex-wrap: wrap;
  gap: 1.563vw 1.042vw;
  margin-top: 7.552vw;
  margin-left: 2.083vw;
  margin-bottom: 3.802vw;
}
@media screen and (max-width: 767px) {
  main #lineup .lineupbtn_box {
    gap: 3.505vw 5vw;
    margin-top: 13.551vw;
    margin-left: 2.804vw;
    margin-bottom: 4.206vw;
  }
}
main #lineup .lineup_btn {
  font-size: 1.146vw;
  color: #ffffff;
  background-size: auto auto;
  background-color: #c496c7;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 18px, rgba(255, 255, 255, 0.1) 18px, rgba(255, 255, 255, 0.1) 36px);
  border: 5px solid transparent;
  border-radius: 1.042vw;
  height: 2.083vw;
  padding: 0 1.042vw;
  position: relative;
  opacity: 0.6;
  transition: all 0.4s;
  white-space: nowrap;
}
@media screen and (max-width: 767px) {
  main #lineup .lineup_btn {
    font-size: 3.738vw;
    text-align: center;
    border-width: 0.467vw;
    border-radius: 5.841vw;
    height: 12vw;
    padding: 0 3.505vw;
    width: 37.71vw;
    height: 12vw;
  }
}
main #lineup .lineup_btn::after {
  content: "";
  width: 100%;
  height: 150%;
  background-color: inherit;
  border-radius: inherit;
  position: absolute;
  top: 0%;
  left: 10px;
  z-index: -1;
  opacity: 0.5;
  transition: all 0.4s;
}
@media screen and (max-width: 767px) {
  main #lineup .lineup_btn::after {
    height: 100%;
    top: 16%;
    left: 2%;
  }
}
@media screen and (min-width: 767px) {
  main #lineup .lineup_btn:hover {
    border: 5px solid #eb68a2;
    transform: translate(0.5vw, 0.2vw);
    opacity: 1;
  }
  main #lineup .lineup_btn:hover::after {
    height: 100%;
    left: 0;
  }
}
main #lineup .lineup_btn.active {
  border: 5px solid #eb68a2;
  transform: translate(0.5vw, 0.2vw);
  opacity: 1;
}
@media screen and (max-width: 767px) {
  main #lineup .lineup_btn.active {
    transform: translate(0px, 0.467vw);
    border-width: 1.168vw;
  }
}
main #lineup .lineup_btn.active::after {
  height: 100%;
  top: 0;
  left: 0;
}
main #lineup .lineup_btn-01 {
  background-color: #c496c7;
}
@media screen and (max-width: 767px) {
  main #lineup .lineup_btn-01 {
    padding: 0px 5.14vw;
  }
}
main #lineup .lineup_btn-02 {
  background-color: #89acd9;
}
main #lineup .lineup_btn-03 {
  background-color: #a6cc86;
}
main #lineup .lineup_btn-04 {
  background-color: #f0cf83;
}
main #lineup .lineup_btn-05 {
  background-color: #eaa5c7;
}
main #lineup .lineup_btn-06 {
  background-color: #f7ab7a;
}
main #lineup .lineup_btn-07 {
  background-color: #fc9393;
}
main #lineup .lineup_btn-08 {
  background-color: #a9dde3;
}
main #lineup .lineup_box {
  position: relative;
  width: 93%;
  height: 0;
  margin: 0 auto;
  opacity: 0;
  transform: scale(0.8);
  transition: transform cubic-bezier(0.22, 1, 0.36, 1) 0.4s;
}
@media screen and (max-width: 767px) {
  main #lineup .lineup_box {
    width: 100%;
  }
}
main #lineup .lineup_box.active {
  height: auto;
  opacity: 1;
  transform: scale(1);
  transition: all ease-in-out 0.5s;
}
main #lineup .lineup_box .lineup_box_inner {
  justify-content: space-between;
  background-color: #ffffff;
  border: 3px solid #eb68a2;
  border-radius: 1.875vw;
  padding: 3.125vw 3.646vw;
  position: relative;
}
@media screen and (max-width: 767px) {
  main #lineup .lineup_box .lineup_box_inner {
    border-width: 0.467vw;
    flex-direction: column;
    border-radius: 4.673vw;
    padding: 3.505vw;
    padding-bottom: 7.009vw;
  }
}
main #lineup .lineup_box .lineup_box_inner::before {
  content: "";
  width: 11.25vw;
  height: 8.906vw;
  background-image: url(./images/lineup_deco_ribbon01.webp);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
@media screen and (max-width: 767px) {
  main #lineup .lineup_box .lineup_box_inner::before {
    width: 21.963vw;
    height: 17.523vw;
  }
}
main #lineup .lineup_box .lineup_box_inner::after {
  content: "";
  width: 9.948vw;
  height: 5.313vw;
  background-image: url(./images/lineup_deco_ribbon02.webp);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  bottom: 0;
  right: -0.052vw;
  z-index: 2;
}
@media screen and (max-width: 767px) {
  main #lineup .lineup_box .lineup_box_inner::after {
    width: 20.327vw;
    height: 10.981vw;
    bottom: -0.234vw;
    right: 0;
  }
}
main #lineup .lineup_box .lineup_box_inner .lineup_slider {
  width: 45%;
}
@media screen and (max-width: 767px) {
  main #lineup .lineup_box .lineup_box_inner .lineup_slider {
    width: 100%;
  }
}
main #lineup .lineup_box .lineup_box_inner .lineup_info {
  width: 50%;
}
@media screen and (max-width: 767px) {
  main #lineup .lineup_box .lineup_box_inner .lineup_info {
    width: 100%;
    margin-top: 3.972vw;
  }
}
main #lineup .lineup_box .lineup_box_inner .lineup_info h4 {
  line-height: 1.53;
  white-space: nowrap;
}
@media screen and (max-width: 767px) {
  main #lineup .lineup_box .lineup_box_inner .lineup_info h4 {
    font-size: 4.673vw;
    line-height: 1.1;
    white-space: inherit;
  }
}
main #lineup .lineup_box .lineup_box_inner .lineup_info .lineup_no {
  margin-top: 0.677vw;
}
@media screen and (max-width: 767px) {
  main #lineup .lineup_box .lineup_box_inner .lineup_info .lineup_no {
    margin-top: 3.037vw;
  }
}
main #lineup .lineup_box .lineup_box_inner .lineup_info .lineup_no .lineup_no_li {
  font-size: 0.729vw;
  line-height: 1.5;
  margin-bottom: 0.677vw;
}
@media screen and (max-width: 767px) {
  main #lineup .lineup_box .lineup_box_inner .lineup_info .lineup_no .lineup_no_li {
    font-size: 3.271vw;
    margin-bottom: 2.336vw;
  }
}
main #lineup .lineup_box .lineup_box_inner .lineup_info .lineup_no .lineup_no_li span {
  font-size: 1.042vw;
  line-height: 1;
  color: #ffffff;
  height: 1.146vw;
  padding: 0 0.365vw;
  background-color: #e5a0bd;
  border-radius: 0.26vw;
  margin-right: 1.563vw;
}
@media screen and (max-width: 767px) {
  main #lineup .lineup_box .lineup_box_inner .lineup_info .lineup_no .lineup_no_li span {
    font-size: 5.14vw;
    padding: 0 2.336vw;
    height: 6.14vw;
    border-radius: 1.168vw;
    margin-right: 8vw;
    margin-top: 0.2vw;
  }
}
main #lineup .lineup_box .lineup_box_inner .lineup_info .lineup_no .lineup_no_li:nth-of-type(1) {
  color: #e5a0bd;
}
main #lineup .lineup_box .lineup_box_inner .lineup_info .lineup_no .lineup_no_li:nth-of-type(1) span {
  background-color: #e5a0bd;
}
main #lineup .lineup_box .lineup_box_inner .lineup_info .lineup_no .lineup_no_li:nth-of-type(2) {
  color: #8cc8e2;
}
main #lineup .lineup_box .lineup_box_inner .lineup_info .lineup_no .lineup_no_li:nth-of-type(2) span {
  background-color: #8cc8e2;
}
main #lineup .lineup_box .lineup_box_inner .lineup_info .lineup_no .lineup_no_li:nth-of-type(3) {
  color: #e2d5a2;
}
main #lineup .lineup_box .lineup_box_inner .lineup_info .lineup_no .lineup_no_li:nth-of-type(3) span {
  background-color: #e2d5a2;
}
main #lineup .lineup_box .lineup_box_inner .lineup_info .lineup_no-goods03 .lineup_no_li {
  margin-bottom: 0.156vw;
}
@media screen and (max-width: 767px) {
  main #lineup .lineup_box .lineup_box_inner .lineup_info .lineup_no-goods03 .lineup_no_li {
    margin-bottom: 2.336vw;
  }
}
main #lineup .lineup_box .lineup_box_inner .lineup_info .lineup_info_txt {
  font-size: 0.938vw;
  line-height: 1.55;
  color: #9868bc;
  position: relative;
  margin-top: 1.198vw;
  padding-top: 0.833vw;
}
@media screen and (max-width: 767px) {
  main #lineup .lineup_box .lineup_box_inner .lineup_info .lineup_info_txt {
    font-size: 3.271vw;
    margin-top: 2.336vw;
    padding-top: 2.804vw;
  }
}
main #lineup .lineup_box .lineup_box_inner .lineup_info .lineup_info_txt::after {
  content: "";
  width: 100%;
  height: 0.156vw;
  background-color: #e2c5da;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
  main #lineup .lineup_box .lineup_box_inner .lineup_info .lineup_info_txt::after {
    height: 0.467vw;
  }
}
main #lineup .lineup_box .lineup_box_inner .lineup_info .lineup_info_detile {
  font-size: 0.833vw;
  line-height: 1.25;
  margin-top: 1.458vw;
  margin-bottom: 2.083vw;
  color: #f69dc3;
}
@media screen and (max-width: 767px) {
  main #lineup .lineup_box .lineup_box_inner .lineup_info .lineup_info_detile {
    font-size: 3.271vw;
    line-height: 1.57;
    margin-top: 2.804vw;
    margin-bottom: 2.804vw;
  }
}
main #lineup .lineup_box .lineup_box_inner .lineup_info .lineup_info_price {
  font-family: "kaisei-decol", sans-serif;
  font-size: 1.146vw;
  text-align: right;
}
@media screen and (max-width: 767px) {
  main #lineup .lineup_box .lineup_box_inner .lineup_info .lineup_info_price {
    font-size: 3.738vw;
  }
}
main #lineup .lineup_box .lineup_box_inner .lineup_info .lineup_info_price span {
  font-size: 2.396vw;
  padding-right: 0.26vw;
}
@media screen and (max-width: 767px) {
  main #lineup .lineup_box .lineup_box_inner .lineup_info .lineup_info_price span {
    font-size: 7.944vw;
    padding-right: 1.168vw;
  }
}
main #lineup .lineup_box .lineup_box_inner .slide-inner {
  border: 2px solid #c496c7;
  border-radius: 1.25vw;
}
@media screen and (max-width: 767px) {
  main #lineup .lineup_box .lineup_box_inner .slide-inner {
    border-radius: 4.206vw;
  }
}
main #lineup .lineup_box .lineup_box_inner .slider-thumbnail {
  width: 100%;
  margin-top: 0.938vw;
}
@media screen and (max-width: 767px) {
  main #lineup .lineup_box .lineup_box_inner .slider-thumbnail {
    margin-top: 4.206vw;
  }
}
main #lineup .lineup_box .lineup_box_inner .slider-thumbnail .swiper-wrapper {
  gap: 0.26vw 0.365vw;
  flex-wrap: wrap;
}
@media screen and (max-width: 767px) {
  main #lineup .lineup_box .lineup_box_inner .slider-thumbnail .swiper-wrapper {
    gap: 1.636vw 1.1vw;
  }
}
main #lineup .lineup_box .lineup_box_inner .slider-thumbnail .swiper-slide {
  width: 2.083vw !important;
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  main #lineup .lineup_box .lineup_box_inner .slider-thumbnail .swiper-slide {
    width: 11.748vw !important;
  }
}
main #lineup .lineup_box .lineup_box_inner .slider-thumbnail .swiper-slide .thum_illust_box {
  height: 2.083vw;
  border: 2px solid transparent;
  border-radius: 0.417vw;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 0;
  transition: all 0.4s;
}
@media screen and (max-width: 767px) {
  main #lineup .lineup_box .lineup_box_inner .slider-thumbnail .swiper-slide .thum_illust_box {
    height: 11.748vw;
    border-radius: 1.869vw;
    border: 3px solid transparent;
  }
}
main #lineup .lineup_box .lineup_box_inner .slider-thumbnail .swiper-slide .thum_illust_box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  transition: all 0.4s;
}
@media screen and (min-width: 767px) {
  main #lineup .lineup_box .lineup_box_inner .slider-thumbnail .swiper-slide .thum_illust_box:hover {
    border: 2px solid #eb7aae;
  }
}
main #lineup .lineup_box .lineup_box_inner .slider-thumbnail .swiper-slide.swiper-slide-thumb-active .thum_illust_box {
  border: 2px solid #eb7aae;
}
@media screen and (max-width: 767px) {
  main #lineup .lineup_box .lineup_box_inner .slider-thumbnail .swiper-slide.swiper-slide-thumb-active .thum_illust_box {
    border: 3px solid #eb7aae;
  }
}
main #lineup .lineup_box_area {
  position: relative;
}
main #lineup .lineup-button-prev,
main #lineup .lineup-button-next {
  position: absolute;
  top: 15.625vw;
  height: 2.5vw;
  width: 1.25vw;
  transition: all 0.4s;
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  main #lineup .lineup-button-prev,
  main #lineup .lineup-button-next {
    top: -10.981vw;
    height: 6.542vw;
    width: 3.271vw;
    display: none;
  }
}
main #lineup .lineup-button-prev::after,
main #lineup .lineup-button-next::after {
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 2.5vw;
  margin: auto;
  width: 1.25vw;
  background-image: url(./images/icon_arrow.svg);
  position: absolute;
  top: 0;
  left: 0;
}
@media screen and (max-width: 767px) {
  main #lineup .lineup-button-prev::after,
  main #lineup .lineup-button-next::after {
    height: 6.542vw;
    width: 3.271vw;
  }
}
main #lineup .lineup-button-prev {
  left: 0%;
}
@media screen and (min-width: 767px) {
  main #lineup .lineup-button-prev:hover {
    transform: translateX(-20%);
  }
}
@media screen and (max-width: 767px) {
  main #lineup .lineup-button-prev {
    left: 74%;
  }
}
main #lineup .lineup-button-next {
  right: 0%;
}
main #lineup .lineup-button-next::after {
  transform: scale(-1, 1);
}
@media screen and (max-width: 767px) {
  main #lineup .lineup-button-next {
    right: 6%;
  }
}
@media screen and (min-width: 767px) {
  main #lineup .lineup-button-next:hover {
    transform: translateX(20%);
  }
}
main #lineup .onsale {
  text-align: center;
}
main #lineup .onsale span {
  display: inline-block;
  background: url(./images/onsale_bg.webp) no-repeat center/contain;
  font-size: 2.5vw;
  padding: 3vw 4vw;
  color: #eb68a2;
  font-family: "kaisei-decol", sans-serif;
}
@media screen and (max-width: 767px) {
  main #lineup .onsale span {
    font-size: 6.5vw;
    padding: 7vw 7vw;
  }
}
main #benefits {
  margin-top: -4vw;
  margin-bottom: 7.813vw;
}
@media screen and (max-width: 767px) {
  main #benefits {
    margin-bottom: 22.196vw;
  }
}
main #benefits .inner {
  max-width: 56.51vw;
}
@media screen and (max-width: 767px) {
  main #benefits .inner {
    max-width: 84.112vw;
  }
}
main #benefits h3 span::before {
  width: 22.396vw;
  height: 5.99vw;
  background-image: url(./images/benefits_title_bg.webp);
}
@media screen and (max-width: 767px) {
  main #benefits h3 span::before {
    width: 62.15vw;
    height: 16.589vw;
  }
}
main #benefits .benefits_txt_first {
  margin-top: 6.9vw;
  font-size: 1.563vw;
  text-align: center;
  opacity: 0;
  transition: all ease-in-out 0.5s;
}
@media screen and (max-width: 767px) {
  main #benefits .benefits_txt_first {
    margin-top: 13.551vw;
    font-size: 4.673vw;
    line-height: 1.5;
  }
}
main #benefits .benefits_txt_first.active {
  opacity: 1;
}
main #benefits .benefits_box {
  margin-top: 3.385vw;
  position: relative;
  opacity: 0;
  transform: translateY(10%);
  transition: all ease-in-out 0.5s;
}
@media screen and (max-width: 767px) {
  main #benefits .benefits_box {
    font-size: 3.738vw;
    margin-top: 2.804vw;
  }
}
main #benefits .benefits_box.active {
  opacity: 1;
  transform: translateY(0%);
}
main #benefits .benefits_box.active h5 {
  transform: scale(1, 1);
  transition-delay: 0.6s;
}
main #benefits .benefits_box.end {
  height: 25.656vw;
}
@media screen and (max-width: 767px) {
  main #benefits .benefits_box.end {
    height: 133.656vw;
  }
}
main #benefits .benefits_box.end::before {
  background-image: url(./images/benefits_frame_blue_end.webp);
}
@media screen and (max-width: 767px) {
  main #benefits .benefits_box.end::before {
    background-image: url(./images/sp/benefits_frame_blue_end.webp);
  }
}
main #benefits .benefits_box.end .end_tag {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
main #benefits .benefits_box.end .end_tag img {
  width: 15vw;
}
@media screen and (max-width: 767px) {
  main #benefits .benefits_box.end .end_tag img {
    width: 100%;
  }
}
main #benefits .benefits_box.end .benefits_img {
  filter: grayscale(1);
}
main #benefits .benefits_box::before {
  content: "";
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}
main #benefits .benefits_box h4 {
  font-size: 1.979vw;
  line-height: 1.45;
  color: #ffffff;
  text-align: center;
  position: relative;
}
@media screen and (max-width: 767px) {
  main #benefits .benefits_box h4 {
    font-size: 4.206vw;
    padding-top: 0.935vw;
  }
}
main #benefits .benefits_box h4::before {
  content: "";
  width: 33.594vw;
  height: 4.219vw;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}
@media screen and (max-width: 767px) {
  main #benefits .benefits_box h4::before {
    width: 100%;
    height: 12.383vw;
  }
}
main #benefits .benefits_box h5 {
  font-size: 1.563vw;
  color: #ffffff;
  text-align: center;
  position: relative;
  margin-bottom: 1.823vw;
  transform: scale(0, 1);
  transition: all 0.4s;
}
@media screen and (max-width: 767px) {
  main #benefits .benefits_box h5 {
    font-size: 4.206vw;
    line-height: 1.4;
    margin-bottom: 3.505vw;
  }
}
main #benefits .benefits_box h5::before {
  content: "";
  width: 9.115vw;
  height: 2.135vw;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}
@media screen and (max-width: 767px) {
  main #benefits .benefits_box h5::before {
    width: 26.402vw;
    height: 6.542vw;
  }
}
main #benefits .benefits_box .benefits_box_inner {
  width: 39.427vw;
  margin: 0 auto;
  margin-top: 3.281vw;
  text-align: center;
}
@media screen and (max-width: 767px) {
  main #benefits .benefits_box .benefits_box_inner {
    width: 77.57vw;
    margin-top: 9.346vw;
  }
}
main #benefits .benefits_box .benefits_contents_01 {
  margin-bottom: 2.865vw;
}
main #benefits .benefits_box .benefits_contents_01 p {
  line-height: 1.46;
}
@media screen and (max-width: 767px) {
  main #benefits .benefits_box .benefits_contents_01 {
    margin-bottom: 5.841vw;
  }
  main #benefits .benefits_box .benefits_contents_01 p {
    line-height: 1.37;
  }
}
main #benefits .benefits_box .conditions_txt {
  line-height: 1.54;
}
@media screen and (max-width: 767px) {
  main #benefits .benefits_box .conditions_txt {
    line-height: 1.46;
  }
}
main #benefits .benefits_box .conditions_txt.active span::before {
  transform: translate(-50%, -50%) scale(1, 1);
}
main #benefits .benefits_box .conditions_txt span {
  position: relative;
}
main #benefits .benefits_box .conditions_txt span::before {
  content: "";
  width: 27.448vw;
  height: 1.927vw;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0, 1);
  z-index: -1;
  transition: all 0.5s;
}
@media screen and (max-width: 767px) {
  main #benefits .benefits_box .conditions_txt span::before {
    width: 77.103vw;
    height: 5.374vw;
  }
}
main #benefits .benefits_box .conditions_txt span.big {
  font-size: 1.875vw;
  color: inherit;
}
@media screen and (max-width: 767px) {
  main #benefits .benefits_box .conditions_txt span.big {
    font-size: 3.738vw;
  }
}
main #benefits .benefits_box .conditions_txt span.big::before {
  content: none;
}
main #benefits .benefits_box .benefits_attention {
  font-size: 1.042vw;
  text-align: left;
  margin-top: 1.042vw;
  margin-bottom: 1.042vw;
}
@media screen and (max-width: 767px) {
  main #benefits .benefits_box .benefits_attention {
    font-size: 3.271vw;
    line-height: 1.4;
    width: 80%;
    margin: 0 auto;
    margin-top: 2.336vw;
    margin-bottom: 2.336vw;
  }
}
main #benefits .benefits_box .benefits_img {
  margin-top: 2vw;
}
@media screen and (max-width: 767px) {
  main #benefits .benefits_box .benefits_img {
    width: 90%;
    margin: 0 auto;
  }
}
main #benefits .benefits_box-shop01 {
  height: 72.656vw;
  color: #4591ac;
}
@media screen and (max-width: 767px) {
  main #benefits .benefits_box-shop01 {
    height: 279.935vw;
  }
}
main #benefits .benefits_box-shop01::before {
  background-image: url(./images/benefits_frame_blue.webp);
}
@media screen and (max-width: 767px) {
  main #benefits .benefits_box-shop01::before {
    background-image: url(./images/sp/benefits_frame_blue.webp);
  }
}
main #benefits .benefits_box-shop01 h4::before {
  background-image: url(./images/benefits_title_bg_blue.webp);
}
@media screen and (max-width: 767px) {
  main #benefits .benefits_box-shop01 h4::before {
    background-image: url(./images/sp/benefits_title_bg_blue.webp);
  }
}
main #benefits .benefits_box-shop01 h5::before {
  background-image: url(./images/benefits_subheading_pink.webp);
}
main #benefits .benefits_box-shop01 .conditions_txt span {
  color: #eb68a2;
}
main #benefits .benefits_box-shop01 .conditions_txt span::before {
  background-image: url(./images/benefits_onepoint_pink.webp);
}
main #benefits .benefits_box-shop02 {
  height: 44.25vw;
}
@media screen and (max-width: 767px) {
  main #benefits .benefits_box-shop02 {
    height: 159.897vw;
    margin-top: 8.178vw;
  }
}
main #benefits .benefits_box-shop02::before {
  background-image: url(./images/benefits_frame_pink.webp);
}
@media screen and (max-width: 767px) {
  main #benefits .benefits_box-shop02::before {
    background-image: url(./images/sp/benefits_frame_pink.webp);
  }
}
main #benefits .benefits_box-shop02 h4::before {
  background-image: url(./images/benefits_title_bg_pink.webp);
}
@media screen and (max-width: 767px) {
  main #benefits .benefits_box-shop02 h4::before {
    background-image: url(./images/sp/benefits_title_bg_pink.webp);
  }
}
main #benefits .benefits_box-shop02 h5::before {
  background-image: url(./images/benefits_subheading_blue.webp);
}
main #benefits .benefits_box-shop02 .conditions_txt span {
  color: #3297c4;
}
main #benefits .benefits_box-shop02 .conditions_txt span::before {
  background-image: url(./images/benefits_onepoint_blue.webp);
}
@media screen and (max-width: 767px) {
  main #shop {
    margin-bottom: 25.533vw;
  }
}
main #shop .inner {
  max-width: 55.99vw;
}
@media screen and (max-width: 767px) {
  main #shop .inner {
    max-width: 84.112vw;
  }
}
main #shop h3 span::before {
  width: 22.396vw;
  height: 5.99vw;
  background-image: url(./images/benefits_title_bg.webp);
}
@media screen and (max-width: 767px) {
  main #shop h3 span::before {
    width: 62.15vw;
    height: 16.589vw;
  }
}
main #shop .icon_target_shop {
  text-align: center;
  margin-top: 4.948vw;
}
@media screen and (max-width: 767px) {
  main #shop .icon_target_shop {
    margin-top: 11.112vw;
  }
}
main #shop .icon_target_shop span {
  position: relative;
  padding-left: 3.906vw;
}
@media screen and (max-width: 767px) {
  main #shop .icon_target_shop span {
    padding-left: 10.981vw;
  }
}
main #shop .icon_target_shop span::before {
  content: "";
  width: 3.385vw;
  height: 1.458vw;
  background-image: url(./images/shop_icon_box.webp);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
@media screen and (max-width: 767px) {
  main #shop .icon_target_shop span::before {
    width: 9.813vw;
    height: 3.972vw;
  }
}
main #shop .shop_box {
  grid-template-columns: repeat(1, 1fr);
  text-align: center;
  margin-top: 7vw;
  margin-bottom: 7.469vw;
}
@media screen and (max-width: 767px) {
  main #shop .shop_box {
    margin-top: 18vw;
    margin-bottom: 6.542vw;
  }
}
main #shop .shop_box_content {
  opacity: 0;
  transform: translateY(10%);
  transition: all ease-in-out 0.4s;
}
main #shop .shop_box_content.active {
  opacity: 1;
  transform: translateY(0%);
}
main #shop .shop_box_content.active h4 {
  transform: scale(1, 1);
  transition-delay: 0.4s;
}
main #shop .shop_box_content h4 {
  font-family: "kaisei-decol", sans-serif;
  font-size: 1.875vw;
  color: #ffffff;
  transform: scale(0, 1);
  transition: all 0.4s;
}
@media screen and (max-width: 767px) {
  main #shop .shop_box_content h4 {
    font-size: 4.907vw;
  }
}
main #shop .shop_box_content h4 span {
  position: relative;
}
main #shop .shop_box_content h4 span::before {
  content: "";
  height: 2.813vw;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}
@media screen and (max-width: 767px) {
  main #shop .shop_box_content h4 span::before {
    height: 7.71vw;
  }
}
main #shop .shop_box_content .shop_content_ul {
  margin-top: 2.083vw;
  font-size: 1.563vw;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
@media screen and (max-width: 767px) {
  main #shop .shop_box_content .shop_content_ul {
    margin-top: 5.505vw;
    font-size: 4.206vw;
    grid-template-columns: repeat(2, 1fr);
  }
}
main #shop .shop_box_content .shop_content_ul li {
  margin-bottom: 1.042vw;
}
@media screen and (max-width: 767px) {
  main #shop .shop_box_content .shop_content_ul li {
    margin-bottom: 3.505vw;
  }
}
main #shop .shop_box_content .shop_content_ul li a {
  display: inline-block;
  transition: all 0.4s;
}
@media screen and (min-width: 767px) {
  main #shop .shop_box_content .shop_content_ul li a:hover {
    color: #bf88bf;
  }
}
main #shop .shop_box_content-shop01 {
  margin-top: 3vw;
}
@media screen and (max-width: 767px) {
  main #shop .shop_box_content-shop01 {
    margin-top: 9.813vw;
  }
}
main #shop .shop_box_content-shop01 h4 span::before {
  width: 13.021vw;
  background-image: url(./images/shop_title_bg_blue.webp);
}
@media screen and (max-width: 767px) {
  main #shop .shop_box_content-shop01 h4 span::before {
    width: 35.28vw;
  }
}
main #shop .shop_box_content-shop02 h4 span::before {
  width: 19.427vw;
  background-image: url(./images/shop_title_bg_pink.webp);
}
@media screen and (max-width: 767px) {
  main #shop .shop_box_content-shop02 h4 span::before {
    width: 52.57vw;
  }
}
main #shop .ec {
  margin-top: 3vw;
}
@media screen and (max-width: 767px) {
  main #shop .ec {
    margin-top: 6vw;
  }
}
@media screen and (max-width: 767px) {
  main #shop .ec h4 {
    font-size: 4.5vw;
  }
}
main #shop .ec h4 span::before {
  width: 34.021vw;
  background-image: url(./images/shop_title_bg_ec.webp);
}
@media screen and (max-width: 767px) {
  main #shop .ec h4 span::before {
    width: 80.28vw;
    background-image: url(./images/sp/shop_title_bg_ec.png);
  }
}
main #shop .ec .ec_banner {
  width: 28.64vw;
  margin: 0 auto;
  margin-top: 2vw;
  transition: 0.4s;
}
@media screen and (min-width: 767px) {
  main #shop .ec .ec_banner:hover {
    filter: brightness(0.8);
  }
}
@media screen and (max-width: 767px) {
  main #shop .ec .ec_banner {
    width: 60vw;
    margin-top: 6vw;
  }
}
main #shop .ec .ec_banner a {
  display: inline-block;
}
main .btn_top {
  width: 6.51vw;
  height: 5.781vw;
  position: absolute;
  bottom: 0;
  right: 18.125vw;
}
@media screen and (max-width: 767px) {
  main .btn_top {
    width: 14.72vw;
    height: 13.084vw;
    bottom: 7.009vw;
    right: 5.607vw;
  }
}
main .btn_top a {
  display: block;
  position: relative;
}
main .btn_top a::before {
  content: "";
  width: 6.771vw;
  height: 3.646vw;
  background-image: url(./images/top_btn02.webp);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: -1.25vw;
  left: -0.521vw;
  transition: all 0.4s;
}
@media screen and (max-width: 767px) {
  main .btn_top a::before {
    width: 15.888vw;
    height: 8.645vw;
    top: -3.5vw;
    left: -1.5vw;
    animation: btn-top 1s ease infinite alternate-reverse;
  }
}
@media screen and (min-width: 767px) {
  main .btn_top a:hover::before {
    transform: translateY(-30%);
  }
}

footer {
  background: url(./images/footer_bg.webp) no-repeat center top/cover;
  height: 15.313vw;
  color: #9868bc;
  font-size: 0.833vw;
  line-height: 1.5;
  text-align: center;
  padding-top: 5.573vw;
}
@media screen and (max-width: 767px) {
  footer {
    background: url(./images/sp/footer_bg.webp) no-repeat center top/cover;
    height: 42.523vw;
    font-size: 2.804vw;
    padding-top: 12.15vw;
  }
}
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;
  }
}

/* slider*/
.swiper-slide img {
  height: auto;
  width: 100%;
}

/* 矢印カスタマイズ */
.swiper-button-prev,
.swiper-button-next {
  height: 2.5vw;
  width: 1.25vw;
  transition: all 0.4s;
}
@media screen and (max-width: 767px) {
  .swiper-button-prev,
  .swiper-button-next {
    height: 6.542vw;
    width: 3.271vw;
  }
}
.swiper-button-prev::after,
.swiper-button-next::after {
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 2.5vw;
  margin: auto;
  width: 1.25vw;
  background-image: url(./images/icon_arrow.svg);
}
@media screen and (max-width: 767px) {
  .swiper-button-prev::after,
  .swiper-button-next::after {
    height: 6.542vw;
    width: 3.271vw;
  }
}

@keyframes floating-y {
  0% {
    transform: translateY(-2%);
  }
  100% {
    transform: translateY(2%);
  }
}
@keyframes btn-top {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-30%);
  }
}
@keyframes popup {
  0% {
    transform: translateY(40px) scale(0.8);
    opacity: 0;
  }
  40% {
    transform: translateY(0) scale(2);
  }
  100% {
    transform: translateY(0) scale(1);
  }
  80%, 100% {
    opacity: 1;
  }
}
@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    transform: scale(1);
  }
  50%, 70% {
    transform: scale(0.95);
  }
}
@keyframes poyon {
  0% {
    transform: scale(0);
  }
  80% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes poyonUp {
  0% {
    transform: translateY(28px) scale(0.9);
    opacity: 0;
  }
  40% {
    transform: translateY(-8px) scale(1.06);
    opacity: 1;
  }
  65% {
    transform: translateY(4px) scale(0.98);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}
@keyframes Sun_opacity_move {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
}
/* --- 追加CSS: スライダー切り替え用 --- */
/* タブボタン周り */
.tab_buttons {
  gap: 10px;
  margin-bottom: 20px;
  border-bottom: 2px solid #ddd; /* 下線が必要な場合 */
  padding-bottom: 10px;
}

/* vol.4のアクティブ色（ピンク） */
.tab_btn[data-target=charapuku_vol1].active,
.tab_btn[data-target=vol4].active,
.tab_btn[data-target=sticker_vol1].active,
.tab_btn[data-target=badge_vol1].active,
.tab_btn[data-target=canbadge_vol1].active {
  background-color: #eb68a2; /* 画像に合わせたピンク */
  border: 2px solid #ed6aa7;
}

/* vol.5のアクティブ色（水色） */
.tab_btn[data-target=vol5].active,
.tab_btn[data-target=sticker_vol2].active,
.tab_btn[data-target=badge_vol2].active,
.tab_btn[data-target=canbadge_vol2].active {
  background-color: #8cc8e2; /* 画像に合わせた水色 */
  border: 2px solid #56aad0;
}

/* --- 必須スタイル --- */
.tab_content {
  display: none;
}
.tab_content.active {
  display: block;
  animation: fadeIn 0.5s ease;
}

.slider_group {
  display: none;
}
.slider_group.active {
  display: block;
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* 価格エリアのデザイン変更 */
.price_area {
  margin-top: 20px;
  align-items: flex-end;
  gap: 30px; /* BOXと単品の間隔 */
}

.price_box,
.price_single {
  font-family: "kaisei-decol", sans-serif;
  font-size: 1vw;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
@media screen and (max-width: 767px) {
  .price_box,
  .price_single {
    font-size: 3vw;
  }
}

.price_label {
  background-color: #eb68a2; /* ピンクのラベル背景 */
  color: #fff;
  font-size: 0.9em;
  padding: 4px 8px;
  margin-bottom: 5px;
  display: inline-block;
}
@media screen and (max-width: 767px) {
  .price_label {
    font-size: 3.5vw;
  }
}

.price_val {
  font-size: 1em;
  color: #eb68a2; /* 文字色もピンクに合わせる場合 */
  font-weight: bold;
  margin: 0;
}

.price_val span {
  font-size: 1.5em; /* 金額数字を大きく */
  margin: 0 2px;
}

/* Vol.1, Vol.4 (ピンク) */
.tab_btn[data-target=vol1].active,
.tab_btn[data-target=vol4].active {
  background-color: #eb68a2;
}

/* 価格ラベルなどの色用クラス */
.vol1-color,
.vol4-color {
  background-color: #eb68a2;
}

.vol1-text,
.vol4-text {
  color: #eb68a2;
}

/* Vol.2, Vol.5 (水色) */
.tab_btn[data-target=vol2].active,
.tab_btn[data-target=vol5].active {
  background-color: #8cc8e2;
}

.vol2-color,
.vol5-color {
  background-color: #8cc8e2;
}

.vol2-text,
.vol5-text {
  color: #8cc8e2 !important;
}
.vol2-text span,
.vol5-text span {
  background: #8cc8e2 !important;
}

/* Vol.3 (黄色/ゴールド) ※追加 */
.tab_btn[data-target=vol3].active,
.tab_btn[data-target=sticker_vol3].active,
.tab_btn[data-target=badge_vol3].active,
.tab_btn[data-target=canbadge_vol3].active {
  background-color: #e8d895; /* 画像から抽出した色 */
  border: 2px solid #d3ba4d;
}

.vol3-color {
  background-color: #e8d895;
}

.vol3-text {
  color: #e8d895 !important;
}
.vol3-text span {
  background: #e8d895 !important;
}

.tab_btn[data-target=charapuku_vol2].active {
  background-color: #e095e8; /* 画像から抽出した色 */
  border: 2px solid #e095e8;
}

.vol5-color {
  background-color: #e095e8;
}

.vol5-text {
  color: #e095e8 !important;
}
.vol5-text span {
  background: #e095e8 !important;
}

.tab_btn[data-target=charapuku_vol3].active {
  background-color: #95c1e8; /* 画像から抽出した色 */
  border: 2px solid #95c1e8;
}

.vol6-color {
  background-color: #95c1e8;
}

.vol6-text {
  color: #95c1e8 !important;
}
.vol6-text span {
  background: #95c1e8 !important;
}

/* タブボタン共通スタイルの微調整 */
.tab_btn {
  margin-right: 5px;
  text-align: center;
  width: 10vw;
  padding: 0.3vw 0;
  border-radius: 20px;
  border: none;
  font-weight: bold;
  font-size: 1.1em;
  color: #fff;
  cursor: pointer;
  background-color: #ccc; /* 非アクティブ時はグレー */
  transition: background-color 0.3s;
}
@media screen and (max-width: 767px) {
  .tab_btn {
    width: 40vw;
    padding: 1vw 0;
  }
}

.slider_group {
  display: none; /* 基本は非表示 */
}

.slider_group.active {
  display: block; /* activeがついたら表示 */
  animation: fadeIn 0.5s ease;
}

/* ボタン周りの調整 */
.tab_buttons {
  margin: 10px 0;
  justify-content: center; /* ボタンを中央寄せ */
}
@media screen and (max-width: 767px) {
  .tab_buttons {
    margin: 4vw 0;
  }
}

.banner {
  position: relative;
  text-align: center;
  width: 60vw;
  margin: 0 auto;
  margin-bottom: 5.469vw;
}
@media screen and (max-width: 767px) {
  .banner {
    margin-bottom: 25.469vw;
  }
}
.banner::after, .banner::before {
  content: "";
  width: 13.542vw;
  height: 3.49vw;
  background-image: url(./images/title_deco.webp);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: -3vw;
  transition: all 0.4s;
  clip-path: inset(0 0 0 100%);
}
@media screen and (max-width: 767px) {
  .banner::after, .banner::before {
    width: 24.533vw;
    height: 6.308vw;
    top: -8.841vw;
  }
}
.banner::before {
  left: 3vw;
}
@media screen and (max-width: 767px) {
  .banner::before {
    left: -10vw;
  }
}
.banner::after {
  right: 3vw;
  transform: scale(-1, 1);
}
@media screen and (max-width: 767px) {
  .banner::after {
    right: -10vw;
  }
}
.banner a {
  display: inline-block;
  transition: 0.4s;
  transform: translateY(50px);
  opacity: 0;
  transition-delay: 0.2s;
}
@media screen and (min-width: 767px) {
  .banner a:hover {
    filter: brightness(0.8);
  }
}
.banner a img {
  width: 28.64vw;
}
@media screen and (max-width: 767px) {
  .banner a img {
    width: 80vw;
  }
}
.banner.active::after, .banner.active::before {
  clip-path: inset(0 0 0 0);
}
.banner.active a {
  transform: translateY(0);
  opacity: 1;
}/*# sourceMappingURL=style.css.map */