/* 中学部ヒーロー限定。色・写真・本文は現行ページの正本を使用。 */
.hero-banner.hero-banner--cover {
  height:clamp(670px, calc(100svh - 78px), 940px);
  min-height:0; max-height:none;
  background:var(--junior-red); isolation:isolate;
}
.hero-banner--cover .cover-masthead {
  position:absolute; z-index:5; top:22px; left:3.5%;
  width:52%; max-width:660px; pointer-events:none;
}
.hero-banner--cover .cover-masthead img {
  display:block; width:100%; height:auto; filter:brightness(0) invert(1);
}
.hero-banner--cover .cover-photo {
  position:absolute; z-index:0; top:160px; left:9%; right:5.5%; bottom:58px;
  display:block; overflow:hidden; background:#fff;
}
.hero-banner--cover .hero-banner__bg {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:68% center;
}
.hero-banner--cover .hero-banner__overlay { display:none; }
.hero-banner--cover .hero-banner__inner {
  position:static; height:auto; max-width:none; padding:0; margin:0;
}
.hero-banner--cover .hero-banner__text {
  display:contents; opacity:1; transform:none; animation:none;
}
.hero-banner--cover .hero-banner__eyebrow {
  position:absolute; z-index:4; top:36px; right:5.5%; left:auto;
  max-width:48%; padding:0; margin:0;
  font-size:13px; font-weight:600; line-height:1.6; letter-spacing:.12em;
  color:#fff; background:none; text-align:right;
}
.hero-banner--cover .hero-banner__schools {
  top:72px; right:5.5%; left:auto; max-width:44%;
  white-space:normal; text-align:right; font-size:13px;
  line-height:1.9; letter-spacing:.05em; text-shadow:none;
}
.hero-banner--cover .hero-banner__title {
  --cover-ink:var(--junior-red);
  position:absolute; z-index:3; left:12.5%; bottom:115px;
  width:52%; margin:0; color:var(--junior-red);
  font-size:clamp(31px,3.3vw,52px); font-weight:800;
  line-height:1.35; letter-spacing:-.025em; text-shadow:none;
}
.hero-banner--cover .cover-copy-line { display:block; }
.hero-banner--cover .hero-banner__title-accent {
  margin:0; padding:0; color:inherit; background:none;
  line-height:inherit; font-weight:inherit;
}
.hero-banner--cover .hero-banner__title-accent.cover-stat {
  display:block; margin:12px 0 13px -4px;
  font-family:var(--jost),var(--sans); font-size:clamp(90px,11.5vw,166px);
  line-height:.95; letter-spacing:-.045em; font-weight:600;
  color:transparent; -webkit-text-stroke:1.8px var(--junior-red);
}
.hero-banner--cover .cover-over {
  display:inline-block; margin-left:7px; font-family:var(--sans);
  font-size:.24em; font-weight:700; letter-spacing:0;
  color:var(--cover-ink); -webkit-text-stroke:0;
}
.hero-banner--cover .hero-banner__meta {
  position:absolute; z-index:4; left:9%; right:5.5%; bottom:19px;
  font-size:11px; color:#fff; text-shadow:none; letter-spacing:.12em;
}
.hero-banner--cover .cover-spine {
  position:absolute; top:214px; left:3.2%; z-index:3;
  writing-mode:vertical-rl; color:#fff; font-family:var(--jost);
  font-size:11px; font-weight:500; letter-spacing:.2em;
}
.hero-banner--cover .hero-banner__scroll {
  bottom:16px; right:2.1%; font-size:9px; text-shadow:none;
}
.hero-banner--cover .hero-banner__scroll::after { height:24px; }

@media (max-width:1100px) and (min-width:769px) {
  .hero-banner--cover .cover-masthead { top:26px; width:51%; }
  .hero-banner--cover .cover-photo { top:145px; }
  .hero-banner--cover .hero-banner__eyebrow { font-size:11px; }
  .hero-banner--cover .hero-banner__schools { top:62px; font-size:11px; max-width:42%; }
  .hero-banner--cover .hero-banner__title { left:12%; width:52%; font-size:34px; }
}

/* スマホ：ロゴ・コース名・学校名を順に並べ、幅が変わっても重ねない。 */
@media (max-width:768px) {
  .hero-banner.hero-banner--cover {
    height:max(660px,calc(100svh - 56px)); min-height:0; max-height:940px;
    display:grid; grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto auto minmax(0,1fr) auto;
    gap:10px; padding:14px 4.5% 10px 9%; box-sizing:border-box;
  }
  .hero-banner--cover .cover-masthead {
    position:relative; inset:auto; grid-row:1; width:100%; max-width:520px;
    margin:0 0 0 -4%;
  }
  .hero-banner--cover .hero-banner__inner { display:contents; }
  .hero-banner--cover .hero-banner__eyebrow {
    position:relative; inset:auto; grid-row:2; max-width:none;
    margin:0; font-size:10px; letter-spacing:.1em; text-align:left; line-height:1.5;
  }
  .hero-banner--cover .hero-banner__schools {
    position:relative; inset:auto; grid-row:3; max-width:none;
    margin:0; font-size:10px; letter-spacing:.015em; text-align:left; line-height:1.55;
  }
  .hero-banner--cover .cover-photo {
    position:relative; inset:auto; grid-row:4; width:100%; height:100%; min-height:0;
  }
  .hero-banner--cover .hero-banner__bg {
    top:-35%; left:-17.5%; width:135%; height:135%;
    object-position:67.5% center; max-width:none; max-height:none;
  }
  .hero-banner--cover .hero-banner__title {
    --cover-ink:#fff;
    left:14%; bottom:50px; width:77%; font-size:25px !important;
    line-height:1.35; color:#fff; letter-spacing:-.01em;
    text-shadow:0 1px 4px rgba(54,14,24,.85),0 0 1px rgba(54,14,24,.95);
  }
  .hero-banner--cover .cover-copy-line:first-child {
    display:table; padding:4px 8px; color:#872535;
    background:rgba(255,248,246,.92); text-shadow:none;
  }
  .hero-banner--cover .hero-banner__title-accent.cover-stat {
    margin:10px 0 10px -2px; font-size:clamp(76px,23vw,134px);
    font-weight:600; color:#fff; -webkit-text-stroke:.6px rgba(87,22,36,.6);
    text-shadow:0 1px 5px rgba(54,14,24,.6);
  }
  .hero-banner--cover .hero-banner__meta {
    position:relative; inset:auto; grid-row:5; margin:0;
    font-size:9px; line-height:1.55; letter-spacing:.035em; text-shadow:none;
  }
  .hero-banner--cover .hero-banner__meta-sep { margin:0 4px; }
  .hero-banner--cover .cover-spine { top:209px; left:2.1%; font-size:8px; letter-spacing:.14em; }
  .hero-banner--cover .hero-banner__scroll { display:none; }
}
@media (max-width:370px) {
  .hero-banner--cover .hero-banner__eyebrow,
  .hero-banner--cover .hero-banner__schools { font-size:9px; }
  .hero-banner--cover .hero-banner__title { font-size:23px !important; }
}
/* 小さいスマホにも顎より下の文字スペースを確保する。 */
@media (max-width:540px) {
  .hero-banner.hero-banner--cover { height:max(750px,calc(100vw + 375px),calc(100svh - 56px)); }
}
@media (prefers-reduced-motion:reduce),print {
  .hero-banner--cover .cover-masthead,
  .hero-banner--cover .hero-banner__bg,
  .hero-banner--cover .hero-banner__title-accent { animation:none!important; }
}