:root {
  /* 375px～834pxの間で可変 */
  --fz-14: clamp(0.75rem, 0.648rem + 0.44vw, 0.875rem);
  --fz-16: clamp(0.75rem, 0.546rem + 0.87vw, 1rem);
  --fz-18: clamp(0.875rem, 0.671rem + 0.87vw, 1.125rem);
  --fz-20: clamp(1rem, 0.796rem + 0.87vw, 1.25rem);
  --fz-22: clamp(1.125rem, 0.786rem + 1.13vw, 1.375rem);
  --fz-24: clamp(1.25rem, 1.046rem + 0.87vw, 1.5rem);
  --fz-25: clamp(1.25rem, 0.995rem + 1.09vw, 1.563rem);
  --fz-28: clamp(1.375rem, 1.069rem + 1.31vw, 1.75rem);
  --fz-30: clamp(1.375rem, 0.967rem + 1.74vw, 1.875rem);
  --fz-40: clamp(1.875rem, 1.364rem + 2.18vw, 2.5rem);
  --fz-45: clamp(1.875rem, 1.109rem + 3.27vw, 2.813rem);
  --fz-52: clamp(1.75rem, 0.525rem + 5.23vw, 3.25rem);
  --fz-number: clamp(1.875rem, 1.518rem + 1.53vw, 2.313rem);
  --fz-80: clamp(2.625rem, -0.595rem + 10.73vw, 5rem);
  /* --fz-80: clamp(3rem, 2.273rem + 3.64vw, 5rem); */
  --main-copy-fz: clamp(2.5rem, 0.764rem + 7.41vw, 4.625rem);
  --black1: #333;
  --main-green: #1f801f;
  --sub-green: #e1efde;
  --main-orange: #f97a00;
  --gray1: #d9d9d9;
  --gray2: #f5f5f5;
  --sec-pt: 100px;
  --sec-pb: 100px;
  --sp-20: 20px;
  --sp-30: 30px;
  --sp-35: min(3.5vw, 3.5rem);
  --sp-40: 40px;
  --sp-45: min(4.5vw, 4.5rem);
  --sp-50: 50px;
  --sp-60: min(6vw, 6rem);
  --sp-65: min(6.5vw, 6.5rem);
  --sp-70: 70px;
  --sp-75: min(7.5vw, 7.5rem);
  --sp-80: min(8vw, 8rem);
  --sp-90: min(9vw, 9rem);
  --sp-100: 100px;
  --sp-top: min(16vw, 150px);
}

body {
  width: 100%;
  font-family: "Noto Sans JP", sans-serif;
  font-style: normal;
  font-weight: 400;
  /* フォントの色 */
  color: var(--black1);
  font-size: var(--fz-18);
  /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
  background-attachment: fixed;
  background-color: #fff;
  min-height: 100vh;
}

.sp-br {
  display: none;
}

.s-sp-br {
  display: none;
}

.container {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--sp-20);
}

.container-s {
  max-width: 834px;
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--sp-20);
}

.container-l {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--sp-20);
}

.container-xl {
  max-width: 1920px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

main {
  width: 100%;
  /* min-height: 100vh; */
}

p {
  font-size: var(--fz-18);
  padding-top: 1em;
  line-height: 1.5;
}

p:first-of-type {
  padding-top: 0;
}

section {
  padding-top: var(--sec-pt);
  padding-bottom: var(--sec-pb);
}

section.bg-red {
  background-color: var(--red1);
  padding-top: var(--sp-50);
  padding-bottom: var(--sp-50);
  padding-left: var(--sp-20);
  padding-right: var(--sp-20);
}

.section-title {
  text-align: center;
  font-size: var(--fz-52);
  font-weight: bold;
  /* padding-bottom: var(--sp-50); */
}

.section-title span {
  display: block;
  letter-spacing: 0.1em;
  font-size: var(--fz-25);
  display: flex;
  align-items: center;
  justify-content: center;
}

.section-title img {
  width: 10%;
  max-width: 60px;
  max-height: 60px;
  margin-left: var(--sp-20);
}

.section-title .sub-title {
  font-size: var(--fz-20);
  font-weight: bold;
  /* max-width: 800px; */
  text-align: center;
  margin: 0 auto;
  padding: 1em 0;
}

h2 {
  font-size: var(--fz-30);
  font-weight: bold;
  letter-spacing: 0.1em;
  line-height: 1.4;
  color: var(--main-green);
}

h3 {
  font-size: var(--fz-24);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--main-green);
  padding: 1em;
}

h4 {
  font-size: var(--fz-25);
  color: var(--black1);
  font-weight: bold;
}

th,
td {
  border: 1px solid var(--black1);
  vertical-align: middle;
  padding: 0.5em;
}

.btn.green {
  max-width: 400px;
  max-height: 50px;
  background-color: var(--main-green);
  border: 3px solid var(--main-green);
  color: #fff;
  font-size: var(--fz-20);
  padding: 1em 0.5em;
  text-align: center;
  transition: 0.2s;
  border-radius: 50px;
  margin: 0 auto;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: var(--sp-50);
}

.btn.green:hover {
  background-color: #fff;
  color: var(--main-green);
}

.btn.orange {
  max-width: 400px;
  max-height: 80px;
  background-color: var(--main-orange);
  border: 3px solid #fff;
  color: #fff;
  font-size: var(--fz-20);
  padding: 1em 0.5em;
  text-align: center;
  transition: 0.2s;
  border-radius: 50px;
  margin: 0 auto;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: var(--sp-50);
}

.btn.orange:hover {
  background-color: #fff;
  color: var(--main-orange);
  border: 3px solid var(--main-orange);
}

.apply-btn {
  border-radius: 80px;
  text-align: center;
  display: block;
  max-width: 600px;
  font-size: var(--fz-40);
  font-weight: bold;
  padding: 0.4em;
  margin: var(--sp-20) auto 0;
}

.voucher-btn {
  border-radius: 80px;
  text-align: center;
  display: block;
  max-width: 600px;
  font-size: var(--fz-30);
  font-weight: bold;
  padding: 0.4em;
  margin: var(--sp-20) auto 0;
}

.fwb {
  font-weight: bold;
}
