@charset "UTF-8";
/* ==========================================================================
   有料席ページ用「サイト共通ヘッダー・フッター」

   本体サイト（../../css/keirinsai68.css）のヘッダー／フッター部分だけを
   有料席へ移植したもの。マークアップは include/site68_header.php と
   include/site68_footer.php。

   読み込み順は reset → base → index → class → theme_a → **このファイル**。
   必ず最後に読むこと。理由は下の「既存CSSとの干渉」を参照。

   ■ .site68 を起点にしている理由
   有料席の既存CSS（base.css / theme_a.css）には
       header {} / header img {} / footer {} / footer a {}
   のような要素セレクタが効いており、そのままでは新しいヘッダー・フッターにも
   当たってしまう。そこでこのファイルの指定は**すべて .site68 を起点**にして
   詳細度で上回るようにしてある。`.site68` を外すと既存CSSに負ける。

   ■ 単位が px の理由（重要）
   有料席は base.css で `html { font-size: 62.5% }`（＝1rem が 10px）に
   してある。本体サイトは 1rem＝16px なので、keirinsai68.css の rem 値を
   そのまま持ってくると文字が62.5%の大きさで出てしまう。
   ここでは**本体サイトでの実寸を px で直書き**して、html 側の設定に
   影響されないようにしている。値を直すときは px のまま調整すること。

   ■ 変数について
   theme_a.css が :root に --line や --text を定義している。同じ名前で
   上書きすると有料席本体の配色が変わってしまうため、ここでは
   **--s68- 接頭辞**を付けた別名にしている。値は本体サイトと同じ。
   ========================================================================== */

:root {
  /* 地色（夜のバンク） */
  --s68-bg: #080C16;
  --s68-surface: #101828;
  --s68-surface-2: #0C1322;

  /* 文字。濃紺(#080C16)に対するコントラスト比: ink 17.3 / soft 14.8 / faint 10.4 */
  --s68-ink: #F4F1EA;
  --s68-ink-soft: #E4E0D6;
  --s68-ink-faint: #C3BDAF;

  /* 罫線（金を薄く） */
  --s68-line: rgba(212, 175, 55, 0.24);
  --s68-line-strong: rgba(212, 175, 55, 0.52);

  /* 差し色 */
  --s68-accent: #D4AF37;         /* 金 */
  --s68-accent-bright: #F5D76E;  /* 金（ハイライト） */

  /* 幅。有料席のキービジュアルが最大1200pxなので、ヘッダーの端をそこに合わせる
     （本体サイトは1180px。並べて見るものではないので揃えていない） */
  --s68-maxw: 1200px;
  --s68-header-h: 92px;
  --s68-gutter: clamp(20px, 4vw, 56px);

  --s68-f-disp: 'Roboto', "Helvetica Neue", "Arial", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif;
}

/* --------------------------------------------------------------------------
   共通：既存CSSの a への指定を打ち消す
   base.css の a:visited{color:cornflowerblue} / a:hover{color:deeppink;
   text-decoration:underline} がヘッダー・フッターのリンクにも当たるため、
   .site68 の中では色と下線を自前で持つ。
   -------------------------------------------------------------------------- */
.site68 a,
.site68 a:link,
.site68 a:visited,
.site68 a:hover,
.site68 a:active {
  text-decoration: none;
}

.site68 ul,
.site68 li {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ============ ヘッダー ============ */
header.site68 {
  position: sticky; top: 0; z-index: 60;
  width: 100%;
  background: rgba(8, 12, 22, 0.82);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--s68-line);
}
header.site68 .bar {
  display: flex; align-items: center; gap: 24px;
  height: var(--s68-header-h);
  max-width: var(--s68-maxw); margin-inline: auto; padding-inline: var(--s68-gutter);
}

/* 大会ロゴ（340×120 の透過PNG／白版）。高さ基準で縮める。
   ロゴは3段組み（第68回朝日新聞社杯／競輪祭GI／第4回競輪祭女子王座戦GI）で、
   小さくすると上下の細い行が潰れるため詰めすぎないこと。
   ※ base.css と theme_a.css の `header img { width: 70% / 100% }`（SP用）が
     ここにも当たるので、幅は auto で明示的に打ち消している。 */
header.site68 .brand { display: flex; align-items: center; margin-right: auto; min-width: 0; }
header.site68 .brand img { height: 72px; width: auto; max-width: 370px; object-fit: contain; display: block; }

header.site68 nav.main { display: flex; align-items: center; gap: 24px; }
header.site68 .nav-item { position: relative; }
/* 和文と欧文で幅が違う（例: 映像 / MOVIE）ため、左寄せだと2行の軸がずれる。
   項目内で中央に揃える。letter-spacing は最後の字の後ろにも入って見た目が左へ寄るので、
   その半分を text-indent で戻している。※ドロワー（1080px以下）では左寄せに戻す */
header.site68 .nav-parent {
  display: block; text-align: center; text-indent: 0.06em;
  font-size: 13px; letter-spacing: 0.12em; font-weight: 700; line-height: 1.5;
  color: var(--s68-ink-soft); position: relative; padding: 6px 0;
  transition: color 0.2s; cursor: pointer;
}
header.site68 .nav-parent small {
  display: block; text-indent: 0.1em; font-size: 9px; letter-spacing: 0.2em;
  color: var(--s68-ink-faint); text-transform: uppercase;
  font-family: var(--s68-f-disp); font-weight: 700;
}
header.site68 .nav-item:hover .nav-parent,
header.site68 .nav-item:focus-within .nav-parent { color: var(--s68-accent-bright); }
header.site68 .nav-parent::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
  background: var(--s68-accent-bright); transition: width 0.25s ease;
}
header.site68 .nav-item:hover .nav-parent::after,
header.site68 .nav-item:focus-within .nav-parent::after { width: 100%; }

/* 子メニュー（PC：ホバードロップダウン） */
header.site68 .submenu {
  position: absolute; top: 100%; left: 0; min-width: 230px;
  background: var(--s68-surface); border: 1px solid var(--s68-line); border-radius: 4px;
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.85); padding: 6px; margin: 0; z-index: 70;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
header.site68 .submenu::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
header.site68 .nav-item:hover .submenu,
header.site68 .nav-item:focus-within .submenu { opacity: 1; visibility: visible; transform: translateY(6px); }
header.site68 .nav-item:last-child .submenu,
header.site68 .nav-item:nth-last-child(2) .submenu { left: auto; right: 0; }
header.site68 .submenu a {
  display: block; padding: 10px 13px; border-radius: 3px;
  /* base.css の body{text-align:center} が効いてしまうので左揃えに戻す */
  text-align: left;
  font-size: 13px; font-weight: 700; letter-spacing: 0.04em; line-height: 1.5;
  color: var(--s68-ink-soft); white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
header.site68 .submenu a small { font-size: 11px; color: var(--s68-ink-faint); font-weight: 500; letter-spacing: 0; }
header.site68 .submenu a:hover,
header.site68 .submenu a[aria-current="page"] { background: var(--s68-surface-2); color: var(--s68-accent-bright); }
/* リンクしない子メニュー項目（掲載の許可待ちのページ用。site68_header.php）：見た目だけ残し、ホバーで反応させない */
header.site68 .submenu-static {
  display: block; padding: 10px 13px; text-align: left;
  font-size: 13px; font-weight: 700; letter-spacing: 0.04em; line-height: 1.5;
  color: var(--s68-ink-faint); white-space: nowrap; cursor: default;
}
header.site68 .submenu-static small { font-size: 11px; font-weight: 500; letter-spacing: 0; }

header.site68 .btn-ctc {
  display: inline-flex; align-items: center; line-height: 0;
  border-radius: 5px; overflow: hidden; flex: none;
  box-shadow: 0 0 0 1px var(--s68-line);
  transition: transform 0.15s, box-shadow 0.2s;
}
header.site68 .btn-ctc img { display: block; width: 46px; height: 46px; }
header.site68 .btn-ctc:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.8); }

header.site68 .burger { display: none; background: none; border: 0; color: var(--s68-ink); cursor: pointer; padding: 6px; }
header.site68 .burger svg { width: 26px; height: 26px; }
/* 開いているあいだは×に差し替える（状態は site68_header.php の aria-expanded） */
header.site68 .burger .ic-close { display: none; }
header.site68 .burger[aria-expanded="true"] .ic-open { display: none; }
header.site68 .burger[aria-expanded="true"] .ic-close { display: block; color: var(--s68-accent-bright); }

@media (max-width: 900px) {
  :root { --s68-header-h: 72px; }
  header.site68 .brand img { height: 54px; }
}
@media (max-width: 560px) {
  :root { --s68-header-h: 64px; }
  header.site68 .brand img { height: 46px; }
}

@media (max-width: 1080px) {
  header.site68 nav.main { display: none; }
  header.site68 .burger { display: inline-flex; }
  header.site68 nav.main.open {
    display: flex; position: absolute; top: var(--s68-header-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--s68-bg); border-bottom: 1px solid var(--s68-line);
    padding: 8px var(--s68-gutter) 19px;
    max-height: calc(100vh - var(--s68-header-h)); overflow-y: auto;
  }
  header.site68 nav.main.open .nav-item { border-top: 1px solid var(--s68-line); }
  header.site68 nav.main.open .nav-parent { padding: 14px 0 5px; color: var(--s68-ink); text-align: left; text-indent: 0; }
  header.site68 nav.main.open .nav-parent small { text-indent: 0; }
  header.site68 nav.main.open .nav-parent::after { display: none; }
  /* モバイル：子メニューは常時展開（アコーディオン式） */
  header.site68 nav.main.open .submenu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; background: transparent; min-width: 0;
    padding: 0 0 10px 13px; border-left: 2px solid var(--s68-line);
  }
  header.site68 nav.main.open .submenu::before { display: none; }
  header.site68 nav.main.open .submenu a { padding: 8px 6px; white-space: normal; color: var(--s68-ink-soft); }
  header.site68 nav.main.open .submenu-static { padding: 8px 6px; white-space: normal; }
}

/* ============ フッター ============
   base.css の footer{text-align:center; color:#fff; padding:10px 0} と
   theme_a.css の footer{background:#04060c} を打ち消す必要があるため、
   background だけでなく色・揃え・余白も明示している。 */
footer.site68 {
  width: 100%;
  background: var(--s68-surface-2);
  border-top: 1px solid var(--s68-line-strong);
  color: var(--s68-ink);
  text-align: left;
  padding: clamp(40px, 6vw, 64px) 0 32px;
}
footer.site68 .wrap {
  max-width: var(--s68-maxw); margin-inline: auto; padding-inline: var(--s68-gutter);
}
footer.site68 .foot-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 32px; }
/* フッターのブランドは大会ロゴ（白版）。ヘッダーより一回り小さくするが、
   ヘッダーと同じ3段組みなので細い行が読める高さは残すこと */
footer.site68 img.mark { height: 56px; width: auto; max-width: 100%; display: block; }
footer.site68 .foot-brand p { color: var(--s68-ink-soft); font-size: 14px; line-height: 1.8; margin: 10px 0 0; max-width: 38ch; }
footer.site68 .foot-links { display: flex; gap: clamp(32px, 6vw, 64px); flex-wrap: wrap; }
footer.site68 .foot-col h4 {
  /* base.css の h4 は黒い縦棒（border-left:10px）と可変フォントサイズが付くので打ち消す */
  border-left: 0; padding-left: 0;
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--s68-accent); font-family: var(--s68-f-disp); font-weight: 700; margin: 0 0 14px;
}
footer.site68 .foot-col a { display: block; font-size: 14px; line-height: 1.6; color: var(--s68-ink-soft); padding: 4px 0; transition: color 0.2s; }
footer.site68 .foot-col a:hover,
footer.site68 .foot-col a[aria-current="page"] { color: var(--s68-accent-bright); }
footer.site68 .foot-bottom {
  margin-top: clamp(32px, 5vw, 48px); padding-top: 22px; border-top: 1px solid var(--s68-line);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; align-items: center;
}
footer.site68 .foot-bottom small { color: var(--s68-ink-faint); font-size: 12px; letter-spacing: 0.04em; }

@media (max-width: 560px) {
  footer.site68 img.mark { height: 46px; }
}