@charset "UTF-8";

/**********************************************************
 * html, body, タイポグラフィ、リンク等の基本
 **********************************************************/
html, body { overflow-x: hidden; }
html { 
  font-size: 100%;
  /* 
  1rem = 16px PCでは実質16px基準（ユーザー設定を尊重）
  計算方法：22px / 16px = 1.375rem
  */
  text-size-adjust: 100%; /* スマホで勝手に文字が大きならないように設定 */
}
body {
  margin: 0;
  background-image: url(../img/bg_grid.svg);
  background-size: 600px 600px;
  color: var(--color-text-dark);
  font-family: var(--font-sans);
  font-size: var(--fs-default);
  font-weight: 500;
  font-feature-settings: "palt";
  scroll-behavior: smooth;
}
.bg_grid2 {
  background: var(--products-bg) url("../img/bg_grid2.svg") 0 0 / 600px 600px;
}
a {
  text-decoration: none;
}
img {
  width: 100%;
  max-width: 100%;
}
sup {
  vertical-align: text-top;
  letter-spacing: 0;
}
.pc {
  display: block;
}
.sp {
  display: none;
}

@media (768px <= width < 1920px) {
  body {
    background-size: 31.25vw 31.25vw;
  }
  .bg_grid2 {
    background: var(--products-bg) url("../img/bg_grid2.svg") 0 0 / 31.25vw 31.25vw;
  }
}

@media (width < 768px) {
  body {
    background-size: 70.667vw 70.667vw;
  }
  .bg_grid2 {
    background: var(--products-bg) url("../img/bg_grid2.svg") 0 0 / 70.667vw 70.667vw;
  }
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
}