/* /area/<slug>/ の写真（gallery／hero）専用スタイル。
   共有の assets/style.css は変更しない（2026-09-24のニュース欄巻き戻り事故のため）。
   このファイルは prefs.json に hero／gallery キーがあるページだけが読み込む。 */

.ag-photo {
  margin: 1em 0;
}
.ag-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.ag-photo figcaption {
  font-size: 0.85em;
  color: #666;
  margin-top: 0.4em;
}
.ag-photo-role {
  display: inline-block;
  font-size: 0.9em;
  color: #666;
  border: 1px solid #999;
  border-radius: 3px;
  padding: 0 0.4em;
  margin-right: 0.5em;
}
.ag-photo-credit {
  font-size: 0.8em;
  color: #666;
  text-align: right;
}

/* ---- design_v2（prefs に design_v2 があるページだけ。main.ag-v2 配下に限定） ---- */
.ag-v2 .ag-dates { font-size: 0.85rem; color: var(--gray-2); margin: 0 0 12px; }
.ag-v2 .ag-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; }
.ag-v2 .ag-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.8rem; line-height: 1; padding: 7px 12px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--gray-1);
}
.ag-v2 .ag-chip-area { border-color: var(--shu); color: var(--shu); }
.ag-v2 .ag-chip-ico { flex: 0 0 auto; }
.ag-v2 .ag-lead-extra { margin-top: -6px; }
.ag-v2 .ag-overview {
  margin: 24px 0; padding: 18px 22px; background: var(--white);
  border: 1px solid var(--line); border-left: 4px solid var(--shu);
}
.ag-v2 .ag-overview h2 { font-size: 1.15rem; border-bottom: 0; padding: 0; margin: 0 0 10px; }
.ag-v2 .ag-overview dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; }
.ag-v2 .ag-overview dt { font-weight: 700; font-size: 0.85rem; color: var(--shu); }
.ag-v2 .ag-overview dd { margin: 0; font-size: 0.9rem; line-height: 1.7; }
.ag-v2 h2 {
  font-size: 1.5rem; font-weight: 700; line-height: 1.4;
  padding-bottom: 0.3em; border-bottom: 4px solid var(--shu);
  overflow-wrap: anywhere;
}
.ag-v2 .ag-stop-h .ag-chap { display: inline-block; font-size: 0.7em; color: var(--gray-2); margin-right: 0.6em; }
.ag-v2 .ag-stop-h .ag-theme { color: var(--shu); }
.ag-v2 .ag-stop-h .ag-theme::after { content: "｜"; color: var(--gray-2); margin: 0 0.1em; }
/* 写真：2枚並べ／3枚以上は CSS だけの横スライド */
.ag-v2 .ag-photo-pair { display: grid; grid-template-columns: 1fr; gap: 12px; }
.ag-v2 .ag-photo-pair .ag-photo { margin: 0.6em 0; }
.ag-v2 .ag-slider {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-right: 12%; -webkit-overflow-scrolling: touch;
}
.ag-v2 .ag-slider .ag-photo { flex: 0 0 84%; margin: 0.6em 0; scroll-snap-align: start; }
.ag-v2 .ag-swipe-hint { display: none; font-size: 0.75rem; color: var(--gray-2); text-align: right; margin: 0; }
/* 写真グループの解説（写真の下） */
.ag-v2 .ag-photo-note { font-size: 0.9rem; line-height: 1.8; color: var(--gray-1); margin: 0.4em 0 1em; }
@media (min-width: 768px) {
  .ag-v2 .ag-photo-pair { grid-template-columns: 1fr 1fr; }
  .ag-v2 .ag-slider .ag-photo { flex-basis: 46%; }
}
@media (max-width: 767px) { .ag-v2 .ag-swipe-hint { display: block; } }
@media (max-width: 480px) {
  .ag-v2 h2 { font-size: 1.3rem; }
  .ag-v2 .ag-overview { padding: 14px 16px; }
  .ag-v2 .ag-overview dl { grid-template-columns: 1fr; gap: 2px; }
  .ag-v2 .ag-overview dd { margin-bottom: 8px; }
}

/* photo_frame: justified（prefs に photo_frame があるページだけ。main に ag-frame-justified が付く）
   pair＝2枚の高さをそろえる（flex-grow を縦横比にする。値は figure の style 属性）／slider＝高さ固定・幅は縦横比／single の縦位置＝70vh まで */
.ag-v2.ag-frame-justified .ag-photo-pair { display: flex; flex-direction: column; gap: 12px; }
.ag-v2.ag-frame-justified .ag-photo-pair .ag-photo { flex: 0 0 auto; min-width: 0; margin: 0.6em 0; }
.ag-v2.ag-frame-justified .ag-slider { align-items: flex-start; }
.ag-v2.ag-frame-justified .ag-slider .ag-photo { flex: 0 0 auto; }
.ag-v2.ag-frame-justified .ag-slider .ag-photo img { width: auto; max-width: none; height: 220px; }
.ag-v2.ag-frame-justified .ag-slider .ag-photo figcaption { width: 0; min-width: 100%; }
.ag-v2.ag-frame-justified .ag-portrait img { max-height: 70vh; max-width: 100%; width: auto; margin-left: auto; margin-right: auto; }
@media (min-width: 768px) {
  .ag-v2.ag-frame-justified .ag-photo-pair { flex-direction: row; align-items: flex-start; }
  .ag-v2.ag-frame-justified .ag-photo-pair .ag-photo { flex-basis: 0; flex-shrink: 1; }
  .ag-v2.ag-frame-justified .ag-photo-pair .ag-photo img { width: 100%; height: auto; }
  .ag-v2.ag-frame-justified .ag-slider .ag-photo img { height: 300px; }
}

/* practical_cards（prefs に practical_cards があるページだけ。section に ag-practical-cards が付く）
   幅1099px以下：表をカード表示にする（ラベル：内容の縦並び。600〜1099px は 2 列）。1100px以上は従来の表（2026-10-21：タブレット幅で見出しの文字が 1 字ずつ折れたため 599px から広げた） */
@media (max-width: 1099px) {
  .ag-v2 .ag-practical-cards .ag-table, .ag-v2 .ag-practical-cards .ag-table tbody, .ag-v2 .ag-practical-cards .ag-table tr,
  .ag-v2 .ag-practical-cards .ag-table th, .ag-v2 .ag-practical-cards .ag-table td { display: block; width: auto; } /* style.css の .ag-table{min-width:640px} を打ち消す */
  .ag-v2 .ag-practical-cards .ag-table { min-width: 0; }
  .ag-v2 .ag-practical-cards .ag-table thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .ag-v2 .ag-practical-cards .ag-table tr { border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; margin: 0 0 12px; }
  .ag-v2 .ag-practical-cards .ag-table th { border-bottom: 1px solid var(--line); padding: 4px 0 8px; font-size: 14px; letter-spacing: 0; }
  .ag-v2 .ag-practical-cards .ag-table td { border-bottom: 0; padding: 6px 0 2px; word-break: break-word; overflow-wrap: anywhere; }
  .ag-v2 .ag-practical-cards .ag-table td::before { content: attr(data-label) "："; display: block; font-size: 12px; font-weight: 600; color: var(--shu); }
}

/* 600〜1099px：カードを 2 列に並べる */
@media (min-width: 600px) and (max-width: 1099px) {
  .ag-v2 .ag-practical-cards .ag-table tbody { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; align-items: start; }
}

/* 出典の長い URL を折り返す（photo_frame を使うページだけ） */
.ag-v2.ag-frame-justified .ag-credits li { overflow-wrap: anywhere; }

/* ヒーロー（.inner の直下の .ag-slider）：768px 以上は 2 枚を幅いっぱいに均等に並べる（3:2）。
   SP（767px 以下）は従来どおり 84% のスワイプ。.ag-stop-place の中のスライダー（地点の写真）は対象外 */
@media (min-width: 768px) {
  .ag-v2 .inner > .ag-slider { overflow: visible; padding-right: 0; scroll-snap-type: none; gap: 12px; }
  .ag-v2 .inner > .ag-slider .ag-photo,
  .ag-v2.ag-frame-justified .inner > .ag-slider .ag-photo { flex: 1 1 0; flex-grow: 1 !important; min-width: 0; }
  .ag-v2 .inner > .ag-slider .ag-photo img,
  .ag-v2.ag-frame-justified .inner > .ag-slider .ag-photo img { width: 100%; max-width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
}