@charset "utf-8";

/**
 * 総合TOP (リニューアル)
 * ルール詳細: docs/top-coding-rules.md
 */

/* ========================================
 * Variables - 設定値
 * ======================================== */
:root {
  --color-text: #333333;
  --color-text-sub: #6b6b6b;
  --color-white: #ffffff;
  --color-red: #c81424;
  --color-red-dark: #a50f1d;
  --color-border: #e9e5df;

  /* 背景 */
  --color-bg-beige: #f4f0ec;
  --color-bg-mint: #f0f4f0;
  --color-bg-cream: #fdf8f2;
  --color-bg-gray: #f1efec;
  --color-bg-dark: #303030;

  /* コースカラー: 各コースTOPの配色に合わせる
   * 幼児 #11AA32(youji style.css の --color-green) / 小学生 #EB6000(shogaku の --color-orange)
   * 中学 #0059AB(chugaku top.css) / 高校 #2A305C(koukou top style.css) */
  --color-youji: #11aa32;
  --color-youji-light: #edfaf0;
  --color-shogaku: #eb6000;
  --color-shogaku-light: #fef4ed;
  --color-chugaku: #0059ab;
  --color-chugaku-light: #eaf2fa;
  --color-koukou: #2a305c;
  --color-koukou-light: #e9eaf1;

  /* フローティングCTA(ボタンの色) */
  --color-float-orange: #e07826;
  --color-float-green: #a2cb44;

  /* 実績バッジ */
  --color-gold: #f0b232;
  --color-badge-text: #eb6000;

  --font-family-base: 'Noto Sans JP', sans-serif;
  --font-family-number: 'Roboto', 'Noto Sans JP', sans-serif;

  /* ヘッダーの高さは幼小中高TOP(l-header--2024)と同じ: SP 65px / PC 90px */
  --header-height: 65px;
  --scroll-offset: 0px; /* アンカー移動時の余白。SPはヘッダーが固定されないので0 */
  --container-width: 1200px;
  --radius-card: 16px;
  --shadow-card: 0 2px 14px rgba(60, 40, 20, 0.07);

  --icon-arrow: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="none"%3E%3Cpath d="M2 6h8M6.5 2.5 10 6l-3.5 3.5" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E');
  --icon-doc: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none"%3E%3Cpath d="M4 1.5h5.5L13 5v9.5H4z M9.5 1.5V5H13" stroke="black" stroke-width="1.4" stroke-linejoin="round"/%3E%3Cpath d="M6 8.5h5M6 11h5" stroke="black" stroke-width="1.4" stroke-linecap="round"/%3E%3C/svg%3E');
  --icon-pin: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none"%3E%3Cpath d="M8 14.5s4.5-4.2 4.5-7.7A4.5 4.5 0 0 0 3.5 6.8C3.5 10.3 8 14.5 8 14.5z" stroke="black" stroke-width="1.4" stroke-linejoin="round"/%3E%3Ccircle cx="8" cy="6.8" r="1.6" stroke="black" stroke-width="1.4"/%3E%3C/svg%3E');

  @media (min-width: 768px) {
    --header-height: 90px;
    --scroll-offset: 90px;
  }
}

/* 旧フッターと同じ記号(矢印・別窓アイコン)を出すためのアイコンフォント */
@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('/lib/fonts/glyphicons-halflings-regular.woff2') format('woff2'),
    url('/lib/fonts/glyphicons-halflings-regular.woff') format('woff');
  font-display: swap;
}

/* ========================================
 * Site - サイトの大枠
 * ======================================== */
html {
  scroll-behavior: smooth;
}

body.top-renewal {
  background: var(--color-white);
  color: var(--color-text);
  font-family: var(--font-family-base);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.04em;
  -webkit-font-smoothing: antialiased;

  & img {
    max-width: 100%;
    height: auto;
  }

  & a {
    transition: opacity 300ms linear;

    &:hover {
      opacity: 0.7;
    }
  }

  & em {
    font-style: normal;
  }

  & summary {
    cursor: pointer;
  }

  & summary::-webkit-details-marker {
    display: none;
  }
}

.l-main {
  overflow: clip; /* 横スクロール防止（stickyを壊さないため hidden ではなく clip） */
}

/* ========================================
 * Components - コンポーネント
 * ======================================== */

/* --- container --- */
.c-container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: 20px;

  @media (min-width: 768px) {
    padding-inline: 40px;
  }
}

/* --- heading --- */
.c-heading {
  margin-bottom: 32px;

  @media (min-width: 768px) {
    margin-bottom: 48px;
  }

  &.-center {
    text-align: center;
  }

  & .c-heading__eyebrow {
    margin-bottom: 6px;
    color: var(--color-red);
    font-family: var(--font-family-number);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1.4;
  }

  & .c-heading__title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
    text-wrap: balance;

    & > span {
      display: inline-block; /* 文節単位で折り返す */
    }

    @media (min-width: 768px) {
      font-size: 32px;
    }
  }

  & .c-heading__lead {
    margin-top: 10px;
    color: var(--color-text-sub);
    font-size: 13px;

    @media (min-width: 768px) {
      font-size: 14px;
    }
  }
}

/* --- button --- */
.c-button {
  --_bg: var(--color-red);
  --_text: var(--color-white);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 10px 32px 10px 16px;
  border: 1px solid var(--_bg);
  border-radius: 9999px;
  background-color: var(--_bg);
  color: var(--_text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;

  @media (min-width: 768px) {
    min-height: 56px;
    padding-inline: 24px 44px;
    font-size: 16px;
  }

  &.-youji {
    --_bg: var(--color-youji);
  }
  &.-shogaku {
    --_bg: var(--color-shogaku);
  }
  &.-chugaku {
    --_bg: var(--color-chugaku);
  }
  &.-koukou {
    --_bg: var(--color-koukou);
  }
  &.-white {
    --_bg: var(--color-white);
    --_text: var(--color-text);
    border-color: var(--color-border);
  }

  &.-small {
    min-height: 44px;
    font-size: 13px;
  }

  /* 右端の矢印 */
  &.-arrow::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 14px;
    translate: 0 -50%;
    width: 14px;
    aspect-ratio: 1;
    background-color: currentColor;
    mask: var(--icon-arrow) no-repeat center / contain;

    @media (min-width: 768px) {
      right: 20px;
    }
  }

  &.-white.-arrow::after {
    background-color: var(--color-red);
  }

  /* 左端のドキュメントアイコン + 右端の矢印 */
  &.-doc {
    padding-left: 48px;

    &::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 22px;
      translate: 0 -50%;
      width: 18px;
      aspect-ratio: 1;
      background-color: currentColor;
      mask: var(--icon-doc) no-repeat center / contain;
    }

    &::after {
      content: '';
      position: absolute;
      top: 50%;
      right: 20px;
      translate: 0 -50%;
      width: 14px;
      aspect-ratio: 1;
      background-color: currentColor;
      mask: var(--icon-arrow) no-repeat center / contain;
    }
  }
}

/* --- pill link (白地のリンクボタン) --- */
.c-pill-link {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 40px 8px 20px;
  border-radius: 9999px;
  background-color: var(--color-white);
  box-shadow: 0 1px 4px rgba(60, 40, 20, 0.06);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;

  &::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 16px;
    translate: 0 -50%;
    width: 13px;
    aspect-ratio: 1;
    background-color: var(--color-red);
    mask: var(--icon-arrow) no-repeat center / contain;
  }

  &.-inline {
    display: inline-flex;
    padding-inline: 28px 48px;
    box-shadow: 0 1px 6px rgba(60, 40, 20, 0.1);
  }
}

/* --- chip --- */
.c-chip {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 9999px;
  background-color: var(--_color-light, var(--color-bg-gray));
  color: var(--_color, var(--color-text));
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}

/* --- note (※詳細) --- */
.c-note {
  margin-top: 12px;

  & .c-note__summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 12px;
    border-radius: 6px;
    background-color: rgba(0, 0, 0, 0.08);
    color: var(--color-text-sub);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.8;

    &::after {
      content: '+';
      font-family: var(--font-family-number);
    }
  }

  &[open] .c-note__summary::after {
    content: '−';
  }

  & .c-note__body {
    margin-top: 8px;
    padding: 12px 14px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.7);
    color: var(--color-text-sub);
    font-size: 11px;
    line-height: 1.8;

    & p + p {
      margin-top: 6px;
    }
  }
}

/* --- notice (お知らせ) --- */
.l-notice {
  padding: 0 0 36px;

  @media (min-width: 768px) {
    padding-bottom: 48px;
  }

  &[hidden] {
    display: none;
  }

  & .l-notice__list {
    display: grid;
    gap: 8px;
  }
}

.c-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 8px 40px 8px 14px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background-color: var(--color-white);
  color: var(--color-text);
  text-align: left;
  position: relative;

  &:hover {
    background-color: #faf8f6;
  }

  /* 右端の矢印 */
  &::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 16px;
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--color-red);
    border-right: 2px solid var(--color-red);
    translate: 0 -50%;
    rotate: 45deg;
  }

  & .c-notice__label {
    flex: none;
    padding: 0 10px;
    border-radius: 9999px;
    background-color: var(--color-red);
    color: var(--color-white);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.9;
  }

  & .c-notice__title {
    min-width: 0;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: underline;
    text-underline-offset: 3px;

    @media (min-width: 768px) {
      font-size: 14px;
    }
  }
}

.c-notice-dialog {
  position: fixed;
  inset: 0;
  width: calc(100% - 32px);
  max-width: 650px;
  max-height: 88dvh;
  margin: auto;
  padding: 28px 24px 24px;
  border: 0;
  border-radius: 20px;
  background-color: var(--color-white);
  color: var(--color-text);
  overflow: visible;

  &::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
  }

  & .c-notice-dialog__title {
    padding-right: 24px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.6;
  }

  & .c-notice-dialog__content {
    max-height: calc(88dvh - 130px);
    margin-top: 14px;
    overflow-y: auto;
    font-size: 14px;
    line-height: 1.9;

    & p + p {
      margin-top: 10px;
    }

    & a {
      color: var(--color-red);
      text-decoration: underline;
    }

    & img {
      max-width: 100%;
      height: auto;
    }
  }

  & .c-notice-dialog__close {
    position: absolute;
    top: -14px;
    right: -10px;
    width: 40px;
    height: 40px;
    border: 3px solid var(--color-red);
    border-radius: 50%;
    background-color: var(--color-white);
    color: transparent; /* 文字は読み上げ用に残す */
    overflow: hidden;

    &::before,
    &::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 18px;
      height: 3px;
      border-radius: 2px;
      background-color: var(--color-red);
      translate: -50% -50%;
    }

    &::before {
      rotate: 45deg;
    }

    &::after {
      rotate: -45deg;
    }
  }
}

/* --- topic card (最新情報) --- */
.c-topic-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background-color: var(--color-white);
  box-shadow: var(--shadow-card);

  & .c-topic-card__visual {
    position: relative;
    display: block;
    aspect-ratio: 768 / 389; /* 画像(768×389)に合わせ、ポケモンの©表記などが切れないようにする */
    overflow: hidden;
    background-color: var(--color-bg-gray);

    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 30%;
    }

    /* 16:9に合わない画像(ポケモン特典など)は、切り取らずに全体を見せる。
     * 「キャンペーン」のバッジと重ならないよう、画像はバッジの下に収める */
    &.-contain {
      padding-top: 40px;
      background-color: var(--color-white);

      & img {
        object-fit: contain;
        object-position: center;
      }
    }
  }

  & .c-topic-card__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 1px 12px;
    border-radius: 9999px;
    background-color: var(--color-red);
    color: var(--color-white);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.7;
  }

  & .c-topic-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 16px 20px 18px;
  }

  & .c-topic-card__meta {
    color: var(--color-red);
    font-size: 11px;
    font-weight: 700;
  }

  & .c-topic-card__title {
    margin-top: 4px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.5;
  }

  & .c-topic-card__text {
    margin-top: 6px;
    color: var(--color-text-sub);
    font-size: 12px;
    line-height: 1.7;
  }

  /* 期限の強調(キャンペーンなど) */
  & .c-topic-card__deadline {
    align-self: flex-start;
    margin-top: 10px;
    padding: 4px 12px;
    border-radius: 9999px;
    background-color: var(--color-red);
    color: var(--color-white);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;

    & strong {
      font-size: 15px;
      font-weight: 900;
    }
  }

  /* リンクが複数あるカード(ポケモン特典など)用 */
  & .c-topic-card__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0 16px;
    margin-top: auto;

    & .c-topic-card__link {
      margin-top: 0;
    }
  }

  & .c-topic-card__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-end;
    margin-top: auto;
    padding-top: 12px;
    font-size: 12px;
    font-weight: 700;

    &::after {
      content: '';
      width: 12px;
      aspect-ratio: 1;
      background-color: var(--color-red);
      mask: var(--icon-arrow) no-repeat center / contain;
    }
  }
}

/* --- laurel badge (実績バッジ) --- */
.c-laurel {
  /* 小学生コースTOP「保護者さまに選ばれています」(l-sect-strength__data)と同じ構成。
   * 行の高さは 244px 基準の 55 / 115 / 1fr を % に換算している */
  container-type: inline-size;
  position: relative;
  display: grid;
  grid-template-rows: 22.5% 47.1% 1fr;
  width: 100%;
  max-width: 240px;
  aspect-ratio: 157 / 122;
  background: url('/assets/shogaku/images/sect-strength_data-bg.svg') no-repeat center / contain;
  color: var(--color-badge-text);
  line-height: 1.2;
  text-align: center;

  /* 王冠 */
  &::before {
    content: '';
    position: absolute;
    top: 3.2cqw;
    left: 50%;
    width: 24.2cqw;
    aspect-ratio: 76 / 46;
    translate: -50% 0;
    background: url('/assets/shogaku/images/sect-strength_data-crown.svg') no-repeat center / contain;
    z-index: 1;
  }

  & .c-laurel__num {
    grid-row: 2 / 3;
    font-family: var(--font-family-number);
    font-size: 31.8cqw; /* 整数部 */
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
    white-space: nowrap;

    & .c-laurel__dot {
      font-size: 28.7cqw;
    }

    & small {
      font-size: 17.2cqw; /* 小数部 + % / 単位 */
      letter-spacing: 0;
    }
  }

  & .c-laurel__label {
    grid-row: 3 / 4;
    font-size: 9.6cqw;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.2;
    text-align: center;

    /* ※がある場合だけ、その分右に寄せて文字を中央に見せる */
    & .c-laurel__last:has(sup) {
      padding-left: 0.6em;
    }

    & sup {
      top: auto;
      vertical-align: baseline;
      font-size: 3.8cqw;
      font-weight: 400;
    }
  }
}

/* --- 実績メダル・イード・アワード バッジ(画像。入会のご案内と同じ見た目にそろえる) --- */
.c-medal {
  container-type: inline-size;
  position: relative;
  width: 100%;
  max-width: 200px;

  & img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* 欄外の注釈と対応させる※番号。入会のご案内と同じく右上に置く */
  & .c-medal__mark {
    position: absolute;
    top: 4%;
    right: 0;
    color: var(--color-text-sub);
    font-size: max(10px, 6cqw);
    line-height: 1;
  }
}

/* --- コース別カラー(-youji など)。.c-chip が --_color を参照する --- */
.c-result-card,
.c-voice-row {
  --_color: var(--color-text);
  --_color-light: var(--color-bg-gray);

  &.-youji {
    --_color: var(--color-youji);
    --_color-light: var(--color-youji-light);
  }
  &.-shogaku {
    --_color: var(--color-shogaku);
    --_color-light: var(--color-shogaku-light);
  }
  &.-chugaku {
    --_color: var(--color-chugaku);
    --_color-light: var(--color-chugaku-light);
  }
  &.-koukou {
    --_color: var(--color-koukou);
    --_color-light: var(--color-koukou-light);
  }
}

/* --- result card (コース別の実績) --- */
.c-result-card {
  min-width: 0;
  padding: 20px 16px 16px;
  border-radius: 24px;
  background-color: var(--color-white);

  @media (min-width: 768px) {
    padding: 26px 30px 24px;
  }

  & .c-result-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
  }

  & .c-result-card__lead {
    color: var(--color-text-sub);
    font-size: 11px;
  }

  & .c-result-card__badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px 8px;
    margin-top: 12px;

    @media (min-width: 768px) {
      flex-wrap: nowrap;
      gap: 32px;
    }

    & > li {
      flex: 0 1 200px;

      /* スマホでは1行2つまで。3つ目(小学生コースのイード)は次の行に回す */
      @media (max-width: 767px) {
        flex-basis: calc((100% - 8px) / 2);
      }
    }
  }

  /* バッジと回答内容の説明を縦に並べる(※注記はカードの外の .c-caution にまとめる) */
  & .c-result-card__item {
    container-type: inline-size; /* .c-result-card__award の文字サイズの基準 */
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  & .c-result-card__note {
    margin-top: 12px;
    color: var(--color-text-sub);
    font-size: 11px;
    line-height: 1.6;
    text-align: justify;

    @media (min-width: 768px) {
      font-size: 12px;
    }

    /* 回答内容の説明(本文)と、対象者の※注記(小さめ)を改行して並べる */
    & > span {
      display: block;
    }

    & .c-result-card__lead {
      color: var(--color-text);
      font-size: 13px;

      @media (min-width: 768px) {
        font-size: 14px;
      }
    }

    & .c-result-card__fine {
      margin-top: 4px;
      font-size: 10px;

      @media (min-width: 768px) {
        font-size: 11px;
      }
    }
  }

  /* イード・アワードの受賞内容(入会のご案内と同じく、バッジの直下に1行ずつ)。
   * 文字の太さ・大きさは回答内容の説明(.c-result-card__lead)とそろえる */
  & .c-result-card__award {
    margin-top: 12px;
    color: var(--color-text);
    /* 「〜英語教材」(12文字)が1行に収まるよう、バッジの幅が狭いときは文字を小さくする */
    font-size: clamp(11px, 7.8cqi, 13px);
    line-height: 1.6;
    text-align: center;

    @media (min-width: 768px) {
      font-size: clamp(11px, 7.8cqi, 14px);
    }

    /* 1行ずつ表示し、行の途中では折り返さない */
    & > span {
      display: block;
      white-space: nowrap;
    }
  }
}

/* --- voice row (コース別の口コミスライダー) --- */
.c-voice-row {
  min-width: 0;

  & .splide__pagination {
    position: static;
    gap: 8px;
    margin-top: 16px;
    padding: 0;
  }
}

/* --- voice card --- */
.c-voice-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  height: 100%;
  padding: 24px 20px;
  border-radius: 24px;
  background-color: var(--color-white);

  @media (min-width: 768px) {
    padding: 28px 30px;
  }

  /* 右上の引用符 */
  &::after {
    content: '\201D';
    position: absolute;
    top: 14px;
    right: 28px;
    color: var(--_color-light);
    font-family: Georgia, serif;
    font-size: 64px;
    font-style: italic;
    font-weight: 700;
    line-height: 1;
  }

  & .c-voice-card__title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.7;

    @media (min-width: 768px) {
      font-size: 19px;
    }
  }

  & .c-voice-card__text {
    margin-top: 10px;
    color: var(--color-text-sub);
    font-size: 13px;
    line-height: 1.9;
  }

  & .c-voice-card__user {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 8px;
    color: var(--color-text-sub);
    font-size: 11px;

    & img {
      flex: none;
      width: 38px;
      height: 38px;
      background-color: transparent;
      object-fit: contain;
      object-position: center bottom;
    }
  }
}

/* 口コミ下の注意書き(各コースTOPと同文) */
.c-caution {
  margin-top: 20px;
  color: var(--color-text-sub);
  font-size: 10px;
  line-height: 1.8;

  & a {
    text-decoration: underline;
  }
}

/* --- course card (コースを選ぶ) ---
 * 1024px未満: コース名 → 写真(左)とコピー(右) → ボタン → 学年チップ の縦積み
 * 1024px以上: 4列に並ぶため、写真を上に大きく置く */
.c-course-card {
  --_color: var(--color-text);
  --_color-light: var(--color-bg-gray);
  display: grid;
  grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
  align-items: start;
  gap: 12px 16px;
  height: 100%;
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  background-color: var(--color-white);

  /* コース名・ボタン・学年チップは横幅いっぱい */
  & > .c-course-card__name,
  & > .c-button,
  & > .c-course-card__grades {
    grid-column: 1 / -1;
  }

  @media (min-width: 1024px) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 20px;
  }

  &.-youji {
    --_color: var(--color-youji);
    --_color-light: var(--color-youji-light);
  }
  &.-shogaku {
    --_color: var(--color-shogaku);
    --_color-light: var(--color-shogaku-light);
  }
  &.-chugaku {
    --_color: var(--color-chugaku);
    --_color-light: var(--color-chugaku-light);
  }
  &.-koukou {
    --_color: var(--color-koukou);
    --_color-light: var(--color-koukou-light);
  }

  & .c-course-card__name {
    color: var(--_color);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;
  }

  /* 写真: 角丸は画像に含まれている(四隅が透過)ので、枠は画像の比率に合わせて切り取らない。
   * 1024px未満は縦長(336×432)、以上は横長(500×336) */
  & .c-course-card__visual {
    display: block;
    aspect-ratio: 336 / 432;

    @media (min-width: 1024px) {
      margin-top: 12px;
      aspect-ratio: 500 / 336;
    }

    & picture {
      display: block;
      height: 100%;
    }

    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  & .c-course-card__copy {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.9;

    @media (min-width: 1024px) {
      margin-block: 16px;
      font-size: 17px;
      line-height: 1.6;
    }
  }

  /* ボタン: 文字は左寄せ、矢印は右端 */
  & .c-button {
    justify-content: flex-start;
    margin-top: 8px;
    padding-left: 20px;
    text-align: left;

    & > span {
      text-align: left;
    }

    /* 4列が同じ高さにボタンが並ぶよう、下寄せ(auto)にはしない */
    @media (min-width: 1024px) {
      margin-top: 0;
    }
  }

  /* 学年チップ: ラベル左・山括弧右 */
  & .c-course-card__grades {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;

    @media (min-width: 1024px) {
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
      margin-top: 14px;
    }

    & a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 4px;
      min-height: 38px;
      padding: 6px 8px 6px 10px;
      border-radius: 10px;
      background-color: var(--_color-light);
      color: var(--_color);
      font-size: 12px;
      font-weight: 700;
      line-height: 1.3;

      &::after {
        content: '\203A';
        flex: none;
        font-size: 16px;
        line-height: 1;
      }
    }
  }
}

/* --- course link (コース名リンク: FV variant b) --- */
.c-course-link {
  --_color: var(--color-text);
  display: flex;
  align-items: center;
  overflow: hidden;
  height: 80px;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  background-color: var(--color-white);
  color: var(--_color);

  &.-youji {
    --_color: var(--color-youji);
  }
  &.-shogaku {
    --_color: var(--color-shogaku);
  }
  &.-chugaku {
    --_color: var(--color-chugaku);
  }
  &.-koukou {
    --_color: var(--color-koukou);
  }

  & .c-course-link__photo {
    flex: none;
    align-self: stretch;
    width: 32%;

    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 25%;
    }
  }

  & .c-course-link__name {
    flex: 1;
    padding-left: 16px;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
  }

  &::after {
    content: '';
    flex: none;
    width: 18px;
    aspect-ratio: 1;
    margin-right: 22px;
    background-color: currentColor;
    mask: var(--icon-arrow) no-repeat center / contain;
  }
}

/* --- float button (フローティングCTAのボタン) ---
 * 吹き出しは約3.2秒ごとに2回ぴょんと跳ねて目を引く(ページ内にCTAがないため)。
 * 複数のボタンはずらして動かす。動きを減らす設定の環境では止める */
@keyframes float-bubble-bounce {
  0%,
  22%,
  100% {
    translate: -50% 0;
  }
  7% {
    translate: -50% -6px;
  }
  14% {
    translate: -50% 0;
  }
  18% {
    translate: -50% -3px;
  }
}

.c-float-button {
  --_color: var(--color-float-orange);
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  height: 54px;
  padding: 0 8px; /* 文字をブロックの中央に置く。矢印は右端に重ねる(位置には影響しない) */
  border-radius: 14px;

  @media (min-width: 768px) {
    height: 62px;
  }
  background-color: var(--_color);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.18);
  color: var(--color-white);

  &.-green {
    --_color: var(--color-float-green);
    --_bubble-delay: 0.5s; /* 隣のボタンとずらして動かす */
  }

  /* 吹き出し: ボタンの上端にかぶせる */
  & .c-float-button__bubble {
    position: absolute;
    top: -16px;
    left: 50%;
    padding: 1px 14px;
    border: 3px solid var(--_color);
    border-radius: 9999px;
    background-color: var(--color-white);
    color: var(--_color);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.04em;
    white-space: nowrap;
    translate: -50% 0;

    @media (min-width: 768px) {
      font-size: 14px;
    }

    @media (prefers-reduced-motion: no-preference) {
      .l-floating-cta.is-visible & {
        animation: float-bubble-bounce 3.2s ease-in-out infinite;
        animation-delay: var(--_bubble-delay, 0s);
      }
    }

    /* 下向きのしっぽ */
    &::after {
      content: '';
      position: absolute;
      top: 100%;
      left: 50%;
      border: 6px solid transparent;
      border-top-color: var(--color-white);
      translate: -50% -1px;
    }
  }

  /* フォントはページ全体(Noto Sans JP)に合わせる */
  & .c-float-button__text {
    /* 矢印と重ならないよう、幅に応じて文字サイズを変える(375pxで約14.6px) */
    font-size: clamp(13px, 3.9vw, 16px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
    white-space: nowrap;

    @media (min-width: 768px) {
      font-size: 20px;
    }
  }

  /* 右端の山括弧 */
  &::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 12px;
    width: 8px;
    height: 8px;
    border-top: 3px solid currentColor;
    border-right: 3px solid currentColor;
    border-radius: 1px;
    translate: 0 -50%;
    rotate: 45deg;

    /* 画面が極端に狭いときは矢印を省く(文字と重なるため) */
    @media (max-width: 340px) {
      display: none;
    }
  }
}

/* --- guide panel (会費・体験会) --- */
.c-guide-panel {
  padding: 24px 20px;
  border-radius: 20px;

  @media (min-width: 768px) {
    padding: 32px;
  }

  &.-price {
    background-color: #f3f1ee;
  }
  &.-event {
    background-color: #fdf5ec;
  }

  & .c-guide-panel__title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 19px;
    font-weight: 700;

    @media (min-width: 768px) {
      font-size: 22px;
    }
  }

  & .c-guide-panel__icon {
    flex: none;
    width: 22px;
    aspect-ratio: 1;
    background-color: var(--color-red);
    mask: var(--icon-doc) no-repeat center / contain;

    &.-pin {
      mask-image: var(--icon-pin);
    }
  }

  & .c-guide-panel__text {
    margin-top: 10px;
    color: var(--color-text-sub);
    font-size: 12px;
  }

  & .c-guide-panel__links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 20px;
  }

  &.-event .c-guide-panel__links {
    grid-template-columns: 1fr;

    @media (min-width: 768px) {
      grid-template-columns: repeat(2, 1fr);
    }
  }
}

/* --- faq --- */
.c-faq {
  border-radius: 12px;
  background-color: var(--color-white);
  box-shadow: 0 1px 4px rgba(60, 40, 20, 0.05);

  & .c-faq__summary {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;

    &::before {
      content: 'Q';
      flex: none;
      color: var(--color-red);
      font-family: var(--font-family-number);
      font-size: 18px;
      font-weight: 900;
      line-height: 1;
    }

    &::after {
      content: '+';
      flex: none;
      margin-left: auto;
      color: var(--color-text-sub);
      font-family: var(--font-family-number);
      font-size: 22px;
      font-weight: 500;
      line-height: 1;
    }
  }

  &[open] .c-faq__summary::after {
    content: '−';
  }

  & .c-faq__question {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;

    @media (min-width: 768px) {
      font-size: 15px;
    }
  }

  & .c-faq__answer {
    padding: 4px 20px 20px 52px;
    color: var(--color-text);
    font-size: 13px;
    line-height: 1.9;

    & p + p {
      margin-top: 10px;
    }

    & strong {
      font-weight: 700;
    }
  }

  & .c-faq__note {
    color: var(--color-text-sub);
    font-size: 11px;
    line-height: 1.8;
  }
}

/* ========================================
 * Layout - セクション別
 * ======================================== */

/* --- header ---
 * 幼小中高TOPのヘッダー(l-header--2024)と寸法を揃えている:
 * SP 高さ65px(ロゴ140×50 + 余白) / PC 高さ90px・左右30px・影あり / メニューボタンは円形(SP 40px, PC 50px) */
.l-header {
  z-index: 99;
  border-bottom: 1px solid #ddd;
  background-color: var(--color-white);

  @media (min-width: 768px) {
    position: sticky;
    top: 0;
    border-bottom: 0;
  }

  & .l-header__inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: var(--header-height);

    @media (min-width: 768px) {
      padding: 0 30px;
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
    }
  }

  & .l-header__logo img {
    width: 140px;
    height: 50px;
    margin: 7px 0 8px 15px;

    @media (min-width: 768px) {
      width: 160px;
      margin: 0;
    }

    @media (min-width: 981px) {
      width: 190px;
    }
  }

  /* メニューボタン(円形。SPは画面に固定) */
  & .l-header__toggle {
    position: fixed;
    top: 12px;
    right: 20px;
    z-index: 100;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--color-red);
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.25);

    @media (min-width: 768px) {
      position: absolute;
      top: 18px;
      right: 30px;
      width: 50px;
      height: 50px;
      box-shadow: none;
    }
  }

  /* 三本線: 幼小中高TOPのメニューアイコン(menu.svg 34×24)を17px幅にした寸法に合わせる
   * = 線の太さ2px / 線の中心間隔5px / 全体の高さ12px */
  & .l-header__toggle-bar,
  & .l-header__toggle-bar::before,
  & .l-header__toggle-bar::after {
    position: absolute;
    left: 50%;
    width: 17px;
    height: 2px;
    border-radius: 1px;
    background-color: var(--color-white);
    translate: -50% -50%;
    transition: rotate 200ms ease, translate 200ms ease, opacity 200ms ease;
  }

  & .l-header__toggle-bar {
    top: 50%;
  }

  & .l-header__toggle-bar::before,
  & .l-header__toggle-bar::after {
    content: '';
    left: 50%;
  }

  & .l-header__toggle-bar::before {
    top: calc(50% - 5px);
  }

  & .l-header__toggle-bar::after {
    top: calc(50% + 5px);
  }

  /* 開いている間は、幼小中高TOPのモーダルの閉じるボタンと同じ見た目(白い円 + 太い縁取り + 影) */
  & .l-header__toggle[aria-expanded='true'] {
    position: fixed;
    /* 位置もモーダルの閉じるボタンと同じ: パネルの右上の角をまたぐ(SPは画面右端 / 幅600pxのパネルより広い画面では角の外側) */
    top: 2px;
    right: max(0px, calc(50% - 325px));
    width: 40px;
    height: 40px;
    border: 4px solid var(--color-red);
    background-color: var(--color-white);
    box-shadow: 0 0 3px rgb(0 0 3 / 0.6);

    @media (min-width: 768px) {
      top: 0;
    }
  }

  & .l-header__toggle[aria-expanded='true'] .l-header__toggle-bar {
    background-color: transparent;

    &::before,
    &::after {
      top: 50%;
      width: 18px;
      height: 3px;
      background-color: var(--color-red);
    }

    &::before {
      rotate: 45deg;
    }

    &::after {
      rotate: -45deg;
    }
  }

  /* PC(1024px以上): ページ内リンクをハンバーガーの左に横並び */
  & .l-header__nav {
    display: none;

    /* ロゴとメニューボタンの間で中央寄せ(ボタンの幅50px分を右に確保) */
    @media (min-width: 1024px) {
      display: flex;
      flex: 1;
      justify-content: center;
      margin-right: 50px;
    }
  }

  & .l-header__list {
    display: flex;
    gap: clamp(16px, 2vw, 28px);

    & a {
      font-size: 12px;
      font-weight: 700;
    }
  }

  /* ハンバーガーで開くメニュー: 幼小中高TOPのモーダル(.modal)と同じ構成。
   * 暗幕(黒50%)の上に、白い角丸のパネルを出す。SPは左右10px余白 / PCは幅600pxで中央 */
  & .l-header__menu {
    --_line: #c8c8c8;
    position: fixed;
    inset: 0;
    z-index: 98;
    display: none;
    padding: 20px 10px 10px;
    overflow-y: auto;
    background-color: rgb(0 0 0 / 0.5);

    &.is-open {
      display: block;
      animation: menu-fade-in 150ms ease-out;
    }

    @media (min-width: 768px) {
      padding: 20px 20px 30px;
    }

    & a {
      display: block;
    }
  }

  & .l-header__menu-panel {
    max-width: 600px;
    margin-inline: auto;
    padding-block: 15px 24px;
    border: 1px solid rgb(0 0 0 / 0.2);
    border-radius: 6px;
    background-color: var(--color-white);
    box-shadow: 0 3px 9px rgb(0 0 0 / 0.5);
  }

  & .l-header__menu-logo {
    padding: 0 15px 8px;

    & img {
      width: 128px;
      height: auto;
    }
  }

  /* 行(ページ内リンク・お問い合わせなど): 区切り線 + 右端の「›」 */
  & .l-header__menu-anchors,
  & .l-header__menu-courses,
  & .l-header__menu-links {
    --_chevron: #333;
    border-top: 1px solid var(--_line);

    & li {
      border-bottom: 1px solid var(--_line);
    }

    & a {
      position: relative;
      padding: 10px 40px 10px 20px;
      color: #212121;
      font-size: 14px;
      font-weight: 400;
      letter-spacing: 0.08em;
      line-height: 1.6;

      &::after {
        content: '';
        position: absolute;
        top: 50%;
        right: 20px;
        width: 8px;
        aspect-ratio: 1;
        border-top: 2px solid var(--_chevron);
        border-right: 2px solid var(--_chevron);
        translate: 0 -50%;
        rotate: 45deg;
      }
    }
  }

  /* ページ内リンク(1024px未満のみ。1024px以上は横並びのナビにある) */
  & .l-header__menu-anchors {
    @media (min-width: 1024px) {
      display: none;
    }
  }

  & .l-header__menu-title {
    margin: 20px 15px 8px;
    color: var(--color-text-sub);
    font-size: 11px;
    font-weight: 700;

    @media (min-width: 1024px) {
      margin-top: 8px;
    }
  }

  /* コース: 幼小中高TOPの学年行(左にコースカラーの太線、コースカラーの太字、中央寄せ) */
  & .l-header__menu-courses {
    & a {
      --_color: var(--color-text);
      --_chevron: var(--_color);
      padding: 15px 40px 15px 20px;
      border-left: 8px solid var(--_color);
      color: var(--_color);
      font-size: 16px;
      font-weight: 700;
      text-align: center;

      &.-youji {
        --_color: var(--color-youji);
      }
      &.-shogaku {
        --_color: var(--color-shogaku);
      }
      &.-chugaku {
        --_color: var(--color-chugaku);
      }
      &.-koukou {
        --_color: var(--color-koukou);
      }
    }
  }

  & .l-header__menu-links {
    margin-top: 20px;
  }
}

@keyframes menu-fade-in {
  from {
    opacity: 0;
  }
}

/* メニューを開いている間は背面をスクロールさせない */
.top-renewal.is-menu-open {
  overflow: hidden;
}

/* --- hero --- */
.l-sect-hero {
  padding: 32px 0 48px;

  @media (min-width: 768px) {
    padding: 64px 0 88px;
  }

  & .l-sect-hero__inner {
    display: grid;
    gap: 28px;

    @media (min-width: 768px) {
      grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
      align-items: center;
      gap: 40px 24px;
    }
  }

  & .l-sect-hero__eyebrow {
    color: var(--color-text-sub);
    font-size: 11px;
    font-weight: 500;

    @media (min-width: 768px) {
      font-size: 12px;
    }
  }

  & .l-sect-hero__title {
    margin-top: 16px;
    font-size: 44px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.02em;

    @media (min-width: 768px) {
      font-size: clamp(36px, 4.6vw, 64px);
    }

    & span,
    & em {
      display: block;
      white-space: nowrap; /* 「チカラがつく。」の途中で改行させない */
    }

    & em {
      color: var(--color-red);
    }
  }

  & .l-sect-hero__lead {
    margin-top: 20px;
    font-size: 13px;
    font-weight: 700;

    @media (min-width: 768px) {
      font-size: 15px;
    }
  }

  & .l-sect-hero__photos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    align-items: start;

    @media (min-width: 768px) {
      gap: 12px;
    }
  }

  /* 写真は角丸込みの透過WebP。影だけCSSで付ける */
  & .l-sect-hero__photo {
    aspect-ratio: 155 / 300;
    filter: drop-shadow(0 6px 14px rgba(60, 40, 20, 0.12));

    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  & .l-sect-hero__courses {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;

    @media (min-width: 768px) {
      grid-column: 1 / -1;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }
  }
}

/* --- hero b (ABテスト fv / variant b: コース遷移を強調。SPのみ) --- */
.l-sect-hero-b {
  padding: 32px 0 40px;

  /* PCでは表示しない(PCはvariant aを常に表示する。script.js参照) */
  @media (min-width: 768px) {
    display: none;
  }

  & .l-sect-hero-b__inner {
    padding-inline: 24px;
  }

  & .l-sect-hero-b__logo {
    text-align: center;

    & img {
      width: 210px;
      height: auto;
    }
  }

  & .l-sect-hero-b__lead {
    margin-top: 16px;
    color: var(--color-text-sub);
    font-size: 12px;
    text-align: center;
  }

  & .l-sect-hero-b__courses {
    display: grid;
    gap: 12px;
    margin-top: 28px;
  }
}

/* variant b のときは、ヘッダーの小さいロゴを隠す(FV内に大きいロゴがあるため) */
.ab-fv-b .l-header__logo {
  visibility: hidden;
}

/* --- topics --- */
.l-sect-topics {
  padding-bottom: 64px;
  scroll-margin-top: var(--scroll-offset);

  @media (min-width: 768px) {
    padding-bottom: 96px;
  }

  & .splide__pagination {
    position: static;
    gap: 8px;
    margin-top: 24px;
    padding: 0;
  }

  /* カードが表示枚数より少ないときは中央に寄せる(多いときはスライダーとして左詰めのまま) */
  & .splide__list {
    justify-content: safe center;
  }
}

/* --- results (保護者さまに選ばれています) --- */
.l-sect-results {
  padding: 56px 0 48px;
  background-color: #f5f3ee;
  scroll-margin-top: var(--scroll-offset);

  @media (min-width: 768px) {
    padding: 88px 0 72px;
  }

  & .l-sect-results__row {
    display: grid;
    gap: 16px;

    @media (min-width: 768px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 22px;
    }
  }

  /* 幼児(バッジ2つ)と小学生(バッジ3つ)の行は、バッジの大きさがそろうよう 2:3 の幅にする */
  & .l-sect-results__row.-ratio-2-3 {
    /* 1024px未満は横に並べるとバッジが小さくなりすぎるため、カードを縦に積む */
    @media (min-width: 768px) {
      grid-template-columns: minmax(0, 1fr);
    }

    @media (min-width: 1024px) {
      grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    }
  }

  /* 1枚だけの行(中学生コース)は、2列のときの1枚分の幅で中央に置く */
  & .l-sect-results__row.-single {
    margin-top: 16px;

    @media (min-width: 768px) {
      grid-template-columns: minmax(0, calc((100% - 22px) / 2));
      justify-content: center;
      margin-top: 22px;
    }
  }

  & .l-sect-results__row + .c-note + .l-sect-results__row {
    margin-top: 32px;
  }
}

/* --- voices (口コミ) --- */
.l-sect-voices {
  padding: 56px 0 56px;
  background-color: #fcf7f0;
  scroll-margin-top: var(--scroll-offset);

  @media (min-width: 768px) {
    padding: 80px 0 72px;
  }

  & .l-sect-voices__group {
    display: grid;
    gap: 22px;

    & + .l-sect-voices__group {
      margin-top: 48px;
    }
  }
}

/* --- courses --- */
.l-sect-courses {
  padding: 56px 0 64px;
  scroll-margin-top: var(--scroll-offset);

  @media (min-width: 768px) {
    padding: 88px 0 96px;
  }

  /* SPはカードを画面幅いっぱいに近づける(学年チップを1行に収めるため) */
  & .c-container {
    padding-inline: 16px;

    @media (min-width: 768px) {
      padding-inline: 40px;
    }
  }

  & .l-sect-courses__list {
    display: grid;
    gap: 16px;

    @media (min-width: 600px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    @media (min-width: 1024px) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 20px;
    }
  }
}

/* --- features --- */
.l-sect-features {
  padding: 56px 0 64px;
  background-color: var(--color-bg-mint);
  scroll-margin-top: var(--scroll-offset);

  @media (min-width: 768px) {
    padding: 88px 0 96px;
  }

  & .l-sect-features__list {
    display: grid;
    gap: 40px;

    @media (min-width: 768px) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 28px;
    }
  }

  & .l-sect-features__item {
    display: flex;
    flex-direction: column;
  }

  & .l-sect-features__head {
    display: flex;
    align-items: baseline;
    gap: 12px;
  }

  & .l-sect-features__num {
    color: var(--color-red);
    font-family: var(--font-family-number);
    font-size: 26px;
    font-weight: 900;
    line-height: 1;
  }

  & .l-sect-features__name {
    font-size: 16px;
    font-weight: 700;
  }

  & .l-sect-features__media {
    aspect-ratio: 4 / 5;
    margin-top: 16px;
    overflow: hidden;
    border-radius: var(--radius-card);
    background-color: var(--color-white);

    & video,
    & img,
    & .splide,
    & .splide__track,
    & .splide__list {
      width: 100%;
      height: 100%;
    }

    & video,
    & img {
      object-fit: cover;
    }
  }

  & .l-sect-features__text {
    margin-top: 16px;
    color: var(--color-text-sub);
    font-size: 12px;
    line-height: 1.9;
  }
}

/* --- guide --- */
.l-sect-guide {
  padding: 56px 0 64px;
  scroll-margin-top: var(--scroll-offset);

  @media (min-width: 768px) {
    padding: 88px 0 96px;
  }

  & .l-sect-guide__grid {
    display: grid;
    gap: 16px;

    @media (min-width: 768px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 24px;
    }
  }
}

/* --- faq --- */
.l-sect-faq {
  padding: 56px 0 64px;
  background-color: var(--color-bg-gray);
  scroll-margin-top: var(--scroll-offset);

  @media (min-width: 768px) {
    padding: 88px 0 96px;
  }

  & .l-sect-faq__list {
    display: grid;
    gap: 12px;
    max-width: 760px;
    margin-inline: auto;
  }
}

/* --- cta --- */
.l-sect-cta {
  padding: 56px 0 64px;
  background: linear-gradient(160deg, #fffdfb 0%, #fdf8f3 55%, #f6f4f2 100%);

  @media (min-width: 768px) {
    padding: 96px 0;
  }

  & .l-sect-cta__inner {
    display: grid;
    gap: 36px;

    @media (min-width: 768px) {
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
      align-items: center;
      gap: 56px;
    }
  }

  & .l-sect-cta__title {
    font-size: 34px;
    font-weight: 800;
    line-height: 1.5;

    & span,
    & em {
      display: block;
      white-space: nowrap;
    }

    /* FVと同じく、2行目を赤にする */
    & em {
      color: var(--color-red);
    }

    @media (min-width: 768px) {
      font-size: clamp(40px, 4.2vw, 60px);
    }
  }

  /* 幼小中高への導線(FVと同じボタン。2列×2段) */
  & .l-sect-cta__courses {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 28px;

    @media (min-width: 768px) {
      gap: 16px;
      max-width: 520px;
      margin-top: 40px;
    }
  }

  /* 集合写真(角丸・背景込みの画像) */
  & .l-sect-cta__visual img {
    width: 100%;
    height: auto;
  }
}

/* --- floating cta (画面下に固定するCTA) --- */
.l-floating-cta {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 90;
  padding: 24px 12px calc(12px + env(safe-area-inset-bottom));
  border-top: 2px solid #d4ecec;
  background-color: #e6f6f6;
  translate: 0 110%;
  visibility: hidden;
  transition: translate 300ms ease, visibility 0s linear 300ms;

  &.is-visible {
    translate: 0 0;
    visibility: visible;
    transition: translate 300ms ease;
  }

  & .l-floating-cta__inner {
    display: flex;
    gap: 12px;
    max-width: 720px;
    margin-inline: auto;

    /* 入会ボタンのみ(req_info=on) */
    &.-single {
      max-width: 520px;
    }

    @media (min-width: 768px) {
      gap: 20px;
    }
  }

  @media (min-width: 768px) {
    padding-block: 26px 14px;
  }
}

/* --- english banner (AI英会話バナー・ページ最下部) ---
 * 旧総合TOPの .english-banner を引き継いでいる。背景画像は旧TOPのものを参照 */
.l-sect-english {
  padding: 22px 17px 23px;
  background-image: url('/assets/top/images/english_banner_bg.webp');
  background-repeat: repeat;
  background-size: 375px auto;

  @media (min-width: 768px) {
    padding-block: 48px 64px;
    background-image: url('/assets/top/images/english_banner_bg_pc.webp');
    background-size: 1440px auto;
  }

  & .l-sect-english__inner {
    width: 100%;
    max-width: 1000px;
    margin-inline: auto;

    @media (min-width: 768px) {
      width: 90%;
    }
  }

  & .l-sect-english__title {
    color: #8f1d22;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 0.04em;
    line-height: 1.3;
    text-align: center;

    @media (min-width: 768px) {
      font-size: 32px;
    }

    /* SPは1行に収めるため、最後の1文字だけ詰める */
    & span {
      letter-spacing: -0.1em;

      @media (min-width: 768px) {
        letter-spacing: 0;
      }
    }
  }

  & .l-sect-english__link {
    display: block;
    margin-top: 14px;

    & picture {
      display: block;
      filter: drop-shadow(0 4px 10px rgb(43 34 35 / 0.2));
    }

    & img {
      width: 100%;
      height: auto;
    }

    @media (min-width: 768px) {
      margin-top: 15px;
    }
  }
}

/* --- footer ---
 * 旧総合TOPのフッター(info-footer.html)と見た目を揃えている。寸法・色は旧CSSの実測値。 */
.l-footer {
  --_line: #c8c8c8;
  font-family: var(--font-family-base);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.6;

  & a {
    transition: none;

    &:hover {
      opacity: 1;
    }
  }

  /* サイトマップ(薄グレー部分) */
  & .l-footer__sitemap {
    border-top: 2px solid #5c6166;
    background-color: #f7f7f7;
    color: #000;

    @media (min-width: 768px) {
      padding: 20px 0 50px;
    }
  }

  & .l-footer__container {
    @media (min-width: 768px) {
      width: 90%;
      max-width: 1000px;
      margin-inline: auto;
    }
  }

  & .l-footer__courses {
    @media (min-width: 768px) {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      margin-inline: -15px;
    }
  }

  /* SP: コース名 + ロゴの白い行 */
  & .l-footer__logo a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    border-bottom: 1px solid var(--_line);
    background-color: var(--color-white);
    color: #000;

    @media (min-width: 768px) {
      display: block;
      margin-inline: 15px;
      padding: 0;
      border: 0;
      background: none;
    }
  }

  & .l-footer__logo-name {
    font-size: 16px;
    font-weight: 700;
    line-height: 1;

    @media (min-width: 768px) {
      display: none;
    }
  }

  & .l-footer__logo img {
    display: block;
    width: auto;
    max-height: 24px;

    @media (min-width: 768px) {
      width: 160px;
      max-width: 160px;
      height: 42px;
      max-height: none;
      margin-inline: auto;
    }
  }

  /* PC: ロゴの下の区切り線 */
  & .l-footer__logo::after {
    @media (min-width: 768px) {
      content: '';
      display: block;
      height: 1px;
      margin: 20px 15px 0;
      background-color: var(--_line);
    }
  }

  & .l-footer__links {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    overflow: hidden;

    & li {
      position: relative;
      width: 50%;
      border-bottom: 1px solid var(--_line);

      &:nth-child(even) {
        border-right: 1px solid var(--_line);
      }
    }

    & .l-footer__links-top {
      width: 100%;
      border-right: 0;
    }

    & a {
      position: relative;
      display: block;
      padding: 10px 15px;
      color: #333;
      font-size: 12px;
      line-height: 1.6;

      &:active {
        background-color: #ebebeb;
      }

      /* SP: 右向きの山括弧 */
      &::after {
        content: '';
        position: absolute;
        top: 0;
        right: 15px;
        bottom: 0;
        width: 0.6em;
        height: 0.6em;
        margin-block: auto;
        border-top: 1px solid #808080;
        border-right: 1px solid #808080;
        transform: rotate(45deg);
      }
    }

    @media (min-width: 768px) {
      display: flow-root; /* 最後のliのmargin-bottomをulに含める */
      width: 83.3333%;
      margin: 20px 0 10px 8.3333%;
      padding: 0 15px;
      overflow: visible;
      border-top: 0;

      & li {
        width: auto;
        margin-bottom: 8px;
        border: 0;
        text-align: left;

        &:nth-child(even) {
          border: 0;
        }

        &::before {
          content: '\e080';
          margin-right: 0.3em;
          color: #ed7019;
          font-family: 'Glyphicons Halflings';
          font-size: 12px;
          font-style: normal;
          font-weight: 400;
        }
      }

      & .l-footer__links-top {
        display: none;
      }

      & a {
        display: inline;
        padding: 0;
        font-size: 13px;
        line-height: 1.6;
        color: #000;

        &::after {
          display: none;
        }

        &:hover {
          text-decoration: underline;
        }
      }
    }
  }

  & .l-footer__community {
    display: flex;
    justify-content: center;
    padding: 16px 0;

    & a {
      display: block;
      width: 148px;
      padding-inline: 8px;
    }

    & img {
      display: block;
      width: 100%;
      height: auto;
    }
  }

  & .l-footer__sns {
    display: flex;
    justify-content: center;
    width: 160px;
    margin-inline: auto;
    padding: 16px 0;

    & li {
      padding: 0 8px;
    }

    & img {
      display: block;
      width: 24px;
      height: 24px;
    }
  }

  /* 黒帯(法務リンク + コピーライト) */
  & .l-footer__bar {
    padding-bottom: 20px;
    background-color: #333;
    color: var(--color-white);
    font-size: 12px;
    line-height: 1.6;

    @media (min-width: 768px) {
      padding-top: 20px;
      text-align: center;
    }

    & a {
      color: var(--color-white);
    }
  }

  & .l-footer__legal {
    margin-bottom: 15px;

    @media (min-width: 768px) {
      margin-bottom: 20px;
    }

    & li {
      border-bottom: 1px solid #000;

      @media (min-width: 768px) {
        display: inline-block;
        padding: 0 15px;
        border: 0;
      }
    }

    & a {
      display: block;
      padding: 10px 15px;

      /* SP: 右向きのシェブロン */
      &::after {
        content: '\e080';
        float: right;
        font-family: 'Glyphicons Halflings';
        font-style: normal;
        font-weight: 400;
      }

      @media (min-width: 768px) {
        display: inline;
        padding: 0;

        &::after {
          display: none;
        }
      }

      /* 外部リンク: 別窓アイコン付き(矢印は出さない)。旧フッターの細字・グレーはやめ、他のリンクと同じ太さ・色にする */
      &.-external {
        position: relative;
        top: 1px;
        display: inline-block;

        &::after {
          content: '\e164';
          display: inline;
          float: none;
          margin-left: 0.4em;
          font-family: 'Glyphicons Halflings';
          font-size: 0.8em;
        }

        @media (min-width: 768px) {
          display: inline-block;

          &::after {
            display: inline;
          }
        }
      }
    }

    & .l-footer__legal-pc {
      display: none;

      @media (min-width: 768px) {
        display: inline-block;
      }
    }
  }

  & .l-footer__copyright {
    text-align: center;

    & img {
      display: block;
      width: 196px;
      height: auto;
      margin: 0 auto 5px;
    }

    & small {
      font-size: 85%;
    }
  }
}

/* ========================================
 * Vendor - Splide の見た目調整
 * ======================================== */
.top-renewal .splide__pagination {
  justify-content: center;
  bottom: auto;

  /* ページが1つしかないときはドットを出さない */
  &:has(li:only-child) {
    display: none;
  }

  & .splide__pagination__page {
    width: 8px;
    height: 8px;
    margin: 0;
    background-color: #d6d1ca;
    opacity: 1;

    &.is-active {
      background-color: var(--color-red);
      transform: none;
    }
  }
}

/* ========================================
 * Utilities - ユーティリティクラス
 * ======================================== */
/* 共通ユーティリティ(flex / mt-4 / md:hidden など)は common.min.css を使う。ここには追加しない。 */