@charset "UTF-8";

/* =======================================================================
  Variables Main
======================================================================= */

:root {

  /* 共通 */
  --color-red: #CC0000;
  --color-gray: #888;
  --color-border: #A7A7A7;

  /* フォント */
  --font-jp: '游ゴシック体', YuGothic, '游ゴシック Medium', 'Yu Gothic', 'ヒラギノ角ゴ ProN', 'メイリオ', sans-serif;
  --font-en: 'Montserrat', sans-serif;

  /* ブランドカラー　 */
  --color-main: #1C1C1C;

  /* フォントカラー */
  --color-font: #1C1C1C;

  /* 背景 */
  --color-bg: #F8F8F8;

  /* ボタン */
  --color-button: var(--color-main);

  /* アイコン */
  --color-icon-normal: #888;
  --color-icon-recommend: #B9A368;
  --color-icon-emphasis: #E56767;

  /* ランキング */
  --color-rankingRate-bg: var(--color-main);

  /* ポイント */
  --color-subTtl: #888;
  --color-point-bg: #FFF;
  --color-point-border: #EAEAEA;

  /* SNS */
  --color-path: #6A6A6A;
  --color-sns-bg: #F5F2EB;

  /* Slider */
  --color-sliderDots: #888;
  --color-sliderDots-active: var(--color-main);
  --color-slider-arrow: #FFF;
  --color-slider-arrow-bg: rgba(28,28,28,.7);
  --color-slider-arrow-border: transparent;
  --color-slider-arrow-blendMix: initial;
  
  /* ページトップ */
  --color-brand-pageTop-bg: var(--color-main);
  --color-brand-pageTop-border: var(--color-main);
  --color-brand-pageTop-arrow: var(--color-slider-arrow-blendMix);

  /* 帯バナー */
  --color-ticker-font: var(--color-font);
  --color-ticker-bg: #EAEAEA;

  /* ヘッダー */
  --color-header-accent-main: #363636;
  --color-header-accent-sub: #FFF;
  --grid-cols-header: repeat(7, 1fr);
  --grid-gap-header: 1rem;
  --color-purpose-bg01: #F8F8F8;
  --color-purpose-bg02: #1C1C1C;
  --cart-itemCount-bg: #AAA;

  /* 検索窓 ハッシュタグ */
  --advSearch-category-bg: #888;
  
  /* フッター */
  --color-footer-accent: #1C1C1C;

  /* カレンダー */
  --color-calendar-weekday: #F8F8F8;
  --color-calendar-holiday: #FD9F9F;
  --color-calendar-deliveryOnly: #EFE897;
  --color-calendar-deliveryHoliday: #9FE7FD;

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

  /* コンテンツ幅 */
  --container-default: 126rem;
  
  /* ヘッダー高さ */
  --header-main: 8rem;

  /* 商品情報 */
  --itemName-clamp: 2;

  /* チェックアイコン */
  --checkIcon-inactive: url(../img/icon_check_comprehensive.svg);
  --checkIcon-active: url(../img/icon_check_active_comprehensive.svg);

  /* ラジオアイオン */
  --radioIcon-inactive: url(../img/icon_radio_comprehensive.svg);
  --radioIcon-active: url(../img/icon_radio_active_comprehensive.svg);

}

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

    /* グリッド */
    --grid-cols: repeat(2, minmax(0, 1fr));
    --grid-gap-col: 1rem;

    /* ヘッダー高さ */
    --header-main: 5rem;

  }

}