@charset "UTF-8";
/* ============================================================
   詳細レポートと同じ作風にそろえる（2026-10-23）
   ------------------------------------------------------------
   詳細レポートを作り変えたときに選んだ3つの作風を、サイトにも入れる。
     ・黒とアイボリーを軸に、金は控えめ（細い線と小さな字だけ。面で塗らない）
     ・静かな配置と、たっぷりの余白
     ・画面の写しや写真は、額のように細い線で囲んで置く（ぼかさない）
   レポートの各ページは「上に黒い帯＋金の細い線、下はアイボリー」。サイトも上の帯を同じ形にする。
   全ページの <head> で、gold.css のあとに読み込む。文と並びは変えていない。
   ============================================================ */
:root {
  --c-dark: #111111;               /* 黒い区切りを、レポートの黒に近づける */
  --c-report-black: #0B0B0B;       /* 上の帯の黒 */
}

/* ---- 上の帯：黒＋下に金の細い線（スクロールしても、黒い区切りの上でも同じ） ---- */
html body .site-head,
html body .site-head.is-scrolled,
html body .site-head.on-dark,
html body .site-head.on-dark.is-scrolled,
html.no-js body .site-head {
  background: var(--c-report-black);
  border-bottom: 1px solid var(--c-gold-dark);
  backdrop-filter: none;
}
html body .site-head .logo { color: var(--c-dark-text); }
html body .site-head .nav-toggle span { background: var(--c-dark-text); }

/* スマホでメニューを開いている間は、全画面のメニューと同じ明るい地に戻す（社名と×印を読めるように） */
html body.body-lock .site-head,
html body.body-lock .site-head.is-scrolled,
html body.body-lock .site-head.on-dark,
html body.body-lock .site-head.on-dark.is-scrolled {
  background: rgba(247, 246, 242, .97);
  border-bottom-color: var(--c-rule);
}
html body.body-lock .site-head .logo { color: var(--c-text); }
html body.body-lock .site-head .nav-toggle span { background: var(--c-text); }
html body .site-head :focus-visible { outline-color: var(--c-dark-text); }

/* 「ご相談」：黒い帯の上では、明るい塗りに黒い字（いつも同じ見え方） */
html body .site-head .nav-cta,
html body .site-head .head-actions .nav-cta,
html body .site-head.on-dark .head-actions .nav-cta {
  background: var(--c-dark-text);
  border-color: var(--c-dark-text);
  color: var(--c-report-black);
}

/* パソコン：帯の中のメニューの字は明るく、下線は金 */
@media (min-width: 901px) {
  html body .site-head .nav-list > li > a { color: var(--c-dark-text); }
  html body .site-head .nav-list > li > a::after { background: var(--c-gold-dark); }
  /* 開いて出る小さなメニューは、今までどおり明るい地に黒い字 */
  html body .site-head .nav-sub a { color: var(--c-text); }
}

/* ---- 写真・画面の写し：額のように細い金の線で囲む（ぼかさない） ---- */
html body .hero-visual img,
html body .issue-photo img {
  border: 1px solid var(--c-gold-line);
  padding: 6px;
  background: var(--c-bg);
  box-sizing: border-box;
}

/* ---- 足もと：上の線を金の細い線に（レポートの各ページの下の金の線と同じ役目） ---- */
html body .site-foot { border-top: 1px solid var(--c-gold-line); }

/* 最初の画面：黒い帯のすぐ下に字が詰まって見えないよう、少しだけ間をあける */
@media (min-width: 901px) {
  html body .hero { padding-top: calc(var(--h-head) + clamp(24px, 3vh, 48px)); }
}