/* ボートレースらしさ（2026-09-14）
   6艇カラーのストライプ・夜の水面・ターンマークを、既存の配色（黒地・ピンク・ライム）に足す。
   水面の青とターンマークのオレンジを差し色にする。 */
:root{
  --lane1:#f4f4f4;--lane2:#1c1c1c;--lane3:#e60012;--lane4:#0068b7;--lane5:#fff100;--lane6:#009944;
  --water:#0b2745;--water-deep:#06111f;--mark:#ff8a1f;
  --lane-stripe:linear-gradient(90deg,var(--lane1) 0 16.66%,#3a3f47 16.66% 33.33%,var(--lane3) 33.33% 50%,var(--lane4) 50% 66.66%,var(--lane5) 66.66% 83.33%,var(--lane6) 83.33% 100%);
}
html,body{overflow-x:clip}

/* ヘッダーとフッターに6艇カラーの線 */
.site-header{border-bottom:0}
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--lane-stripe)}
footer{position:relative;border-top:0}
footer::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--lane-stripe)}

/* ヒーロー：夜の水面 */
.home-hero{position:relative;isolation:isolate}
.home-hero::before{content:"";position:absolute;z-index:-2;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);
  background:
    radial-gradient(ellipse at 80% 28%,rgba(0,104,183,.30),transparent 55%),
    radial-gradient(ellipse at 8% 92%,rgba(255,79,163,.10),transparent 50%),
    linear-gradient(180deg,var(--water-deep) 0%,var(--water) 72%,var(--bg) 100%)}
.home-hero::after{content:"";position:absolute;z-index:-1;left:50%;bottom:0;width:100vw;height:150px;transform:translateX(-50%);opacity:.9;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='22'%3E%3Cpath d='M0 11 q15 -8 30 0 t30 0 t30 0 t30 0' fill='none' stroke='rgba(140,200,255,0.12)' stroke-width='2'/%3E%3C/svg%3E") repeat;
  -webkit-mask-image:linear-gradient(0deg,#000,transparent);mask-image:linear-gradient(0deg,#000,transparent)}
.hero-category:before{width:34px;height:8px;border-radius:2px;background:var(--lane-stripe);box-shadow:none}
.home-hero{grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr)}
.home-hero h1{font-size:clamp(2.6rem,4.9vw,4.4rem)}
.home-proof{grid-template-columns:repeat(3,minmax(0,1fr))}
.home-proof div{border-top:3px solid var(--lane4);background:rgba(8,14,24,.82)}
.home-proof div:nth-child(2){border-top-color:var(--mark)}
.home-proof div:nth-child(3){border-top-color:var(--pink)}

/* ヒーロー右：水面のコースと、今日のレース */
.hero-course{justify-self:end;display:grid;gap:10px;width:100%;max-width:430px}
.course-frame{position:relative;overflow:hidden;border:1px solid rgba(120,180,255,.24);border-radius:18px;background:var(--water-deep);box-shadow:0 26px 70px rgba(0,0,0,.35)}
.course-caption{position:absolute;left:14px;top:10px;margin:0;color:rgba(220,236,255,.78);font-size:.62rem;font-weight:900;letter-spacing:.12em}
.course-svg{display:block;width:100%;height:auto}
.course-svg text{font:900 10px Inter,"Noto Sans JP",system-ui,sans-serif;text-anchor:middle}
.course-svg .course-label{font-size:8px;font-weight:800;fill:rgba(220,236,255,.6)}
.course-svg .boat-bob{animation:boat-bob 2.8s ease-in-out infinite;animation-delay:var(--d,0s)}
.course-svg .wake{fill:none;stroke:rgba(255,255,255,.3);stroke-width:2;stroke-linecap:round;stroke-dasharray:6 5;animation:wake 1.4s linear infinite}
@keyframes boat-bob{0%,100%{transform:translate(0,0)}50%{transform:translate(-2px,-1.5px)}}
@keyframes wake{to{stroke-dashoffset:22}}
@media (prefers-reduced-motion:reduce){.course-svg .boat-bob,.course-svg .wake{animation:none}}

.hero-today{padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:rgba(8,13,22,.88)}
.hero-today-label{margin:0 0 8px;color:var(--mark);font-size:.64rem;font-weight:950;letter-spacing:.14em}
.hero-today-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.hero-today-grid div{padding:8px 10px;border-radius:9px;background:#0c1524}
.hero-today-grid span{display:block;color:var(--muted);font-size:.6rem;font-weight:850;white-space:nowrap}
.hero-today-grid strong{font-size:1.08rem}
.hero-next{appearance:none;display:flex;align-items:center;gap:10px;width:100%;margin-top:8px;padding:10px 12px;border:1px solid rgba(255,138,31,.45);border-radius:10px;background:rgba(255,138,31,.08);color:var(--text);font:inherit;text-align:left;cursor:pointer}
.hero-next span{color:var(--mark);font-size:.64rem;font-weight:950;white-space:nowrap}
.hero-next b{font-size:.92rem}
.hero-next i{margin-left:auto;color:var(--mark);font-style:normal;font-weight:900}
.hero-next:hover,.hero-next:focus-visible{background:rgba(255,138,31,.16);outline:none}
.hero-today-empty,.hero-today .empty{margin:6px 0 0;color:var(--muted);font-size:.78rem}

/* 見出しの頭に6艇カラーの小さな線 */
.section-head .eyebrow{display:inline-flex;align-items:center;gap:8px}
.section-head .eyebrow::before{content:"";flex:none;width:24px;height:4px;border-radius:2px;background:var(--lane-stripe)}

/* レースカードの頭にも同じ線 */
.race-card::before{content:"";display:block;height:3px;background:var(--lane-stripe)}

@media(max-width:760px){
  .home-hero{grid-template-columns:1fr}
  .home-hero h1{font-size:clamp(2.35rem,10.8vw,3.7rem)}
  .hero-course{justify-self:stretch;max-width:100%;margin-top:22px}
  .home-proof{grid-template-columns:repeat(3,minmax(0,1fr))}
  .home-proof div{padding:10px 9px}
  .hero-today{padding:12px}
  .hero-today-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-today-grid strong{font-size:.98rem}
}

/* トップ：分析中のレース（実データ。コースのイラストから置き換え） */
.hero-analysis{padding:16px 18px;border:1px solid rgba(120,180,255,.24);border-radius:18px;background:linear-gradient(180deg,rgba(13,44,79,.92),rgba(6,17,31,.94));box-shadow:0 26px 70px rgba(0,0,0,.35)}
.hero-analysis-label{display:flex;align-items:center;gap:8px;margin:0 0 8px;color:var(--lime);font-size:.64rem;font-weight:950;letter-spacing:.14em}
.hero-analysis-label::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--lime);animation:analyzing-pulse 1.6s ease-out infinite}
@keyframes analyzing-pulse{0%{box-shadow:0 0 0 0 rgba(200,255,56,.55)}100%{box-shadow:0 0 0 10px rgba(200,255,56,0)}}
.hero-analysis-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
.hero-analysis-head strong{font-size:1.25rem}
.hero-analysis-head span{color:var(--muted);font-size:.72rem;font-weight:800}
.hero-analysis-rows{display:grid;gap:5px;margin:0;padding:0;list-style:none}
.hero-analysis-rows li{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:8px;padding:5px 8px;border-radius:8px;background:rgba(8,13,22,.7)}
.hero-analysis-rows .boat-meter{margin:0}
.hero-analysis-name{overflow:hidden;font-size:.8rem;font-weight:800;white-space:nowrap;text-overflow:ellipsis}
.hero-lane{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:5px;font-size:.72rem;font-weight:900}
.hero-lane[data-lane="1"]{background:#f4f4f4;color:#111}
.hero-lane[data-lane="2"]{background:#1c1c1c;color:#fff;box-shadow:inset 0 0 0 1px #6b717b}
.hero-lane[data-lane="3"]{background:#e60012;color:#fff}
.hero-lane[data-lane="4"]{background:#0068b7;color:#fff}
.hero-lane[data-lane="5"]{background:#fff100;color:#111}
.hero-lane[data-lane="6"]{background:#009944;color:#fff}
.hero-analysis-reason{margin:10px 0 0;color:#e6e9ee;font-size:.76rem;line-height:1.55}
.hero-analysis-reason span{margin-right:6px;padding:1px 7px;border-radius:99px;background:var(--pink);color:#111;font-size:.6rem;font-weight:950}
.hero-analysis-combos{margin:6px 0 0;color:var(--muted);font-size:.72rem}
.hero-analysis-combos b{color:var(--text);letter-spacing:.02em}
.hero-analysis-open{appearance:none;display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:10px;padding:10px 12px;border:1px solid rgba(200,255,56,.45);border-radius:10px;background:rgba(200,255,56,.08);color:var(--text);font:inherit;font-size:.82rem;font-weight:900;cursor:pointer}
.hero-analysis-open i{color:var(--lime);font-style:normal}
.hero-analysis-open:hover,.hero-analysis-open:focus-visible{background:rgba(200,255,56,.16);outline:none}
.hero-noi{position:relative;margin:0;overflow:hidden;height:170px;border:1px solid rgba(120,180,255,.24);border-radius:18px;background:#0b1422}
.hero-noi img{display:block;width:100%;height:100%;object-fit:cover;object-position:72% 28%}
.hero-noi::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,10,18,.88) 0%,rgba(6,10,18,.25) 55%,rgba(6,10,18,0) 100%)}
.hero-noi figcaption{position:absolute;z-index:1;left:14px;bottom:12px;display:flex;flex-direction:column;gap:3px;color:#fff;font-size:.84rem;font-weight:900}
.hero-noi figcaption b{width:max-content;padding:1px 8px;border-radius:99px;background:var(--pink);color:#111;font-size:.62rem}
@media (prefers-reduced-motion:reduce){.hero-analysis-label::before{animation:none}}
@media(max-width:760px){.hero-noi{height:150px}.hero-analysis{padding:12px}.hero-analysis-rows li{grid-template-columns:22px minmax(0,1fr) auto;padding:4px 6px}.hero-analysis-name{font-size:.74rem}}

/* 初心者ガイドへの導線 */
.guide-strip{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:rgba(56,225,255,.06);color:var(--muted);font-size:.78rem;font-weight:800}
.guide-strip a{padding:4px 10px;border:1px solid rgba(56,225,255,.4);border-radius:99px;color:var(--cyan);text-decoration:none}
.guide-strip a:hover{background:rgba(56,225,255,.14)}
.foot-links{margin:0 0 10px!important;font-weight:800}
.foot-links a{color:var(--cyan)}
@media(max-width:760px){.guide-strip{font-size:.72rem;padding:9px 10px}}