@charset "UTF-8";
:root {
  --content-w: 500px;
  --side-gap: calc((100% - var(--content-w)) / 2);
  --side-center: calc((100% - var(--content-w)) / 4);
  --u: min(calc((100vw - var(--content-w)) / 1217), calc(100vh / 1014));
}
html {
  scrollbar-gutter: stable;
}
img {
  vertical-align: top;
  width: 100%;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -10;
  background: #DFEFE0;
}
.main-contents {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  max-width: 500px;
  margin: 0 auto;
  z-index: 55;
}
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
video {
  width: 100%;
  margin: 0px;
  padding: 0px;
  vertical-align: bottom;
}
h1 {
  margin: 0 auto;
  background: #aeb3b5;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
h3 {
  font-size: 5vw;
  margin-bottom: 1vw;
}
p {
  font-size: 2.5vw;
  line-height: 2;
}
.opacity:hover {
  opacity: 0.8;
}
.noopacity:hover {
  opacity: 0;
}
.area {
  max-width: 1100px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}
.content-warpper {
  position: relative;
  height: auto;
}
.content-warpper .decolation {
  position: absolute;
}
.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:rgba(102, 191, 151, 0.8);
  justify-content: center;
  align-items: center;
  z-index: 10000;
}
.overlay.is-active {
  display: flex;
}
.popup-trigger {
  cursor: pointer;
}
.popup-content {
  position: relative;
  max-width: 460px;
  margin: 0 10px;
  width: min(460px, calc(100% - 20px), calc((100vh - 40px) * 1003 / 1699));
  width: min(460px, calc(100% - 20px), calc((100dvh - 40px) * 1003 / 1699));
}
.popup-close {
  width: 5%;
  top: 1.5%;
  right: 3%;
  position: absolute;
  cursor: pointer;
}
body.is-locked {
  overflow: hidden;
}
.side-logo {
  position: fixed;
  top: 50%;
  left: var(--side-center);
  width: min(315px, var(--side-gap) * 0.8);
  height: auto;
  transform: translate(-50%, -50%);
  z-index: 5;
}
[class^="side-deco-"] {
  position: fixed;
  height: auto;
}
.side-deco-01 {
  width: calc(203.5 * var(--u));
  left: calc((100% - var(--content-w)) / 4 - 291 * var(--u));
  top: calc(135 * var(--u));
}
.side-deco-02 {
  width: calc(144 * var(--u));
  left: calc((100% - var(--content-w)) / 4 + 77.5 * var(--u));
  top: calc(39 * var(--u));
}
.side-deco-03 {
  width: calc(166 * var(--u));
  left: calc((100% - var(--content-w)) / 4 - 303 * var(--u));
  bottom: calc(-12.5 * var(--u));
}
.side-deco-04 {
  width: calc(115 * var(--u));
  left: calc((100% - var(--content-w)) / 4 - 154 * var(--u));
  bottom: calc(114.5 * var(--u));
}
.side-deco-05 {
  width: calc(72.5 * var(--u));
  left: calc((100% - var(--content-w)) / 4 - 93 * var(--u));
  bottom: calc(-6.5 * var(--u));
}
.side-deco-06 {
  width: calc(81 * var(--u));
  left: calc((100% - var(--content-w)) / 4 + 19.5 * var(--u));
  bottom: calc(-6.5 * var(--u));
}
.side-deco-07 {
  width: calc(62.5 * var(--u));
  left: calc((100% - var(--content-w)) / 4 + 99 * var(--u));
  bottom: calc(-2.5 * var(--u));
}
.side-deco-08 {
  width: calc(54.5 * var(--u));
  left: calc((100% - var(--content-w)) / 4 + 189.5 * var(--u));
  bottom: calc(-1 * var(--u));
}
.side-deco-09 {
  width: calc(65.5 * var(--u));
  left: calc(100% - (100% - var(--content-w)) / 4 - 200 * var(--u));
  top: calc(53.5 * var(--u));
}
.side-deco-10 {
  width: calc(35.5 * var(--u));
  left: calc(100% - (100% - var(--content-w)) / 4 - 136 * var(--u));
  top: calc(115.5 * var(--u));
}
.side-deco-11 {
  width: calc(352.5 * var(--u));
  left: calc(100% - (100% - var(--content-w)) / 4 + 65 * var(--u));
  top: calc(80 * var(--u));
}
.side11-drop-01,
.side11-drop-02,
.side11-drop-03 {
  position: absolute;
  top: 0;
  height: auto;
}
.side11-drop-01 {
  --drip-x: calc(3 * var(--u));
  width: 3.4%;
  left: 12.91%;
  margin-top: 39.57%;
}
.side11-drop-02 {
  width: 3.69%;
  left: 12.77%;
  margin-top: 39.43%;
}
.side11-drop-03 {
  --drip-x: calc(-3 * var(--u));
  width: 3.69%;
  left: 13.05%;
  margin-top: 40%;
}
.side-deco-11 {
  --drip-dist: calc(93.5 * var(--u));
  --drip-time: 2.7s;
}
.drop-drip {
  animation: drop-drip var(--drip-time, 1.4s) ease-in infinite;
}
.drop-drip-rev {
  animation: drop-drip var(--drip-time, 1.4s) ease-in calc(var(--drip-time, 1.4s) / -2) infinite;
}
.drop-drip-2of3 {
  animation: drop-drip var(--drip-time, 1.4s) ease-in calc(var(--drip-time, 1.4s) / -3) infinite;
}
.drop-drip-3of3 {
  animation: drop-drip var(--drip-time, 1.4s) ease-in calc(var(--drip-time, 1.4s) * -2 / 3) infinite;
}
@keyframes drop-drip {
  0% {
    transform: translateY(-20%);
    opacity: 0;
  }
  12% {
    transform: translateY(0);
    opacity: 1;
  }
  80% {
    transform: translate(var(--drip-x, 0px), var(--drip-dist, 180%));
    opacity: 0;
  }
  100% {
    transform: translate(var(--drip-x, 0px), var(--drip-dist, 180%));
    opacity: 0;
  }
}
.side-deco-12 {
  width: calc(54 * var(--u));
  left: calc(100% - (100% - var(--content-w)) / 4 - 215.5 * var(--u));
  bottom: calc(-2 * var(--u));
}
.side-deco-13 {
  width: calc(56.5 * var(--u));
  left: calc(100% - (100% - var(--content-w)) / 4 - 134 * var(--u));
  bottom: calc(-2.5 * var(--u));
}
.side-deco-14 {
  width: calc(46 * var(--u));
  left: calc(100% - (100% - var(--content-w)) / 4 - 49.5 * var(--u));
  bottom: calc(0.5 * var(--u));
}
.side-deco-15 {
  width: calc(123.5 * var(--u));
  left: calc(100% - (100% - var(--content-w)) / 4 + 110 * var(--u));
  bottom: calc(129 * var(--u));
}
.side-deco-16 {
  width: calc(296 * var(--u));
  left: calc(100% - (100% - var(--content-w)) / 4 + 7.5 * var(--u));
  bottom: calc(-25 * var(--u));
}
.side-nav {
  position: fixed;
  top: 50%;
  left: auto;
  right: var(--side-center);
  width: min(285px, var(--side-gap) * 0.8);
  height: auto;
  transform: translate(50%, -50%);
  z-index: 5;
}
.side-nav-list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 0vw;
}
.side-nav-list a.side-nav-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  text-decoration: none;
}
.dot-divider {
  width: 100%;
  height: 3px;
  background-image: radial-gradient(circle, #8fc4b8 1.5px, transparent 1.5px);
  background-size: 8px 3px;
  background-repeat: repeat-x;
  background-position: center;
  margin: 5px 0;
}
.nav-arrow {
  width: 14px;
  height: 14px;
  border-top: 3px solid #83C5BC;
  border-right: 3px solid #83C5BC;
  transform: rotate(45deg);
  transition: transform 0.25s ease, border-color 0.25s ease;
  flex-shrink: 0;
  margin-left: 12px;
}
.side-nav-list a.side-nav-link img {
  width: 242px;
  max-width: none;
  height: auto;
}
.side-nav-list a:hover .nav-arrow {
  transform: translateX(6px) rotate(45deg);
  border-color: #83C5BC;
}
.global-nav {
  width: 100%;
  max-width: 500px;
  height: auto;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
  background-color: #83C5BC;
  z-index: 1000;
}
.global-nav nav {
  width: 100%;
}
.global-nav__list {
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 2px solid #22b6aa;
}
.global-nav__list__item {
}
.global-nav__list__item:not(:last-child) {
  border-right: 1px solid #83C5BC;
}
.global-nav__list__item a {
  width: 125px;
  height: auto;
}
.global-nav__list__item img {
  width: 100%;
  height: auto;
}
@media screen and (min-width: 501px) {
  .global-nav {
    width: 100%;
    max-width: 500px;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
  }
  .global-nav nav {
    width: 100%;
  }
  .global-nav__list {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .global-nav__list__item a {
    width: 125px;
    height: auto;
  }
  .global-nav__list__item img {
    width: 100%;
    height: auto;
  }
}
@media screen and (min-width: 1096px) {
  .l-footer {
    margin-bottom: 0px;
    position: relative;
  }
}
@media screen and (max-width: 1096px) {
  .l-footer {
    margin-bottom: 113px;
  }
}
@media screen and (max-width: 501px) {
  .l-footer {
    margin-bottom: calc(100vw * 113 / 499);
  }
}
#page-top {
  width: 15vw;
  position: fixed;
  right: 2vw;
  bottom: 25vw;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
@media screen and (min-width: 501px) {
  #page-top {
    width: 80px;
    position: fixed;
    right: 50px;
    bottom: 136px;
    z-index: 100;
  }
}
#page-top.is-show {
  opacity: 1;
  visibility: visible;
}
.loop__wrap {
  overflow: hidden;
  display: flex;
}
.loop__wrap__inner {
  width: 190%;
  flex: 0 0 auto;
  white-space: nowrap;
  overflow: hidden;
  animation: 20s linear 0s infinite normal none running loop;
}
@keyframes loop {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(-100%);
  }
}
.loop--cloud .loop__wrap__inner {
  width: 133.3%;
  animation-duration: 17.54s;
}
.loop--grass .loop__wrap__inner {
  width: 100%;
  animation-duration: 10.53s;
}
.pc {
  display: block;
}
.sp {
  display: none;
}
@media only screen and (max-width: 500px) {
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
}
.swiper {
  margin-top: 0;
  margin-bottom: 30px;
  padding: 30px 0 0 0;
  max-width: 500px;
  height: auto;
}
.swiper-wrapper {
  margin-bottom: 20px;
}
.swiper-slide {
  opacity: 0.5;
  transition:
    transform 0.3s ease, opacity 0.3s ease;
  margin-bottom: 15px;
}
.swiper-slide img {
  height: auto;
  width: 100%;
}
.swiper-slide-active {
  opacity: 1;
}
.swiper-pagination {
  margin-top: 10px;
  margin-bottom: 0;
  display: flex;
  justify-content: center;
  gap: 10px;
}
.swiper-pagination-bullet {
  width: 11px !important;
  height: 11px !important;
  background: #FFFFFF !important;
  opacity: 1;
}
.swiper-pagination-bullet-active {
  background: #FFF07A !important;
  opacity: 1 !important;
}
@media (max-width: 500px) {
  .swiper-pagination {
    margin-bottom: 21%;
  }
  .swiper-pagination-bullet {
    width: 6px !important;
    height: 6px !important;
    opacity: 1;
  }
}
@media (max-width: 400px) {
  .swiper-pagination {
    margin-bottom: 0%;
  }
  .swiper-pagination-bullet {
    width: 5px !important;
    height: 5px !important;
    opacity: 1;
  }
}
[class^="main_logo_0"] {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
}
.main_logo_02 {
  width: 100%;
  top: -2%;
}
.area-contents {
  width: 100%;
  position: absolute;
  top: 0;
}
.main_logo_01 {
  z-index: 5;
}
.area {
  background-color: #66BF97;
}
main {
  background-color: #66BF97;
}
.zoomIn_start {
  animation-name: zoomInAnime2;
  animation-duration: 0.75s;
  animation-delay: 0.8s;
  animation-fill-mode: forwards;
  transition-timing-function: ease;
  opacity: 0;
  z-index: 5;
}
.item_03 {
  width: 11.1%;
  height: auto;
  top: 3.08%;
  left: 3%;
}
.item_04 {
  width: 45.3%;
  height: auto;
  top: 2%;
  left: 52.3%;
}
.item_05 {
  width: 10.1%;
  height: auto;
  top: 20.81%;
  left: 7.3%;
}
.deco_01 {
  width: 23%;
  height: auto;
  top: 2.33%;
  left: 13.4%;
}
.deco_02 {
  width: 11%;
  height: auto;
  top: 15.15%;
  left: 60.4%;
}
.deco_03 {
  width: 6.8%;
  height: auto;
  top: 15.15%;
  left: 83.2%;
}
.deco_04 {
  width: 34.7%;
  height: auto;
  top: 24.62%;
  left: 51.9%;
}
.deco_04 {
  --drip-dist: calc(min(100vw, 500px) * 0.09);
  --drip-time: 2.7s;
}
.deco04-drop-01,
.deco04-drop-02,
.deco04-drop-03 {
  position: absolute;
  top: 0;
  height: auto;
}
.deco04-drop-01 {
  --drip-x: calc(min(100vw, 500px) * 0.003);
  width: 2.59%;
  left: 13.4%;
  margin-top: 39.77%;
}
.deco04-drop-02 {
  width: 3.17%;
  left: 13.11%;
  margin-top: 39.48%;
}
.deco04-drop-03 {
  --drip-x: calc(min(100vw, 500px) * -0.003);
  width: 2.88%;
  left: 13.26%;
  margin-top: 40.06%;
}
.deco_05 {
  width: 18.9%;
  height: auto;
  top: 23.6%;
  left: 21.6%;
}
.deco_06 {
  width: 9.9%;
  height: auto;
  top: 24.8%;
  left: 89.3%;
}
.deco_07 {
  width: 4.9%;
  height: auto;
  top: 45.88%;
  left: 95.1%;
}
.deco_08 {
  width: 7.7%;
  height: auto;
  top: 57.49%;
  left: 0%;
}
.deco_09_01 {
  width: 3.8%;
  height: auto;
  top: 58.23%;
  left: 4.1%;
}
.deco_09_02 {
  width: 3.8%;
  height: auto;
  top: 65.1%;
  left: 91.2%;
}
.deco_10 {
  width: 7.5%;
  height: auto;
  top: 68.91%;
  left: 80.1%;
}
.deco_11 {
  width: 4.5%;
  height: auto;
  top: 73.08%;
  left: 22.1%;
}
.deco_12 {
  width: 2.4%;
  height: auto;
  top: 77.17%;
  left: 38.4%;
}
.deco_13 {
  width: 19.7%;
  height: auto;
  top: 71.04%;
  left: 2.4%;
}
.deco_14 {
  width: 38.5%;
  height: auto;
  top: 72.71%;
  left: 56.9%;
}
.deco_15_01 {
  width: 7.9%;
  height: auto;
  top: 82.18%;
  left: 0.1%;
}
.deco_15_02 {
  width: 8.7%;
  height: auto;
  top: 89.98%;
  left: 8.5%;
}
.deco_15_03 {
  width: 6.7%;
  height: auto;
  top: 80.51%;
  left: 14.3%;
}
.deco_15_04 {
  width: 5.9%;
  height: auto;
  top: 84.23%;
  left: 20.8%;
}
.deco_15_05 {
  width: 8.6%;
  height: auto;
  top: 75.96%;
  left: 25.6%;
}
.deco_15_06 {
  width: 13.8%;
  height: auto;
  top: 83.3%;
  left: 33.5%;
}
.deco_15_07 {
  width: 4.7%;
  height: auto;
  top: 88.87%;
  left: 48%;
}
.deco_15_08 {
  width: 6.3%;
  height: auto;
  top: 84.23%;
  left: 51%;
}
.deco_15_09 {
  width: 3.7%;
  height: auto;
  top: 88.59%;
  left: 62.8%;
}
.deco_15_10 {
  width: 4.7%;
  height: auto;
  top: 89.98%;
  left: 66.9%;
}
.deco_15_11 {
  width: 5.8%;
  height: auto;
  top: 82.74%;
  left: 68.8%;
}
.deco_15_12 {
  width: 6.1%;
  height: auto;
  top: 86.92%;
  left: 74.1%;
}
.deco_15_13 {
  width: 6.6%;
  height: auto;
  top: 89.61%;
  left: 88%;
}
.deco_15_14 {
  width: 5.3%;
  height: auto;
  top: 73.73%;
  left: 90.9%;
}
.deco_15_15 {
  width: 5%;
  height: auto;
  top: 84.04%;
  left: 93.6%;
}
.deco_16 {
  width: 6.2%;
  height: auto;
  top: 92.03%;
  left: 16.8%;
}
.deco_17 {
  width: 8.3%;
  height: auto;
  top: 32.88%;
  left: 19.5%;
}
.deco_18 {
  width: 9%;
  height: auto;
  top: 36.69%;
  left: 37.6%;
}
.deco_19 {
  width: 3.7%;
  height: auto;
  top: 73.08%;
  left: 33%;
}
.deco_20 {
  width: 4.1%;
  height: auto;
  top: 72.62%;
  left: 86.4%;
}
.scrollDown {
  width: 1px;
  height: 50px;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  position: absolute;
  background-image: linear-gradient(-180deg, transparent, #fff 50%, transparent 50%, transparent);
  background-repeat: no-repeat;
  background-size: 100% 200%;
  animation-name: scroll-down;
  animation-duration: 2s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-delay: 0.7s;
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
}
@keyframes scroll-down {
  0% {
    background-position: 0 100%;
  }
  50% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -100%;
  }
}
.new_shop_deco_01 {
  width: 12%;
  top: 38%;
  right: 9%;
}
.new_shop_deco_02 {
  width: 13%;
  bottom: -4%;
  right: 12%;
}
.new_shop_deco_03 {
  width: 8%;
  bottom: 3%;
  left: 8%;
}
.new_shop_deco_04 {
  width: 50%;
  top: 0%;
  left: 10%;
}
.new_shop_deco_05 {
  width: 29%;
  top: 61%;
  left: 16%;
}
.new_shop_deco_06 {
  width: 98%;
  top: 2%;
  left: 1%;
}
.floating {
  animation: floating-y 2s ease-in-out infinite alternate-reverse;
}
@keyframes floating-y {
  0% {
    transform: translateY(-2%);
  }
  100% {
    transform: translateY(2%);
  }
}
.floating-xy {
  animation: floating-xy 2s ease-in-out infinite alternate-reverse;
}
@keyframes floating-xy {
  0% {
    transform: translate(6%, 6%);
  }
  100% {
    transform: translate(-6%, -6%);
  }
}
.floating-yx {
  animation: floating-yx 2s ease-in-out infinite alternate-reverse;
}
@keyframes floating-yx {
  0% {
    transform: translate(-6%, -6%);
  }
  100% {
    transform: translate(6%, 6%);
  }
}
.floating-claud {
  animation: floating-claud 2s ease-in-out infinite alternate-reverse;
}
.floating-claud-reverce {
  animation: floating-claud-reverce 2s ease-in-out infinite alternate-reverse;
}
@keyframes floating-claud-reverce {
  0% {
    transform: translate(-3%, 4%);
  }
  100% {
    transform: translate(3%, -4%);
  }
}
@keyframes floating-claud {
  0% {
    transform: translate(3%, -4%);
  }
  100% {
    transform: translate(-3%, 4%);
  }
}
.floating-reverce {
  animation: floating-y-rev 2s ease-in-out infinite alternate-reverse;
}
@keyframes floating-y-rev {
  0% {
    transform: translateY(2%);
  }
  100% {
    transform: translateY(-2%);
  }
}
.zoomIndelay_bound {
  opacity: 0;
  animation-name: zoomInAnimedelay_bound, fadeIn;
  animation: zoomInAnimedelay_bound 1.13s 1.27s;
  animation-fill-mode: forwards;
  animation-timing-function: linear(0, 1.12, 0.87, 1.02, 0.98, 1.01, 1, 1), ease-out;
}
@keyframes zoomInAnimedelay_bound {
  0% {
    transform: scale(0) rotate(-30deg);
    opacity: 0;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}
.lightning {
  animation: glow 3s ease-in-out infinite;
}
@keyframes glow {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.075);
  }
}
.scale_loop {
  animation: scale_loop 3s ease-in-out infinite alternate-reverse;
}
@keyframes scale_loop {
  0%,
  100% {
    scale: 1;
  }
  50% {
    scale: 1.05;
  }
}
.scale_loop_shop {
  animation: scale_loop_shop 3s ease-in-out infinite alternate-reverse;
}
@keyframes scale_loop_shop {
  0%,
  100% {
    scale: 1;
  }
  50% {
    scale: 1.1;
  }
}
@media only screen and (max-width: 1096px) {
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
}
@media only screen and (max-width: 1096px) {
  .tab {
    display: none;
  }
  .sp {
    display: block;
  }
}
.topics01-deco-01 {
  width: 29.6%;
  height: auto;
  top: 12.19%;
  left: -7.6%;
}
.topics01-deco-02 {
  width: 3.8%;
  height: auto;
  top: 45.1%;
  left: 7.1%;
}
.topics01-deco-03 {
  width: 6%;
  height: auto;
  top: 54.24%;
  left: -0.2%;
}
.topics01-deco-04 {
  width: 2.2%;
  height: auto;
  top: 64.91%;
  left: 11.7%;
}
.topics01-deco-05 {
  width: 10.6%;
  height: auto;
  top: 7.31%;
  left: 81.3%;
}
.topics01-deco-06 {
  width: 3%;
  height: auto;
  top: 23.31%;
  left: 91.8%;
}
.topics01-deco-07 {
  width: 6.4%;
  height: auto;
  top: 37.02%;
  left: 72.4%;
}
.topics01-deco-08 {
  width: 8.9%;
  height: auto;
  top: 37.48%;
  left: 81.7%;
}
.topics01-deco-09 {
  width: 7.2%;
  height: auto;
  top: 55.61%;
  left: 78.8%;
}
.topics01-deco-10 {
  width: 9.3%;
  height: auto;
  top: 47.84%;
  left: 89.7%;
}
.topics02-deco-01 {
  width: 10.4%;
  height: auto;
  top: 27.94%;
  left: 11.4%;
}
.topics02-deco-02 {
  width: 2.8%;
  height: auto;
  top: 37.64%;
  left: 5.6%;
}
.topics02-deco-03 {
  width: 5.2%;
  height: auto;
  top: 41.56%;
  left: 22.2%;
}
.topics02-deco-04 {
  width: 10%;
  height: auto;
  top: 48.26%;
  left: 0.4%;
}
.topics02-deco-05 {
  width: 9%;
  height: auto;
  top: 51.49%;
  left: 10.2%;
}
.topics02-deco-06 {
  width: 23.6%;
  height: auto;
  top: 29.9%;
  left: 78%;
}
.topics02-deco-07 {
  width: 9.2%;
  height: auto;
  top: 41.1%;
  left: 72.6%;
}
.topics02-deco-08 {
  width: 2.4%;
  height: auto;
  top: 50.8%;
  left: 86.8%;
}
.topics02-deco-09 {
  width: 7.2%;
  height: auto;
  top: 79.09%;
  left: 2.4%;
}
.topics02-deco-10-01 {
  width: 5.6%;
  height: auto;
  top: 88.44%;
  left: 91.8%;
}
.topics02-deco-10-02 {
  width: 5.6%;
  height: auto;
  top: 92.6%;
  left: 84.4%;
}
.content-warpper:has(> .topics-deco-12) {
  aspect-ratio: 1001 / 1129;
}
.topics-deco-12 {
  width: 52.8%;
  height: auto;
  top: 13.92%;
  left: 60.6%;
}
.topics-deco-13 {
  width: 11%;
  height: auto;
  top: 20.3%;
  left: 19.6%;
}
.topics-deco-14 {
  width: 7.8%;
  height: auto;
  top: 23.58%;
  left: 9.8%;
}
.topics-deco-15 {
  width: 4.9%;
  height: auto;
  top: 16.67%;
  left: 15.3%;
}
.content-wrapper {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}
.topics-main {
  position: relative;
  z-index: 2;
  text-align: center;
}
.topics-main img {
  width: 100%;
  max-width: 600px;
  height: auto;
}
.loop__container {
  position: absolute;
  left: 0;
  width: 100%;
  overflow: hidden;
}
.loop--cloud {
  top: calc(min(100vw, 500px) * 0.47);
  z-index: 1;
}
.loop--grass {
  top: calc(min(100vw, 500px) * 0.83);
  z-index: 1;
}
.loop-car {
  width: 43.6%;
  height: auto;
  top: 64%;
  right: 28%;
  z-index: 2;
}
.topics-deco-09-01 {
  width: 6.8%;
  height: auto;
  top: 59.01%;
  left: 13.8%;
}
.topics-deco-08-02 {
  width: 4.8%;
  height: auto;
  top: 69.08%;
  left: 20.2%;
}
.topics-deco-10 {
  width: 10.5%;
  height: auto;
  top: 50.15%;
  left: 69.4%;
}
.topics-deco-08-01 {
  width: 11.6%;
  height: auto;
  top: 64.85%;
  left: 72.4%;
}
.topics-deco-09-02 {
  width: 6.3%;
  height: auto;
  top: 61.23%;
  left: 84.8%;
}
.schedule-sonar {
  position: relative;
}
.schedule-sonar img {
  position: relative;
  z-index: 1;
}
.schedule-sonar::before,
.schedule-sonar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../images/top/schedule/schedule_01_wave.png) no-repeat center / 100% 100%;
  transform-origin: 49.45% 42.89%;
  opacity: 0;
  pointer-events: none;
  animation: schedule-sonar-spread 3s cubic-bezier(0.33, 0.6, 0.6, 1) infinite, schedule-sonar-fade 3s linear infinite;
}
.schedule-sonar::after {
  animation-delay: 1.5s;
}
@keyframes schedule-sonar-spread {
  0% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(1.1, 1.5);
  }
}
@keyframes schedule-sonar-fade {
  0% {
    opacity: 0.35;
    filter: blur(0);
  }
  35% {
    opacity: 0.31;
    filter: blur(0);
  }
  75% {
    opacity: 0.26;
    filter: blur(3px);
  }
  100% {
    opacity: 0;
    filter: blur(4px);
  }
}
#schedule {
  overflow-x: clip;
  overflow-y: visible;
}
#newspot,
#shopnews {
  overflow-x: clip;
  overflow-y: visible;
}
#newspot {
    scroll-margin-top: 70px;
}
#shopnews {
  z-index: 2;
}
.sche_deco_01 {
  width: 26.5%;
  height: auto;
  top: 1.05%;
  left: -5.8%;
}
.sche_deco_02 {
  width: 28.5%;
  height: auto;
  top: 13.96%;
  left: 80.2%;
}
.sche_deco_03 {
  width: 15.3%;
  height: auto;
  top: -12.22%;
  left: 84.3%;
}
.sche_deco_04 {
  width: 7.1%;
  height: auto;
  top: -2.97%;
  left: 92.8%;
}
.links {
  background: #E2F2EF;
  padding-block: clamp(40px, 6vw, 70px);
}
.float-updown {
  animation: float-updown 2s ease-in-out infinite alternate;
}
@keyframes float-updown {
  0% {
    transform: translateY(-3%);
  }
  100% {
    transform: translateY(3%);
  }
}
.float-updown-01 {
  animation: float-updown-01 1s ease-in-out infinite alternate;
}
@keyframes float-updown-01 {
  0% {
    transform: translateY(-1%);
  }
  100% {
    transform: translateY(1%);
  }
}
.float-updown-03 {
  animation: float-updown-03 2.5s ease-in-out infinite alternate;
}
@keyframes float-updown-03 {
  0% {
    transform: translateY(-6%);
  }
  100% {
    transform: translateY(6%);
  }
}
.float-updown-rev {
  animation: float-updown-rev 2s ease-in-out infinite alternate;
}
@keyframes float-updown-rev {
  0% {
    transform: translateY(3%);
  }
  100% {
    transform: translateY(-3%);
  }
}
.float-updown-03-rev {
  animation: float-updown-03-rev 2.5s ease-in-out infinite alternate;
}
@keyframes float-updown-03-rev {
  0% {
    transform: translateY(6%);
  }
  100% {
    transform: translateY(-6%);
  }
}
.float-leftright {
  animation: float-leftright 3s ease-in-out infinite alternate;
}
@keyframes float-leftright {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
.float-leftright-02 {
  animation: float-leftright-02 3s ease-in-out infinite alternate;
}
@keyframes float-leftright-02 {
  0% {
    transform: translateX(-8%);
  }
  100% {
    transform: translateX(8%);
  }
}
.float-leftright-rev {
  animation: float-leftright-rev 3s ease-in-out infinite alternate;
}
@keyframes float-leftright-rev {
  0% {
    transform: translateX(5%);
  }
  100% {
    transform: translateX(-5%);
  }
}
.float-leftright-02-rev {
  animation: float-leftright-02-rev 3s ease-in-out infinite alternate;
}
@keyframes float-leftright-02-rev {
  0% {
    transform: translateX(8%);
  }
  100% {
    transform: translateX(-8%);
  }
}
.float-sway {
  animation: float-sway 5s ease-in-out infinite;
  transform-origin: center;
}
@keyframes float-sway {
  0%,
  100% {
    transform: rotate(-8deg);
  }
  50% {
    transform: rotate(8deg);
  }
}
.float-sway-rev {
  animation: float-sway-rev 5s ease-in-out infinite;
  transform-origin: center;
}
@keyframes float-sway-rev {
  0%,
  100% {
    transform: rotate(8deg);
  }
  50% {
    transform: rotate(-8deg);
  }
}
.note-sway {
  animation: note-sway 3s ease-in-out infinite;
  transform-origin: center;
}
@keyframes note-sway {
  0%,
  100% {
    transform: rotate(-20deg);
  }
  50% {
    transform: rotate(20deg);
  }
}
.note-sway-rev {
  animation: note-sway-rev 3s ease-in-out infinite;
  transform-origin: center;
}
@keyframes note-sway-rev {
  0%,
  100% {
    transform: rotate(20deg);
  }
  50% {
    transform: rotate(-20deg);
  }
}
.bird-fly {
  animation: bird-fly 1.6s ease-in-out infinite alternate;
}
.bird-fly-rev {
  animation: bird-fly 1.6s ease-in-out -1.6s infinite alternate;
}
.cloud-drift {
  animation: cloud-drift 6s ease-in-out infinite alternate;
}
.cloud-drift-rev {
  animation: cloud-drift 6s ease-in-out -6s infinite alternate;
}
@keyframes cloud-drift {
  0% {
    transform: translateX(-6%);
  }
  100% {
    transform: translateX(6%);
  }
}
.drop-fall {
  animation: drop-fall 2.4s ease-in infinite;
}
@keyframes drop-fall {
  0% {
    transform: translateY(-20%);
    opacity: 0;
  }
  15% {
    transform: translateY(0);
    opacity: 1;
  }
  70% {
    transform: translateY(150%);
    opacity: 0;
  }
  100% {
    transform: translateY(150%);
    opacity: 0;
  }
}
@keyframes bird-fly {
  0% {
    transform: translateY(-15%);
  }
  100% {
    transform: translateY(15%);
  }
}
.person-breath {
  animation: person-breath 3.5s ease-in-out infinite alternate;
  transform-origin: bottom center;
}
@keyframes person-breath {
  0% {
    transform: translateY(0) scaleY(1);
  }
  100% {
    transform: translateY(-1.5%) scaleY(1.01);
  }
}
.person-sway {
  animation: person-sway 5s ease-in-out infinite;
  transform-origin: bottom center;
}
@keyframes person-sway {
  0%,
  100% {
    transform: rotate(-1.5deg);
  }
  50% {
    transform: rotate(1.5deg);
  }
}
.person-sway-rev {
  animation: person-sway-rev 5.5s ease-in-out infinite;
  transform-origin: bottom center;
}
@keyframes person-sway-rev {
  0%,
  100% {
    transform: rotate(1.5deg);
  }
  50% {
    transform: rotate(-1.5deg);
  }
}
.person-walk {
  animation: person-walk 2.8s ease-in-out infinite;
  transform-origin: bottom center;
}
@keyframes person-walk {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }
  50% {
    transform: translateY(-2%) rotate(1deg);
  }
}
.person-walk-rev {
  animation: person-walk-rev 3.5s ease-in-out infinite;
  transform-origin: bottom center;
}
@keyframes person-walk-rev {
  0%,
  100% {
    transform: translateY(0) rotate(1deg);
  }
  50% {
    transform: translateY(-2%) rotate(-1deg);
  }
}
.person-bob {
  animation: person-bob 3s ease-in-out infinite;
}
.person-bob-rev {
  animation: person-bob 3s ease-in-out -1.5s infinite;
}
@keyframes person-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3%);
  }
}
.person-bob-s {
  animation: person-bob-s 2.4s ease-in-out infinite;
}
.person-bob-s-rev {
  animation: person-bob-s 2.4s ease-in-out -1.2s infinite;
}
@keyframes person-bob-s {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2%);
  }
}
.person-bob-l {
  animation: person-bob-l 3.6s ease-in-out infinite;
}
.person-bob-l-rev {
  animation: person-bob-l 3.6s ease-in-out -1.8s infinite;
}
@keyframes person-bob-l {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4.5%);
  }
}
.person-bob-step {
  animation: person-bob-step 3s ease-in-out infinite;
}
.person-bob-step-rev {
  animation: person-bob-step 3s ease-in-out -1.5s infinite;
}
@keyframes person-bob-step {
  0%,
  40%,
  100% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(-4%);
  }
}
.person-walk-sm {
  animation: person-walk-sm 2.8s ease-in-out infinite;
  transform-origin: bottom center;
}
@keyframes person-walk-sm {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }
  50% {
    transform: translateY(-2%) rotate(1deg);
  }
}
.person-walk-sm-rev {
  animation: person-walk-sm-rev 2.3s ease-in-out infinite;
  transform-origin: bottom center;
}
@keyframes person-walk-sm-rev {
  0%,
  100% {
    transform: translateY(0) rotate(1deg);
  }
  50% {
    transform: translateY(-2%) rotate(-1deg);
  }
}
.person-walk-lg {
  animation: person-walk-lg 3.5s ease-in-out infinite;
  transform-origin: bottom center;
}
@keyframes person-walk-lg {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }
  50% {
    transform: translateY(-2%) rotate(1deg);
  }
}
.person-walk-lg-rev {
  animation: person-walk-lg-rev 3.5s ease-in-out infinite;
  transform-origin: bottom center;
}
@keyframes person-walk-lg-rev {
  0%,
  100% {
    transform: translateY(0) rotate(1deg);
  }
  50% {
    transform: translateY(-3%) rotate(-1deg);
  }
}
.person-walk-xl {
  animation: person-walk-xl 3.5s ease-in-out infinite;
  transform-origin: bottom center;
}
@keyframes person-walk-xl {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg);
  }
  50% {
    transform: translateY(-4%) rotate(2deg);
  }
}
.person-walk-xl-rev {
  animation: person-walk-xl-rev 3.4s ease-in-out infinite;
  transform-origin: bottom center;
}
@keyframes person-walk-xl-rev {
  0%,
  100% {
    transform: translateY(0) rotate(4deg);
  }
  50% {
    transform: translateY(-8%) rotate(-4deg);
  }
}
.car-idle {
  animation: car-idle 1.6s ease-in-out infinite alternate;
  transform-origin: bottom center;
}
@keyframes car-idle {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-1%);
  }
}
.car-bounce {
  animation: car-bounce 0.6s ease-in-out infinite;
  transform-origin: bottom center;
}
@keyframes car-bounce {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-1%) rotate(-0.3deg);
  }
}
.car-bounce-02 {
  animation: car-bounce-02 0.5s ease-in-out infinite;
  transform-origin: bottom center;
}
@keyframes car-bounce-02 {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-0.8%) rotate(-0.3deg);
  }
}
.excavator-dig {
  animation:
    excavator-idle 0.35s ease-in-out infinite alternate,
    excavator-dig 5s ease-in-out infinite;
  transform-origin: right bottom;
}
@keyframes excavator-idle {
  0% {
    translate: 0 0;
  }
  100% {
    translate: 0 -1%;
  }
}
@keyframes excavator-dig {
  0%,
  55% {
    rotate: 0deg;
  }
  65%,
  80% {
    rotate: -2.5deg;
  }
  100% {
    rotate: 0deg;
  }
}
.car-bounce-rev {
  animation: car-bounce-rev 2.4s ease-in-out infinite;
  transform-origin: bottom center;
}
@keyframes car-bounce-rev {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-2.5%) rotate(0.5deg);
  }
}
.opening {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 500px;
  height: 100vh;
  height: 100dvh;
  z-index: 20000;
  overflow: hidden;
  pointer-events: none;
}
.opening__curtain {
  position: absolute;
  top: 0;
  height: 100%;
  width: 50%;
  background-color: #66BF97;
}
.opening__curtain--left {
  left: 0;
}
.opening__curtain--right {
  right: 0;
}
.js-opening .opening__curtain {
  animation: opening-curtain-open 1.2s ease forwards;
  animation-delay: 6s;
}
@keyframes opening-curtain-open {
  0% {
    width: 50%;
  }
  100% {
    width: 0%;
  }
}
.opening__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 50%;
  height: 60%;
  opacity: 0;
  animation: opening-logo-fade 6s ease-in-out forwards;
}
.opening__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(2.00);
}
@keyframes opening-logo-fade {
  0% {
    opacity: 0;
  }
  7% {
    opacity: 1;
  }
  92% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.opening__skip {
  position: absolute;
  right: 4.8%;
  bottom: 4.8%;
  z-index: 2;
  width: 20%;
  max-width: 100px;
  cursor: pointer;
  pointer-events: auto;
}
.shop-list {
  display: block;
  width: 100%;
  position: relative;
  z-index: 2;
}
.shop-list.small {
  width: 90%;
  display: grid;
  margin: 0 auto;
  grid-template-columns: repeat(2, 1fr);
  height: auto;
  box-sizing: border-box;
  column-gap: 5%;
  row-gap: 3.6%;
}
.shop-list.new-open,
.shop-list.renewal-open {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  box-sizing: border-box;
  padding: 0 8.2%;
  column-gap: 3.11%;
}
.shop-list.new-open {
  margin-top: calc(min(100vw, 500px) * -0.002);
  row-gap: calc(min(100vw, 500px) * 0.0274);
}
.shop-list.renewal-open {
  row-gap: calc(min(100vw, 500px) * 0.029);
}
.shop-list__logo {
  cursor: pointer;
}
.shop-list__logo img {
  display: block;
  width: 100%;
  height: auto;
}