:root {
  --gwGreen: #73af55;
  --gwYellow-light: #fff9e1;
  --gwYellow: #fff0b4;
  --gwPink: #f0d2dc;
  --gwPink-light: #f7e4ea;
  --gwNavy: #005179;
}

.hamburger-button {
  background: var(--gwGreen);
}
.nv-menu__nav {
  background-color: var(--gwGreen);
}
.nv-menu__li a:hover {
  color: var(--gwYellow);
}
.mv__img-top img {
  max-width: 160px;
}
.outer::before {
  background-color: var(--gwYellow-light);
}
/* .offer-top::before {
  background: var(--gwYellow);
} */
.offer-top::before {
  background: linear-gradient(
    to bottom,
    var(--gwYellow) 87%,
    var(--gwYellow-light) 87%
  );
}
.offer-01 .inner-wrapper::before {
  background-color: var(--gwYellow);
}
.offer-02 .inner-wrapper::before {
  background-color: var(--gwYellow);
}
.sumai-park {
  background-color: var(--gwPink);
  top: -6600px;
}
.sumai-park-services::before {
  background-color: var(--gwPink);
}
.customer {
  background-color: var(--gwYellow);
}
.footer {
  background-color: var(--gwPink);
}
.footer:after {
  top: -49px;
  height: 50px;
}
.offer-flex__right .offer-list-wrap-no-border span {
  background-color: var(--gwPink);
}
.offer-03 .inner-wrapper::before {
  background-color: var(--gwYellow);
}
.support__cta-btn {
  max-width: 850px;
  width: 100%;
  margin: auto;
  margin-top: 50px;
}
.sumai-park-services__contents {
  position: relative;
  padding-left: 88px;
  margin-top: 85px;
}
.sumai-park-services__contents-item {
  display: grid;
}
.sumai-park-services__contents-item img {
  max-width: 100%;
}
.sumai-park-services__contents-item--first img {
  aspect-ratio: 693 / 302;
  width: 693px;
}
.sumai-park-services__contents-item--second {
  position: absolute;
  top: 42%;
  right: 0;
  transform: translateY(-50%);
}
.sumai-park-services__contents-item--second img {
  aspect-ratio: 838 / 423;
  width: 838px;
}
.sumai-park-services__contents-item--third {
  margin-top: 245px;
}
.sumai-park-services__contents-item--third img {
  aspect-ratio: 786 / 323;
  width: 786px;
}
.rn-support .cta-btn {
  margin-top: 4px;
}
.rn-support {
  margin-top: 85px;
}
.rn-support .inner-wrapper {
  position: relative;
  padding-top: 120px;
  padding-bottom: 80px;
}
.rn-support .inner-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--gwPink-light);
  border-radius: 20px;
  z-index: -1;
}
.rn-support__wrapper {
  max-width: 1070px;
  margin: 0 auto;
  padding: 0 10px;
}
.support__flex {
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: center;
}
.support__txt::before {
  transform: translateY(-102%);
}
.support__grid {
  margin-top: 40px;
}
.sumai-park-event::before {
  top: -49px;
}
.sumai-park-event::after {
  bottom: -49px;
}
.sumai-park:after {
  top: -49px;
}
.customer:after {
  bottom: -49px;
  height: 50.5px;
}

/* 体感できることセクション */
.rn-support__box {
  display: flex;
  gap: 20px;
  margin-top: 96px;
}
.rn-support__box01 {
  flex: 0 1 25%;
  opacity: 1;
  transition: opacity 0.22s ease;
}
.rn-support__box02 {
  flex: 0 1 50%;
}
.rn-support__box03 {
  flex: 0 1 25%;
  display: flex;
  align-items: flex-end;
  opacity: 1;
  transition: opacity 0.22s ease;
}
.rn-support__box01-ttl {
  width: 145px;
}
.rn-support__box01-h3 {
  font-size: clamp(26px, calc(0.8333vw + 23px), 35px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--gwNavy);
  margin-top: 16px;
}
.rn-support__box-media {
  border-radius: 20px;
}
.rn-support__box-media img {
  display: block;
  width: 100%;
}
.rn-support__box01-img {
  opacity: 1;
  transform: none;
  position: relative;
  z-index: 1;
}
.rn-support__box02-img {
  position: relative;
  z-index: 2;
}
.rn-support__box03-img {
  position: relative;
  z-index: 3;
}
.rn-support__box03-txt {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--gwNavy);
}
.offer-top__heading-body {
  margin-top: 180px;
}
.rn-support__box01-h3 {
  font-family: "M PLUS 1p", sans-serif;
}
@media screen and (min-width: 768px) {
  .rn-support__box01,
  .rn-support__box03 {
    opacity: 0;
  }

  .rn-support__box.is-current .rn-support__box01,
  .rn-support__box.is-current .rn-support__box03 {
    opacity: 1;
  }

  .rn-support__box02-img,
  .rn-support__box03-img {
    transform: translate3d(-400px, 400px, 0) scale(0.8) rotate(-15deg)
      skew(-20deg);
    opacity: 0;
    transition:
      transform 3s cubic-bezier(0.2, 1, 0.2, 1),
      opacity 0.5s ease 0s;
    will-change: transform, opacity;
  }

  .rn-support__box02-img.active,
  .rn-support__box03-img.active {
    transform: translate3d(0, 0, 0) scale(1) rotate(0) skew(0);
    opacity: 1;
  }
}

/* sp */
@media screen and (max-width: 767px) {
  .mv__img-top img {
    max-width: 160px;
  }
  .sumai-park {
    top: auto;
  }
  .rn-support .inner-wrapper {
    padding-top: 85px;
    margin: 0 10px;
  }
  .support__txt::before {
    top: -45px;
  }
  .support__txt {
    margin-top: 0;
  }
  .support__grid {
    gap: 8px;
  }
  .support__cta-btn {
    margin-top: 35px;
  }
  .rn-support .inner-wrapper {
    padding-bottom: 40px;
  }
  .sumai-park-video {
    padding-bottom: 100px;
  }
  .rn-support__box {
    flex-direction: column;
    gap: 40px;
    margin: 0 15px;
  }
  .rn-support__box01-ttl {
    width: 120px;
  }
  .rn-support__box {
    gap: 28px;
  }
  .rn-support__box {
    margin-top: 50px;
  }
  .support__grid {
    padding: 0;
  }
  .support__cta-btn {
    width: 90%;
  }
  .offer-top__heading-image {
    left: auto;
    right: -16px;
  }
  .offer-top__heading-body {
    margin-top: 70px;
  }
  .sumai-park-event__button a {
    max-width: 300px;
  }
  .offer-top__heading-body-tabs {
    margin-top: 25px;
  }
  .sumai-park {
    top: -6300px;
  }
}
