/* 変数・共通ユーティリティ */
:root{
  /* 文字スケール & 余白スケール */
  --font-scale: 1.3;
  --space-1: 0.5rem;
  --space-2: 1.0rem;
  --space-3: 1.5rem;
  --space-4: 2.0rem;
  --space-5: 2.5rem;

  /* Chart */
  --chart-h-pc:360px;
  --chart-h-sp:280px;
  --chart-w-sp:640px;

  /* カラートークン */
  --ink-bg: #000;    /* 黒背景 */
  --ink-fg: #fff;    /* 文字は白 */
  --accent: #ff8c00; /* オレンジはアクセントに活用 */
  --accent-dark: #d97400; /* 濃いオレンジ */
}

/* ===== Header layout ===== */
.site-header{
  background: var(--ink-bg);
  color: var(--accent);
  --header-pad-y: .6rem;   /* 上下余白 */
  --header-pad-x: 1rem;    /* 左右余白 */
  --header-gap: .75rem;    /* ロゴと文字の間隔 */
  --header-logo-h: 28px;   /* ロゴ高さ（SP） */
  --header-title-size: clamp(1.0rem, 3vw, 1.35rem);
  --header-letter: .04em;  /* 文字間 */
}

@media (min-width: 768px){
  .site-header{ --header-logo-h: 28px; }
}

.site-header__inner{
  display: flex;
  align-items: center;
  padding: var(--header-pad-y) var(--header-pad-x);
}

.site-header__brand{
  display: inline-flex;
  align-items: center;
  gap: var(--header-gap);
  text-decoration: none;
  color: inherit;
}

.site-header .site-logo{
  height: var(--header-logo-h);
  width: auto;
  display: block;
}

.site-title{
  font-size: var(--header-title-size);
  font-weight: 700;
  letter-spacing: var(--header-letter);
  line-height: 1.1;
  white-space: nowrap;
}

/* TOPページはヘッダーロゴを隠す（ヒーローと二重にならないように） */
.top .site-header .is-hidden-on-top{ display: none; }

/* Header内リンクの色/挙動 */
.site-header a{ color: var(--ink-fg); text-decoration: none; }
.site-header a:hover{ opacity: .9; }

/* ===== フッター ===== */
.site-footer{
  background: var(--ink-bg);  /* 黒 */
  color: var(--ink-fg);       /* 白 */
  /* ロゴサイズはここで調整 */
  --footer-logo-h: 34px;
}
@media (min-width: 577px){
  .site-footer{ --footer-logo-h: 34px; }
}

/* 上段：ロゴ＋サイト名（左寄せで横並び） */
.site-footer__head{
  display:flex;
  align-items:center;
  gap:.6rem 1rem;
  flex-wrap:wrap;
  justify-content:flex-start;
}

/* ロゴをテキストの左に・縦位置を中央で合わせる */
.site-footer__logo{
  height: var(--footer-logo-h);
  width: auto;
  display: block;   /* ベースラインズレ防止 */
}

/* 「オークス」「中古車販売情報サイト」の見た目 */
.site-footer__brand{
  font-weight: 600;
  letter-spacing: .02em;
  display:flex;
  align-items:baseline;
  gap:.75rem;
}
.site-footer__brand .brand-name{ font-size: clamp(1rem, 2.4vw, 1.25rem); }
.site-footer__brand .brand-desc{ font-size: clamp(.9rem, 1.8vw, 1.05rem); opacity:.95; }

/* 下段ナビ：PC横並び / SP縦並び */
.site-footer__nav{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.2rem;
  padding: 0;
  margin: .5rem 0 0;
}
@media (max-width: 577px){
  .site-footer__nav{
    flex-direction: column;
    gap: .25rem;
  }
}
.site-footer__nav li{ margin: 0; }

/* ===== 下線でリンク感を強調 ===== */
/* フッターのリンクルック：■は疑似要素、テキスト側だけ下線 */
.site-footer a{
  color: var(--ink-fg);
  text-decoration: none;
}
.site-footer .footer-link{
  display:inline-flex; align-items:center; gap:.5rem;
  color:var(--ink-fg);
}
.site-footer .footer-link .label{
  border-bottom:2px solid var(--accent);
  line-height:1.2;
}

/* 既存の「全リンクに■」があれば無効化 */
.site-footer .footer-link::before{ content:none !important;}

/* ■の見た目（実体 span で出す） */
.site-footer .accent-bullet{
  color:var(--accent);
  display:inline-block;
  line-height:1;
  margin-right:.2rem;
}

/* 「■の代わりに空き」を作るためのスペーサー（2つ目以降用） */
.site-footer .bullet-spacer{
  display:inline-block;
  width:1em;
  margin-right:.2rem;
}

/* ■と同じ幅だけ空けるスペーサー（2つ目以降のカテゴリ用） */
.site-footer .bullet-spacer{
  display:inline-block;
  width:1em;
  margin-right:.2rem;
}

.site-footer a:hover{
  opacity: .9; /* うっすら反応。色は白のまま */
}

/* ===== Buttons ===== */
.btn-action,
.btn.btn-action{
  background-color: var(--accent) !important;
  border: 2px solid var(--accent-dark) !important;
  color: var(--ink-fg) !important;
  font-weight: 700;
  padding: 1.5rem 1.3rem; /* ここでサイズ統一 */
  font-size: 1.5rem;
}

/* hover：オレンジのまま（ほんの少しだけ明るく見せる） */
.btn-action:hover,
.btn.btn-action:hover {
  background-color: var(--accent) !important;
  border-color: var(--accent-dark) !important;
  color: var(--ink-fg) !important;
  filter: brightness(1.03);
}

/* focus：黒くならない＆オレンジ系アウトライン */
.btn-action:focus,
.btn.btn-action:focus {
  background-color: var(--accent) !important;
  border-color: var(--accent-dark) !important;
  color: var(--ink-fg) !important;
  box-shadow: 0 0 0 .16rem rgba(255,140,0,.28) !important;
  outline: none;
}

/* active：押下中もオレンジのまま */
.btn-action:active,
.btn.btn-action:active {
  background-color: var(--accent) !important;
  border-color: var(--accent-dark) !important;
  color: var(--ink-fg) !important;
}

/* disabled */
.btn-action:disabled,
.btn.btn-action:disabled {
  opacity: .6;
  cursor: not-allowed;
}
/* ===== 汎用ユーティリティ ===== */
/* 全体フォント拡大用（既存運用を維持） */
.u-font-lg { font-size: calc(1rem * var(--font-scale)); }
.u-spacious .section + .section { margin-top: var(--space-4); }

/* アクセント色ユーティリティ（HTMLで使っている .text-orange を統一） */
.text-orange { color: var(--accent) !important; }

.text-ellipsis{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.visually-hidden{
  position:absolute !important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.cursor-pointer{cursor:pointer;}
.is-hidden { display: none !important; }

/* 図版周りの余白初期化（ヒーロー付近） */
.figure-reset, .hero-logo { margin: 0; }

/* アニメを抑制（アクセシビリティ） */
@media (prefers-reduced-motion: reduce) {
  .reduce-motion, .car-logo, .dust-trail, [data-anim] {
    animation: none !important;
    transition: none !important;
  }
}