@charset "utf-8";
/* ============================================================================
   JRA-VAN ／ 凱旋門賞2026 ファン参加企画
   common.css ─ 全ページ共通（トークン・リセット・ヘッダー・フッター・ボタン）
   ----------------------------------------------------------------------------
   目次
     01. デザイントークン
     02. リセット / ベース
     03. レイアウトユーティリティ
     04. 見出し（共通）
     05. ボタン / CTA
     06. ヘッダー
     07. フッター
     08. 絵馬キーホルダーのイメージ図
     09. 現地レポートの導線 / next リンク
     10. モーション設定
   ========================================================================== */


/* ============================================================
   01. デザイントークン
   ============================================================ */
:root{
  /* ---- 地の色（夜のロンシャン。JRA-VAN LP と同系の深いインク） ---- */
  --ink:        #06080F;
  --ink-2:      #0A0E1A;
  --ink-3:      #101625;
  --ink-4:      #18202F;

  /* ---- 罫 ---- */
  --line:       rgba(255,255,255,.13);
  --line-soft:  rgba(255,255,255,.07);
  --line-hard:  rgba(255,255,255,.26);

  /* ---- 文字 ---- */
  --text:       #F4F6FA;
  --text-2:     #AEB6C6;
  --text-3:     #7F8899;

  /* ---- 絵馬（木・墨）。キーホルダー実物と揃える ---- */
  --wood:       #D8BC8E;
  --wood-lt:    #E9D6B2;
  --wood-dk:    #B7965F;
  --sumi:       #2B2318;
  --sumi-2:     #5C4B33;

  /* ---- JRA-VAN コーポレートグリーン（ロゴ以外には使わない） ---- */
  --green:      #008539;

  /* ---- 馬ごとのテーマ色（各ページで上書き）。既定は企画全体の色 ---- */
  --h1:         #1E52EC;   /* 主色 */
  --h1-lt:      #6D94FF;
  --h2:         #FA7BE8;   /* 差し色 */
  --h2-lt:      #FFAFF1;
  --btn-fg:     #FFFFFF;   /* 主ボタンの文字色。明るい地色のページでは濃色に上書きする */

  /* ---- 書体 ---- */
  --f-jp:   "Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic Medium","Yu Gothic",Meiryo,sans-serif;
  --f-disp: "Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho",serif;
  --f-hand: "Klee One","Hiragino Mincho ProN","Yu Mincho",serif;
  --f-en:   "Barlow Condensed","Arial Narrow",Arial,sans-serif;

  /* ---- レイアウト ---- */
  --container:  1120px;
  --gutter:     18px;
  --sec-pad:    clamp(64px, 10vw, 128px);
  --header-h:   54px;

  /* ---- イージング ---- */
  --ease:       cubic-bezier(.22,.61,.36,1);
}


/* ============================================================
   02. リセット / ベース
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 12px);
}

body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--f-jp);
  font-size:16px;
  line-height:1.9;
  letter-spacing:.03em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

h1,h2,h3,h4,p,figure,dl,dd,ol,ul{ margin:0; }
/* display を持つ要素にも hidden 属性を効かせる（JSの出し分けで使う） */
[hidden]{ display:none !important; }
ul,ol{ padding:0; list-style:none; }
img,svg{ max-width:100%; border:0; vertical-align:middle; }
b,strong{ font-weight:700; }

a{ color:inherit; text-decoration:none; }
button{ margin:0; padding:0; font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

a:focus-visible,
button:focus-visible{
  outline:2px solid var(--h2-lt);
  outline-offset:3px;
  border-radius:3px;
}

/* スキップリンク（WCAG 2.4.1） */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  padding:10px 18px; background:var(--h1); color:#fff; font-size:13px;
}
.skip-link:focus{ left:12px; top:12px; }


/* ============================================================
   03. レイアウトユーティリティ
   ============================================================ */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.container--narrow{ max-width:760px; }

.section{ padding-block:var(--sec-pad); position:relative; }
.section--tight{ padding-block:clamp(48px,7vw,80px); }

.sp-only{ display:inline; }
.pc-only{ display:none; }
@media (min-width:768px){
  .sp-only{ display:none; }
  .pc-only{ display:inline; }
}

/* 画面には出さないが読み上げには渡す */
.vh{
  position:absolute; width:1px; height:1px; margin:-1px;
  padding:0; border:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}


/* ============================================================
   04. 見出し（共通）
   ============================================================ */
.sec-label{
  display:flex; align-items:center; gap:10px;
  font-family:var(--f-en);
  font-size:13px; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--h2-lt);
  margin-bottom:14px;
}
.sec-label::before{
  content:""; width:22px; height:2px; background:var(--h2); flex:none;
}

.sec-title{
  font-family:var(--f-disp);
  font-weight:800;
  font-size:clamp(25px,6vw,42px);
  line-height:1.45;
  letter-spacing:.04em;
}
.sec-lead{
  margin-top:16px;
  color:var(--text-2);
  font-size:15px;
  line-height:2.05;
}

.rule{
  height:1px; border:0; margin:0;
  background:linear-gradient(90deg,var(--line-hard),transparent);
}


/* ============================================================
   05. ボタン / CTA
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:54px; padding:12px 28px;
  border-radius:999px;
  font-weight:700; font-size:16px; letter-spacing:.06em;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), opacity .18s;
  text-align:center;
}
.btn:active{ transform:translateY(1px); }

.btn--primary{
  color:var(--btn-fg);
  background:linear-gradient(100deg,var(--h1) 0%,var(--h2) 100%);
  box-shadow:0 10px 30px -12px rgba(0,0,0,.6);
}

.btn--ghost{
  color:var(--text);
  border:1px solid var(--line-hard);
  background:rgba(255,255,255,.04);
}
.btn--ghost:hover{ border-color:var(--h2); background:rgba(255,255,255,.08); }

.btn--block{ display:flex; width:100%; }

.btn__note{
  display:block; margin-top:12px;
  font-size:12px; color:var(--text-3); letter-spacing:.04em; text-align:center;
}


/* ============================================================
   06. ヘッダー
   ============================================================ */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--header-h);
  display:flex; align-items:center;
  transition:background .3s var(--ease), border-color .3s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.is-stuck{
  background:rgba(6,8,15,.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line-soft);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.site-logo-img{ width:104px; height:auto; display:block; }

.header-nav{
  display:flex; align-items:center; gap:4px;
  font-family:var(--f-en); font-size:13px; font-weight:600; letter-spacing:.12em;
  color:var(--text-2);
}
.header-nav a{
  padding:6px 10px; border-radius:999px; white-space:nowrap;
  transition:color .2s, background .2s;
}
.header-nav a:hover{ color:var(--text); background:rgba(255,255,255,.07); }
.header-nav a[aria-current="page"]{ color:var(--h2-lt); }

/* 小さい画面ではロゴとナビを詰めて、1行に収める */
@media (max-width:430px){
  .site-logo-img{ width:88px; }
  .header-nav{ font-size:12px; }
  .header-nav a{ padding:6px 6px; }
}


/* ============================================================
   07. フッター
   ============================================================ */
.site-footer{
  border-top:1px solid var(--line-soft);
  background:var(--ink-2);
  padding-block:40px calc(40px + env(safe-area-inset-bottom));
}
.footer-inner{
  display:flex; flex-direction:column; align-items:center; gap:20px; text-align:center;
}
.footer-logo-img{ width:118px; height:auto; opacity:.9; }
.footer-links{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px;
  font-size:13px; color:var(--text-2);
}
.footer-links a{ transition:color .2s; }
.footer-links a:hover{ color:var(--h2-lt); }
.footer-copy{
  font-family:var(--f-en); font-size:12px; letter-spacing:.14em; color:var(--text-3);
}


/* ============================================================
   08. 絵馬キーホルダーのイメージ図（全ページ共通）
   ------------------------------------------------------------
   実物写真ではなく CSS で組んだイメージ。
   写真が用意でき次第、この .kr ブロックごと <img> に差し替えられる。
   ============================================================ */
.kr{
  /* --kr-w / --kr-ring / --kr-sumi / --kr-side を外から渡すと縮尺が変わる */
  position:relative;
  width:var(--kr-w, min(224px,60vw));
  margin-inline:auto;
  padding-top:calc(var(--kr-ring,26px) * 1.7);   /* 金具ぶん */
}
.kr__ring{
  position:absolute; left:50%; top:0;
  width:var(--kr-ring,26px);
  height:calc(var(--kr-ring,26px) * 1.54);
  margin-left:calc(var(--kr-ring,26px) / -2);
  border:3px solid #9AA3B2;
  border-radius:calc(var(--kr-ring,26px) / 2);
  background:linear-gradient(120deg,#D8DEE7,#8C95A5);
}
.kr__ring::after{
  content:""; position:absolute; left:50%; bottom:-9px;
  width:2px; height:12px; margin-left:-1px; background:#9AA3B2;
}

.kr__plate{
  position:relative;
  aspect-ratio:10 / 9;
  padding:15% 12% 9%;
  display:flex; align-items:center; justify-content:center;
  clip-path:polygon(50% 0%, 100% 22%, 100% 100%, 0% 100%, 0% 22%);
  background:
    repeating-linear-gradient(93deg, rgba(120,84,36,.10) 0 1px, transparent 1px 7px),
    linear-gradient(158deg, var(--wood-lt) 0%, var(--wood) 52%, var(--wood-dk) 100%);
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.55));
}
.kr__hole{
  position:absolute; left:50%; top:13%;
  width:11px; height:11px; margin-left:-5.5px;
  border-radius:50%; background:#241C12;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.85), 0 1px 0 rgba(255,255,255,.3);
}
.kr__disc{
  position:absolute; left:50%; top:53%;
  width:62%; aspect-ratio:1; margin-left:-31%; transform:translateY(-50%);
  border-radius:50%;
  background:linear-gradient(135deg,var(--h1) 0%,var(--h1) 46%,var(--h2) 46%,var(--h2) 100%);
  /* 木地を透かして淡くする。実物と同じく墨文字が読めるようにするため */
  opacity:.5;
}
.kr__sumi{
  position:relative; z-index:2;
  writing-mode:vertical-rl;
  height:2.1em;
  font-family:var(--f-disp); font-weight:800;
  font-size:var(--kr-sumi, clamp(30px,9vw,40px)); line-height:1.02; letter-spacing:.02em;
  color:#140F08;
  text-shadow:0 1px 0 rgba(255,255,255,.3);
}
.kr__side{
  position:absolute; z-index:2; top:32%;
  writing-mode:vertical-rl;
  font-family:var(--f-disp); font-weight:700;
  font-size:var(--kr-side,11px); letter-spacing:.1em; color:#2E2418;
}
.kr__side--l{ left:8%; }
.kr__side--r{ right:8%; }

.kr__caption{
  margin-top:16px; text-align:center;
  font-size:11px; letter-spacing:.06em; color:var(--text-3);
}


/* ============================================================
   09-a. 現地レポートへの導線
   ------------------------------------------------------------
   ★ 出し方：各HTMLの <body> に data-report="ready" を足すだけ。
        （例） <body data-entry="open" data-report="ready">
      足すまでは非表示なので、公開前からHTMLに置いておける。
      JavaScriptは使っていないので、JSが止まっていても切り替わる。
   ============================================================ */
body:not([data-report="ready"]) .js-report-ready{ display:none !important; }

.btn--report{
  display:flex; width:100%;
  margin-top:26px;
  justify-content:flex-start; gap:12px;
  padding:14px 20px;
  text-align:left;
  border:1px solid var(--h2);
  /* 地は白の薄がけ。差し色は枠と点だけなので、どのページの配色にも乗る */
  background:rgba(255,255,255,.06);
  color:var(--text);
}
.btn--report:hover{ background:rgba(255,255,255,.1); }

.btn--report__dot{
  position:relative; flex:none;
  width:9px; height:9px; border-radius:50%; background:var(--h2);
}
.btn--report__dot::after{
  content:""; position:absolute; inset:-5px;
  border:1px solid var(--h2); border-radius:50%;
  animation:report-pulse 2.2s ease-out infinite;
}
@keyframes report-pulse{
  0%   { transform:scale(.55); opacity:.8; }
  100% { transform:scale(1.5);  opacity:0;  }
}
.btn--report__text{ flex:1; min-width:0; font-size:15px; font-weight:700; letter-spacing:.04em; }
.btn--report__arrow{ flex:none; color:var(--h2); }

/* 応援ページの関連リンクに置くとき用 */
.next-card--report{
  border-color:var(--h2);
  background:rgba(255,255,255,.07);
}
.next-card--report .next-card__k{ color:var(--h2); }

@media (prefers-reduced-motion:reduce){
  .btn--report__dot::after{ animation:none; opacity:.35; }
}


/* ============================================================
   09. next / 関連リンク（応援ページ・レポートページ共通）
   ============================================================ */
.next-sec{ border-top:1px solid var(--line-soft); }
.next-grid{ display:grid; gap:14px; }
@media (min-width:760px){ .next-grid{ grid-template-columns:1fr 1fr; gap:18px; } }

.next-card{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:16px;
  padding:20px 18px;
  border:1px solid var(--line); border-radius:14px;
  background:rgba(255,255,255,.035);
  transition:border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.next-card:hover{ border-color:var(--h2); background:rgba(255,255,255,.07); transform:translateY(-2px); }
.next-card__silks{ flex:none; width:46px; }
.next-card__body{ min-width:0; }
.next-card__k{
  display:block;
  font-family:var(--f-en); font-size:11px; font-weight:700; line-height:1.5;
  letter-spacing:.2em; color:var(--text-3); text-transform:uppercase;
}
.next-card__t{
  display:block; margin-top:3px;
  font-family:var(--f-disp); font-weight:700; font-size:19px; line-height:1.4;
  letter-spacing:.04em;
}
.next-card__arrow{ margin-left:auto; flex:none; color:var(--text-3); transition:color .25s, transform .25s; }
.next-card:hover .next-card__arrow{ color:var(--h2); transform:translateX(3px); }


/* ============================================================
   10. モーション設定
   ============================================================ */
.reveal{
  opacity:0; transform:translateY(18px);
  transition:opacity .75s var(--ease), transform .75s var(--ease);
  transition-delay:var(--reveal-delay,0s);
}
.reveal.is-visible{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
}