/* ============================================================
   若松日和 オリジナル出走表 - スタイルシート
   コンセプト: ボールド＆スポーティ
   ============================================================ */

/* --- リセット・ベース --- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

:root{
  /* プライマリ */
  --navy:       #0a1628;
  --navy-mid:   #11253f;
  --navy-light: #1a3556;

  /* アクセント */
  --electric:   #00b4ff;
  --cyan:       #00e5ff;
  --orange:     #ff6b2b;
  --red:        #ff2244;
  --yellow:     #ffe940;
  --gold:       #f5c518;

  /* ニュートラル */
  --white:      #ffffff;
  --gray-100:   #f0f2f5;
  --gray-200:   #dce1e8;
  --gray-400:   #8892a4;
  --gray-600:   #4a5568;
  --gray-800:   #2d3748;
  --dark:       #0d0d0d;

  /* ランクカラー */
  --rank-ss: #ff1744;
  --rank-s:  #ff5722;
  --rank-a:  #e8a817;
  --rank-b:  #6c7b95;
  --rank-c:  #4a5568;

  /* テキスト */
  --text-on-dark:  #e8ecf1;
  --text-on-light: #1a2236;

  /* シャドウ */
  --shadow-sm: 0 2px 8px rgba(0,0,0,.15);
  --shadow-md: 0 4px 20px rgba(0,0,0,.25);
  --shadow-lg: 0 8px 40px rgba(0,0,0,.35);
  --shadow-glow: 0 0 20px rgba(0,180,255,.3);

  /* サイズ */
  --max-w: 1100px;
  --radius: 8px;
}

html{
  scroll-behavior:smooth;
  scroll-padding-top: 52px;
}

body{
  font-family: "M PLUS 1p","Noto Sans JP","Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;
  background:
    linear-gradient(to bottom, rgba(10,22,40,.88), rgba(10,22,40,.94)),
    url('images/N_15.jpg') center top / cover no-repeat fixed;
  color: var(--text-on-dark);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a{ color: var(--electric); text-decoration:none; transition: color .2s; }
a:hover{ color: var(--cyan); }

img{ max-width:100%; height:auto; }

/* ============================================================
   ヘッダー
   ============================================================ */
.site-header{
  position: relative;
  background:
    linear-gradient(135deg, rgba(10,22,40,.82), rgba(17,37,63,.78), rgba(26,53,86,.75)),
    url('images/N_10.jpg') center/cover no-repeat;
  padding: 48px 20px 56px;
  text-align: center;
  overflow: hidden;
}

/* 斜めストライプ装飾 */
.site-header::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0; bottom:0;
  background:
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 40px,
      rgba(0,180,255,.04) 40px,
      rgba(0,180,255,.04) 80px
    );
  pointer-events:none;
}

/* アクセントライン（上部） */
.site-header::after{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:4px;
  background: #0066aa;
}

/* ヘッダー上部：ロゴ中央＋ナビ右寄せ */
.site-header__top{
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}

.site-header__nav{
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 8px;
}

.nav-btn--sm{
  padding: 6px 14px !important;
  font-size: 12px;
}

.site-header__logo-wrap{
  display: inline-block;
  background: var(--white);
  padding: 10px 24px;
  border-radius: 12px;
  margin: 0;
  position: relative;
  box-shadow:
    0 4px 24px rgba(0,0,0,.3),
    0 0 40px rgba(0,180,255,.12);
}

.site-header__logo{
  max-width: 220px;
  display: block;
  position: relative;
}

.site-header__title{
  font-family: "Noto Sans JP","Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;
  font-size: 32px;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
  position: relative;
  color: var(--white);
  filter: drop-shadow(0 2px 8px var(--navy)) drop-shadow(0 0 16px var(--navy));
  background: linear-gradient(
    90deg,
    var(--white) 0%,
    var(--white) 35%,
    var(--yellow) 50%,
    var(--white) 65%,
    var(--white) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer{
  0%,100%{ background-position: 100% 0; }
  50%{ background-position: -100% 0; }
}

/* タイトル左カッパ */
.site-header__title{
  display: flex;
  justify-content: center;
  align-items: center;
}
.title-kappa{
  height: 2.6em;
  margin-right: 16px;
  margin-top: -0.5em;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.5));
}
/* カッパ分の幅を右にも確保してテキスト中央維持 */
.site-header__title::after{
  content: "";
  width: 2.6em;
  margin-left: 8px;
  flex-shrink: 0;
}

/* ボートカッパアニメーション */
.kappa-boat{
  height: 48px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.4));
  animation: boat-run 6s ease-in-out infinite;
}

/* info-card h2内（トップページ） */
.kappa-boat--h2{
  vertical-align: middle;
  margin-left: auto;
  float: right;
  margin-top: -4px;
}

/* race-title-bar内（出走表/選手一覧） */
.kappa-boat--bar{
  position: absolute;
  right: 16px;
  bottom: 8px;
}

@keyframes boat-run{
  0%{ transform: translateX(0) rotate(0deg); }
  15%{ transform: translateX(-8px) rotate(-1.5deg); }
  30%{ transform: translateX(4px) rotate(1deg); }
  50%{ transform: translateX(-6px) rotate(-1deg); }
  70%{ transform: translateX(6px) rotate(1.5deg); }
  85%{ transform: translateX(-4px) rotate(-0.5deg); }
  100%{ transform: translateX(0) rotate(0deg); }
}

.site-header__sub{
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-400);
  letter-spacing: 2px;
  margin-top: 6px;
  position: relative;
}

/* ============================================================
   ナビボタンエリア
   ============================================================ */
.nav-buttons{
  max-width: var(--max-w);
  margin: -20px auto 0;
  padding: 12px 20px 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  position: relative;
  z-index: 10;
  overflow-x: clip;
  overflow-y: visible;
}

.nav-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 20px;
  background: linear-gradient(135deg, #1a3556, #4a90c2);
  border: 3px solid #5aa3d0;
  border-radius: var(--radius);
  color: var(--white);
  font-weight: 700;
  font-size: 16px;
  text-align: center;
  text-decoration: none;
  transition: all .3s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(74,144,194,.3), 0 0 10px rgba(74,144,194,.15);
  animation: pulse-glow-blue 2s ease-in-out infinite;
}

.nav-btn::before{
  content:"";
  position:absolute;
  top:0; left:-100%; width:100%; height:100%;
  background: linear-gradient(90px, transparent, rgba(90,163,208,.2), transparent);
  transition: left .5s ease;
  pointer-events: none;
}

.nav-btn:hover{
  transform: translateY(-5px);
  box-shadow: 0 8px 32px rgba(74,144,194,.5), 0 0 15px rgba(90,163,208,.2);
  color: var(--white);
}

.nav-btn:hover::before{
  left:100%;
}

.nav-btn__icon{
  font-size: 22px;
  flex-shrink: 0;
}

.nav-btn__text{
  display: inline;
  white-space: nowrap;
}

.nav-btn__label{
  display: none;
}

.nav-btn__content{
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ダウンロードボタン用スタイル */
.nav-btn--download{
  overflow: visible;
}

.nav-btn--download .nav-btn__label{
  display: block;
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 600;
  background: linear-gradient(135deg, #d97706, #f59e0b);
  padding: 3px 12px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}

.nav-btn--download .nav-btn__icon{
  font-size: 22px;
}

.nav-btn--download .nav-btn__text{
  font-size: 16px;
}

/* プライマリボタン（オリジナル出走表）- ティール/ターコイズ系 */
.nav-btn--primary{
  padding: 18px 20px;
  font-size: 16px;
  font-weight: 800;
  background: linear-gradient(135deg, #117a65, #16a085, #1abc9c);
  border: 4px solid #1abc9c;
  box-shadow: 0 8px 32px rgba(26,188,156,.4), 0 0 15px rgba(22,160,133,.2);
  animation: pulse-glow-teal 1.8s ease-in-out infinite;
  text-shadow: 0 2px 8px rgba(0,0,0,.4);
}

.nav-btn--primary .nav-btn__icon{
  font-size: 22px;
}

.nav-btn--primary:hover{
  transform: translateY(-6px);
  box-shadow: 0 10px 40px rgba(26,188,156,.6), 0 0 20px rgba(22,160,133,.3);
}

.nav-btn--primary::before{
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
}

@keyframes pulse-glow-blue {
  0%, 100% {
    box-shadow: 0 6px 24px rgba(74,144,194,.3), 0 0 10px rgba(74,144,194,.15);
  }
  50% {
    box-shadow: 0 6px 24px rgba(74,144,194,.4), 0 0 12px rgba(90,163,208,.2);
  }
}

@keyframes pulse-glow-teal {
  0%, 100% {
    box-shadow: 0 8px 32px rgba(26,188,156,.4), 0 0 15px rgba(22,160,133,.2);
  }
  50% {
    box-shadow: 0 8px 32px rgba(26,188,156,.5), 0 0 18px rgba(22,160,133,.25);
  }
}

/* レースナビ（sticky） */
.race-nav{
  position: sticky;
  top: 0;
  z-index: 900;
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 10px 12px;
  margin-bottom: 24px;
  background: rgba(10,22,40,.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0,180,255,.15);
}

.race-nav__link{
  display: inline-block;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-400);
  border-radius: 6px;
  transition: background .2s;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.race-nav__link:visited,
.race-nav__link:active,
.race-nav__link:focus{
  color: var(--gray-400);
  background: transparent;
  outline: none;
}

@media (hover: hover){
  .race-nav__link:hover{
    color: var(--white);
    background: var(--electric);
  }
}
.race-nav__link.is-active{
  color: var(--white);
  background: var(--electric);
}

.race-nav__link.is-changed::after{
  content: "●";
  display: block;
  font-size: 8px;
  line-height: 1;
  color: var(--orange);
  text-align: center;
  margin-top: 2px;
}

/* レースタイトルバー */
.race-title-bar{
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 48px 20px;
  color: var(--white);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 2px;
  text-align: center;
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
  position: relative;
  overflow: hidden;
}

.date-badges--center{
  justify-content: center;
  margin-top: 16px;
  margin-bottom: 0;
}

.race-title-bar + .section{
  margin-top: 0;
}

/* ページ間ナビ（サブページ用） */
.page-nav{
  max-width: var(--max-w);
  margin: 24px auto;
  padding: 0 20px;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.page-nav .nav-btn{
  padding: 14px 20px;
  font-size: 14px;
  flex: 0 1 auto;
}

/* ============================================================
   セクション共通
   ============================================================ */
.section{
  max-width: var(--max-w);
  margin: 48px auto;
  padding: 0 20px;
}

.section__title{
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 1px;
  margin-bottom: 20px;
  padding-left: 16px;
  border-left: 4px solid var(--electric);
  color: var(--white);
}

/* 説明カード */
.info-card{
  background: rgba(17,37,63,.85);
  border: 1px solid rgba(0,180,255,.12);
  border-radius: var(--radius);
  padding: 32px;
  line-height: 1.9;
}

.info-card h2{
  font-size: 24px;
  font-weight: 500;
  color: var(--white);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--white);
}

.info-card p{
  margin-bottom: 14px;
  color: var(--text-on-dark);
}

.info-card ul{
  padding-left: 20px;
  margin-bottom: 14px;
}

.info-card li{
  margin-bottom: 6px;
  color: var(--text-on-dark);
}

.info-card li::marker{
  color: var(--electric);
}

.highlight{
  font-weight: 500;
  color: var(--yellow);
}

/* ============================================================
   レース情報バー（出走表）
   ============================================================ */
.race-section{
  max-width: var(--max-w);
  margin: 0 auto 32px;
  padding: 0 20px;
}

/* テーブルだけ右端まで伸ばす */
.race-section .table-wrap{
  margin-right: -20px;
}

.race-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  background: linear-gradient(90deg, var(--navy-light), var(--navy-mid));
  padding: 14px 20px;
  border-radius: var(--radius) var(--radius) 0 0;
  border-left: 4px solid var(--electric);
}

.race-header__title{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 500;
  color: var(--white);
  letter-spacing: 1px;
  flex: 1;
}

.race-header__num{
  font-size: 20px;
  font-weight: 900;
  color: var(--electric);
}

.race-header__type{
  font-size: 13px;
  color: var(--gray-200);
}

.race-header__deadline{
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.race-header__deadline-label{
  font-size: 10px;
  font-weight: 700;
  color: var(--gray-400);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.race-header__deadline-time{
  font-size: 13px;
  font-weight: 900;
  color: var(--cyan);
  background: rgba(0,229,255,.1);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid rgba(0,229,255,.25);
  letter-spacing: 1px;
}

.race-header__controls{
  display: flex;
  align-items: center;
  gap: 8px;
}

.course-input{
  width: 120px;
  padding: 6px 10px;
  border: 1px solid rgba(0,180,255,.3);
  border-radius: 4px;
  background: var(--navy);
  color: var(--white);
  font-size: 16px;
  font-family: inherit;
  outline: none;
  transition: border-color .2s;
}

.course-input:focus{
  border-color: var(--electric);
  box-shadow: 0 0 8px rgba(0,180,255,.2);
}

.course-change-btn{
  padding: 6px 14px;
  background: #0066aa;
  color: var(--white);
  font-weight: 500;
  font-size: 13px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all .2s;
}

.course-change-btn:hover{
  background: var(--cyan);
  box-shadow: 0 0 12px rgba(0,229,255,.4);
}

/* 進入変更適用中 */
.race-section--changed .race-header{
  border-left-color: var(--orange);
  background: linear-gradient(90deg, rgba(255,107,43,.15), var(--navy-mid));
}

.race-section--changed .race-header__title::after{
  content: "（進入変更中）";
  margin-left: 10px;
  font-size: 12px;
  font-weight: 400;
  color: var(--orange);
}

/* ============================================================
   テーブル共通
   ============================================================ */
.data-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--navy-mid);
  border-radius: 0 0 var(--radius) var(--radius);
  font-size: 14px;
}

.data-table thead th{
  background: var(--navy);
  color: var(--gray-400);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 10px 8px;
  border-bottom: 2px solid rgba(0,180,255,.15);
  white-space: nowrap;
  text-align: center;
}

.data-table tbody td{
  padding: 10px 8px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  text-align: center;
  vertical-align: middle;
  color: var(--text-on-dark);
}

.data-table tbody tr{
  transition: background .15s;
}

.data-table tbody tr:hover{
  background: rgba(0,180,255,.06);
}

/* 枠番セル共通スタイル */
.waku-cell{
  padding: 6px 8px !important;
  border-bottom: none !important;
  position: sticky;
  left: 0;
  z-index: 2;
  text-align: center;
}

/* 出走表ヘッダー1列目も固定 */
.data-table thead th:first-child{
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--navy);
}

/* 出走表: 選手名列も固定 */
.data-table thead th:nth-child(2),
.data-table tbody td:nth-child(2){
  position: sticky;
  left: 28px;
  z-index: 2;
  background: var(--navy-mid);
}

.data-table thead th:nth-child(2){
  z-index: 3;
  background: var(--navy);
}

.data-table tbody td:nth-child(2){
  border-right: 2px solid rgba(0,180,255,.15);
}

.data-table thead th:nth-child(2){
  border-right: 2px solid rgba(0,180,255,.15);
}

.waku-cell .waku{
  font-weight: 900;
  font-size: 13px;
  line-height: 1;
}

/* 枠番カラー（セル全体をベタ塗り） */
.waku-cell:has(.waku-1){ background: #ffffff; color: #0a1628; }
.waku-cell:has(.waku-2){ background: #111111; color: #ffffff; }
.waku-cell:has(.waku-3){ background: #cc0000; color: #ffffff; }
.waku-cell:has(.waku-4){ background: #0055cc; color: #ffffff; }
.waku-cell:has(.waku-5){ background: #ccaa00; color: #0a1628; }
.waku-cell:has(.waku-6){ background: #00884c; color: #ffffff; }

.waku-1,.waku-2,.waku-3,.waku-4,.waku-5,.waku-6{
  color: inherit;
}

/* 選手名 */
.player-name{
  font-weight: 500;
  color: var(--white);
  white-space: nowrap;
}

.player-info{
  font-size: 12px;
  color: var(--gray-400);
}

/* 女子選手 */
.female-name{
  color: #e8a0b8;
}
.female-icon{
  color: #ff69b4;
  font-size: 14px;
  margin-left: 2px;
}

/* ============================================================
   ランクタグ
   ============================================================ */
.rank{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  line-height: 1.4;
}

.rank-ss{
  background: var(--rank-ss);
  color: var(--white);
  box-shadow: 0 0 8px rgba(255,23,68,.4);
}

.rank-s{
  background: var(--rank-s);
  color: var(--white);
  box-shadow: 0 0 6px rgba(255,87,34,.3);
}

.rank-a{
  background: var(--rank-a);
  color: var(--white);
  box-shadow: 0 0 6px rgba(232,168,23,.3);
}

.rank-b{
  background: rgba(0,120,180,.2);
  color: #8ec8e8;
  border: 1px solid rgba(0,120,180,.35);
}

.rank-c{
  background: rgba(74,85,104,.2);
  color: var(--gray-400);
  border: 1px solid rgba(74,85,104,.3);
}

/* パーセント値ハイライト */
.pct-highlight{
  color: var(--white);
  font-weight: 700;
  background: rgba(255,34,68,.25);
  border-radius: 3px;
  padding: 2px 6px;
  box-shadow: inset 0 0 0 1px rgba(255,34,68,.5);
}

/* ============================================================
   日付バッジ（選手一覧）
   ============================================================ */
.date-badges{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.badge{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  background: var(--navy-mid);
  border: 1px solid rgba(0,180,255,.15);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-200);
}

.badge .sun{
  color: var(--red);
  font-weight: 500;
}

.badge .sat{
  color: var(--electric);
  font-weight: 500;
}

/* ============================================================
   選手一覧テーブル（race_player用）
   ============================================================ */

/* スクロール時のthead固定表示（JSクローン方式） */
.player-thead-fixed{
  position: fixed;
  top: 0;
  z-index: 900;
  overflow-x: auto;
  overflow-y: hidden;
  display: none;
  pointer-events: none;
  scrollbar-width: none;
    /* ▼ 追加ここからが重要 ▼ */
  background: #ffffff;                 /* 透過禁止 */
  background-clip: padding-box;
  transform: translateZ(0);            /* iOS描画バグ回避 */
  -webkit-transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.player-thead-fixed::-webkit-scrollbar{
  display: none;
}

.player-thead-fixed.is-visible{
  display: block;
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
}

.player-thead-fixed table,
.player-thead-fixed th{
  background: #ffffff;
}

.player-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--navy-mid);
  border-radius: var(--radius);
  font-size: 14px;
}

.player-table thead th{
  background: var(--navy);
  color: var(--gray-400);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 10px 8px;
  border-bottom: 2px solid rgba(0,180,255,.15);
  white-space: nowrap;
  text-align: center;
}

.player-table tbody td{
  padding: 10px 8px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  text-align: center;
  vertical-align: middle;
  color: var(--text-on-dark);
}

.player-table tbody tr{
  transition: background .15s;
}

.player-table tbody tr:hover{
  background: rgba(0,180,255,.06);
}

.player-table .rank-col{
  font-size: 12px;
}

/* 選手一覧: 順位・名前列を固定（横方向） */
.player-table thead tr:first-child th:nth-child(1),
.player-table tbody td:nth-child(1){
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--navy-mid);
  min-width: 36px;
}

.player-table thead tr:first-child th:nth-child(2),
.player-table tbody td:nth-child(2){
  position: sticky;
  left: 36px;
  z-index: 2;
  background: var(--navy-mid);
}

/* 固定列のthead th（横+縦のsticky交差点）は最高z-index */
.player-table thead tr:first-child th:nth-child(1),
.player-table thead tr:first-child th:nth-child(2){
  z-index: 12;
  background: var(--navy);
}

.player-table tbody td:nth-child(2){
  border-right: 2px solid rgba(0,180,255,.15);
}

.player-table thead tr:first-child th:nth-child(2){
  border-right: 2px solid rgba(0,180,255,.15);
}

/* 順位カラム */
.player-rank{
  font-weight: 500;
  font-size: 16px;
  color: var(--electric);
}

.player-rank--top3{
  color: var(--gold);
  text-shadow: 0 0 8px rgba(245,197,24,.4);
}

/* 攻め方バー */
.attack-bar{
  display: flex;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  min-width: 60px;
}

.attack-bar__sashi{  background: var(--electric); }
.attack-bar__makuri{ background: var(--orange); }
.attack-bar__ms{     background: var(--yellow); }

/* ============================================================
   フッター
   ============================================================ */
.site-footer{
  margin-top: 60px;
  padding: 24px 20px;
  text-align: center;
  border-top: 1px solid rgba(0,180,255,.1);
  color: var(--gray-600);
  font-size: 12px;
}

.footer-link{
  color: var(--gray-400);
  text-decoration: none;
  transition: color .2s;
}

.footer-link:hover{
  color: var(--electric);
}

/* ============================================================
   トップへ戻るボタン
   ============================================================ */
.back-to-top{
  position: fixed;
  bottom: 32px;
  right: 24px;
  z-index: 999;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--electric), var(--cyan));
  color: var(--white);
  font-size: 20px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(.8);
  transition: opacity .4s, visibility .4s, transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
  box-shadow:
    0 4px 16px rgba(0,100,200,.4),
    0 0 24px rgba(0,180,255,.15);
  outline: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
}

.back-to-top.is-visible{
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.back-to-top:hover{
  transform: translateY(-4px) scale(1.1);
  box-shadow:
    0 8px 24px rgba(0,100,200,.5),
    0 0 32px rgba(0,180,255,.25);
}

.back-to-top:active{
  transform: translateY(0) scale(.95);
}

/* 矢印アイコン */
.back-to-top::before{
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  margin: 4px auto 0;
  border-left: 3px solid var(--white);
  border-top: 3px solid var(--white);
  transform: rotate(45deg);
}

/* ============================================================
   レスポンシブ
   ============================================================ */

/* テーブルを含むセクションのテーブルだけ右端まで */
.section > .table-wrap{
  margin-right: -20px;
}

/* テーブル横スクロール */
.table-wrap{
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 0 0 var(--radius) var(--radius);
}

/* 右端スクロールヒント（影） */
.table-wrap--has-scroll::after{
  content: "";
  position: sticky;
  right: 0;
  top: 0;
  display: block;
  width: 0;
  height: 100%;
  box-shadow: -20px 0 24px -4px rgba(10,22,40,.7);
  pointer-events: none;
  float: right;
  margin-top: -100%;
}

/* スクロールヒント矢印（画面下中央固定） */
.scroll-hint{
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 24px;
  background: rgba(0,100,200,.85);
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
  border-radius: 24px;
  pointer-events: none;
  z-index: 1000;
  white-space: nowrap;
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
  animation: scrollHintAnim 2.5s ease-out forwards;
}

@keyframes scrollHintAnim{
  0%   { opacity: 0; transform: translateX(-50%) translateY(20px); }
  12%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  35%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  50%  { opacity: 1; transform: translateX(-45%) translateY(0); }
  65%  { opacity: 1; transform: translateX(-55%) translateY(0); }
  80%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(20px); }
}

/* スクロールバーデザイン */
.table-wrap::-webkit-scrollbar{
  height: 6px;
}

.table-wrap::-webkit-scrollbar-track{
  background: rgba(0,20,40,.4);
  border-radius: 3px;
}

.table-wrap::-webkit-scrollbar-thumb{
  background: rgba(0,120,200,.4);
  border-radius: 3px;
}

.table-wrap::-webkit-scrollbar-thumb:hover{
  background: rgba(0,120,200,.7);
}

/* Firefox用スクロールバー */
.table-wrap{
  scrollbar-width: thin;
  scrollbar-color: rgba(0,120,200,.4) rgba(0,20,40,.4);
}

@media (max-width: 768px){
  .site-header{ padding: 32px 16px 40px; }
  .site-header__top{ flex-direction: column; gap: 12px; align-items: center; }
  .site-header__nav{ position: static; transform: none; justify-content: center; width: 100%; }
  .site-header__logo{ max-width: 180px; }
  .site-header__title{ font-size: 22px; letter-spacing: 1px; }
  .nav-buttons{
    margin-top: -10px;
    padding-top: 10px;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    overflow: clip;
  }
  .nav-btn{ padding: 16px 14px; font-size: 16px; }
  .nav-btn__icon{ font-size: 22px; }
  .nav-btn__text{ white-space: normal; }
  .nav-btn--primary{ padding: 16px 14px; font-size: 16px; }
  .nav-btn--primary .nav-btn__icon{ font-size: 22px; }
  .nav-btn--download{ padding: 22px 14px 16px; }
  .nav-btn--download .nav-btn__label{ font-size: 9px; padding: 2px 10px; top: 6px; }
  .nav-btn--download .nav-btn__text{ font-size: 16px; }
  .nav-btn--download .nav-btn__icon{ font-size: 22px; }
  .nav-btn--sm{ padding: 10px 14px; font-size: 12px; }
  .race-title-bar{ font-size: 16px; padding: 14px 10px; letter-spacing: 1px; padding-bottom: 25px; }
  .kappa-boat{ height: 36px; }
  .kappa-boat--bar{ right: 8px; bottom: 4px; }
  .kappa-boat--h2{ height: 28px; }
  .race-section{ padding: 0 10px; }
  .race-section .table-wrap{ margin-right: -10px; }
  .section > .table-wrap{ margin-right: -10px; }
  .race-nav{ gap: 2px; padding: 8px 6px; }
  .race-nav__link{ padding: 5px 7px; font-size: 11px; }
  .section{ margin: 32px auto; padding: 0 10px; }
  .info-card{ padding: 20px; font-size: 14px; }
  .info-card h2{ font-size: 18px; }
  .race-header{ padding: 10px 14px; }
  .data-table{ font-size: 12px; }
  .data-table thead th{ padding: 8px 4px; font-size: 10px; }
  .data-table tbody td{ padding: 8px 4px; }
  /* 枠番セルをコンパクトに */
  .waku-cell{ padding: 0 !important; }
  .waku-cell .waku{ font-size: 11px; }
  .data-table thead th:first-child{ padding: 4px 2px; }
  .data-table thead th:nth-child(2),
  .data-table tbody td:nth-child(2){ left: 15px; }
  /* 選手情報テキストをコンパクトに */
  .player-name{ font-size: 9px; }
  .player-name strong{ font-size: 12px; }
  /* 選手一覧テーブルも出走表と同じコンパクトさに */
  .player-table{ font-size: 12px; }
  .player-table thead th{ padding: 8px 4px; font-size: 10px; }
  .player-table tbody td{ padding: 8px 4px; }
}

@media (max-width: 480px){
  .nav-buttons{ grid-template-columns: 1fr; padding-top: 10px; overflow-x: clip; overflow-y: visible; }
  .nav-btn{ padding: 16px 14px; font-size: 16px; }
  .nav-btn__icon{ font-size: 22px; }
  .nav-btn__text{ white-space: normal; }
  .nav-btn--primary{ padding: 16px 14px; font-size: 16px; }
  .nav-btn--primary .nav-btn__icon{ font-size: 22px; }
  .nav-btn--download{ padding: 22px 14px 16px; }
  .nav-btn--download .nav-btn__label{ font-size: 9px; padding: 2px 10px; top: 6px; }
  .nav-btn--download .nav-btn__text{ font-size: 16px; }
  .nav-btn--download .nav-btn__icon{ font-size: 22px; }
  .site-header__title{ font-size: 18px; }
  .race-header{ flex-direction: column; align-items: flex-start; }
}