@charset "utf-8";

/* コース共通コンポーネントの最小基盤 */
:root {
  --course-color-text: #292929;
  --course-color-primary: #0096bd;
  --course-color-accent: #23bee6;
  --course-color-background: #e0f2f7;
  --course-color-highlight: #ed5584;
  --course-color-surface: #fff;
}

.l-course-inner {
  width: 100%;
  max-width: calc(1200px + 30px * 2);
  margin-inline: auto;
  padding-inline: 30px;
}

.l-course-inner--narrow {
  max-width: calc(900px + 30px * 2);
}

.l-course-section {
  padding-top: 80px;
  padding-bottom: 80px;
}

.c-course-section-title {
  position: relative;
  display: inline-block;
  color: var(--course-color-text);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
}

.c-course-section-title--decorated::before,
.c-course-section-title--decorated::after {
  position: absolute;
  bottom: -12px;
  width: 4.5px;
  height: 81px;
  background: url(../../images/elementary-school/elementary-school-blue-line.webp) no-repeat center / contain;
  content: "";
}

.c-course-section-title--decorated::before {
  left: -60px;
  rotate: -40deg;
}

.c-course-section-title--decorated::after {
  right: -60px;
  rotate: 40deg;
}

@media (max-width: 767px) {
  .l-course-inner {
    max-width: 600px;
    padding-inline: 15px;
  }

  .l-course-section {
    padding-top: 40px;
    padding-bottom: 60px;
  }

  .c-course-section-title {
    font-size: 22px;
  }

  .c-course-section-title--decorated::before,
  .c-course-section-title--decorated::after {
    bottom: -5px;
    width: 4px;
    height: 35px;
    background-image: url(../../images/elementary-school/elementary-school-blue-line_sp.webp);
  }

  .c-course-section-title--decorated::before {
    left: -20px;
  }

  .c-course-section-title--decorated::after {
    right: -20px;
  }
}