/* ============================================================
   プログラム詳細ページ（6本）の型を固定する
   項目の数や写真の枚数が違っても、6本が同じ見た目になるように
   body.prog のページだけに効く
   ============================================================ */

/* 概要：本文のあとに「体験版」か「動画」をひとつ（どちらもなければ仮置き） */
.prog #about .loop.wide, .prog #about .try { margin-top: clamp(28px, 5vh, 48px); }
.prog #about .loop img { object-fit: cover; }

/* 身につく力：1行に1項目。4項目でも5項目でも同じ並び */
.prog .gains { grid-template-columns: 1fr; gap: 0; max-width: 62em; }
.prog .gains li, .prog .gains li:nth-child(even) {
  display: grid; grid-template-columns: 4.5em minmax(0, 1fr); align-items: baseline;
  padding: clamp(14px, 2vh, 20px) 0;
}
.prog .gains li:last-child { border-bottom: 1px solid rgba(18, 24, 28, .28); }
.prog .gains li::before, .prog .gains li:nth-child(even)::before, .js .prog .gains li.on::before { margin-bottom: 0; }

/* 研修の中身：同じ大きさの写真を3列（6本とも3枚） */
.prog #scenes .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .prog #scenes .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .prog #scenes .tiles { grid-template-columns: 1fr; } }

/* ---- 仮置きの印（中身が決まったら外す） ---- */
.kari-badge {
  display: inline-block; vertical-align: .15em; margin-left: .7em;
  background: #9a5a00; color: #fff; border-radius: 3px;
  font-family: var(--sans); font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: .2em;
  padding: .5em .55em .5em .75em;
}
.prog .try.is-kari { background: repeating-linear-gradient(135deg, rgba(154, 90, 0, .05) 0 12px, transparent 12px 24px); box-shadow: 0 0 0 1px rgba(154, 90, 0, .35); }
.prog .try.is-kari .btn[disabled] { opacity: .45; cursor: not-allowed; pointer-events: none; }
.prog .kari-note { display: flex; align-items: center; gap: .4em; margin-bottom: 18px; font-size: 13px; }
.prog .kari-note .kari-badge { margin-left: 0; margin-right: .5em; }
section.ink .kari-note { color: rgba(255, 255, 255, .8); }
.prog .screen .kari-tag {
  position: absolute; z-index: 5; right: clamp(16px, 4vw, 48px); bottom: clamp(16px, 4vh, 40px);
  background: #9a5a00; color: #fff; border-radius: 4px;
  font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .18em; line-height: 1;
  padding: .75em 1em .75em 1.2em;
}

/* 体験版も動画と同じ大きさの枠に（絵の上に説明とボタン） */
.prog .try-frame .try-over {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1em;
  padding: clamp(20px, 5vw, 64px);
  background: linear-gradient(90deg, rgba(8, 12, 16, .88) 0%, rgba(8, 12, 16, .6) 55%, rgba(8, 12, 16, .15) 100%);
}
.prog .try-frame .try-over h3 { color: #fff; font-family: var(--serif); font-weight: 800; font-size: clamp(20px, 2.6vw, 32px); letter-spacing: .04em; }
.prog .try-frame .try-over p { color: rgba(255, 255, 255, .88); font-size: clamp(13px, 1.3vw, 15px); line-height: 2; max-width: 30em; }
.prog .try-frame .try-over .btn { background: #fff; color: var(--ink); }
@media (max-width: 640px) { .prog .try-frame { aspect-ratio: auto; } .prog .try-frame .try-over { position: relative; padding: 56px 20px 52px; } .prog .try-frame > img { position: absolute; inset: 0; } }
.prog .try-frame .tag, .prog .try-frame figcaption { z-index: 3; }

/* 概要：他のセクションと同じ見出しを付け、本文を少し広く（宙に浮いて見えないように） */
.prog #about .lead-copy { max-width: 48em; }