/* =========================================================
   合同会社Dawg 黄色ベース版テーマ
   名刺（黄色地に黒）に合わせた配色。構成・文章は黒版と同一。
   地=名刺の黄 / 黒=FV・フッター・写真の島 / 白=事実を読ませる面
   ========================================================= */

:root{
  /* 地を黄色に、文字を黒に反転 */
  --bk:#f7ce00;
  --bk2:#f0c700;
  --bk3:#e8c000;
  --ln:rgba(0,0,0,.18);
  --ln2:rgba(0,0,0,.36);
  --tx:#141414;
  --tx2:rgba(0,0,0,.68);
  --tx3:rgba(0,0,0,.52);
  /* 黄アクセントは黒に役割交代 */
  --ye:#141414;
  /* 黄地の本文は黒系に（明色の直書きを変数経由で差し替え） */
  --body-tx:rgba(0,0,0,.78);
  --body-strong:#000;
}

::selection{background:#000;color:#ffd400}

/* 黄はベタ塗りにせず、紙のような光量差を固定光源で敷く（同一色相・低コントラストが上品の条件） */
body{
  background:
    radial-gradient(120% 70% at 18% 0%, rgba(255,236,120,.6) 0%, rgba(255,236,120,0) 55%),
    linear-gradient(150deg,#ffd60a 0%,#f3c500 50%,#e3b300 100%);
  background-attachment:fixed;
}

/* ---------- 黒の島（FV・フッター・写真モック・写真を背景に敷く面）は暗いまま維持 ----------
   ここから外れた要素は「黄色地に黒文字」の既定に戻る。黒背景を自前で敷いた面を
   足すときは、必ずこのセレクタにも足すこと（足し忘れると黒地に黒文字で沈む）。
   .nf=404 / .tk=送信完了 は全面が黒なので島に含める。 */
.poster,.rfv,.ft,.cut,.manifesto,.plate-tag,.hd,.drawer,.nf,.tk{
  --tx:#f4f4f4;
  --tx2:#a8a8ae;
  --tx3:#8f9096;
  --ln:rgba(255,255,255,.14);
  --ln2:rgba(255,255,255,.3);
  --ye:#ffc800;
  /* 島の面色も暗色に固定（ページ内の後勝ちCSSが var(--bk3) 等を参照するため） */
  --bk:#121417;
  --bk2:#171a1e;
  --bk3:#1d2126;
  /* 変数の再解決だけでは継承色が変わらないため、島には文字色を明示する */
  color:#f4f4f4;
  --body-tx:#d6d6d6;
  --body-strong:#fff;
}

/* ---------- ヘッダー：黒地に黄文字＝ナンバープレートそのもの（0804 社長指示） ----------
   もとは「地の上では透明・スクロール後は半透明の黄」だったが、
   ロゴ（金×紺）が黄色い地の上でほぼ消えるため、ヘッダーごと黒に倒した。
   ロゴの後ろに黒いチップを敷く案は「枠がダサい」で不採用。 */
.hd{background:#000;border-bottom:1px solid rgba(255,255,255,.14)}
.hd.on{
  background:rgba(0,0,0,.94);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.14);
}
.logo{color:#f4f4f4}
.logo i{color:#ffc800;border-bottom:3px solid #ffc800}
.nav a{color:#cfcfd4}
.nav a:hover{color:#fff}
.nav a.cur{color:#ffc800;font-weight:700;border-bottom:2px solid #ffc800}
/* 黒地になったので、CTAは黒ステッカーだと沈む。黄ステッカーに反転させる */
/* 黄ステッカーは余白が要る。paddingが無いと文字に色が張り付いて蛍光ペンに見える。
   .btn-y（padding:18px 32px）ほどは要らないが、ヘッダー内で「面」として立つ量を持たせる。 */
.nav-cta,.hd .nav-cta{
  background:#ffc800;color:#000 !important;font-weight:700;
  padding:10px 16px;
}
.nav-cta:hover{box-shadow:0 6px 20px rgba(255,200,0,.25)}
.burger{border-color:rgba(255,255,255,.36)}
.burger span{background:#f4f4f4}

/* ---------- ドロワー（ヘッダーの続きなので同じ黒で） ---------- */
.drawer{background:#0a0b0d}
.drawer a{border-bottom-color:rgba(255,255,255,.14);color:#f4f4f4}
.drawer a .lb{color:#8f9096}
.drawer a.cur{color:#ffc800;font-weight:900}

/* ---------- ボタン（黄地）：CTAは黒ステッカー、補助は黒下線 ---------- */
.btn{color:#141414;border-bottom-color:#141414}
.btn-y{background:#000;color:#ffd400;box-shadow:3px 3px 0 rgba(0,0,0,.22)}
.btn-y:hover{box-shadow:1px 1px 0 rgba(0,0,0,.22)}
/* 黒の島の上ではCTA=黄ステッカー */
.poster .btn-y,.rfv .btn-y,.nf .btn-y,.tk .btn-y{background:#ffc800;color:#000;box-shadow:3px 3px 0 rgba(255,200,0,.2)}
.poster .btn,.rfv .btn,.nf .btn,.tk .btn{color:#f4f4f4;border-bottom-color:#f4f4f4}

/* 白面の境界はstyle.cssのブリッジに任せる（硬い枠線は敷かない） */

/* ---------- 細部 ---------- */
.skip{background:#000;color:#ffd400}
.door:hover .lb{color:#000}
.why>div{border-top-color:#141414}
/* プレート意匠：--yeの役割交代の影響を受けないよう黄を直指定 */
.plate{box-shadow:0 0 0 1px rgba(0,0,0,.3);border-color:#ffc800}
.plate i,.plate b{color:#ffc800}
.tbd{color:rgba(0,0,0,.55)}
.tbd::before{color:rgba(0,0,0,.55);border-color:rgba(0,0,0,.3)}
:focus-visible{outline-color:#000}
.poster :focus-visible,.rfv :focus-visible,.ft :focus-visible,.nf :focus-visible,.tk :focus-visible,
.hd :focus-visible,.drawer :focus-visible,.plate-tag :focus-visible,.plate-tag:focus-visible{outline-color:#ffc800}

/* ---------- 既読ハイライトの未読色（黄面用） ----------
   基礎CSSの未読色 rgba(214,214,214,.34) は黒版のために作った値。
   黄色地(#f7ce00)に重ねるとコントラスト比 1.01:1 ＝ 完全に読めなくなる。
   実測して、黒版の「薄いが見える」水準（約2.2:1）に合わせた黒の薄がけに置き換える。
   ★ここを白系に戻さないこと。代表あいさつ（about）とドライバー紹介の本文が消える。 */
.js .read-dim p{color:rgba(0,0,0,.35)}
/* ★既読側もこちらで上書きし直す。基礎CSSの .read-dim p.read と
   このファイルの .js .read-dim p は詳細度が同じ(0,2,1)で、後読みのこちらが勝つ。
   この1行が無いと、黄テーマでは .read が付いても色が変わらず演出が死ぬ。 */
.js .read-dim p.read{color:var(--body-tx)}
.js .read-dim p.read strong{color:var(--body-strong)}
@media (prefers-reduced-motion:reduce){ .js .read-dim p{color:var(--body-tx)} }