@charset "utf-8";
/* トップページ専用。応援・レポートページの共通スタイルには影響しない。 */
:root {
  --ink:#ffffff; --ink-2:#f3f6fa; --ink-3:#e9eef5; --ink-4:#dde5ee;
  --text:#17263e; --text-2:#4b5c72; --text-3:#5c6b7d;
  --line:#d6dfe9; --line-soft:#e2e8ef; --line-hard:#b2bfce;
  --h1:#ad7827; --h1-lt:#e4bd70; --h2:#e4bd70; --h2-lt:#86601f;
  --btn-fg:#172238; --container:1200px; --gutter:28px;
  --header-h:72px; --sec-pad:clamp(64px,8vw,104px);
}
.lp-page { overflow-wrap:break-word; letter-spacing:.025em; }
.lp-page .reveal { opacity:1; transform:none; transition:none; }
.lp-page .container--narrow { max-width:960px; }
.lp-page .sec-label { font-size:.875rem; color:#806022; letter-spacing:.15em; margin-bottom:14px; }
.lp-page .sec-label::before { width:26px; background:#b88937; }
.lp-page .sec-title { font-size:clamp(1.7rem,3.5vw,2.6rem); line-height:1.5; letter-spacing:.035em; }
.lp-page .sec-lead { font-size:1rem; line-height:1.95; max-width:48em; }
.lp-page .btn { min-height:60px; border-radius:8px; padding:16px 26px; font-size:1rem; letter-spacing:.025em; gap:20px; }
.lp-page .btn--primary { background:#e4bd70; color:#172238; box-shadow:0 8px 22px #00000018; }
.lp-page .btn--primary:hover { background:#f2d496; transform:translateY(-2px); box-shadow:0 10px 24px #00000028; }
.lp-page .btn--primary span[aria-hidden] { font-size:1.35rem; line-height:1; }
.lp-page .btn--ghost { color:#17263e; background:#fff; border-color:#b2bfce; }
.lp-page .btn--ghost:hover { background:#f3f6fa; border-color:#17263e; }
.lp-page a:focus-visible, .lp-page button:focus-visible { outline:3px solid #987024; outline-offset:5px; }
.lp-page .site-header { background:#101c35; border-bottom:1px solid #ffffff26; }
.lp-page .site-header.is-stuck { background:#101c35f5; border-color:#ffffff26; }
.lp-page .site-logo-img { width:132px; }
.lp-page .header-nav { font-family:var(--f-jp); font-size:.875rem; letter-spacing:.025em; color:#e2e7ef; gap:14px; }
.lp-page .header-nav a { padding:8px 12px; border-radius:5px; }
.lp-page .header-nav a:hover { color:#fff; background:#ffffff14; }
.lp-page .header-nav .header-nav__entry { border:1px solid #d9b56f; color:#f3d392; padding-inline:20px; }

/* メインビジュアル。本文の背後は紺を保ち、明るい絵柄と文字を分離する。 */
.lp-hero { position:relative; isolation:isolate; color:#fff; background:#101c35; padding-top:var(--header-h); }
.lp-hero__bg { position:absolute; inset:var(--header-h) 0 58px; z-index:-1; background:radial-gradient(ellipse at 85% 40%,#2d4165 0%,transparent 54%),linear-gradient(120deg,#101c35,#16243d); }
.lp-hero__inner { display:grid; grid-template-columns:minmax(0,1.18fr) minmax(0,1fr); align-items:center; gap:38px; padding-top:54px; padding-bottom:54px; }
.lp-hero__copy { min-width:0; }
.lp-hero__kicker { color:#f2d496; font-size:.875rem; font-weight:700; letter-spacing:.1em; }
.lp-hero__title { margin-top:24px; font-family:var(--f-disp); font-weight:800; font-size:clamp(2.3rem,4.25vw,3.8rem); line-height:1.45; letter-spacing:.02em; }
.lp-hero__title .accent { color:#f2d496; }
.lp-hero__intro { margin-top:22px; font-size:1.25rem; font-weight:700; line-height:1.7; }
.lp-hero__lead { margin-top:12px; max-width:34em; font-size:1rem; line-height:1.95; color:#e2e8f1; }
.lp-hero__cta { display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; margin-top:26px; }
.hero-view-link { display:inline-flex; align-items:center; justify-content:center; gap:14px; min-height:46px; font-size:.875rem; font-weight:700; text-underline-offset:6px; }
.hero-view-link:hover { text-decoration:underline; }
.hero-view-link span { color:#f2d496; }
.lp-hero__note { margin-top:12px; font-size:.875rem; line-height:1.6; color:#d4dfed; }
.hero-closed { font-size:1rem; color:#e2e8f1; margin-top:18px; }
.lp-hero .btn--report { border-color:#e4bd70; color:#fff; background:#ffffff0d; font-size:1rem; margin-top:20px; max-width:490px; }
.lp-hero .btn--report:hover { background:#ffffff1a; }
.hero-race { background:#101c35; border-top:1px solid #ffffff2b; }
.hero-race__inner { display:flex; align-items:center; flex-wrap:wrap; gap:8px 26px; min-height:58px; padding-block:14px; font-size:.875rem; color:#d4dfed; }
.hero-race__inner > span:first-child { font-weight:700; color:#f2d496; }
.hero-race small { font-size:.875rem; margin-left:8px; }
.hero-race b { font-family:var(--f-en); font-size:1.35rem; font-weight:600; letter-spacing:.04em; color:#fff; margin-right:5px; }

/* 応援の流れ */
.journey-sec { background:#fff; }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; }
.section-heading .sec-lead { max-width:31em; margin:0; }
.journey { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; margin-top:38px; }
.journey__step { position:relative; padding:28px; background:#f3f6fa; border-top:3px solid #d5ad61; border-radius:0 0 8px 8px; }
.journey__n { display:block; font-family:var(--f-en); font-size:.875rem; letter-spacing:.1em; color:#86601f; font-weight:700; }
.journey__n b { font-size:2.5rem; line-height:1; margin-left:7px; letter-spacing:0; }
.journey__t { font-family:var(--f-jp); font-size:1.25rem; font-weight:700; line-height:1.6; margin-top:18px; }
.journey__d { font-size:1rem; color:var(--text-2); line-height:1.95; margin-top:12px; }
.journey__d b { color:var(--text); }
.journey__art { display:none; }
.journey__step:not(:last-child)::after { content:"→"; position:absolute; top:43%; right:-26px; color:#9b792f; font-size:1.25rem; }
.journey__loop { margin-top:24px; padding:18px 24px; border:1px solid #dfe5ed; border-radius:6px; font-size:1rem; color:var(--text-2); line-height:1.9; }
.journey__loop b { color:var(--text); }
.journey__loop svg { width:20px; height:20px; margin-right:8px; }

/* 馬ごとの勝負服とテーマ色を継承。 */
.horse-sec { background:#f3f6fa; border-top:1px solid var(--line-soft); }
.horse-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:36px; }
.horse-card { position:relative; display:block; background:#fff; padding:32px; border:1px solid #d6dfe9; border-top:4px solid var(--c2); border-radius:10px; transition:transform .2s,box-shadow .2s,border-color .2s; }
.horse-card:hover { transform:translateY(-4px); border-color:var(--c1); box-shadow:0 12px 30px #17263e12; }
.horse-card[data-horse="meisho-tabaru"] { --c1:#194dc9; --c2:#eab2e3; }
.horse-card[data-horse="admire-terra"] { --c1:#0c5a91; --c2:#75cdec; }
.horse-card__in { display:flex; gap:22px; align-items:center; }
.horse-card__silks { width:86px; flex:none; filter:drop-shadow(0 5px 5px #17263e14); }
.horse-card__in > span { min-width:0; }
.horse-card__k { display:block; color:var(--text-3); font-size:.875rem; line-height:1.5; }
.horse-card__t { display:block; margin-top:5px; font-family:var(--f-disp); font-weight:800; font-size:clamp(1.3rem,2.15vw,1.9rem); line-height:1.6; letter-spacing:.015em; }
.horse-card__go { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:24px; padding-top:18px; border-top:1px solid var(--line-soft); color:var(--c1); font-size:1rem; font-weight:700; }
.horse-card__go svg { flex:none; }
.horse-note { margin-top:18px; font-size:.875rem; color:var(--text-2); }

/* キーホルダーは既存の図版を利用。 */
.kr-sec { background:#fff; }
.kr-grid { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
.kr-grid > div:first-child { background:#f0f3f8; border-radius:10px; padding:32px 24px; }
.kr-pair { display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:410px; margin-inline:auto; }
.kr-pair figcaption { margin-top:14px; text-align:center; color:var(--text-2); font-size:.875rem; line-height:1.7; }
.lp-page .kr__caption { color:var(--text-3); font-size:.75rem; margin-top:20px; }
.keyring-note { border-left:3px solid #d5ad61; padding-left:16px; font-size:.875rem; color:var(--text-2); margin-top:24px; line-height:1.9; }

/* 応募条件と投稿への導線 */
.rule-sec { background:#101c35; color:#fff; }
.rule-sec .sec-label { color:#f2d496; }
.rule-sec .sec-lead { color:#d4dfed; }
.rules { display:grid; grid-template-columns:1fr 1fr; gap:0 36px; margin-top:32px; }
.rule-item { display:flex; flex-direction:column; gap:10px; padding:24px 0; border-bottom:1px solid #ffffff30; }
.rule-item__k { font-size:.875rem; font-weight:700; color:#e4bd70; }
.rule-item__v { font-size:1rem; line-height:1.8; }
.rule-item__v b { font-family:var(--f-en); font-size:2.15rem; line-height:1; color:#f2d496; margin-right:5px; }
.final-cta { margin-top:40px; text-align:center; }
.final-cta__title { font-family:var(--f-disp); font-size:clamp(1.35rem,2.8vw,1.85rem); line-height:1.6; margin-bottom:22px; }
.final-cta .btn { width:min(100%,460px); }
.lp-page .btn__note { font-size:.875rem; color:#d4dfed; line-height:1.8; margin-top:14px; letter-spacing:.02em; }
.notes-sec { background:#f3f6fa; }
.notes-sec .sec-title { font-family:var(--f-jp); font-size:1.4rem; }
.notes { display:grid; gap:14px; margin-top:24px; font-size:.875rem; line-height:1.95; color:var(--text-2); }
.notes li { position:relative; padding-left:1.35em; }
.notes li::before { content:"※"; position:absolute; left:0; }
.lp-page .site-footer { background:#101c35; border-color:#ffffff26; }
.lp-page .footer-links { color:#d4dfed; font-size:.875rem; }
.lp-page .footer-links a:hover { color:#f2d496; }
.lp-page .footer-copy { color:#b7c5d8; font-size:.75rem; }
.lp-page .footer-logo-img { width:130px; opacity:1; }

/* 同じ受付状態スイッチを、JavaScriptが無効な場合にも反映する。 */
.lp-page[data-entry="closed"] .js-when-open { display:none !important; }
.lp-page[data-entry="closed"] .js-when-closed[hidden] { display:block !important; }
.lp-page[data-entry="closed"] .btn.js-when-closed[hidden] { display:inline-flex !important; }

@media (max-width:1050px) {
  .lp-hero__inner { gap:26px; }
  .section-heading { display:block; }
  .section-heading .sec-lead { max-width:48em; margin-top:16px; }
  .journey { gap:24px; }
  .journey__step { padding:24px 20px; }
  .journey__step:not(:last-child)::after { right:-21px; }
  .horse-card { padding:26px 22px; }
  .horse-card__in { gap:16px; }
  .horse-card__silks { width:66px; }
  .kr-grid { gap:40px; }
}
@media (max-width:760px) {
  :root { --gutter:22px; --header-h:64px; }
  .lp-page .site-logo-img { width:110px; }
  .lp-page .header-nav { gap:2px; font-size:.875rem; }
  .lp-page .header-nav a { padding:8px; }
  .lp-page .header-nav .header-nav__entry { display:none; }
  .lp-hero__inner { grid-template-columns:1fr; gap:0; padding-top:28px; padding-bottom:32px; }
  .lp-hero__copy { display:contents; }
  .lp-hero__kicker { font-size:.75rem; letter-spacing:.065em; }
  .lp-hero__title { grid-row:2; margin-top:20px; font-size:clamp(2rem,7.5vw,3.5rem); text-shadow:0 2px 22px #101c35; }
  .lp-hero__intro { grid-row:3; margin-top:16px; font-size:1.15rem; }
  .lp-hero__lead { grid-row:5; max-width:35em; margin-top:22px; }
  .lp-hero__cta { grid-row:6; margin-top:22px; gap:8px; }
  .lp-hero__cta .btn { width:100%; }
  .hero-view-link { width:100%; }
  .lp-hero__note { grid-row:7; font-size:.875rem; }
  .hero-race__inner { gap:4px 18px; }
  .hero-race__inner > span:last-child { width:100%; }
  .journey { grid-template-columns:1fr; gap:22px; margin-top:28px; }
  .journey__step { padding:24px; }
  .journey__n { float:left; margin-right:20px; line-height:2.5rem; }
  .journey__n b { font-size:2rem; }
  .journey__t { margin-top:0; min-height:2.5rem; display:flex; align-items:center; }
  .journey__d { clear:both; padding-top:10px; margin-top:0; }
  .journey__step:not(:last-child)::after { content:"↓"; left:50%; right:auto; top:auto; bottom:-24px; line-height:24px; transform:translateX(-50%); }
  .journey__loop { padding:18px 20px; }
  .horse-grid { grid-template-columns:1fr; gap:18px; margin-top:28px; }
  .horse-card { padding:26px 24px; }
  .horse-card__silks { width:75px; }
  .horse-card__t { font-size:clamp(1.2rem,4.5vw,1.75rem); }
  .kr-grid { grid-template-columns:1fr; gap:30px; }
  .kr-grid > div:first-child { order:2; }
  .kr-pair { max-width:370px; gap:20px; }
  .rules { grid-template-columns:1fr; margin-top:20px; }
  .rule-item { gap:6px; padding:20px 0; }
  .final-cta { margin-top:32px; }
  .lp-page .footer-links { flex-direction:column; gap:12px; }
}
@media (max-width:370px) {
  :root { --gutter:18px; }
  .lp-page .header-inner { gap:8px; }
  .lp-page .site-logo-img { width:94px; }
  .lp-page .header-nav a { padding-inline:6px; }
  .horse-card__silks { width:58px; }
  .horse-card { padding:24px 18px; }
  .journey__n { float:none; margin-bottom:12px; }
  .journey__t { min-height:0; }
}
@media (prefers-reduced-motion:reduce) {
  .lp-page *, .lp-page *::before, .lp-page *::after { animation:none !important; transition:none !important; }
  .lp-page .btn:hover, .lp-page .horse-card:hover { transform:none; }
}

/* 指定のキーホルダーデザインをヒーローの主役として配置。 */
.lp-hero__art { min-width:0; padding:10px 12px 0; }
.hero-keyrings { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; align-items:start; }
.hero-keyring { min-width:0; text-align:center; }
.hero-keyring img { display:block; width:100%; height:auto; filter:drop-shadow(0 18px 18px #00000038); transform:rotate(-6deg); }
.hero-keyring:nth-child(2) { padding-top:30px; }
.hero-keyring:nth-child(2) img { transform:rotate(6deg); }
.hero-keyring span { display:block; color:#e2e8f1; font-size:.875rem; font-weight:700; line-height:1.7; margin-top:20px; }
.lp-hero__art > figcaption { text-align:center; font-size:1rem; color:#f2d496; line-height:1.8; margin-top:28px; }
.lp-hero__art small { display:block; color:#c5d0df; font-size:.75rem; margin-top:6px; }
@media (max-width:1050px) and (min-width:761px) {
  .hero-keyrings { gap:20px; }
  .lp-hero__art { padding-inline:0; }
  .lp-hero__art > figcaption { font-size:.875rem; }
}
@media (max-width:760px) {
  .lp-hero__kicker { grid-row:1; }
  .lp-hero__art { grid-row:4; width:min(100%,310px); margin:28px auto 0; padding:0 8px; }
  .hero-keyrings { gap:28px; }
  .hero-keyring:nth-child(2) { padding-top:18px; }
  .hero-keyring span { font-size:.75rem; margin-top:12px; }
  .lp-hero__art > figcaption { font-size:.875rem; margin-top:18px; }
  .hero-closed { grid-row:8; }
  .lp-hero .btn--report { grid-row:9; }
}