@charset "UTF-8";

/**********************************************************
* 色/余白/フォントなどのデザイントークン（変数）
**********************************************************/
:root {
  /* ===== color ===== */
  --color-main-dark: #FF4182;
  --color-main-dark2: #FD4E8A;
  --color-main-light: #FB77A0;
  --color-light: #fff;
  
  /* border */
  --color-border: #FFE3EC;
  --color-text-dark: #7B7B7B;

  /* bg */
  --bg-color-light: rgba(255, 255, 255, .85);

  /* header */
  --drawer-border: rgba(255, 182, 204, .85);

  /* caption */
  --caption-line: #FFB6CC;
  --caption-bg: rgba(255, 255, 255, .6);
  --caption-border: rgba(255, 182, 204, .6);

  /* label */
  --label-text-light: #FB77A4;

  /* products */
  --products-bg: #FC77A0;
  --products-button: #FB77A4;

  /* news */
  --news-thumb: #FFCCDE;

  /* ===== font ===== */
  --font-en: "trade-gothic-next", "futura-100"; /* Adobeフォント */
  --font-sans:
    var(--font-en),
    "Zen Kaku Gothic New",
    "Hiragino Sans", /* mac/iOS */
    "Yu Gothic", /* Windows */
    "Noto Sans JP", /* Android/Linux系 */
    system-ui,
    sans-serif;
  
  /* 可変フォントサイズ */
  --fs-default: 26px;
  --fs-small: 15px;
}

.font-trade-gothic-next {
  font-family: "trade-gothic-next", sans-serif;
}
.font-futura {
  font-family: "futura-100", sans-serif;
}

@media (768px <= width < 1920px) {
  :root {
    --fs-default: 1.354vw;
    --fs-small: 0.781vw;
  }
}

@media (width < 768px) {
  :root {
    --fs-default: 3.333vw; /* 12.5px */
    --fs-small: 2vw; /* 7.5px */
  }
}