/* ============================================================
   ゴールドのアクセント（2026-09-30 齋藤さんの指示で追加）
   ------------------------------------------------------------
   ⚠ 当初の要件（website-requirements.md §9・設計案）は「金色は使用しない。
      アクセントはシルバー」だった。9-30 に齋藤さんの判断で変更。
   使いどころは要件と同じ「線・区切り・番号・小さな見出し」だけ。
   本文・大きな見出し・ボタンには使わない。
   色（読みやすさ＝コントラスト比を実測）
     --c-gold-text  #7E611B  明るい背景の上の文字（白5.47／アイボリー5.0）
     --c-gold-line  #B8923A  明るい背景の上の線・点（文字には使わない）
     --c-gold-dark  #C9A646  チャコールの上の文字・線（7.0）
   全ページの <head> で、ほかのCSSの一番あとに読み込む。
   ============================================================ */
:root {
  --c-gold-text: #7E611B;
  --c-gold-line: #B8923A;
  --c-gold-dark: #C9A646;
}

/* ---- 区切りの番号と、右に伸びる線 ---- */
html body .sec-num { color: var(--c-gold-text); }
html body .sec-num::after { background: var(--c-gold-line); }

/* ---- 番号 ---- */
html body .flow-num,
html body .tl-num,
html body .promise-num,
html body .project-num,
html body .svc-five-num,
html body .svc-step-num,
html body .svc-card-num,
html body .svc-pair-label span,
html body .svc-two-kind span { color: var(--c-gold-text); }

/* ---- 小さな見出し・ラベル ---- */
html body .hero-eyebrow,
html body .svc-aside-kicker,
html body .news-label,
html body .hero-offer-label,
html body .page-num,
html body .svc-case-kind,
html body .artifact-label { color: var(--c-gold-text); }

/* ---- 線 ---- */
html body .svc-for-label { border-bottom-color: var(--c-gold-line); }
html body .svc-two-item,
html body .svc-card { border-top-color: var(--c-gold-line); }
html body .svc-pair-lead { border-left-color: var(--c-gold-line); }
html body .svc-step::before { background: var(--c-gold-line); }
html body .link { border-bottom-color: var(--c-gold-line); }

/* ---- チャコールの区切り（トップの About・約束・メッセージ・お問い合わせ、サービスページの制作事例） ---- */
html body .section-dark .sec-num,
html body #about .sec-num, html body #promise .sec-num, html body #message .sec-num, html body #contact .sec-num,
html body.svc-page #case .sec-num,
html body #promise .promise-num,
html body.svc-page #case .svc-case-kind,
html body.svc-page #case .svc-pair-label span { color: var(--c-gold-dark); }
html body .section-dark .sec-num::after,
html body #about .sec-num::after, html body #promise .sec-num::after, html body #message .sec-num::after, html body #contact .sec-num::after,
html body.svc-page #case .sec-num::after { background: var(--c-gold-dark); }
html body #promise .promise { border-top-color: rgba(201, 166, 70, .35); }
html body #promise .promise:last-child { border-bottom-color: rgba(201, 166, 70, .35); }
html body #about .dot-list li::before { background: var(--c-gold-dark); }
html body .section-dark .link,
html body #about .link, html body #promise .link, html body #message .link, html body #contact .link,
html body.svc-page #case .link { border-bottom-color: var(--c-gold-dark); }
html body.svc-page #case .svc-pair-lead,
html body.svc-page #case .svc-quote { border-left-color: var(--c-gold-dark); }
html body.svc-page #case .svc-quote::before { color: var(--c-gold-dark); opacity: .8; }

/* ---- 目に入る場所に少しだけ（9-30 追加） ---- */
/* 区切りの明朝の一文の上に、短い線 */
html body .svc-lead::before {
  content: ""; display: block; width: 40px; height: 1px;
  background: var(--c-gold-line); margin-bottom: clamp(16px, 2vw, 22px);
}
html body.svc-page #case .svc-lead::before { background: var(--c-gold-dark); }
/* トップ「できること」：01→02→03 をつなぐ線と矢印 */
html body .flow { border-top-color: var(--c-gold-line); }
html body .flow-step + .flow-step::after { border-top-color: var(--c-gold-line); border-right-color: var(--c-gold-line); }
/* 事例・外部へのリンクの下線 */
html body .project-link { border-bottom-color: var(--c-gold-line); }
/* サービスページの一番上：大きな一文の下に短い線 */
html body.svc-page #top .statement::after {
  content: ""; display: block; width: 56px; height: 1px;
  background: var(--c-gold-line); margin-top: clamp(20px, 2.4vw, 28px);
}
html body.svc-page main #top .statement::after,
html body main .statement::after { background: var(--c-gold-line) !important; }
html body.svc-page main #case .svc-lead::before { background: var(--c-gold-dark) !important; }
html body main .svc-lead::before { background: var(--c-gold-line); }

/* 代表メッセージの番号だけ半透明になっていた（site3.css 741）。ほかの区切りとそろえる */
html body .section-message .sec-num { opacity: 1; }