@charset "utf-8";
/* CSS Document */

/*
Theme Name: ESRIジャパン（サポートサイト用子テーマ）
Version: 1
Description: esrijテーマはCSSやJavaScriptがルート上のcommonフォルダーに配置されているため、テーマファイル内に移動してパスを変更した。
Author: Kohsuke Hada
Template: esrij
*/

/* T42: パンくず統一に伴いバナー前提のmargin-topを削除
   旧: margin-top: 175px !important;（バナー画像の下に配置するため）
   新: サポートナビ→パンくず→コンテンツの流れに変更 */

/* サポートサイト カラー */
:root {
  /* ---- メインカラーオーバーライド（T378 / 2026-08 再デザイン: Green→Blue へ復帰）----
     親テーマ common/css/root.css はもともと Blue がメイン。子テーマが Green に
     上書きしていただけなので、再デザインでは「上書きを Blue に戻す」のが本筋。
     どの階調をどこに当てるかは下の意味トークン（--ui-accent 系）を使うこと。 */
  --color-main-exlight:var(--col-Blue-exlight);
  --color-main-lighter:var(--col-Blue-lighter);
  --color-main-light:var(--col-Blue-light);
  --color-main-dark:var(--col-Blue-darker);
  --color-main-darker:var(--col-Blue-darker);
  --color-main-exdark:var(--col-Blue-exdark);
  --color-main-slider:var(--col-Blue-darker2);

  /* ---- メインカラー ショートハンド（design-guide準拠）---- */
  --main-exlight:var(--col-Blue-exlight);
  --main-lighter:var(--col-Blue-lighter);
  --main-light:var(--col-Blue-light);
  --main-dark:var(--col-Blue-darker);
  --main-darker:var(--col-Blue-darker);
  --main-exdark:var(--col-Blue-exdark);

  /* ============================================================
     T378: 再デザイン 2026-08 の意味トークン
     仕様の正 = docs/ui-structure/design-guide-2026-08_大滝様ご回答_20260816.md
     ------------------------------------------------------------
     色の当て先は「階調」ではなく「用途」で決まっている（同 2-1）。
     hex を直接書かず、必ず下のトークンを経由すること。
     ============================================================ */

  /* 2-1: ボタンの地・枠 / カードの枠 / お知らせの「＋」/ ページネーション */
  --ui-accent:var(--col-Blue-darker);         /* #00619B */
  /* 2-1: 見出しの罫線・帯 / アイコン / タブの選択 */
  --ui-accent-strong:var(--col-Blue-exdark);  /* #034B77 */
  /* 2-1: ホバー（通常が --ui-accent なので、濃くなる方向へ振る） */
  --ui-accent-hover:var(--col-Blue-exdark);   /* #034B77 */
  /* 淡い面（アイコンの円の地・選択中の行など） */
  --ui-accent-tint:var(--col-Blue-exlight);   /* #DFF3FF */
  /* 影・フォーカスリング用（rgba() は hex 変数を受けられないため成分で持つ） */
  --ui-accent-rgb:0, 97, 155;                 /* #00619B */

  /* 4-10: 角丸は 5px に統一（2026-06-26 町田様「本体サイトのデザインに準ずる」）。
     親テーマ common/ は 5px 系と 10px 系の 2 系統を持つため、面の大きい箱で
     親に寄せる必要が出た場合のみ --radius-lg を使う。 */
  --radius:5px;
  --radius-lg:10px;

  /* 3-1: 文字サイズは 7 段階のみ（12/14/16/18/20/24/28） */
  --fs-12:12px;
  --fs-14:14px;
  --fs-16:16px;
  --fs-18:18px;
  --fs-20:20px;
  --fs-24:24px;
  --fs-28:28px;

  /* 4-5 / D77: 検索ハイライト。タイトル・本文とも同じ色を使う */
  --highlight-bg:#fff8c3;

  /* T391: 追従（sticky）する要素と、その上のクローム（親テーマの固定ヘッダー＋
     追従グローバルナビ＋WP管理バー）との間に空ける余白。
     クローム側の下端は support.js が実測して --esrij-sticky-top に配信するため、
     追従要素は必ず「--esrij-sticky-top ＋ この余白」で位置を決めること。
     D58① で顧客が求めた「10px 程度のマージン」がこの値の由来。
     support.js の着地オフセット計算もこの変数を読むので、値を変えれば
     ページ内リンクの着地位置が自動で追随する（片方だけ直す事故を防ぐ）。 */
  --esrij-sticky-gap:10px;

  /* ---- theme.json パレット（ブロックエディタ用 16色）---- */
  --tp-red-light:var(--col-Red-exlight);
  --tp-blue-light:var(--col-Blue-exlight);
  --tp-bluegreen-light:var(--col-GreenBlue-exlight);
  --tp-green-light:var(--col-Green-exlight);
  --tp-yellowgreen-light:var(--col-YellowGreen-exlight);
  --tp-gray-light:var(--col-Gray-exlight);
  --tp-red-dark:var(--col-Red-darker);
  --tp-blue-dark:var(--col-Blue-darker);
  --tp-bluegreen-dark:var(--col-GreenBlue-darker);
  --tp-green-dark:var(--col-Green-darker);
  --tp-yellowgreen-dark:var(--col-YellowGreen-darker);
  --tp-gray-dark:var(--col-Gray-darker);
  --tp-paleblue:#DBE6E6;
  --tp-blue-darker:var(--col-Blue-exdark);
  --tp-bluegreen-darker:var(--col-GreenBlue-exdark);
  --tp-green-darker:var(--col-Green-exdark);

  /* ---- リンク・テキスト ---- */
  --link-color:var(--col-Blue-exdark);
  --text-color:#333333;
  --text-light:#666666;
  --text-muted:#888888;

  /* ---- グレースケール ショートハンド ---- */
  --gray-exlight:var(--col-Gray-exlight);
  --gray-lighter:var(--col-Gray-lighter);
  --gray-light:var(--col-Gray-light);
  --gray-dark:var(--col-Gray-dark);
  --gray-darker:var(--col-Gray-darker);
  --gray-exdark:var(--col-Gray-exdark);

  /* ---- UI用 ---- */
  --border-color:#dee2e6;
  --bg-light:#f8f9fa;
  --danger:#dc3545;
  --warning-bg:#fff3cd;
  --warning-border:#ffc107;
  --info-bg:#d1ecf1;
  --info-border:#17a2b8;

  --col-GB-lightblue:#DBE6E6;
}