@charset "UTF-8";
:root {
  /* color */
  --wht-color: #ffffff;
  --wht-color-rgb: 255, 255, 255;
  --text-color: #4d5463;
  --base-color: #003338;
  --base-color-rgb: 0, 51, 56;
  --primary-color: #497c80;
  --primary-color-rgb: 73, 124, 128;
  --secondary-color: #c8e6e8;
  --secondary-color-rgb: 200, 230, 232;
  --tertiary-color: #c5dadc;
  --pale-color: #ebf4f5;
  --pale-color-rgb: 235, 244, 245;
  --attention-color: #c6002d;
  --attention-color-rgb: 198, 0, 45;

  /* font-family */
  --font-base: "Noto Sans JP", sans-serif;
  --font-en: "Barlow Condensed", sans-serif;

  /* font-size */
  --fs-s: clamp(1rem, calc(0.733rem + 0.556cqw), 1.4rem);
  --fs-m: clamp(1.2rem, calc(0.933rem + 0.556cqw), 1.6rem);
  --fs-l: clamp(1.4rem, calc(1rem + 0.833cqw), 2rem);
  --fs-xl: clamp(2rem, calc(1.4rem + 0.833cqw), 2.2rem);
  --fs-xxl: clamp(2.4rem, calc(1.6rem + 1.667cqw), 3.6rem);
  --fs-xxxl: clamp(4rem, calc(3.5rem + 1.667cqw), 6rem);

  /* font-weight */
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
}

/* font-family */
.ff-jp {
  font-family: var(--font-base);
}
.ff-en {
  font-family: var(--font-en);
}

/* font-size */
.fs-s {
  font-size: var(--fs-s);
}
.fs-m {
  font-size: var(--fs-m);
}
.fs-l {
  font-size: var(--fs-l);
}
.fs-xl {
  font-size: var(--fs-xl);
}
.fs-xxl {
  font-size: var(--fs-xxl);
}

/* //タブレット縦 / スマートフォン横 */
@media screen and (min-width: 480px) {
  :root {
  }
}

/* PC */
@media screen and (min-width: 768px) {
  :root {
  }
}