@charset "UTF-8";

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

  Variables.css

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


:root {

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

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

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

  --color-black: #000;
  --color-white: #fff;
  --color-red: #e25858;
  --color-blue: #58b8e2;
  --color-green: #055818;
  --color-orange: #d67936;
  --color-yellow: #e5dc09;
  --color-accent-yellow: #FFEE6A;
  --color-main-red: #D30000;

  /* 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-border-light-grey: #ACACAC;
  --color-border-very-light-grey: #EBEBEB;

  --color-primary: #E5006E;
  --color-secondary:#F0F0F0;
  --color-font: #333333;
  --sub-black: #646464;
  --color-sale: var(--color-main-red);
  --bgc-sale: var(--color-accent-yellow);
  --color-sale: var(--color-main-red);
  --color-gray-placeholder:#B2B2B2;

  --color-bg: #F8F8F8;
  --color-bg-gray: var(--color-bg);
  --color-border-gray:#EEEEEE;
  --color-border-gray-deep: #E0E0E0;

  --shadow-primary: rgb(0 0 0 / 10%);


  --color-cicon-01: var(--color-main-red);
  --color-cicon-02:var(--color-font);
  --color-cicon-03: #04B3DB;
  --color-cicon-04: var(--color-primary);
  --color-cicon-05: var(--color-cicon-02);
  --color-cicon-06: var(--color-cicon-04);
  --color-cicon-07: var(--color-cicon-02);
  --color-cicon-08: var(--color-cicon-02);
  --color-cicon-09: var(--color-cicon-02);

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

  --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-headerBack: 4;
  --zindex-header: 5;
  --zindex-header-bg: 3;
  --zindex-drawer: 9;
  --zindex-modal: 10;


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

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


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

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


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

  --font-name-oswald: "Oswald";
  --font-name-notojp: "Noto Sans JP";

  --hiragino-gothic: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Verdana, sans-serif;
  --font-en: "Josefin Sans";
  --ff-oswald: var(--font-name-oswald), sans-serif;
  --ff-notosan: var(--font-name-notojp), sans-serif;
  --ff-common: var(--font-name-oswald), var(--font-name-notojp), sans-serif;

  --fw-reglar: 400;
  --fw-regular: var(--fw-reglar);
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* =======================================================================
    高さ関係
  ======================================================================= */
  --headerHeight-information: 4rem;
  --headerHeight-contents: 13.6rem;
  --headerHeight:calc(var(--headerHeight-information) + var(--headerHeight-contents));

  /* =======================================================================
    パディング関係
  ======================================================================= */
  --container-padding: 4rem;

}



@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%;
    /* =======================================================================
      高さ関係
    ======================================================================= */
    --headerHeight-information: 2.7rem;
    --headerHeight-contents: 12.6rem;
    --headerHeight:calc(var(--headerHeight-information) + var(--headerHeight-contents));
  }
}