.home-hero {
  height: 304vw;
  position: relative;
}
.home-hero::before, .home-hero::after {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 100%;
}
.home-hero::before {
  background-image: url(../../images/home/hero_base-curtain-sp.png);
  z-index: 4;
}
.home-hero::after {
  background-image: url(../../images/home/hero_base-sp.png);
  z-index: 1;
}
@supports (background-image: url("../../images/home/hero_base-curtain.webp")) {
  .home-hero::before {
    background-image: url(../../images/home/hero_base-curtain-sp.webp);
  }
}
@supports (background-image: url("../../images/home/hero_base.webp")) {
  .home-hero::after {
    background-image: url(../../images/home/hero_base-sp.webp);
  }
}
.home-hero > .layout-primary {
  height: 100%;
}

.home-hero-inner {
  height: 100%;
  position: relative;
  width: 100%;
}
.home-hero-inner > .title > .text {
  line-height: 0;
  margin: auto;
  position: absolute;
  top: 10.13vw;
  right: 0;
  left: 0;
  text-align: center;
  z-index: 5;
}
.home-hero-inner > .title > .text img {
  height: auto;
  width: 77.33vw;
}
.home-hero-inner > .title > .fukidasi {
  line-height: 0;
  position: absolute;
  top: 20.27vw;
  left: calc(2.67vw - var(--margin-side-small));
  z-index: 5;
}
.home-hero-inner > .title > .fukidasi img {
  height: auto;
  width: 32.8vw;
}
.home-hero-inner > .character {
  overflow: visible;
}
.home-hero-inner > .character > li > button {
  background: transparent;
  border: 0;
  cursor: pointer;
  line-height: 0;
  padding: 0;
  position: absolute;
  z-index: 4;
}
.home-hero-inner > .character > li > button.-melonyan {
  aspect-ratio: 95/67;
  top: 65.33vw;
  left: calc(29.33vw - var(--margin-side-small));
  width: 18.13vw;
}
.home-hero-inner > .character > li > button.-melonyan > .name {
  aspect-ratio: 136/38;
  bottom: -94.03%;
  left: -17.89%;
  width: 143.16%;
}
.home-hero-inner > .character > li > button.-machiko {
  aspect-ratio: 123/213;
  top: 38.4vw;
  left: calc(48.53vw - var(--margin-side-small));
  width: 23.73vw;
}
.home-hero-inner > .character > li > button.-machiko > .name {
  aspect-ratio: 126/38;
  top: -18.78%;
  left: 13.01%;
  width: 102.44%;
}
.home-hero-inner > .character > li > button.-crotaro {
  aspect-ratio: 184/204;
  top: 105.33vw;
  left: calc(10.4vw - var(--margin-side-small));
  width: 35.2vw;
}
.home-hero-inner > .character > li > button.-crotaro > .name {
  aspect-ratio: 136/38;
  bottom: -23.25%;
  left: 15.76%;
  width: 73.91%;
}
.home-hero-inner > .character > li > button.-danio {
  aspect-ratio: 121/228;
  top: 89.07vw;
  right: calc(16.27vw - var(--margin-side-small));
  width: 23.2vw;
}
.home-hero-inner > .character > li > button.-danio > .name {
  aspect-ratio: 126/38;
  bottom: -25.44%;
  left: 7.44%;
  width: 104.13%;
}
.home-hero-inner > .character > li > button.-bisko {
  aspect-ratio: 153/72;
  top: 181.33vw;
  left: calc(13.33vw - var(--margin-side-small));
  width: 29.33vw;
}
.home-hero-inner > .character > li > button.-bisko > .name {
  aspect-ratio: 136/38;
  bottom: -83.33%;
  left: 15.03%;
  width: 88.89%;
}
.home-hero-inner > .character > li > button.-bisko > .shadow {
  aspect-ratio: 124/16;
  bottom: -11.11%;
  left: 18.95%;
  width: min(9.08vw, 81.05%);
}
.home-hero-inner > .character > li > button.-bisko > .message {
  top: -276.39%;
  left: -34.64%;
  width: 149.67%;
}
.home-hero-inner > .character > li > button.-shopin {
  aspect-ratio: 130/237;
  top: 150.4vw;
  left: calc(59.73vw - var(--margin-side-small));
  width: 24.8vw;
}
.home-hero-inner > .character > li > button.-shopin > .name {
  aspect-ratio: 136/38;
  bottom: -22.78%;
  left: 0;
  width: 104.62%;
}
.home-hero-inner > .character > li > button.-shopin > .shadow {
  bottom: -1.69%;
  left: 20%;
  width: min(5.56vw, 58.46%);
}
.home-hero-inner > .character > li > button.-paneko {
  aspect-ratio: 120/247;
  top: 212.8vw;
  right: calc(59.73vw - var(--margin-side-small));
  width: 22.93vw;
}
.home-hero-inner > .character > li > button.-paneko > .name {
  aspect-ratio: 126/38;
  bottom: -21.46%;
  left: -5%;
  width: 105%;
}
.home-hero-inner > .character > li > button.-paneko > .shadow {
  bottom: -2.43%;
  left: 12.5%;
  width: min(5.56vw, 63.33%);
}
.home-hero-inner > .character > li > button.-wafeln {
  aspect-ratio: 136/241;
  top: 213.87vw;
  right: calc(14.4vw - var(--margin-side-small));
  width: 26.13vw;
}
.home-hero-inner > .character > li > button.-wafeln > .name {
  aspect-ratio: 136/38;
  bottom: -22.41%;
  left: 0;
  width: 100%;
}
.home-hero-inner > .character > li > button.-wafeln > .shadow {
  bottom: -2.49%;
  left: 22.06%;
  width: min(5.56vw, 55.88%);
}
.home-hero-inner > .character > li > button.-wafeln > .message {
  top: -67.63%;
  right: -49.21%;
  width: 168.38%;
}
.home-hero-inner > .character > li > button > .character {
  height: auto;
  position: relative;
  width: 100%;
  z-index: 4;
}
.home-hero-inner > .character > li > button > .name {
  height: auto;
  position: absolute;
  z-index: 3;
}
.home-hero-inner > .character > li > button > .shadow {
  aspect-ratio: 76/16;
  background-color: #ddb828;
  border-radius: 100%;
  position: absolute;
  z-index: 1;
}
.home-hero-inner > .character > li > button > .message {
  -webkit-transition-property: opacity, visibility, -webkit-transform;
  transition-property: opacity, visibility, -webkit-transform;
  transition-property: opacity, visibility, transform;
  transition-property: opacity, visibility, transform, -webkit-transform;
  -webkit-transition-duration: 0.15s;
  transition-duration: 0.15s;
  -webkit-transition-timing-function: ease;
  transition-timing-function: ease;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
  aspect-ratio: 229/199;
  height: auto;
  opacity: 0;
  position: absolute;
  -webkit-transform: scale(0.9) translateY(24px);
  transform: scale(0.9) translateY(24px);
  visibility: hidden;
  z-index: 4;
}
.home-hero-inner > .character > li > button > .message.-show {
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.3, 1.5);
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.3, 1.5);
  -webkit-transform: scale(1) translateY(0);
  transform: scale(1) translateY(0);
  opacity: 1;
  visibility: visible;
}
.home-hero-inner > .character > li > button:hover > .character {
  -webkit-animation: hoverJump 0.5s ease 0s;
  animation: hoverJump 0.5s ease 0s;
}
.home-hero-inner > .character > li > button:hover > .shadow {
  -webkit-animation: hoverShadow 0.5s ease 0s;
  animation: hoverShadow 0.5s ease 0s;
}
.home-hero-inner > .character > li .swing {
  height: auto;
  position: absolute;
  z-index: 2;
}
.home-hero-inner > .character > li .swing.-swing01 {
  aspect-ratio: 334/302;
  top: 0;
  left: calc(5.6vw - var(--margin-side-small));
  width: 89.07vw;
  z-index: 3;
}
.home-hero-inner > .character > li .swing.-swing02 {
  aspect-ratio: 166/248;
  top: 79.47vw;
  left: calc(5.87vw - var(--margin-side-small));
  width: 44.27vw;
}
.home-hero-inner > .character > li .swing.-swing03 {
  aspect-ratio: 131/210;
  top: 79.47vw;
  right: calc(9.87vw - var(--margin-side-small));
  width: 34.93vw;
}
.home-hero-inner > .light {
  --light-duration: 1.5s;
  --light-easing: cubic-bezier(0.175, 0.885, 0.3, 1.5);
}
.home-hero-inner > .light > .above > .item, .home-hero-inner > .light > .below > .item {
  aspect-ratio: 1/1;
  border-radius: 50%;
  position: absolute;
  width: 4vw;
}
.home-hero-inner > .light > .above > .item::before, .home-hero-inner > .light > .below > .item::before {
  background-color: #fffde5;
  border-radius: 50%;
  content: "";
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
}
.home-hero-inner > .light > .above > .item::after, .home-hero-inner > .light > .below > .item::after {
  background-color: #fffde5;
  border-radius: 50%;
  -webkit-filter: blur(5px);
  filter: blur(5px);
  content: "";
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}
.home-hero-inner > .light > .above > .item > .spot, .home-hero-inner > .light > .below > .item > .spot {
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  -webkit-transition-duration: 0.75s;
  transition-duration: 0.75s;
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.3, 1.5);
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.3, 1.5);
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(255, 249, 177, 0.8)), to(rgba(255, 249, 177, 0)));
  background: linear-gradient(to top, rgba(255, 249, 177, 0.8), rgba(255, 249, 177, 0));
  clip-path: polygon(0% 0%, 100% 0%, 70.59% 100%, 29.41% 100%);
  content: "";
  height: 358.62%;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  bottom: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) scale(1, 0);
  transform: translateX(-50%) scale(1, 0);
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
  width: 234.48%;
  z-index: 1;
}
.home-hero-inner > .light > .above > .item.-hover::before, .home-hero-inner > .light > .below > .item.-hover::before {
  -webkit-animation: none !important;
  animation: none !important;
}
.home-hero-inner > .light > .above > .item.-hover > .spot, .home-hero-inner > .light > .below > .item.-hover > .spot {
  -webkit-transition-duration: 0.15s;
  transition-duration: 0.15s;
  -webkit-transform: translateX(-50%) scale(1, 1);
  transform: translateX(-50%) scale(1, 1);
  opacity: 1;
}
.home-hero-inner > .light > .above > .item {
  z-index: 2;
}
.home-hero-inner > .light > .above > .item.-item01 {
  left: calc(-1.87vw - var(--margin-side-small));
  bottom: 114.4vw;
}
.home-hero-inner > .light > .above > .item.-item01::before {
  -webkit-animation: lightGlow01 var(--light-duration) var(--light-easing) 0s infinite;
  animation: lightGlow01 var(--light-duration) var(--light-easing) 0s infinite;
}
.home-hero-inner > .light > .above > .item.-item02 {
  left: calc(8.27vw - var(--margin-side-small));
  bottom: 115.47vw;
}
.home-hero-inner > .light > .above > .item.-item02::before {
  -webkit-animation: lightGlow02 var(--light-duration) var(--light-easing) 0s infinite;
  animation: lightGlow02 var(--light-duration) var(--light-easing) 0s infinite;
}
.home-hero-inner > .light > .above > .item.-item03 {
  left: calc(18.4vw - var(--margin-side-small));
  bottom: 116vw;
}
.home-hero-inner > .light > .above > .item.-item03::before {
  -webkit-animation: lightGlow03 var(--light-duration) var(--light-easing) 0s infinite;
  animation: lightGlow03 var(--light-duration) var(--light-easing) 0s infinite;
}
.home-hero-inner > .light > .above > .item.-item04 {
  left: calc(28.27vw - var(--margin-side-small));
  bottom: 116.53vw;
}
.home-hero-inner > .light > .above > .item.-item04::before {
  -webkit-animation: lightGlow01 var(--light-duration) var(--light-easing) 0s infinite;
  animation: lightGlow01 var(--light-duration) var(--light-easing) 0s infinite;
}
.home-hero-inner > .light > .above > .item.-item05 {
  left: calc(38.13vw - var(--margin-side-small));
  bottom: 116.8vw;
}
.home-hero-inner > .light > .above > .item.-item05::before {
  -webkit-animation: lightGlow02 var(--light-duration) var(--light-easing) 0s infinite;
  animation: lightGlow02 var(--light-duration) var(--light-easing) 0s infinite;
}
.home-hero-inner > .light > .above > .item.-item06 {
  left: calc(48.27vw - var(--margin-side-small));
  bottom: 116.8vw;
}
.home-hero-inner > .light > .above > .item.-item06::before {
  -webkit-animation: lightGlow03 var(--light-duration) var(--light-easing) 0s infinite;
  animation: lightGlow03 var(--light-duration) var(--light-easing) 0s infinite;
}
.home-hero-inner > .light > .above > .item.-item07 {
  left: calc(58.4vw - var(--margin-side-small));
  bottom: 116.8vw;
}
.home-hero-inner > .light > .above > .item.-item07::before {
  -webkit-animation: lightGlow01 var(--light-duration) var(--light-easing) 0s infinite;
  animation: lightGlow01 var(--light-duration) var(--light-easing) 0s infinite;
}
.home-hero-inner > .light > .above > .item.-item08 {
  left: calc(68.27vw - var(--margin-side-small));
  bottom: 116.53vw;
}
.home-hero-inner > .light > .above > .item.-item08::before {
  -webkit-animation: lightGlow02 var(--light-duration) var(--light-easing) 0s infinite;
  animation: lightGlow02 var(--light-duration) var(--light-easing) 0s infinite;
}
.home-hero-inner > .light > .above > .item.-item09 {
  right: calc(17.87vw - var(--margin-side-small));
  bottom: 116vw;
}
.home-hero-inner > .light > .above > .item.-item09::before {
  -webkit-animation: lightGlow03 var(--light-duration) var(--light-easing) 0s infinite;
  animation: lightGlow03 var(--light-duration) var(--light-easing) 0s infinite;
}
.home-hero-inner > .light > .above > .item.-item10 {
  right: calc(7.73vw - var(--margin-side-small));
  bottom: 115.2vw;
}
.home-hero-inner > .light > .above > .item.-item10::before {
  -webkit-animation: lightGlow01 var(--light-duration) var(--light-easing) 0s infinite;
  animation: lightGlow01 var(--light-duration) var(--light-easing) 0s infinite;
}
.home-hero-inner > .light > .above > .item.-item11 {
  right: calc(-2.13vw - var(--margin-side-small));
  bottom: 114.4vw;
}
.home-hero-inner > .light > .above > .item.-item11::before {
  -webkit-animation: lightGlow02 var(--light-duration) var(--light-easing) 0s infinite;
  animation: lightGlow02 var(--light-duration) var(--light-easing) 0s infinite;
}
.home-hero-inner > .light > .above > .item.-item12 {
  display: none;
}
.home-hero-inner > .light > .above > .item.-item13 {
  display: none;
}
.home-hero-inner > .light > .above > .item.-item14 {
  display: none;
}
.home-hero-inner > .light > .above > .item.-item15 {
  display: none;
}
.home-hero-inner > .light > .above > .item.-item16 {
  display: none;
}
.home-hero-inner > .light > .below > .item {
  z-index: 4;
}
.home-hero-inner > .light > .below > .item.-item01 {
  left: calc(1.07vw - var(--margin-side-small));
  bottom: 22.67vw;
}
.home-hero-inner > .light > .below > .item.-item01::before {
  -webkit-animation: lightGlow03 var(--light-duration) var(--light-easing) 0s infinite;
  animation: lightGlow03 var(--light-duration) var(--light-easing) 0s infinite;
}
.home-hero-inner > .light > .below > .item.-item02 {
  left: calc(10.93vw - var(--margin-side-small));
  bottom: 21.6vw;
}
.home-hero-inner > .light > .below > .item.-item02::before {
  -webkit-animation: lightGlow02 var(--light-duration) var(--light-easing) 0s infinite;
  animation: lightGlow02 var(--light-duration) var(--light-easing) 0s infinite;
}
.home-hero-inner > .light > .below > .item.-item03 {
  left: calc(21.07vw - var(--margin-side-small));
  bottom: 21.07vw;
}
.home-hero-inner > .light > .below > .item.-item03::before {
  -webkit-animation: lightGlow01 var(--light-duration) var(--light-easing) 0s infinite;
  animation: lightGlow01 var(--light-duration) var(--light-easing) 0s infinite;
}
.home-hero-inner > .light > .below > .item.-item04 {
  left: calc(30.93vw - var(--margin-side-small));
  bottom: 20.53vw;
}
.home-hero-inner > .light > .below > .item.-item04::before {
  -webkit-animation: lightGlow03 var(--light-duration) var(--light-easing) 0s infinite;
  animation: lightGlow03 var(--light-duration) var(--light-easing) 0s infinite;
}
.home-hero-inner > .light > .below > .item.-item04.-hover > .spot {
  opacity: 0;
}
.home-hero-inner > .light > .below > .item.-item05 {
  left: calc(41.07vw - var(--margin-side-small));
  bottom: 20.53vw;
}
.home-hero-inner > .light > .below > .item.-item05::before {
  -webkit-animation: lightGlow02 var(--light-duration) var(--light-easing) 0s infinite;
  animation: lightGlow02 var(--light-duration) var(--light-easing) 0s infinite;
}
.home-hero-inner > .light > .below > .item.-item06 {
  left: calc(50.93vw - var(--margin-side-small));
  bottom: 20.27vw;
}
.home-hero-inner > .light > .below > .item.-item06::before {
  -webkit-animation: lightGlow01 var(--light-duration) var(--light-easing) 0s infinite;
  animation: lightGlow01 var(--light-duration) var(--light-easing) 0s infinite;
}
.home-hero-inner > .light > .below > .item.-item07 {
  left: calc(61.07vw - var(--margin-side-small));
  bottom: 20.53vw;
}
.home-hero-inner > .light > .below > .item.-item07::before {
  -webkit-animation: lightGlow03 var(--light-duration) var(--light-easing) 0s infinite;
  animation: lightGlow03 var(--light-duration) var(--light-easing) 0s infinite;
}
.home-hero-inner > .light > .below > .item.-item08 {
  left: calc(70.93vw - var(--margin-side-small));
  bottom: 20.8vw;
}
.home-hero-inner > .light > .below > .item.-item08::before {
  -webkit-animation: lightGlow02 var(--light-duration) var(--light-easing) 0s infinite;
  animation: lightGlow02 var(--light-duration) var(--light-easing) 0s infinite;
}
.home-hero-inner > .light > .below > .item.-item09 {
  right: calc(15.2vw - var(--margin-side-small));
  bottom: 21.33vw;
}
.home-hero-inner > .light > .below > .item.-item09::before {
  -webkit-animation: lightGlow01 var(--light-duration) var(--light-easing) 0s infinite;
  animation: lightGlow01 var(--light-duration) var(--light-easing) 0s infinite;
}
.home-hero-inner > .light > .below > .item.-item09.-hover > .spot {
  opacity: 0;
}
.home-hero-inner > .light > .below > .item.-item10 {
  right: calc(5.07vw - var(--margin-side-small));
  bottom: 22.13vw;
}
.home-hero-inner > .light > .below > .item.-item10::before {
  -webkit-animation: lightGlow03 var(--light-duration) var(--light-easing) 0s infinite;
  animation: lightGlow03 var(--light-duration) var(--light-easing) 0s infinite;
}
.home-hero-inner > .light > .below > .item.-item11 {
  display: none;
}
.home-hero-inner > .light > .below > .item.-item12 {
  display: none;
}
.home-hero-inner > .light > .below > .item.-item13 {
  display: none;
}
.home-hero-inner > .light > .below > .item.-item14 {
  display: none;
}
.home-hero-inner > .light > .below > .item.-item15 {
  display: none;
}

@-webkit-keyframes hoverJump {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  10% {
    -webkit-transform: scale(1.02, 0.98);
    transform: scale(1.02, 0.98);
  }
  50% {
    -webkit-transform: translateY(-10px) scale(0.98, 1.02);
    transform: translateY(-10px) scale(0.98, 1.02);
  }
  90% {
    -webkit-transform: translateY(0) scale(1.01, 0.99);
    transform: translateY(0) scale(1.01, 0.99);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes hoverJump {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  10% {
    -webkit-transform: scale(1.02, 0.98);
    transform: scale(1.02, 0.98);
  }
  50% {
    -webkit-transform: translateY(-10px) scale(0.98, 1.02);
    transform: translateY(-10px) scale(0.98, 1.02);
  }
  90% {
    -webkit-transform: translateY(0) scale(1.01, 0.99);
    transform: translateY(0) scale(1.01, 0.99);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes hoverShadow {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.95, 0.8);
    transform: scale(0.95, 0.8);
  }
  90% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes hoverShadow {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.95, 0.8);
    transform: scale(0.95, 0.8);
  }
  90% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes lightGlow01 {
  0% {
    background-color: #fffde5;
  }
  33.333% {
    background-color: #fff100;
  }
  66.666% {
    background-color: #fff799;
  }
  100% {
    background-color: #fffde5;
  }
}
@keyframes lightGlow01 {
  0% {
    background-color: #fffde5;
  }
  33.333% {
    background-color: #fff100;
  }
  66.666% {
    background-color: #fff799;
  }
  100% {
    background-color: #fffde5;
  }
}
@-webkit-keyframes lightGlow02 {
  0% {
    background-color: #fff100;
  }
  33.333% {
    background-color: #fff799;
  }
  66.666% {
    background-color: #fffde5;
  }
  100% {
    background-color: #fff100;
  }
}
@keyframes lightGlow02 {
  0% {
    background-color: #fff100;
  }
  33.333% {
    background-color: #fff799;
  }
  66.666% {
    background-color: #fffde5;
  }
  100% {
    background-color: #fff100;
  }
}
@-webkit-keyframes lightGlow03 {
  0% {
    background-color: #fff799;
  }
  33.333% {
    background-color: #fffde5;
  }
  66.666% {
    background-color: #fff100;
  }
  100% {
    background-color: #fff799;
  }
}
@keyframes lightGlow03 {
  0% {
    background-color: #fff799;
  }
  33.333% {
    background-color: #fffde5;
  }
  66.666% {
    background-color: #fff100;
  }
  100% {
    background-color: #fff799;
  }
}
@media screen and (min-width: 2160px) {
  .home-hero::before, .home-hero::after {
    background-size: contain;
  }
  .home-hero::after {
    background-color: var(--color-black);
  }
}