@charset "utf-8";

.page-main {
  padding-bottom: 10px;
}

.page-main .section .content-inner {
  padding-inline: 30px;
}

.page-main .body-copy {
  text-align: justify;
  text-justify: inter-character;
}

@media (max-width: 640px) {
  .page-main .section .content-inner { padding-inline: 6vw; }
}

.course-intro {
  padding: 14px 30px 28px;
  text-align: center;
}

.reservation-badge {
  display: inline-block;
  padding: 3px 52px;
  border: 1px solid var(--color-ink);
  color: var(--color-ink);
  font-size: 20px;
  font-weight: 500;
  line-height: var(--lh-compact);
  letter-spacing: var(--ls-wide);
}

.visit-red {
  margin-top: 16px;
  color: var(--color-red);
  font-size: 20px;
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-wide);
}

.course-lead {
  margin-top: 28px;
  color: var(--color-ink);
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 700;
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  text-align: left;
}

.course-media {
  margin: 0;
}

.course-media .media { aspect-ratio: 8 / 3; }

.course-list {
  display: grid;
  gap: 30px;
  padding: 40px 30px 50px;
}

.course-card {
  color: var(--color-ink);
}

.course-card__meta {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 10px;
  align-items: baseline;
}

.course-card__name {
  color: var(--color-blue);
  font-size: 24px;
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-body);
  font-feature-settings: "palt" 1;
}

.course-card__time {
  font-size: 18px;
  font-weight: 400;
  line-height: var(--lh-heading);
  white-space: nowrap;
}

.course-card__leader {
  background: linear-gradient(to right, rgba(35,24,21,.72) 50%, transparent 50%) repeat-x bottom / 8px 1px;
  height: 1px;
  transform: translateY(-.35em);
}

.course-card__price {
  font-size: 22px;
  font-weight: 700;
  line-height: var(--lh-heading);
  white-space: nowrap;
}

.course-card__tax {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: var(--ls-min);
}

.course-card__copy {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 400;
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}
.course-card__copy__str {
  font-weight: 700;
}

.first-price {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 14px;
  background: var(--color-soft-pink);
  color: var(--color-white);
  font-size: 18px;
  font-weight: 700;
  line-height: var(--lh-compact);
  letter-spacing: var(--ls-body);
}

.course-note {
  display: grid;
  grid-template-columns: 1fr 160px;
  gap: 18px;
  align-items: center;
  padding: 0 30px 60px;
}

.course-note__copy {
  color: var(--color-ink);
  font-size: 16px;
  font-weight: 500;
  line-height: var(--lh-compact);
  letter-spacing: var(--ls-body);
}

.payment {
  padding: 30px 30px 30px;
  background: #ffffff;
}

.payment__title {
  margin-bottom: 20px;
  text-align: center;
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-wide);
}

.payment__copy {
  font-size: 16px;
  line-height: var(--lh-compact);
  letter-spacing: var(--ls-body);
}


.payment__emphasis {
  font-weight: 700;
}

.prepaid-list {
  display: grid;
  gap: 18px;
  margin-top: 24px;
}

.prepaid-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0 10px;
  align-items: baseline;
  color: var(--color-ink);
  font-size: 16px;
  font-weight: 700;
  line-height: var(--lh-compact);
  letter-spacing: var(--ls-min);
}

.prepaid-card__leader {
  min-width: 54px;
  background: linear-gradient(to right, rgba(35,24,21,.72) 50%, transparent 50%) repeat-x bottom / 8px 2px;
  height: 2px;
  transform: translateY(-.32em);
}

.prepaid-card__term {
  grid-column: 1 / -1;
  justify-self: end;
  color: var(--color-ink);
  font-size: 16px;
  font-weight: 700;
}

.policy {
  padding: 30px;
}

.policy__title {
  margin: 18px 0 8px;
  font-size: 18px;
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}
.policy__title .policy__title__notes {
  font-size: 16px;
  font-weight: 400;
}
.policy__copy {
  font-size: 16px;
  line-height: var(--lh-compact);
}

@media (max-width: 480px) {
  .reservation-badge { padding-inline: 28px; font-size: 18px; }
  .visit-red { font-size: 18px; }
  .course-list { padding-inline: 5.6vw; }
  .course-card__meta { grid-template-columns: 1fr auto; }
  .course-card__leader {display: none;}
  .course-card__name { font-size: 20px; }
  .course-card__time { font-size: 16px; }
  .course-card__price { grid-column: 2; grid-row: 1 / span 2; font-size: 14px; }
  .course-card__copy { font-size: 14px; }
  .course-note { grid-template-columns: 1fr 92px; padding-inline: 5.6vw; }
  .course-note__copy, .payment__copy, .policy__copy { font-size: 14px; }
  .payment, .policy { padding-inline: 5.6vw; }
  .prepaid-card { grid-template-columns: auto minmax(24px, 1fr); gap: 4px 8px; font-size: 14px; }
  .prepaid-card__leader { display: block; min-width: 24px; }
  .prepaid-card > span:nth-child(3) { grid-column: 1 / -1; justify-self: end; }
  .prepaid-card__term { grid-column: 1 / -1; font-size: 16px; }
}

.first-price {
  display: inline-flex;
  justify-content: center;
  gap: 0.8em;
  flex-wrap: wrap;
}

.course-list--beauty {
  padding-bottom: 0;
}

.course-list--beauty + .dots {
  margin-top: 28px;
  margin-bottom: 28px;
}

.prepaid-card__bonus {
  color: var(--color-pink);
  font-weight: 700;
}

.policy .info-rule {
  height: 6px;
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .page-main .section .content-inner {
    padding-inline: 4.6875vw;
  }

  .course-intro {
    padding: 2.1875vw 4.6875vw 4.375vw;
  }

  .reservation-badge {
    padding: .46875vw 8.125vw;
    font-size: clamp(18px, 3.125vw, 20px);
  }

  .visit-red {
    margin-top: 2.5vw;
    font-size: clamp(18px, 3.125vw, 20px);
  }

  .course-lead {
    margin-top: 4.375vw;
    font-size: clamp(14px, 2.5vw, 16px);
  }

  .course-list {
    gap: 4.6875vw;
    padding: 6.25vw 4.6875vw 7.8125vw;
  }

  .course-card__meta {
    gap: 1.5625vw;
  }

  .course-card__name {
    font-size: clamp(20px, 3.75vw, 24px);
  }

  .course-card__time {
    font-size: clamp(16px, 2.8125vw, 18px);
  }

  .course-card__price {
    font-size: clamp(18px, 3.4375vw, 22px);
  }

  .course-card__tax {
    font-size: clamp(12px, 2.1875vw, 14px);
  }

  .course-card__copy,
  .course-note__copy,
  .payment__copy,
  .policy__copy {
    font-size: clamp(14px, 2.5vw, 16px);
  }

  .first-price {
    font-size: clamp(16px, 2.8125vw, 18px);
  }

  .course-note {
    grid-template-columns: 1fr 25vw;
    gap: 2.8125vw;
    padding: 0 4.6875vw 9.375vw;
  }

  .payment,
  .policy {
    padding-inline: 4.6875vw;
  }

  .payment {
    padding-block: 4.6875vw 4.6875vw 6.4vw;
  }

  .payment__title {
    margin-bottom: 3.125vw;
    font-size: clamp(20px, 3.4375vw, 22px);
  }

  .prepaid-list {
    gap: 2.8125vw;
    margin-top: 3.75vw;
  }

  .prepaid-card {
    font-size: clamp(14px, 2.5vw, 16px);
  }

  .prepaid-card__term {
    font-size: clamp(14px, 2.5vw, 16px);
  }

  .policy__title {
    margin: 2.8125vw 0 1.25vw;
    font-size: clamp(16px, 2.8125vw, 18px);
  }

  .policy__title .policy__title__notes {
    font-size: clamp(14px, 2.5vw, 16px);
  }
}

@media (max-width: 480px) {
  .course-card__meta {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 0 8px;
  }

  .course-card__name {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    white-space: nowrap;
  }

  .course-card__leader {
    display: none;
  }

  .course-card__time {
    grid-column: 2;
    grid-row: 1;
    white-space: nowrap;
  }

  .course-card__price {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 18px;
    text-align: right;
  }

  .course-card__tax {
    font-size: 12px;
  }

  .course-note {
    grid-template-columns: 1fr 24vw;
    gap: 4vw;
  }

  .prepaid-card {
    display: block;
  }
  .prepaid-card span:first-child {
    display: block;
  }

  .prepaid-card__leader {
    display: none;
  }
}