@charset "UTF-8";

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

  Variables.css

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


:root {

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

  /* テンプレート系設定 */
  --color-error: #e25858;
  --color-main: #000;
  --color-bg-main: #E3E4E5;
  --color-font: #333;
  --color-attention: #e25858;
  --color-primary: #333;
  --color-warning: #e25858;

  /* ユーティリティー系　（案件別色など） */
  --color-sub: #F6F6F6;
  
  --color-light-opaque: rgba(255, 255, 255, 0.85);
  --color-dim-opaque: rgba(51, 51, 51, 0.4);
  --color-dark-opaque: rgba(51, 51, 51, 0.6);

  --color-search-input: #e4e4e4;
  --color-placeholder: rgba(51, 51, 51, 0.70);

  --color-border: #C2C2C2;
  

  /* プロパティ設定の名前的に　--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: #F1F1F1;
  --color-silver-white: #E3E4E5;
  --color-very-light-grey: #D9D9D9;
  --color-light-grey: #D0D0D0;
  --color-silver: #C3C3C3; /* グレー */
  --color-middle-grey: #A8A8A8;
  --color-dim-grey: #7E7E7E;
  --color-dark-grey: #626262;
  --color-black-grey: #5D6164; /* 濃いグレー */


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

  --title-xs: 1.5rem;
  --title-s: 1.6rem;
  --title-m: 2.4rem;
  --title-l: 2.4rem;
  --title-xl: 3.2rem;


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

  --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: 114rem;
  --container-static: 100rem;
  --container-middle: 80rem;
  /* --content-padding: 6rem; */
  --content-padding: 4.1666666667vw;


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

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

  --content-border: 1px solid var(--color-border);


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

  --hiragino-gothic: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Verdana, sans-serif;
  --font-jp: "noto-sans-cjk-jp", "Noto Sans Jp", Noto Sans Jp, sans-serif;
  --font-en: "Lato", lato;
  --font-serif: 'EB Garamond', serif;

}



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


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

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


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

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


    /* =======================================================================
      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%;

    --content-padding: 2rem;
  }
}