/* ============================================================
   variables.css
   サイト全体で使用するCSS変数（デザイントークン）を管理する
   色・フォントなどを変更する際はここだけ修正すればOK
============================================================ */


:root {

  /* ----------------------------------------------------------
     カラートークン
     サイト全体で使う色をここで一元管理する
     色を変更したいときはここだけ修正すればOK
  ---------------------------------------------------------- */

  /* ブランドカラー */
  --color-primary:         #00A085; /* メインカラー（緑） */
  --color-secondary:       #D7F0E3; /* サブカラー（薄緑） */
  --color-accent:          #FE6F08; /* アクセントカラー（オレンジ） */

  /* 背景色 */
  --color-background-base: #FEFCF8; /* ページ背景 */
  --color-background-sub:  #F0FAF5; /* セクション背景など */
  --color-white:           #FFFFFF;

  /* テキスト色 */
  --color-text-heading:    #2A4A2F; /* 見出しテキスト */
  --color-text-body:       #3D3D3D; /* 本文テキスト */
  --color-text-caption:    #5B6B67; /* キャプションテキスト */

  /* 非活性（disabled）状態の色 */
  --color-disabled-bg:     #D3D1C7; /* 非活性背景 */
  --color-disabled-text:   #5F5E5A; /* 非活性テキスト */


  /* ----------------------------------------------------------
     フォントファミリー
  ---------------------------------------------------------- */
  --font-serif: 'Noto Serif JP', serif;     /* 見出し用 */
  --font-sans:  'Noto Sans JP', sans-serif; /* UI・本文用 */


  /* ----------------------------------------------------------
     テキストスタイル（PC）
     使い方：font-size・font-weight・line-height・font-family を
             セットで使う際の参考値。
             実際のCSSではこれらを個別プロパティで指定する。
             またはユーティリティクラス（下部参照）を使う。
  ---------------------------------------------------------- */

  /* display：48px / 700 / 140% / Serif */
  --text-pc-display-size:   48px;
  --text-pc-display-weight: 700;
  --text-pc-display-lh:     140%;
  --text-pc-display-family: var(--font-serif);

  /* heading-l：40px / 700 / 150% / Serif */
  --text-pc-heading-l-size:   40px;
  --text-pc-heading-l-weight: 700;
  --text-pc-heading-l-lh:     150%;
  --text-pc-heading-l-family: var(--font-serif);

  /* heading-m：32px / 700 / 150% / Serif */
  --text-pc-heading-m-size:   32px;
  --text-pc-heading-m-weight: 700;
  --text-pc-heading-m-lh:     150%;
  --text-pc-heading-m-family: var(--font-serif);

  /* heading-s：24px / 700 / 160% / Serif */
  --text-pc-heading-s-size:   24px;
  --text-pc-heading-s-weight: 700;
  --text-pc-heading-s-lh:     160%;
  --text-pc-heading-s-family: var(--font-serif);

  /* lead：20px / 500 / 200% / Sans */
  --text-pc-lead-size:   20px;
  --text-pc-lead-weight: 500;
  --text-pc-lead-lh:     200%;
  --text-pc-lead-family: var(--font-sans);

  /* body：18px / 400 / 175% / Sans */
  --text-pc-body-size:   18px;
  --text-pc-body-weight: 400;
  --text-pc-body-lh:     175%;
  --text-pc-body-family: var(--font-sans);

  /* small：16px / 700 / 175% / Sans */
  --text-pc-small-size:   16px;
  --text-pc-small-weight: 700;
  --text-pc-small-lh:     175%;
  --text-pc-small-family: var(--font-sans);

  /* caption：14px / 400 / 175% / Sans */
  --text-pc-caption-size:   14px;
  --text-pc-caption-weight: 400;
  --text-pc-caption-lh:     175%;
  --text-pc-caption-family: var(--font-sans);


  /* ----------------------------------------------------------
     テキストスタイル（SP）
  ---------------------------------------------------------- */

  /* display：28px / 700 / 140% / Serif */
  --text-sp-display-size:   28px;
  --text-sp-display-weight: 700;
  --text-sp-display-lh:     140%;
  --text-sp-display-family: var(--font-serif);

  /* heading-l：24px / 700 / 150% / Serif */
  --text-sp-heading-l-size:   24px;
  --text-sp-heading-l-weight: 700;
  --text-sp-heading-l-lh:     150%;
  --text-sp-heading-l-family: var(--font-serif);

  /* heading-m：20px / 700 / 150% / Serif */
  --text-sp-heading-m-size:   20px;
  --text-sp-heading-m-weight: 700;
  --text-sp-heading-m-lh:     150%;
  --text-sp-heading-m-family: var(--font-serif);

  /* heading-s：18px / 700 / 160% / Serif */
  --text-sp-heading-s-size:   18px;
  --text-sp-heading-s-weight: 700;
  --text-sp-heading-s-lh:     160%;
  --text-sp-heading-s-family: var(--font-serif);

  /* lead：16px / 500 / 200% / Sans */
  --text-sp-lead-size:   16px;
  --text-sp-lead-weight: 500;
  --text-sp-lead-lh:     200%;
  --text-sp-lead-family: var(--font-sans);

  /* body：16px / 400 / 175% / Sans */
  --text-sp-body-size:   16px;
  --text-sp-body-weight: 400;
  --text-sp-body-lh:     175%;
  --text-sp-body-family: var(--font-sans);

  /* small：14px / 700 / 175% / Sans */
  --text-sp-small-size:   14px;
  --text-sp-small-weight: 700;
  --text-sp-small-lh:     175%;
  --text-sp-small-family: var(--font-sans);

  /* caption：14px / 400 / 175% / Sans */
  --text-sp-caption-size:   14px;
  --text-sp-caption-weight: 400;
  --text-sp-caption-lh:     175%;
  --text-sp-caption-family: var(--font-sans);

}


/* ============================================================
   ユーティリティクラス（PC）
   HTMLに直接クラスを付けるだけでテキストスタイルが適用できる

   使い方例：
   <h2 class="text-pc-display">見出し</h2>
   <p class="text-pc-body">本文テキスト</p>
============================================================ */

.text-pc-display {
  font-family: var(--text-pc-display-family);
  font-size:   var(--text-pc-display-size);
  font-weight: var(--text-pc-display-weight);
  line-height: var(--text-pc-display-lh);
}

.text-pc-heading-l {
  font-family: var(--text-pc-heading-l-family);
  font-size:   var(--text-pc-heading-l-size);
  font-weight: var(--text-pc-heading-l-weight);
  line-height: var(--text-pc-heading-l-lh);
}

.text-pc-heading-m {
  font-family: var(--text-pc-heading-m-family);
  font-size:   var(--text-pc-heading-m-size);
  font-weight: var(--text-pc-heading-m-weight);
  line-height: var(--text-pc-heading-m-lh);
}

.text-pc-heading-s {
  font-family: var(--text-pc-heading-s-family);
  font-size:   var(--text-pc-heading-s-size);
  font-weight: var(--text-pc-heading-s-weight);
  line-height: var(--text-pc-heading-s-lh);
}

.text-pc-lead {
  font-family: var(--text-pc-lead-family);
  font-size:   var(--text-pc-lead-size);
  font-weight: var(--text-pc-lead-weight);
  line-height: var(--text-pc-lead-lh);
}

.text-pc-body {
  font-family: var(--text-pc-body-family);
  font-size:   var(--text-pc-body-size);
  font-weight: var(--text-pc-body-weight);
  line-height: var(--text-pc-body-lh);
}

.text-pc-small {
  font-family: var(--text-pc-small-family);
  font-size:   var(--text-pc-small-size);
  font-weight: var(--text-pc-small-weight);
  line-height: var(--text-pc-small-lh);
}

.text-pc-caption {
  font-family: var(--text-pc-caption-family);
  font-size:   var(--text-pc-caption-size);
  font-weight: var(--text-pc-caption-weight);
  line-height: var(--text-pc-caption-lh);
}


/* ============================================================
   ユーティリティクラス（SP）
============================================================ */

.text-sp-display {
  font-family: var(--text-sp-display-family);
  font-size:   var(--text-sp-display-size);
  font-weight: var(--text-sp-display-weight);
  line-height: var(--text-sp-display-lh);
}

.text-sp-heading-l {
  font-family: var(--text-sp-heading-l-family);
  font-size:   var(--text-sp-heading-l-size);
  font-weight: var(--text-sp-heading-l-weight);
  line-height: var(--text-sp-heading-l-lh);
}

.text-sp-heading-m {
  font-family: var(--text-sp-heading-m-family);
  font-size:   var(--text-sp-heading-m-size);
  font-weight: var(--text-sp-heading-m-weight);
  line-height: var(--text-sp-heading-m-lh);
}

.text-sp-heading-s {
  font-family: var(--text-sp-heading-s-family);
  font-size:   var(--text-sp-heading-s-size);
  font-weight: var(--text-sp-heading-s-weight);
  line-height: var(--text-sp-heading-s-lh);
}

.text-sp-lead {
  font-family: var(--text-sp-lead-family);
  font-size:   var(--text-sp-lead-size);
  font-weight: var(--text-sp-lead-weight);
  line-height: var(--text-sp-lead-lh);
}

.text-sp-body {
  font-family: var(--text-sp-body-family);
  font-size:   var(--text-sp-body-size);
  font-weight: var(--text-sp-body-weight);
  line-height: var(--text-sp-body-lh);
}

.text-sp-small {
  font-family: var(--text-sp-small-family);
  font-size:   var(--text-sp-small-size);
  font-weight: var(--text-sp-small-weight);
  line-height: var(--text-sp-small-lh);
}

.text-sp-caption {
  font-family: var(--text-sp-caption-family);
  font-size:   var(--text-sp-caption-size);
  font-weight: var(--text-sp-caption-weight);
  line-height: var(--text-sp-caption-lh);
}