@charset "UTF-8";

/* ファーストビュー対策 */
/* @font-face {
  font-family: 'Quattrocento Sans -- header';
  src: url('../Contents/Fonts/QuattrocentoSans-Bold.woff2') format('woff2'),
       url('../Contents/Fonts/QuattrocentoSans-Bold.woff') format('woff'),
       url('../Contents/Fonts/QuattrocentoSans-Bold.ttf') format('truetype');
  font-display: block;
  font-style: normal;
  font-weight: bold;
} */

/* HK Grotesk
------------------------------------------------------------- */
@font-face {
  font-family: "HK Grotesk";
  font-display: swap;
  font-weight: 400;
  src:
    local("HKGrotesk-Regular"),
    local("HK Grotesk Regular"),
    local("HK Grotesk"),
    url("../Contents/Fonts/HKGrotesk_3001/HKGrotesk-Regular.woff") format("woff");
}

@font-face {
  font-family: "HK Grotesk";
  font-display: swap;
  font-weight: 500;
  src:
    local("HKGrotesk-Medium"),
    local("HK Grotesk Medium"),
    local("HK Grotesk"),
    url("../Contents/Fonts/HKGrotesk_3001/HKGrotesk-Medium.woff") format("woff");
}

@font-face {
  font-family: "HK Grotesk";
  font-display: swap;
  font-weight: 600;
  src:
    local("HKGrotesk-SemiBold"),
    local("HK Grotesk SemiBold"),
    local("HK Grotesk"),
    url("../Contents/Fonts/HKGrotesk_3001/HKGrotesk-SemiBold.woff") format("woff");
}

@font-face {
  font-family: "HK Grotesk";
  font-display: swap;
  font-weight: 700;
  src:
    local("HKGrotesk-Bold"),
    local("HK Grotesk Bold"),
    local("HK Grotesk"),
    url("../Contents/Fonts/HKGrotesk_3001/HKGrotesk-Bold.woff") format("woff");
}

/* CSS custom properties */
:root {
  /* ===============================================
    * colors *
  =============================================== */
  --black: #000;
  --balsamico: #180D05;
  --carbon-fiber: #2E2E2E;
  --carbon-fiber-rgb: 46 46 46;
  --cream: #FDF6ED;
  --major-blue: #2998C3;
  --coral-dust: #F0AA83;
  --white-solid: #F3F6FA;
  --shadow-mountain: #575757;
  --incubation-red: #D91A35;
  --dhusar-grey: #AAA;
  --aria: #E3E3E3;
  --white: #fff;
  --cold-grey: #9F9F9F;
  --red-tuna-fruit: #B7173F;
  --kincha-brown: #C36824;
  --dull-green: #73A760;
  --toolbox: #7670BF;
  --rodeo-tan: #A78973;
  --shark-fin: #959595;
  --deadsy: #C3A74B;
  --nankeen: #BA9E81;
  --elemental-grey: #A0A0A0;
  --snowflake: #F0F0F0;
  --carbon: #333333;
  --doctor: #F9F9F9;
  --unicornsilver: #E8E8E8;
  --skymagenta: #CC71B0;
  --greenflavor: #BFAC1B;
  --blueshutters: #90BEE5;
  --bitofsugar: #F3F3EC;
  --darkgrey: #363636;
  --lynxwhite: #F7F7F7;
  --darkshamrock: #E4E1C9;
  --mistyrose: #F2E9EC;
  --drwhite: #FAFAFA;
  --pastelbrown: #846952;
  --dugong: #707070;
  --rodeotan: #A78973;
  --middlegreenyellow: #A9C45D;
  --panama-rose: #CA597B;
  --angraecumorchid: #F4F7EB;
  --upmaroon: #7F101A;
  --bonebrown: #9C7244;
  --desolate-field: #D3CCC6;
  --white-smoke: #F5F5F5;
  --kathmandu: #AF9B5B;
  --cathedralgrey: #AAA9A6;
  --limed-oak: #AD8B54;
  --ogenmelon: #D7B132;
  --rainygrey: #A5A5A5;
  --rustycoin: #8B672D;
  --ogen-melon: #D7B132;
  --marchhareorange: #FF7A0B;
  --beluga: #F1F1F1;
  --turquoiseMint: #1ed2b4;
  --dustyBlue: #70809e;
  --softAqua: #adccd2;
  --paleLemon: #f8fad2;
  --lavenderDust: #c0b1d8;
  --warmBeige: #e2d7c3;
  --mauveBlush: #d0bebc;
  --peachGlow: #f7b28d;
  --roseBlush: #efa3a8;
  --vividCherry: #f22954;

  /* https://colornamer.robertcooper.me/ */

  /* Brand */
  --oheyaplus-pink: #EEE1E7;
  --pipinghot-black: var(--carbon-fiber);
  --pipinghot-black-rgb: var(--carbon-fiber-rgb);
  --dermashare-black: var(--balsamico);
  --color-ellips-primary: #FF8B8B;
  --color-ellips-secondary: #FFFAFC;
  --color-beautyavenue-primary: #FF9081;
  --color-beautyavenue-secondary: #F7EDEA;

  /* 会員ランク */
  --color-member-rank-foreground: #2C2C2C; /* 文字色 */
  --color-member-rank-bronze: #F4DDD1;
  --color-member-rank-silver: #EAEAEA;
  --color-member-rank-gold: #F2E7CB;
  --color-member-rank-platinum: #DCEAF6;
  --color-member-rank-diamond: #F2E4F4;

  /* ===============================================
    * font-family *
  =============================================== */
  --barlow: 'Barlow', sans-serif;
  --quattrocento-sans: 'Quattrocento Sans', sans-serif;
  /* --quattrocento-sans-header: 'Quattrocento Sans -- header'; */
  --noto-sans: 'Noto Sans JP', sans-serif;
  --yugothic: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "Yu Gothic", "Open Sans", "メイリオ", sans-serif;
  --hirakaku: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro', sans-serif;
  --roboto: 'Roboto', sans-serif;
  --Archivo: 'Archivo Black', sans-serif;
  --open-sans: 'Open Sans', sans-serif;
  --montserrat: 'Montserrat', sans-serif;
  --poppins: 'Poppins', sans-serif;
  --hkgrotesk: 'HK Grotesk', sans-serif;
  --ebgaramond: 'EB Garamond', serif;
  --arial: 'Arial', sans-serif;
  --inter: 'Inter', sans-serif;
  --helvetica-neue: "Helvetica Neue", sans-serif;
  --ff-futura: "futura-pt";
  --ff-noto-sans-jp: "Noto Sans JP";
  --ff-montserrat: "Montserrat";

  /* Brand */
  --ff-ellips-base: var(--ff-futura), var(--ff-noto-sans-jp), sans-serif;
  --ff-beautyavenue-base: var(--ff-montserrat), var(--ff-noto-sans-jp), sans-serif;

  /* ===============================================
    * font-weight *
  =============================================== */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ===============================================
    * header's height *
  =============================================== */
  /* --tickerHeight: 26px; */
  --headerSmartBannerHeight: 0px;
  --tickerHeight: 40px;
  --obiBannerHeight: 0px;
  --headerInnerHeight: calc(52 * (100vw / 375));
  --headerBottomCategoryBarHeight: 0px;
  --headerBottomBrandBarHeight: 0px;

  --headerTopHeight: calc(var(--headerSmartBannerHeight) + var(--tickerHeight) + var(--obiBannerHeight) + var(--headerInnerHeight));
  --headerHeight: calc(var(--headerSmartBannerHeight) + var(--tickerHeight) + var(--obiBannerHeight) + var(--headerInnerHeight) + var(--headerBottomCategoryBarHeight) + var(--headerBottomBrandBarHeight));

  /* ===============================================
    * transition *
  =============================================== */
  --transition-default: .1s;
  --transition-regular: .3s;
  --hover-opacity: .7;
}


@media only screen and (min-width: 768px) {
  :root {
    /* ===============================================
      * header's height *
    =============================================== */
    --headerInnerHeight: calc(52 * (100vw / 768));
  }
}
@media only screen and (min-width: 980px) {
  :root {
    /* ===============================================
      * header's height *
    =============================================== */
    --tickerHeight: 40px;
    --headerInnerHeight: 6rem;
  }
}