/* =========================
   Reset CSS + rem基準設定
   PC: 1rem = 1px
   SP(650px以下): 1rem = 5px
   → 3.2rem = 16px
========================= */

html {
  font-size: 62.5%;
}

/* Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html,
body {
  min-height: 100%;
}

body {
  color: var(--main-color);
  line-height: 1.8;
  font-weight: 400;
  font-family: "Noto Sans", sans-serif;
  background-color: #fff;
  text-rendering: optimizeSpeed;
  letter-spacing: 0.05em;

}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  outline: none;
}

button {
  cursor: pointer;
}

textarea {
  resize: vertical;
}

address,
em,
i {
  font-style: normal;
}

strong,
b {
  font-weight: bold;
}

/* PC */
p,
li {
  font-size: 1.8rem;
  /* 18px */
}

h1 {
    font-size: clamp(8rem, 6.94vw, 10rem);
  font-weight: 900;
  line-height: 1.2;
}

h2 {
  font-size: 4rem;
  font-weight: 900;
}

h3 {
  font-size: 2.4rem;
  font-weight: 900;
}

h4 {
  font-size: 2rem;
  font-weight: 900;
}

/* SP */
@media screen and (max-width: 650px) {
  html {
    font-size: 31.25%;
    /* 1rem = 5px（SP） */
  }

  p {
    font-size: 3.2rem;
    /* 16px */
  }

  h1 {
    font-size: 6.4rem;
    /* 32px */
  }

  h2 {
    font-size: 4.8rem;
    /* 24px */
  }

  h3 {
    font-size: 3.6rem;
  }

  h4 {
    font-size: 3.6rem;
  }
}