/* Object / Project：長いセクションを上部・下部の専用素材で挟む。 */
.p-curriculum,
.p-features,
.p-voice,
.p-overview,
.p-entry-area,
.p-flow {
  position: relative;
  isolation: isolate;
  --section-bg-top: none;
  --section-bg-bottom: none;
  --section-bg-opacity: .72;
}

.p-curriculum::before,
.p-curriculum::after,
.p-features::before,
.p-features::after,
.p-voice::before,
.p-voice::after,
.p-overview::before,
.p-entry-area::before,
.p-entry-area::after,
.p-flow::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: -1;
  /* 1586×992pxの比率を保ち、各帯を高さの45%以内にして重なりを防ぐ。 */
  height: min(45%, 62.55vw, 1000px);
  background-size: 100% auto;
  background-repeat: no-repeat;
  opacity: var(--section-bg-opacity);
  pointer-events: none;
}

.p-curriculum::before,
.p-features::before,
.p-voice::before,
.p-overview::before,
.p-entry-area::before {
  top: 0;
  background-image: var(--section-bg-top);
  background-position: center top;
  mask-image: linear-gradient(to bottom, #000 50%, transparent 100%);
}

.p-curriculum::after,
.p-features::after,
.p-voice::after,
.p-entry-area::after,
.p-flow::after {
  bottom: 0;
  background-image: var(--section-bg-bottom);
  background-position: center bottom;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 50%);
}

/* 内容・日程を比較する情報は、淡青の上下素材と既存の白い表を組み合わせる。 */
.p-curriculum {
  --section-bg-top: url("../img/bg-parts/bg_light-blue-up.png");
  --section-bg-bottom: url("../img/bg-parts/bg_light-blue-bottom.png");
}

/* 価値訴求は金の上下素材。6項目および企業・個人の成果は同列に扱う。 */
.p-features {
  --section-bg-top: url("../img/bg-parts/bg_gold-up.png");
  --section-bg-bottom: url("../img/bg-parts/bg_gold-bottom.png");
  --section-bg-opacity: .32;
}

/* 講座概要は特徴と同じ金の素材を上部だけに置き、下端は白い面を維持する。 */
.p-overview {
  --section-bg-top: url("../img/bg-parts/bg_gold-up.png");
  --section-bg-opacity: .32;
}

/* 学び・交流を語る声とアンケートに、KVと呼応する人物シルエットを使う。 */
.p-voice {
  --section-bg-top: url("../img/bg-parts/bg_people-up.png");
  --section-bg-bottom: url("../img/bg-parts/bg_people-bottom.png");
  --section-bg-opacity: .38;
}

/* 特徴の英字ラベルは白い面で保護する。受講者の声は指定により背景なし。 */
.p-features .c-section-heading > .c-label {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .96);
}

.p-curriculum__hint {
  padding: 8px 12px;
  background: rgba(255, 255, 255, .96);
}

/* ENTRYとフッターの全幅エリアに、水色の上下素材を重ねる。 */
.p-entry-area {
  --section-bg-top: url("../img/bg-parts/bg_light-blue-up.png");
  --section-bg-bottom: url("../img/bg-parts/bg_light-blue-bottom.png");
  background-color: var(--color-pale);
  background-image: none;
}

/* 受講までの流れは白地を保ち、下部だけに特徴と同じ金色素材を置く。 */
.p-flow {
  --section-bg-bottom: url("../img/bg-parts/bg_gold-bottom.png");
  --section-bg-opacity: .32;
}

/* SPでも全幅に縮小し、人物の並びや両端の装飾を切らずに見せる。 */
@media (max-width: 768px) {
  .p-curriculum { --section-bg-opacity: .64; }
  .p-features { --section-bg-opacity: .24; }
  .p-overview { --section-bg-opacity: .24; }
  .p-voice { --section-bg-opacity: .30; }
  .p-entry-area { --section-bg-opacity: .64; }
  .p-flow { --section-bg-opacity: .24; }
}