/* ================================================
   news_a11y.css
   対象: えとはなっ！ ニュース告知ページ（260512以降）
   用途: モバイルWebView対応・古い端末パフォーマンス改善
         progressive enhancement — news.css には触らない
   ================================================ */

/* 1. viewport / safe-area（iPhone notch・WebView 対応） */
@supports (padding: max(0px)) {
  body {
    padding-left:  max(env(safe-area-inset-left), 0px);
    padding-right: max(env(safe-area-inset-right), 0px);
  }
}

/* 2. font-size: 5vw を clamp でオーバーライド
      古い端末で読みやすく、iPad/PC で巨大化しない */
body {
  font-size: clamp(14px, 4.2vw, 18px) !important;
  line-height: 1.75;
}

/* 3. 画像: 横はみ出し防止 + aspect-ratio 保持 */
img {
  max-width: 100%;
  height: auto;
}

/* 4. 横スクロール禁止（テーブル崩れを吸収） */
html, body {
  overflow-x: hidden;
}
table {
  max-width: 100%;
}

/* 5. タップ領域を最低 44px 確保（iOS HIG / WCAG 2.5.5） */
/* [name] アンカー（スクロール目印用）は除外 — min-height で空白ブロックになるため */
a:not([name]), button, [role="button"] {
  min-height: 44px;
  display: inline-block;
}

/* 6. フォーカスリング（キーボード操作・VoiceOver 対応） */
:focus-visible {
  outline: 2px solid #C9433A;
  outline-offset: 2px;
}

/* 7. アニメーション軽量化（旧端末・reduced-motion 配慮） */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* 8. ページ内スクロールを瞬時に（旧 WebView の smooth-scroll 負荷回避） */
html {
  scroll-behavior: auto;
}

/* ================================================
   ヒーローブロック
   ================================================ */
.news_hero {
  background: #f7f2e8;
  border-left: 4px solid #C9433A;
  padding: 12px 16px;
  margin: 8px 0 16px;
  border-radius: 4px;
}
.news_hero_name {
  font-size: clamp(15px, 4.5vw, 20px);
  font-weight: bold;
  margin: 0 0 4px;
  line-height: 1.4;
}
.news_hero_period {
  font-size: clamp(12px, 3.5vw, 15px);
  color: #444;
  margin: 0;
}

/* ================================================
   スティッキー目次バー
   ================================================ */
.news_toc {
  position: sticky;
  top: 0;
  background: rgba(247, 242, 232, 0.97);
  z-index: 100;
  padding: 8px 12px;
  border-bottom: 1px solid #ddd;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.news_toc a {
  display: inline-block;
  font-size: clamp(11px, 3.2vw, 14px);
  color: #1A2A4A;
  text-decoration: none;
  margin-right: 12px;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  min-height: unset;
}
.news_toc a:hover,
.news_toc a:focus {
  border-bottom-color: #C9433A;
}

/* ================================================
   アコーディオン（<details> / <summary>）
   おつかい・花札手帳・屋台 のラップ用
   ================================================ */
.news_accordion {
  border: 1px solid #ddd;
  border-radius: 4px;
  margin: 12px 0;
  overflow: hidden;
}
.news_accordion > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #f0ebe0;
  cursor: pointer;
  font-weight: bold;
  font-size: clamp(13px, 3.8vw, 16px);
  list-style: none;
  user-select: none;
}
.news_accordion > summary::-webkit-details-marker {
  display: none;
}
.news_accordion > summary::before {
  content: "▶";
  font-size: 0.75em;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.news_accordion[open] > summary::before {
  transform: rotate(90deg);
}
.news_accordion > summary:hover {
  background: #e8e0d0;
}
.news_accordion_body {
  padding: 4px 0;
}

/* ================================================
   目次アイテム（折り返し禁止・超過時は省略）
   ================================================ */
.news-index-wrap {
  margin-top: 14px;
}
.news-index-item {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 2px 0;
  font-size: clamp(11px, 3.2vw, 13px);
}
/* a { display: inline-block } の tap-target ルールを目次内だけ打ち消す。
   inline に戻すことで親の text-overflow: ellipsis が ・+テキスト全体に効く */
.news-index-item a {
  display: inline;
  min-height: unset;
}