/* ===== 冠レース応援特設ページ =====
   差し替えるのは index.html の中身だけでよい。
   色を変えたいときは下の :root の値だけ触れば全体に反映される。 */

:root{
  --ink:#2B3138;        /* 本文の色 */
  --sub:#626C77;        /* 補足の色 */
  --line:#E2E6EA;       /* 罫線 */
  --gray:#F4F6F8;       /* 面（薄いグレー） */
  --blue:#E8F0FA;       /* 面（薄いブルー） */
  --accent:#4A7FB5;     /* アクセント */
  --cta:#B45309;        /* Amazonボタン */
  --cta-dark:#8F420A;   /* Amazonボタン（押したとき） */
  --max:680px;          /* 本文の最大幅 */
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:#fff; color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP","Yu Gothic",sans-serif;
  font-size:16px; line-height:1.85; letter-spacing:.01em;
}
img{max-width:100%; height:auto; display:block;}

.wrap{max-width:var(--max); margin:0 auto; padding:0 20px;}
section{padding:38px 0;}
section + section{border-top:1px solid var(--line);}

/* ---- ヒーロー ---- */
.hero{padding:44px 0 34px; text-align:center;}
.eyebrow{
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:.08em;
  color:var(--accent); background:var(--blue);
  padding:6px 14px; border-radius:99px; margin-bottom:20px;
}
.racename{
  font-size:clamp(21px,5.6vw,28px); font-weight:800; line-height:1.5;
  margin:0 0 8px;
}
.racemeta{font-size:13px; color:var(--sub); margin:0 0 26px;}
.booktitle{
  font-size:clamp(19px,4.8vw,25px); font-weight:800; line-height:1.55;
  margin:0 0 6px;
}
.booksub{font-size:15px; color:var(--sub); margin:0 0 4px;}
.byline{font-size:14px; color:var(--sub); margin:0 0 26px;}

/* ---- 書影 ---- */
.cover{
  width:186px; margin:0 auto 24px; border-radius:3px;
  box-shadow:0 6px 22px rgba(0,0,0,.16);
}
.cover-ph{
  width:186px; aspect-ratio:1/1.42; margin:0 auto 24px;
  background:var(--gray); border:1px solid var(--line); border-radius:3px;
  display:flex; align-items:center; justify-content:center;
  color:var(--sub); font-size:12px; text-align:center; padding:16px; line-height:1.7;
}

/* ---- CTA ---- */
.cta{
  display:flex; align-items:center; justify-content:center;
  min-height:56px; padding:15px 30px; margin:0 auto;
  max-width:400px; border-radius:8px;
  background:var(--cta); color:#fff; text-decoration:none;
  font-size:17px; font-weight:700; letter-spacing:.02em;
  box-shadow:0 3px 10px rgba(180,83,9,.24);
}
.cta:active{background:var(--cta-dark);}
.cta-note{font-size:12px; color:var(--sub); text-align:center; margin:11px 0 0;}

/* ---- 見出し ---- */
h2{
  font-size:18px; font-weight:800; margin:0 0 16px;
  padding-left:12px; border-left:4px solid var(--accent); line-height:1.5;
}
h3{font-size:15px; font-weight:700; margin:24px 0 8px;}
p{margin:0 0 15px;}
p:last-child{margin-bottom:0;}

/* ---- 情報カード ---- */
.card{
  background:var(--gray); border:1px solid var(--line);
  border-radius:8px; padding:18px 20px; margin:0 0 18px;
}
.card.blue{background:var(--blue);}
dl.info{margin:0; font-size:15px;}
dl.info div{display:flex; gap:14px; padding:7px 0; border-bottom:1px solid var(--line);}
dl.info div:last-child{border-bottom:0;}
dl.info dt{flex:0 0 84px; color:var(--sub); font-size:13px; padding-top:2px;}
dl.info dd{margin:0; font-weight:700;}

/* ---- 箇条書き ---- */
ul.points{margin:0; padding:0; list-style:none;}
ul.points li{
  position:relative; padding:0 0 0 24px; margin:0 0 11px; line-height:1.8;
}
ul.points li:last-child{margin-bottom:0;}
ul.points li::before{
  content:""; position:absolute; left:6px; top:.72em;
  width:7px; height:7px; border-radius:50%; background:var(--accent);
}

/* ---- フッター ---- */
footer{
  background:var(--gray); border-top:1px solid var(--line);
  padding:26px 0 34px; font-size:12.5px; color:var(--sub); line-height:1.9;
}
footer p{margin:0 0 9px;}
footer a{color:var(--sub);}

/* ---- 中継ページ ---- */
.relay{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:32px;
}
.relay h1{font-size:19px; font-weight:800; margin:0 0 10px; line-height:1.6;}
.relay p{font-size:14px; color:var(--sub); margin:0;}
.relay .now{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; margin-top:22px; padding:13px 30px; border-radius:99px;
  background:var(--ink); color:#fff; text-decoration:none; font-weight:700; font-size:15px;
}
.spinner{
  width:26px; height:26px; margin:0 auto 22px;
  border:3px solid var(--line); border-top-color:var(--accent);
  border-radius:50%; animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){ .spinner{animation:none;} }

/* ===== 診断フローで追加した分 ===== */

/* トップ（診断の入口） */
.top{padding:44px 0 40px; text-align:center;}
.tophead{
  font-size:clamp(21px,5.4vw,27px); font-weight:800; line-height:1.55;
  margin:26px 0 12px;
}
.toplede{font-size:15px; color:var(--sub); margin:0 0 28px; line-height:1.85;}
.skip{margin:22px 0 0; font-size:13.5px;}
.skip a{color:var(--sub);}
.thin{padding:24px 0 30px;}
.fine{font-size:12.5px; color:var(--sub); line-height:1.8;}

/* 診断画面 */
.quizwrap{padding:38px 0 60px;}
.qhead{font-size:clamp(18px,4.6vw,22px); font-weight:800; line-height:1.6; margin:0 0 22px;}
.prog{display:flex; align-items:center; gap:12px; margin:0 0 26px; font-size:12.5px; color:var(--sub);}
.prog .bar{flex:1; height:4px; border-radius:2px; background:var(--line); overflow:hidden;}
.prog .bar i{display:block; height:100%; background:var(--accent); transition:width .25s ease;}
.opts{display:flex; flex-direction:column; gap:11px;}
.opt{
  display:block; width:100%; text-align:left; cursor:pointer;
  min-height:60px; padding:15px 18px; border-radius:9px;
  background:#fff; border:1.5px solid var(--line); color:var(--ink);
  font-family:inherit; font-size:15.5px; line-height:1.6;
}
.opt:hover,.opt:focus-visible{border-color:var(--accent); background:var(--blue); outline:none;}
.back{
  margin-top:26px; padding:8px 0; background:none; border:0; cursor:pointer;
  color:var(--sub); font-family:inherit; font-size:13.5px;
}

/* 結果 */
.result{padding:36px 0 20px;}
.rname{font-size:clamp(24px,6vw,32px); font-weight:800; margin:6px 0 8px; line-height:1.4;}
.rno{color:var(--accent); margin-right:10px;}
.rlead{font-size:15.5px; color:var(--sub); margin:0 0 4px;}
.result h2{margin-top:34px;}
.need{
  background:var(--blue); border-radius:12px; padding:24px 22px;
  margin:26px 0 18px; text-align:center;
}
.needlabel{
  font-size:12px; font-weight:700; letter-spacing:.1em; color:var(--accent);
  margin:0 0 8px;
}
.needname{font-size:clamp(28px,7.4vw,38px); font-weight:800; margin:0 0 6px; line-height:1.3;}
.needsub{font-size:14px; color:var(--sub); margin:0;}
.bridge{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:24px 0; margin:32px 0 30px;
}
.bridgetext{font-size:15px; color:var(--sub); margin:0 0 14px;}
.bridgecta{font-size:17px; font-weight:800; margin:0; line-height:1.6;}
.bsub{font-size:14px; color:var(--sub); text-align:center; margin:0 0 20px;}
.ctabox{margin-top:30px;}
.cta-v{background:#1F7A6C; box-shadow:0 3px 10px rgba(31,122,108,.24);}
.cta-v:active{background:#175A50;}
.alt{text-align:center; font-size:13.5px; margin:16px 0 0;}
.alt a{color:var(--sub);}
.again{
  margin-top:34px; padding-top:22px; border-top:1px solid var(--line);
  text-align:center; font-size:13.5px; color:var(--sub);
}
.again a{color:var(--sub);}
.spinner.sp-v{border-top-color:#1F7A6C;}
.needname.sm{font-size:clamp(20px,5.2vw,26px); line-height:1.5;}

/* 伏せ字の答え合わせ（レース名 → 書名へのつなぎ） */
.reveal{
  text-align:center; margin:34px 0 26px;
  padding:20px 18px; border:1px dashed var(--line); border-radius:12px;
  background:var(--gray);
}
.rq{font-size:13.5px; color:var(--sub); margin:0 0 6px; letter-spacing:.02em;}
.ra{
  font-size:clamp(26px,7vw,34px); font-weight:800; margin:0;
  line-height:1.3; color:var(--ink);
}
.teaser{
  font-size:13.5px; color:var(--accent); font-weight:700;
  text-align:center; margin:16px 0 0; letter-spacing:.02em;
}