/* =========================================================
   合同会社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・フッター・写真モック・写真を背景に敷く面）は暗いまま維持 ---------- */
.poster,.rfv,.ft,.cut,.manifesto,.plate-tag{
  --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;
}

/* ---------- ヘッダー：地の上では透明、スクロール後は半透明の黄 ---------- */
.hd{
  --tx:#141414;--tx2:rgba(0,0,0,.68);--tx3:rgba(0,0,0,.52);
  background:transparent;border-bottom:0;
}
.hd.on{
  background:rgba(247,206,0,.9);
  backdrop-filter:blur(14px) saturate(.92);-webkit-backdrop-filter:blur(14px) saturate(.92);
  border-bottom:1px solid rgba(0,0,0,.12);
}
/* 黒FVを持つページ（index/recruit）ではスクロール前だけ明色文字 */
body.has-dark-fv .hd:not(.on){
  --tx:#f4f4f4;--tx2:#cfcfd4;--tx3:#a8a8ae;color:#f4f4f4;
}
body.has-dark-fv .hd:not(.on) .logo{color:#f4f4f4}
body.has-dark-fv .hd:not(.on) .logo i{color:#ffc800;border-bottom-color:#ffc800}
body.has-dark-fv .hd:not(.on) .nav a{color:#cfcfd4}
body.has-dark-fv .hd:not(.on) .burger{border-color:rgba(255,255,255,.36)}
body.has-dark-fv .hd:not(.on) .burger span{background:#f4f4f4}
.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{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{background:#ffc800;color:#000;box-shadow:3px 3px 0 rgba(255,200,0,.2)}
.poster .btn,.rfv .btn{color:#f4f4f4;border-bottom-color:#f4f4f4}

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

/* ---------- 細部 ---------- */
.skip{background:#000;color:#ffd400}
.door:hover s{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{outline-color:#ffc800}