/* ============================================================
   ANZAS v2 — page-group.css
   /group/(学校・法人の方へ)だけで使う装飾。
   共通シャーシ(pages.css)・共通部品(main.css)の後に読み込む。
   BP: 900 / 560(共通シャーシに合わせる)
   ============================================================ */

/* ページヘッダーの一言は、実践プログラムのページと同じイエローのバッジ。 */
.av2-phead__note { background: var(--av2-yellow); color: var(--av2-ink); border-radius: 999px; padding: 4px 12px; }

/* カードの見出しは h3。theme.json の h3 と同じ大きさなので、UA の margin だけ消す。 */
.av2-main h3.av2-box__title { margin: 0; }

/* ---------- ヒーロー写真 ---------- */

/* 素材(district.png)は 1626x1030。上 1/3 が空なので、21:9 に切って建物と通りを残す。 */
.av2-grp-hero { margin: 56px 0 0; border-radius: 20px; overflow: hidden; aspect-ratio: 21 / 9; }
.av2-grp-hero img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; display: block; }

/* ---------- 02 安全体制 ─ 4 項目を 2 列で ---------- */

.av2-grp-safety h3.av2-box__title { margin-top: 10px; }
.av2-grp-more { margin: 32px 0 0; }

/* ---------- 03 引率・滞在・食事 ─ 左に項目、右に写真 ---------- */

.av2-grp-stay { gap: 56px; align-items: center; }
.av2-grp-stay__item { padding: 22px 4px; border-bottom: 1px solid var(--av2-line); }
.av2-grp-stay__item:first-child { padding-top: 0; }
.av2-grp-stay__item:last-child { border-bottom: 0; padding-bottom: 0; }
.av2-grp-stay__item h3 { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.7; color: var(--av2-ink); }
.av2-grp-stay__item p { margin: 6px 0 0; font-size: 14px; line-height: 1.95; }
/* 素材(hotel-lobby.png)は 596x396 と小さい。本文幅の半分より大きく引き伸ばさない。 */
.av2-grp-stay__photo { margin: 0; aspect-ratio: 3 / 2; border-radius: 16px; overflow: hidden; min-width: 0; }
.av2-grp-stay__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- ご相談ブロック(短期集中キャンプの団体ブロックと同じ型) ---------- */

.av2-grp-cta { margin-top: 112px; border-width: 1.5px; padding: 32px 32px 28px; }
.av2-grp-cta__row { display: flex; align-items: flex-start; gap: 32px; flex-wrap: wrap; margin-top: 14px; }
.av2-grp-cta__body { flex: 1; min-width: 280px; }
.av2-grp-cta .av2-pill { flex-shrink: 0; }

/* ---------- 折り返し ---------- */

/* ページヘッダーの H1・コピーと各節のリードは、<span> の単位で折り返す(語の途中で割らない)。
   トップの見出しと同じやり方で、ブラウザを問わず効く。 */
.av2-phead__title > span, .av2-phead__copy > span, .av2-psec__copy > span { display: inline-block; }

/* 見出し・カードの見出し・FAQ の質問・コピーは、文節で折り返す(Chromium 系だけに効く)。 */
.av2-main :where(h2, h3, summary, .av2-phead__copy, .av2-psec__copy) { word-break: auto-phrase; }

/* 行の長さを均し、最後の 1〜2 文字だけが次の行に落ちるのを避ける(Safari 17.5 以降にも効く)。
   ページヘッダーのコピーは <span> の区切りで足りており、均すと 2 行目だけ短くなるので外している。 */
.av2-main :where(h2, h3, summary, .av2-psec__copy) { text-wrap: balance; }

/* 答えの箱は最初に読まれる要約なので、本文も文節で折り返す(Chromium 系だけに効く)。
   太字は塊のまま次の行へ送る(ブラウザを問わず効く)。 */
.av2-answer__body { word-break: auto-phrase; }
.av2-answer__body b { display: inline-block; }

/* 箇条書きの項目と表の値は短いので、文節で折り、行の長さを均す(最後の 1〜2 文字だけが落ちるのを避ける)。 */
.av2-main :where(.av2-list li, .av2-dl__val) { word-break: auto-phrase; text-wrap: balance; }

/* 本文は、最後の行に 1〜2 文字だけ残るのを避ける(対応しているブラウザだけに効く)。 */
.av2-main :where(p) { text-wrap: pretty; }

/* ---------- レスポンシブ ---------- */

@media (max-width: 900px) {
  .av2-grp-stay { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 560px) {
  .av2-grp-hero { aspect-ratio: 16 / 10; margin-top: 40px; }
  .av2-grp-cta { margin-top: 80px; padding: 24px 20px; }
  .av2-grp-cta .av2-pill { width: 100%; justify-content: space-between; box-sizing: border-box; }
}