/* v3/site support 班の追加（工賃・1日の流れ・送迎・よくある質問・見学と体験）。
   style.css は触らない。頭に body の class を付けて、そのページだけに効かせる。 */

/* ---------- 工賃（pg-sup-kou）・1日の流れ（pg-sup-day）：s1 は見出しを上・表を下（PC） ----------
   見出し左・表右だと、見出しの下の左が大きく空き、表も狭くなる（年度の列が4行に割れる） */
@media (min-width: 960px) {
  :is(.pg-sup-kou, .pg-sup-day) #s1 .two-col { grid-template-columns: minmax(0, 1fr); }
  :is(.pg-sup-kou, .pg-sup-day) #s1 .two-col > .section-head { margin-bottom: 36px; }
  :is(.pg-sup-kou, .pg-sup-day) #s1 .two-col-body > .table-scroll { margin-top: 0; }
  /* 工賃：表を左に広く、ことばの説明を右に */
  .pg-sup-kou #s1 .two-col-body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 72px; align-items: start; }
  .pg-sup-kou #s1 .two-col-body > .table-scroll { grid-column: 1; grid-row: 1 / span 3; }
  .pg-sup-kou #s1 .two-col-body > :not(.table-scroll) { grid-column: 2; }
  .pg-sup-kou #s1 .words { margin-top: 0; }
  /* 年度の列：PC は「令和6年度」を1行・（古い算定式）を次の行に */
  .sup-kou-years tbody th br { display: none; }
  .sup-kou-years tbody th small { display: block; }
  /* 1日の流れ：表は全幅にせず読みやすい幅で */
  .pg-sup-day #s1 .table-scroll { max-width: 880px; }
}

/* ---------- 送迎（pg-sup-sou） ---------- */
/* 写真に白い面を重ねる段：文が短いので、面の下の端が写真の下の端にそろってしまう。
   重ねる量を減らし（-260px → -150px）、見出しは写真の上・本文は写真の下へはみ出す形にする */
@media (min-width: 960px) {
  .pg-sup-sou #s3 .feature-panel { margin-top: -150px; }
}

/* ---------- よくある質問（pg-sup-faq）：お金の段は文と写真を2つ並べる ---------- */
.pg-sup-faq #s2 .split > div > .section-title { margin-bottom: 32px; }
/* 夕方の窓（空）を写さないよう、写真の上を切って手元に寄せる（object-view-box が効かないブラウザはふつうの切り抜き） */
.pg-sup-faq #s2 .fig img { object-position: 30% 100%; object-view-box: inset(24% 6% 0 0); }
@media (min-width: 960px) {
  .pg-sup-faq #s2 .split > div > .section-title { margin-bottom: 44px; }
  .pg-sup-faq #s2 .fig img { aspect-ratio: 4 / 5; }
}

/* ---------- 見学と体験（pg-sup-ken） ---------- */
/* 服装と持ち物・一人で来なくて大丈夫です＝2つ並べる */
.pg-sup-ken .pair-sec .pair-item:last-child { padding-bottom: 0; }
.pg-sup-ken .pair-sec .pair-item .section-title { margin-bottom: 24px; }
.pg-sup-ken .pair-sec .pair-item > p.block { margin-top: 0; font-size: 18px; }
@media (min-width: 960px) {
  .pg-sup-ken .pair-sec .pair-item { padding-bottom: 8px; }
  .pg-sup-ken .pair-sec .pair-item .section-title { margin-bottom: 32px; }
}
/* 予約の段：見出し＋一言を左・入力とボタンを右（PC）。一言は見出しより一段小さく */
.pg-sup-ken #yoyaku .section-head .section-title { margin-bottom: 16px; }
.pg-sup-ken #yoyaku .section-head .cta-lead { font-size: 20px; line-height: 1.7; }
.pg-sup-ken #yoyaku .cta-block { max-width: 640px; }
.pg-sup-ken #yoyaku .cta-block .btn-row { max-width: none; margin: 12px 0 20px; }
.pg-sup-ken #yoyaku .form { margin-top: 32px; }
@media (min-width: 960px) {
  .pg-sup-ken #yoyaku .two-col { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .pg-sup-ken #yoyaku .section-head .cta-lead { font-size: 22px; }
  .pg-sup-ken #yoyaku .form { margin-top: 0; }
}

/* ---------- 2026-10-08 直し（審査1回目） ---------- */
/* 工賃の表（スマホ）：年度の列を「令和6年度」の1行に（PC と同じ）。（古い算定式）だけは2行のまま */
.sup-kou-years tbody th > br { display: none; }
.sup-kou-years tbody th { white-space: nowrap; }
.sup-kou-years tbody th small { display: block; white-space: normal; }
@media (max-width: 599px) {
  /* 年度を1行にした分、3列が幅に入るよう、すき間と字間を詰める（字の大きさは16px のまま） */
  .pg-sup-kou .sup-kou-years { letter-spacing: 0; }
  .pg-sup-kou .sup-kou-years th, .pg-sup-kou .sup-kou-years td { padding-left: 3px; padding-right: 3px; }
  .pg-sup-kou .sup-kou-years th:first-child { padding-left: 0; }
  .pg-sup-kou .sup-kou-years .ph { padding: 0; }
}
/* 計算のしかた：04 は式そのものが見出しの書体（幅の狭い数字）になっていた＝01〜03 の数字と同じ本文の書体・太さにそろえる */
.pg-sup-kou #s2 .steps > li:last-child .step-title { font-family: var(--f-body); font-weight: 700; font-size: 18px; letter-spacing: .02em; }
/* 確かめ方：見出しの下に数字を書き留める机の写真（PC は左の欄の空きを埋める） */
.pg-sup-kou #s3 .kou-fig { margin-top: 32px; }
@media (min-width: 960px) { .pg-sup-kou #s3 .kou-fig { margin-top: 44px; } }
/* 締め（写真つき）：白の段が続くと上の余白が0になる決まり（.wrap で始まる段向け）を、写真つきの締めでは外す */
@media (min-width: 960px) { .pg-sup-kou .section--close.section--cta { padding-top: var(--sec) !important; } }
/* 送迎：送迎している市の見出しの下に町の道の写真（PC は左の欄の空きを埋める） */
.pg-sup-sou #s1 .sou-fig { margin: 32px 0 0; }
@media (min-width: 960px) { .pg-sup-sou #s1 .sou-fig { margin: 44px 0 0; } }
/* はたらく場所（pg-sup）：声の段の写真はスマホで段の頭へ（声の後ろに置くと、次の段の写真と縦に2枚続くため）。PC は右のまま */
@media (max-width: 959px) { .pg-sup #s7 .split > .fig { order: -1; } }

/* よくある質問 s4（人と雰囲気・t21）：PC の縦長の切り抜きで、書き留める手と話す人の手が両方入るよう右へ寄せる */
@media (min-width: 960px) { .pg-sup-faq #s4 .bleed > .photo img { object-position: 62% 50%; } }
