@charset "UTF-8";
/* =============================================================================
   column-tokens.css — 温かみ版トークン（2026-09-28 本番反映。元: column/mockup-warm/css/column-tokens-warm.css）
   wp-column-kit

   ここに書いた値だけで、コラム全画面の配色・書体が決まります。
   column.css は色を1つも持っておらず、すべてこのファイルの変数を参照します。
   デザイン変更が発生したら、このファイルの値を差し替えるだけで済みます。

   ■ 初期値について
     出荷時は「無彩色＋青1色」のニュートラル配色です。そのままでも成立しますが、
     必ず導入先のデザインに合わせて置き換えてください。
     値の決め方は SPEC.md「トンマナの当て方」を参照。
     nexus-fa（元実装）の実値は column-tokens.sample.css にあります。

   ■ 注意
     - 読み込み順は tokens → scaffold → column → skin。
     - クラシックエディタのビジュアルタブは iframe のため :root が届きません。
       ここを変更したら column-editor.css の直値も同じ値に直してください。
     - コントラスト比の必要水準：本文 4.5:1 以上／大きい文字・ピル 3:1 以上。
   ========================================================================== */

:root {

  /* --- 主色 -----------------------------------------------------------------
     サイトのブランドカラー。リンク・カテゴリ現在地・目次の連番・見出しの罫線・
     フォーカスリングなど、コラム内で最も多く出る色です（column.css で19箇所）。 */
  --col-accent:         #B8505A;
  /* 主色の濃い版。目次タイトル・strong に使います。 */
  --col-accent-dark:    #8E3A43;
  /* 濃い面の背景。コードブロック（pre）と「コピーしました」トースト。
     この上には --col-bg の文字が載るので、十分に暗い色にしてください。 */
  --col-accent-deep:    #5A3A3A;
  /* 矢印を載せる円の地色。前後記事ナビ・シェアボタン・
     ページャの前へ／次へ・「記事一覧を見る」ボタン。 */
  --col-accent-deep2:   #DE7680;

  /* --- アクセント（差し色）---------------------------------------------------
     カテゴリピルの背景など、主色とは別に「目を引かせる」色。
     主色が無彩色寄りのサイトでは、CTAボタンの色などから取ってください。 */
  --col-marker:         #FDE7C8;
  /* マーカー下線（em / i）とカテゴリピルのホバー。--col-marker より一段濃く。 */
  --col-marker-strong:  #F8C98A;

  /* --- グラデーション -------------------------------------------------------
     見出しの前に置く小さな円、ラベルの装飾に使います。
     グラデーションを持たないサイトは、単色を2回書けば実質ベタ塗りになります。 */
  --col-gradient:       linear-gradient(135deg, #F4A452 0%, #DE7680 100%);

  /* --- 背景 -----------------------------------------------------------------*/
  --col-bg:             #FFFFFF;   /* 基本背景・カード地・現在ピルの文字色 */
  --col-bg-alt:         #FDF3E7;   /* 補足ボックス（グレー）の背景 */
  --col-bg-soft:        #FFFAF2;   /* 目次の背景・引用・アイキャッチ未設定時 */
  --col-bg-soft2:       #FDF0E4;   /* 副次的な淡色背景 */

  /* --- 罫線 -----------------------------------------------------------------*/
  --col-line:           #F0E2D0;   /* 見出し下・カード区切り・hr */
  --col-line-strong:    #E5CFB5;   /* 一段強い罫線 */

  /* --- 文字 -----------------------------------------------------------------*/
  --col-text:           #333333;   /* 本文・見出し・カードタイトル */
  --col-text-sub:       #6E625A;   /* 日付・抜粋・キャプション */
  --col-text-mute:      #5E5450;   /* 引用の本文（--col-bg-soft の上に乗る） */

  /* --- 状態色 ---------------------------------------------------------------*/
  --col-danger:         #C8412F;   /* 「ご注意」ボックスの枠と見出し */

  /* --- 影・オーバーレイ -----------------------------------------------------*/
  --col-shadow:         rgba(180, 120, 80, .14);      /* カテゴリピルの影 */
  /* 表の右端フェードの「透明側」。--col-bg と同じ色の alpha 0 にすること。
     transparent と書くと一部ブラウザで灰色に転ぶため明示します。 */
  --col-bg-fade:        rgba(255, 255, 255, 0);

  /* --- アイコン -------------------------------------------------------------
     すべて data URI の SVG で、外部ファイルに一切依存しません。
     -sub / -external / -check の3つは CSS mask として使われるため、
     SVG 内の色は無視され、隣の background-color（トークン）が実際の色になります。
     つまり配色を変えれば自動で追従します。差し替えるときは単色の SVG にしてください。
     -on-dark は色付きの円の上に載るので、色を焼き込んであります。 */

  /* 目次の h3 項目に付く小さな矢印（色は --col-text-sub に追従） */
  --col-icon-arrow-sub:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10'%3E%3Cpath d='M0.354 9.354L4.854 4.854L0.354 0.354' fill='none' stroke='%23000' stroke-miterlimit='10'/%3E%3C/svg%3E");
  /* 本文中の外部リンクに付くアイコン（色は --col-accent に追従） */
  --col-icon-external:       url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M5.333 0V1H1V11H11V6.667H12V12H0V0H5.333ZM12 0V4.667H11V1.733L5 7.667L4.333 7L10.267 1H7.333V0H12Z' fill='%23000'/%3E%3C/svg%3E");
  /* 「この記事のポイント」ボックスの見出しに付くチェック（色は --col-accent に追従）
     evenodd で円からチェックを抜いているため、チェック部分は下地の色になります。 */
  --col-icon-check:          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cpath fill-rule='evenodd' d='M7.4993 14.9986C11.641 14.9986 14.9986 11.641 14.9986 7.4993C14.9986 3.35755 11.641 0 7.4993 0C3.35755 0 0 3.35755 0 7.4993C0 11.641 3.35755 14.9986 7.4993 14.9986ZM5.8499 12.5566L2.51172 9.00457L3.66383 7.92139L5.82176 10.2186L11.6921 3.66602L12.8681 4.72107L5.8499 12.5566Z' fill='%23000'/%3E%3C/svg%3E");
  /* 前後記事ナビ・ページャ・ボタンの矢印。--col-accent-deep2 の濃い円に載るので白。 */
  --col-icon-arrow-on-dark:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cpath d='M6.569 10L9.069 7.5L6.569 5' fill='none' stroke='%23fff' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* --- 画像 -----------------------------------------------------------------*/
  /* アイキャッチ未設定のカードに薄く出るマーク。
     導入先のロゴ（PNG/SVG のパスでも data URI でも可）に差し替えると据わりが良くなります。
     【いばらき里親navi】新ロゴ（里親いばらき）のシンボル部分。元: Desktop/logo.svg の左側の図形 */
  --col-noimage-mark:        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -2 90 83'%3E%3Ccircle fill='%23de7680' cx='17.25' cy='11.54' r='4.69'/%3E %3Ccircle fill='%23f4a452' cx='34.86' cy='4.69' r='4.69'/%3E %3Ccircle fill='%23bb8dbe' cx='71.92' cy='17.64' r='4.69'/%3E %3Ccircle fill='%239db867' cx='56.1' cy='6.85' r='4.69'/%3E %3Ccircle fill='%23f4a452' cx='52.4' cy='43.84' r='1.79'/%3E %3Ccircle fill='%23f4a452' cx='65.59' cy='45.57' r='1.79'/%3E %3Cpath fill='%23f4a452' d='M61.82,50.53c.25-.38.36-.54.73-.54s.67.3.67.67c0,.07-.01.13-.03.19h0s0,.01-.01.03c-.01.03-.02.06-.04.08-.24.5-1.4,2.47-4.96,2.52-3.57.05-4.82-2.95-5.09-3.77-.03-.07-.04-.11-.05-.16,0-.03-.01-.09-.01-.12,0-.37.3-.67.67-.67s.55.23.66.57c0,0,.93,2.92,3.94,2.79,2.73-.12,3.52-1.62,3.52-1.62Z'/%3E %3Cpath fill='%23f4a452' d='M54.98,67.8l-1.9.4s.34,1.06-.19,2.21-3.05,5.85-8.78,6.38c-5.73.53-5.98-1.62-6.19-2.21s.03-2.77,3.05-4.08c3.02-1.31,10.21-2.77,14.97-4.01,4.76-1.24,9.49-3.77,11.61-5.04s6.82-5.14,9.06-8.62c2.24-3.49,3.98-7.75,4.36-9.8.37-2.05.65-6.91-.75-9.74-1.4-2.83-5.79-4.95-9.55-3.64-3.77,1.31-5.98,3.3-7.1,4.92-1.12,1.62-1.75,2.46-1.75,2.46-.22.41-.48.22-.64,0-.09-.14-2.07-3.04-4.93-4.26s-6.69-1.56-9.87.72c-3.17,2.27-4.89,6.01-4.86,9.24.03,3.24-.09,6.51,1.74,10.79,1.84,4.28,2.8,5.37,3.33,6.08s3.92,4.45,4.23,4.76l1.99-.62s-3.49-3.98-4.23-5.32-2.74-5.1-3.21-7c-.47-1.9-.96-4.45-1-6.01s.58-5.24,1.56-6.63c.6-.85,1.09-2.2,3.73-3.14,2.3-.82,4.17-.89,6.22,0s3.73,2.43,4.58,3.42c.84,1,1.32.73,1.65.59.35-.14.93-1.18,1.46-1.71s2.46-2.86,5.38-4.14c2.93-1.28,5.45-.53,5.98-.03.53.5,2.52,1.77,2.58,4.7.06,2.93-.4,7.44-2.61,10.83-2.21,3.39-5.7,7.35-7.55,8.62-1.85,1.28-6.73,4.23-8.76,5.04-2.02.81-7.94,2.49-8.65,2.68s-5.76,1.56-6.75,1.87c-1,.31-3.92,1.53-4.92,2.24s-2.15,2.12-2.37,2.83-.4,2.12,0,3.14c0,0,.12.44.47.96s1.28,1.34,2.15,1.68,1.56.81,3.67.81c2.33,0,5.6-1.03,6.22-1.34s3.11-2.12,3.92-2.96,1.93-2.55,2.12-3.05.5-1.81.56-2.52-.06-1.49-.06-1.49Z'/%3E %3Cpath fill='%23de7680' d='M60.25,26.66c.2.57.26,1.09.83,1.15s.72-.4.74-.77-.23-1.83-.49-2.58c-.26-.74-1.75-3.78-3.44-5.1-1.69-1.32-3.47-2.92-7.85-3.67-4.38-.74-8.62.77-11,2.21-2.38,1.43-5.7,4.5-6.84,6.1-1.15,1.6-4.04,6.04-4.73,7.93s-.69,2.15-.72,2.32-.06.46-.29.52-.26-.32-.29-.6-2.13-4.97-3.41-6.64c-.46-.6-3.15-3.87-6.64-5.1s-6.96-1.09-9.94.37c-2.98,1.46-4.27,4.27-4.64,4.95s-1.32,3.44-1.46,4.84c-.14,1.4-.14,3.67,0,5.3.14,1.63,1.29,5.73,1.78,7.27.49,1.55,3.26,6.13,3.92,7.02s4.73,6.13,7.42,8.19c2.69,2.06,7.53,5.36,10.77,6.96,3.24,1.6,7.1,3.18,8.13,3.64s2.95,1.12,2.95,1.12c0,0,.46-1.23,1-1.78s1.2-1.06,1.2-1.06c0,0-4.75-1.98-6.93-3.15-2.18-1.17-4.35-2.39-5.53-3.02-1.17-.63-7.45-5.01-8.62-6.21s-4.81-4.5-6.1-6.36-4.27-6.59-4.98-10c-.72-3.41-.54-6.76-.06-8.62s2.39-4.51,3.66-5.07c.91-.4,2.22-1.25,5.53-.57,3.11.64,5.58,3.18,6.3,4.12.72.95,2.43,3.38,3.06,4.81.63,1.43,1.35,3.84,1.55,4.35s.57.95,1.23,1.09.95-.03,1.35-.29.63-1.09.74-1.58,1.87-4.98,2.69-6.44c.26-.46,2.03-3.61,2.81-4.55.77-.95,3.52-4.1,4.55-4.78s3.35-2.3,5.01-2.75c1.26-.34,4.27-1.2,6.84-.86,2.58.34,4.47,1.26,5.7,2.15,1.23.89,2.92,2.55,3.26,3.32s.89,1.82.89,1.82Z'/%3E%3C/svg%3E");

  /* --- 書体 -----------------------------------------------------------------
     英字：日付・目次の連番・PREV/NEXT・ページ番号に使う。
     和文：本文まわり。導入先が読み込んでいるフォントに合わせてください。
     フォントを追加読み込みしない場合は、フォールバックだけでも成立します。 */
  --col-font-en:        "Radio Canada", "Barlow", "Helvetica Neue", Arial, sans-serif;
  --col-font-jp:        "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
                        "Yu Gothic", Meiryo, sans-serif;

  /* --- 温かみ版で追加 ------------------------------------------------------- */
  --col-point:          #6BAF31;
  --col-point-text:     #4A7F1F;
  --col-point-bg:       #F3F8EC;
  --col-cta:            #F29100;
  --col-radius-s:       12px;
  --col-radius-m:       20px;
  --col-shadow-card:    0 4px 16px var(--col-shadow);
  /* ロゴ5色のドット列（直径6px・間隔6px、60x6 で横リピート可） */
  --col-dots:           url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='6' viewBox='0 0 60 6'%3E%3Ccircle cx='3' cy='3' r='3' fill='%23de7680'/%3E%3Ccircle cx='15' cy='3' r='3' fill='%23f4a452'/%3E%3Ccircle cx='27' cy='3' r='3' fill='%23d7c454'/%3E%3Ccircle cx='39' cy='3' r='3' fill='%239db867'/%3E%3Ccircle cx='51' cy='3' r='3' fill='%23bb8dbe'/%3E%3C/svg%3E");
  /* 日付の前のカレンダー（mask 用・色は background-color に追従） */
  --col-icon-calendar:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
}