:root {
  --main-green: #6dbcbf;
  --main-red: #f09d9d;
  --sp-30: 30px;
}

@media screen and (max-width: 480px) {
  :root {
    --sp-30: 20px;
  }
}

.mt20 {
  margin: min(4vw, 20px) auto 0;
}

.mt30 {
  margin: min(6vw, 30px) auto 0;
}

.mt40 {
  margin: min(8vw, 40px) auto 0;
}

.mt50 {
  margin: min(10vw, 50px) auto 0;
}

.mt55 {
  margin: min(11vw, 55px) auto 0;
}

.mt60 {
  margin: min(12vw, 60px) auto 0;
}

.mt70 {
  margin: min(14vw, 70px) auto 0;
}

.mt80 {
  margin: min(16vw, 80px) auto 0;
}

.mt90 {
  margin: min(18vw, 90px) auto 0;
}

.mt100 {
  margin: min(20vw, 100px) auto 0;
}

.ml54 {
  margin-left: min(5.4vw, 54px);
}

.fmt5 {
  margin-top: 5px;
}

.fmt15 {
  margin-top: 15px;
}

.fmt20 {
  margin-top: 20px;
}

.fmt30 {
  margin-top: 30px;
}

.fmt40 {
  margin-top: 40px;
}

.fmt50 {
  margin-top: 50px;
}

.fmt60 {
  margin-top: 60px;
}

.fmt70 {
  margin-top: 70px;
}

.fmt80 {
  margin-top: 80px;
}

.fmt90 {
  margin-top: 90px;
}

.fmt100 {
  margin-top: 100px;
}

.pt10 {
  padding: min(2vw, 10px) 0;
}

.pt15 {
  padding: min(3vw, 15px) 0;
}

.pt20 {
  padding: min(4vw, 20px) 0;
}

.pt30 {
  padding: min(6vw, 30px) 0;
}

.pt40 {
  padding: min(8vw, 40px) 0;
}

.pt45 {
  padding-top: min(9vw, 45px);
}

.pt50 {
  padding: min(10vw, 50px) 0;
}

.pt60 {
  padding: min(12vw, 60px) 0;
}

.pt65 {
  padding: min(13vw, 65px) 0;
}

.pt70 {
  padding: min(14vw, 70px) 0;
}

.pt80 {
  padding: min(16vw, 80px) 0;
}

.pt90 {
  padding: min(18vw, 90px) 0;
}

.pt100 {
  padding: min(20vw, 100px) 0;
}

.pt45 {
  padding-top: min(4.5vw, 45px);
}

.fpt12 {
  padding-top: 12px;
}

.fpt20 {
  padding-top: 20px;
}

.fpt30 {
  padding-top: 30px;
}

.fpt40 {
  padding-top: 40px;
}

.fpt50 {
  padding-top: 50px;
}

.fpt60 {
  padding-top: 60px;
}

.fpt70 {
  padding-top: 70px;
}

.fpt80 {
  padding-top: 80px;
}

.fpt90 {
  padding-top: 90px;
}

.fpt100 {
  padding-top: 100px;
}

.fz10 {
  font-size: 10px;
}

.fz11 {
  font-size: 11px;
}

.fz12 {
  font-size: 12px;
}

.fz13 {
  font-size: 13px;
}

.fz14 {
  font-size: 14px;
}

.fz15 {
  font-size: clamp(1.4rem, 1.3rem + 0.2vw, 1.5rem);
}

.fz16 {
  font-size: clamp(1.5rem, 1.4rem + 0.2vw, 1.6rem);
}

.fz17 {
  font-size: clamp(1.6rem, 1.5rem + 0.2vw, 1.7rem);
}

.fz18 {
  font-size: clamp(1.6rem, 1.4rem + 0.4vw, 1.8rem);
}

.fz19 {
  font-size: clamp(1.7rem, 1.5rem + 0.4vw, 1.9rem);
}

.fz20 {
  font-size: clamp(1.8rem, 1.6rem + 0.4vw, 2rem);
}

.fz22 {
  font-size: clamp(2rem, 1.8rem + 0.4vw, 2.2rem);
}

.fz25 {
  font-size: clamp(2.1rem, 1.7rem + 0.8vw, 2.5rem);
}

.fz29 {
  font-size: clamp(2.5rem, 2.1rem + 0.8vw, 2.9rem);
}

.fz40 {
  font-size: clamp(3.2rem, 2.4rem + 1.6vw, 4rem);
}

.lh22 {
  line-height: 22px;
}

.lh23 {
  line-height: 23px;
}

.lh25 {
  line-height: 25px;
}

.lh28 {
  line-height: 28px;
}

.lh30 {
  line-height: 30px;
}

.lh40 {
  line-height: 40px;
}

.tac {
  text-align: center;
}

.tal {
  text-align: left;
}

.fwb {
  font-weight: bold;
}
/**************
* 基本表示
***************/
html {
  font-size: 62.5%;
}

body {
  /* フォントの種類 */
  font-family: "Noto Sans JP", sans-serif;
  /* フォントの太さ */
  font-weight: 400;
  /* フォントの色 */
  color: #000;
  font-size: clamp(1.6rem, 1.5rem + 0.2vw, 1.7rem);
  letter-spacing: 0.05rem;
  /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
  background-attachment: fixed;
  line-height: 2;
  background-color: #fff;
}

main {
  width: 100%;
  margin: 0 auto;
}

img {
  height: auto;
  max-width: 100%;
}

p {
  margin-bottom: 1em;
  line-height: 25px;
}

h1 {
  font-size: clamp(2.4rem, 1.2rem + 2.4vw, 3.6rem);
  line-height: 1.3;
  font-weight: 700;
}

h2 {
  font-size: clamp(2.1rem, 1.7rem + 0.8vw, 2.5rem);
  line-height: 1.3;
  font-weight: bold;
  text-align: center;
}

h3 {
  font-size: clamp(1.8rem, 1.4rem + 0.8vw, 2.2rem);
  line-height: 1.5;
  font-weight: bold;
  text-align: center;
}

iframe {
  max-width: 100%;
}

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}
.video-container iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}