/*
Theme Name: AI Keiba Predict
Theme URI: https://example.com
Author: Design Team
Description: 競馬AI予想サイトのトップページテンプレート。ヒーロー、本日のレース予想、選ばれる理由、実績、コラム、フッターの各セクションを収録。
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: ai-keiba-predict
*/

:root{
  --navy: #0d1b34;
  --navy-soft: #16274a;
  --gold: #cf9e3a;
  --gold-light: #e0b955;
  --ink: #1a2233;
  --muted: #667085;
  --border: #e5e7eb;
  --bg-hero-1: #eef1f6;
  --bg-hero-2: #dbe3ee;
  --white: #ffffff;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family: "Hiragino Kaku Gothic ProN","Yu Gothic",Helvetica,Arial,sans-serif;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}
img{max-width:100%;display:block;}
a{color: var(--gold); text-decoration:none;}
a:hover{color: var(--gold-light);}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;cursor:pointer;}
.container{max-width:1240px;margin:0 auto;padding:0 24px;}

/* ---------- Header ---------- */
.site-header{
  background: var(--navy);
  position: sticky; top:0; z-index: 100;
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 24px; gap: 24px;
}
.brand{display:flex; align-items:center; gap:12px; color:#fff;}
.brand-mark{
  width:48px;height:48px;border-radius:10px;
  overflow:hidden;
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background: var(--navy-soft);
}
.brand-mark img{width:100%; height:100%; object-fit:contain; display:block;}
.brand-text{display:flex; flex-direction:column; line-height:1.3;}
.brand-title{font-size:19px; font-weight:800; letter-spacing:.02em;}
.brand-sub{font-size:11px; color:#a9b3c9;}
.primary-nav{display:flex; gap:28px;}
.primary-nav a{color:#dfe4ee; font-size:14px; font-weight:600;}
.primary-nav a:hover{color:#fff;}
.header-actions{display:flex; align-items:center; gap:12px;}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 20px; border-radius:6px; font-size:14px; font-weight:700;
  border:1px solid transparent; white-space:nowrap;
}
.btn-outline{border-color:#3a4a6b; color:#e7ebf3; background:transparent;}
.btn-outline:hover{background:#16274a; color:#fff;}
.btn-gold{background: var(--gold); color: var(--navy);}
.btn-gold:hover{background: var(--gold-light); color: var(--navy);}
.menu-toggle{display:none;}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  background-color: var(--navy);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  padding: 100px 0 76px;
  overflow:hidden;
}
.hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(100deg, rgba(9,18,38,.94) 0%, rgba(9,18,38,.82) 32%, rgba(9,18,38,.5) 60%, rgba(9,18,38,.22) 100%);
}
.hero-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns: 1.6fr 0.62fr; gap:28px; align-items:start;
}
.hero-title{font-size:46px; line-height:1.25; font-weight:800; margin:0 0 18px; color:#fff;}
.hero-accent{color: var(--gold-light);}
.hero-desc{font-size:16px; color: #c7cfe0; line-height:1.9; margin:0 0 28px;}
.hero-cta{display:flex; gap:12px; margin-bottom:18px;}
.btn-lg{padding:14px 26px; font-size:15px; border-radius:6px;}
.btn-ghost{background:#fff; color: var(--ink); border:1px solid #cfd6e2;}
.btn-ghost:hover{background:#f4f6fa;}
.hero-note{
  display:inline-flex; align-items:center; gap:8px; font-size:13px; color: #dfe4ee;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); padding:8px 14px; border-radius:999px;
  backdrop-filter: blur(4px);
}
.hero-note .dot{width:16px;height:16px;border-radius:50%;background:var(--gold);flex-shrink:0;}
.hero-side{display:flex; flex-direction:column; gap:16px;}
.feature-card{
  background: var(--navy); color:#fff; border:1px solid #223257; border-radius:12px; padding:18px 20px;
}
.feature-card h3{font-size:13px; margin:0 0 12px; color: #aab3c8; font-weight:700;}
.feature-card ul li{
  font-size:13px; padding:6px 0; display:flex; gap:8px; align-items:flex-start; color: #fff;
}
.feature-card ul li:before{content:"✓"; color: var(--gold-light); font-weight:800;}
.stat-card{
  background: var(--navy); color:#fff; border-radius:12px; padding:20px; border:1px solid #223257;
}
.stat-card h3{font-size:12px; color:#aab3c8; margin:0 0 8px; font-weight:600;}
.stat-value{font-size:34px; font-weight:800; color: var(--gold-light); margin:0 0 14px;}
.sparkline{width:100%; height:70px;}
.spark-scale{display:flex; justify-content:space-between; font-size:10px; color:#7f8cab; margin-top:4px;}

/* ---------- Race Picks ---------- */
.section{padding:56px 0;}
.section-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:24px;}
.section-head h2{font-size:22px; font-weight:800; margin:0;}
.section-link{font-size:13px; font-weight:700; color: var(--ink); display:flex; gap:6px; align-items:center;}
.section-link:hover{color: var(--gold);}
.race-row{display:grid; grid-template-columns: repeat(5,1fr); gap:16px;}
.race-card{border:1px solid var(--border); border-radius:12px; overflow:hidden; background:#fff;}
.race-meta{padding:12px 14px 0;}
.race-track{font-size:12px; font-weight:700; color: var(--muted);}
.race-time{float:right; color:#9aa4b8; font-weight:500;}
.race-name{font-size:14px; font-weight:800; margin:4px 0 10px;}
.race-thumb{aspect-ratio: 4/2.6; overflow:hidden;}
.race-thumb img{width:100%; height:100%; object-fit:cover;}
.race-pick{padding:12px 14px 0; display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700;}
.pick-badge{
  background:#e11d2e; color:#fff; font-size:11px; font-weight:800;
  width:20px; height:20px; border-radius:4px; display:flex; align-items:center; justify-content:center;
}
.race-prob{padding:2px 14px 12px; font-size:12px; color: var(--muted);}
.race-prob b{color: var(--ink);}
.race-btn{
  display:block; margin:0 14px 14px; text-align:center; padding:9px; border-radius:6px;
  border:1px solid var(--border); font-size:13px; font-weight:700; color: var(--ink);
}
.race-btn:hover{background:#f4f6fa; color: var(--ink);}

/* ---------- Reasons ---------- */
.reasons{background: var(--navy); color:#fff;}
.reasons .eyebrow{color: var(--gold); text-align:center; font-size:12px; letter-spacing:.2em; font-weight:700;}
.reasons h2{text-align:center; font-size:26px; font-weight:800; margin:8px 0 40px;}
.reason-row{display:grid; grid-template-columns:repeat(4,1fr); gap:0;}
.reason-item{padding:0 28px; text-align:center; border-left:1px solid #223257;}
.reason-item:first-child{border-left:none;}
.reason-icon{
  width:54px; height:54px; margin:0 auto 18px; border-radius:50%;
  border:2px solid var(--gold); display:flex; align-items:center; justify-content:center;
}
.reason-item h3{font-size:15px; font-weight:800; color: var(--gold-light); margin:0 0 12px;}
.reason-item p{font-size:13px; color:#b7c0d6; line-height:1.9; margin:0;}

/* ---------- Results ---------- */
.results-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; flex-wrap:wrap; gap:12px;}
.results-head h2{font-size:20px; font-weight:800; margin:0; display:flex; align-items:center; gap:10px;}
.results-tag{font-size:12px; color: var(--muted); font-weight:500;}
.results-row{
  display:grid; grid-template-columns:repeat(5,1fr); gap:0;
  border:1px solid var(--border); border-radius:12px; overflow:hidden;
}
.result-stat{padding:22px 24px; border-left:1px solid var(--border); position:relative;}
.result-stat:first-child{border-left:none;}
.result-label{font-size:12px; color: var(--muted); display:flex; align-items:center; gap:8px; margin-bottom:8px;}
.good-badge{background:#f5a623; color:#fff; font-size:10px; font-weight:800; padding:2px 8px; border-radius:999px;}
.result-value{font-size:26px; font-weight:800;}

/* ---------- Articles ---------- */
.articles-grid{display:grid; grid-template-columns: repeat(4,1fr) 1.1fr; gap:16px;}
.article-card{border:1px solid var(--border); border-radius:12px; overflow:hidden;}
.article-thumb{position:relative; aspect-ratio:4/2.6; overflow:hidden;}
.article-thumb img{width:100%; height:100%; object-fit:cover;}
.article-tag{
  position:absolute; top:10px; left:10px; background: var(--navy); color:#fff;
  font-size:11px; font-weight:700; padding:3px 10px; border-radius:4px;
}
.article-body{padding:14px;}
.article-title{font-size:13px; font-weight:700; line-height:1.6; margin:0 0 8px;}
.article-date{font-size:11px; color:#9aa4b8;}
.cta-card{
  background: var(--navy); color:#fff; border-radius:12px; padding:24px; display:flex; flex-direction:column; justify-content:space-between;
}
.cta-card h3{font-size:16px; font-weight:800; margin:0 0 10px;}
.cta-card p{font-size:12px; color:#b7c0d6; line-height:1.7; margin:0 0 18px;}

/* ---------- Footer ---------- */
.site-footer{background: var(--navy); color:#b7c0d6; padding:56px 0 0;}
.footer-grid{display:grid; grid-template-columns: 1.3fr 0.8fr 0.8fr 1.1fr; gap:32px; padding-bottom:40px; border-bottom:1px solid #223257;}
.footer-brand p{font-size:12px; line-height:1.9; margin:14px 0 18px; color:#93a0bd;}
.social-row{display:flex; gap:10px;}
.social-row a{
  width:34px; height:34px; border-radius:50%; border:1px solid #34456c;
  display:flex; align-items:center; justify-content:center; color:#cfd7e6; font-size:13px;
}
.footer-col h4{font-size:13px; color:#fff; margin:0 0 16px;}
.footer-col li{margin-bottom:10px; font-size:13px;}
.footer-col a{color:#a9b3c9;}
.footer-col a:hover{color:#fff;}
.newsletter h4{color: var(--gold-light); font-size:14px; margin:0 0 10px;}
.newsletter p{font-size:12px; color:#93a0bd; margin:0 0 14px; line-height:1.7;}
.newsletter-form{display:flex; gap:8px;}
.newsletter-form input{
  flex:1; padding:11px 14px; border-radius:6px; border:1px solid #34456c; background:#16274a; color:#fff; font-size:13px;
}
.newsletter-form input::placeholder{color:#7f8cab;}
.footer-bottom{padding:20px 0; text-align:center; font-size:12px; color:#7f8cab;}

@media (max-width: 1100px){
  .hero-grid{grid-template-columns:1fr; }
  .race-row{grid-template-columns:repeat(3,1fr);}
  .reason-row{grid-template-columns:repeat(2,1fr); row-gap:32px;}
  .reason-item{border-left:none; border-top:1px solid #223257; padding-top:28px;}
  .results-row{grid-template-columns:repeat(2,1fr);}
  .result-stat:nth-child(odd){border-left:none;}
  .articles-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width: 720px){
  .primary-nav{display:none;}
  .race-row{grid-template-columns:repeat(2,1fr);}
  .hero-title{font-size:30px;}
}