/* =====================================
   History page add-on styles (scoped)
   style.css を尊重しつつ競合を避ける
   使い方：<link rel="stylesheet" href="../css/history.css">
   ===================================== */

/* まずはスティッキートップのデフォルト（JSで上書き可能） */
:root{ --history-sticky-top: 70px; }

/* ===== レイアウトラッパー ===== */
#history .history-wrapper {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px 24px;
}

/* ===== 履歴サブナビ（グローバルヘッダーの下で固定） ===== */
#history .history-subnav {
  position: sticky;
  top: var(--history-sticky-top); /* グローバルヘッダーの下に配置 */
  z-index: 99;                    /* ハンバーガー(1000)より下 */
  isolation: isolate;             /* にじみ防止 */
  border-bottom: 1px solid #d9d4cf;
  background: #fdf9f2cc;          /* 半透明（不要なら #fdf9f2） */
  backdrop-filter: saturate(120%) blur(8px);
}
#history .history-subnav .history-wrapper { padding-top: 12px; padding-bottom: 8px; }

#history .history-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 12px;
}
#history .history-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #bdbdbd;
  background: #f5f5f5;
  color: #333;
  padding: 6px 10px;
  text-decoration: none;
  font-size: 13px;
  border-radius: 999px; /* 丸みを追加：サイト全体のUIに合わせる */
}
#history .history-chip:hover { background: #eee; }
#history .history-chip[aria-current="true"]{ background:#e9e5df; border-color:#a7a39e; }

/* ===== セクション ===== */
#history .history-subnav h1 {
  margin: 8px 0 12px;
  font-size: 1.2rem;
  letter-spacing: .02em;
  color: #333;
}

#history .history-section {
  margin: 0 auto 15px;
  padding: 0;
  background: #fff;
  border: 1px solid #d9d4cf;
}
#history .history-section-header {
  position: relative;
  background: #eee9e3;
  padding: 14px 18px;
  border-bottom: 1px solid #d9d4cf;
}
/* ===== ヒストリー専用 H2（style.css の演出を打ち消す） ===== */
#history .history-section-header h2{color: #333;
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  border: none;
  text-transform: none;   /* Bebas系の大文字化を抑止 */
  letter-spacing: normal;
  opacity: 1;             /* アニメ無効 */
  transform: none;        /* アニメ無効 */
  background: none;       /* 背景SVGをオフ */
  padding: 0;             /* 余白リセット */
  min-height: auto;       /* 高さリセット */
}
#history .history-subtitle {
  color: #777;
  font-size: 13px;
  margin-top: 4px;
}

/* ===== テーブル ===== */
#history .history-table { 
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
#history .history-table th,
#history .history-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #d9d4cf;
  vertical-align: top;
  color: #4d4d4d;
}
#history .history-table th {
  text-align: left;
  font-weight: 700;
  color: #333;
  background: #faf7f2;
}
#history .history-note {
  color: #777;
  font-size: 12px;
}
#history .history-team,
#history .history-season {
  font-weight: 700;
  color: #333;
}

/* アンカー位置をサブナビ分だけオフセット */
#history [id] { scroll-margin-top: calc(var(--history-sticky-top) + 12px); }

/* ===== 箇条書き ===== */
#history .history-list {
  margin: 6px 0 0 18px;
  padding: 0;
}

/* ===== レスポンシブ ===== */
@media (max-width: 720px) {
  #history .history-wrapper { padding: 16px; }
  #history .history-table th:first-child { width:20% !important; }
  #history .history-table th:last-child  { width: auto; }
}
@media (max-width: 480px) {
  #history .history-table thead{ display: none; }
  #history .history-table th,
  #history .history-table td {
    max-width: 100%;
    display: block;
    border-bottom: 1px solid #d9d4cf; /* 視覚的区切りを維持 */
  }
}



/* =====================================
   Frame Border：このページは最初から表示
   （HOMEはHERO通過後表示のまま）
   - よくあるパターンに合わせて複数セレクタを用意
   - サイトの実クラス名に合わせて必要な行だけ残してください
   ===================================== */
/* 1) フレーム要素が .frame-border / .frame-lines の場合 */
#history .frame-border,
#history .frame-lines {
  opacity: 1 !important;
  transform: none !important;
  transition-delay: 0s !important;
}
/* 2) bodyやmainの ::before/::after で線を描いている場合 */
body#history::before,
body#history::after,
#history main::before,
#history main::after {
  opacity: 1 !important;
  transform: none !important;
  transition-delay: 0s !important;
}
/* 3) スクロール後に付くクラス（例: .is-framed / .show-frame）を強制ONしたい場合は
   下の補助JSを使う。CSSで十分なら不要。 */

/* ▼ /js/history-helper.js 末尾に追記できるJS（任意）
(function(){
  // サイトの実クラス名に変更してください（例: 'is-framed' or 'show-frame'）
  document.addEventListener('DOMContentLoaded', function(){
    document.body.classList.add('is-framed');
  });
})();
*/

/* =====================================
   左上固定ロゴを履歴ページでも最初から表示
   HOME では HERO 通過後に出る仕様だが、
   このページでは初期状態から visible にする。
   ===================================== */
/* 1) ロゴが .site-logo / .logo-fixed の場合 */
#history .site-logo,
#history .logo-fixed {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  transition-delay: 0s !important;
}
/* 2) header 内で制御されている場合 */
#history header .site-logo,
#history header .logo {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}
/* 3) JSで class="show-logo" 等を付ける場合の保険 */
body#history.is-loaded .site-logo {
  opacity: 1 !important;
}