@charset "UTF-8";

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

  Variables.css

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


:root {

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

  /* テンプレート系設定 */
  --color-error: #EB677A;
  --color-main: #000;
  --color-bg-main: #F9F7F5;
  --color-font: #403f3f;
  --color-attention: #EB677A;
  --color-primary: #839DD1 !important;
  --color-warning: #EB677A;

  /* 案件ごとのカラー設定 | project exclusive color setting */
  --color-font-sub: #7C8595;
  --color-bg-header: #F2F4F8;
  --color-point: #97a9cb;
  --color-bg-footer: #f7f7f7;
  --color-border:　#E3E3E3;

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

  --color-black: #000;
  --color-white: #fff;
  --color-red: #e25858;
  --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; /* 濃いグレー */
  --color-title: #4d4c4c;
  --color-title_line: #e0dede;
  --color-text-attention: #e87777;
  --color-bg1: #f9f7f5;
  --color-bg2: #fafafa;
  --color-bg3: #f4f7fd;
--color-bg_tokuten: #f9f7f5;
  --color-link: #97a9cb;
  --color-button: #a7b9db;
  --color-frame_a: #a7b9db;
  --color-frame_b: #e0dede;
  --color-frame_z: #d49895;
  --color-frame_z_bg: #fcf5f4;
  --color-table_line: #e0dede;
  --color-table_bg: #f4f7fd;


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

  --title-xs: 1.5rem;
  --title-s: 1.6rem;
  --title-m: 2.4rem;
  --title-l: 2.4rem;
  --title-xl: 3.2rem;
  --title-xxl: 4rem;
  --title-m2: 2.0rem;




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

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


  /* =======================================================================
    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: 128rem;
  --container-static: 100rem;
  --container-middle: 80rem;


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

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


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

  --hiragino-gothic: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Verdana, sans-serif;
  --ff-plusjakarta: 'Plus Jakarta Sans';
  --ff-notojp: 'Noto Sans JP';
  --ff-roboto: 'Roboto';

  --font-en: var(--ff-plusjakarta, "Plus Jakarta Sans");
  --font-jp: var(--ff-notojp, 'Noto Sans JP');


}



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


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

    --title-xs: 1.6rem;
    --title-s: 1.8rem;
    --title-m: 2rem;
    --title-l: 2.4rem;
    --title-xl: 2.6rem;
    --title-xxl: 3.0rem;
   
    /* =======================================================================
      テキスト
    ======================================================================= */

    --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-drawer: 9;
    --zindex-modal: 10;


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

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