:root {
  --color-primaryBlack: #080808;
  --color-primaryWhite: #fff;
  --color-primaryOrange: #ff2b00;
  --color-primaryGray: #f7f7f7;
  --color-primaryDarkGray: #6d6d6d;
  --color-borderGray: #d9d9d9;
  --color-breadcrumb: #969696;
  --color-primaryGradient: linear-gradient(90deg, #ff2b00, #ff5500);
  --color-primaryGradientTransparent: linear-gradient(
    90deg,
    var(--color-primaryOrange),
    transparent
  );

  --layout-min: 393;
  --layout-max: 1440;
  --container-break: 600;

  --fluid: calc(100vw / var(--layout-max));
  --fluid-min-ratio: calc(var(--layout-min) / var(--layout-max));

  --fluid-sp: calc(100vw / var(--layout-min));
  --fluid-max-ratio: calc(var(--container-break) / var(--layout-min));
}

html,
body {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  color: var(--color-primaryBlack);
  font-size: clamp(16px * var(--fluid-min-ratio), 16 * var(--fluid), 16px);
  background-color: var(--color-primaryGray);
  container-type: inline-size;
  scroll-behavior: smooth;
  scroll-padding-top: 120px;
  overflow-x: hidden;
  letter-spacing: 1.5px;
}

button,
input,
select,
textarea {
  font-weight: inherit;
}

@container (max-width: 600px) {
  html,
  body {
    font-size: clamp(
      14px,
      calc(14 * var(--fluid-sp)),
      calc(14px * var(--fluid-max-ratio))
    );
  }
}