/* ==========================================
 Layout
============================================*/
/* ==========================================
 Contents
============================================*/
.course {
  padding-block: var(--sz-53);
  --color-orange: #ff8e61;
  --color-water: #00b5f4;
  --color-red: #e14f89;
  --color-pink: #f870ff;
}

.course__box {
  background-color: #fff;
  padding: var(--sz-20) var(--sz-10);
}

.course__heading {
  font-size: var(--sz-48);
  font-style: normal;
  font-weight: 700;
  line-height: 1.33; /* 66.667% */
  margin-bottom: var(--sz-20);
  padding-inline: var(--sz-15);
}

.course__lead {
  padding: var(--sz-17) var(--sz-23);
  font-size: var(--sz-32);
  font-style: normal;
  font-weight: 400;
  line-height: 1.56;
  border-color: #95afdb;
  border-style: solid;
  border-block-width: 1px;
  border-inline-width: 0;
  position: relative;
  margin-bottom: var(--sz-50);
}
.course__lead::before {
  content: "";
  aspect-ratio: 181/252;
  width: var(--sz-181);
  background: url(../images/pic-girl.webp) no-repeat top left/contain;
  position: absolute;
  bottom: -1px;
  right: 0;
}

.course__list {
  display: flex;
  flex-direction: column;
  /* gap: var(--sz-28); */
}

.course__item {
  --toggler-scale: 1 1;
}
.course__item--economy {
  --color-key: #78b9df;
  --color-half-key: #aed5ec;
  --banner-url: url("../images/bg-economy@2x.webp");
}
.course__item--standard {
  --color-key: #8b9ce1;
  --color-half-key: #bdc8ee;
  --banner-url: url("../images/bg-standard@2x.webp");
}
.course__item--storage {
  --color-key: #5cc25e;
  --color-half-key: #b4deb4;
  --banner-url: url("../images/bg-storage@2x.webp");
}
.course__item--pink {
  --color-key: #ffb3c6;
  --color-half-key: #f8c0d0;
  --banner-url: url("../images/bg-pink@2x.webp");
}

.course__head {
  margin-bottom: var(--sz-37);
}

.course__banner {
  color: #fff;
  background: #eee var(--banner-url) no-repeat top left/cover;
  padding: var(--sz-12) var(--sz-28) var(--sz-10);
  position: relative;
  margin-bottom: var(--sz-17);
}

.course__subtitle {
  font-size: var(--sz-30);
  font-style: normal;
  font-weight: 400;
  line-height: 1.33;
  padding-bottom: 0.3em;
  border-bottom: var(--sz-2) solid;
  width: -moz-fit-content;
  width: fit-content;
  margin-bottom: var(--sz-25);
  position: relative;
}

.course__subtitle--number1::before {
  content: "";
  background: url(../images/pic-number1.webp) no-repeat top left/contain;
  aspect-ratio: 76/75;
  width: var(--sz-76);
  display: block;
  position: absolute;
  top: 0;
  left: calc(100% + var(--sz-17));
}

.course__name {
  font-size: var(--sz-60);
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  margin-bottom: var(--sz-20);
}

.course__note {
  font-size: var(--sz-24);
  font-style: normal;
  font-weight: 400;
  line-height: 1.66;
}

.course__desc {
  padding-inline: var(--sz-20);
  font-size: var(--sz-28);
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  --mb-p: 0;
}
.course__desc::after {
  display: block;
  clear: both;
  content: "";
}

.course__content {
  display: none;
}

.course__collection {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sz-20) var(--sz-17);
  margin-bottom: var(--sz-70);
}

.course__collection-item {
  background-color: var(--color-key);
  border: var(--sz-3) solid var(--color-key);
  border-radius: var(--sz-10);
  text-decoration: none;
  color: inherit;
}
.course__collection-item:not([href]) {
  --color-key: var(--color-half-key);
}

.course__collection-head {
  color: #fff;
  padding: var(--sz-23) var(--sz-10) var(--sz-10);
  text-align: center;
  font-size: var(--sz-40);
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--sz-10);
}
.course__collection-head > span {
  font-size: 50%;
  font-style: normal;
  font-weight: 400;
  line-height: inherit;
}

.course__collection-desc {
  font-size: var(--sz-20);
  font-style: normal;
  font-weight: 400;
  line-height: 2; /* 200% */
  text-align: center;
  padding: var(--sz-3);
  background-color: #fff;
  border-radius: 0 0 var(--sz-6) var(--sz-6);
}

@media screen and (min-width: 992px) {
  .course {
    padding-block: var(--sz-36);
  }
  .course__box {
    padding: var(--sz-50) var(--sz-30);
  }
  .course__heading {
    width: 80%;
    font-size: var(--sz-48);
    padding-left: var(--sz-180);
    margin-bottom: var(--sz-30);
  }
  .course__lead {
    padding: var(--sz-42) var(--sz-30);
    font-size: var(--sz-30);
    width: var(--sz-852);
    margin-inline: auto;
    margin-bottom: var(--sz-30);
  }
  .course__lead::before {
    width: var(--sz-181);
    right: calc(-1 * var(--sz-20));
    z-index: 1;
  }
  .course__lead::after {
    content: "";
    width: var(--sz-180);
    height: var(--sz-10);
    background-color: #fff;
    display: block;
    position: absolute;
    top: -5px;
    right: 0;
    z-index: 0;
  }
  .course__item--economy {
    --banner-url: url(../images/bg-economy.webp);
  }
  .course__item--standard {
    --banner-url: url(../images/bg-standard.webp);
  }
  .course__item--storage {
    --banner-url: url(../images/bg-storage.webp);
  }
  .course__item--pink {
    --banner-url: url(../images/bg-pink.webp);
  }
  .course__head {
    margin-bottom: var(--sz-27);
  }
  .course__banner {
    padding: var(--sz-12) var(--sz-55) var(--sz-12);
    margin-bottom: var(--sz-20);
  }
  .course__subtitle {
    margin-bottom: var(--sz-25);
  }
  .course__name {
    margin-bottom: var(--sz-15);
  }
  .course__desc {
    padding-inline: var(--sz-30);
    font-size: var(--sz-26);
    line-height: 1.53;
  }
  .course__collection {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sz-10) var(--sz-10);
    margin-bottom: var(--sz-55);
  }
  .course__collection-head {
    padding: var(--sz-12) var(--sz-8) var(--sz-8);
    font-size: var(--sz-28);
    gap: var(--sz-8);
  }
  .course__collection-head > span {
    font-size: 58%;
  }
  .course__collection-desc {
    font-size: var(--sz-14);
  }
}