/* コース・料金（白い角丸のカードを2列に。下に時間割の表と体験の申し込みの帯） */
.price {
  position: relative;
  z-index: 0;
  padding: 40px 0;
}
@media (min-width: 960px) { .price { padding-top: 80px; } }
@media (min-width: 1920px) { .price { padding-top: 120px; } }

.price__en { top: 0; left: 0; right: 0; text-align: center; }
@media (min-width: 768px) { .price__en { left: auto; right: 50%; margin-right: -40px; text-align: left; } }
@media (min-width: 960px) { .price__en { top: 30px; right: auto; left: 50%; margin: 0 0 0 -83px; } }

/* 2列のカード */
.lesson {
  display: grid;
  gap: var(--sp-lg);
}
@media (min-width: 960px) { .lesson { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lesson__item {
  display: flex;
  flex-direction: column;
  border-radius: var(--sp-lg);
  background: var(--white);
  overflow: hidden;
}
.lesson__head {
  padding: var(--sp-lg) var(--sp-lg) 24px;
  background: var(--main-btn);
  color: var(--white);
}
.lesson__ttl {
  font-family: var(--f-maru);
  font-weight: 700;
  font-size: clamp(18px, 2.1875vw + 11px, 32px);
  line-height: 1.5;
  letter-spacing: 0.1em;
}
.lesson__sub {
  display: block;
  font-size: 16px;
  letter-spacing: 0.06em;
}
.lesson__note {
  margin-top: 8px;
  font-size: min(0.625vw + 12px, 16px);
}
@media (min-width: 960px) {
  .lesson__head { min-height: 156px; padding-bottom: 0; background: none; color: var(--main); }
  .lesson__sub { font-size: 24px; }
  .lesson__note { color: var(--main-ink); }
}
.lesson__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 24px var(--sp-lg) var(--sp-lg);
}
@media (min-width: 960px) { .lesson__body { padding-top: 22px; } }
.lesson__text {
  font-size: clamp(13px, 0.46875vw + 11.5px, 16px);
  line-height: 2;
}
.lesson__small {
  margin-top: 12px;
  color: var(--ink-sub);
  font-size: 13px;
  line-height: 1.6;
}
.lesson__small--line {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  color: var(--ink);
  font-size: clamp(13px, 0.46875vw + 11.5px, 16px);
}
.lesson__body > :nth-last-child(2) { margin-bottom: 24px; }
.lesson__btn { margin-top: auto; }
@media (max-width: 959px) {
  .lesson__btn { min-height: 48px; padding-left: 0; padding-right: 44px; background: none; color: var(--ink); font-size: 15px; letter-spacing: 0.02em; }
  .lesson__btn svg { color: var(--main); }
}

/* 入会金などの面 */
.summary { margin-top: 16px; }
@media (min-width: 960px) { .summary { margin-top: 24px; } }
.summary__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--bg);
  font-size: 14px;
  line-height: 1.5;
}
.summary__item + .summary__item { margin-top: 8px; }
.summary__item dt { color: var(--main-ink); font-family: var(--f-maru); font-weight: 700; letter-spacing: 0.06em; }
.summary__item .num { font-size: 1.2em; }
@media (min-width: 960px) {
  .summary__item { padding: 16px; font-size: 18px; }
}

/* 月謝の表 */
.fee {
  width: 100%;
  margin-top: 12px;
  border-collapse: separate;
  border-spacing: 0 4px;
  table-layout: fixed;
}
.fee thead th,
.fee__corner {
  padding: 0 0 2px;
  color: var(--main-ink);
  font-family: var(--f-maru);
  font-weight: 700;
  font-size: 12px;
  text-align: center;
}
.fee tbody th {
  width: 40%;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--bg);
  color: var(--main-ink);
  font-family: var(--f-maru);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-align: left;
}
.fee tbody td {
  font-size: 14px;
  text-align: center;
}
.fee tbody td + td { border-left: 1px solid #f0f0f0; }
.fee tbody td .num { font-size: 1.2em; }
@media (min-width: 960px) {
  .fee tbody th { padding: 12px 16px; font-size: 18px; }
  .fee tbody td { font-size: 16px; }
}

/* 時間割 */
.schedule {
  margin-top: var(--sp-lg);
  padding: var(--sp-lg);
  border-radius: var(--sp-lg);
  background: var(--white);
}
.schedule__ttl {
  margin-bottom: 16px;
  color: var(--main);
  font-family: var(--f-maru);
  font-weight: 700;
  font-size: clamp(18px, 2.1875vw + 11px, 32px);
  line-height: 1.5;
  letter-spacing: 0.1em;
}
.schedule__cap {
  margin-bottom: 10px;
  font-size: 13px;
  line-height: 2;
}
@media (min-width: 960px) {
  .schedule__ttl { margin-bottom: 8px; }
  .schedule__cap { margin-bottom: 8px; font-size: 16px; }
}
.schedule__scroll { overflow-x: auto; }
.table { width: 100%; min-width: 560px; }
.table thead th,
.table thead td {
  min-width: 48px;
  padding: 8px;
  background: var(--bg);
  color: var(--main-ink);
  font-family: var(--f-maru);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}
.table thead :not(:first-child) { border-left: 1px solid var(--rule); }
.table thead :first-child { border-radius: 8px 0 0 8px; }
.table thead :last-child { border-radius: 0 8px 8px 0; }
.table tbody th {
  width: 217px;
  min-width: 157px;
  padding: 12px;
  border-bottom: 1px solid var(--rule);
  font-weight: 400;
  font-size: clamp(12px, 0.625vw + 10px, 16px);
  line-height: 1.5;
  text-align: left;
}
.table tbody td {
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  text-align: center;
  vertical-align: middle;
}
.on {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--main);
  border-radius: 50%;
  font-size: 0;
  vertical-align: middle;
}
@media (min-width: 960px) {
  .table thead th, .table thead td { padding: 2px 8px; font-size: 16px; line-height: 2; }
  .table tbody th { padding: 6px 12px; line-height: 2; }
}

/* 2つのボタン */
.price__btns {
  display: grid;
  gap: 16px;
  margin-top: var(--sp-lg);
}
@media (min-width: 640px) {
  .price__btns { display: flex; justify-content: center; gap: 24px; }
  .price__btns .btn { width: 320px; }
}
@media (max-width: 639px) {
  .price__btns .btn { width: 100%; max-width: 280px; margin: 0 auto; }
}

/* 体験の申し込みの帯（白い角丸の箱） */
.cta {
  max-width: 828px;
  margin: var(--sp-lg) auto 0;
  padding: var(--sp-md) var(--sp-lg) var(--sp-lg);
  border-radius: var(--sp-lg);
  background: var(--white);
}
.cta__ttl {
  color: var(--main);
  font-family: var(--f-maru);
  font-weight: 700;
  font-size: clamp(18px, 0.9375vw + 15px, 24px);
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-align: center;
}
.cta__text {
  margin-top: 8px;
  color: var(--ink-sub);
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}
.cta__btns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  margin-top: 16px;
}
.cta__btns .btn { flex: 1 1 100%; }
@media (min-width: 640px) {
  .cta__btns .btn { flex: 1 1 calc(50% - var(--sp-sm)); }
}
@media (min-width: 960px) {
  .cta { padding: 24px 40px 32px; }
  .cta__ttl, .cta__text { text-align: left; }
  .cta__text { margin-top: 2px; font-size: 14px; }
  .cta__btns .btn { font-size: 15px; }
}

.cta__ttl-pc { display: none; }
@media (min-width: 960px) { .cta__ttl-pc { display: inline; } }
@media (max-width: 639px) { .btn--tel .num, .btn--white .num { display: block; } }
