/* 中学部だけに適用。終了後は原寸・原位置。内容、寸法、色の定義は既存側を使用。 */
[data-ethos-motion="junior"] .hero-banner__text {
  animation:none; opacity:1; transform:translateY(0);
}
@media (prefers-reduced-motion:no-preference) {
  [data-ethos-motion="junior"] .hero-banner__bg {
    animation:junior-photo-arrive 1750ms cubic-bezier(.18,.75,.2,1) both;
  }
  [data-ethos-motion="junior"] .hero-banner__eyebrow {
    animation:junior-label-arrive 780ms cubic-bezier(.16,1,.3,1) both;
  }
  [data-ethos-motion="junior"] .hero-banner__title {
    animation:junior-copy-arrive 1050ms cubic-bezier(.16,1,.3,1) both;
  }
  [data-ethos-motion="junior"] .hero-banner__title-accent {
    animation:junior-band-arrive 1050ms cubic-bezier(.2,.85,.18,1) 100ms both;
  }
  [data-ethos-motion="junior"] .hero-banner__title-accent + br + .hero-banner__title-accent,
  [data-ethos-motion="junior"] .hero-banner__title-accent:nth-of-type(2) {
    animation-delay:220ms;
  }
  [data-ethos-motion="junior"] .hero-banner__meta {
    animation:junior-meta-arrive 1100ms cubic-bezier(.16,1,.3,1) 180ms both;
  }
}
@keyframes junior-photo-arrive {
  from { transform:scale(1.075); }
  to { transform:none; }
}
@keyframes junior-label-arrive {
  from { transform:translateX(-26px); }
  to { transform:none; }
}
@keyframes junior-copy-arrive {
  from { transform:translateY(25px); }
  to { transform:none; }
}
@keyframes junior-band-arrive {
  from { transform:translateX(-38px) rotate(-1.2deg); }
  to { transform:none; }
}
@keyframes junior-meta-arrive {
  from { transform:translateY(12px); }
  to { transform:none; }
}
@media (max-width:768px) {
  @keyframes junior-photo-arrive { from { transform:scale(1.045); } to { transform:none; } }
  @keyframes junior-label-arrive { from { transform:translateX(14px); } to { transform:none; } }
  @keyframes junior-band-arrive { from { transform:translateY(4px) scale(.94); } to { transform:none; } }
}
/* Print/JS failure: the original information remains in the initial HTML. */
@media (prefers-reduced-motion:reduce), print {
  [data-ethos-motion="junior"] .hero-banner__bg,
  [data-ethos-motion="junior"] .hero-banner__eyebrow,
  [data-ethos-motion="junior"] .hero-banner__title,
  [data-ethos-motion="junior"] .hero-banner__title-accent,
  [data-ethos-motion="junior"] .hero-banner__meta,
  [data-ethos-motion="junior"] .hero-banner__scroll::after {
    animation:none!important; transform:none;
  }
  [data-ethos-motion="junior"] .faq-item__a,
  [data-ethos-motion="junior"] .faq-item__q svg,
  [data-ethos-motion="junior"] .sec-reason__bg { transition:none; }
}

/* 授業風景を添えた中学部の時間割。白いカードで表の可読性を保つ。 */
[data-ethos-motion="junior"] #timetable.section--timetable-photo {
  max-width:none; min-height:680px; padding:64px 60px;
  display:flex; align-items:center; justify-content:flex-end;
  overflow:hidden; isolation:isolate;
}
[data-ethos-motion="junior"] #timetable .timetable-scene {
  position:absolute; inset:0; z-index:-1; pointer-events:none;
}
[data-ethos-motion="junior"] #timetable .timetable-scene img {
  width:100%; height:100%; object-fit:cover; object-position:center 55%;
}
[data-ethos-motion="junior"] #timetable .timetable-panel {
  width:64%; max-width:780px; min-width:630px;
  padding:36px; background:rgba(255,255,255,.98); border-radius:16px;
  box-shadow:0 8px 32px rgba(35,26,21,.09);
}
[data-ethos-motion="junior"] #timetable .sec-head { margin-bottom:32px; }
[data-ethos-motion="junior"] #timetable .timetable { background:#fff; }
[data-ethos-motion="junior"] #timetable .timetable td { color:#626262; }
[data-ethos-motion="junior"] #timetable .timetable-legend { color:#626262; }
@media (max-width:1100px) and (min-width:769px) {
  [data-ethos-motion="junior"] #timetable.section--timetable-photo { padding:48px 28px; min-height:640px; }
  [data-ethos-motion="junior"] #timetable .timetable-panel { width:66%; min-width:570px; padding:28px; }
}
@media (max-width:768px) {
  [data-ethos-motion="junior"] #timetable.section--timetable-photo {
    display:block; min-height:0; padding:230px 16px 28px; background:var(--peach-light);
  }
  [data-ethos-motion="junior"] #timetable .timetable-scene { bottom:auto; height:330px; }
  [data-ethos-motion="junior"] #timetable .timetable-scene img { object-position:35% 48%; }
  [data-ethos-motion="junior"] #timetable .timetable-panel {
    width:100%; min-width:0; max-width:620px; margin:0 auto; padding:24px 18px;
    background:#fff; border-radius:12px;
  }
  [data-ethos-motion="junior"] #timetable .sec-head { margin-bottom:24px; }
  [data-ethos-motion="junior"] #timetable .table-scroll-hint { color:#626262; }
}
@media (max-width:480px) {
  [data-ethos-motion="junior"] #timetable.section--timetable-photo { padding:210px 14px 24px; }
  [data-ethos-motion="junior"] #timetable .timetable-scene { height:300px; }
  [data-ethos-motion="junior"] #timetable .timetable-panel { padding:24px 16px; }
}
@media print {
  [data-ethos-motion="junior"] #timetable.section--timetable-photo {
    display:block; min-height:0; padding:40px 60px; background:#fff;
  }
  [data-ethos-motion="junior"] #timetable .timetable-scene { display:none; }
  [data-ethos-motion="junior"] #timetable .timetable-panel {
    width:100%; min-width:0; max-width:none; padding:0; box-shadow:none;
  }
}

/* REASONと同じ、写真を画面に固定する時間割背景。
   写真の枠をクリップし、他のセクションへ背景が重ならないようにする。 */
@supports (clip-path: inset(0)) {
  @media screen and (prefers-reduced-motion: no-preference) {
    [data-ethos-motion="junior"] #timetable .timetable-scene {
      clip-path:inset(0);
    }
    [data-ethos-motion="junior"] #timetable .timetable-scene img {
      position:fixed; inset:0;
      width:100%; height:100%;
    }
    @media (max-width:768px) {
      [data-ethos-motion="junior"] #timetable .timetable-scene img {
        top:-320px; bottom:auto; height:calc(100% + 320px);
        object-position:25% 48%;
      }
    }
  }
}

/* 中学部のスマホ表示だけ：余白を増やした小さなカードと、教室が見える写真。 */
@media (max-width:768px) {
  [data-ethos-motion="junior"] #reason .reason__grid {
    width:calc(100% - 24px); max-width:360px; margin-inline:auto; gap:10px;
  }
  [data-ethos-motion="junior"] #reason details.reason__card {
    background:rgba(159,38,55,.78); border-radius:14px;
    box-shadow:0 5px 18px rgba(65,20,30,.14);
    backdrop-filter:blur(1px); -webkit-backdrop-filter:blur(1px);
  }
  [data-ethos-motion="junior"] #reason details.reason__card--core {
    background:rgba(255,248,246,.84);
  }
  [data-ethos-motion="junior"] #reason .reason__summary {
    grid-template-columns:minmax(0,1fr) 34px; min-height:88px; padding:14px 18px; gap:12px;
  }
  [data-ethos-motion="junior"] #reason .reason__main-title { font-size:1.08rem; }
  [data-ethos-motion="junior"] #reason .reason__eyebrow { font-size:.65rem; margin-bottom:4px; }
  [data-ethos-motion="junior"] #reason .reason__plus { width:34px; height:34px; flex-basis:34px; }
  [data-ethos-motion="junior"] #reason .reason__detail .reason__text { margin-inline:18px; }
  [data-ethos-motion="junior"] #timetable .timetable-panel {
    width:90%; max-width:540px; margin-inline:auto; padding:22px 16px;
    background:rgba(255,255,255,.86);
  }
  [data-ethos-motion="junior"] #timetable .timetable { background:rgba(255,255,255,.8); }
}
@supports (clip-path: inset(0)) {
  @media screen and (max-width:768px) and (prefers-reduced-motion:no-preference) {
    [data-ethos-motion="junior"] #timetable .timetable-scene img {
      top:56px; bottom:auto; height:clamp(260px,66.6667vw,520px);
      object-fit:cover; object-position:center 40%;
    }
  }
}

/* コースと実績：既存の授業写真の前に、読みやすい半透明の白いカードを置く。 */
[data-ethos-motion="junior"] .junior-course-scene {
  position:relative; isolation:isolate; overflow:hidden;
}
[data-ethos-motion="junior"] .junior-course-scene__bg {
  position:absolute; inset:0; z-index:-1; pointer-events:none;
}
[data-ethos-motion="junior"] .junior-course-scene__bg img {
  width:100%; height:100%; object-fit:cover; object-position:center 30%;
}
[data-ethos-motion="junior"] #course .course-card,
[data-ethos-motion="junior"] #numbers {
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
}
[data-ethos-motion="junior"] #numbers {
  border-radius:16px; box-shadow:0 8px 28px rgba(65,20,30,.06);
}
[data-ethos-motion="junior"] #course .sec-head {
  padding:20px 24px; border-radius:16px; background:rgba(255,255,255,.9);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
}
[data-ethos-motion="junior"] #course .sec-head__en { color:var(--junior-red); text-shadow:none; }
[data-ethos-motion="junior"] #course .sec-head__ja { text-shadow:none; }
[data-ethos-motion="junior"] #course .course-card__desc,
[data-ethos-motion="junior"] #course .course-card__note,
[data-ethos-motion="junior"] #course .sec-head__ja,
[data-ethos-motion="junior"] #numbers .sec-head__ja,
[data-ethos-motion="junior"] #numbers .stats-table__note {
  color:#5f5557;
}
@supports (clip-path:inset(0)) {
  @media screen and (prefers-reduced-motion:no-preference) {
    [data-ethos-motion="junior"] .junior-course-scene__bg { clip-path:inset(0); }
    [data-ethos-motion="junior"] .junior-course-scene__bg img {
      position:fixed; inset:0; width:100%; height:100%;
    }
  }
}
@media (max-width:768px) {
  [data-ethos-motion="junior"] #course .sec-head { padding:18px 16px; border-radius:12px; }
  [data-ethos-motion="junior"] #numbers { border-radius:12px; }
}
@media print {
  [data-ethos-motion="junior"] .junior-course-scene__bg { display:none; }
  [data-ethos-motion="junior"] #course .course-card,
  [data-ethos-motion="junior"] #course .sec-head,
  [data-ethos-motion="junior"] #numbers {
    background:#fff; backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none;
  }
}
