:root {
  --course-theme-mathematics: #216bda;
  --course-theme-english: #ee5456;
  --course-theme-physics-chemistry: #27935d;
  --course-theme-national-language: #e48225;
}

/* コースごとのテーマ設定 */
.course-theme {
  --course-theme-color: var(--course-theme-mathematics);
  --course-theme-color-rgb: 33, 107, 218;
  --course-theme-light: #bed6fb;
  --course-theme-light-rgb: 190, 214, 251;
}

.course-theme--mathematics {
  --course-theme-color: var(--course-theme-mathematics);
  --course-theme-color-rgb: 33, 107, 218;
  --course-theme-light: #bed6fb;
  --course-theme-light-rgb: 190, 214, 251;
}

.course-theme--english {
  --course-theme-color: var(--course-theme-english);
  --course-theme-color-rgb: 238, 84, 86;
  --course-theme-light: #ffccd2;
  --course-theme-light-rgb: 255, 204, 210;
}

.course-theme--physics-chemistry {
  --course-theme-color: var(--course-theme-physics-chemistry);
  --course-theme-color-rgb: 39, 147, 93;
  --course-theme-light: #b2e7ce;
  --course-theme-light-rgb: 178, 231, 206;
}

.course-theme--national-language {
  --course-theme-color: var(--course-theme-national-language);
  --course-theme-color-rgb: 228, 130, 37;
  --course-theme-light: #ffcca7;
  --course-theme-light-rgb: 255, 204, 167;
}

.course-theme .about-message__lead {
  color: var(--course-theme-color);
}

.course-theme .message__copy {
  font-size: 1rem;
  line-height: 2;
}

.course-theme .section--blue-noise {
  background-color: var(--course-theme-light);
}

.course-theme .course {
  background-color: var(--course-theme-light);
}

.course-theme .course--transparent {
  background-color: transparent;
  background-image: none;
}

.course-theme .page-title .section-heading {
  color: var(--page-blue);
}

.course-theme .message__image-wrap::after {
  background-image:
    linear-gradient(0deg, var(--course-theme-light) 56.73%, rgba(var(--course-theme-light-rgb), 0) 100%),
    url(/system_panel/uploads/images/20260812231129447475.svg);
  background-repeat: no-repeat, repeat;
  background-size: 100% 100%, 90rem 45.875rem;
  background-blend-mode: multiply;
}

.course-theme .section-gradient--transparent-blue-noise {
  background-image:
    linear-gradient(180deg, rgba(var(--course-theme-light-rgb), 0) 0%, var(--course-theme-light) 100%),
    url(/system_panel/uploads/images/20260812231129447475.svg);
  background-repeat: no-repeat, repeat;
  background-size: 100% 100%, 90rem 45.875rem;
  background-blend-mode: multiply;
}

.course-theme .section-gradient--blue-transparent-noise {
  background-image:
    linear-gradient(180deg, var(--course-theme-light) 0%, rgba(var(--course-theme-light-rgb), 0) 100%),
    url(/system_panel/uploads/images/20260812231129447475.svg);
  background-repeat: no-repeat, repeat;
  background-size: 100% 100%, 90rem 45.875rem;
  background-blend-mode: multiply;
}

.section--blue-noise {
    background-color: #bed6fb;
    background-image: url(/system_panel/uploads/images/20260812231129447475.svg);
}

.course-theme .section-heading {
  color: var(--course-theme-color);
}

.course-theme .feature-card__number {
  color: var(--course-theme-color);
}

.course-theme .feature-card {
  --feature-card-flip-color: var(--course-theme-color);
  --feature-card-flip-light: var(--course-theme-light);
}

.course-theme .feature-card__front {
  display: none;
}

@media (min-width: 768px) {
  /* 表紙と本文の両面が、中央を軸に回転するカードフリップ。 */
  .course-theme .feature-card[data-feature-card-flip-initialized="true"] {
    position: relative;
    overflow: visible;
    padding: 0;
    display: grid;
    height: auto;
    background: transparent;
    box-shadow: none;
    perspective: 60rem;
    height: 100%;
  }

  .course-theme .feature-card[data-feature-card-flip-initialized="true"] .feature-card__front,
  .course-theme .feature-card[data-feature-card-flip-initialized="true"] .feature-card__back {
    grid-area: 1 / 1;
    box-sizing: border-box;
    padding: 3rem 2.5rem;
    border-radius: inherit;
    backface-visibility: hidden;
    transform-origin: center center;
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.18s;
  }

  .course-theme .feature-card[data-feature-card-flip-initialized="true"] .feature-card__front {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--feature-card-flip-light);
    background-image:
      linear-gradient(rgba(var(--course-theme-color-rgb), 0.1), rgba(var(--course-theme-color-rgb), 0.1)),
      url("/system_panel/uploads/images/20260812231129447475.svg");
    background-repeat: no-repeat, repeat;
    background-size: 100% 100%, 90rem 45.875rem;
    background-blend-mode: multiply;
    pointer-events: none;
    transform: rotateY(0);
  }

  .course-theme .feature-card[data-feature-card-flip-initialized="true"] .feature-card__back {
    position: relative;
    z-index: 1;
    background-color: var(--page-white);
    transform: rotateY(180deg);
  }

  .course-theme .feature-card[data-feature-card-flip-initialized="true"] .feature-card__front .feature-card__number {
    margin-top: 0;
    color: #fff;
  }

  .course-theme .feature-card[data-feature-card-flip-initialized="true"] .feature-card__front .feature-card__title {
    margin-top: 1.5rem;
    border-bottom-color: transparent;
    color: #fff;
  }

  .course-theme .feature-card[data-feature-card-flip-initialized="true"]:hover .feature-card__front {
    transform: translateZ(1.25rem) rotateY(-180deg);
    transition-delay: 0s;
  }

  .course-theme .feature-card[data-feature-card-flip-initialized="true"]:hover .feature-card__back {
    transform: translateZ(1.25rem) rotateY(0);
    transition-delay: 0s;
  }
}

/* Smoooth管理画面では、カードの本文を常時表示して編集できるようにする。 */
.course-theme .feature-card[data-gjs-type],
.course-theme .feature-card:has([data-gjs-type]) {
  background-color: var(--page-white);
  background-image: none;
}

.course-theme .feature-card[data-gjs-type] .feature-card__number,
.course-theme .feature-card:has([data-gjs-type]) .feature-card__number {
  margin-top: 0;
  color: var(--feature-card-flip-color);
}

.course-theme .feature-card[data-gjs-type] .feature-card__title,
.course-theme .feature-card:has([data-gjs-type]) .feature-card__title {
  border-bottom-color: var(--feature-card-flip-color);
  color: var(--page-text);
}

.course-theme .feature-card[data-gjs-type] .feature-card__text,
.course-theme .feature-card[data-gjs-type] .feature-card__points,
.course-theme .feature-card:has([data-gjs-type]) .feature-card__text,
.course-theme .feature-card:has([data-gjs-type]) .feature-card__points {
  color: var(--page-text);
  opacity: 1;
  transform: none;
}

.course-theme .course-policy__title {
  color: var(--course-theme-color);
}

.course-theme .course-policy__heading::before {
  background-color: var(--course-theme-color);
}

.course-theme .course-curriculum__heading::before {
  background-color: var(--course-theme-color);
}

.course-theme .course-policy__qualification {
  border-color: var(--course-theme-color);
}

.course-theme .course-policy__text strong {
  text-decoration-color: rgba(var(--course-theme-color-rgb), 0.7);
}

.course-theme .flow--curriculum .flow__navigation-item.is-current .flow__navigation-number,
.course-theme .flow--curriculum .flow__navigation-item.is-complete .flow__navigation-number {
  background-color: var(--course-theme-color);
}

.course-theme .flow--curriculum .flow__navigation-number {
  border-color: var(--course-theme-color);
}

.course-theme .flow__navigation-item.is-complete + .flow__navigation-item::before {
  background-color: var(--course-theme-color);
}

.course-theme .flow-step__title {
  border-color: var(--course-theme-color);
  color: var(--course-theme-color);
}

.course-theme .flow-step--final .flow-step__title {
  background-color: var(--course-theme-color);
}

.course-theme .flow-step__title__fix {
  color: #fff;
  background-color: var(--course-theme-color);
}

.course-theme .course-curriculum-guide__lead {
  color: var(--course-theme-color);
}

.course-theme .course-curriculum-guide__title {
  border-bottom-color: var(--course-theme-color);
}

.course-theme .voice__heading {
  color: var(--course-theme-color);
}

.course-theme .voice-slider__pagination > *.is-active {
  background-color: var(--course-theme-color);
}