@charset "UTF-8";
/* ============================================================
   スマステ株式会社 専用テーマ  設計の決まり（トークン）
   版0.2.0（工程6-2で引き上げ）
   ------------------------------------------------------------
   色・文字の大きさ・余白・字間・行間・角の丸み・書体は、すべてここで定義する。
   ほかのCSSファイルでは、生の値を書かず必ず var(--◯◯) を参照すること。
   ============================================================ */

:root{

  /* --- 色（8色。工程6-1から変更なし） --- */
  --c-primary:      #D51B26;  /* 主色：ロゴ・欧文の小見出し・番号・ボタン・見出し下の短い罫 */
  --c-primary-deep: #8E1119;  /* 濃い赤：小さな文字・リンク */
  --c-primary-pale: #FBEEEF;  /* 淡い赤：今回は面としては使わない */
  --c-text:         #1B1D1F;  /* 本文の文字 */
  --c-text-sub:     #4A4D50;  /* 補足の文字 */
  --c-text-weak:    #8A8D90;  /* さらに薄い文字（明度差が足りないため文字には使わない。線と図にのみ使用） */
  --c-rule:         #E3E1DA;  /* 罫線 */
  --c-bg:           #FFFFFF;  /* 背景 */

  /* --- 文字の大きさ（8段階・スマートフォンの値） --- */
  --fs-1: 40px;   /* 主見出し（最初の画面のキャッチコピー） */
  --fs-2: 32px;
  --fs-3: 28px;   /* ページの題名 */
  --fs-4: 22px;   /* 区切りの見出し */
  --fs-5: 18px;   /* 小見出し・導入文 */
  --fs-6: 16px;   /* 本文（下限16px） */
  --fs-7: 15px;   /* 副次の文字 */
  --fs-8: 13px;   /* 補足・欧文の小さな見出し（下限13px） */

  /* --- 太さ（2種類のみ。極太は使わない） --- */
  --fw-body: 400;
  --fw-head: 500;

  /* --- 余白（11段階。これ以外は使わない） --- */
  --sp-1:    8px;
  --sp-2:   16px;   /* スマートフォンの左右の余白 */
  --sp-3:   24px;
  --sp-4:   32px;
  --sp-5:   48px;
  --sp-6:   64px;   /* 区切りの上下（スマートフォン・最小） */
  --sp-7:   96px;   /* 区切りの上下（スマートフォン・最大） */
  --sp-8:  128px;
  --sp-9:  160px;   /* 区切りの上下（パソコン・最小） */
  --sp-10: 200px;
  --sp-11: 240px;   /* 区切りの上下（パソコン・最大） */

  /* --- 区切りの上下の余白（画面の大きさで持ち替える） --- */
  --sp-section:     var(--sp-6);   /* 標準の区切り */
  --sp-section-lg:  var(--sp-7);   /* ゆったりした区切り */

  /* --- 字間 --- */
  --ls-head:    0.03em;   /* 主見出しと見出し */
  --ls-eyebrow: 0.28em;   /* 欧文の小さな見出し（SERVICE など） */
  --ls-body:    0.01em;   /* 本文 */

  /* --- 行間 --- */
  --lh-head: 1.5;   /* 見出し */
  --lh-body: 2.0;   /* 本文 */

  /* --- 角の丸み（2種類のみ。完全な丸は使わない） --- */
  --r-0: 0;
  --r-1: 4px;

  /* --- 線の太さ（1ピクセルは使わない） --- */
  --bw-hair:   0.5px;   /* 罫線はすべてこの極細 */
  --bw-accent: 2px;     /* 見出し下の短い赤罫と、操作中の枠 */

  /* --- 書体（丸みのある書体は使わない） ---------------------------
     欧文は Inter（テーマ内で配信）。
     和文はヒラギノ角ゴシック → 游ゴシック → Noto Sans JP の順。
     system-ui は和文の指定より後ろに置くこと。前に置くと、Windowsでは
     system-ui（Segoe UI）が和文も引き受けてしまい、指定した書体（游ゴシック）
     ではなく Yu Gothic UI で表示される。工程6-3で実測して判明したため直した。
     -------------------------------------------------------------- */
  --ff-base: "Inter", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
             "Yu Gothic Medium", "Yu Gothic", "YuGothic",
             "Noto Sans JP", system-ui, sans-serif;

  /* --- 幅 --- */
  --w-page: 1200px;   /* ページ全体の最大幅 */
  --w-text:  720px;   /* 文章が続く部分の最大幅 */

  /* --- ロゴの高さ（余白の値をそのまま使う） --- */
  --logo-h: var(--sp-5);   /* 48px */

  /* --- 動き（動きを減らす設定のときは0にする） --- */
  --motion-shift: var(--sp-2);   /* 現れるときに動く距離 16px */
  --motion-time:  0.7s;          /* 現れるのにかける時間 */
}

/* ============================================================
   切り替え幅は2つだけ（いずれも実測して決定。工程6-1 報告書 第4章）
     768px  … 文字の大きさ・余白・段組み（この下がスマートフォンの値）
     1280px … ヘッダーのメニューを横並びにする（layout.css・工程6-3で実測し直した）
   ============================================================ */
@media (min-width: 768px){
  :root{
    --fs-1: 72px;   /* 主見出し */
    --fs-2: 56px;
    --fs-3: 44px;   /* ページの題名 */
    --fs-4: 32px;   /* 区切りの見出し */
    --fs-5: 24px;   /* 小見出し・導入文 */
    --fs-6: 18px;   /* 本文 */
    --fs-7: 16px;
    --fs-8: 13px;   /* 補足・欧文の小さな見出し */

    --sp-section:    var(--sp-9);    /* 160px */
    --sp-section-lg: var(--sp-11);   /* 240px */

    --logo-h: var(--sp-6);   /* 64px */
  }
}

/* ============================================================
   端末側で「動きを減らす」設定をしている場合は、いっさい動かさない
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  :root{
    --motion-shift: 0;
    --motion-time: 0s;
  }
}