@charset "UTF-8";

/* =======================================================================

  Variables.css

======================================================================= */


:root {

  /* =======================================================================
    テンプレート色
  ======================================================================= */

  /* テンプレート系設定 */
  --color-error: #D80707;
  --color-main: #000;
  --color-bg-main: #f8f8f8;
  --color-font: #000;
  --color-attention: #D80707;
  --color-primary: #58B8e2;
  --color-warning: #D80707;

  /* ユーティリティー系　（案件別色など） */
  /* プロパティ設定の名前的に　--color-色名で */

  --color-black: #000;
  --color-white: #fff;
  --color-red: #D80707;
  --color-blue: #58b8e2;
  --color-green: #055818;
  --color-orange: #d67936;
  --color-yellow: #e5dc09;

  /* Grey Color */
  --color-white-grey: #fafafa; /* 薄いグレー */
  --color-white-smoke: #f8f7f7;
  --color-silver-white: #efefef;
  --color-very-light-grey: #e3e3e3;
  --color-light-grey: #c7c7c7;
  --color-silver: #bfbcbc; /* グレー */
  --color-middle-grey: #aaa;
  --color-grey: #7e7e7e;
  --color-dark-grey: #7c7b7b; /* 濃いグレー */

 
  /* Key Color */
  --color-Key-Primary: #A39A66;
  --color-Key-Secondary: #A38181;
  --color-Key-Tertiary: #F2F2E1;

  /* Txt Color */
  --color-Txt-Primary: #29201A;
  --color-Txt-Secondary: #888;
  --color-Txt-Tertiary: #B2A24D;
  --color-Txt-Disable: #CCC;

  /* Bg Color */
  --color-Bg-Primary: #FDFCF0;
  --color-Bg-Secondary: #FBFAF8;
  --color-Bg-Tertiary: #F0EFDD;


  /* Color */
  --color-rouge: #934545;
  --color-Gray-1: #746A63;
  --color-Gray-2: #707070;

  /* Highlight Color */
  --color-Highlight: #D80707;

  /* =======================================================================
    タイトル
  ======================================================================= */

  --title-xs: 1.5rem;
  --title-s: 1.7rem;
  --title-m: 2rem;
  --title-l: 2.4rem;
  --title-xl: 4rem;


  /* =======================================================================
    テキスト
  ======================================================================= */

  --text-xs: 1rem;
  --text-s: 1.2rem;
  --text-m: 1.3rem;
  --text-l: 1.4rem;
  --text-xl: 1.5rem;
  --text-xxl: 1.6rem;


  /* =======================================================================
    z-index
  ======================================================================= */

  --zindex-behind: -1;
  --zindex-middle: 0;
  --zindex-front: 1;
  --zindex-header: 5;
  --zindex-header-bg: 3;
  --zindex-drawer: 9;
  --zindex-modal: 10;


  /* =======================================================================
    コンテンツ横幅
  ======================================================================= */

  --container-fluid: 100%;
  --container-default: 114rem;
  --container-static: 100rem;
  --container-middle: 80rem;


  /* =======================================================================
    ユーティリティー関係
  ======================================================================= */

  --hover-opacity: .7;
  --transition-default: 350ms ease;


  /* =======================================================================
    フォント関係
  ======================================================================= */

  --hiragino-gothic: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Verdana, sans-serif;
  --font-ja: 'Zen Old Mincho', 'YuMincho', 'Hiragino Mincho ProN', serif;
  --font-en: 'EB Garamond', 'Times New Roman', serif;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-black: 900;

}



@media (max-width: 768px) {
  :root {


    /* =======================================================================
      タイトル
    ======================================================================= */

    --title-xs: 1.3rem;
    --title-s: 1.7rem;
    --title-m: 2rem;
    --title-l: 2.4rem;
    --title-xl: 2.6rem;


    /* =======================================================================
      テキスト
    ======================================================================= */

    --text-xs: .8rem;
    --text-s: .9rem;
    --text-m: 1rem;
    --text-l: 1.2rem;
    --text-xl: 1.3rem;
    --text-xxl: 1.5rem;


    /* =======================================================================
      z-index
    ======================================================================= */

    --zindex-behind: -1;
    --zindex-middle: 0;
    --zindex-front: 1;
    --zindex-header: 5;
    --zindex-drawer: 9;
    --zindex-modal: 10;


    /* =======================================================================
      コンテンツ横幅
    ======================================================================= */

    --container-fluid: 100%;
    --container-default: 100%;
    --container-static: 100%;
  }
}