/* =====================================================================
   JCサービス 2026 デザインシステム
   全ページで読み込む（LP = single-lp のみ除外。mu-plugin 側で制御）
   style.css は変更せず、後から上書きする方式。

   ---------------------------------------------------------------------
   読み込み順（2026-08-20 に実測して確認）

     style.css  →  このファイル  →  追加CSS（管理画面のカスタマイザー）

   追加CSSはWordPressが wp_head の priority 101 で出力するため、
   enqueue されるこのファイルより必ず後に来る。つまり
   **同じ詳細度なら追加CSSが勝つ。**

   実際、以前は追加CSS(v6)の .cta-band .wrap が 80px を指定していて、
   このファイルの 64px は負けていた。同じく table td の罫線も
   追加CSS(v1)の border:none !important に負けて消えていた。

   そのため追加CSSは 2026-08-20 に LP専用（body.single-lp）だけへ
   絞り込んである。ページ全体の見た目はこのファイルが唯一の担当。
   追加CSSに body.single-lp 以外のセレクタを足さないこと。
   ---------------------------------------------------------------------

   2026-08-20 の変更
   - ダークモード対応を廃止（ライト固定）
   - 本文 15px → 16px、10〜11px のラベル類を 12px に底上げ
   - コントラスト不足の3色を修正（--live / --teal-ink / --field-line）
   - 追加CSS(v1) が持っていたフォームの寸法をこちらへ移設
   ===================================================================== */
:root {
    --paper:       #FFFFFF;
    --panel:       #F1F4F7;
    --panel-2:     #E8ECF2;
    --ink:         #111318;
    --muted:       #5A6072;
    --rule:        #DCE0E8;
    --accent:      #2E3191;
    --accent-lift: #4348C8;
    --accent-ink:  #FFFFFF;
    --accent-wash: #EAEBF7;
    /* 稼働中バッジ。#1F9E63 は白地で 3.43:1 しかなく、11〜12px の
       文字には足りなかった（要 4.5:1）。5.35:1 まで濃くしている。 */
    --live:        #177A4C;
    --svc-1:       #2E3191;
    --svc-2:       #17628F;
    --svc-3:       #56399E;
    --amber:       #E8940C;
    --amber-deep:  #96560A;
    --amber-wash:  #FCEFD8;
    --on-amber:    #1B1405;
    --teal:        #0E7C86;
    --teal-wash:   #DCF0F2;
    /* 青緑を --teal-wash の上に載せると 4.19:1 で不足するため、
       文字用に一段濃い色を分けている（5.06:1）。
       大きい数字や白地の見出しは --teal のままでよい。 */
    --teal-ink:    #0C6E77;
    /* 入力欄の枠。--rule(#DCE0E8) は白地で 1.32:1 しかなく、
       枠がほぼ見えなかった（UI部品は要 3:1）。3.42:1。 */
    --field-line:  #838B9D;

    --geo: "Avenir Next", "Century Gothic", Futura, "Trebuchet MS", system-ui, sans-serif;
    --sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", YuGothic, system-ui, sans-serif;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px;
    --s8:32px; --s12:48px; --s16:64px; --s20:80px; --s24:96px;
  }

  /* ダークモード対応は 2026-08-20 に廃止した。
     読み手は地域の40〜70代が中心で、端末のダークモード設定によって
     配色が変わると、決めたトーンが半分の人には別の色で届く。
     検証も常に2通り必要になるため、ライト固定にしている。
     復活させる場合は @media (prefers-color-scheme: dark) と
     :root[data-theme="dark"] の2ブロックを戻す。 */

  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    /* 本文16px以上。15px は年配層の実機で明確に読みづらい */
    font-size: 16px;
    line-height: 1.9;
    -webkit-font-smoothing: antialiased;
  }

  .wrap { max-width: 1120px; margin-inline: auto; padding-inline: clamp(18px, 4.5vw, 48px); }

  a { color: inherit; text-decoration: none; }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

  /* ---- type utilities ---- */
  .en {
    font-family: var(--geo);
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
  }
  .num { font-family: var(--geo); font-variant-numeric: tabular-nums; letter-spacing: .01em; }

  h2.sec-t {
    font-size: clamp(24px, 3.6vw, 36px);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .02em;
    margin: var(--s3) 0 0;
    text-wrap: balance;
  }
  .sec-lead { color: var(--muted); margin: var(--s4) 0 0; max-width: 40em; font-size: 16px; }

  section { padding-block: clamp(56px, 8vw, 104px); }
  section.tint { background: var(--panel); }

  /* ---- header ---- */
  header {
    position: sticky; top: 0; z-index: 40;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
  }
  header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding-block: var(--s3); }
  .logo { display: flex; align-items: baseline; gap: var(--s2); font-weight: 700; font-size: 17px; letter-spacing: .04em; }
  .logo em { font-family: var(--geo); font-style: normal; font-size: 12px; letter-spacing: .16em; color: var(--muted); font-weight: 600; }
  header nav { display: flex; gap: var(--s6); font-size: 13px; font-weight: 500; }
  header nav a:hover { color: var(--accent); }
  .cta-mini {
    background: var(--accent); color: var(--accent-ink);
    padding: 9px 20px; font-size: 13px; font-weight: 700; letter-spacing: .04em;
  }
  .cta-mini:hover { background: var(--accent-lift); }
  @media (max-width: 860px) { header nav { display: none; } }

  /* ---- 大型ヒーロー：明暗を固定した独立ブロック。
         背景は実際に制作・保守しているサイトの合成。ストック写真は使わない。 ---- */
  .hero-full {
    position: relative; overflow: hidden; background: #1B1D5E;
    min-height: clamp(520px, 76vh, 760px); display: grid; align-items: center;
    padding-block: clamp(56px, 8vw, 96px);
  }
  .hero-bg {
    position: absolute; inset: 0;
    background-image: url("https://www.jc-s.net/wp-content/uploads/2026/08/jcs-hero-2026.jpg");
    background-size: cover; background-position: center; opacity: .55;
    filter: blur(1px); transform: scale(1.03);
  }
  .hero-full::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(100deg, rgba(18,20,68,.94) 0%, rgba(18,20,68,.80) 40%, rgba(18,20,68,.34) 100%);
  }
  .hero-inner { position: relative; z-index: 2; color: #FFFFFF; }
  .hero-inner .en { color: #A9ADEC; }
  .hero-inner h1 {
    font-size: clamp(29px, 5vw, 58px); font-weight: 700; line-height: 1.42;
    letter-spacing: .01em; margin: var(--s4) 0 0; color: #FFFFFF;
    max-width: 19em; text-wrap: balance;
  }
  .hero-inner h1 mark { background: none; color: #F5B85A; }
  .hero-inner .lead { color: rgba(255,255,255,.82); max-width: 34em; margin: var(--s6) 0 0; }
  .hero-cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s8); }
  .btn-a { background: var(--amber); color: var(--on-amber); padding: 15px 34px; font-weight: 700; font-size: 15px; letter-spacing: .03em; }
  .btn-a:hover { background: #FFFFFF; color: #1B1D5E; }
  .btn-g { border: 1px solid rgba(255,255,255,.5); color: #FFFFFF; padding: 15px 30px; font-weight: 700; font-size: 15px; }
  .btn-g:hover { background: #FFFFFF; color: #1B1D5E; }
  .hero-note { margin: clamp(32px,5vw,56px) 0 0; font-size: 12px; letter-spacing: .03em; color: rgba(255,255,255,.55); }
  .chips-band { padding-block: clamp(32px, 5vw, 56px) 0; }

  /* ---- benefit chips : the KTX device ---- */
  .chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); margin-top: var(--s8); }
  @media (max-width: 760px) { .chips { grid-template-columns: repeat(2, 1fr); } }
  .chip {
    background: var(--panel);
    border-top: 3px solid var(--accent);
    padding: var(--s4) var(--s3) var(--s6);
    text-align: center;
  }
  .chip i { display: block; font-family: var(--geo); font-style: normal; font-size: 12px; letter-spacing: .14em; color: var(--accent); font-weight: 700; }
  .chip b { display: block; font-size: 15px; font-weight: 700; line-height: 1.6; margin-top: var(--s2); }
  .chip span { display: block; font-size: 12px; color: var(--muted); line-height: 1.7; margin-top: var(--s1); }

  /* ---- proof numbers ---- */
  .figs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
  @media (max-width: 760px) { .figs { grid-template-columns: repeat(2, 1fr); } }
  .fig { background: var(--paper); padding: var(--s6) var(--s4); text-align: center; }
  .fig strong { display: block; font-family: var(--geo); font-size: clamp(32px, 4.6vw, 46px); font-weight: 700; color: var(--accent); line-height: 1.2; font-variant-numeric: tabular-nums; }
  .fig strong small { font-size: 15px; font-weight: 600; margin-left: 3px; }
  .fig span { display: block; font-size: 12px; color: var(--muted); margin-top: var(--s2); }
  .slot { border: 1px dashed var(--accent); color: var(--muted); font-family: var(--mono); font-size: 13px; padding: 2px 12px; display: inline-block; letter-spacing: .04em; }

  /* ---- service blocks ---- */
  .svc { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: clamp(24px,4vw,56px); align-items: center; }
  .svc + .svc { margin-top: clamp(48px, 7vw, 88px); padding-top: clamp(48px, 7vw, 88px); border-top: 1px solid var(--rule); }
  @media (max-width: 880px) { .svc { grid-template-columns: 1fr; } }
  .svc h3 { font-size: clamp(21px, 2.8vw, 27px); font-weight: 700; line-height: 1.55; margin: var(--s2) 0 0; }
  .svc p { color: var(--muted); margin: var(--s4) 0 0; }
  .svc .mini { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s2); margin-top: var(--s6); }
  .svc .mini div { background: var(--paper); border: 1px solid var(--rule); padding: var(--s3) var(--s4); font-size: 13px; font-weight: 700; line-height: 1.6; }
  .svc .mini div span { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
  section.tint .svc .mini div { background: var(--paper); }

  /* ---- scope bar (the differentiator, kept) ---- */
  .scope { background: var(--paper); border: 1px solid var(--rule); padding: var(--s6); }
  section.tint .scope { background: var(--paper); }
  .scope-bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
  .scope-bar span {
    font-family: var(--geo); font-size: 12px; font-weight: 700; letter-spacing: .1em;
    text-align: center; padding: var(--s3) 2px; white-space: nowrap;
  }
  .scope-bar .on { background: var(--accent); color: var(--accent-ink); }
  .scope-bar .off { background: transparent; color: var(--muted); border: 1px dashed var(--rule); }
  .scope-note { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; margin-top: var(--s2); font-size: 12px; font-family: var(--geo); letter-spacing: .06em; }
  .scope-note b { grid-column: 1/4; border-top: 1px solid var(--rule); padding-top: 3px; color: var(--muted); font-weight: 600; }
  .scope-note em { grid-column: 4/6; border-top: 2px solid var(--accent); padding-top: 3px; color: var(--accent); font-style: normal; font-weight: 700; text-align: right; }

  /* ---- case strip ---- */
  .strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 340px); gap: var(--s4); overflow-x: auto; padding-bottom: var(--s4); scroll-snap-type: x mandatory; }
  .strip > * { scroll-snap-align: start; }
  .case { background: var(--paper); border: 1px solid var(--rule); display: flex; flex-direction: column; }
  .case .shot { aspect-ratio: 16/10; background: var(--panel-2); display: grid; place-items: center; overflow: hidden; }
  .case .shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
  .case .shot.nda { background: repeating-linear-gradient(-45deg, var(--panel-2) 0 10px, var(--panel) 10px 20px); }
  .case .shot span { font-family: var(--geo); font-size: 12px; letter-spacing: .14em; color: var(--muted); }
  .case .in { padding: var(--s4); display: flex; flex-direction: column; gap: var(--s2); flex: 1; }
  .case .tags { display: flex; flex-wrap: wrap; gap: 5px; }
  .case .tags i { font-style: normal; font-size: 12px; color: var(--accent); background: var(--accent-wash); padding: 2px 8px; letter-spacing: .03em; }
  .case h4 { font-size: 15px; font-weight: 700; line-height: 1.65; margin: 0; }
  .case .who { font-size: 12px; color: var(--muted); }
  .case .live { margin-top: auto; font-size: 12px; font-weight: 700; color: var(--live); display: flex; align-items: center; gap: 6px; }
  .case .live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--live); }

  /* ---- plans ---- */
  .plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
  @media (max-width: 760px) { .plans { grid-template-columns: 1fr; } }
  .plan { background: var(--paper); border: 1px solid var(--rule); padding: var(--s6); }
  .plan.pick { border: 2px solid var(--accent); position: relative; }
  .plan.pick::after { content: "おすすめ"; position: absolute; top: -1px; right: -1px; background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: 700; padding: 3px 12px; letter-spacing: .08em; }
  .plan h3 { font-family: var(--geo); font-size: 12px; font-weight: 700; letter-spacing: .16em; color: var(--muted); margin: 0 0 var(--s3); }
  .plan .fee { font-family: var(--geo); font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
  .plan .fee small { font-size: 12px; font-weight: 600; color: var(--muted); margin-left: 2px; }
  .plan ul { margin: var(--s4) 0 0; padding: 0; list-style: none; display: grid; gap: var(--s2); font-size: 13px; }
  .plan li { padding-left: 20px; position: relative; line-height: 1.7; }
  .plan li::before { content: ""; position: absolute; left: 0; top: 9px; width: 10px; height: 2px; background: var(--accent); }

  /* ---- news / faq ---- */
  .two { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); }
  @media (max-width: 880px) { .two { grid-template-columns: 1fr; } }
  .list { border-top: 1px solid var(--rule); margin-top: var(--s6); }
  .list a, .list div.row { display: block; border-bottom: 1px solid var(--rule); padding: var(--s4) 0; }
  .list time { font-family: var(--geo); font-size: 12px; color: var(--muted); letter-spacing: .08em; }
  .list p { margin: 3px 0 0; font-size: 14px; font-weight: 500; line-height: 1.7; }
  .list a:hover p { color: var(--accent); }
  .q { display: flex; gap: var(--s3); align-items: baseline; }
  .q i { font-family: var(--geo); font-style: normal; font-weight: 700; color: var(--accent); font-size: 13px; }

  /* ---- contact ---- */
  .contact { background: var(--accent); color: var(--accent-ink); }
  .contact h2 { font-size: clamp(24px, 4vw, 40px); font-weight: 700; line-height: 1.45; margin: var(--s3) 0 0; text-wrap: balance; }
  .contact .en { color: var(--accent-ink); opacity: .75; }
  .contact p { opacity: .85; max-width: 34em; margin: var(--s4) 0 0; }
  .contact .row { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s8); }
  .btn { background: var(--paper); color: var(--accent); padding: 15px 34px; font-weight: 700; font-size: 15px; letter-spacing: .03em; }
  .btn:hover { opacity: .88; }
  .btn.line { background: transparent; color: var(--accent-ink); border: 1px solid currentColor; }
  .btn.line:hover { background: var(--accent-ink); color: var(--accent); opacity: 1; }

  footer { padding-block: var(--s8); border-top: 1px solid var(--rule); font-size: 12px; color: var(--muted); }

  @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
  /* ---- サービスの色分け：紺からの同系3色。走査性だけ上げる ---- */
  .svc-1 .en { color: var(--svc-1); }
  .svc-2 .en { color: var(--amber-deep); }
  .svc-3 .en { color: var(--teal); }
  .svc-1 h3 { border-left: 3px solid var(--svc-1); padding-left: 13px; }
  .svc-2 h3 { border-left: 3px solid var(--amber); padding-left: 13px; }
  .svc-3 h3 { border-left: 3px solid var(--teal); padding-left: 13px; }

  /* ---- 対応エリア ---- */
  .area { border-top: 1px solid var(--rule); background: var(--paper); }
  .area .cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-top: 32px; }
  @media (max-width: 760px) { .area .cols { grid-template-columns: repeat(2, 1fr); } }
  .area .col { background: var(--paper); padding: var(--s6) var(--s4); }
  .area .col span { display: block; font-family: var(--geo); font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--accent); }
  .area .col b { display: block; font-size: 15px; font-weight: 700; margin-top: var(--s2); line-height: 1.6; }
  .area .col p { margin: var(--s1) 0 0; font-size: 12px; color: var(--muted); line-height: 1.75; }
  /* ---- 差し色の役割 ----
     琥珀＝押してほしい場所（CTA・おすすめ）。紺と補色に近く、暖色なので視線が止まる。
     青緑＝データ（数値・タグ）。紺と近いが別系統なので、構造と情報を分けられる。   */
  .cta-mini { background: var(--amber); color: var(--on-amber); }
  .cta-mini:hover { background: var(--amber-deep); color: #FFFFFF; }

  .contact .btn { background: var(--amber); color: var(--on-amber); }
  .contact .btn:hover { background: #FFFFFF; color: var(--accent); opacity: 1; }

  .plan.pick { border-color: var(--amber); }
  .plan.pick::after { background: var(--amber); color: var(--on-amber); }
  .plan.pick li::before { background: var(--amber); }

  .fig strong { color: var(--teal); }
  .fig .slot { border-color: var(--teal); }
  .case .tags i { color: var(--teal-ink); background: var(--teal-wash); }
  .area .col span { color: var(--teal); }

/* =====================================================================
   ここから下層ページ（固定ページ／ブログ記事／works／404）
   既存 style.css と追加CSS(v1-v7) を上書きする。
   LP（single-lp）はこのファイル自体を読み込まないので無関係。
   ===================================================================== */

/* ---- ヘッダー：全ページ共通で白に ---- */
.site-header { background: var(--paper); border-bottom: 1px solid var(--rule); }
.site-header .wrap { max-width: 1120px; padding-block: var(--s3); }
.brand svg, .brand img { width: 34px; height: 34px; }
.brand-name { font-family: var(--sans); font-size: 17px; font-weight: 700; letter-spacing: .04em; color: var(--ink); }

.global-nav a { color: var(--ink); font-size: 13px; font-weight: 500; letter-spacing: .02em; text-transform: none; }
.global-nav a:hover { color: var(--accent); text-decoration: none; }
.global-nav li.nav-contact a { background: var(--amber); color: var(--on-amber); padding: 9px 20px; font-weight: 700; }
.global-nav li.nav-contact a:hover { background: var(--amber-deep); color: #FFFFFF; }
.nav-toggle { border: 1px solid var(--rule); color: var(--ink); font-family: var(--sans); font-weight: 700; }
@media (max-width: 800px) {
  .global-nav { background: var(--paper); border-bottom: 1px solid var(--rule); }
}

/* ---- フッター ---- */
.site-footer { background: var(--paper); border-top: 1px solid var(--rule); }
.site-footer .wrap { max-width: 1120px; color: var(--muted); font-size: 12px; }
.footer-nav a { color: var(--muted); font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .02em; text-transform: none; }
.footer-nav a:hover { color: var(--accent); }

/* ---- 下層ページのヒーロー ---- */
.page-hero {
  padding: clamp(48px, 7vw, 88px) 0 clamp(28px, 4vw, 44px);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.page-hero .wrap { max-width: 1120px; }
.page-hero .eyebrow {
  font-family: var(--geo); font-size: 12px; font-weight: 600;
  letter-spacing: .18em; color: var(--teal); text-transform: uppercase;
  display: block; margin-bottom: 10px;
}
.page-hero .page-title {
  font-family: var(--sans);
  font-size: clamp(27px, 4.4vw, 46px);
  font-weight: 700; line-height: 1.42; letter-spacing: .01em;
  color: var(--ink); margin: 0; max-width: 22em; text-wrap: balance;
}

/* ---- 本文 ---- */
.entry-body { padding: clamp(40px, 6vw, 72px) 0 clamp(56px, 8vw, 96px); background: var(--paper); }
.entry-body .wrap { max-width: 1120px; }
/* 680px は 16px 本文で全角約42文字。35〜45文字に収まる */
.entry-body .entry-content { max-width: 680px; color: var(--ink); font-size: 16px; line-height: 1.95; }

.entry-content h2 {
  font-family: var(--sans); font-size: clamp(20px, 2.8vw, 26px);
  font-weight: 700; line-height: 1.55; color: var(--ink);
  border-left: 3px solid var(--accent); padding-left: 14px;
  margin: 2.4em 0 .8em; letter-spacing: .01em;
}
.entry-content h3 {
  font-family: var(--sans); font-size: 17px; font-weight: 700;
  line-height: 1.6; color: var(--ink); margin: 2em 0 .6em;
}
.entry-content h4 { font-size: 15px; font-weight: 700; margin: 1.6em 0 .5em; }
.entry-content p { margin: 0 0 1.5em; }
.entry-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.entry-content a:hover { color: var(--accent-lift); }
.entry-content ul, .entry-content ol { padding-left: 1.5em; margin: 0 0 1.5em; }
.entry-content li { margin-bottom: .5em; }
.entry-content img { margin: 2em 0; }
.entry-content hr { border: 0; border-top: 1px solid var(--rule); margin: 3em 0; }

.entry-content blockquote {
  border-left: 3px solid var(--rule);
  margin: 2em 0; padding: .2em 0 .2em 1.2em;
  color: var(--muted);
}

.entry-content table {
  border-collapse: collapse; width: 100%; font-size: 14px;
  margin: 2em 0; display: block; overflow-x: auto;
}
.entry-content th, .entry-content td {
  border: 1px solid var(--rule); padding: 12px 14px;
  text-align: left; vertical-align: top;
}
.entry-content th { background: var(--panel); color: var(--ink); font-weight: 700; white-space: nowrap; }
/* 追加CSSが td の罫線を消していたので、下層では戻す */
.entry-content table td { border: 1px solid var(--rule) !important; }

/* ---- works 一覧 ---- */
.works-grid { gap: clamp(16px, 2vw, 24px); }
.work-card { background: var(--panel-2); border: 1px solid var(--rule); }
.work-card::after {
  background: linear-gradient(to top, rgba(17,19,24,.88), rgba(17,19,24,0) 52%);
}
.work-card .work-label { left: 16px; bottom: 14px; right: 16px; }
.work-card .work-label strong {
  font-family: var(--sans); font-weight: 700; font-size: 15px;
  line-height: 1.6; color: #FFFFFF; letter-spacing: .01em;
}
.work-card .work-label small { font-family: var(--geo); font-size: 12px; letter-spacing: .1em; color: rgba(255,255,255,.75); }
.work-card.no-thumb {
  background: repeating-linear-gradient(-45deg, var(--panel-2) 0 10px, var(--panel) 10px 20px);
}

.works-filter a {
  font-family: var(--geo); font-size: 12px; font-weight: 600; letter-spacing: .08em;
  border: 1px solid var(--rule); color: var(--ink); padding: 8px 18px;
}
.works-filter a.is-active, .works-filter a:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.pagination { gap: 6px; margin-top: 40px; }
.pagination .page-numbers {
  font-family: var(--geo); font-size: 13px; font-weight: 600;
  border: 1px solid var(--rule); color: var(--ink); padding: 8px 16px;
}
.pagination .page-numbers.current,
.pagination .page-numbers:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* ---- works 個別 ---- */
.work-hero-thumb { margin: 0 0 2.5em; max-width: 960px; border: 1px solid var(--rule); }
.work-meta { border: 1px solid var(--rule); margin: 2.5em 0; max-width: 680px; }
.work-meta dl { grid-template-columns: 150px 1fr; font-size: 14px; }
.work-meta dt {
  padding: 13px 16px; border-bottom: 1px solid var(--rule);
  background: var(--panel); color: var(--muted);
  font-family: var(--geo); font-weight: 600; font-size: 12px; letter-spacing: .06em;
}
.work-meta dd { padding: 13px 16px; border-bottom: 1px solid var(--rule); color: var(--ink); }
.work-meta dd a { color: var(--accent); text-underline-offset: 3px; }
@media (max-width: 560px) { .work-meta dt { border-bottom: 0; padding-bottom: 4px; } }

/* ---- ブログ一覧（テーマ既定のリスト） ---- */
.post-list { max-width: 680px; }
.post-list li { border-bottom: 1px solid var(--rule); }
.post-list time { font-family: var(--geo); font-size: 12px; letter-spacing: .08em; color: var(--muted); }
.post-list .post-title { font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.7; }
.post-list a:hover .post-title { color: var(--accent); text-decoration: none; }
.post-list.has-thumb a:hover { background: var(--panel); }
.post-list.has-thumb .post-thumb { background: var(--panel-2); border-radius: 0; }
.post-list.has-thumb .post-body time { color: var(--muted); }
.post-list.has-thumb a:hover .post-body .post-title { color: var(--accent); }

/* ---- 404 ---- */
.error-404 { text-align: left; padding: clamp(72px, 12vw, 140px) 0; background: var(--paper); }
.error-404 .wrap { max-width: 1120px; }
.error-404 .display {
  font-family: var(--geo); font-size: clamp(64px, 14vw, 160px);
  font-weight: 700; line-height: 1; color: var(--rule); letter-spacing: .02em;
}
.error-404 .outline-text { color: var(--rule); -webkit-text-stroke: 0; }
.error-404 p { color: var(--muted); max-width: 32em; margin: var(--s6) 0 var(--s8); }

/* ---- 共通ボタン・リンク ---- */
.btn {
  font-family: var(--sans); font-size: 14px; font-weight: 700; letter-spacing: .02em;
  border: 1px solid var(--ink); color: var(--ink); padding: 13px 28px;
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-solid { background: var(--amber); border-color: var(--amber); color: var(--on-amber); }
.btn-solid:hover { background: var(--amber-deep); border-color: var(--amber-deep); color: #FFFFFF; }
.link-arrow {
  font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: .02em;
  color: var(--accent); border-bottom: 1px solid currentColor; padding-bottom: 2px;
}

/* ---- Contact Form 7 ----
   追加CSS(v1) が「白背景の入力欄・白い送信ボタン」を前提にしていたため、
   ページが白になると送信ボタンが見えなくなる。ここで確実に上書きする。 */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form select,
.wpcf7-form textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid var(--field-line);
  border-radius: 0;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  -webkit-appearance: none;
  appearance: none;
}
/* 入力欄の寸法。以前は追加CSS(v1)が持っていたが、
   追加CSSをLP専用に絞ったのでこちらへ移した。 */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form select { height: 52px; }
.wpcf7-form textarea { height: 150px; min-height: 150px; resize: vertical; }
.wpcf7-form select {
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%208%22%3E%3Cpath%20fill%3D%22%232E3191%22%20d%3D%22M6%208L0%200h12z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
  padding-right: 36px;
  cursor: pointer;
}
.wpcf7-form > p { margin: 0 0 1.6em; }
.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
.wpcf7-form label {
  display: block;
  color: var(--ink); font-size: 15px; font-weight: 700;
  line-height: 1.6; margin-bottom: .5em;
}
.wpcf7-form input[type="submit"] {
  display: block;
  width: 100%;
  max-width: 360px;
  margin: 1em auto 0;
  padding: 1em 1.5em;
  background: var(--amber) !important;
  color: var(--on-amber) !important;
  border: 1px solid var(--amber) !important;
  border-radius: 0;
  cursor: pointer;
  font-family: var(--sans); font-weight: 700; font-size: 16px;
  box-shadow: none !important;
}
.wpcf7-form input[type="submit"]:hover {
  background: var(--amber-deep) !important;
  color: #FFFFFF !important;
  border-color: var(--amber-deep) !important;
  opacity: 1 !important;
  transform: none !important;
}
.wpcf7-not-valid-tip { color: #C0392B; font-size: 13px; }
.wpcf7 form .wpcf7-response-output {
  border: 1px solid var(--rule); color: var(--ink);
  margin: 2em 0 0; padding: 14px 16px; font-size: 14px;
}

/* ---- 実績カードのホバー ----
   以前ここには追加CSS(v6/v7)の打ち消しも書いていたが、
   追加CSS を LP専用に絞ったため不要になり削除した。 */
.work-card:hover { box-shadow: 0 0 0 1px var(--accent); transform: translateY(-2px); }

/* ---- スマホ幅の調整 ----
   ラベル類を 10〜11px から 12px に上げたことで、
   横に詰めていた2箇所だけ収まらなくなるため個別に逃がす。 */
@media (max-width: 560px) {
  /* 5列固定の工程バー。nowrap のまま12pxだと溢れるので字間を詰める */
  .scope-bar span { letter-spacing: .02em; padding-inline: 0; }
  .scope-note { font-size: 12px; letter-spacing: .02em; grid-template-columns: 1fr; gap: var(--s1); }
  .scope-note b, .scope-note em { grid-column: 1 / -1; text-align: left; }
  /* 実績個別の項目表。ラベル150px固定だと本文が入らない */
  .work-meta dl { grid-template-columns: 1fr; }
}

/* =====================================================================
   固定ページ本文に直書きされた「紺地前提の文字色」を白地用に読み替える
   PROFILE / SERVICE / CONTACT は本文が手組みで、color が
   インラインに埋まっている。本文を書き換えると本番が紺のあいだ
   読めなくなるため、CSS 側で吸収する。
   ---------------------------------------------------------------
   1) まず明るい文字色を一律で暗くする
   2) そのうえで「紺の面に載っているもの」だけ白へ戻す（後勝ち）
   ===================================================================== */

/* 1) 紺地前提の明るい文字色 → 白地用へ */
.entry-content [style*="color:#fff" i],
.entry-content [style*="color:#ffffff" i] { color: var(--ink) !important; }
.entry-content [style*="color:#e6e6f2" i],
.entry-content [style*="color:#bcbee3" i],
.entry-content [style*="color:#f2f0ea" i] { color: var(--muted) !important; }

/* 白い罫線も見えなくなるのでアクセント色へ */
.entry-content [style*="border-left" i][style*="#fff" i] { border-left-color: var(--accent) !important; }

/* 2) 紺の面（単色・グラデーションとも）に載るものは白のまま */
.entry-content [style*="background:#2E3191" i],
.entry-content [style*="background:#232575" i],
.entry-content [style*="#232575" i],
.entry-content [style*="#1E2064" i] { color: #FFFFFF !important; }

.entry-content [style*="background:#2E3191" i] [style*="color" i],
.entry-content [style*="background:#232575" i] [style*="color" i],
.entry-content [style*="#232575" i] [style*="color" i],
.entry-content [style*="#1E2064" i] [style*="color" i] { color: #FFFFFF !important; }

/* 紺ブロック内の罫線は白へ戻す */
.entry-content [style*="#232575" i] [style*="border-left" i] { border-left-color: #FFFFFF !important; }

/* Anton 指定が残る見出しは新デザインのサンセリフへ寄せる */
.entry-content [style*="Anton" i] { font-family: var(--sans) !important; letter-spacing: .01em !important; }

/* =====================================================================
   フッターの CTA 帯（footer.php・全ページ共通）
   トップページは専用の contact セクションを持つため、そちらでは隠す。
   ===================================================================== */
body.home .cta-band { display: none; }

.cta-band { background: var(--panel); color: var(--ink); border-top: 1px solid var(--rule); }
.cta-band .wrap { max-width: 1120px; padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(40px, 5vw, 64px); }
.cta-title {
  font-family: var(--sans); font-size: clamp(23px, 3.4vw, 34px);
  font-weight: 700; letter-spacing: .01em; color: var(--ink); line-height: 1.5;
}
.cta-left svg, .cta-left img { width: 40px; height: 40px; }
.cta-band .btn,
.cta-band .btn-solid {
  background: var(--amber); border: 1px solid var(--amber); color: var(--on-amber);
  font-family: var(--sans); font-weight: 700; font-size: 14px; padding: 13px 28px;
}
.cta-band .btn:hover,
.cta-band .btn-solid:hover { background: var(--amber-deep); border-color: var(--amber-deep); color: #FFFFFF; }

/* ---- フッターの著作権表記 ----
   <small> はブラウザ既定で親の 0.83em になるため、
   12px の .wrap の中では 10px まで落ちていた。12px で固定する。 */
footer small,
.site-footer small { font-size: 12px; }