@charset "UTF-8";

/* Definition: Alte Haas Grotesk
------------------------------------------------------------- */
@font-face {
  font-family: "Alte Haas Grotesk";
  font-display: swap;
  font-weight: 400;
  src:
    local("Alte Haas Grotesk Regular"),
    local("Alte Haas Grotesk-Regular"),
    local("AlteHaasGrotesk-Regular"),
    url("../../Contents/Fonts/Alte-Haas-Grotesk/AlteHaasGroteskRegular.ttf") format('truetype');
}
@font-face {
  font-family: "Alte Haas Grotesk";
  font-display: swap;
  font-weight: 600;
  src:
    local("Alte Haas Grotesk Bold"),
    local("Alte Haas Grotesk-Bold"),
    local("AlteHaasGrotesk-Bold"),
    url("../../Contents/Fonts/Alte-Haas-Grotesk/AlteHaasGroteskBold.ttf") format('truetype');
}

:root{
  /* ===============================================
    * Color *
  =============================================== */
  --color-primary: #000 ;
  --color-secondary: #F0F6FC;

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

  --color-black: #000;
  --color-white: #fff;

  --color-icon-1: #D6E7EA;
  --color-icon-2: #FFE6E3;
  --color-icon-3: #EAE7E0;

  --color-bg-1: #D5D5D5;
  --color-bg-2: #EDEDED;
  --color-bg-3: #F8F8F8;

  --color-ranking-1: #C7AF72;
  --color-ranking-2: #B8B8B8;
  --color-ranking-3: #D1856A;
  --color-ranking-other: #626262;

  --color-gray-100: #f5f5f5;
  --color-gray-200: #EDEDED;
  --color-gray-300: #D5D5D5;
  --color-gray-400: #bebebe;
  --color-gray-500: #7e7e7e;
  --color-gray-600: #666666;

  --color-bg-form: #EDEDED;

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

  /* ===============================================
    * Brand Color *
  =============================================== */
  --color-brand-white: #fff;
  --color-brand-off-white: #f2f2f2;
  --color-brand-greige: #eae7e0;
  --color-brand-black: #000;
  --color-brand-light-aqua: #d3eaed;
  --color-brand-new-navy: #282e40;

  /* HIGHLIGHT COLORS */
  --color-brand-bright-blue: #98bee5;
  --color-brand-horizon-red: #ff6e5c;
  --color-brand-flag-green: #9ce855;

  /* TERTIARY COLORS */
  --color-brand-violet: #de5990;
  --color-brand-magenta: #de5990;
  --color-brand-blush: #f58d92;
  --color-brand-sea-foam: #d6fdf1;


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

  /* Font Family */

  --font-hiragino: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "avenir-book", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "メイリオ", sans-serif;
  --font-ja: var(--font-hiragino);
  --font-en: "avenir-lt-pro", sans-serif;
  --font-main: var(--font-en), var(--font-ja), sans-serif;

  /* 指定フォント+フォールバック */
  --font-alte-haas-grotesk: "Alte Haas Grotesk", sans-serif;

  /* 指定フォントのみ */
  --font-core-alte-haas-grotesk: "Alte Haas Grotesk";

  /* 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%, 140rem);

  --inner-width: 92%;


  /* ===============================================
    * Header *
  =============================================== */
  
  --height-ticker: 0rem;
  --height-header-primary: 5.2rem;
  --height-header-global-nav: 0rem;
  --height-header: calc(var(--height-ticker) + var(--height-header-primary) + var(--height-header-global-nav));


  /* ===============================================
    * Aspect Ratio *
  =============================================== */
  --product-img-aspectratio: 5 / 6;
  --product-img-objectfit: cover;

  --news-thumbnail-aspectratio: 400 / 500;
  --news-thumbnail-objectfit: contain;

  
  /* ===============================================
    * Color Chip *
  =============================================== */
  --color-chip--WT: #fff;
  --color-chip--BK: #000;
  --color-chip--GY: #a3adb6;
  --color-chip--BN: #683f12;
  --color-chip--BG: #cdbd9a;
  --color-chip--GN: #2f7519;
  --color-chip--BL: #536c9f;
  --color-chip--PL: #8b72a5;
  --color-chip--YE: #e4d978;
  --color-chip--PK: #e5bfca;
  --color-chip--RD: #b30202;
  --color-chip--OR: #efaa59;
  --color-chip--SL: #e2e3e4;
  --color-chip--GD: #bc9849;
  --color-chip--MIX: url(../../../Contents/ThemeImage/common/color-chip/MIX.png);
}

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

    --inner-width: min(85%, 140rem);
    --form-inner-width: 78rem;

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

    --height-header-global-nav: 5.2rem;
  }
}