/* site.css — 全ページ共通の追加スタイル
 *
 * _templates/*.html は Claude Design 由来でレイアウトがすべてインライン style に
 * 書かれており、デスクトップ幅(1080px 以上)前提になっている。
 * テンプレートを大きく書き換えずにスマホ対応するため、ここでは属性セレクタで
 * インライン style を狙い撃ちし、!important で上書きする。
 * テンプレート側の style 文字列を変えたら、対応するセレクタも見直すこと。
 */

img { max-width: 100%; }
a:focus-visible { outline: 2px solid #b23f1e; outline-offset: 2px; }

@media (max-width: 820px) {
  html, body { overflow-x: clip; }

  /* 固定幅の解除 */
  [style*="min-width:1080px"] { min-width: 0 !important; }

  /* 左右余白 44〜48px → 16px、上下余白も詰める */
  [style*="px 44px"], [style*="px 48px"] { padding-left: 16px !important; padding-right: 16px !important; }
  [style*="padding:84px"], [style*="padding:88px"], [style*="padding:92px"], [style*="padding:96px"] {
    padding-top: 56px !important; padding-bottom: 56px !important;
  }

  /* 多段グリッドを1列に(経歴の「年 + 内容」2列だけは残す) */
  [style*="grid-template-columns"]:not([style*="82px 1fr"]):not([style*="auto 1fr"]) {
    grid-template-columns: 1fr !important;
  }
  div[style*="grid-template-columns"] { gap: 32px !important; }
  [style*="gap:96px"] { gap: 56px !important; }
  [style*="gap:64px"], [style*="gap:56px"], [style*="gap:52px"] { gap: 32px !important; }

  /* 業績・活動の行: 年 / 本文 / バッジ・リンク を縦に積み、右寄せをやめる */
  li[style*="grid-template-columns"] { gap: 6px !important; }
  li[style*="grid-template-columns"] > :last-child { justify-self: start; text-align: left !important; }
  li[style*="grid-template-columns"] > div:last-child {
    align-items: flex-start !important; text-align: left !important; flex-direction: row !important; flex-wrap: wrap;
  }

  /* 受賞(ダーク帯)のセル区切りを縦並び用に */
  [style*="padding:6px 28px 2px"] { padding: 0 0 20px 16px !important; border-right: 0 !important; }

  /* 見出しサイズ */
  [style*="font-size:64px"] { font-size: 40px !important; }
  [style*="font-size:52px"] { font-size: 34px !important; }
  [style*="font-size:34px"] { font-size: 26px !important; }
  [style*="font-size:31px"], [style*="font-size:32px"] { font-size: 24px !important; }
  [style*="font-size:28px"] { font-size: 22px !important; }

  /* 写真の高さ */
  figure[style*="height:460px"] { height: 260px !important; }
  figure[style*="height:284px"] { height: 220px !important; }

  /* ヘッダー・ナビ */
  header[style*="justify-content:space-between"] { flex-wrap: wrap; gap: 8px 16px; }
  nav[style*="display:flex"] { gap: 6px 18px !important; flex-wrap: wrap; font-size: 13px !important; }

  /* ---- トップページのヒーロー: 重ね配置をやめて縦に流す ---- */
  section[data-screen-label="ヒーロー"] {
    height: auto !important; min-height: 0 !important; max-height: none !important;
    display: flex; flex-direction: column;
  }
  section[data-screen-label="ヒーロー"] > div[style*="left:44px;bottom:48px"] {
    position: relative !important; left: auto !important; bottom: auto !important;
    padding: 58vh 16px 28px !important; max-width: none !important; order: 1;
  }
  section[data-screen-label="ヒーロー"] h1 { font-size: 56px !important; }
  section[data-screen-label="ヒーロー"] [style*="clamp(28px"] { font-size: 21px !important; letter-spacing: .08em !important; }
  section[data-screen-label="ヒーロー"] > aside {
    position: relative !important; top: auto !important; right: auto !important; bottom: auto !important;
    width: auto !important; margin: 0 16px 28px; overflow: visible !important; order: 2;
  }

  /* NEWS 帯: 横一列の流し表示 → 縦並び */
  section[data-screen-label="ニュース"] { flex-direction: column; }
  section[data-screen-label="ニュース"] > span { border-right: 0 !important; padding: 14px 16px 0 !important; }
  section[data-screen-label="ニュース"] > div {
    flex-direction: column !important; align-items: flex-start !important; gap: 10px !important;
    white-space: normal !important; -webkit-mask-image: none !important; mask-image: none !important;
  }
  section[data-screen-label="ニュース"] > div > span { display: block !important; }
}