/* ------------------------------------------------
 common
------------------------------------------------ */
.stage .cast {
  position: absolute;
  opacity: 0;
}
/* ------------------------------------------------
 KV
------------------------------------------------ */
#kv {
  background: url(../img/top/kv_bg.jpg) 50% 0 no-repeat;
  background-size: 75em auto;
  width: -webkit-fill-available;
  width: -moz-available;
  width: stretch;
  overflow: hidden;
}
#kv > .inner {
  min-height: 39em;
  position: relative;
}
#kv .cast.logo {
  width: 21em;
  left: 44.5em;
  top: 2.8125em;
}
#kv .cast.title {
  width: 34.0625em;
  left: 38.5em;
  top: 6.625em;
  transform-origin: 50% 164%;
}
#kv .cast.flower {
  width: 35.4375em;
  left: 37.625em;
  top: 17em;
}
#kv .cast.wave {
  width: 100%;
  left: 0;
}
#kv .cast.wave.f3 {
  top: 24.125em;
}
#kv .cast.wave.f2 {
  top: 27em;
}
#kv .cast.wave.f1 {
  top: 29.875em;
}
#kv .cast.opanchu {
  width: 17.125em;
  left: 12.5em;
  top: 4.25em;
}
#kv .cast.kimimaro {
  width: 11.625em;
  left: 26.25em;
  top: 5.125em;
}
#kv .cast.npocham {
  width: 14.8125em;
  left: 3.125em;
  top: 5.75em;
}
#kv .cast.bubble {
  width: 36.375em;
  left: 2.125em;
  top: 2.375em;
}
@media screen and (min-width: 768.1px) {
  #kv .cast.opanchu, #kv .cast.kimimaro, #kv .cast.npocham {
    transform-origin: 50% 70%;
  }
}
@media screen and (max-width: 767.9px) {
  #kv {
    background-image: url(../img/top/kv_bg-sp.jpg);
    background-size: 100% auto;
  }
  #kv > .inner {
    min-height: 42.4em;
  }
  #kv .cast {
    position: absolute;
  }
  #kv .cast.logo {
    width: 13em;
    left: 6em;
    top: 0.8666666667em;
  }
  #kv .cast.title {
    width: 24.1333333333em;
    left: 0.4em;
    top: 3.2666666667em;
    transform-origin: 50% 214%;
  }
  #kv .cast.flower {
    width: 26.3333333333em;
    left: -0.8666666667em;
    top: 9.8666666667em;
  }
  #kv .cast.wave {
    width: 100%;
  }
  #kv .cast.wave.f3 {
    top: 28em;
  }
  #kv .cast.wave.f2 {
    top: 31.3333333333em;
  }
  #kv .cast.wave.f1 {
    top: 36em;
  }
  #kv .cast.opanchu {
    width: 13.2333333333em;
    left: 6.1333333333em;
    top: 15.4666666667em;
  }
  #kv .cast.kimimaro {
    width: 9.1em;
    left: 16.0666666667em;
    top: 14.8666666667em;
  }
  #kv .cast.npocham {
    width: 11.4666666667em;
    left: -0.5333333333em;
    top: 15.5333333333em;
  }
  #kv .cast.bubble {
    width: 24.5666666667em;
    left: 0.2666666667em;
    top: 14.2em;
  }
}

/* ------------------------------------------------
 cp01
------------------------------------------------ */
#cp01 .link, #cp02 .link {
  margin: 0 auto;
  width: 19.25em;
}
#cp01 .link a, #cp02 .link a {
  display: block;
}
@media (any-hover: hover) {
  #cp01 .link a, #cp02 .link a {
    transition: all 0.4s var(--easeInOutBack);
    cursor: pointer;
  }
  #cp01 .link a:hover, #cp02 .link a:hover {
    transform: scale(1.06);
  }
}
@media screen and (max-width: 767.9px) {
  #cp01 .link, #cp02 .link {
    width: 15.9333333333em;
  }
}

#cp01 {
  background: url(../img/top/cp01_bg.webp?v=2.0.0) 0 0 no-repeat;
  background-size: 100% auto;
  margin-top: -4.6875em !important;
  min-height: 89.1875em;
  z-index: 2 !important;
}
#cp01 > .inner {
  padding-top: 4.875em;
}
#cp01 .sheader {
  margin-top: 2.5em;
}
#cp01 .sheader .title {
  margin: 0 auto;
  width: 41.25em;
  position: relative;
}
#cp01 .sbody {
  margin-top: 1.5625em;
  position: relative;
}
#cp01 .sbody .cast {
  position: absolute;
}
#cp01 .sbody .cast.js-anime-active {
  transform-origin: 50% 90%;
}
#cp01 .sbody .cast.wallpaper {
  width: 56.875em;
  left: 9.25em;
  top: 0;
}
#cp01 .sbody .cast.present1 {
  width: 43.8125em;
  left: -6.0625em;
  top: 16.25em;
}
#cp01 .sbody .cast.present2 {
  width: 43.4375em;
  left: 37.0625em;
  top: 22.625em;
}
#cp01 .sbody .cast.present2 img {
  transform: translateY(-6.25em);
}
#cp01 .sbody .cast.present2 .cushion {
  width: 21em;
  position: absolute;
  left: 6.5em;
  top: 8.25em;
  display: none;
}
#cp01 .sbody .cast.present2 .note {
  left: 29.5em;
  top: 32.375em;
}
#cp01 .sbody .cast.present2.js-anime-active .cushion {
  display: block;
}
#cp01 .sbody .note {
  font-size: 1em;
  width: 6.125em;
  position: absolute;
}
@media screen and (min-width: 768.1px) {
  #cp01 .sbody .link {
    position: absolute;
    left: 27.5em;
    top: 49.25em;
  }
}
@media screen and (max-width: 767.9px) {
  #cp01 {
    background-image: url(../img/top/cp01_bg-sp.webp?v=2.0.0);
    margin-top: -6.3333333333em !important;
    min-height: 105.8em;
  }
  #cp01 > .inner {
    padding-top: 3.6666666667em;
  }
  #cp01 .sheader {
    margin-top: 1.1333333333em;
  }
  #cp01 .sheader .title {
    margin-left: 3em;
    width: 19.8666666667em;
    top: 0;
  }
  #cp01 .sbody {
    margin-top: 1.6em;
  }
  #cp01 .sbody .cast {
    position: static;
  }
  #cp01 .sbody .cast.wallpaper {
    width: 24.0333333333em;
    left: 0.4333333333em;
    top: 19.1666666667em;
  }
  #cp01 .sbody .cast.present1 {
    margin-top: 2.1333333333em;
    margin-left: -1.2em;
    width: 26.2em;
  }
  #cp01 .sbody .cast.present1 .note {
    right: 0.8333333333em;
    bottom: 0;
  }
  #cp01 .sbody .cast.present2 {
    margin-top: 2.2666666667em;
    margin-right: -1em;
    width: 26em;
  }
  #cp01 .sbody .cast.present2 img {
    transform: none;
  }
  #cp01 .sbody .cast.present2 .cushion {
    width: 18.2em;
    left: 2.1333333333em;
    top: 6.9333333333em;
  }
  #cp01 .sbody .cast.present2 .note {
    top: unset;
    left: 20.8333333333em;
    bottom: 1.1666666667em;
  }
  #cp01 .sbody .note {
    font-size: 1em;
    width: 3.2666666667em;
    position: absolute;
  }
  #cp01 .sbody .link {
    margin-top: 2em;
  }
}

/* ------------------------------------------------
 cp02
------------------------------------------------ */
#cp02 {
  background: url(../img/top/cp02_bg.webp?v=2.0.0) 0 0 no-repeat;
  background-size: 100% auto;
  margin-top: -2.5em !important;
  min-height: 60.1875em;
  z-index: 2;
}
#cp02 > .inner {
  padding-top: 4.875em;
}
#cp02 .sheader .title {
  margin: 1.5em auto 0;
  width: 43em;
}
#cp02 .sbody {
  margin-top: -0.3125em;
}
#cp02 .sbody .presents {
  display: flex;
  justify-content: center;
}
#cp02 .sbody .presents li {
  margin: 0 -0.3125em;
  width: 15.125em;
}
#cp02 .sbody .presents li img {
  filter: drop-shadow(0.1875em 0.1875em 0.625em rgba(47, 80, 96, 0.3));
}
#cp02 .sbody .note {
  font-size: 1em;
  width: 6.125em;
  position: absolute;
  right: 2.125em;
  top: 44em;
}
#cp02 .sbody .link {
  margin-top: 3.4375em;
}
#cp02 .sbody .copyright {
  width: 5.3125em;
  position: absolute;
  right: 2.25em;
  bottom: 1.125em;
}
#cp02 .sbody .flower {
  width: 65.75em;
  position: absolute;
  left: 3.25em;
  top: 22.625em;
  pointer-events: none;
}
@media screen and (max-width: 767.9px) {
  #cp02 {
    background-image: url(../img/top/cp02_bg-sp.webp?v=2.0.0);
    margin-top: -1.3333333333em !important;
    min-height: 56.8em;
  }
  #cp02 > .inner {
    padding-top: 3.6666666667em;
  }
  #cp02 .cpnend {
    padding: 1.2em 0;
  }
  #cp02 .sheader .title {
    margin-top: 0.6666666667em;
    width: 22.6666666667em;
  }
  #cp02 .sbody {
    margin-top: 2.1666666667em;
  }
  #cp02 .sbody .presents {
    flex-wrap: wrap;
  }
  #cp02 .sbody .presents li {
    margin: 0;
    width: 11em;
  }
  #cp02 .sbody .presents li img {
    filter: drop-shadow(0.1em 0.1em 0.3333333333em rgba(47, 80, 96, 0.3));
  }
  #cp02 .sbody .note {
    font-size: 1em;
    margin: 1em 0.8666666667em 0 auto;
    width: 4em;
    position: static;
  }
  #cp02 .sbody .link {
    margin-top: 0.6666666667em;
  }
  #cp02 .sbody .copyright {
    width: 4em;
    right: 0.8666666667em;
    bottom: 1.8333333333em;
  }
}

/* ------------------------------------------------
 beach
------------------------------------------------ */
#beach {
  margin-top: -1.875em !important;
  overflow: hidden;
}
#beach > .inner {
  height: 26.875em;
  position: relative;
}
#beach .sbody {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#beach .sbody .ph {
  width: 100%;
  position: relative;
  top: -18.75em;
}
@media screen and (max-width: 767.9px) {
  #beach {
    margin-top: -1.3333333333em !important;
  }
  #beach > .inner {
    height: 19.5em;
  }
  #beach .sbody .ph {
    top: -4em;
  }
}

/* ------------------------------------------------
contact
------------------------------------------------ */
#contact .sbody {
  margin-top: 1.5625em;
}