@charset "UTF-8";
/* ==========================================================================
   トークン（色・角丸・影）
   --------------------------------------------------------------------------
   値は Figma「マニュアルサイト」のカラースタイルから取っている。
   他のCSSファイルには hex を書かず、必ず var() 経由で参照する。

   変数名は lsitemedia の tokens-brand.css と揃えてある
   （検索サジェストの CSS をそのまま流用できるようにするため）。
   ========================================================================== */
:root{
  /* --- 青（Figma「青」） ------------------------------------------------- */
  --c-brand:       #1677ff;
  --c-brand-dark:  #0b5ed7;   /* hover */
  --c-brand-tint:  #ebf3ff;   /* トップ上部のグラデーションの始点 */
  --c-brand-pale:  #f0fafd;   /* ページ番号の現在地 */
  --c-hover:       #f3f8ff;   /* 一覧の行・候補にマウスを乗せたときの地 */

  /* --- 文字（Figma「テキスト」「グレー」） ------------------------------ */
  --c-ink:         #222222;
  --c-ink-3:       #6f6f78;   /* 補足の文字。#999 は白地で読みにくいので文字には使わない */
  --c-ink-4:       #999999;   /* プレースホルダー・装飾 */

  /* --- 面・線（Figma「グレー2」「グレー_背景」） ------------------------ */
  --c-bg:          #ffffff;
  --c-bg-sub:      #f5f5f9;
  --c-line:        #dddde6;
  --c-line-strong: #cfd3de;
  --c-line-soft:   #f5f5f9;   /* お知らせカードの行区切り */

  /* --- ラベル・マーカー ----------------------------------------------- */
  --c-label:       #a7b3c5;   /* カテゴリーラベルの地（文字は白） */
  --c-on-dark:     #ffffff;
  --c-marker:      #f7cf2e;   /* 検索語のハイライト */

  /* --- 影（Figma「影」） ---------------------------------------------- */
  --shadow-card:   0 4px 14px rgba(207, 211, 222, .45);

  /* --- 角丸 ------------------------------------------------------------ */
  --radius:        8px;
  --radius-card:   10px;
  --radius-pill:   100px;

  /* --- アイコン（mask 用の抜き型） ------------------------------------
     色は background-color で塗るので、SVG の中の black は形を作るためだけのもの。
     形は Figma の Search / Right / Menu / Close コンポーネントに合わせてある。 */
  --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M16.99 15.88l-5.22-5.22a6.03 6.03 0 1 0-1.1 1.11l5.21 5.22a.16.16 0 0 0 .23 0l.88-.88a.16.16 0 0 0 0-.23zM6.99 11.49a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9z'/%3E%3C/svg%3E");
  --icon-right:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M9.4 5.66 3.36.95a.11.11 0 0 0-.17.08v1.04c0 .07.03.13.08.17L8.09 6 3.27 9.77a.2.2 0 0 0-.08.16v1.04c0 .09.1.14.17.08L9.4 6.34a.43.43 0 0 0 0-.68z'/%3E%3C/svg%3E");
  --icon-menu:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M1.5 3.5h15M1.5 9h15M1.5 14.5h15'/%3E%3C/svg%3E");
  --icon-close:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M5 5l14 14M19 5 5 19'/%3E%3C/svg%3E");
}