@charset "UTF-8";

/*--------------------------------------------------------
変数の設定
--------------------------------------------------------*/

/* =======================================
　ロゴ
======================================= */

/*------ ロゴ幅 -----*/
:root {
  /*max-width*/
  --logo-size: 240px;
}


/* =======================================
　カラーリング
======================================= */

/*------ カラーリング -----*/
:root {
  /*サイトのメインカラー*/
  --color-primary: #E60012;
  /* 明るいレッド */

  /*サイトのアクセントカラー①*/
  --color-accent01: #8e7f5b;
  /* 明るいスカイブルー */

  /*サイトのアクセントカラー②*/
  --color-accent02: #b99328;
  /* 中間のブルー */

  /*フッター背景色を濃いブルーに変更*/
  --color-footer-bg: #003366;
  /* 濃いネイビーブルー */
  /*フッターボトム背景色*/
  --color-footerbottom-bg: rgba(0, 0, 0, 0.7);
  /* 明るいネイビーブルー */
}


/*----- 文字色（メインエリア） -----*/
:root {
  /* 段落・文章 */
  --color-primary-font-main: #282828;

  /* リンク */
  --color-primary-link: #b99328;
}




/* =======================================
　フォントファミリー
======================================= */

:root {
  /* 英語（Roboto） */
  --type-primary-font-en-roboto: "Roboto", sans-serif;

  /* 英語（Outfit） */
  --type-primary-font-en-outfit: "Outfit", sans-serif;
}




/* =======================================
　見出し
======================================= */

/*----- フォントサイズ -----*/
:root {
  /*PC-h1フォントサイズ*/
  --size-h1: 40px;

  /*PC-h2フォントサイズ*/
  --size-h2: 32px;

  /*PC-h3フォントサイズ*/
  --size-h3: 24px;

  /*PC-h4フォントサイズ*/
  --size-h4: 20px;

  /*PC-h5フォントサイズ*/
  --size-h5: 18px;

  /*PC-h6フォントサイズ*/
  --size-h6: 16px;
}

/*----- 行間・字間 -----*/
:root {
  /*行間*/
  --lh-primary-heading: 1.1;

  /*字間*/
  --ls-primary-heading: 2px;
}

/*----- 文字色（メインエリア） -----*/
:root {
  --color-primary-heading: #3A3A3A;
}

/*----- 文字色（フッターエリア） -----*/
:root {
  /* フッター */
  --color-primary-heading-footer: #FFF;

  /* フッターボトム */
  --color-primary-font-footerbottom: #AAA;
}