@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: var(--color-brand-main);

  /* フォントカラー */
  --color-font: var(--color-brand-font);

  /* 背景 */
  --color-bg: var(--color-brand-bg);

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

  /* アイコン */
  --color-icon-normal: #888;
  --color-icon-recommend: #B9A368;
  --color-icon-emphasis: #E56767;
  --color-icon-handbag: #5E89C1;
  --color-icon-giftbag: #D37936;

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

  /* ポイント */
  --color-subTtl: var(--color-brand-point-subTtl);
  --color-point-bg: var(--color-brand-point-bg);
  --color-point-border: var(--color-brand-point-border);

  /* SNS */
  --color-path: var(--color-brand-path);
  --color-sns-bg: var(--color-brand-sns-bg);

  /* Slider */
  --color-sliderDots: var(--color-brand-sliderDots);
  --color-sliderDots-active: var(--color-brand-sliderDots-active);
  --color-slider-arrow: var(--color-brand-slider-arrow);
  --color-slider-arrow-bg: var(--color-brand-slider-arrow-bg);
  --color-slider-arrow-border: var(--color-brand-slider-arrow-border);
  --color-slider-arrow-blendMix: var(--color-brand-slider-arrow-blendMix);
  
  /* ページトップ */
  --color-brand-pageTop-bg: var(--color-brand-pageTop-bg);
  --color-brand-pageTop-border: var(--color-brand-pageTop-border);
  --color-brand-pageTop-arrow: var(--color-brand-slide-arrow-blendMix);

  /* 帯バナー */
  --color-ticker-font: #1C1C1C;
  --color-ticker-bg: #EAEAEA;

  /* ヘッダー */
  --color-header-accent-main: var(--color-brand-header-accent-main);
  --color-header-accent-sub: var(--color-brand-header-accent-sub);
  --grid-cols-header: var(--grid-cols-header-brand);
  --grid-gap-header: var(--grid-gap-header-brand);
  --color-purpose-bg01: var(--color-brand-purpose-bg01);
  --color-purpose-bg02: var(--color-brand-purpose-bg02);
  --cart-itemCount-bg: var(--cart-itemCount-brand-bg);

  /* 検索窓 ハッシュタグ */
  --advSearch-category-bg: var(--advSearch-category-brand-bg);
  
  /* フッター */
  --color-footer-accent: var(--color-brand-footer-accent);

  /* カレンダー */
  --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: var(--itemNameClamp-brand);

  /* チェックアイコン */
  --checkIcon-inactive: var(--checkIcon-brand-inactive);
  --checkIcon-active: var(--checkIcon-brand-active);

  /* ラジオアイオン */
  --radioIcon-inactive: var(--radioIcon-brand-inactive);
  --radioIcon-active: var(--radioIcon-brand-active);

}

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

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

    /* ヘッダー高さ */
    --header-main: 6.3rem;
    --header-bottom-menu: 4.9rem;
    --header-all-height: calc(var(--header-banner-height) + var(--header-main) + var(--header-bottom-menu));

  }

}