* {
  box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}
ul,
ol {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
a {
  color: inherit;
  text-decoration: none;
}
p {
  margin: 0;
}
figure {
  margin: 0;
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
}
button {
  padding: 0;
  border: none;
  background-color: transparent;
  appearance: none;
}

:root {
  --pink-30: #992664;
  --pink-40: #cc3386;
  --pink-50: #ff40a7;
  --pink-90: #ffecf6;
  --pink-95: #fff6fb;

  --natural-0: #1f1f1f;
  --natural-10: #333333;
  --natural-30: #5c5c5c;
  --natural-40: #757575;
  --natural-70: #e0e0e0;
  --natural-80: #f4f4f4;
  --natural-100: #ffffff;

  --matsu: #e5f9ea;
  --take: #f5ffd4;
  --ume: #ffeaf7;
  --sirushi: #ffecc7;
  --ouen: #eae2ff;
  --individual: #e1f0fe;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 999px;

  --elevation-1: 4px 4px 4px rgba(0, 0, 0, 0.04);
  --elevation-2: 8px 8px 8px rgba(0, 0, 0, 0.04);
}

/* base */
html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-size: 1.6rem;
  font-family: "Lato", "Noto Sans JP", sans-serif;
  font-style: normal;
  line-height: 1.4;
  color: var(--natural-10);
}

/* utility */
.container {
  max-width: calc(132rem + 2.4rem);
  padding: 8rem 2.4rem;
  margin: auto;
}

.color-natural40 {
  color: var(--natural-40);
}
.color-natural100 {
  color: var(--natural-100);
}

.bg-pink90 {
  background-color: var(--pink-90);
}
.bg-pink95 {
  background-color: var(--pink-95);
}
.bg-natural0 {
  background-color: var(--natural-0);
}

.fz-smx {
  font-size: 1.2rem;
}
.fz-sm {
  font-size: 1.4rem;
}
.fz-md {
  font-size: 1.6rem;
}

.text-center {
  text-align: center;
}

.font-bold {
  font-weight: bold;
}

.section h2 {
  margin: 0 0 4rem;
  font-size: 3.2rem;
  font-weight: 900;
  text-align: center;
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem;
}
.align-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.col-8 {
  width: 66.6666667%;
}
.ma {
  margin: auto;
}

@media screen and (max-width: 750px) {
  .section h2 {
    margin: 0 0 3.2rem;
    font-size: 2.8rem;
  }
  .col-8 {
    width: 100%;
  }
}