@charset "UTF-8";

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

  Variables.css

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


:root {

  /* =======================================================================
    フォントサイズ
  ======================================================================= */
  --font-root: 62.5%;


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

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

  /* ユーティリティー系　（案件別色など） */
  /* プロパティ設定の名前的に　--color-色名で */
  --color-black: #1C1C1C;
  --color-white: #fff;
  --color-red: #e25858;
  --color-blue: #0E6CC9;
  --color-green: #055818;
  --color-orange: #d67936;
  --color-yellow: #e5dc09;

  /* Grey Color */
  --color-white:#fff;
  --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; /* 濃いグレー */

  /* ECページ用 */
  --color-ec-primary: #CC141C;
  --color-ec-secondary:#20AFC9;
  --color-ec-tertiary:#FFB72F;
  --color-ec-bg-gray:#EDEDED;
  --color-ec-button-hover-red:#AF0000;

  --color-bg-sugarmilk:#FFFAF4;
  --color-bg-lighthouse:#F4F4F4;
  --color-bg-not-available: #969696;

  --headeing-color: #111111;
  --font-color: #1c1c1c;

  /* sale */
  --color-salePrice:#CC141C;
  /* =======================================================================
    タイトル
  ======================================================================= */

  --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%;
  /* ↓ paddingを左右に2remずつ加えたサイズになります。 ↓ */
  --container-main: 144rem;
  --container-default: 120rem;
  --container-static: 100rem;
  --container-middle: 80rem;

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

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


  /* =======================================================================
    フォント関係
  ======================================================================= */
  /* ウェイト設定 400/500/500Italic/700Italic */
  --font-en:'Roboto', sans-serif;
  /* ウェイト設定 400/500/600 */
  --font-default: 'Noto Sans JP', sans-serif;

  /* =======================================================================
    リスト関係金額部分
  ======================================================================= */
  --Manufacturer:1.2rem;
  --productName:1.4rem;
  --price-disp-nomal:1.2rem;
  --price-disp-sale: 1.2rem;
  --price-saleBefore:1.4rem;
  --price-nomal:1.6rem;
  --price-sale:1.8rem;
  --price-tax:1.1rem;
  --price-tax-sale:1.2rem;

  /* =======================================================================
    ヘッダーの高さ
  ======================================================================= */
  --headerBrandListHeightEc:4.8rem;
  --headerBrandListHeightEcTop:4.8rem;
  --headerNaviHeight:4.8rem;
  --headerSimple:4.8rem;
  /* --headerHeight:14.2rem */
  --breadcrumbsHeight: -4.8rem;

  /* =======================================================================
    グリッドレイアウト
  ======================================================================= */
  --grid-cols: repeat(5, minmax(0, 1fr));
  --grid-gap-row: 4rem;
  --grid-gap-col: 2.5rem;

}
@media screen and (max-width: 1200px) {
  :root{
    --font-root: calc(10 * (100vw / 1200));
  }
}

@media (max-width: 820px) {
  :root {
  /* =======================================================================
      ヘッダーの高さ
    ======================================================================= */
    --headerHeight:7.4rem;
    }
}
@media (min-width: 768px) and (max-width:820px){
  /* =======================================================================
    グリッドレイアウト スクロールレイアウトの場合
  ======================================================================= */
  :root{
    --itemWidth-scroll:16rem;
    --gap-scroll:0 2.5rem;
    --padding-scroll:0 2rem 1.5rem;

    --upperSideHeight:4rem;

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

    --font-root:62.5%;
    /* =======================================================================
      ヘッダーの高さ
    ======================================================================= */
    --headerBrandListHeightEcTop:3.4rem;
    --headerBrandListHeightEc:3.4rem;
    --headerSimple:4.0rem !important;

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

    --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-main: 100%;
    --container-default: 100%;
    --container-static: 100%;

    /* =======================================================================
      productListテキスト関係
    ======================================================================= */
    --Manufacturer:1.2rem;
    --productName:1.4rem;
    --price-disp-nomal: 1rem;
    --price-disp-sale: 1.2rem;
    --price-saleBefore: 1.3rem;
    --price-nomal: 1.5rem;
    --price-sale: 1.8rem;
    --price-tax: 1rem;
    --price-tax-sale: 1.2rem;

    /* =======================================================================
      ヘッダーの高さ
    ======================================================================= */
    --headerHeight:6.745rem;
    --glonaviHeight:5.3rem;
    --headerSimple:6.4rem;
    --upperSideHeight:6rem;
    --upperSideHeightNegative:-6rem;
    --headerTotalHeight: 11.4rem;
    --breadcrumbsHeight: -4.4rem;

     /* =======================================================================
      グリッドレイアウト
    ======================================================================= */
    --grid-cols: repeat(3, minmax(0, 1fr));
    --grid-gap-row: 4rem;
    --grid-gap-col: 2.5rem;
    /* ▽▽スクロールレイアウトの場合▽▽ */
    --itemWidth-scroll:22rem;
    --gap-scroll:0 2.5rem;
    --padding-scroll:0 2rem 1.5rem;
  }
}
@media (min-width: 768px) and (max-width:820px){
  /* =======================================================================
    グリッドレイアウト スクロールレイアウトの場合
  ======================================================================= */
  :root{
    --upperSideHeight:6.1rem;

  }
}
@media screen and (max-width: 480px) {
  :root {
    /* =======================================================================
      グリッドレイアウト
    ======================================================================= */
    --grid-cols: repeat(2, minmax(0, 1fr));
    --grid-gap-row: 4rem;
    --grid-gap-col: 0.5rem;
    /* =======================================================================
      ヘッダーの高さ
    ======================================================================= */
    --breadcrumbsHeight: -3.7rem;
  }
}
/* SP */
@media screen and (max-width: 375px) {
  :root{
    --font-root: calc(10 * (100vw / 375));

  }
}