/* ============================================================
   はるよかプログラミングスクール（/school）専用のスタイル

   トークン（色・フォント・--wrap など）と共通部品（.section .wrap
   .eyebrow .btn .info .contact .footer …）は style.css を使う。
   このファイルには /school にしか出てこないブロックだけを置く。

   配色・装飾は会社概要（Canva 制作の「はるよか会社概要」）に揃えている:
     - 地はクリームではなく、ほぼ無彩色の白
     - ロゴの黄（--accent）＋ 水色（--sky）の2色。丸いブロブと波形の区切りで使う
     - 英字ラベルは字間を広く取ったサンセリフ（Poppins）＋ 下に黄の短い線
     - スローガンだけ手書き風の和文（Yomogi）
   コーポレートのトップ（style.css の :root）には影響させないため、
   トークンの上書きはこのファイル（/school だけが読む）に置く。
   ============================================================ */

:root {
  --bg:         #FCFCFB;
  --surface:    #F1F9FC;   /* 交互の面は水色をごく薄く */
  --line:       #E6E8E8;
  --muted:      #5F6366;
  --accent:     #F8DF47;   /* ロゴの黄 */
  --accent-soft:#FBEB8C;
  --sky:        #A1E1F5;   /* 会社概要の水色 */
  --sky-soft:   #DDF3FB;
  /* 水色は文字色にすると薄すぎるので、小さな文字のアクセントにはこの濃い青を使う */
  --sky-ink:    #1C7BA4;
  --display: "Poppins", var(--sans);
  --hand: "Yomogi", var(--sans);
  --radius: 20px;
}

/* 英字ラベル: 会社概要の「OUR SERVICE」と同じく、字間の広いサンセリフ＋黄の短い線 */
.eyebrow { font-weight: 600; letter-spacing: 0.24em; color: var(--ink); }
.section__head .eyebrow::after {
  content: "";
  display: block;
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
  margin-top: 12px;
}
.section__title { letter-spacing: 0.06em; }
.brand__en, .footer__en, .footer__copy { font-weight: 500; }

/* ヘッダーの申込みボタンだけ黄で目立たせる */
.nav__cta { background: var(--accent); border-color: var(--accent); font-weight: 700; }
.nav__cta:hover { border-color: var(--ink); }

/* 交互の面は、上端を波形にして会社概要の柔らかい区切りに寄せる。
   data URI の SVG は CSS 変数を読めないので、色は --bg と同じ値を直書きしている。 */
.section--alt { position: relative; }
.section--alt::before {
  content: "";
  position: absolute;
  inset: -1px 0 auto;
  height: clamp(24px, 4vw, 48px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v22c-160 26-330 38-520 24C700 30 520 4 330 10 200 14 90 30 0 40z' fill='%23FCFCFB'/%3E%3C/svg%3E") top / 100% 100% no-repeat;
  pointer-events: none;
}

/* ===== ヒーロー（写真は全幅背景にせず、横に並べる） ===== */
/* 四隅に黄と水色の丸を置く（会社概要の表紙と同じ構図）。装飾なので擬似要素で持つ。 */
.shero { position: relative; overflow: hidden; background: var(--bg); }
.shero::before,
.shero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.shero::before {
  width: clamp(220px, 30vw, 420px);
  aspect-ratio: 1;
  background: var(--accent);
  top: clamp(-200px, -14vw, -110px);
  right: clamp(-160px, -9vw, -70px);
}
.shero::after {
  width: clamp(200px, 26vw, 360px);
  aspect-ratio: 1;
  background: var(--sky);
  bottom: clamp(-220px, -15vw, -120px);
  left: clamp(-180px, -11vw, -90px);
}
.shero__inner { position: relative; z-index: 1; padding-block: clamp(48px, 8vw, 92px); }
/* 見出しは幅いっぱいに置く。写真の横に入れると1行が折り返して読みにくくなるため。 */
.shero__head { margin-bottom: clamp(28px, 4vw, 44px); }
.shero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.shero__badge {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--ink);
  margin-bottom: 22px;
}
.shero__title {
  font-weight: 700;
  font-size: clamp(27px, 4.2vw, 46px);
  line-height: 1.45;
  letter-spacing: 0.01em;
  margin-bottom: 26px;
}
.shero__lead { color: var(--muted); font-size: clamp(15px, 1.8vw, 17px); margin-bottom: 36px; }
.shero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.shero__photo {
  /* 会社概要の表紙写真のように、左上だけ大きく丸めた有機的な形にする */
  border-radius: 46% 24px 24px 24px / 38% 24px 24px 24px;
  overflow: hidden;
  aspect-ratio: 3 / 2;
}
.shero__photo img { width: 100%; height: 100%; object-fit: cover; }

/* ===== カリキュラムの出どころ ===== */
.curriculum {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
}
.curriculum__logo { width: clamp(180px, 22vw, 230px); height: auto; margin-bottom: 26px; }
.curriculum__body p { font-size: clamp(15px, 1.9vw, 17px); color: var(--muted); }
.curriculum__body p + p { margin-top: 1.3em; }
.curriculum__body b { color: var(--ink); font-weight: 700; }
.curriculum__facts {
  list-style: none;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(22px, 3vw, 32px);
  display: grid;
  gap: 22px;
}
.curriculum__key {
  display: block;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--sky-ink);
  font-weight: 700;
  margin-bottom: 6px;
}
.curriculum__facts p { font-size: 14.5px; }

/* ===== 開校スケジュール ===== */
.sched { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 32px); }
.sched li {
  list-style: none;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(24px, 3vw, 34px);
}
.sched li { border-top: 6px solid var(--accent); }
.sched li:nth-child(2) { border-top-color: var(--sky); }
.sched__when { font-family: var(--display); font-weight: 500; font-size: 13px; letter-spacing: 0.14em; color: var(--muted); }
.sched__what { font-size: 21px; font-weight: 700; margin: 10px 0 12px; }
.sched li p { color: var(--muted); font-size: 15px; }

/* 開校記念の特典。いちばん目立たせたい情報なので「クーポン券」に見立てる:
     - 黄の券面の左右に丸い切り欠き（地の色の円を背景に重ねて表現）
     - 内側に点線のミシン目、右上に傾いたスタンプ
     - 特典は点線で区切って横に3つ並べ、「無料」「半額」を大きく見せる
   切り欠きの円は地の色（--bg）で描くので、置く面は --bg のセクションに限る。 */
.campaign {
  --notch: 18px;
  --perf: color-mix(in srgb, var(--ink) 30%, transparent);
  position: relative;
  margin-top: clamp(36px, 5vw, 56px);
  padding: clamp(30px, 4vw, 48px) clamp(26px, 4.4vw, 56px);
  border-radius: 24px;
  color: var(--ink);
  background:
    radial-gradient(circle at 0 50%, var(--bg) 0 var(--notch), transparent calc(var(--notch) + 1px)),
    radial-gradient(circle at 100% 50%, var(--bg) 0 var(--notch), transparent calc(var(--notch) + 1px)),
    var(--accent);
}
/* ミシン目 */
.campaign::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 2px dashed var(--perf);
  border-radius: 16px;
  pointer-events: none;
}
/* 右上のスタンプ */
.campaign__stamp {
  position: absolute;
  top: -26px;
  right: clamp(18px, 4vw, 44px);
  width: clamp(84px, 9vw, 104px);
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  text-align: center;
  border-radius: 50%;
  background: var(--sky);
  border: 3px solid var(--ink);
  rotate: 12deg;
  font-family: var(--display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.16em;
  line-height: 1.3;
}
.campaign__stamp b { display: block; font-size: clamp(14px, 1.6vw, 17px); letter-spacing: 0.04em; }
.campaign__label {
  position: relative;
  font-family: var(--display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.24em;
  margin-bottom: clamp(20px, 3vw, 30px);
}
.campaign__label span {
  display: block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(24px, 3.4vw, 36px);
  letter-spacing: 0.06em;
  margin-top: 6px;
}
.campaign__items {
  position: relative;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.campaign__items li {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 10px;
  padding: 4px clamp(16px, 2.6vw, 30px);
}
.campaign__items li:first-child { padding-left: 0; }
.campaign__items li + li { border-left: 2px dashed var(--perf); }
/* 項目名は黒地に黄の小さな札 */
.campaign__what {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--accent);
}
.campaign__deal { font-size: clamp(15px, 1.7vw, 17px); font-weight: 700; line-height: 1.4; }
.campaign__deal s {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: color-mix(in srgb, var(--ink) 60%, transparent);
}
/* 特典そのもの（無料・半額・PC バッグ）。白の影をずらして、券面から浮かせる */
.campaign__deal em {
  display: block;
  font-style: normal;
  font-size: clamp(40px, 5.4vw, 60px);
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-shadow: 3px 3px 0 var(--bg);
}
/* 「オリジナルPCバッグ」は長いので一段小さくし、「オリジナル」と「PCバッグ」の間以外では折り返さない */
.campaign__items li:last-child .campaign__deal em { font-size: clamp(24px, 3vw, 32px); word-break: keep-all; margin-bottom: 4px; }

/* ===== コース ===== */
.courses { display: grid; gap: clamp(20px, 3vw, 28px); }
.course {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: clamp(24px, 4vw, 48px);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(24px, 3.4vw, 40px);
}
.course__target {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--sky-soft);
  color: var(--sky-ink);
}
.course__name { font-size: clamp(20px, 2.6vw, 26px); font-weight: 700; margin: 8px 0 14px; }
.course__desc { color: var(--muted); font-size: 15px; margin-bottom: 22px; }
.course__learn { list-style: none; display: grid; gap: 10px; }
.course__learn li { font-size: 14.5px; padding-left: 1.3em; position: relative; }
/* 箇条書きの点は文字ではなく擬似要素で置く（読み上げで「・」を読ませない） */
.course__learn li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.course__learn b { display: block; font-weight: 700; font-size: 13px; color: var(--sky-ink); }
/* 改行を文節の切れ目に寄せる（対応ブラウザのみ。HTML 側の <wbr> も切れ目の候補になる） */
.course__desc,
.course__learn li,
.lab__intro,
.lede { word-break: auto-phrase; }
.course__meta {
  align-self: start;
  background: var(--surface);
  border: 1px solid var(--sky-soft);
  border-radius: 12px;
  padding: 22px 24px;
}
.course__meta dl { display: grid; gap: 14px; }
.course__meta dt { font-size: 12px; letter-spacing: 0.08em; color: var(--muted); }
.course__meta dd { font-size: 16px; font-weight: 700; }
.course__fee { font-size: clamp(22px, 2.6vw, 27px); }
.course__fee span { font-size: 14px; font-weight: 400; color: var(--muted); margin-left: 4px; }

/* ===== 会員制自習室 ===== */
.lab { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px, 5vw, 56px); align-items: center; }
.lab__photo { border-radius: 24px 46% 24px 24px / 24px 38% 24px 24px; overflow: hidden; aspect-ratio: 3 / 2; }
.lab__photo img { width: 100%; height: 100%; object-fit: cover; }
.lab__list { list-style: none; display: grid; gap: 20px; margin-bottom: 32px; }
.lab__list h3 { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.lab__list p { color: var(--muted); font-size: 15px; }
.lab__fee {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 16px;
  border-top: 3px solid var(--accent);
  padding-top: 20px;
}
.lab__fee dt { font-size: 15px; font-weight: 700; }
.lab__fee dd { font-size: clamp(26px, 3.4vw, 34px); font-weight: 700; }
.lab__fee dd span { font-size: 14px; font-weight: 400; color: var(--muted); margin-left: 4px; }

/* ===== 無料体験の流れ ===== */
.flow { list-style: none; border-top: 1px solid var(--line); }
.flow > li {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 24px;
  padding: 24px 4px;
  border-bottom: 1px solid var(--line);
}
/* 「60〜70分」「同時進行」と和文が混ざるので、英字用の --display は使わない */
.flow__time {
  justify-self: start;
  align-self: start;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--ink);
}
.flow > li:last-child .flow__time { background: var(--sky); }
.flow h3 { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.flow p { color: var(--muted); font-size: 15px; }

/* 強調の下線。ヒーローの「小学1年生から中学3年生」と、無料体験の注記の大事な語句に使う。
   <mark> の黄マーカーとは別の強調として使い分ける */
.uline {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 4px;
  text-underline-offset: 5px;
  color: var(--ink);
  font-weight: 700;
}
/* 注記は文字が小さいので、下線も細く・近くする */
.notes .uline { text-decoration-thickness: 3px; text-underline-offset: 4px; }

/* 自習室の「学童のその先」の説明 */
.lab__intro {
  max-width: 44em;
  color: var(--muted);
  font-size: clamp(15px, 1.9vw, 16.5px);
  line-height: 1.95;
  margin: -12px 0 clamp(32px, 5vw, 48px);
}

/* カリキュラム: CodeCampKIDS 公式サイトへのリンク */
.curriculum__link { margin-top: 28px; }

/* FAQ の回答内の注記 */
.faq__a small { display: block; margin-top: 8px; font-size: 13px; }

/* 教室案内の開講日時: 曜日を1行目に出し、コースごとの時間を2列で揃える */
.hours__days {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--ink);
  margin-bottom: 12px;
}
.hours {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr auto auto;   /* コース名 ｜ 時間 ｜ ◯分 */
  gap: 8px 16px;
}
/* 各行は親の列を共有する（subgrid）。時間・◯分の列が2行で同じ幅・同じ位置になり、数字の頭が揃う
   （Poppins には等幅数字が無いので、列で揃えるしかない） */
.hours li {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: baseline;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--line);
}
.hours li:last-child { padding-bottom: 0; border-bottom: 0; }
.hours__course { color: var(--ink); font-weight: 700; white-space: nowrap; }
.hours__time {
  font-family: var(--display);
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}
.hours__len { font-size: 12px; color: var(--muted); white-space: nowrap; }

/* ===== お問い合わせ（ページ下部）=====
   フォームの部品（.cform*）は style.css の共通のものを使う。あちらは会社サイトの
   黒い面に合わせた配色（入力文字が白）なので、白い面のこのページでは色だけ上書きする。 */
.inquiry .cform { max-width: 640px; }
.inquiry .cform__label { color: var(--ink); font-weight: 700; }
.inquiry .cform__input {
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
}
.inquiry .cform__input:focus {
  border-color: var(--ink);
  background: #fff;
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.inquiry .cform__submit { justify-self: start; }
.inquiry__note { margin-top: 20px; font-size: 13px; color: var(--muted); max-width: 640px; }
/* 文中のリンク。周りの文字と同じ見た目だと押せると気づかれないので、
   色・太字・下線・矢印の4つで「リンクである」ことを示す。ボタン（.btn）とナビには使わない */
.tlink {
  color: var(--sky-ink);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
.tlink::after {
  content: "→";
  display: inline-block;
  margin-left: 4px;
  transition: translate .15s ease;
}
.tlink:hover { color: var(--ink); }
.tlink:hover::after { translate: 3px 0; }
/* 黄の面（申込み欄）では青が読みにくいので黒にする */
.contact .tlink { color: var(--ink); }

/* ===== 送信完了ページ（school/contact-thanks.html）=====
   .thanks の骨格は style.css の共通のもの。イラストと、戻る／申込みの2つのボタンだけ足す */
.thanks__illust { width: clamp(150px, 20vw, 220px); height: auto; margin-bottom: 28px; }
.thanks__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

/* 料金表の端末レンタル: スポット／サブスクを札付きで並べる */
.plans { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 24px; }
.plans li { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.plans__name {
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--sky-soft);
  color: var(--sky-ink);
}
.plans__note { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); }

/* ===== 駐車場のご案内（school/parking.html）===== */
.parking__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(20px, 3vw, 32px);
  align-items: stretch;
  margin-bottom: clamp(20px, 3vw, 28px);
}
.parking__card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(24px, 3.4vw, 36px);
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 14px;
}
.parking__card--main { border-top: 6px solid var(--accent); }
.parking__tag {
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--accent);
}
.parking__spots-label { font-size: 13px; color: var(--muted); margin-bottom: -6px; }
/* 区画番号は、現地で看板と見比べやすいよう大きく出す */
.parking__spots { display: flex; gap: 14px; }
.parking__no {
  display: grid;
  place-items: center;
  grid-auto-flow: column;
  align-items: baseline;
  min-width: 96px;
  padding: 10px 18px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(44px, 6vw, 60px);
  line-height: 1;
}
.parking__no small { font-family: var(--sans); font-size: 16px; font-weight: 700; margin-left: 4px; }
.parking__where { font-weight: 700; }
.parking__addr { font-weight: 400; font-size: 14px; color: var(--muted); }
.parking__warn { font-size: 14px; color: var(--muted); }
.parking__map {
  margin: 0;
  border-radius: var(--radius);
  border: 3px solid var(--ink);
  overflow: hidden;
  background: #F3F0E8;
}
.parking__map img { display: block; width: 100%; height: auto; }
.parking__caption { font-size: 12px; color: var(--muted); text-align: center; padding: 8px; background: var(--bg); border-top: 1px solid var(--line); }
/* 道順 ①〜③（案内図の番号と対応） */
.parking__route,
.parking__lot { margin-bottom: clamp(20px, 3vw, 28px); }
.parking__lot-lead { color: var(--muted); font-size: 15px; margin-bottom: 14px; }
.parking__lot-lead b { color: var(--ink); }
.parking__lot .parking__map { max-width: 720px; }
.parking__route-title { font-size: clamp(18px, 2.2vw, 22px); font-weight: 700; margin-bottom: 14px; }
.parking__route-title span { font-size: 14px; font-weight: 700; color: var(--muted); margin-left: 12px; }
.parking__steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.parking__steps li {
  counter-increment: step;
  position: relative;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 20px 20px 64px;
  font-size: 14px;
  color: var(--muted);
}
.parking__steps li::before {
  content: counter(step);
  position: absolute;
  left: 18px;
  top: 18px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--accent);
  font-family: var(--display);
  font-weight: 600;
}
.parking__steps b { display: block; color: var(--ink); font-size: 15px; margin-bottom: 4px; }
.parking__back { margin-top: clamp(28px, 4vw, 40px); }
/* 注記の中のリンクは、前の文と少し離す */
.notes .tlink { margin-left: 6px; text-indent: 0; }

/* 時刻や電話番号が途中で折り返さないようにする */
.nowrap { white-space: nowrap; }

/* ===== 福岡市子ども習い事応援事業 =====
   料金の欄はロゴと説明を白い札にまとめる */
/* ヒーロー: 申込みボタンの下に、ロゴ（図A・背景透過）を枠なしで大きく置く。
   ロゴは規約で改変禁止なので、画像そのものには何もかけない（大きさを変えるだけ） */
.shero__ouen {
  display: inline-block;
  margin-top: clamp(32px, 4vw, 44px);
  color: var(--ink);
  text-decoration: none;
}
/* 画像は四辺に透明な余白（左右 3.7%・上下 14% 前後）を含むので、左端をボタンに揃え、上下を詰めるため
   余白の分だけ負のマージンで戻す（画像そのものは切り抜かない） */
.shero__ouen { --logo-w: clamp(280px, 34vw, 420px); }
.shero__ouen img {
  display: block;
  width: var(--logo-w);
  max-width: 100%;
  height: auto;
  margin: calc(var(--logo-w) * -0.038) 0 calc(var(--logo-w) * -0.03) calc(var(--logo-w) * -0.037);
}
.shero__ouen-label {
  display: inline-block;
  margin-top: 10px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--accent-soft);
  font-size: 13px;
  font-weight: 700;
}
.shero__ouen-label::after { content: "→"; margin-left: 6px; display: inline-block; transition: translate .15s ease; }
.shero__ouen:hover .shero__ouen-label::after { translate: 3px 0; }
/* 料金の欄: 詳しい説明 */
.ouen {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 36px);
  margin-top: clamp(28px, 4vw, 40px);
  padding: clamp(18px, 2.6vw, 26px) clamp(20px, 3vw, 32px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  scroll-margin-top: 100px;
}
.ouen__logo { flex: 0 0 auto; width: clamp(220px, 30vw, 320px); height: auto; }
.ouen__title { font-weight: 700; font-size: clamp(15px, 1.9vw, 17px); }
.ouen__text { margin-top: 6px; color: var(--muted); font-size: 14px; line-height: 1.9; }
.ouen__text .tlink { margin-left: 4px; }
.ouen__note { margin-top: 4px; color: var(--muted); font-size: 13px; }
@media (max-width: 620px) {
  .ouen { flex-direction: column; align-items: flex-start; }
  .ouen__logo { width: min(100%, 300px); }
}

/* ===== 注意書き・補足 ===== */
.notes { list-style: none; display: grid; gap: 8px; margin-top: clamp(20px, 3vw, 28px); }
.notes li { color: var(--muted); font-size: 14px; padding-left: 1.2em; text-indent: -1.2em; }
.notes li::before { content: "※ "; }

/* ===== よくあるご質問（JS を使わず details で開閉する） ===== */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 44px 22px 4px;
  font-weight: 700;
  font-size: 16px;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
/* 開閉マーク。+ の横棒を回して × ではなく − に見せる */
.faq summary::after,
.faq summary::before {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 14px;
  height: 2px;
  background: var(--ink);
  transition: transform .2s ease;
}
.faq summary::before { transform: rotate(90deg); }
.faq details[open] summary::before { transform: rotate(0deg); }
.faq__a { color: var(--muted); font-size: 15px; padding: 0 44px 24px 4px; }

/* ===== 教室のご案内 ===== */
.classinfo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 56px); align-items: start; }
/* 共通の .info は1カラム幅で使う想定なので、2カラムに入れる分だけ見出し列を詰める */
.classinfo .info > div { grid-template-columns: 96px 1fr; gap: 16px; }
.classinfo .info dd .btn { margin-top: 12px; }
.classinfo__map {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  border: 4px solid var(--sky-soft);
  background: var(--surface);
  overflow: hidden;
}
.classinfo__map iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ===== 教育方針（3本柱）: 会社概要の「3つの特徴」と同じ、黄・水色・黄の番号の丸 ===== */
.pillars { counter-reset: pillar; }
.pillars li { border-top: 0; padding-top: 0; counter-increment: pillar; }
.pillars li::before {
  content: counter(pillar, decimal-leading-zero);
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent);
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 18px;
}
.pillars li:nth-child(2)::before { background: var(--sky); }
.pillars__en { font-weight: 600; font-size: 12px; color: var(--sky-ink); }

/* ===== よくあるご質問: 開閉マークを水色の丸に乗せる ===== */
.faq summary { padding-right: 56px; }
/* 丸は上端基準（top: 17px）なので、＋も上端基準で丸の中心（17 + 40/2 − 線の太さ/2）に置く。
   top: 50% のままだと質問が2行になったとき＋だけ下にずれる */
.faq summary::after,
.faq summary::before { right: 17px; top: 36px; }
.faq details { position: relative; }
.faq details::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 17px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sky-soft);
  z-index: -1;
}
.faq { position: relative; z-index: 0; }

/* ===== 申込み（最下部の CTA）: 黒地をやめ、会社概要のスローガン面と同じ黄の波にする ===== */
.contact { position: relative; background: var(--accent); color: var(--ink); overflow: hidden; }
.contact::before {
  content: "";
  position: absolute;
  inset: -1px 0 auto;
  height: clamp(28px, 5vw, 64px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v36c-150-30-310-40-500-18C740 40 560 52 380 34 230 20 110 10 0 22z' fill='%23F1F9FC'/%3E%3C/svg%3E") top / 100% 100% no-repeat;
}
/* 右下に水色の丸をのぞかせる */
.contact::after {
  content: "";
  position: absolute;
  width: clamp(160px, 22vw, 300px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--sky);
  right: clamp(-150px, -9vw, -60px);
  bottom: clamp(-150px, -9vw, -60px);
}
.contact__inner { position: relative; z-index: 1; }
.contact .eyebrow { color: var(--ink); }
.contact__lead, .contact__note { color: color-mix(in srgb, var(--ink) 78%, transparent); }
.contact .btn--primary { background: var(--ink); color: var(--bg); }
.contact .btn--primary:hover { background: #000; }

/* スローガン（手書き風）。会社概要の裏表紙のコピーをそのまま使う */
.slogan {
  font-family: var(--hand);
  font-size: clamp(20px, 3.2vw, 30px);
  line-height: 1.7;
  letter-spacing: 0.08em;
  margin-bottom: clamp(20px, 3vw, 28px);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 860px) {
  .parking__grid { grid-template-columns: 1fr; }
  .parking__steps { grid-template-columns: 1fr; }
  .curriculum { grid-template-columns: 1fr; }
  .shero__grid { grid-template-columns: 1fr; }
  .shero__visual { order: -1; }
  .course { grid-template-columns: 1fr; }
  .lab { grid-template-columns: 1fr; }
  .lab__photo { order: -1; }
  .classinfo { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  /* 左下の水色の丸が「採用カリキュラム」に重ならないよう、小さくして本文の下へ逃がす */
  .shero__inner { padding-bottom: 96px; }
  .shero::after { width: 150px; bottom: -90px; left: -60px; }
  /* 「小中学生のプログラミングスクール。」が1行に収まる大きさまで落とす
     （収まらないと「ル。」だけが次行に落ちる） */
  .shero__title { font-size: clamp(20px, 5vw, 30px); }
  .sched { grid-template-columns: 1fr; }
  .flow > li { grid-template-columns: 1fr; gap: 6px; padding: 20px 4px; }
  .campaign { --notch: 14px; padding-top: 40px; }
  .campaign__stamp { top: -22px; right: 14px; width: 76px; font-size: 10px; }
  .campaign__items { grid-template-columns: 1fr; }
  .campaign__items li { padding: 18px 0; }
  .campaign__items li:first-child { padding-top: 0; }
  .campaign__items li + li { border-left: 0; border-top: 2px dashed var(--perf); }
  /* 開講日時: 「Scratch・Unity コース 17:00〜18:15 75分」が1行に収まる大きさまで落とす */
  .hours { column-gap: 8px; }
  .hours li { font-size: 12.5px; }
  .hours__time { font-size: 13px; }
  .hours__len { font-size: 10.5px; }
}

/* 小さいスマホ（360px 前後）では、教室案内の項目名の列（96px）に幅を取られて
   開講日時が1行に収まらないので、料金表と同じく項目名の下に中身を置く縦並びにする */
@media (max-width: 400px) {
  .classinfo .info > div { grid-template-columns: 1fr; gap: 8px; }
}