@charset "UTF-8";
/* ==========================================================================
   kumon.css — 宝達志水教室ページ（kyoiku/index.html）専用スタイル
   ========================================================================== */

/* ==========================================================================
   このページだけの配色（チラシに合わせた緑）
   --------------------------------------------------------------------------
   共通CSS（common.css）の色はすべて CSS変数で指定しているため、
   body[data-page="kumon"] で変数を上書きすると、ヘッダー・フッターまで
   含めて「このページだけ」緑になります。他のページには影響しません。

   色を変えたいときは、下の --g-◯◯ の5色だけ書き換えてください。
   ========================================================================== */
body[data-page="kumon"] {
  --g-main:  #3ab460;   /* 帯・リボン（チラシの「生徒募集」の緑） */
  --g-dark:  #229d3a;   /* 見出しの文字・枠線・濃い帯 */
  --g-light: #bbda95;   /* 淡い黄緑（入塾までの流れ） */
  --g-pale:  #f0f6ed;   /* 薄い緑の背景 */
  --g-badge: #f6ec45;   /* チラシの黄色（現在は画像を使用） */

  /* ↓ 共通CSSが参照している変数を、上の緑に置き換えています */
  --navy:        var(--g-dark);   /* 見出し・強調の文字 */
  --navy-dark:   #2c8330;         /* 黄色の上に乗る文字 */
  --navy-footer: var(--g-dark);   /* フッターの背景 */
  --navy-light:  var(--g-dark);   /* おためし学習会セクションの背景 */
  --blue-text:   var(--g-dark);   /* 見出しの色 */
  --ribbon:      var(--g-main);   /* リボン型の小見出し */
  --edu-blue:    var(--g-main);   /* ページトップへ戻るボタン */
  --edu-blue-hover: #4ec276;      /* 同・マウスを乗せたとき（明るい緑） */
  --pale-blue:   var(--g-pale);   /* 薄い背景 */
  --pale-blue-2: #e7f1e2;         /* 施設カードの背景 */
  --pill-blue:   #e3f2da;         /* ラベル（ピル）の背景 */
  --line:        #cfe3c6;         /* 罫線 */
}

/* ヘッダーは明るい緑、フッターは濃い緑にします
   （変数 --navy はページ内の文字色にも使うため、背景はここで個別に指定） */
body[data-page="kumon"] .site-header { background: var(--g-main); }

/* --------------------------------------------------------------------------
   ページタイトル
   -------------------------------------------------------------------------- */
.page-head {
  background: var(--white);
  padding-block: 18px;
}

.page-head__inner {
  display: flex;
  align-items: center;
  gap: 28px;
}

.page-head__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 10px;
  line-height: 1.25;
}

.page-head__name {
  font-size: 2.9rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--navy);
}

/* 開講バッジはチラシから支給された画像です。
   --badge-size を変えると大きさが変わります（画像は正方形）。 */
.page-head__badge {
  --badge-size: 102px;

  flex-shrink: 0;
  width: var(--badge-size);
  line-height: 0;
}

.page-head__badge img { width: 100%; height: auto; }


/* --------------------------------------------------------------------------
   メインビジュアル
   -------------------------------------------------------------------------- */
/* 40.625vw = 画像（1600×650）の比率。
   ※ aspect-ratio と max-height を併用すると、高さが上限に達したときに
      幅もその比率まで縮み、右側に余白ができてしまいます。
      それを避けるため height を clamp で指定しています。 */
.kumon-hero {
  width: 100%;
  height: clamp(240px, 40.625vw, 650px);
}

.kumon-hero__catch {
  position: absolute;
  top: 12%;
  left: 6%;
  display: flex;
  gap: 12px;
}

.kumon-hero__catch span {
  display: grid;
  place-content: center;
  width: clamp(52px, 9vw, 104px);
  height: clamp(52px, 9vw, 104px);
  /* チラシに合わせて緑地・白文字 */
  background: var(--g-main);
  border-radius: 9px;
  color: var(--white);
  font-size: clamp(2rem, 6.4vw, 4.6rem);
  font-weight: 700;
  line-height: 1;
}

.kumon-hero__caption {
  position: absolute;
  right: 20px;
  bottom: 22px;
  padding: 6px 18px;
  font-size: .95rem;
  font-weight: 700;
  color: var(--white);
  background: var(--g-main);
}

/* --------------------------------------------------------------------------
   教室概要 / 担当講師
   -------------------------------------------------------------------------- */
.outline-block { background: var(--pale-blue); }

.lead-catch {
  margin-bottom: 34px;
  font-size: 1.55rem;
  font-weight: 700;
  text-align: center;
  text-wrap: balance;   /* 2行になるとき、行の長さを均等に */
  letter-spacing: .04em;
  color: var(--navy);
}

/* --------------------------------------------------------------------------
   緑枠のリード（運営者の説明 ＋ KUMONロゴ）
   -------------------------------------------------------------------------- */
.lead-box {
  margin-bottom: 40px;
  padding: 24px 30px;
  background: var(--white);
  border: 2px solid var(--g-dark);
  border-radius: 10px;
}

/* 本文とロゴの行。注記はこの下に、枠の全幅で置きます */
.lead-box__row {
  display: flex;
  align-items: center;
  gap: 28px;
}

.lead-box__body { flex: 1; text-align: center; }

.lead-box__title {
  margin-bottom: 10px;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--g-dark);
  letter-spacing: .02em;
}

.lead-box__text {
  font-size: .95rem;
  line-height: 1.9;
  color: var(--g-dark);
}

.lead-box__note {
  margin-top: 14px;
  font-size: .74rem;
  line-height: 1.6;
  color: var(--text-light);
  text-align: center;
  text-wrap: balance;   /* 2行になるとき、行の長さを均等に */
}

.lead-box__logo { flex-shrink: 0; }
.lead-box__logo img { width: 190px; border: 1px solid var(--line); }

/* --------------------------------------------------------------------------
   入塾までの流れ
   --------------------------------------------------------------------------
   淡い黄緑の矢印（clip-path で先端を三角に）の中に白いカードを置いています。
   --flow-tip … 矢印の先端の長さ。ここを変えると形が変わります。
   -------------------------------------------------------------------------- */
.flow {
  --flow-tip: 22px;
  margin-bottom: 44px;
}

.flow__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 10px;
}

/* 余白は .flow__item の padding で確保します。
   （白いカード側に margin を付けると、height:100% と合算されて
     矢印からはみ出してしまうため） */
.flow__item {
  display: flex;
  padding: 10px calc(var(--flow-tip) + 10px) 10px 10px;
  background: var(--g-light);
  clip-path: polygon(0 0, calc(100% - var(--flow-tip)) 0, 100% 50%,
                     calc(100% - var(--flow-tip)) 100%, 0 100%);
}

.flow__box {
  flex: 1;
  padding: 14px 16px;
  background: var(--white);
  border-radius: 6px;
}

/* 説明文がないステップ用。カードの中で上下・左右とも中央に置きます */
.flow__box--center {
  display: grid;
  place-content: center;
  text-align: center;
}

.flow__title {
  margin-bottom: 6px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text);
}

.flow__text {
  font-size: .85rem;
  line-height: 1.8;
  color: var(--text);
}

/* --------------------------------------------------------------------------
   「教室概要」と「担当」
   --------------------------------------------------------------------------
   略歴が入って縦に長くなったため、左右の2段組みをやめ、
   教室概要の下に担当を置く形にしています（2026/09/29 変更）。
   担当カードの中で［氏名・写真・ひとこと］と［略歴］を左右に並べます。
   -------------------------------------------------------------------------- */
.outline-block__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

/* --- 白いカードにリボン見出しを重ねる共通指定 --------------------------
   リボン（高さ30px）の下 1/3 程度がカードに重なるように、
   カード側を負のマージンで引き上げています。
   リボンは左端をカードより少し外へ出しています。
   --------------------------------------------------------------------- */
.class-outline,
.teacher {
  --card-overlap: 11px;   /* リボンがカードに重なる量 */
  --ribbon-outset: 4px;   /* リボンがカード左端より外に出る量 */
}

.class-outline > .ribbon-title,
.teacher > .ribbon-title {
  margin-left: calc(var(--ribbon-outset) * -1);
}

.class-outline__dl,
.teacher__body {
  margin-top: calc(var(--card-overlap) * -1);
  padding: 26px 24px 24px;
  background: var(--white);
  border-radius: 8px;
}

/* --- 教室概要 --- */
.class-outline__dl {
  padding-top: 24px;
}

.class-outline__row {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 14px;
  align-items: start;
}

.class-outline__row + .class-outline__row { margin-top: 14px; }

.class-outline__row dt {
  padding: 2px 0;
  font-size: .82rem;
  font-weight: 700;
  text-align: center;
  color: var(--navy);
  background: var(--pill-blue);
  border-radius: 999px;
  letter-spacing: .06em;
}

.class-outline__row dd {
  font-size: .92rem;
  line-height: 1.7;
}

.note {
  display: block;
  margin-top: 2px;
  font-size: .74rem;
  color: var(--text-light);
  line-height: 1.6;
}

/* --- 担当講師 ------------------------------------------------------------
   カードの中を［氏名・写真・ひとこと｜略歴］の2列にします。
   左側の幅を変えたいときは 400px の数値を書き換えてください
   （右の略歴は 1fr なので残りを自動で使います）。
   900px以下では下のレスポンシブ指定で上下に並び替わります。
   --------------------------------------------------------------------- */
.teacher__body {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 30px;
  align-items: start;
}

.teacher__name {
  margin: 4px 0 14px;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--blue-text);
  letter-spacing: .06em;
}

.teacher__photo img {
  width: 100%;
  height: auto;          /* 支給画像の比率のまま表示（トリミングしません） */
  border-radius: 6px;
}

.teacher__balloon {
  position: relative;
  margin-top: 20px;
  padding: 14px 18px;
  font-size: .88rem;
  line-height: 1.7;
  background: var(--white);
  border: 1px solid var(--navy);
  border-radius: 10px;
}

.teacher__balloon::before,
.teacher__balloon::after {
  content: "";
  position: absolute;
  left: 26px;
  border-style: solid;
}

.teacher__balloon::before {
  top: -12px;
  border-width: 0 11px 12px 11px;
  border-color: transparent transparent var(--navy) transparent;
}

.teacher__balloon::after {
  top: -10px;
  border-width: 0 10px 11px 10px;
  border-color: transparent transparent var(--white) transparent;
}

/* --- 略歴 --------------------------------------------------------------
   吹き出しの下に、区切り線を挟んで置いています。
   文字を大きく／小さくしたいときは .teacher__bio-text の
   font-size を変えてください。
   --------------------------------------------------------------------- */
.teacher__bio {
  padding-left: 30px;
  border-left: 1px solid var(--line);
}

.teacher__bio-title {
  margin-bottom: 10px;
  font-size: .85rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: .1em;
  color: var(--blue-text);
}

.teacher__bio-text {
  font-size: .85rem;
  line-height: 1.9;
  color: var(--text);
}

.teacher__bio-text + .teacher__bio-text { margin-top: .8em; }

/* --------------------------------------------------------------------------
   教室の施設
   -------------------------------------------------------------------------- */
.facility__head {
  display: flex;
  align-items: center;
  gap: 10px;   /* リボンの帯（margin-right: 26px）と合わせて調整 */
  margin-bottom: 26px;
}

.facility__title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: .04em;
}

.facility__cards {
  display: grid;
  gap: 18px;
}

.facility-card {
  padding: 20px 26px;
  background: var(--pale-blue-2);
  border-radius: 6px;
}

.facility-card__title {
  margin-bottom: 6px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--blue-text);
}

.facility-card p {
  font-size: .9rem;
  line-height: 1.9;
}

.facility__note {
  margin-top: 48px;
  font-size: 1.15rem;
  font-weight: 700;
  text-align: center;
  color: var(--blue-text);
  letter-spacing: .02em;
}

/* --------------------------------------------------------------------------
   無料体験
   -------------------------------------------------------------------------- */
.trial {
  background: var(--navy-light);
  color: var(--white);
}

.trial__inner {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 32px;
  align-items: start;
}

.trial__period {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .06em;
}

.trial__title {
  margin-bottom: 22px;
  font-size: 2.35rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-wrap: balance;   /* 2行になるとき、行の長さを均等に */
}

/* --------------------------------------------------------------------------
   おためし学習会セクションのレイアウト（#otameshi のみ）
   --------------------------------------------------------------------------
   ①見出し → ②内容＋写真 → ③申込みボタン の3段構成です。
   ②だけを横並び（grid）にしているので、幅が狭くなると
   写真が表（.trial__dl）の下に自然に回り込みます。
   -------------------------------------------------------------------------- */
#otameshi .trial__inner { display: block; }

#otameshi .trial__mid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 32px;
  align-items: center;
  margin-top: 4px;
}

#otameshi .trial__foot { margin-top: 34px; text-align: center; }
#otameshi .trial__btn  { margin-top: 0; }
#otameshi .trial__tel  { justify-content: center; }

/* 見出しの下のリード文（おためし学習会） */
.trial__lead {
  margin-bottom: 22px;
  font-size: .95rem;
  line-height: 1.9;
}

.trial__row {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 14px;
  align-items: start;
}

.trial__row + .trial__row { margin-top: 12px; }

.trial__row dt {
  padding: 2px 0;
  font-size: .88rem;
  font-weight: 700;
  text-align: center;
  color: var(--navy);
  background: var(--pill-blue);
  border-radius: 999px;
  letter-spacing: .06em;
}

.trial__row dd { font-size: 1.02rem; line-height: 1.7; }
.trial__row .note { color: rgba(255, 255, 255, .78); }

/* --- 無料体験の申込みボタン --- */
.trial__btn { margin-top: 30px; }

.trial__tel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  font-size: .88rem;
}

.tel-badge {
  display: inline-block;
  padding: 8px 24px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--navy-dark);
  background: var(--yellow);
  border-radius: 999px;
}

/* --- 雲形の吹き出し --------------------------------------------------------
   背景に balloon.svg を敷いています。
   SVG の縦横比（243 : 103）に合わせたサイズにしているため、
   サイズを変えるときは幅と高さを同じ比率で変更してください。
   -------------------------------------------------------------------------- */
.trial__balloon {
  display: grid;
  place-content: center;
  width: 240px;
  height: 102px;
  margin: 0 0 22px auto;
  padding: 0 24px;
  text-align: center;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.55;
  color: var(--navy-dark);
  background: url("../img/balloon.svg") no-repeat center / 100% 100%;
}

.trial__photo img {
  width: 100%;
  height: auto;          /* 支給画像の比率のまま表示（トリミングしません） */
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   公文式の特長
   -------------------------------------------------------------------------- */
.features__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

.feature__label {
  font-size: .85rem;
  font-weight: 700;
  color: var(--blue-text);
  letter-spacing: .06em;
}

.feature__title {
  padding-bottom: 8px;
  margin-bottom: 14px;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--blue-text);
  border-bottom: 2px solid var(--g-main);
}

.feature__text { font-size: .9rem; line-height: 1.9; }

/* --- スクールバス --- */
/* gap を広げると本文の幅が狭くなり、注記の行が折り返します。
   （1200px幅で最終行がちょうど収まる値にしています） */
.bus {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 黄色の縦棒は「見出しの高さだけ」に出します（デザイン案に合わせています）。
   ・--bus-indent … 縦棒（6px）＋ 縦棒と文字のあいだの余白（26px）
   ・.bus__body にその分の padding-left を入れて内容の左端を決める
   ・.bus__title は margin-left で左に出し、border-left ＋ padding-left で
     見出しの文字を本文と同じ左端にそろえる
   縦棒の高さは見出しの行の高さ（line-height）で決まります。 */
.bus__body {
  --bus-indent: 32px;

  flex: 1;
  padding-left: var(--bus-indent);
}

.bus__title {
  margin-left: calc(var(--bus-indent) * -1);
  margin-bottom: 10px;
  padding-left: calc(var(--bus-indent) - 6px);
  border-left: 6px solid var(--g-main);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;   /* ＝縦棒の高さ（約25px） */
  color: var(--blue-text);
}

.bus__text { font-size: .9rem; line-height: 1.9; }

/* 【運行日】【ルート】はそれぞれ1行で表示します */
.bus__item  { display: block; }
.bus__label { font-weight: 700; color: var(--g-dark); }

/* イラスト（210px）に左右5pxずつの余白をとった幅です。
   ここを広げると本文の幅が狭くなり、最後の行が折り返します。
   ※非表示にしている注記を再開する場合は 272px に戻してください
     （「※スクールバスの詳細は…（現在調整中）」が1行に収まる幅です）。 */
.bus__illust {
  flex-shrink: 0;
  width: 220px;
  margin: 0;              /* figure の既定マージンを打ち消し */
  text-align: center;
}

.bus__illust img { width: 210px; }

/* イラスト下の注記 */
.bus__note {
  margin-top: 6px;
  font-size: .72rem;
  line-height: 1.7;
  color: var(--text-light);
  text-wrap: balance;   /* 2行になるとき、行の長さを均等に */
}

/* --------------------------------------------------------------------------
   レスポンシブ
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  /* 入塾までの流れ：矢印を下向きにして縦に並べます */
  .flow__list { grid-template-columns: 1fr; gap: 10px; }
  .flow__item {
    padding: 10px 10px calc(var(--flow-tip) + 10px);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--flow-tip)),
                       50% 100%, 0 calc(100% - var(--flow-tip)));
  }
}

@media (max-width: 900px) {
  .page-head__inner { flex-wrap: wrap; gap: 16px; }

  /* ロゴを本文の下へ回します */
  .lead-box__row { flex-direction: column; align-items: center; }

  /* 担当のカードが横に広がりすぎないよう、上限を設けて中央に置いています */
  .outline-block__grid { gap: 32px; }
  .teacher { max-width: 480px; margin-inline: auto; }

  /* ［氏名・写真・ひとこと］と［略歴］を上下に並べ替え、
     区切り線も左から上へ移します */
  .teacher__body { display: block; }
  .teacher__bio {
    margin-top: 22px;
    padding-top: 18px;
    padding-left: 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }
  .trial__inner        { grid-template-columns: 1fr; }
  .trial__balloon      { margin-inline: auto; }
  .trial__photo        { max-width: 320px; margin-inline: auto; }

  /* 写真を表の下に回り込ませます */
  #otameshi .trial__mid { grid-template-columns: 1fr; gap: 24px; }

  /* スクールバスも縦積みになるため、間隔を戻します */
  .bus { gap: 24px; }
}

@media (max-width: 640px) {
  /* ［教室名｜開講バッジ］を横並びのままにします */
  .page-head__inner { gap: 14px 12px; }

  .page-head__name  { font-size: 1.95rem; }
  .page-head__badge { --badge-size: 82px; }

  .lead-box { padding: 18px; }
  .lead-box__title { font-size: 1rem; }
  .lead-box__text  { font-size: .88rem; }
  .lead-box__logo img { width: 150px; }

  /* 幅が狭いところではデザイン案どおりの改行位置を保てないため、
     <br> を無効にして文章を自然に流します */
  .lead-box__text br { display: none; }

  .kumon-hero__catch { gap: 7px; top: 10%; left: 5%; }
  .kumon-hero__catch span { border-radius: 6px; }
  .kumon-hero__caption { right: 10px; bottom: 12px; font-size: .78rem; padding: 4px 10px; }

  .lead-catch { font-size: 1.2rem; }

  .class-outline__row,
  /* 表の文字サイズはスマホでは従来どおりにします */
  .trial__row { grid-template-columns: 82px 1fr; gap: 10px; }
  .trial__row dt { font-size: .82rem; }
  .trial__row dd { font-size: .92rem; }

  /* リボンと見出しを1行に並べます。
     flex をやめて通常の行として流すことで、見出しの文字数が増えたときだけ
     .facility__title が「かたまりのまま」次の行へ送られます。 */
  .facility__head { display: block; }
  .facility__title {
    display: inline-block;
    margin-left: 4px;
    font-size: 1.2rem;
  }
  .facility__note { font-size: 1rem; }

  .trial__period { text-align: center; }
  .trial__title {
    font-size: 2.3rem;
    text-align: center;
    line-height: 1.3;
    margin-block: 1rem;
  }

  /* 申込みボタンは中央寄せ（画面幅いっぱいにはしません） */
  .trial__btn { text-align: center; }
  .trial__btn .btn--pill {
    width: auto;
    max-width: 100%;
    padding: 18px 30px;
    gap: 18px;
    font-size: clamp(1.1rem, 5.2vw, 1.5rem);
  }

  /* 「お急ぎの場合は…」と電話番号は縦に並べて中央寄せ */
  .trial__tel {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
  }

  .features__grid { grid-template-columns: 1fr; gap: 30px; }

  /* 縦に並ぶと「Check!」が続いて出て冗長になるため、
     2つ目以降のラベルは隠します（デザイン案どおり）。
     .feature + .feature … 「.feature の直後にある .feature」の意味です */
  .feature + .feature .feature__label { display: none; }

  .bus { flex-direction: column; align-items: flex-start; }
  .bus__illust { width: 100%; align-self: center; }

  /* レスポンシブ版デザイン案では、本文は他のセクションと同じ左端にそろえ、
     見出しだけ縦棒のぶん字下げされています。
     （縦棒と見出しの字下げはそのまま残ります） */
  .bus__body  { padding-left: 0; }
  .bus__title { margin-left: 0; }
  .bus__illust img { width: 170px; }
}