html {
  scroll-behavior: smooth;
}
body {
  min-width: 375px;
  max-width: 750px;
  margin: 0 auto;
  font-family: 'Zen Kaku Gothic New', serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1.75;
  color: #333;
  letter-spacing: 0.02em;
}

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

button {
  padding: 0;
  background-color: transparent;
  border: none;
}

a {
  color: inherit;
  text-decoration: none;
}

a:visited {
  color: inherit;
}

/* studio section */
.section-studio {
  padding: clamp(2.5rem, 10.67vw, 5rem) clamp(1.25rem, 5.33vw, 2.5rem) clamp(2rem, 8.53vw, 4rem);

  /* text-align: center; */
  font-size: clamp(0.875rem, 3.73vw, 1.75rem);
  font-weight: 700;
  background-color: #f4f4f4;

  .list-label {
    margin-bottom: clamp(0.625rem, 2.67vw, 1.25rem);
    font-size: clamp(0.875rem, 3.73vw, 1.75rem);
    font-weight: 700;
    text-align: center;

    strong {
      font-size: clamp(1.25rem, 5.33vw, 2.5rem);
      color: #ff6c04;
    }
  }
}

.studio-list {
  display: flex;
  flex-direction: column;
  gap: clamp(1.375rem, 5.87vw, 2.75rem);
}

.studio-area-header {
  padding: clamp(0.125rem, 0.53vw, 0.25rem) 0;
  font-size: clamp(1.25rem, 5.33vw, 2.5rem);
  font-weight: 700;
  color: #fff;
  text-align: center;
  background-color: #ff6c04;
  border-radius: clamp(0.375rem, 1.6vw, 0.75rem) clamp(0.375rem, 1.6vw, 0.75rem) 0 0;
}

.studio-area-body {
  border: clamp(0.125rem, 0.53vw, 0.25rem) solid #ff6c04;
  border-top: none;
  border-radius: 0 0 clamp(0.375rem, 1.6vw, 0.75rem) clamp(0.438rem, 1.87vw, 0.875rem);
}

.studio-button-list {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.75rem, 3.2vw, 1.5rem) clamp(0.5rem, 2.13vw, 1rem);
  padding: clamp(1.25rem, 5.33vw, 2.5rem);
  background-color: #fff;
  border-radius: 0 0 clamp(0.375rem, 1.6vw, 0.75rem) clamp(0.375rem, 1.6vw, 0.75rem);
}

.studio-button {
  padding: clamp(0.125rem, 0.53vw, 0.25rem) clamp(0.625rem, 2.67vw, 1.25rem);
  font-size: clamp(1rem, 4.27vw, 2rem);
  font-weight: 700;
  line-height: 1.75;
  color: #000 !important;
  appearance: none;
  background-color: #f6f6f6;
  border-radius: clamp(0.25rem, 1.07vw, 0.5rem);
  box-shadow: clamp(0.063rem, 0.27vw, 0.125rem) clamp(0.063rem, 0.27vw, 0.125rem)
    clamp(0.25rem, 1.07vw, 0.5rem) 0 #00000040;

  &.active {
    color: #fff !important;
    background-color: #c2b5aa;
    box-shadow: none;
  }
}

.studio-info-container {
  position: relative;
  padding: clamp(2.563rem, 10.93vw, 5.125rem) clamp(1.25rem, 5.33vw, 2.5rem)
    clamp(1.375rem, 5.87vw, 2.75rem);
}

.close-button {
  position: absolute;
  top: clamp(1rem, 4.27vw, 2rem);
  right: 6%;
  font-size: clamp(1.25rem, 5.33vw, 2.5rem);
  font-weight: 900;
  color: #000 !important;
  appearance: none;

  &:hover {
    cursor: pointer;
  }
}

.studio-info-title {
  display: inline-block;
  padding: clamp(0.063rem, 0.27vw, 0.125rem) clamp(0.5rem, 2.13vw, 1rem);
  font-size: clamp(0.875rem, 3.73vw, 1.75rem);
  font-weight: 700;
  color: #fff;
  background-color: #ff6c04;
}

.studio-meta {
  display: flex;
  flex-direction: column;
  margin-top: clamp(0.625rem, 2.67vw, 1.25rem);
  font-size: clamp(0.75rem, 3.2vw, 1.5rem);
  font-weight: 500;

  .access-info,
  .business-time {
    display: flex;
    flex-direction: row;
  }

  .googlemap-link {
    display: inline-block;
    color: #949494;
    text-decoration: underline;
    white-space: nowrap;

    &:hover {
      text-decoration: none;
      cursor: pointer;
      opacity: 0.8;
    }
  }
}

.studio-map {
  margin-top: 20px;
  @media screen and (max-width: 375px) {
    height: 185px;
  }

  iframe {
    width: 100%;
    @media screen and (max-width: 375px) {
      height: 100%;
    }
  }
}

.studio-info-image-container {
  display: flex;
  flex-direction: column;
  gap: clamp(0.375rem, 1.6vw, 0.75rem);
  align-items: center;
  justify-content: center;
  margin-top: clamp(1.25rem, 5.33vw, 2.5rem);
  font-size: clamp(0.813rem, 3.47vw, 1.625rem);
  font-weight: 500;

  small {
    font-size: clamp(0.625rem, 2.67vw, 1.25rem);
  }
}

.text-center {
  text-align: center;
}

.inner {
  padding: 0 clamp(1.25rem, 5.33vw, 2.5rem);
}

.btn {
  width: 100%;
  background: url('../img/btn.svg') no-repeat center center/100% 100%;
  border-radius: clamp(0.75rem, 3.2vw, 1.5rem);

  a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(0.625rem, 2.67vw, 1.25rem);
    font-weight: 700;
    color: #fff;
  }

  .btn-label {
    font-size: clamp(0.875rem, 3.73vw, 1.75rem);
    text-shadow: 0 clamp(0.125rem, 0.53vw, 0.25rem) clamp(0.25rem, 1.07vw, 0.5rem)
      rgb(104 47 0 / 60%);
  }

  .btn-title {
    margin-top: clamp(-0.5rem, -1.07vw, -0.25rem);
    font-size: clamp(1.25rem, 5.33vw, 2.5rem);
    text-shadow: 0 clamp(0.125rem, 0.53vw, 0.25rem) clamp(0.25rem, 1.07vw, 0.5rem)
      rgb(104 47 0 / 60%);
  }
}

#fv {
  .fv-top {
    padding: clamp(0.625rem, 2.67vw, 1.25rem) 0;
    font-size: clamp(1rem, 4.27vw, 2rem);
    font-weight: 700;
    color: #000;
    letter-spacing: 0.1em;
  }

  .fv-image {
    width: 100%;
    height: auto;
  }

  .information-header-container {
    padding-top: clamp(1.25rem, 5.33vw, 2.5rem);
    padding-bottom: clamp(0.938rem, 0.625rem + 1.33vw, 1.25rem);
    font-weight: 500;
    line-height: 1.75;
    color: #fff;
    text-align: center;
    letter-spacing: 0.02em;
    background-color: #ff4e28;

    .information-header-speech-bubble {
      position: relative;
    }

    .information-header-small {
      margin-top: 0.3rem;
      font-size: clamp(0.875rem, 3.73vw, 1.75rem);
    }

    .information-header-title {
      margin-top: -0.2em;
      font-size: clamp(1.25rem, 5.33vw, 2.5rem);
    }
  }

  .information {
    padding-top: clamp(1.25rem, 5.33vw, 2.5rem);
    padding-bottom: clamp(2.5rem, 10.67vw, 5rem);

    p {
      font-size: clamp(0.75rem, 3.2vw, 1.5rem);
      font-weight: 500;
      color: #333;

      a {
        color: #949494;
        text-decoration: underline;
      }
    }

    iframe {
      width: 100%;
      height: clamp(11.25rem, 48vw, 22.5rem);
      margin: clamp(1.25rem, 5.33vw, 2.5rem) 0 clamp(1.938rem, 8.27vw, 3.875rem);
    }
  }

  .campaign {
    margin-top: clamp(1.188rem, 5.07vw, 2.375rem);
  }
}

.label-arrow {
  display: block;
  padding: clamp(0.563rem, 2.4vw, 1.125rem) clamp(0.313rem, 1.33vw, 0.625rem);
  font-size: clamp(1rem, 4.27vw, 2rem);
  font-weight: 700;
  color: #ff6c04;
  text-align: center;
  background: #fff;
  border-radius: clamp(1.875rem, 8vw, 3.75rem);

  &::before {
    position: absolute;
    right: 0;
    bottom: clamp(-0.875rem, -1.87vw, -0.438rem);
    left: 0;
    width: clamp(1.25rem, 5.33vw, 2.5rem);
    height: clamp(0.625rem, 2.67vw, 1.25rem);
    margin: 0 auto;
    content: '';
    background: url('../img/arrow-white.svg') no-repeat center center/100% auto;
  }
}

.label-arrow-inline {
  display: inline-block;
  padding: clamp(0.125rem, 0.53vw, 0.25rem) clamp(0.75rem, 3.2vw, 1.5rem);
  font-size: clamp(1rem, 4.27vw, 2rem);
  font-weight: 700;
  line-height: 1.75;
  color: #ff6c04;
  text-align: center;
  background: #fff;
  border-radius: clamp(1.875rem, 8vw, 3.75rem);

  &::before {
    position: absolute;
    right: 0;
    bottom: clamp(-0.875rem, -1.87vw, -0.438rem);
    left: 0;
    width: clamp(1.25rem, 5.33vw, 2.5rem);
    height: clamp(0.625rem, 2.67vw, 1.25rem);
    margin: 0 auto;
    content: '';
    background: url('../img/arrow-white.svg') no-repeat center center/100% auto;
  }
}

#problems {
  .banner {
    position: relative;

    .label-arrow {
      position: absolute;
      top: clamp(3.25rem, 13.87vw, 6.5rem);
      right: clamp(0.813rem, 3.47vw, 1.625rem);
      left: clamp(0.813rem, 3.47vw, 1.625rem);
    }
  }

  .increase {
    padding-top: clamp(2rem, 8.53vw, 4rem);
    padding-bottom: clamp(2rem, 8.53vw, 4rem);

    .title {
      margin-bottom: clamp(-0.875rem, -1.87vw, -0.438rem);
      font-size: clamp(1.25rem, 5.33vw, 2.5rem);
      font-weight: 700;
      color: #ff7104;
    }

    .featured {
      width: 72%;
      margin: 0 auto clamp(0.188rem, 0.8vw, 0.375rem);
    }

    p {
      font-size: clamp(0.938rem, 4vw, 1.875rem);
      font-weight: 500;
      text-align: justify;
    }
  }

  .title-orange {
    padding: clamp(0.5rem, 2.13vw, 1rem) clamp(1.25rem, 5.33vw, 2.5rem);
    font-size: clamp(1.25rem, 5.33vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    background: #ff6c04;
  }

  .yoga {
    padding-top: clamp(2rem, 8.53vw, 4rem);
    padding-bottom: clamp(2rem, 8.53vw, 4rem);
    background: #d1d8e2;

    .label-top {
      display: inline-block;
      padding: clamp(0.563rem, 2.4vw, 1.125rem) clamp(1.25rem, 5.33vw, 2.5rem)
        clamp(1rem, 4.27vw, 2rem);
      margin-bottom: clamp(0.438rem, 1.87vw, 0.875rem);
      font-size: clamp(1rem, 4.27vw, 2rem);
      font-weight: 700;
      color: #7889a0;
      background: url('../img/bg-btn.svg') no-repeat bottom center / 100% 100%;
      border-radius: clamp(1.875rem, 8vw, 3.75rem);
    }

    p {
      margin: clamp(0.625rem, 2.67vw, 1.25rem) 0 clamp(0.813rem, 3.47vw, 1.625rem);
      font-size: clamp(0.875rem, 3.73vw, 1.75rem);
      font-weight: 500;
    }

    .des-bg {
      font-size: clamp(1.25rem, 5.33vw, 2.5rem);
      font-weight: 500;
      color: #7889a0;
      letter-spacing: 0.03em;

      span {
        display: block;
        margin-bottom: clamp(0.313rem, 1.33vw, 0.625rem);
        text-align: center;
        background: #fff;

        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }

  .problem-list {
    padding-top: clamp(1.5rem, 6.4vw, 3rem);
    padding-bottom: clamp(2rem, 8.53vw, 4rem);

    img {
      margin-bottom: clamp(0.75rem, 3.2vw, 1.5rem);

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

#lesson {
  padding-top: clamp(2rem, 8.53vw, 4rem);
  padding-bottom: clamp(2rem, 8.53vw, 4rem);
  background: #f4f4f4;

  .title {
    margin-bottom: clamp(1rem, 4.27vw, 2rem);
    font-size: clamp(1.25rem, 5.33vw, 2.5rem);
    font-weight: 700;
  }

  .before-lesson {
    padding: clamp(0.75rem, 3.2vw, 1.5rem) clamp(0.5rem, 2.13vw, 1rem);
    background: #fff;
    border-radius: clamp(0.5rem, 2.13vw, 1rem);

    .btn {
      display: block;
      margin-top: clamp(1.438rem, 6.13vw, 2.875rem);
    }
  }

  p {
    font-size: clamp(1rem, 4.27vw, 2rem);
    font-weight: 500;
  }

  .title-border {
    margin-bottom: clamp(0.625rem, 2.67vw, 1.25rem);
    font-size: clamp(1.25rem, 5.33vw, 2.5rem);
    font-weight: 700;
    color: #fff;
    text-shadow:
      clamp(-0.063rem, -0.27vw, -0.125rem) clamp(-0.063rem, -0.27vw, -0.125rem) 0 #333,
      clamp(0.063rem, 0.27vw, 0.125rem) clamp(-0.063rem, -0.27vw, -0.125rem) 0 #333,
      clamp(-0.063rem, -0.27vw, -0.125rem) clamp(0.063rem, 0.27vw, 0.125rem) 0 #333,
      clamp(0.063rem, 0.27vw, 0.125rem) clamp(0.063rem, 0.27vw, 0.125rem) 0 #333;
    text-transform: uppercase;
    letter-spacing: 0.12em;
  }

  .lesson-it {
    padding: clamp(0.75rem, 3.2vw, 1.5rem);
    margin-top: clamp(1rem, 4.27vw, 2rem);
    background: #fff;
    border-radius: clamp(0.5rem, 2.13vw, 1rem);

    .label {
      display: inline-block;
      padding: clamp(0.063rem, 0.27vw, 0.125rem) clamp(0.5rem, 2.13vw, 1rem);
      margin-bottom: clamp(0.25rem, 1.07vw, 0.5rem);
      font-size: clamp(0.75rem, 3.2vw, 1.5rem);
      font-weight: 500;
      color: #fff;
      background-color: #c14e14;
      border-radius: clamp(1.875rem, 8vw, 3.75rem);
    }

    p {
      margin-bottom: clamp(0.75rem, 3.2vw, 1.5rem);

      small {
        font-size: clamp(0.75rem, 3.2vw, 1.5rem);
      }
    }

    img {
      margin-bottom: clamp(0.625rem, 2.67vw, 1.25rem);

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

#effect {
  background: #dce1e7;

  .effect-top {
    position: relative;
    top: clamp(-2.75rem, -5.87vw, -1.375rem);
    padding: 0 clamp(1.25rem, 5.33vw, 2.5rem);
    margin: 0 0 clamp(0.25rem, 1.07vw, 0.5rem);
  }

  .information {
    padding-top: clamp(1.25rem, 5.33vw, 2.5rem);
    padding-bottom: clamp(4.688rem, 20vw, 9.375rem);

    p {
      font-size: clamp(0.938rem, 4vw, 1.875rem);
      font-weight: 500;
      text-align: justify;
    }

    img {
      margin: clamp(2rem, 8.53vw, 4rem) 0 clamp(1.25rem, 5.33vw, 2.5rem);
    }
  }
}

#metabolism {
  .top {
    width: clamp(9.5rem, 40.53vw, 19rem);
    margin: clamp(-5.875rem, -12.53vw, -2.938rem) auto clamp(1rem, 4.27vw, 2rem);
  }

  p {
    font-size: clamp(0.938rem, 4vw, 1.875rem);
    font-weight: 500;
    text-align: justify;
  }

  .title-bg {
    margin-top: clamp(1rem, 4.27vw, 2rem);

    span {
      display: block;
      margin-bottom: clamp(0.25rem, 1.07vw, 0.5rem);
      font-size: clamp(1.125rem, 4.8vw, 2.25rem);
      font-weight: 700;
      color: #ff6d5d;
      background: #fff5f2;
    }
  }

  .metabolism-featured {
    position: relative;
    padding-top: clamp(1.75rem, 7.47vw, 3.5rem);
    margin-bottom: clamp(0.25rem, 1.07vw, 0.5rem);

    .title-bg {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
    }
  }

  .description-center {
    margin: clamp(1rem, 4.27vw, 2rem) 0 clamp(2rem, 8.53vw, 4rem);

    h4 {
      margin: clamp(0.25rem, 1.07vw, 0.5rem) 0;
      font-size: clamp(1.125rem, 4.8vw, 2.25rem);
      font-weight: 700;
      color: #fff;
      text-align: center;
      background: #ff6c04;
    }

    .text-right {
      text-align: right;
    }
  }

  .metabolism-list {
    .it {
      margin-bottom: clamp(1.938rem, 8.27vw, 3.875rem);

      img {
        margin-bottom: clamp(1.25rem, 5.33vw, 2.5rem);
      }
    }
  }
}

.hidden {
  display: none;
}

#comment {
  padding-bottom: clamp(2rem, 8.53vw, 4rem);

  .top-featured {
    margin-bottom: clamp(2rem, 8.53vw, 4rem);
  }

  .title {
    /* margin-bottom: clamp(1rem, 4.27vw, 2rem); */
    font-size: clamp(1.25rem, 5.33vw, 2.5rem);
    font-weight: 700;
  }

  .sub-title {
    margin-bottom: clamp(1rem, 4.27vw, 2rem);
    font-size: clamp(10px, 2.8vw, 20px);
    line-height: 1.75;
    letter-spacing: 0.02em;
  }

  .comment-it {
    margin-bottom: clamp(3.938rem, 16.8vw, 7.875rem);

    &:last-child {
      margin-bottom: 0;
    }

    .top {
      display: flex;
      margin-bottom: clamp(1rem, 4.27vw, 2rem);
    }

    .featured {
      width: clamp(8.75rem, 37.33vw, 17.5rem);
      height: clamp(8.75rem, 37.33vw, 17.5rem);
      overflow: hidden;
      border-radius: clamp(0.25rem, 1.07vw, 0.5rem);

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .information {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-between;
      width: calc(100% - clamp(8.75rem, 37.33vw, 17.5rem));
      padding-left: clamp(0.688rem, 2.93vw, 1.375rem);

      h3 {
        position: relative;
        top: clamp(-0.25rem, -0.53vw, -0.125rem);
        font-size: clamp(2rem, 8.53vw, 4rem);
        font-weight: 700;
        color: #ff6c04;

        .text2 {
          position: relative;
          top: clamp(-0.5rem, -1.07vw, -0.25rem);
          display: block;
          font-size: clamp(1.125rem, 4.8vw, 2.25rem);
          color: #333;
        }

        .text1 {
          font-size: clamp(1.125rem, 4.8vw, 2.25rem);
        }
      }

      .date {
        display: inline-block;
        padding: 0 clamp(0.375rem, 1.6vw, 0.75rem);
        font-size: clamp(0.75rem, 3.2vw, 1.5rem);
        font-weight: 500;
        background: #fdf0e4;
      }
    }

    .description {
      p {
        font-size: clamp(0.75rem, 3.2vw, 1.5rem);
        font-weight: 500;

        span {
          background: linear-gradient(180deg, #fff 40%, #fdf0e4 60%);
        }
      }
    }
  }
}

.tel-btn {
  display: block;
  max-width: 665px;
  margin: 0 auto;
  margin-top: 32px;
}

#footer {
  padding: clamp(2.813rem, 12vw, 5.625rem) clamp(1.25rem, 5.33vw, 2.5rem)
    clamp(2.5rem, 10.67vw, 5rem);
  margin-bottom: clamp(5.625rem, 24vw, 11.25rem);
  background-color: #3c3c3c;

  .menu {
    display: flex;
    justify-content: center;
    margin-bottom: clamp(0.938rem, 4vw, 1.875rem);

    a {
      display: inline-block;
      padding: 0 clamp(1.563rem, 6.67vw, 3.125rem);
      font-size: clamp(0.75rem, 3.2vw, 1.5rem);
      font-weight: 500;
      line-height: clamp(1.313rem, 5.6vw, 2.625rem);
      line-height: 1;
      color: #fff;
      border-left: clamp(0.063rem, 0.27vw, 0.125rem) solid #fff;

      &:first-child {
        border-left: none;
      }
    }
  }

  .copyright {
    font-size: clamp(0.625rem, 2.67vw, 1.25rem);
    font-weight: 500;
    color: #fff;
    opacity: 0.6;
  }
}

.btn-fixed {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  max-width: 750px;
  padding: clamp(0.625rem, 2.67vw, 1.25rem) clamp(0.313rem, 1.33vw, 0.625rem);
  margin: 0 auto;
  background: #fff;
  transition: all 0.3s;
  transform: translateY(100%);

  &.show {
    transform: translateY(0);
  }
}

.studio-area .btn .btn-title {
  font-size: clamp(1.063rem, 4.53vw, 2.125rem);
}

.studio-area .btn .btn-title-small {
  font-size: clamp(1rem, 4.27vw, 2rem);
}