@charset "UTF-8";

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  min-width: 0;
  list-style: none;
  /* text-box: trim-both cap alphabetic; */
}

:root {
  /* color-scheme: light dark; */
  interpolate-size: allow-keywords;
}

html {
  text-size-adjust: 100%;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  line-height: 1.6;
  /* value min 10px max 20px viewport min 375px max 960px */
  font-size: clamp(0.625rem, 0.224rem + 1.71vw, 1.25rem);
  scroll-behavior: smooth;
}

body {
  background: #f5f5f5;
  color: #666;
  overflow-x: hidden;
  position: relative;
  font-size: 1.6rem;
  font-feature-settings: "palt";
  &:has(dialog[open]) {
    overflow: hidden;
  }
}

h1,
h2,
h3,
h4 {
  overflow-wrap: break-word;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

a {
  color: #4cb9bb;
}

img {
  width: inherit;
  height: auto;
  max-width: 100%;
  vertical-align: bottom;
}

.viewport {
  margin-inline: auto;
  max-width: 960px;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
  background: #fff;
}

.btn-primary {
  margin-inline: auto;
  padding: 2rem 5rem;
  background: url("../img/btn-reserve.svg") center / contain no-repeat;
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  aspect-ratio: 5.76 / 1;
  max-width: 590px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  text-decoration: none;
  filter: drop-shadow(0.5rem 0.5rem 0 #c9caca);
  transition: all 0.3s;
  &:hover {
    filter: drop-shadow(0 0 0 transparent);
    translate: 0.5rem 0.5rem;
    transition: all 0.1s;
  }
}

.btn-common {
  margin-inline: auto;
  padding: 1rem 5rem;
  background: url("../img/btn-common.svg") center / contain no-repeat;
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  aspect-ratio: 5.76 / 1;
  max-width: 590px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s;
  &:hover {
    translate: 0.5rem 0;
    transition: all 0.1s;
  }
}

.note {
  padding-left: 1em;
  text-indent: -1em;
  font-size: 1.2rem;
  @media (480px <= width) {
    font-size: 1rem;
  }
  &:before {
    content: "※";
  }
}

#header {
  padding: 1rem 2rem 1.8rem 3.9rem;
  background: url("../img/header-bg.svg") left top / 72.3% auto no-repeat;
  display: flex;
  justify-content: space-between;
  align-items: center;
  @media (480px <= width) {
    padding: 1.8rem 2.9rem 2rem 4.9rem;
  }
  .logo {
    width: 7rem;
    @media (480px <= width) {
      width: 8.4rem;
    }
  }
  .header-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    li {
      width: 6rem;
      @media (480px <= width) {
        width: 7.9rem;
      }
    }
  }
}

#kv {
  background: url("../img/sitetitle-bg.svg") left 3% top 15% / 12% auto no-repeat;
  text-align: center;
  position: relative;
  z-index: 1;
  .site-title {
    margin-inline: auto;
    width: 90%;
    max-width: 654px;
  }
}

#worries {
  margin-top: -5.1rem;
  padding: 10rem 2rem 5rem;
  background:
    url("../img/worries-bg-bottom.svg") bottom / 100% auto no-repeat,
    linear-gradient(to right, #ceebeb 3%, #edf8f8 26%, #edf8f8 74%, #ceebeb 97%);
  text-align: center;
  position: relative;
  .worries-list {
    margin: 0 auto;
    background: url("../img/worries-bg.svg") center / contain no-repeat;
    display: grid;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 2rem;
    grid-template:
      "i1 i2" auto
      "i3 i3" auto
      "i4 i5" auto
      / 1fr 1fr;
    @media (480px <= width) {
      display: flex;
      gap: 2rem;
    }
    .worries {
      margin-inline: auto;
      background: #fff;
      width: 14rem;
      height: 14rem;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0 0 0.4rem rgba(97, 188, 204, 0.3);
      font-weight: 700;
      @media (480px <= width) {
        margin-inline: unset;
        width: 12rem;
        height: 12rem;
      }
    }
    .i1 {
      grid-area: i1;
    }
    .i2 {
      grid-area: i2;
    }
    .i3 {
      grid-area: i3;
    }
    .i4 {
      grid-area: i4;
    }
    .i5 {
      grid-area: i5;
    }
  }
  .fig {
    position: absolute;
    bottom: 0;
    right: 2rem;
    width: 21%;
    max-width: 200px;
    img {
      width: 100%;
    }
  }
}

#reason {
  padding: 5rem 2rem;
  text-align: center;
  font-weight: 700;
  .sec-title {
    margin-bottom: 4rem;
  }
  .title {
    margin-bottom: 4rem;
    padding: 0.8rem 3rem;
    background: #82ced0;
    border-radius: 2.5rem;
    color: #fff;
    font-size: 2rem;
    display: inline-block;
    span {
      color: #fff799;
      font-size: 2.2rem;
    }
  }
  .fig {
    margin-bottom: 2.5rem;
  }
  .reason-text {
    font-size: 1.9rem;
    span {
      font-size: 2rem;
      color: #4cb9bb;
    }
  }
  .point-wrapper {
    margin-inline: -2rem;
    padding-inline: 1.5rem;
    background-image: repeating-linear-gradient(135deg, rgba(213, 237, 238, 1) 0.5% 1%, rgba(255, 255, 255, 0) 1% 1.5%);
    @media (480px <= width) {
      padding-inline: 3rem;
    }
    .point-list {
      margin-bottom: 5rem;
      padding-inline: 1.5rem;
      background: #fff;
      .point {
        margin-top: 5rem;
        h4 {
          margin-bottom: 1rem;
          font-size: 2rem;
          color: #4cb9bb;
          .point-number {
            width: 50%;
            max-width: 238px;
          }
        }
      }
    }
  }
  .movie {
    margin: 0 0 3rem;
    background: url("../img/reason-movie-bg.svg") center / cover no-repeat;
    aspect-ratio: 5 / 4;
    display: flex;
    justify-content: center;
    align-items: center;
    @media (480px <= width) {
      margin: 0 1rem 3rem;
    }
  }
}

#recommend {
  padding-bottom: 5rem;
  background: #e4f5f5;
  .sec-title {
    margin-bottom: 4rem;
    padding-right: 2rem;
    display: flex;
  }
  .note {
    margin: 1rem 3rem 5rem;
    @media (480px <= width) {
      margin: 1rem 6rem 5rem;
    }
  }
  .recommend {
    margin: 0 2rem 10rem;
    padding: 3rem 3rem 6rem;
    background: #fff;
    border-radius: 2rem;
    position: relative;
    @media (480px <= width) {
      margin: 0 3rem 10rem;
    }
    h3 {
      margin-bottom: 3rem;
      font-size: 2rem;
      font-weight: 700;
      color: #4cb9bb;
      text-align: center;
    }
    .list {
      margin: 0 1rem 0.5rem;
      padding-left: 1.5rem;
      font-size: 1.6rem;
      li {
        text-indent: -1.5rem;
        &:before {
          content: "";
          width: 1rem;
          height: 1rem;
          background: #666;
          border-radius: 50%;
          display: inline-block;
          margin-right: 0.5rem;
        }
      }
      sup {
        font-size: 1rem;
      }
    }
    .note {
      margin: 1rem 0 5rem 2.5rem;
    }
    .feature {
      padding: 3rem 2rem;
      background: url("../img/recommend-feature.svg") center / contain no-repeat;
      color: #fff;
      font-size: 1.75rem;
      font-weight: 700;
      text-align: center;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      max-width: 670px;
      aspect-ratio: 3.52 / 1;
      display: blocl;
      span {
        color: #fff799;
      }
    }
  }
  .change-title {
    margin: 0 5rem 2rem;
    padding-bottom: 1rem;
    color: #4cb9bb;
    text-align: center;
    border-bottom: 1px solid #4cb9bb;
  }
  .change-list {
    margin: 1rem 3rem;
    @media (480px <= width) {
      margin: 1rem 6rem;
    }
    .change {
      margin: 1rem 0;
      font-size: 1.75rem;
      font-weight: 700;
      padding-left: 2.5rem;
      background: url("../img/recommend-check.svg") left top 0.25rem / 2.2rem auto no-repeat;
    }
  }
  .btn {
    margin-inline: 2rem;
  }
}

#voice {
  padding: 5rem 2rem;
  background: image-set(url("../img/voice-bg.webp") 1x, url("../img/voice-bg@2x.webp") 2x) center top / cover no-repeat;
  @media (480px <= width) {
    padding: 5rem 3rem;
  }
  .sec-title {
    text-align: center;
  }
  .voice {
    filter: drop-shadow(0 0 0.5rem rgba(217, 187, 70, 0.3));
    margin-block: 4rem 2rem;
    .inner {
      padding: 2rem;
      background: #fff;
      clip-path: polygon(0 0, calc(100% - 2.4rem) 0, 100% 2.4rem, 100% 100%, 0 100%);
    }
    .voice-header {
      margin-bottom: 2rem;
      display: grid;
      grid-template:
        "icn title" auto
        "icn commenter" auto /
        33% 1fr;
      gap: 0.5rem;
      .icn {
        grid-area: icn;
      }
      .title {
        grid-area: title;
        font-size: 2rem;
        color: #4cb9bb;
        display: flex;
        align-items: center;
      }
      .commenter {
        grid-area: commenter;
        font-size: 1.4rem;
        text-align: right;
      }
    }
    .comment {
      span {
        color: #4cb9bb;
      }
    }
  }
  .note {
    text-align: right;
  }
}

#program {
  padding: 5rem 2rem;
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  @media (480px <= width) {
    padding: 5rem 3rem;
  }
  .sec-title {
    margin-inline: auto;
    width: 50%;
    max-width: 238px;
    img {
      width: 100%;
    }
  }
  .title {
    margin: 4rem auto;
    padding: 1rem 2rem;
    background: #4cb9bb;
    border-radius: 3rem;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 534px;
  }
  sub {
    font-size: 1.5rem;
    position: relative;
    top: -0.25rem;
  }
  .program-list {
    margin-inline: auto;
    div {
      margin-block: 2rem;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 1rem;
      flex-direction: column;
      @media (480px <= width) {
        flex-direction: row;
      }
    }
    dt {
      padding: 0.25rem 1.5rem;
      color: #4cb9bb;
      border: 2px solid #4cb9bb;
      border-radius: 0.25rem;
    }
  }
  .text {
    margin-block: 5rem 3rem;
  }
}

#faq {
  .sec-title {
    padding: 2rem;
    background-image: repeating-linear-gradient(120deg, rgba(134, 206, 208, 1) 0.5% 1%, rgba(148, 212, 213, 1) 1% 1.5%);
    color: #fff;
    text-align: center;
    font-size: 2.5rem;
  }
  .faq-list {
    padding: 4rem 2rem;
    @media (480px <= width) {
      padding: 4rem 3rem;
    }
    .faq {
      padding: 1rem;
      border: 3px solid #82ced0;
      border-radius: 1rem;
      overflow: hidden;
      &:not(:last-of-type) {
        margin-bottom: 3rem;
      }
      .faq-summary {
        padding: 0 3rem 0 5rem;
        font-weight: 700;
        color: #82ced0;
        background:
          url(../img/faq-q.svg) left center / 4rem auto no-repeat,
          url(../img/faq-plus.svg) right center / 1rem auto no-repeat;
        display: flex;
        align-items: center;
        min-height: 4.2rem;
        text-box: trim-both cap alphabetic;
        cursor: pointer;
      }
      &[open] .faq-summary {
        background:
          url(../img/faq-q.svg) left center / 4rem auto no-repeat,
          url(../img/faq-minus.svg) right center / 1rem auto no-repeat;
      }
      .faq-item {
        margin-top: 1rem;
        border-top: 1px solid #82ced0;
        .faq-item-inner {
          padding: 1rem 1rem 0 1rem;
        }
      }
    }
  }
}

#experience {
  padding: 5rem 2rem;
  text-align: center;
  background:
    url("../img/experience-bg1.svg") left -1rem top -1rem / 19.5% auto no-repeat,
    url("../img/experience-bg2.svg") right -1rem top 20% / 22.8% auto no-repeat #fffcdb;
  @media (480px <= width) {
    padding: 5rem 3rem;
  }
  .sec-title {
    margin: 0 auto 3rem;
  }
  .title {
    margin: 5rem auto 3rem;
    padding: 1rem 3rem;
    background: #fff;
    border-radius: 2.5rem;
    color: #4cb9bb;
    box-shadow: 0.5rem 0.5rem 0 #f6e9b5;
    display: inline-block;
  }
  .flow-list {
    margin-inline: auto;
    padding-left: 1.2rem;
    max-width: calc(620px + 1.2rem);
    .flow {
      margin-bottom: 4rem;
      position: relative;
      .step {
        padding: 1rem;
        background: #82ced0;
        color: #fff;
        font-size: 1.25rem;
        font-weight: 700;
        width: 7rem;
        height: 5.5rem;
        display: block;
        line-height: 1.1;
        position: absolute;
        top: 1rem;
        left: -1.2rem;
        z-index: 1;
        filter: drop-shadow(none);
        span {
          font-size: 2.25rem;
        }
        &::after {
          content: "";
          background: #4cb9bb;
          clip-path: polygon(0 0, 1.2rem 0, 1.2rem 0.9rem);
          display: block;
          position: absolute;
          top: 100%;
          left: 0;
          width: 1.2rem;
          height: 0.9rem;
        }
      }
      .flow-content {
        filter: drop-shadow(0.5rem 0.5rem 0 #f6e9b5);
        max-width: 620px;
        .inner {
          position: relative;
          padding: 2rem 2rem 3rem 7rem;
          text-align: left;
          background: #fff;
          clip-path: polygon(
            0 0,
            100% 0,
            100% calc(100% - 1rem),
            calc(50% + 1rem) calc(100% - 1rem),
            50% 100%,
            calc(50% - 1rem) calc(100% - 1rem),
            0 calc(100% - 1rem)
          );
          p {
            margin-bottom: 1rem;
          }
        }
      }
    }
  }
}

#shop {
  text-align: center;
  .sec-title {
    padding: 2rem;
    background-image: repeating-linear-gradient(120deg, rgba(134, 206, 208, 1) 0.5% 1%, rgba(148, 212, 213, 1) 1% 1.5%);
    color: #fff;
    text-align: center;
    font-size: 2.5rem;
  }
  .shop {
    padding: 5rem 2rem;
    font-size: 2rem;
    @media (480px <= width) {
      padding: 5rem;
    }
    .shop-name {
      margin-bottom: 2rem;
      color: #4cb9bb;
      text-decoration: underline;
      font-size: 2.4rem;
    }
    .shop-phone {
      margin-top: 2rem;
      color: #4cb9bb;
    }
    .tel {
      font-size: 2.4rem;
    }
    .link-list {
      margin-top: 5rem;
      li:not(:last-of-type) {
        margin-bottom: 3rem;
      }
    }
  }
}

#sns {
  margin: 3rem 2rem;
  padding: 2rem;
  background: #ddd;
  text-align: center;
  @media (480px <= width) {
    margin: 3rem;
  }
  .sec-title {
    font-size: 1.75rem;
  }
  .sns-list {
    margin: 2rem auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 2rem;
    width: 90%;
    @media (480px <= width) {
      width: 80%;
    }
    img {
      width: 80%;
      @media (480px <= width) {
        width: 100%;
      }
    }
  }
  .cospa {
    text-align: center;
    width: 14.5rem;
    max-width: 290px;
  }
  a {
    transition: all 0.3s ease-out;
    &:hover {
      opacity: 0.7;
    }
  }
}

#footer {
  padding: 0 2rem 3rem;
  text-align: center;
  @media (480px <= width) {
    padding: 0 3rem 3rem;
  }
  .footer-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 1.35rem;
    a {
      color: #666;
    }
  }
  .copyright {
    margin-top: 3rem;
    font-size: 1rem;
  }
  a {
    transition: all 0.3s ease-out;
    &:hover {
      text-decoration: none;
      opacity: 0.7;
    }
  }
}

#fixed-bnr {
  padding: 0.5rem 2rem;
  background: rgba(255, 255, 255, 0.8);
  position: sticky;
  bottom: 0;
  z-index: 5;
}

/* js */
.js-fadein-stagger {
  opacity: 0;
  transform: translateY(30px);
  will-change: transform, opacity;
}