/* @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;700&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Noto+Sans+JP:wght@500;700&display=swap');
@font-face {
  font-family: 'Impact';
  src: url('/assets/font/impact.ttf') format('truetype');
}

:root {
  --white: #FFFFFF;
  --black: #242424;
  --black-light: #767676;
  --grey: #F4F4F4;
  --grey-light: #FAFAFA;
  --blue-dark: #0B396C;
  --blue-darker: #2B67BC;
  --blue: #398DFE;
  --blue-light: #DCEDFF;
  --red: #D53F3F;
}

:root {
  --h1: 2.2rem;
  --h2: 1.6rem;
  --h3: 1.2rem;
  --h4: 1.1rem;
  --p: 1rem;
  --small: 0.9rem;
  --h1-res: 1.6rem;
  --h2-res: 1.2rem;
  --h3-res: 1.1rem;
  --h4-res: 1.0rem;
}

:root {
  --w-main: clamp(0px, 1200px, 90vw);
  --s-main: clamp(5vw, calc(50vw - 600px), 100vw);
}

body {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: var(--p);
  letter-spacing: 0.05em;
  font-weight: 500;
  color: var(--black);
}

h1, .h1 {
  font-size: var(--h1);
  font-weight: 700;
  letter-spacing: 0.15em;
}

h2, .h2 {
  font-size: var(--h2);
  font-weight: 700;
  letter-spacing: 0.15em;
}

h3, .h3 {
  font-size: var(--h3);
  letter-spacing: 0.15em;
}

h4, .h4 {
  font-size: var(--h4);
  letter-spacing: 0.1em;
}

.bigger-font {
  font-size: 1.666em
}

.blue-font {
  color: var(--blue);
}

.red-font {
  color: var(--red);
}


a {
  border-bottom: none;
}

img {
  max-width: 100%;
}

.number-text {
  font-family: 'Impact', sans-serif;
  font-weight: 400;
}