:root {
      --red:    #FD3C26;
      --sky:    #74D1F5;
      --white:  #ffffff;
      --dark:   #1a1a1a;
      --yellow: #FFFB96;
    }

    .site-wrap, .site-wrap *, .site-wrap *::before, .site-wrap *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    .site-wrap {
      position: relative;
      max-width: 1440px;
      margin: 0 auto;
      font-family: 'Noto Sans JP', sans-serif;
      color: var(--dark);
    }

    /* =====================
       背景デコレーション
       すべて position:absolute
       z-index: 0（コンテンツより背面）
    ===================== */

    /* 共通：丸の基本スタイル */
    .deco-circle {
      position: absolute;
      border-radius: 50%;
      z-index: 0;
      pointer-events: none;
    }

    /* 共通：写真丸の基本スタイル */
    .deco-photo {
      position: absolute;
      z-index: 0;
      object-fit: cover;
    }

    /*
      =========================================
      各デコ要素の配置
      top: ページ上端からの距離（px）
      left / right: サイトラッパー端からの距離
      =========================================

      【bg.pngの読み取り結果】
      画像サイズ：横480px × 縦約2200px相当

      ① 左上 赤大丸    top:120  left:-55   size:160px  ← ヒーロー下に大きくはみ出す
      ② 右上 写真丸    top:80   right:-20  size:140px  ← 右上授業写真
      ③ 右中 赤中丸    top:430  right:-35  size:120px  ← 右側にはみ出す赤丸
      ④ 左中 写真丸    top:600  left:-25   size:130px  ← 左側生徒写真
      ⑤ 中央右 写真小丸 top:700  left:55%   size:75px   ← 中央右寄り小さい写真
      ⑥ 中央 水色大丸  top:820  left:50%   size:135px  ← センター水色
        ※ transform:translateX(-50%) でセンタリング
      ⑦ 右下 写真丸    top:1010 right:-20  size:125px  ← 右側写真丸
      ⑧ 左下 赤大丸    top:1080 left:-45   size:150px  ← 左側大きな赤丸
      ⑨ 右最下 水色大丸 top:1350 right:-50  size:160px  ← 右にはみ出す水色大丸
      ⑩ 左最下 写真丸  top:1480 left:-25   size:120px  ← 左下授業写真
    */

    .deco-0 {
      width: 600px; height: 600px;
      background-color: var(--sky);
      top: -479px; left: 375px;
      border: 2px solid var(--red);
    }

    /* ① 左上 赤大丸 */
    .deco-1 {
      width: 500px; height: 500px;
      background: var(--red);
      top: 180px; left: -185px;
      border: 2px solid var(--sky);
    }

    .deco-1-1 {
      width: 208px;
      top: 621px; left: 123px;
      border-radius: 50%;
      object-fit: cover;
    }

    /* ② 右上 写真丸（ヒーロー右の授業写真） */
    .deco-2 {
      width: 480px;
      top: 418px; left: 1056px;
    }

    /* ③ 右中 赤中丸 */
    .deco-3 {
      width: 400px; height: 400px;
      background: var(--red);
      top: 1300px; left: 1200px;
      border: 2px solid var(--sky);
    }

    /* ④ 左中 写真丸（生徒の背中） */
    .deco-4 {
      width: 330px;
      top: 1375px; left: -150px;
    }


    /* =====================
       コンテンツレイヤー
       z-index: 1 でデコより前面
    ===================== */
    .content-layer {
      position: relative;
      z-index: 1;
    }

    /* =====================
       HERO
    ===================== */
    .hero {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    .hero-bg-left {
      position: absolute;
      left: 100px; top: 30px; bottom: 0;
      width: 240px;
      object-fit: cover;
    }
    .hero-bg-right {
      position: absolute;
      right: 0; top: 0; bottom: 0;
      width: 300px;
      object-fit: cover;
    }

    .hero::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 1;
    }

    .hero-body {
      position: relative;
      z-index: 2;
      padding-top: 134px;
      width: 100%;
    }

    .intro-box {
      margin-left: 15%;
      width: 70%;
      margin-top: 56px;
      padding: 50px 30px;
      color: var(--dark);
      font-size: 20px;
      line-height: 1.5;
      text-align: center;
      border: 1px solid var(--dark);
      border-radius: 40px;
      background-color: #ffffff;
      box-shadow: 0 15px 0 var(--dark);
    }

    .intro-box-title {
      font-size: 24px;
      font-weight: 700;
      text-align: center;
      margin-bottom: 24px;
      color: var(--dark);
    }

    .intro-box-title .bold {
      font-weight: 900;
    }

    /* =====================
       CARDS SECTION
    ===================== */
    .cards-section {
      margin-top: 155px;
      padding: 80px 40px;
      position: relative;
    }

    .cards-row {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 16px;
      margin-bottom: 16px;
      position: relative;
      z-index: 1;
    }

    .card {
      border: 2px solid var(--dark);
      border-radius: 16px;
      overflow: hidden;
      background: var(--white);
      display: flex;
      flex-direction: column;
    }

    .card.card-red {
      background: var(--red);
      display: flex;
      align-items: center;
    }

    .card.card-blue {
      background: var(--sky);
      display: flex;
      align-items: center;
    }

    .card-image {
      margin-top: 20px;
      width: 90%;
      border-radius: 10px;
      aspect-ratio: 16/9;
      background: #D9D9D9;
      flex-shrink: 0;
    }

    .card-body {
      padding: 14px 6px 0;
      flex: 1;
      display: flex;
      flex-direction: column;
      text-align: center;
    }

    .card.card-red .card-body {
      background: var(--red);
      color: var(--white);
    }

    .card.card-blue .card-body {
      background: var(--sky);
      color: var(--white);
    }

    .card-catchcopy {
      font-size: 16px;
      font-weight: 700;
      line-height: 1.6;
      margin-bottom: 10px;
      min-height: 86px;
      span {
        font-size: 12px;
      }
    }

    .card-school {
      font-size: 15px;
      font-weight: 500;
      margin-bottom: 25px;
      color: var(--dark);
    }

    .card-btn-wrap {
      padding: 0 14px 16px;
    }

    .card.card-red .card-btn-wrap {
      background: var(--red);
    }

    .card.card-blue .card-btn-wrap {
      background: var(--sky);
    }

    .card-btn {
      display: block;
      width: 100%;
      padding: 12px 20px;
      background: var(--yellow);
      border: 2px solid var(--dark);
      border-radius: 10px;
      text-align: center;
      font-size: 16px;
      font-weight: 700;
      color: var(--dark);
      cursor: pointer;
      text-decoration: none;
      line-height: 1.4;
    }

    .card-btn:hover {
      background: #EAE682;
    }

    /* カードとカードの間の余白（デコ円が入る空間） */
    .gap-sm { height: 28px; }
    .gap-md { height: 50px; }
    .gap-lg { height: 70px; }

    /* =====================
       FOOTER
    ===================== */
    .appeal-footer {
      text-align: center;
      padding: 26px 20px 36px;
    }
    .footer-title {
      font-family: 'Noto Sans JP', sans-serif;
      /* 画面幅に応じて拡大縮小（最小40px〜最大128px） */
      font-size: clamp(40px, 11vw, 128px);
      font-weight: 700;
      line-height: 1;
      word-break: break-word;
    }
    .ft-osaka       { color: var(--red); }
    .ft-prefectural { color: var(--dark); }
    .ft-high        { color: var(--sky); }
    .ft-school      { color: var(--dark); }
    /* =========================================================
       レスポンシブ対応（スマホ・タブレット）
       画面幅が狭くなるほどカラム数を減らし、
       位置固定のデコ円は崩れるため途中で非表示にする
    ========================================================= */

    /* 画像がはみ出さないように共通で保険をかける */
    .site-wrap img { max-width: 100%; }
    .hero-body > img { height: auto; }

    /* ---- 〜1200px：カードを6列→4列 ---- */
    @media (max-width: 1200px) {
      .cards-row { grid-template-columns: repeat(4, 1fr); }
    }

    /* ---- 〜992px：3列。デコ円と授業写真は非表示に ---- */
    @media (max-width: 992px) {
      .cards-row { grid-template-columns: repeat(3, 1fr); }

      /* 位置がずれて崩れる装飾を隠す */
      .deco-circle,
      .deco-photo,
      .hero-bg-left,
      .hero-bg-right { display: none; }

      .cards-section { margin-top: 40px; padding: 40px 24px; }
      .hero-body { padding-top: 40px; }

      .intro-box {
        margin-left: auto;
        margin-right: auto;
        width: 90%;
      }
    }

    /* ---- 〜640px：2列（スマホ標準） ---- */
    @media (max-width: 640px) {
      .cards-row { grid-template-columns: repeat(2, 1fr); gap: 12px; }
      .cards-section { padding: 32px 16px; }

      .intro-box {
        width: 92%;
        padding: 28px 18px;
        font-size: 15px;
        margin-top: 32px;
        box-shadow: 0 8px 0 var(--dark);
      }
      .intro-box-title { font-size: 18px; margin-bottom: 16px; }
      /* PC幅向けに置かれた改行を無効化し、自然に折り返す */
      .intro-box-text br { display: none; }

      .card-catchcopy { font-size: 14px; min-height: 0; }
      .card-catchcopy span { font-size: 11px; }
      .card-school { font-size: 13px; margin-bottom: 18px; }
      .card-image { width: 88%; }
      .card-btn { font-size: 14px; padding: 10px 8px; }
      .card-btn-wrap { padding: 0 10px 14px; }

      .appeal-footer { padding: 20px 16px 28px; }
    }

    /* ---- 〜380px：極小画面は1列にして余裕を持たせる ---- */
    @media (max-width: 380px) {
      .cards-row { grid-template-columns: 1fr; }
      .card-image { width: 70%; }
    }

.credit-note {
  text-align: right;
  font-size: 12px;
  line-height: 1.6;
  color: var(--dark);
  padding: 0 40px 24px;
  max-width: 1440px;
  margin: 0 auto;
}

@media (max-width: 992px) {
  .credit-note { padding: 0 24px 20px; }
}

@media (max-width: 640px) {
  .credit-note { font-size: 11px; padding: 0 16px 16px; text-align: right; }
}