/* ============================================================
   ANZAS v2 — page-volunteer.css(/option/volunteer/ の固有装飾)
   出典: 下層カンプ「Volunteer」
   共通クラス(main.css / pages.css)で足りない箇所だけをここに置く。
   ============================================================ */

/* パンくずの中間階層「実践プログラム」─ 束ねるハブ(/programs/)が無いためリンクを
   持たないが、現在地でもない。共通部品は URL 空を現在地扱いにするため、
   見た目だけカンプ通りグレーに戻す(最後の1件=現在地はブルーのまま)。 */
.av2-crumbs__item:not(:last-child) .av2-crumbs__here { background: var(--av2-surface); color: var(--av2-cap); }

/* ページヘッダーの一言は、このページだけイエローのバッジ。 */
.av2-phead__note { background: var(--av2-yellow); color: var(--av2-ink); border-radius: 999px; padding: 4px 12px; }

/* 答えの箱の下に敷く 21:9 のヒーロー写真。
   素材(option-volunteer-01.jpg)は 4:3 で、人物が上下に広く写っている。21:9 は
   縦の 4 割強しか使えないため、中央基準だと後列の子どもの顔が切れる。
   上寄り(32%)に置いて全員の顔が入るようにする。 */
.av2-volhero { border-radius: 20px; overflow: hidden; aspect-ratio: 21 / 9; margin-top: 56px; }
.av2-volhero img { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; display: block; }

/* プログラム概要の本文 ─ 現行サイトの本文をそのまま載せる段落。
   1060px の本文幅いっぱいだと1行が長すぎて読み進めにくいため、読み幅で止める
   (校舎ページの .av2-sb-day と同じ 760px)。 */
.av2-volabout { max-width: 760px; }

/* 活動内容カード ─ 英字タグと見出しの間隔(カンプ 10px)。 */
.av2-volact .av2-box__title { margin-top: 10px; }

/* 活動の様子 ─ 現行サイト本文に並ぶ4枚。素材はすべて 3:2(1000x667)。 */
.av2-volgal { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; }
.av2-volgal__item { margin: 0; border-radius: 16px; overflow: hidden; aspect-ratio: 3 / 2; }
.av2-volgal__item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 参加した人の言葉 ─ カンプは本文幅いっぱいではなく 720px の1枚。 */
.av2-volquote { max-width: 720px; margin-top: 48px; border-radius: 16px; }
.av2-volquote .av2-uline { margin-top: 16px; }

/* 相互リンク帯(実践3枚共通)。 */
.av2-volband { margin-top: 96px; border: 1.5px solid var(--av2-tint-border); border-radius: 16px; padding: 26px 30px; }
.av2-volband .av2-groupband__text { flex: 1; min-width: 260px; }
.av2-volband .av2-tag { display: block; margin-bottom: 12px; }
.av2-volband__links { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 840px) {
  .av2-volband { margin-top: 72px; }
}
@media (max-width: 560px) {
  .av2-volhero { aspect-ratio: 16 / 10; margin-top: 40px; }
  .av2-volgal { grid-template-columns: 1fr; gap: 14px; margin-top: 32px; }
  .av2-volband { padding: 22px 18px; }
  .av2-volband__links .av2-pill { width: 100%; justify-content: space-between; box-sizing: border-box; }
}