/* ふらの秋あつめ2026 写真展 */
.akiatsume {
  --aki-bg: #FFF8EE;
  --aki-orange: #E86024;
  --aki-brown: #5A2C10;
  --aki-sub: #7A4A2A;
  background: var(--aki-bg);
  color: var(--aki-brown);
  font-family: 'M PLUS Rounded 1c', sans-serif;
  padding: 0 8px 48px;
  -webkit-tap-highlight-color: transparent;
}
.akiatsume *, .akiatsume *::before, .akiatsume *::after { box-sizing: border-box; }
.akiatsume p { margin: 0; }

.aki-wrap { max-width: 1000px; margin: 0 auto; }

.aki-head { text-align: center; padding: 32px 8px 6px; }
.aki-head h1 { margin: 0; font-size: 22px; font-weight: 900; line-height: 1.4; color: var(--aki-brown); }
.aki-sub { margin-top: 6px !important; font-size: 12px; font-weight: 800; color: var(--aki-orange); }

.aki-lead {
  max-width: 720px; margin: 14px auto 6px; padding: 0 8px;
  font-size: 13px; font-weight: 800; line-height: 1.9; text-align: center; color: var(--aki-sub);
}
.aki-lead p + p { margin-top: .6em; }

.aki-tabs {
  position: -webkit-sticky; position: sticky; top: 0; z-index: 10;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  padding: 12px 4px; background: var(--aki-bg);
}
.aki-tab {
  flex: 0 0 auto; margin: 0; font-family: inherit; font-size: 12px; font-weight: 900; line-height: 1.4;
  padding: 7px 14px; border-radius: 999px; white-space: nowrap; cursor: pointer;
  border: 2px solid var(--aki-brown); background: #FFF; color: var(--aki-brown);
  -webkit-appearance: none; appearance: none;
}
.aki-tab:hover { background: #FFEBDD; }
.aki-tab.is-active { background: var(--aki-orange); color: #FFF; }

.aki-grid { column-count: 3; column-gap: 10px; margin-top: 6px; }
.aki-card {
  display: inline-block; width: 100%; margin: 0 0 10px;
  break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;
  background: #FFF; border: 2px solid var(--aki-brown); border-radius: 14px; overflow: hidden;
}
.aki-card.is-hidden { display: none; }
.aki-photo-box { background: #F3E7D8; cursor: zoom-in; }
.aki-photo { display: block; width: 100%; height: auto; }
.aki-info { padding: 8px 10px 10px; }
.aki-tag { display: none; margin-bottom: 3px !important; font-size: 10px; font-weight: 900; color: var(--aki-orange); }
.aki-grid.show-tag .aki-tag { display: block; }
.aki-name { font-size: 12px; font-weight: 900; word-break: break-word; line-height: 1.5; }
.aki-comment { margin-top: 3px !important; font-size: 11px; font-weight: 800; line-height: 1.5; color: var(--aki-sub); word-break: break-word; }
.aki-msg { text-align: center; font-size: 13px; font-weight: 800; padding: 40px 8px; }

/* 拡大表示 */
.aki-lightbox {
  position: fixed; inset: 0; z-index: 10000; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 24px; background: rgba(40, 20, 8, .9);
}
.aki-lightbox[hidden] { display: none; }
.aki-lightbox img { max-width: 100%; max-height: calc(100vh - 120px); border-radius: 10px; }
.aki-lb-cap { margin-top: 12px !important; color: #FFF; font-size: 14px; font-weight: 800; text-align: center; line-height: 1.6; }
.aki-lb-close {
  position: absolute; top: 12px; right: 16px; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .15); color: #FFF; font-size: 28px; line-height: 44px; cursor: pointer;
}

/* スマホ（サイトの viewport が width=750 固定のため、文字等を約2倍で指定） */
@media (max-width: 750px) {
  .akiatsume { padding: 0 16px 64px; }
  .aki-head { padding: 44px 8px 10px; }
  .aki-head h1 { font-size: 38px; }
  .aki-sub { margin-top: 10px !important; font-size: 23px; }
  .aki-lead { font-size: 24px; line-height: 1.8; margin-top: 22px; text-align: left; }
  .aki-tabs {
    flex-wrap: nowrap; justify-content: flex-start; gap: 14px; padding: 18px 4px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .aki-tab { font-size: 23px; padding: 12px 26px; border-width: 3px; }
  .aki-grid { column-count: 2; column-gap: 18px; margin-top: 10px; }
  .aki-card { margin-bottom: 18px; border-width: 3px; border-radius: 26px; }
  .aki-info { padding: 14px 18px 18px; }
  .aki-tag { font-size: 19px; margin-bottom: 5px !important; }
  .aki-name { font-size: 23px; }
  .aki-comment { font-size: 21px; margin-top: 5px !important; }
  .aki-msg { font-size: 24px; }
  .aki-lb-cap { font-size: 26px; }
  .aki-lb-close { width: 80px; height: 80px; font-size: 52px; line-height: 80px; }
}