@charset "UTF-8";

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

  Variables.css

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


:root {

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

  /* プロジェクト用 */
  --color-brand-main1: #5E8641;
  --color-brand-main2: #C34223;
  --color-brand-sub1: #AFC4A0;
  --color-brand-sub2: #E8E1D8;
  --color-brand-bg: #FFFDF8;
  --color-brand-font-main: #332828;
  --color-brand-font-discount: #666;
  --color-brand-font-error: #C34223;


  /* テンプレート系設定 */
  --color-main: var(--color-brand-font-main);
  --color-bg-main: var(--color-brand-bg);
  --color-font: var(--color-brand-font-main);
  --color-primary: var(--color-brand-main1);
  --color-error: var(--color-brand-font-error);
  --color-attention: var(--color-brand-font-error);
  --color-warning: var(--color-brand-font-error);

  --color-white: #fff;
  --color-black: var(--color-brand-font-main);
  --color-grey: #7e7e7e;
  --color-grey-lighter: #dfdfdf;
  --color-grey-light: #adadad;
  --color-grey-dark: #525252;
  --color-grey-darker: #2a2a2a;

  --color-red: var(--color-brand-font-error);
  --color-red-light: #ef9a9a;
  --color-red-dark: #9a0007;
  --color-orange: #d67936;
  --color-yellow: #e5dc09;

  --color-green: #055818;
  --color-green-light: #a5d6a7;
  --color-green-dark: #004c40;

  --color-blue: #4cbfea;
  --color-blue-light: #81d4fa;
  --color-blue-dark: #004ba0;


  /* 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-dark-grey: #7c7b7b; /* 濃いグレー */


  /* SNS */
  --color-twitter: #1d9bf0;
  --color-facebook: #0165E1;
  --color-youtube: #ff0000;
  --color-note: #41c9b4;
  --color-stripe: #635bff;
  --color-discord: #7289da;
  --color-instagram: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);


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

  --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;


  /* font-weight */
  --fontweight-s: 100;
  --fontweight-m: 400;
  --fontweight-l: 700;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi-bold: 600;
  --fw-bold: 700;




  /* =======================================================================
    font-family
  ======================================================================= */

  --ff-main: 'Noto Sans JP', "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
  --font-en: "proxima-nova", 'Noto Sans JP', sans-serif;
  --ff-en: var(--font-en);




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



  /* =======================================================================
    アニメーション
  ======================================================================= */

  --hover-opacity: var(--opacity-hover);
  --opacity-hover: .6;

  --transition-default: var(--transitionDuration-default) var(--transitionTimingFunction-default);
  --transitionDuration-fast: 150ms;
  --transitionDuration-default: 350ms;
  --transitionDuration-slow: 600ms;
  --transitionTimingFunction-default: ease;




  /* =======================================================================
    border-radius
  ======================================================================= */
  --borderRadius-small: .5rem;
  --borderRadius-regular: .8rem;
  --borderRadius-large: 1rem;




  /* =======================================================================
    box-shadow
  ======================================================================= */
  --elevation-0: none;
  --elevation-1: 0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.20);
  --elevation-2: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.20);
  --elevation-3: 0 3px 4px 0 rgba(0,0,0,0.14), 0 3px 3px -2px rgba(0,0,0,0.12), 0 1px 8px 0 rgba(0,0,0,0.20);
  --elevation-4: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.20);
  --elevation-6: 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12), 0 3px 5px -1px rgba(0,0,0,0.20);
  --elevation-8: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.20);
  --elevation-9: 0 9px 12px 1px rgba(0,0,0,0.14), 0 3px 16px 2px rgba(0,0,0,0.12), 0 5px 6px -3px rgba(0,0,0,0.20);
  --elevation-12: 0 12px 17px 2px rgba(0,0,0,0.14), 0 5px 22px 4px rgba(0,0,0,0.12), 0 7px 8px -4px rgba(0,0,0,0.20);
  --elevation-16: 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -5px rgba(0,0,0,0.20);
  --elevation-24: 0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12), 0 11px 15px -7px rgba(0,0,0,0.20);

}



@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;




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

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