/* 1rem = Figmaの100px。PCは1400px幅、スマホは750px幅のデザインの数値をそのまま100で割っている */
:root {
  --teal: #35737b;
  --lime: #dde47f;
  --gray: #dce0e3;
  --en: "Outfit", "Noto Sans JP", sans-serif;
}

html {
  font-size: min(100px, calc(100vw / 11.8));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: #fff;
  color: var(--teal);
  font-family: "Noto Sans JP", sans-serif;
  font-size: .15rem;
  line-break: strict;
  text-spacing-trim: space-all;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  transition: opacity .2s;
}

@media (hover: hover) {
  a:hover { opacity: .7; }
}

.sp { display: none; }
.nw { white-space: nowrap; }

/* ---------- ファーストビュー＋導入 ---------- */
.top {
  position: relative;
  height: 14.03rem;
  overflow: hidden;
}

.top__lime {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4.52rem;
  background: var(--lime);
}

.top__wedge {
  position: absolute;
  top: -2.78rem;
  left: 0;
  right: 0;
  height: 15.18rem;
  background: var(--teal);
  clip-path: polygon(0 43.007%, 0 56.993%, 100% 100%, 100% 0);
}

.canvas {
  position: absolute;
  top: 0;
  left: 50%;
  width: 14rem;
  height: 100%;
  margin-left: -7rem;
}

.insta-head {
  position: absolute;
  top: .35rem;
  right: 1.5rem;
  display: flex;
  align-items: center;
  gap: .1rem;
  color: var(--lime);
  font-family: var(--en);
  font-size: .15rem;
  font-weight: 600;
  line-height: .204rem;
  letter-spacing: .003rem;
  text-decoration: none;
}

.insta-head img {
  width: .7rem;
  height: .7rem;
}

.logo {
  position: absolute;
  top: 1.13rem;
  left: 4.02rem;
  width: 5.97rem;
  margin: 0;
}

.logo img { width: 100%; }

.catch {
  position: absolute;
  top: 5.6rem;
  left: 3.85rem;
  width: 6.69rem;
  margin: 0;
  color: #fff;
  font-size: .48rem;
  font-weight: 600;
  line-height: .6rem;
  text-align: center;
  white-space: nowrap;
}

.catch-en {
  position: absolute;
  top: 6.445rem;
  left: 3.85rem;
  width: 6.68rem;
  margin: 0;
  color: #fff;
  font-family: var(--en);
  font-size: .12rem;
  font-weight: 600;
  line-height: .204rem;
  letter-spacing: .024rem;
  text-align: center;
  white-space: nowrap;
}

.intro {
  position: absolute;
  top: 8.44rem;
  left: 1.47rem;
  width: 5.98rem;
}

.intro__title {
  margin: 0;
  font-size: .38rem;
  font-weight: 700;
  line-height: .54rem;
  letter-spacing: .02rem;
}

.intro__text {
  margin: .3rem 0 0 .09rem;
  font-size: .2rem;
  font-weight: 600;
  line-height: .48rem;
  white-space: nowrap;
}

.insta-body {
  position: absolute;
  top: 12.4rem;
  left: 8.52rem;
  width: 1.22rem;
  font-family: var(--en);
  font-size: .25rem;
  font-weight: 600;
  line-height: .204rem;
  letter-spacing: .005rem;
  text-align: center;
  text-decoration: none;
}

.insta-body img {
  width: .91rem;
  height: .91rem;
  margin: .206rem auto 0;
}

.scroll {
  position: absolute;
  top: 5.76rem;
  right: .46rem;
  width: .2rem;
  height: 1.33rem;
}

.scroll span {
  display: block;
  width: .2rem;
  height: .48rem;
  color: var(--lime);
  font-family: var(--en);
  font-size: .1rem;
  font-weight: 600;
  line-height: .2rem;
  letter-spacing: .02rem;
  text-align: center;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}

.scroll i {
  position: absolute;
  top: .53rem;
  left: .09rem;
  width: .01rem;
  height: .8rem;
  background: var(--lime);
}

.scroll b {
  position: absolute;
  top: .66rem;
  left: .05rem;
  width: .09rem;
  height: .09rem;
  border-radius: 50%;
  background: var(--lime);
  animation: scroll-dot 2.4s cubic-bezier(.45, 0, .55, 1) infinite;
}

/* 丸はスマホでも必ず動かしたいので、動きを減らす設定でも止めない */
@keyframes scroll-dot {
  0% {
    opacity: 0;
    transform: translateY(-.13rem);
  }
  15%, 80% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translateY(.58rem);
  }
}

@keyframes scroll-dot-sp {
  0% {
    opacity: 0;
    transform: translateY(-.13rem);
  }
  15%, 80% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translateY(1.49rem);
  }
}

.photo { width: 100%; max-width: none; }

/* ---------- 施設紹介 ---------- */
.main {
  padding-top: 2rem;
  background: var(--teal);
}

.fac {
  width: 9rem;
  margin: 0 auto;
}

.fac__row {
  display: flex;
  gap: .6rem;
  min-height: 1.68rem;
}

.fac__row + .fac__row { margin-top: 1rem; }

.fac__logo {
  flex: none;
  width: 3.2rem;
  margin: 0;
}

.fac__logo img { width: 100%; }

.fac__text {
  width: 5.2rem;
  margin: 0;
  color: var(--lime);
  font-size: .15rem;
  line-height: .26rem;
  letter-spacing: .01rem;
}

.plan {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 11.01rem;
  margin: 1rem auto 0;
  padding: .01rem 0 .05rem;
}

.plan__map {
  width: 4.89rem;
  margin-left: .005rem;
}

.spots {
  width: 5.51rem;
  margin: 0;
  color: var(--lime);
}

.spot + .spot { margin-top: .2rem; }
.spot:nth-child(2) { margin-top: .22rem; }

.spot dt {
  display: flex;
  align-items: center;
  gap: .1rem;
  font-size: .28rem;
  font-weight: 700;
  line-height: .24rem;
  letter-spacing: .01rem;
}

.spot__mark {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: .43rem;
  height: .43rem;
  border-radius: 50%;
  background: var(--lime);
  color: var(--teal);
}

.spot small {
  font-size: .15rem;
  line-height: 1;
}

.spot dd {
  margin: .05rem 0 0;
  font-size: .15rem;
  line-height: .24rem;
  letter-spacing: .01rem;
  white-space: nowrap;
}

/* ---------- OVER ALLs ＋ アクセス ---------- */
.lower {
  position: relative;
  margin-top: 2rem;
  padding-bottom: 1.3rem;
}

.lower::before {
  content: "";
  position: absolute;
  top: 1.22rem;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--gray);
  clip-path: polygon(0 6.52837rem, 100% 0, 100% 100%, 0 100%);
}

.card {
  position: relative;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  width: 11rem;
  margin: 0 auto;
  padding: .5rem;
  border-radius: .3rem;
  background: var(--lime);
  letter-spacing: .01rem;
}

.card__text { width: 5rem; }

.card__lead {
  margin: 0;
  padding-top: .095rem;
  font-size: .2rem;
  font-weight: 600;
  line-height: .22rem;
}

.card__name {
  margin: .2rem 0 .315rem;
  font-family: var(--en);
  font-size: .5rem;
  font-weight: 700;
  line-height: .22rem;
}

.card__body {
  margin: 0;
  font-size: .15rem;
  line-height: .24rem;
}

.card__sign {
  width: 2.89rem;
  margin: .33rem 0 0 .005rem;
}

.card__photo {
  flex: none;
  width: 4.4rem;
  height: 4.3rem;
  border-radius: .2rem;
  object-fit: cover;
}

.access {
  position: relative;
  width: 11rem;
  margin: 2rem auto 0;
}

.access__title {
  margin: 0;
  letter-spacing: .01rem;
  text-align: center;
}

.access__title span {
  display: block;
  font-family: var(--en);
  font-size: .7rem;
  font-weight: 600;
  line-height: .55rem;
}

.access__title small {
  display: block;
  margin-top: .1rem;
  font-size: .15rem;
  font-weight: 700;
  line-height: .221rem;
}

.access__map {
  position: relative;
  display: block;
  height: 4.5rem;
  margin-top: .71rem;
  overflow: hidden;
  border-radius: .3rem;
}

.access__map img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.access__link {
  display: block;
  margin-top: .05rem;
  font-size: .13rem;
  line-height: .204rem;
  letter-spacing: .01rem;
  text-align: right;
}

.access__info {
  display: flex;
  gap: .4rem;
  min-height: .94rem;
  margin-top: .206rem;
  font-size: .15rem;
  line-height: .204rem;
  letter-spacing: .01rem;
}

.access__place { width: 3.41rem; }

.access__place address {
  font-style: normal;
  white-space: nowrap;
}

.access__park {
  display: flex;
  align-items: center;
  gap: .1rem;
  margin: .1rem 0 0;
}

.access__park span {
  box-sizing: border-box;
  width: .7rem;
  border: .01rem solid var(--teal);
  border-radius: .2rem;
  font-size: .13rem;
  line-height: .2rem;
  text-align: center;
}

.access__station {
  padding-left: .4rem;
  border-left: .01rem solid #a5a5a5;
}

.access__station h3 {
  margin: 0;
  font-size: .15rem;
  font-weight: 700;
  line-height: .204rem;
}

.access__station ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.access__station li {
  display: flex;
  align-items: center;
  gap: .05rem;
  margin-top: .1rem;
  white-space: nowrap;
}

.access__station li::before {
  content: "";
  flex: none;
  width: .08rem;
  height: .08rem;
  border-radius: 50%;
  background: var(--teal);
}

/* ---------- フッター ---------- */
.footer {
  position: relative;
  box-sizing: border-box;
  height: 3.33rem;
  border-bottom: .15rem solid var(--lime);
  background: var(--teal);
}

.footer__logo {
  position: absolute;
  top: .49rem;
  left: 50%;
  width: 2.26rem;
  margin-left: -1.13rem;
}

.footer__copy {
  position: absolute;
  top: 2.625rem;
  left: 0;
  right: 0;
  margin: 0;
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: .1rem;
  line-height: .221rem;
  text-align: center;
}

/* ---------- 動き（JSなし・動きを減らす設定・印刷では最初から全部表示） ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* ロゴは左下から右上へ浮かぶ */
  .js .logo img {
    -webkit-mask-image: linear-gradient(to top right, #000 40%, transparent 60%);
            mask-image: linear-gradient(to top right, #000 40%, transparent 60%);
    -webkit-mask-size: 300% 300%;
            mask-size: 300% 300%;
    -webkit-mask-position: 100% 0;
            mask-position: 100% 0;
    animation: logo-in 1.4s cubic-bezier(.45, 0, .2, 1) .1s both;
  }

  .js .catch { animation: fade-up .8s cubic-bezier(.22, 1, .36, 1) .7s backwards; }
  .js .catch-en { animation: fade-up .8s cubic-bezier(.22, 1, .36, 1) .85s backwards; }
  .js .insta-head { animation: fade-in .8s ease 1s backwards; }
  .js .scroll { animation: fade-in .8s ease 1.1s backwards; }

  /* スクロールで出す */
  .js .rv:not(.is-in) { opacity: 0; }

  .js .rv.is-in {
    animation: fade-up .9s cubic-bezier(.22, 1, .36, 1) calc(var(--i, 0) * .1s) backwards;
  }

  .js .photo.rv.is-in { animation-name: fade-in; }
}

@media (prefers-reduced-motion: no-preference) and (min-width: 901px) {
  .spot:nth-child(1) { --i: 1; }
  .spot:nth-child(2) { --i: 2; }
  .spot:nth-child(3) { --i: 3; }
  .spot:nth-child(4) { --i: 4; }
  .spot:nth-child(5) { --i: 5; }
}

@media print {
  .js .rv:not(.is-in) { opacity: 1; }
}

@keyframes logo-in {
  to {
    -webkit-mask-position: 0 100%;
            mask-position: 0 100%;
  }
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(.24rem);
  }
}

@keyframes fade-in {
  from { opacity: 0; }
}

/* ---------- スマホ（750pxデザイン。600px以上は600px幅の列で止める） ---------- */
@media (max-width: 900px) {
  html { font-size: min(calc(100vw / 7.5), 80px); }

  .sp { display: inline; }
  .pc { display: none; }

  .top { height: 29.1rem; }

  .top__lime { height: 4.49rem; }

  .top__wedge {
    top: -5.88rem;
    left: 50%;
    right: auto;
    width: 25.82rem;
    height: 27.99rem;
    margin-left: -10.29rem;
  }

  .canvas {
    width: 7.5rem;
    margin-left: -3.75rem;
  }

  /* 601〜900pxは列が中央で止まるので、scrollと同じ画面の右端からの余白にする */
  .insta-head {
    top: .96rem;
    right: calc(.5rem - (100vw - 7.5rem) / 2);
    gap: .15rem;
    font-size: .28rem;
    line-height: .38rem;
    letter-spacing: .0056rem;
  }

  .insta-head img {
    width: .85rem;
    height: .85rem;
  }

  .logo {
    top: 3.2rem;
    left: .7rem;
    width: 6.1rem;
  }

  .catch {
    top: 7.86rem;
    left: .9rem;
    width: 6.1rem;
    font-size: .62rem;
    line-height: .82rem;
  }

  .catch-en {
    top: 9.9rem;
    left: .5rem;
    width: 6.5rem;
    font-size: .24rem;
  }

  .intro {
    top: 15.6rem;
    left: .5rem;
    width: 6.5rem;
  }

  .intro__title {
    font-size: .52rem;
    line-height: .72rem;
  }

  .intro__text {
    margin: .335rem 0 0;
    font-size: .32rem;
    line-height: .68rem;
  }

  .insta-body {
    top: 26.38rem;
    left: 3.07rem;
    width: 1.36rem;
    font-size: .28rem;
    line-height: .38rem;
    letter-spacing: .0056rem;
  }

  .insta-body img {
    width: 1.2rem;
    height: 1.2rem;
    margin-top: .15rem;
  }

  .scroll {
    top: 11.45rem;
    right: .5rem;
    width: .4rem;
    height: 3.15rem;
  }

  .scroll span {
    width: .4rem;
    height: 1.15rem;
    font-size: .25rem;
    line-height: .4rem;
    letter-spacing: .04rem;
  }

  .scroll i {
    top: 1.35rem;
    left: .19rem;
    width: .02rem;
    height: 1.8rem;
  }

  .scroll b {
    top: 1.48rem;
    left: .11rem;
    width: .18rem;
    height: .18rem;
    animation-name: scroll-dot-sp;
  }

  .main { padding-top: 2.5rem; }

  .fac { width: 6.5rem; }

  .fac__row {
    flex-direction: column;
    align-items: center;
    min-height: 0;
  }

  .fac__row + .fac__row { margin-top: 1.5rem; }

  .fac__logo { width: 4rem; }
  .fac__logo--gritchen { width: 4.3rem; }

  .fac__text {
    width: 100%;
    font-size: .32rem;
    line-height: .48rem;
    letter-spacing: 0;
  }

  .plan {
    display: block;
    width: 6.5rem;
    margin-top: 1.5rem;
    padding: 0;
  }

  .plan__map {
    width: 100%;
    margin-left: 0;
  }

  .spots {
    width: 100%;
    margin-top: 1rem;
  }

  .spot + .spot { margin-top: .57rem; }
  .spot:nth-child(2) { margin-top: .57rem; }
  .spot:nth-child(3) { margin-top: .62rem; }

  .spot dt {
    align-items: flex-start;
    gap: .2rem;
    font-size: .5rem;
    line-height: .6rem;
  }

  .spot__mark {
    box-sizing: border-box;
    width: .7rem;
    height: .7rem;
    padding-bottom: .03rem;
  }

  .spot small { font-size: .3rem; }

  .spot dd {
    margin-top: .2rem;
    font-size: .32rem;
    line-height: .48rem;
    white-space: normal;
  }

  .spot:nth-child(2) dd { margin-top: .12rem; }

  .lower {
    margin-top: 2.46rem;
    padding-bottom: 2.5rem;
  }

  .lower::before {
    top: 11.88rem;
    clip-path: polygon(0 3.49rem, 100% 0, 100% 100%, 0 100%);
  }

  .card {
    flex-direction: column;
    align-items: center;
    width: 6.5rem;
    padding: .8rem .4rem;
    border-radius: .4rem;
  }

  .card__text { display: contents; }

  .card__lead {
    order: 1;
    padding-top: 0;
    font-size: .34rem;
    line-height: .44rem;
    text-align: center;
  }

  .card__name {
    order: 2;
    margin: .4rem 0 .82rem;
    font-size: .84rem;
    line-height: .59rem;
    text-align: center;
  }

  .card__photo {
    order: 3;
    width: 5.7rem;
    height: 5.57rem;
    border-radius: .4rem;
  }

  .card__body {
    order: 4;
    align-self: flex-start;
    width: 5.72rem;
    margin-top: .8rem;
    font-size: .32rem;
    line-height: .48rem;
  }

  .card__sign {
    order: 5;
    width: 5.65rem;
    margin: .6rem 0 0;
  }

  .access {
    width: 6.54rem;
    margin-top: 2.5rem;
  }

  .access__title span {
    font-size: .9rem;
    line-height: .62rem;
  }

  .access__title small {
    margin-top: .33rem;
    font-size: .3rem;
  }

  .access__map {
    margin-top: .82rem;
    border-radius: .4rem;
  }

  .access__map img {
    top: -15.24%;
    left: -28.45%;
    width: 156.73%;
    max-width: none;
    height: 119.78%;
    object-fit: fill;
  }

  .access__link {
    margin-top: .2rem;
    font-size: .26rem;
    line-height: .36rem;
  }

  .access__info {
    display: block;
    width: 6.5rem;
    margin: .6rem 0 0 .02rem;
    font-size: .32rem;
    line-height: .48rem;
  }

  .access__place { width: 100%; }

  .access__place address { white-space: normal; }

  .access__park {
    gap: .2rem;
    margin-top: .3rem;
  }

  .access__park span {
    width: 1.6rem;
    border-width: .02rem;
    border-radius: .37rem;
    font-size: .32rem;
    line-height: .48rem;
  }

  .access__station {
    margin-top: .5rem;
    padding: .5rem 0 0;
    border-top: .02rem solid #a5a5a5;
    border-left: 0;
  }

  .access__station h3 {
    font-size: .32rem;
    line-height: .48rem;
  }

  .access__station li {
    gap: .1rem;
    margin-top: .05rem;
  }

  .access__station li:first-child { margin-top: .1rem; }

  .access__station li::before {
    width: .26rem;
    height: .26rem;
  }

  .footer { height: 5.14rem; }

  .footer__logo {
    top: .8rem;
    width: 3.64rem;
    margin-left: -1.82rem;
  }

  .footer__copy {
    top: 4rem;
    font-size: .22rem;
  }
}