.pg-band--photo { --band-photo: url("../img/banner/intro.webp"); --photo-align: 53%; }
.pg-band--photo[data-topic="guide"] { --band-photo: url("../img/banner/guide.webp"); --photo-align: 42%; }
.pg-band--photo[data-topic="schedule"] { --band-photo: url("../img/banner/schedule.webp"); --photo-align: 38%; }
.pg-band--photo[data-topic="cert"] { --band-photo: url("../img/banner/cert.webp"); --photo-align: 52%; }
.pg-band--photo[data-topic="help"] { --band-photo: url("../img/banner/help.webp"); --photo-align: 28%; }
.pg-band--photo[data-topic="mypage"] { --band-photo: url("../img/banner/mypage.webp"); --photo-align: 37%; }

html .theme-edu .pg-band.pg-band--photo {
  background: #173e5d;
  color: white;
  border-bottom: 1px solid #355e79;
}
.pg-band__photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(110deg, #14334f, #255b7e);
}
.pg-band__photo::before, .pg-band__photo::after { content: ""; position: absolute; inset: 0; }
.pg-band__photo::before {
  left: max(8%, calc(50% - 450px));
  background: var(--band-photo) 77% var(--photo-align) / cover no-repeat;
  opacity: .88;
}
.pg-band__photo::after {
  background: radial-gradient(ellipse 30% 130% at 70% 100%, rgba(95,174,202,.10), transparent),
              linear-gradient(90deg, #14344f 3%, rgba(20,52,79,.98) 20%, rgba(21,57,85,.91) 36%, rgba(23,60,91,.48) 58%, rgba(18,53,82,.16) 79%, rgba(14,44,65,.25));
}
.theme-edu .pg-band--photo .pg-band__inner { z-index: 1; }
.theme-edu .pg-band--photo .pg-band__inner h1,
.theme-edu .pg-band--photo .breadcrumb [aria-current="page"],
.theme-edu .pg-band--photo .pg-band__lead strong { color: #fff; }
.theme-edu .pg-band--photo .pg-band__inner .breadcrumb,
.theme-edu .pg-band--photo .pg-band__inner .breadcrumb a,
.theme-edu .pg-band--photo .pg-band__inner .pg-band__lead { color: #edf5fc; }
.theme-edu .pg-band--photo .breadcrumb li::before { color: #cfdfed; }
.theme-edu .pg-band--photo :focus-visible { outline-color: #ffd98e; }
@media (max-width: 767px) {
  .pg-band__photo::before { left: 12%; background-position-x: 79%; }
  .pg-band__photo::after { background: linear-gradient(90deg, #14344f 3%, rgba(19,52,80,.93) 32%, rgba(21,52,78,.77) 57%, rgba(14,44,68,.40)); }
  .pg-band--photo .pg-band__inner { text-shadow: 0 1px 3px rgba(4,24,40,.42); }
}
@media (prefers-reduced-motion: no-preference) {
  .pg-band__photo::before {
    mask-image: radial-gradient(ellipse farthest-corner at 75% 50%, #000 max(0%, calc(var(--edu-band-reveal) - 20%)), transparent var(--edu-band-reveal));
    animation: band-photo-reveal .95s ease-out both;
  }
  .pg-band__photo { animation: band-photo-glow 5s ease-in-out infinite alternate; }
  @keyframes band-photo-glow { to { filter: brightness(1.035); } }
  @keyframes band-photo-reveal {
    from { opacity: .2; --edu-band-reveal: 12%; }
    to { opacity: .88; --edu-band-reveal: 125%; }
  }
}
@media print, (forced-colors: active) {
  .pg-band__photo { display: none; }
  html .theme-edu .pg-band.pg-band--photo { background: Canvas; color: CanvasText; border-color: CanvasText; }
  .theme-edu .pg-band--photo .pg-band__inner :is(h1, strong, .pg-band__lead, .breadcrumb, a, [aria-current]) { color: CanvasText; text-shadow: none; }
}