/**
 * 中学校TOP専用スタイル（juniors/index.php）。
 * 共通の文字・ボタン・活動報告は koka-home.css、ヘッダー等は koka-chrome.css を利用。
 * 基本設定 → メイン写真 → 進路図 → 補足・コース → 活動報告 → レスポンシブの順。
 * PCの進路図は1196pxを基準とし、小さい画面では図だけを横スクロールさせる。
 */
.koka-junior-page {
  --koka-header-height: 130px;
  --junior-bottom-menu-height: 0px;
  min-width: 0;
  margin: 0;
  background: #fff;
}

.koka-junior {
  --junior-yellow: #ffd900;
  --junior-orange: #f39632;
  --junior-teal: #00abc0;
  font-weight: 400;
}

.koka-junior h4,
.koka-junior ol,
.koka-junior figure {
  margin: 0;
  padding: 0;
}

.koka-junior ol {
  list-style: none;
}

/* メインビジュアル：ヘッダーを除くブラウザ高に合わせ、文字・9枚の写真も高さに追従。 */
.koka-junior-hero {
  position: relative;
  height: calc(100vh - var(--koka-header-height) - var(--junior-bottom-menu-height));
  height: calc(100svh - var(--koka-header-height) - var(--junior-bottom-menu-height));
  min-height: 0;
  container-type: size;
  background: var(--junior-yellow);
  isolation: isolate;
}

.koka-junior-hero__copy {
  position: absolute;
  z-index: 1;
  top: 18.5145%;
  left: 3.5%;
  color: #fff;
}

.koka-junior-hero__copy h1 {
  font-size: clamp(64px, min(14.8cqw, 25.5cqh), 300px);
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 0.92155;
}

/* 行ごとに動かしても、文字サイズ・2行の高さ・写真との重なりは維持する。 */
.koka-junior-hero__title,
.koka-junior-hero__title-line {
  display: block;
}

.koka-junior-hero__copy > p {
  margin-top: min(2.071429cqw, 3.121636cqh);
  padding-left: min(0.571429cqw, 0.861141cqh);
  font-size: clamp(20px, min(7cqw, 10cqh), 128px);
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 0.98266;
  white-space: nowrap;
}

/* 写真全体の高さはPC・スマートフォンともにメインビジュアルの92％。 */
.koka-junior-hero__photos {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  width: 57.428571%;
  height: 92%;
}

.koka-junior-hero__tile {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.koka-junior-hero__tile > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Figmaのトリミングを基準に、縦長・横長の枠でも人物の顔を見せる。 */
.koka-junior-hero__tile--hero-01 > img {
  object-position: center 30%;
}

.koka-junior-hero__tile--hero-02 > img {
  object-position: 11% center;
}

.koka-junior-hero__tile--hero-03 > img {
  object-position: 20% center;
}

.koka-junior-hero__tile--hero-04 > img {
  position: absolute;
  top: -10.38%;
  left: -18%;
  width: 174.05%;
  max-width: none;
  height: 116.01%;
}

.koka-junior-hero__tile--hero-06 > img {
  object-position: 39% center;
}

.koka-junior-hero__tile--hero-08 > img {
  object-position: 9.5% center;
}

.koka-junior-hero__tile--hero-09 > img {
  object-position: right center;
}

/* 丸いイベントは写真の下端に重ね、画面下の固定メニューから離す。 */
.koka-junior-hero__event {
  position: absolute;
  z-index: 2;
  right: 11.142857%;
  bottom: 3%;
}

/* イベント丸の学校色：中学校は総合TOPと同じブルー。 */
.koka-junior .koka-junior-event {
  background-image: url('/img/index/event-junior.svg?ver=20261030-white-room'), url('/img/index/event-junior-base.svg?ver=20261013-colors');
}

.koka-junior-event .koka-event__title {
  font-size: 15px;
}

.koka-junior-event__guide {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #003b93;
  font-size: 13px;
  font-weight: 700;
}

.koka-junior-event__guide > span {
  display: inline-block;
  transition: transform 0.25s ease;
}

.koka-junior-event--guide:is(:hover, :focus-visible) .koka-junior-event__guide > span {
  transform: translateX(3px);
}

/* 教育紹介：PCでは見出しと本文を並べる。本文は管理しやすい通常のテキスト。 */
.koka-junior-education {
  padding: 120px 0 0;
}

.koka-junior-education__intro {
  display: grid;
  grid-template-columns: 510px minmax(0, 1fr);
  align-items: center;
  gap: 60px;
}

.koka-junior-education__intro h2 {
  font-size: 64px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.koka-junior-education__catch {
  margin-top: 23px !important;
  font-size: 32px;
  letter-spacing: 0.05em;
  line-height: 2.2;
  white-space: nowrap;
}

.koka-junior-education__lead {
  font-size: 16px;
  letter-spacing: 0.05em;
  line-height: 1.875;
}

/* 進路図：学校・学年、成長段階、コース、進路の順に読み進める。 */
.koka-junior-chart-hint {
  display: none;
}

.koka-junior-chart-scroll {
  margin-top: 80px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-color: #9b9b9b #f2f2f2;
  scrollbar-width: thin;
}

/* 常時表示する横スクロールバー。標準バーとの二重表示はJSの準備後にだけ避ける。 */
.koka-junior-chart-scroll.has-scrollbar {
  scrollbar-width: none;
}

.koka-junior-chart-scroll.has-scrollbar::-webkit-scrollbar {
  display: none;
}

.koka-junior-chart-scrollbar {
  margin-top: 4px;
}

.koka-junior-chart-scrollbar input {
  display: block;
  width: 100%;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: ew-resize;
  touch-action: pan-y;
}

.koka-junior-chart-scrollbar input::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: #e5e8ec;
}

.koka-junior-chart-scrollbar input::-webkit-slider-thumb {
  width: var(--junior-scroll-thumb, 36px);
  height: 6px;
  border: 0;
  border-radius: 3px;
  -webkit-appearance: none;
  background: #8592a3;
}

.koka-junior-chart-scrollbar input::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: #e5e8ec;
}

.koka-junior-chart-scrollbar input::-moz-range-thumb {
  width: var(--junior-scroll-thumb, 36px);
  height: 6px;
  border: 0;
  border-radius: 3px;
  background: #8592a3;
}

.koka-junior-chart-scrollbar input:focus-visible {
  outline: 2px solid var(--home-blue);
  outline-offset: 2px;
  border-radius: 4px;
}

.koka-junior-chart {
  width: 1196px;
  margin: 0 auto;
  padding-bottom: 8px;
}

.koka-junior-chart__schools {
  display: grid;
  grid-template-columns: 470px 471px;
  gap: 16px;
}

.koka-junior-chart__schools > div {
  --school-color: var(--junior-teal);
}

.koka-junior-chart__schools > div + div {
  --school-color: var(--junior-orange);
}

.koka-junior-chart__schools h3 {
  display: grid;
  height: 54px;
  place-items: center;
  background: var(--school-color);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.15em;
  line-height: 1.5;
}

.koka-junior-chart__schools ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}

.koka-junior-chart__schools li {
  display: grid;
  height: 42px;
  place-items: center;
  border: 1px solid var(--school-color);
  font-size: 16px;
  font-weight: 500;
}

.koka-junior-chart__phases {
  display: grid;
  grid-template-columns: 308px 308px 355px 225px;
  height: 61px;
  margin-top: 11px !important;
}

.koka-junior-chart__phases > li {
  position: relative;
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.05em;
}

/* 左側の矢印を手前に置き、次の段階と重なる先端を隠さない。 */
.koka-junior-chart__phases > li:nth-child(1) {
  z-index: 3;
}

.koka-junior-chart__phases > li:nth-child(2) {
  z-index: 2;
}

.koka-junior-chart__phases > li:nth-child(3) {
  z-index: 1;
}

/* 書き出しSVGには白い縁の分が含まれるため、原寸を保って縁だけ3px外側に置く。 */
.koka-junior-chart__phases img {
  position: absolute;
  top: -3px;
  left: -3px;
  max-width: none;
}

.koka-junior-chart__phases span {
  position: relative;
  z-index: 1;
}

.koka-junior-chart__body {
  display: grid;
  grid-template-columns: 470px 16px 39px 8px 424px 14px 225px;
  height: 553px;
  margin-top: 9px;
}

.koka-junior-chart__junior {
  display: grid;
  grid-column: 1;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.koka-junior-chart__junior-course {
  padding: 30px;
  border-radius: 20px 0 0 20px;
  background: var(--junior-orange);
  color: #fff;
}

.koka-junior-chart__junior-course--future {
  background: var(--junior-teal);
}

.koka-junior-chart__junior-course h4 {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
}

.koka-junior-chart__details {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 166px;
  align-items: center;
  gap: 10px;
  margin-top: 36px;
}

.koka-junior-chart__details ul {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.7;
}

.koka-junior-chart__details li {
  position: relative;
  padding-left: 0.8em;
}

.koka-junior-chart__details li::before {
  position: absolute;
  left: 0;
  content: '・';
}

.koka-junior-chart__details img {
  width: 166px;
  height: 135px;
  object-fit: cover;
}

.koka-junior-chart__selection {
  display: flex;
  grid-column: 3;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--junior-orange);
  color: var(--junior-orange);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-orientation: upright;
  writing-mode: vertical-rl;
}

.koka-junior-chart__senior,
.koka-junior-chart__paths {
  display: grid;
  grid-template-rows: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.koka-junior-chart__senior {
  grid-column: 5;
}

.koka-junior-chart__senior-course {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px 22px;
  background: var(--course-background);
}

.koka-junior-chart__senior-course h4 {
  color: var(--course-color);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.5;
}

.koka-junior-chart__senior-course > p {
  margin-top: 6px;
  font-size: 16px;
  line-height: 1.6;
}

.koka-junior-chart__paths {
  grid-column: 7;
}

.koka-junior-chart__path {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--course-color);
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
}

.koka-junior-chart__senior-course--premium,
.koka-junior-chart__path--premium {
  --course-background: #faecf4;
  --course-color: #f065b4;
}

.koka-junior-chart__senior-course--advanced,
.koka-junior-chart__path--advanced {
  --course-background: #faf4d3;
  --course-color: #f39632;
}

.koka-junior-chart__senior-course--future,
.koka-junior-chart__path--future {
  --course-background: #e0f2fb;
  --course-color: #005592;
}

.koka-junior-chart__senior-course--medical,
.koka-junior-chart__path--medical {
  --course-background: #e3f2eb;
  --course-color: #007988;
}

.koka-junior-chart__senior-course--international,
.koka-junior-chart__path--international {
  --course-background: #e6def3;
  --course-color: #465786;
}

.koka-junior-chart__note {
  margin-top: 20px !important;
  padding-left: 486px !important;
  font-size: 16px;
  line-height: 1.6;
}

/* 進路図の補足。赤い点は装飾として扱い、文章はリストで管理する。 */
.koka-junior-notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 108px;
  margin-top: 112px !important;
}

.koka-junior-notes > section {
  position: relative;
  padding: 24px 0;
}

.koka-junior-notes > section + section::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -58px;
  border-left: 1px solid #ccc;
  content: '';
}

.koka-junior-notes h2 {
  margin-bottom: 30px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.6;
}

.koka-junior-notes ul,
.koka-junior-notes p {
  font-size: 16px;
  line-height: 1.875;
}

.koka-junior-notes li {
  position: relative;
  padding-left: 24px;
}

.koka-junior-notes li::before {
  position: absolute;
  top: 11px;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e90000;
  content: '';
}

.koka-junior-notes p {
  padding-left: 24px;
}

/* コース紹介：本文は薄くせず、写真と矢印の動きでリンクを示す。 */
.koka-junior-courses {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  margin-top: 80px !important;
}

.koka-junior-course {
  display: flex;
  min-width: 0;
  flex-direction: column;
  background: #f49325;
  color: #fff !important;
}

.koka-junior-course--future {
  background: var(--junior-teal);
}

.koka-junior-course__photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 584 / 259;
}

.koka-junior-course__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.koka-junior-course--advanced .koka-junior-course__photo img {
  position: absolute;
  top: -29.04%;
  left: -4.64%;
  width: 104.64%;
  max-width: none;
  height: 158%;
}

.koka-junior-course--future .koka-junior-course__photo img {
  object-position: center 83.5%;
}

.koka-junior-course__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  min-height: 333px;
  padding: 22px 36px 36px;
}

.koka-junior-course__number {
  color: rgb(255 255 255 / 30%);
  font-size: 28.575px;
  font-weight: 700;
  letter-spacing: 0.15em;
  line-height: 44px;
}

.koka-junior-course__english {
  margin-top: 2px !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.15em;
  line-height: 1.5;
}

.koka-junior-course h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 3px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
}

.koka-junior-course h2 > span {
  display: grid;
  width: 75px;
  height: 30px;
  place-items: center;
  border-radius: 20px;
  background: #fff;
  color: #f49325;
  font-size: 16px;
  line-height: 1;
}

.koka-junior-course--future h2 > span {
  color: var(--junior-teal);
}

.koka-junior-course__description {
  width: 100%;
  margin-top: 22px !important;
  padding-top: 16px !important;
  border-top: 1px solid rgb(255 255 255 / 50%);
  font-size: 16px;
  line-height: 1.6;
}

.koka-junior-course__more {
  position: relative;
  display: grid;
  width: 220px;
  min-height: 55px;
  place-items: center;
  align-self: flex-end;
  margin-top: auto;
  border: 0;
  border-radius: 40px;
  background: #fff;
  color: #f49325;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.koka-junior-course--future .koka-junior-course__more {
  color: var(--junior-teal);
}

.koka-junior-course__description + .koka-junior-course__more {
  margin-top: 16px;
}

.koka-junior-course__more > span {
  position: absolute;
  top: 50%;
  right: 24px;
  font-size: 22px;
  line-height: 1;
  transform: translateY(-50%);
  transition: transform 0.25s ease;
}

@media (hover: hover) {
  .koka-junior-course:hover .koka-junior-course__photo img {
    transform: scale(1.035);
  }
}

.koka-junior-course:is(:hover, :focus-visible) .koka-junior-course__more > span {
  transform: translate(3px, -50%);
}

.koka-junior .koka-blog {
  padding-top: 167px;
}

/* スクロール演出：JSの準備完了時のみ適用し、各部を一度だけ表示する。 */
.koka-junior-page.is-junior-motion [data-junior-reveal] {
  opacity: 1;
  transform: none;
  transition:
    opacity 700ms ease var(--junior-reveal-delay, 0ms),
    transform 850ms cubic-bezier(0.22, 1, 0.36, 1) var(--junior-reveal-delay, 0ms);
}

.koka-junior-page.is-junior-motion [data-junior-reveal]:focus-within {
  transition: none;
}

.koka-junior-page.is-junior-motion [data-junior-reveal]:not(.is-junior-visible) {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
}

/* 小さいPC・タブレット：本文の列を調整し、図の文字サイズは維持する。 */
@media (max-width: 1399px) {
  .koka-junior .koka-home-container {
    width: calc(100% - 160px);
  }

  .koka-junior-education__intro {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 40px;
  }

  .koka-junior-education__intro h2 {
    font-size: clamp(38px, 4.571429vw, 64px);
  }

  .koka-junior-education__catch {
    font-size: clamp(20px, 2.285714vw, 32px);
  }

  .koka-junior-chart-hint {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 54px !important;
    color: #555;
    font-size: 13px;
  }

  .koka-junior-chart-scroll {
    margin-top: 12px;
  }

  .koka-junior-notes {
    gap: 64px;
  }

  .koka-junior-notes > section + section::before {
    left: -32px;
  }

  .koka-junior-course__body {
    padding-right: 24px;
    padding-left: 24px;
  }

  .koka-junior-course h2 {
    font-size: clamp(20px, 2vw, 28px);
  }

  .koka-junior .koka-blog__content {
    margin-right: -80px;
  }

  .koka-junior .koka-blog__controls {
    padding-right: 80px;
  }
}

@media (max-width: 1023px) {
  .koka-junior-page {
    --koka-header-height: 65px;
    --junior-bottom-menu-height: calc(60px + env(safe-area-inset-bottom, 0px));
  }

  .koka-junior .koka-home-container {
    width: calc(100% - 64px);
  }

  .koka-junior-hero__event {
    right: 8%;
  }

  .koka-junior-education {
    padding-top: 80px;
  }

  .koka-junior-education__intro {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .koka-junior-education__intro h2 {
    font-size: 46px;
  }

  .koka-junior-education__catch {
    margin-top: 16px !important;
    font-size: 27px;
    line-height: 1.6;
  }

  .koka-junior-notes {
    gap: 48px;
    margin-top: 72px !important;
  }

  .koka-junior-notes > section + section::before {
    left: -24px;
  }

  .koka-junior-courses {
    gap: 24px;
    margin-top: 64px !important;
  }

  .koka-junior-course h2 {
    font-size: 20px;
  }

  .koka-junior .koka-blog {
    padding-top: 100px;
  }

  .koka-junior .koka-blog__content {
    margin-right: -32px;
  }

  .koka-junior .koka-blog__controls {
    padding-right: 32px;
  }
}

/* スマートフォン：左に文字、右に2列×4段の写真。本文と図は画面幅に合わせる。 */
@media (max-width: 767px) {
  .koka-junior .koka-home-container {
    width: calc(100% - 40px);
  }

  .koka-junior-hero__copy {
    top: 20%;
  }

  .koka-junior-hero__copy h1 {
    font-size: clamp(44px, min(20.5cqw, 29cqh), 128px);
    line-height: 0.98;
  }

  .koka-junior-hero__copy > p {
    margin-top: min(4.1cqw, 4cqh);
    padding: 0 0 0 3px;
    font-size: clamp(22px, min(8.2cqw, 8cqh), 52px);
    line-height: 1.1;
  }

  /* HIGH SCHOOLはPCで1行、SPではSCHOOLを別行にして3行の大きなコピーにする。 */
  .koka-junior-hero__school {
    display: block;
  }

  .koka-junior-hero__photos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
    width: 52%;
  }

  /* 白いメイン文字が重なるSP写真だけ、色味を保って少し暗くする。 */
  .koka-junior-hero__tile > img {
    filter: brightness(0.88);
  }

  /* PCの3列目にある2枚はSPの最下段へ。元の6枚の並びを維持する。 */
  .koka-junior-hero__tile--sp-last-row {
    order: 1;
  }

  .koka-junior-hero__tile--pc-only {
    display: none;
  }

  .koka-junior-hero__event {
    right: 20px;
  }

  .koka-junior .koka-junior-event {
    width: 144px;
    height: 144px;
    padding: 15px 12px 11px;
  }

  .koka-junior-event .koka-event__title {
    height: 34px;
    min-height: 34px;
    font-size: 13px;
    line-height: 16px;
  }

  .koka-junior-event .koka-event__date {
    gap: 5px;
    margin-top: 4px;
    font-size: 29px;
  }

  .koka-junior-event .koka-event__weekday {
    width: 23px;
    height: 23px;
    font-size: 12px;
  }

  .koka-junior-event .koka-event__school {
    margin-top: auto;
    font-size: 16px;
    line-height: 20px;
  }

  .koka-junior-event__guide {
    font-size: 11px;
  }

  .koka-junior-education {
    padding-top: 64px;
  }

  .koka-junior-education__intro {
    gap: 24px;
  }

  .koka-junior-education__intro h2 {
    font-size: clamp(30px, 7.9vw, 46px);
  }

  .koka-junior-education__catch {
    margin-top: 16px !important;
    font-size: 20px;
    line-height: 1.7;
    white-space: normal;
  }

  .koka-junior-education__lead {
    line-height: 2;
  }

  .koka-junior-chart-hint {
    margin-top: 32px !important;
    font-size: 12px;
  }

  .koka-junior-chart-scroll {
    margin-top: 12px;
    padding-bottom: 12px;
  }

  /* 進路図：中学校の列を画面内に収め、高校・進路は引き続き横スクロールで読む。 */
  .koka-junior-chart {
    --junior-chart-school-width: clamp(260px, calc(100vw - 40px), 360px);
    width: calc(var(--junior-chart-school-width) + 544px);
  }

  .koka-junior-chart__schools {
    grid-template-columns: var(--junior-chart-school-width) 360px;
    gap: 12px;
  }

  .koka-junior-chart__schools h3 {
    height: 40px;
    font-size: 16px;
    letter-spacing: 0.1em;
  }

  .koka-junior-chart__schools ol {
    gap: 5px;
    margin-top: 8px;
  }

  .koka-junior-chart__schools li {
    height: 32px;
    font-size: 13px;
  }

  .koka-junior-chart__phases {
    grid-template-columns:
      calc(var(--junior-chart-school-width) * 0.66)
      calc(var(--junior-chart-school-width) * 0.34 + 120px) 264px 160px;
    height: 44px;
    margin-top: 8px !important;
  }

  .koka-junior-chart__phases > li {
    font-size: 13px;
  }

  .koka-junior-chart__phases img {
    width: calc(100% + 6px);
    height: 50px;
  }

  .koka-junior-chart__body {
    grid-template-columns: var(--junior-chart-school-width) 12px 28px 6px 326px 12px 160px;
    height: 440px;
    margin-top: 8px;
  }

  .koka-junior-chart__junior {
    gap: 12px;
  }

  .koka-junior-chart__junior-course {
    padding: 18px 16px;
    border-radius: 12px 0 0 12px;
  }

  .koka-junior-chart__junior-course h4 {
    font-size: clamp(18px, 5.1vw, 20px);
    line-height: 1.4;
  }

  .koka-junior-chart__details {
    --junior-chart-photo-width: clamp(100px, 32vw, 128px);
    grid-template-columns: minmax(0, 1fr) var(--junior-chart-photo-width);
    gap: 10px;
    margin-top: 16px;
  }

  .koka-junior-chart__details ul {
    font-size: 13px;
    line-height: 1.7;
  }

  .koka-junior-chart__details img {
    /* 右端を保ったまま左へ拡大し、文章との間に空いていた余白を埋める。 */
    width: var(--junior-chart-photo-width);
    height: calc(var(--junior-chart-photo-width) * 0.94);
  }

  .koka-junior-chart__selection {
    font-size: 12px;
    letter-spacing: 0.03em;
  }

  .koka-junior-chart__senior,
  .koka-junior-chart__paths {
    gap: 8px;
  }

  .koka-junior-chart__senior-course {
    padding: 8px 12px;
  }

  .koka-junior-chart__senior-course h4 {
    font-size: 14px;
    letter-spacing: 0;
    line-height: 1.5;
  }

  .koka-junior-chart__senior-course > p {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.6;
  }

  .koka-junior-chart__path {
    font-size: 12px;
    line-height: 1.6;
  }

  .koka-junior-chart__note {
    margin-top: 12px !important;
    padding-left: calc(var(--junior-chart-school-width) + 12px) !important;
    font-size: 12px;
  }

  .koka-junior-notes {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 40px !important;
  }

  .koka-junior-notes > section {
    padding: 0;
  }

  .koka-junior-notes > section + section {
    padding-top: 24px;
    border-top: 1px solid #ccc;
  }

  .koka-junior-notes > section + section::before {
    content: none;
  }

  .koka-junior-notes h2 {
    margin-bottom: 18px;
    font-size: 20px;
  }

  .koka-junior-courses {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 48px !important;
  }

  .koka-junior-course__body {
    padding: 22px 24px 28px;
  }

  .koka-junior-course h2 {
    gap: 8px;
    font-size: clamp(20px, 5.4vw, 28px);
  }

  .koka-junior-course h2 > span {
    width: 60px;
    height: 25px;
    font-size: 13px;
  }

  .koka-junior-course__description {
    margin-top: 18px !important;
    line-height: 1.8;
  }

  /* 本文と同じ左右24pxの余白を残し、ボタンを内容幅いっぱいに広げる。 */
  .koka-junior-course__more {
    width: 100%;
    align-self: center;
  }

  .koka-junior-course__description + .koka-junior-course__more {
    margin-top: 20px;
  }

  .koka-junior .koka-blog {
    padding: 72px 0 112px;
  }

  .koka-junior .koka-blog__content {
    margin-left: 0;
    margin-right: -20px;
  }

  /* 記事の左端を見出しと同じ20pxに揃え、最後のカードにも右余白を残す。 */
  .koka-junior .koka-blog__track {
    padding: 0 20px 8px 0 !important;
    scroll-padding-right: 20px;
  }

  .koka-junior .koka-blog__controls {
    padding-right: 20px;
  }
}

/* 横向きなど高さの短いスマートフォンでも、3行のコピーをメイン内に収める。 */
@media (max-width: 767px) and (max-height: 500px) {
  .koka-junior-hero__copy {
    top: 12%;
  }

  .koka-junior-hero__copy h1 {
    font-size: clamp(44px, min(20.5cqw, 25cqh), 128px);
  }

  .koka-junior-hero__copy > p {
    font-size: clamp(18px, min(8.2cqw, 8cqh), 36px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .koka-junior-page.is-junior-motion [data-junior-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .koka-junior-course__photo img,
  .koka-junior-course__more > span,
  .koka-junior-event__guide > span {
    transition: none;
  }
}