@charset "UTF-8";

:root{
  /* ===============================================
    * Color *
  =============================================== */
/* 
  --color-primary: #111690;
  --color-secondary: #E1E9F7; */

  --color-primary: #43AC33;
  --color-secondary: rgba(233, 245, 220, .6);
  --color-tertiary: #f59e00;

  --color-emphasis: #DB2320;
  --color-text-default: var(--color-black);
  --color-textlink: var(--color-black);

  --color-black: #2B100F;
  --color-white: #fff;

  --color-gray-100: #f5f5f5;
  --color-gray-200: #e6e4e4;
  --color-gray-300: #dbdbdb;
  --color-gray-400: #bebebe;
  --color-gray-500: #7e7e7e;
  --color-gray-600: #4e4e4e;

  --color-bg-form: #f4f7fd;

  --color-social-apple-primary: #000;
  --color-social-facebook-primary: #0866FF;
  --color-social-x-primary: #000;
  --color-social-yahoo-primary: #ff0033;
  --color-social-google-primary: #000;
  --color-social-line-primary: #06C755;
  --color-social-amazon-primary: #F0C14B;

  --color-disable: #CCCCCC;
  

  /* ===============================================
    * Font *
  =============================================== */

  /* Font Family */

  --font-notosans: 'Noto Sans JP';
  --font-ja: "Zen Maru Gothic";
  --font-en: "Nunito";
  --font-main: var(--font-en), var(--font-notosans), sans-serif;
  --font-title:var(--font-en), var(--font-ja), sans-serif;


  /* Font Weight (fw = font-weight) */

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;


  /* ===============================================
    * Animation *
  =============================================== */

  --transition-duration: 0.3s;
  --transition-timing-function: ease;
  --transition-default: var(--transition-duration) var(--transition-timing-function);

  --hover-opacity: 0.6;


  /* ===============================================
    * z-index *
  =============================================== */

  --zindex-base: 1;
  --zindex-floating-element: 10;
  --zindex-header: 20;
  --zindex-hamburgermenu-bg: 30;
  --zindex-hamburgermenu-contents: 40;


  /* ===============================================
    * Box Model *
  =============================================== */

  --container-fluid: 100%;
  --container-default: min(100%, 114rem);

  --inner-width: 92%;


  /* ===============================================
    * Header *
  =============================================== */

  
  --height-ticker: 3.6rem;
  --height-ticker-view: 3.6rem;
  --height-header-primary: 6.8rem;
  --height-header-global-nav: 0;
  --height-header: var(--height-header-primary);
  
  --scrollbarWidth: 0;
  
  
  /* ===============================================
    * itemListSet *
  =============================================== */
  --itemImgRatio: 100%;
  --itemNameClamp: 2;
  --itemNameFontSize: 1.7rem;
  --itemNameLineHeight: 1.5;
  --itemNameWeight: 400;

  --iconFont: var(--contentsFont);  
  --iconFontSize: 1.3rem;
  --iconFontWeight: 700;
  --iconGap: 0.3rem 0.3rem;
  --iconHeight: 2rem;
  --iconPadding: 0.2rem 0.6rem 0;
  --iconRadius: 3px;
  
  --icon01Bg: linear-gradient(to right,#866200 0%, #f4d96d 25.12%, #c1930a 51.72%, #d6a929 73.4%, #aa8317 86.7%, #866200 100%);;
  --icon01Border: none;
  --icon01txtColor: #FFFFFF;
  --icon01txt: '新発売';
  
  --icon02Bg: #E2BA16;
  --icon02Border: none;
  --icon02txtColor: #FFFFFF;
  --icon02txt: 'おすすめ';
  
  --icon03Bg: #E2BA16;
  --icon03Border: none;
  --icon03txtColor: #FFFFFF;
  --icon03txt: '人気';
  
  --icon04Bg: #FFFFFF;
  --icon04Border: 1px solid #B92E2E;
  --icon04txtColor: #B92E2E;
  --icon04txt: '数量限定';
  
  --icon05Bg: #B92E2E;
  --icon05Border: none;
  --icon05txtColor: #FFFFFF;
  --icon05txt: '特別価格';
  
  --icon06Bg: #D95FCB;
  --icon06Border: none;
  --icon06txtColor: #FFFFFF;
  --icon06txt: 'キャンペーン';
  
  --icon07Bg: #FA9900;
  --icon07Border: none;
  --icon07txtColor: #FFFFFF;
  --icon07txt: '徳用サイズ';
  
  --icon08Bg: #42AC33;
  --icon08Border: none;
  --icon08txtColor: #FFFFFF;
  --icon08txt: 'セット商品';
  
  --icon09Bg: #D95FCB;
  --icon09Border: none;
  --icon09txtColor: #FFFFFF;
  --icon09txt: '定期コース';
  
  --icon10Bg: #1B50B4;
  --icon10Border: none;
  --icon10txtColor: #FFFFFF;
  --icon10txt: '送料無料';
  

  /**ヘッダーアラート計測*************/
  --headAlertHeight: 0;
  
}

@media screen and (min-width: 768px){
  :root{
    /* ===============================================
      * Box Model *
    =============================================== */

    --inner-width: min(71.25%, 114rem);
    --form-inner-width: 78rem;

    /* ===============================================
      * Header *
    =============================================== */

    --height-ticker: 4rem;
    /*
    --height-header-primary: 11.6rem; 
    --height-header-global-nav: 5rem;
    --height-header: calc(var(--height-header-primary) + var(--height-header-global-nav));
    */
    

    /* ===============================================
      * itemListSet *
    =============================================== */
    --iconFontSize: 1.4rem;
    --iconGap: 0.3rem 0.3rem;
    --iconHeight: 2.1rem;
    --iconPadding: 0.2rem 0.6rem 0;
    --iconRadius: 3px;
    
  }
}