/* ==========================================================================
   ChinaBox の外枠（変数・ヘッダー・フッター・.cb-wrap）2026-11-11 cb.css から分離
   新デザインのページは cb-chrome.css → cb.css の順に読む。
   2021〜2022年の旧ブログ記事・著者ページ（旧テーマ global.css で組まれたページ）は cb-chrome.css だけを読む。
   - 旧テーマは html{font-size:62.5%} のため、ここでは rem を使わず px で書く
   - 旧テーマの素の nav / footer 指定（スマホで nav{position:fixed;display:none} 等）を下の「旧テーマとの同居」で打ち消す
   - ヘッダーのHTMLは Setup/site_partials/chinabox/header.html、フッターは同 footer.html から書き込む（apply_partials.js）
   ========================================================================== */

:root {
  /* ブランド */
  --cb-coral: #EC6D5E;       /* 装飾・罫線・大きな数値のみ（対白3.04） */
  --cb-coral-txt: #C64D3F;   /* 通常サイズのCoral文字（対白4.63） */
  --cb-sumi: #231815;        /* 見出し */
  --cb-ink: #16283F;         /* 濃色モジュール（FAQ・フッター） */
  /* 操作 */
  --cb-blue: #004DA0;        /* 主要CTA・リンク・セカンダリ（形で区別） */
  --cb-blue-hover: #003D7F;  /* 共通ルールの3つの状態（2026-11-11） */
  --cb-blue-active: #003670;
  /* 背景・文字 */
  --cb-white: #FFFFFF;
  --cb-cool: #F5F7FC;
  --cb-paleblue: #BBDFF6;
  --cb-text: #1A1A1A;
  --cb-text2: #4A4A4A;
  --cb-text3: #4F4F4F;
  --cb-line: #D8DEE8;
  --cb-on-dark: #C9D3E0;     /* 濃色背景上の補助文字（対ink 10.6） */
  --cb-coral-tint: #FFF6F4;  /* 「御社」の行・アイコンの下地など、Coral系のごく淡い面 */
  --cb-coral-soft: rgba(236, 109, 94, .28);   /* 見出しのマーカー */
  --cb-coral-dot: rgba(236, 109, 94, .30);    /* ドット装飾 */
  --cb-shadow: 0 8px 28px rgba(22, 40, 63, .10);
  --cb-on-dark-line: rgba(255, 255, 255, .16); /* 濃色背景上の区切り線 */
  --cb-footer-bg: #1A1A1A;   /* フッター（既存サイトの黒） */
  --cb-footer-link: #B3B3B3; /* フッターのリンク（対#1A1A1A 8.6） */
  --cb-header-shadow: 0 0 10px rgba(31, 31, 31, .15);
  /* 寸法 */
  --cb-w: 1080px;
  --cb-gutter: 28px;
  --cb-header-h: 80px;      /* PC：1段80px（共通ルール・2026-11-11）。スマホ72px */
  --cb-radius: 4px;
  --cb-focus: 3px solid var(--cb-blue);
}

@media (max-width: 1023px) {
  :root { --cb-gutter: 20px; }
}

/* 旧テーマとの同居：要素名だけの指定（詳細度0,0,1）に勝ち、クラス指定には負けるように :where で書く */
:where(.cb-header, .cb-footer), :where(.cb-header, .cb-footer) *, :where(.cb-header, .cb-footer) *::before, :where(.cb-header, .cb-footer) *::after { box-sizing: border-box; }
:where(.cb-header, .cb-footer) ul, :where(.cb-header, .cb-footer) ol, :where(.cb-header, .cb-footer) p, :where(.cb-header, .cb-footer) figure { margin: 0; padding: 0; list-style: none; }
:where(.cb-header, .cb-footer) img { max-width: 100%; height: auto; vertical-align: bottom; }
nav:where(.cb-nav, .cb-footer__nav) { position: static; left: auto; bottom: auto; width: auto; background: none; }
nav:where(.cb-nav) { display: block; }
.cb-header.fixed { box-shadow: var(--cb-header-shadow); }
.cb-header :focus-visible, .cb-footer :focus-visible { outline: var(--cb-focus); outline-offset: 3px; }

.cb-wrap { max-width: calc(var(--cb-w) + var(--cb-gutter) * 2); margin: 0 auto; padding: 0 var(--cb-gutter); }
.cb-visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   ヘッダー
   -------------------------------------------------------------------------- */
/* 共通ルール（元月さんの数値表 Six_Sites_Current_vs_Target_Specs.docx「ChinaBox」章・2026-11-11 五月女決定）
   PC：1段・高さ80px。左ロゴ（by B.A.D入り・高さ60px）／ナビ15px太字・項目間に薄い縦線／右に問い合わせボタン（青・44px）。
   電話番号・言語アイコン・ブログアイコンは置かない（ブログはナビの項目）。
   畳む幅以下：ロゴ＋問い合わせアイコン＋メニュー（各44px・間8px）。スマホ（767px以下）は高さ72px・by B.A.Dなしのロゴ。
   HTMLは Setup/site_partials/chinabox/header.html から全ページに書き込む（apply_partials.js chinabox）＝ページを個別に直さない */
.cb-header { position: sticky; top: 0; z-index: 100; background: var(--cb-white); box-shadow: var(--cb-header-shadow); }
.cb-header__inner { display: flex; align-items: center; gap: 24px; height: var(--cb-header-h); max-width: 1200px; margin: 0 auto; padding: 0 24px; }
/* SVGの上下にブランドの安全余白が入っているため、見た目のロゴは約6割の高さになる */
.cb-header__logo { flex: none; display: block; margin-right: auto; line-height: 0; }
.cb-header__logo img { width: auto; height: 60px; max-width: none; }
.cb-nav__list { display: flex; align-items: center; }
.cb-nav__list > li { display: flex; align-items: center; }
.cb-nav__list > li + li::before { content: ""; width: 1px; height: 14px; margin: 0 14px; background: #DDE2E8; }
.cb-nav__list a {
  display: inline-flex; align-items: center; min-height: 44px; padding-top: 2px;
  font-size: 15px; font-weight: 700; line-height: 1.4; letter-spacing: .02em; color: var(--cb-sumi);
  text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent;
}
/* ホバー・いまのページ・キーボード：下線はブランドのCoral、文字は読める濃さのCoral（#EC6D5Eの文字は対白3.04で読みにくい） */
.cb-nav__list a:hover, .cb-nav__list a:focus-visible, .cb-nav__list a[aria-current="page"] { color: var(--cb-coral-txt); border-bottom-color: var(--cb-coral); }
.cb-header__cta {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border: 0; border-radius: var(--cb-radius);
  background: var(--cb-blue); color: var(--cb-white); font-size: 15px; font-weight: 700; line-height: 1.4; letter-spacing: .03em;
  text-decoration: none; white-space: nowrap; transition: background-color .15s;
}
.cb-header__cta:hover { background: var(--cb-blue-hover); }
.cb-header__cta:active { background: var(--cb-blue-active); }
.cb-header__ctaico { display: none; flex: none; }
.cb-menu-btn {
  display: none; flex: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--cb-radius);
  background: var(--cb-blue); color: var(--cb-white); cursor: pointer;
}
.cb-menu-btn:hover { background: var(--cb-blue-hover); }
.cb-menu-btn:active { background: var(--cb-blue-active); }
.cb-menu-btn .i-close, .cb-menu-btn[aria-expanded="true"] .i-open { display: none; }
.cb-menu-btn[aria-expanded="true"] .i-close { display: block; }

/* --------------------------------------------------------------------------
   フッター
   -------------------------------------------------------------------------- */
.cb-footer { font-size: 14px; }
.cb-footer__body { background: var(--cb-footer-bg); color: var(--cb-white); }
.cb-footer__main { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; max-width: 1056px; padding-top: 72px; padding-bottom: 72px; }
.cb-footer__brand { text-align: center; }
.cb-footer__brand > a { display: inline-block; line-height: 0; }
.cb-footer__brand img { width: 174px; height: auto; }
.cb-footer__company { margin-top: 26px; font-size: 20px; font-weight: 700; }
.cb-footer__company span { display: inline-block; font-size: 14px; font-weight: 400; }
.cb-footer address { margin-top: 10px; font-style: normal; line-height: 2; }
.cb-footer address a { display: inline-block; padding: 2px 0; color: var(--cb-white); }
.cb-footer__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.cb-footer__nav a { display: inline-block; padding: 4px 0; color: var(--cb-footer-link); text-decoration: none; }
.cb-footer__nav a:hover, .cb-footer__nav a[aria-current="page"] { color: var(--cb-white); text-decoration: underline; }
.cb-footer__nav > ul > li + li { margin-top: 4px; }
.cb-footer__sub li a::before { content: "›"; margin-right: 6px; color: var(--cb-coral); }
.cb-footer a:focus-visible { outline-color: var(--cb-white); }
.cb-footer__copy { margin: 0; padding: 18px 0; background: var(--cb-white); color: var(--cb-text); font-size: 12px; text-align: center; }

/* ヘッダー：畳む幅は「ロゴ＋ナビ＋ボタンの必要幅＋スクロールバー17px」の実測で決める（cb.js の値と同じにする） */
@media (max-width: 1180px) {
  .cb-header__inner { gap: 8px; }
  .cb-header__cta { width: 44px; padding: 0; }
  .cb-header__ctaico { display: block; }
  .cb-header__ctatxt { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .cb-menu-btn { display: inline-flex; }
  .cb-menu-btn:focus-visible { outline-color: var(--cb-sumi); }
  /* JSが動くときだけ畳む（JSが無ければナビはヘッダーの下に出したまま＝行き止まりを作らない） */
  .cb-header__inner { flex-wrap: wrap; height: auto; min-height: var(--cb-header-h); }
  .cb-nav { order: 5; width: 100%; }
  .js .cb-header__inner { flex-wrap: nowrap; height: var(--cb-header-h); }
  /* メニューはヘッダーの真下に縦に開く。白地・左右24px・1項目56px以上・区切り線1px #E5E5E5。長いときはパネルだけスクロール */
  .js .cb-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%; padding: 0 24px;
    background: var(--cb-white); border-top: 1px solid #E5E5E5; box-shadow: 0 12px 24px rgba(22, 40, 63, .12);
    max-height: calc(100vh - var(--cb-header-h)); max-height: calc(100dvh - var(--cb-header-h)); overflow-y: auto; overscroll-behavior: contain;
  }
  .js .cb-nav.is-open { display: block; }
  .cb-nav__list { display: block; }
  .cb-nav__list > li + li { border-top: 1px solid #E5E5E5; }
  .cb-nav__list > li + li::before { display: none; }
  .cb-nav__list a { display: flex; width: 100%; min-height: 56px; padding: 0; border-bottom: 0; }
  .cb-nav__list a:hover, .cb-nav__list a:focus-visible, .cb-nav__list a[aria-current="page"] {
    border-bottom: 0; text-decoration: underline; text-decoration-color: var(--cb-coral); text-underline-offset: 6px; text-decoration-thickness: 2px;
  }
  .cb-nav__list a:focus-visible { outline-offset: -3px; }
}
@media (max-width: 767px) {
  :root { --cb-header-h: 72px; }
  .cb-header__logo img { height: 52px; }
}
@media (max-width: 1023px) {
  .cb-footer__main { grid-template-columns: 1fr; gap: 40px; padding-top: 56px; padding-bottom: 56px; }
  .cb-footer__nav { max-width: 420px; width: 100%; margin: 0 auto; }
}
}

/* B.A.Dの他サービス一覧（Setup/service_links から生成。新旧フッター共通の見た目）2026-09-24 */
.bad-svc{margin-top:40px;padding-top:24px;border-top:1px solid rgba(255,255,255,.18)}
.bad-svc__ttl{margin:0 0 6px;font-size:13px;font-weight:700;color:#FFFFFF}
.bad-svc ul{display:flex;flex-wrap:wrap;gap:0 24px;margin:0;padding:0;list-style:none}
.bad-svc a{display:inline-block;padding:4px 0;font-size:13px;line-height:1.6;color:#B3B3B3;text-decoration:none}
.bad-svc a:hover{color:#FFFFFF;text-decoration:underline}
.cb-footer .bad-svc{max-width:1056px;margin-top:-32px;padding-bottom:48px}