/* =========================================================
   合同会社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}

/* ---------- 黒の島（FV・フッター・写真モック）は暗いまま維持 ---------- */
.poster,.rfv,.ft,.cut{
  --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;
}
.cut{background:#1d2126}
.poster .cut,.rfv .cut{background:#1d2126}

/* ---------- ヘッダー：名刺のように常に黄色のバーにする ---------- */
.hd{background:#f7ce00;border-bottom:1px solid rgba(0,0,0,.16)}
.hd,.hd.on{
  --tx:#141414;--tx2:rgba(0,0,0,.68);--tx3:rgba(0,0,0,.52);
  background:#f7ce00;backdrop-filter:none;-webkit-backdrop-filter:none;
  border-bottom:1px solid rgba(0,0,0,.16);
}
.logo{color:#141414}
.logo i{color:#141414;border-bottom:3px solid #000}
.nav a{color:rgba(0,0,0,.68)}
.nav a:hover{color:#000}
.nav a.cur{color:#000;font-weight:700;border-bottom:2px solid #000}
.nav-cta,.hd .nav-cta{background:#000;color:#ffd400 !important;font-weight:700}
.nav-cta:hover{box-shadow:0 6px 20px rgba(0,0,0,.3)}
.burger{border-color:rgba(0,0,0,.36)}
.burger span{background:#141414}

/* ---------- ドロワー ---------- */
.drawer{background:#f7ce00}
.drawer a{border-bottom-color:rgba(0,0,0,.18);color:#141414}
.drawer a s{color:rgba(0,0,0,.5)}
.drawer a.cur{color:#000;font-weight:900}

/* ---------- ボタン：黄CTAは黒に反転（名刺の電話番号の強さ） ---------- */
.btn{border-color:rgba(0,0,0,.4);color:#141414}
.btn:hover{background:#000;color:#ffd400;border-color:#000}
.btn-y{background:#000;color:#ffd400;border-color:#000}
.btn-y:hover{background:#141414;border-color:#141414;color:#fff}
/* 黒の島の上では元の黄CTAのまま */
.poster .btn-y,.rfv .btn-y{background:#ffc800;color:#000;border-color:#ffc800}
.poster .btn-y:hover,.rfv .btn-y:hover{background:#fff;border-color:#fff}
.poster .btn,.rfv .btn{border-color:rgba(255,255,255,.3);color:#f4f4f4}
.poster .btn:hover,.rfv .btn:hover{background:#fff;color:#000;border-color:#fff}

/* ---------- 白面：黄との境に線を足して締める ---------- */
.sec-paper{border-top:1px solid rgba(0,0,0,.2);border-bottom:1px solid rgba(0,0,0,.2)}

/* ---------- 細部 ---------- */
.skip{background:#000;color:#ffd400}
.door:hover s{color:#000}
.why{background:rgba(0,0,0,.18);border-color:rgba(0,0,0,.18)}
.why>div{background:#f0c700}
/* プレート意匠：--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{outline-color:#ffc800}