/* ------------------------------------------------
 KV
------------------------------------------------ */
#kv {
  height: 43.625em;
  position: relative;
  overflow: hidden;
}
#kv > .inner {
  background-image: url(../img/top/kv_bg.png), linear-gradient(180deg, #00B8EE 0%, #EDF0AF 100%);
  background-position: 0 calc(100% + 1.5px), 0 100%;
  background-repeat: no-repeat;
  background-size: 100% auto;
  width: 100%;
  height: 100%;
  position: relative;
}
#kv .logo {
  width: 40.25em;
  position: absolute;
  left: 17.375em;
  top: 5.5em;
}
#kv .cast {
  height: auto;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}
#kv .hachiware {
  width: 16.75em;
  left: 11.5em;
  top: 18.375em;
}
#kv .chiikawa {
  width: 16.5em;
  left: 29em;
  top: 19.125em;
}
#kv .usagi {
  width: 20.125em;
  left: 46.875em;
  top: 16.1875em;
  transform: rotate(8.213deg);
}
#kv .star {
  width: 100%;
  height: 100%;
  align-content: end;
  opacity: 0;
  pointer-events: none;
}
#kv .star img {
  width: 100%;
  height: auto;
}
#kv .btn_ctrl {
  font-size: 1em;
  border: none;
  border-radius: 50%;
  background-color: #27B8BA;
  padding: 0;
  width: 2.875em;
  aspect-ratio: 1/1;
  position: absolute;
  right: 2.875em;
  bottom: 2.5em;
  z-index: 10;
  cursor: pointer;
  filter: drop-shadow(1px 1px 6px rgba(178, 196, 185, 0.7));
}
@media screen and (any-hover: hover) {
  #kv .btn_ctrl {
    transition: transform 0.2s ease;
    transform-origin: center center;
  }
  #kv .btn_ctrl:hover {
    transform: scale(1.1);
  }
}
#kv .btn_ctrl::before, #kv .btn_ctrl::after {
  content: "";
  background: 0 0/contain no-repeat;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
#kv .btn_ctrl::before {
  background-image: url(../img/top/icon_play.svg);
  opacity: 0;
}
#kv .btn_ctrl::after {
  background-image: url(../img/top/icon_pause.svg);
}
#kv .btn_ctrl[data-state="1"]::before {
  opacity: 1;
}
#kv .btn_ctrl[data-state="1"]::after {
  opacity: 0;
}
#kv .btn_ctrl[data-state="0"]::before {
  opacity: 0;
}
#kv .btn_ctrl[data-state="0"]::after {
  opacity: 1;
}
@media screen and (min-width: 768.1px) {
  #kv #kv_s2 .bg {
    width: 100%;
    height: 100%;
  }
  #kv #kv_s2 .bg img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
}
@media screen and (max-width: 767.9px) {
  #kv {
    height: 39.375em;
  }
  #kv > .inner {
    background-image: url(../img/top/kv_bg-sp.png), linear-gradient(180deg, #00B8EE 0%, #EDF0AF 100%);
  }
  #kv .logo {
    width: 11.4375em;
    left: 6em;
    top: 2.5em;
  }
  #kv .hachiware {
    width: 9.6875em;
    left: 1.875em;
    top: 12.875em;
  }
  #kv .chiikawa {
    width: 9.5625em;
    left: 12.125em;
    top: 17.1875em;
  }
  #kv .usagi {
    width: 11.75em;
    left: 4.625em;
    top: 23.375em;
    transform: rotate(13deg);
  }
  #kv .btn_ctrl {
    right: 1.75em;
    bottom: 3.5625em;
  }
}

/* ------------------------------------------------
 contents
------------------------------------------------ */
#contents_bg {
  background: #2AC7C9 url(../img/top/contents_bg.webp) left bottom/100% auto no-repeat;
}
@media screen and (max-width: 767.9px) {
  #contents_bg {
    background-image: url(../img/top/contents_bg-sp.webp);
  }
}

/* ------------------------------------------------
 soon
------------------------------------------------ */
#soon > .inner {
  padding-top: 5.625em;
  padding-bottom: 2.8125em;
}
#soon .txt {
  margin: 0 auto;
  width: 42.5em;
}
@media screen and (max-width: 767.9px) {
  #soon > .inner {
    padding-top: 3.125em;
    padding-bottom: 2.1875em;
  }
  #soon .txt {
    width: 21.75em;
  }
}

/* ------------------------------------------------
 campaign
------------------------------------------------ */
#campaign > .inner {
  padding-bottom: 7.8125em;
}
#campaign .sheader .title {
  margin: 0 auto;
  width: 29.625em;
  filter: drop-shadow(2.83px 4.245px 19.809px rgba(23, 24, 40, 0.25));
}
#campaign .sbody {
  margin: 1.875em auto 0;
  width: 43.4375em;
}
#campaign .items {
  display: flex;
  justify-content: space-between;
}
#campaign .items li {
  width: 20.9375em;
}
#campaign .note {
  color: #fff;
  font-size: 0.625em;
  margin-top: 1em;
}
@media screen and (max-width: 767.9px) {
  #campaign > .inner {
    padding-bottom: 3.125em;
  }
  #campaign .sheader .title {
    width: 20.9375em;
    filter: drop-shadow(2px 3px 14px rgba(23, 24, 40, 0.25));
  }
  #campaign .sbody {
    margin: 1.875em auto 0;
    width: 20.9375em;
  }
  #campaign .items {
    flex-direction: column;
    row-gap: 1.875em;
  }
  #campaign .items li {
    width: 100%;
  }
}