@font-face {
  font-family: "NotoSansJP";
  src: url("../font/NotoSansJP.ttf") format("truetype");
}
@font-face {
  font-family: "NotoSansJP Medium";
  src: url("../font/NotoSansJP-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto Medium";
  src: url("../font/Roboto-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto Regular";
  src: url("../font/Roboto-Regular.ttf") format("truetype");
}
.font-noto-350 {
  font-family: "NotoSansJP";
  font-weight: 350;
}

.font-noto-m {
  font-family: "NotoSansJP";
  font-weight: 500;
}

.font-roboto {
  font-family: "Roboto Regular";
  font-weight: 400;
}

.font-roboto-m {
  font-family: "Roboto Medium";
  font-weight: 500;
}

.nowrap {
  white-space: nowrap;
}

.pre-line {
  white-space: pre-line;
}

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

.lh-1 {
  line-height: 1;
}

.lh-2 {
  line-height: 2;
}

.color-secondary {
  color: #333333;
}

.font-sp-8 {
  font-size: 1.0666666667vw;
}

@media screen and (min-width: 768px) {
  .font-8 {
    font-size: 8px !important;
  }
}

.font-sp-9 {
  font-size: 1.2vw;
}

@media screen and (min-width: 768px) {
  .font-9 {
    font-size: 9px !important;
  }
}

.font-sp-10 {
  font-size: 1.3333333333vw;
}

@media screen and (min-width: 768px) {
  .font-10 {
    font-size: 10px !important;
  }
}

.font-sp-11 {
  font-size: 1.4666666667vw;
}

@media screen and (min-width: 768px) {
  .font-11 {
    font-size: 11px !important;
  }
}

.font-sp-12 {
  font-size: 1.6vw;
}

@media screen and (min-width: 768px) {
  .font-12 {
    font-size: 12px !important;
  }
}

.font-sp-13 {
  font-size: 1.7333333333vw;
}

@media screen and (min-width: 768px) {
  .font-13 {
    font-size: 13px !important;
  }
}

.font-sp-14 {
  font-size: 1.8666666667vw;
}

@media screen and (min-width: 768px) {
  .font-14 {
    font-size: 14px !important;
  }
}

.font-sp-15 {
  font-size: 2vw;
}

@media screen and (min-width: 768px) {
  .font-15 {
    font-size: 15px !important;
  }
}

.font-sp-16 {
  font-size: 2.1333333333vw;
}

@media screen and (min-width: 768px) {
  .font-16 {
    font-size: 16px !important;
  }
}

.font-sp-17 {
  font-size: 2.2666666667vw;
}

@media screen and (min-width: 768px) {
  .font-17 {
    font-size: 17px !important;
  }
}

.font-sp-18 {
  font-size: 2.4vw;
}

@media screen and (min-width: 768px) {
  .font-18 {
    font-size: 18px !important;
  }
}

.font-sp-19 {
  font-size: 2.5333333333vw;
}

@media screen and (min-width: 768px) {
  .font-19 {
    font-size: 19px !important;
  }
}

.font-sp-20 {
  font-size: 2.6666666667vw;
}

@media screen and (min-width: 768px) {
  .font-20 {
    font-size: 20px !important;
  }
}

.font-sp-21 {
  font-size: 2.8vw;
}

@media screen and (min-width: 768px) {
  .font-21 {
    font-size: 21px !important;
  }
}

.font-sp-22 {
  font-size: 2.9333333333vw;
}

@media screen and (min-width: 768px) {
  .font-22 {
    font-size: 22px !important;
  }
}

.font-sp-23 {
  font-size: 3.0666666667vw;
}

@media screen and (min-width: 768px) {
  .font-23 {
    font-size: 23px !important;
  }
}

.font-sp-24 {
  font-size: 3.2vw;
}

@media screen and (min-width: 768px) {
  .font-24 {
    font-size: 24px !important;
  }
}

.font-sp-25 {
  font-size: 3.3333333333vw;
}

@media screen and (min-width: 768px) {
  .font-25 {
    font-size: 25px !important;
  }
}

.font-sp-26 {
  font-size: 3.4666666667vw;
}

@media screen and (min-width: 768px) {
  .font-26 {
    font-size: 26px !important;
  }
}

.font-sp-27 {
  font-size: 3.6vw;
}

@media screen and (min-width: 768px) {
  .font-27 {
    font-size: 27px !important;
  }
}

.font-sp-28 {
  font-size: 3.7333333333vw;
}

@media screen and (min-width: 768px) {
  .font-28 {
    font-size: 28px !important;
  }
}

.font-sp-29 {
  font-size: 3.8666666667vw;
}

@media screen and (min-width: 768px) {
  .font-29 {
    font-size: 29px !important;
  }
}

.font-sp-30 {
  font-size: 4vw;
}

@media screen and (min-width: 768px) {
  .font-30 {
    font-size: 30px !important;
  }
}

.font-sp-31 {
  font-size: 4.1333333333vw;
}

@media screen and (min-width: 768px) {
  .font-31 {
    font-size: 31px !important;
  }
}

.font-sp-32 {
  font-size: 4.2666666667vw;
}

@media screen and (min-width: 768px) {
  .font-32 {
    font-size: 32px !important;
  }
}

.font-sp-33 {
  font-size: 4.4vw;
}

@media screen and (min-width: 768px) {
  .font-33 {
    font-size: 33px !important;
  }
}

.font-sp-34 {
  font-size: 4.5333333333vw;
}

@media screen and (min-width: 768px) {
  .font-34 {
    font-size: 34px !important;
  }
}

.font-sp-35 {
  font-size: 4.6666666667vw;
}

@media screen and (min-width: 768px) {
  .font-35 {
    font-size: 35px !important;
  }
}

.font-sp-36 {
  font-size: 4.8vw;
}

@media screen and (min-width: 768px) {
  .font-36 {
    font-size: 36px !important;
  }
}

.font-sp-37 {
  font-size: 4.9333333333vw;
}

@media screen and (min-width: 768px) {
  .font-37 {
    font-size: 37px !important;
  }
}

.font-sp-38 {
  font-size: 5.0666666667vw;
}

@media screen and (min-width: 768px) {
  .font-38 {
    font-size: 38px !important;
  }
}

.font-sp-39 {
  font-size: 5.2vw;
}

@media screen and (min-width: 768px) {
  .font-39 {
    font-size: 39px !important;
  }
}

.font-sp-40 {
  font-size: 5.3333333333vw;
}

@media screen and (min-width: 768px) {
  .font-40 {
    font-size: 40px !important;
  }
}

.font-sp-41 {
  font-size: 5.4666666667vw;
}

@media screen and (min-width: 768px) {
  .font-41 {
    font-size: 41px !important;
  }
}

.font-sp-42 {
  font-size: 5.6vw;
}

@media screen and (min-width: 768px) {
  .font-42 {
    font-size: 42px !important;
  }
}

.font-sp-43 {
  font-size: 5.7333333333vw;
}

@media screen and (min-width: 768px) {
  .font-43 {
    font-size: 43px !important;
  }
}

.font-sp-44 {
  font-size: 5.8666666667vw;
}

@media screen and (min-width: 768px) {
  .font-44 {
    font-size: 44px !important;
  }
}

.font-sp-45 {
  font-size: 6vw;
}

@media screen and (min-width: 768px) {
  .font-45 {
    font-size: 45px !important;
  }
}

.font-sp-46 {
  font-size: 6.1333333333vw;
}

@media screen and (min-width: 768px) {
  .font-46 {
    font-size: 46px !important;
  }
}

.font-sp-47 {
  font-size: 6.2666666667vw;
}

@media screen and (min-width: 768px) {
  .font-47 {
    font-size: 47px !important;
  }
}

.font-sp-48 {
  font-size: 6.4vw;
}

@media screen and (min-width: 768px) {
  .font-48 {
    font-size: 48px !important;
  }
}

.font-sp-49 {
  font-size: 6.5333333333vw;
}

@media screen and (min-width: 768px) {
  .font-49 {
    font-size: 49px !important;
  }
}

.font-sp-50 {
  font-size: 6.6666666667vw;
}

@media screen and (min-width: 768px) {
  .font-50 {
    font-size: 50px !important;
  }
}

.font-sp-51 {
  font-size: 6.8vw;
}

@media screen and (min-width: 768px) {
  .font-51 {
    font-size: 51px !important;
  }
}

.font-sp-52 {
  font-size: 6.9333333333vw;
}

@media screen and (min-width: 768px) {
  .font-52 {
    font-size: 52px !important;
  }
}

.font-sp-53 {
  font-size: 7.0666666667vw;
}

@media screen and (min-width: 768px) {
  .font-53 {
    font-size: 53px !important;
  }
}

.font-sp-54 {
  font-size: 7.2vw;
}

@media screen and (min-width: 768px) {
  .font-54 {
    font-size: 54px !important;
  }
}

.font-sp-55 {
  font-size: 7.3333333333vw;
}

@media screen and (min-width: 768px) {
  .font-55 {
    font-size: 55px !important;
  }
}

.font-sp-56 {
  font-size: 7.4666666667vw;
}

@media screen and (min-width: 768px) {
  .font-56 {
    font-size: 56px !important;
  }
}

.font-sp-57 {
  font-size: 7.6vw;
}

@media screen and (min-width: 768px) {
  .font-57 {
    font-size: 57px !important;
  }
}

.font-sp-58 {
  font-size: 7.7333333333vw;
}

@media screen and (min-width: 768px) {
  .font-58 {
    font-size: 58px !important;
  }
}

.font-sp-59 {
  font-size: 7.8666666667vw;
}

@media screen and (min-width: 768px) {
  .font-59 {
    font-size: 59px !important;
  }
}

.font-sp-60 {
  font-size: 8vw;
}

@media screen and (min-width: 768px) {
  .font-60 {
    font-size: 60px !important;
  }
}

.font-sp-61 {
  font-size: 8.1333333333vw;
}

@media screen and (min-width: 768px) {
  .font-61 {
    font-size: 61px !important;
  }
}

.font-sp-62 {
  font-size: 8.2666666667vw;
}

@media screen and (min-width: 768px) {
  .font-62 {
    font-size: 62px !important;
  }
}

.font-sp-63 {
  font-size: 8.4vw;
}

@media screen and (min-width: 768px) {
  .font-63 {
    font-size: 63px !important;
  }
}

.font-sp-64 {
  font-size: 8.5333333333vw;
}

@media screen and (min-width: 768px) {
  .font-64 {
    font-size: 64px !important;
  }
}

.font-sp-65 {
  font-size: 8.6666666667vw;
}

@media screen and (min-width: 768px) {
  .font-65 {
    font-size: 65px !important;
  }
}

.font-sp-66 {
  font-size: 8.8vw;
}

@media screen and (min-width: 768px) {
  .font-66 {
    font-size: 66px !important;
  }
}

.font-sp-67 {
  font-size: 8.9333333333vw;
}

@media screen and (min-width: 768px) {
  .font-67 {
    font-size: 67px !important;
  }
}

.font-sp-68 {
  font-size: 9.0666666667vw;
}

@media screen and (min-width: 768px) {
  .font-68 {
    font-size: 68px !important;
  }
}

.font-sp-69 {
  font-size: 9.2vw;
}

@media screen and (min-width: 768px) {
  .font-69 {
    font-size: 69px !important;
  }
}

.font-sp-70 {
  font-size: 9.3333333333vw;
}

@media screen and (min-width: 768px) {
  .font-70 {
    font-size: 70px !important;
  }
}

.font-sp-71 {
  font-size: 9.4666666667vw;
}

@media screen and (min-width: 768px) {
  .font-71 {
    font-size: 71px !important;
  }
}

.font-sp-72 {
  font-size: 9.6vw;
}

@media screen and (min-width: 768px) {
  .font-72 {
    font-size: 72px !important;
  }
}

.font-sp-73 {
  font-size: 9.7333333333vw;
}

@media screen and (min-width: 768px) {
  .font-73 {
    font-size: 73px !important;
  }
}

.font-sp-74 {
  font-size: 9.8666666667vw;
}

@media screen and (min-width: 768px) {
  .font-74 {
    font-size: 74px !important;
  }
}

.font-sp-75 {
  font-size: 10vw;
}

@media screen and (min-width: 768px) {
  .font-75 {
    font-size: 75px !important;
  }
}

.font-sp-76 {
  font-size: 10.1333333333vw;
}

@media screen and (min-width: 768px) {
  .font-76 {
    font-size: 76px !important;
  }
}

.font-sp-77 {
  font-size: 10.2666666667vw;
}

@media screen and (min-width: 768px) {
  .font-77 {
    font-size: 77px !important;
  }
}

.font-sp-78 {
  font-size: 10.4vw;
}

@media screen and (min-width: 768px) {
  .font-78 {
    font-size: 78px !important;
  }
}

.font-sp-79 {
  font-size: 10.5333333333vw;
}

@media screen and (min-width: 768px) {
  .font-79 {
    font-size: 79px !important;
  }
}

.font-sp-80 {
  font-size: 10.6666666667vw;
}

@media screen and (min-width: 768px) {
  .font-80 {
    font-size: 80px !important;
  }
}

.pb-sp-80 {
  padding-bottom: 42.6666666667vw;
}

@media screen and (min-width: 768px) {
  .pb-80 {
    padding-bottom: 320px !important;
  }
}

.pb-sp-79 {
  padding-bottom: 42.1333333333vw;
}

@media screen and (min-width: 768px) {
  .pb-79 {
    padding-bottom: 316px !important;
  }
}

.pb-sp-78 {
  padding-bottom: 41.6vw;
}

@media screen and (min-width: 768px) {
  .pb-78 {
    padding-bottom: 312px !important;
  }
}

.pb-sp-77 {
  padding-bottom: 41.0666666667vw;
}

@media screen and (min-width: 768px) {
  .pb-77 {
    padding-bottom: 308px !important;
  }
}

.pb-sp-76 {
  padding-bottom: 40.5333333333vw;
}

@media screen and (min-width: 768px) {
  .pb-76 {
    padding-bottom: 304px !important;
  }
}

.pb-sp-75 {
  padding-bottom: 40vw;
}

@media screen and (min-width: 768px) {
  .pb-75 {
    padding-bottom: 300px !important;
  }
}

.pb-sp-74 {
  padding-bottom: 39.4666666667vw;
}

@media screen and (min-width: 768px) {
  .pb-74 {
    padding-bottom: 296px !important;
  }
}

.pb-sp-73 {
  padding-bottom: 38.9333333333vw;
}

@media screen and (min-width: 768px) {
  .pb-73 {
    padding-bottom: 292px !important;
  }
}

.pb-sp-72 {
  padding-bottom: 38.4vw;
}

@media screen and (min-width: 768px) {
  .pb-72 {
    padding-bottom: 288px !important;
  }
}

.pb-sp-71 {
  padding-bottom: 37.8666666667vw;
}

@media screen and (min-width: 768px) {
  .pb-71 {
    padding-bottom: 284px !important;
  }
}

.pb-sp-70 {
  padding-bottom: 37.3333333333vw;
}

@media screen and (min-width: 768px) {
  .pb-70 {
    padding-bottom: 280px !important;
  }
}

.pb-sp-69 {
  padding-bottom: 36.8vw;
}

@media screen and (min-width: 768px) {
  .pb-69 {
    padding-bottom: 276px !important;
  }
}

.pb-sp-68 {
  padding-bottom: 36.2666666667vw;
}

@media screen and (min-width: 768px) {
  .pb-68 {
    padding-bottom: 272px !important;
  }
}

.pb-sp-67 {
  padding-bottom: 35.7333333333vw;
}

@media screen and (min-width: 768px) {
  .pb-67 {
    padding-bottom: 268px !important;
  }
}

.pb-sp-66 {
  padding-bottom: 35.2vw;
}

@media screen and (min-width: 768px) {
  .pb-66 {
    padding-bottom: 264px !important;
  }
}

.pb-sp-65 {
  padding-bottom: 34.6666666667vw;
}

@media screen and (min-width: 768px) {
  .pb-65 {
    padding-bottom: 260px !important;
  }
}

.pb-sp-64 {
  padding-bottom: 34.1333333333vw;
}

@media screen and (min-width: 768px) {
  .pb-64 {
    padding-bottom: 256px !important;
  }
}

.pb-sp-63 {
  padding-bottom: 33.6vw;
}

@media screen and (min-width: 768px) {
  .pb-63 {
    padding-bottom: 252px !important;
  }
}

.pb-sp-62 {
  padding-bottom: 33.0666666667vw;
}

@media screen and (min-width: 768px) {
  .pb-62 {
    padding-bottom: 248px !important;
  }
}

.pb-sp-61 {
  padding-bottom: 32.5333333333vw;
}

@media screen and (min-width: 768px) {
  .pb-61 {
    padding-bottom: 244px !important;
  }
}

.pb-sp-60 {
  padding-bottom: 32vw;
}

@media screen and (min-width: 768px) {
  .pb-60 {
    padding-bottom: 240px !important;
  }
}

.pb-sp-59 {
  padding-bottom: 31.4666666667vw;
}

@media screen and (min-width: 768px) {
  .pb-59 {
    padding-bottom: 236px !important;
  }
}

.pb-sp-58 {
  padding-bottom: 30.9333333333vw;
}

@media screen and (min-width: 768px) {
  .pb-58 {
    padding-bottom: 232px !important;
  }
}

.pb-sp-57 {
  padding-bottom: 30.4vw;
}

@media screen and (min-width: 768px) {
  .pb-57 {
    padding-bottom: 228px !important;
  }
}

.pb-sp-56 {
  padding-bottom: 29.8666666667vw;
}

@media screen and (min-width: 768px) {
  .pb-56 {
    padding-bottom: 224px !important;
  }
}

.pb-sp-55 {
  padding-bottom: 29.3333333333vw;
}

@media screen and (min-width: 768px) {
  .pb-55 {
    padding-bottom: 220px !important;
  }
}

.pb-sp-54 {
  padding-bottom: 28.8vw;
}

@media screen and (min-width: 768px) {
  .pb-54 {
    padding-bottom: 216px !important;
  }
}

.pb-sp-53 {
  padding-bottom: 28.2666666667vw;
}

@media screen and (min-width: 768px) {
  .pb-53 {
    padding-bottom: 212px !important;
  }
}

.pb-sp-52 {
  padding-bottom: 27.7333333333vw;
}

@media screen and (min-width: 768px) {
  .pb-52 {
    padding-bottom: 208px !important;
  }
}

.pb-sp-51 {
  padding-bottom: 27.2vw;
}

@media screen and (min-width: 768px) {
  .pb-51 {
    padding-bottom: 204px !important;
  }
}

.pb-sp-50 {
  padding-bottom: 26.6666666667vw;
}

@media screen and (min-width: 768px) {
  .pb-50 {
    padding-bottom: 200px !important;
  }
}

.pb-sp-49 {
  padding-bottom: 26.1333333333vw;
}

@media screen and (min-width: 768px) {
  .pb-49 {
    padding-bottom: 196px !important;
  }
}

.pb-sp-48 {
  padding-bottom: 25.6vw;
}

@media screen and (min-width: 768px) {
  .pb-48 {
    padding-bottom: 192px !important;
  }
}

.pb-sp-47 {
  padding-bottom: 25.0666666667vw;
}

@media screen and (min-width: 768px) {
  .pb-47 {
    padding-bottom: 188px !important;
  }
}

.pb-sp-46 {
  padding-bottom: 24.5333333333vw;
}

@media screen and (min-width: 768px) {
  .pb-46 {
    padding-bottom: 184px !important;
  }
}

.pb-sp-45 {
  padding-bottom: 24vw;
}

@media screen and (min-width: 768px) {
  .pb-45 {
    padding-bottom: 180px !important;
  }
}

.pb-sp-44 {
  padding-bottom: 23.4666666667vw;
}

@media screen and (min-width: 768px) {
  .pb-44 {
    padding-bottom: 176px !important;
  }
}

.pb-sp-43 {
  padding-bottom: 22.9333333333vw;
}

@media screen and (min-width: 768px) {
  .pb-43 {
    padding-bottom: 172px !important;
  }
}

.pb-sp-42 {
  padding-bottom: 22.4vw;
}

@media screen and (min-width: 768px) {
  .pb-42 {
    padding-bottom: 168px !important;
  }
}

.pb-sp-41 {
  padding-bottom: 21.8666666667vw;
}

@media screen and (min-width: 768px) {
  .pb-41 {
    padding-bottom: 164px !important;
  }
}

.pb-sp-40 {
  padding-bottom: 21.3333333333vw;
}

@media screen and (min-width: 768px) {
  .pb-40 {
    padding-bottom: 160px !important;
  }
}

.pb-sp-39 {
  padding-bottom: 20.8vw;
}

@media screen and (min-width: 768px) {
  .pb-39 {
    padding-bottom: 156px !important;
  }
}

.pb-sp-38 {
  padding-bottom: 20.2666666667vw;
}

@media screen and (min-width: 768px) {
  .pb-38 {
    padding-bottom: 152px !important;
  }
}

.pb-sp-37 {
  padding-bottom: 19.7333333333vw;
}

@media screen and (min-width: 768px) {
  .pb-37 {
    padding-bottom: 148px !important;
  }
}

.pb-sp-36 {
  padding-bottom: 19.2vw;
}

@media screen and (min-width: 768px) {
  .pb-36 {
    padding-bottom: 144px !important;
  }
}

.pb-sp-35 {
  padding-bottom: 18.6666666667vw;
}

@media screen and (min-width: 768px) {
  .pb-35 {
    padding-bottom: 140px !important;
  }
}

.pb-sp-34 {
  padding-bottom: 18.1333333333vw;
}

@media screen and (min-width: 768px) {
  .pb-34 {
    padding-bottom: 136px !important;
  }
}

.pb-sp-33 {
  padding-bottom: 17.6vw;
}

@media screen and (min-width: 768px) {
  .pb-33 {
    padding-bottom: 132px !important;
  }
}

.pb-sp-32 {
  padding-bottom: 17.0666666667vw;
}

@media screen and (min-width: 768px) {
  .pb-32 {
    padding-bottom: 128px !important;
  }
}

.pb-sp-31 {
  padding-bottom: 16.5333333333vw;
}

@media screen and (min-width: 768px) {
  .pb-31 {
    padding-bottom: 124px !important;
  }
}

.pb-sp-30 {
  padding-bottom: 16vw;
}

@media screen and (min-width: 768px) {
  .pb-30 {
    padding-bottom: 120px !important;
  }
}

.pb-sp-29 {
  padding-bottom: 15.4666666667vw;
}

@media screen and (min-width: 768px) {
  .pb-29 {
    padding-bottom: 116px !important;
  }
}

.pb-sp-28 {
  padding-bottom: 14.9333333333vw;
}

@media screen and (min-width: 768px) {
  .pb-28 {
    padding-bottom: 112px !important;
  }
}

.pb-sp-27 {
  padding-bottom: 14.4vw;
}

@media screen and (min-width: 768px) {
  .pb-27 {
    padding-bottom: 108px !important;
  }
}

.pb-sp-26 {
  padding-bottom: 13.8666666667vw;
}

@media screen and (min-width: 768px) {
  .pb-26 {
    padding-bottom: 104px !important;
  }
}

.pb-sp-25 {
  padding-bottom: 13.3333333333vw;
}

@media screen and (min-width: 768px) {
  .pb-25 {
    padding-bottom: 100px !important;
  }
}

.pb-sp-24 {
  padding-bottom: 12.8vw;
}

@media screen and (min-width: 768px) {
  .pb-24 {
    padding-bottom: 96px !important;
  }
}

.pb-sp-23 {
  padding-bottom: 12.2666666667vw;
}

@media screen and (min-width: 768px) {
  .pb-23 {
    padding-bottom: 92px !important;
  }
}

.pb-sp-22 {
  padding-bottom: 11.7333333333vw;
}

@media screen and (min-width: 768px) {
  .pb-22 {
    padding-bottom: 88px !important;
  }
}

.pb-sp-21 {
  padding-bottom: 11.2vw;
}

@media screen and (min-width: 768px) {
  .pb-21 {
    padding-bottom: 84px !important;
  }
}

.pb-sp-20 {
  padding-bottom: 10.6666666667vw;
}

@media screen and (min-width: 768px) {
  .pb-20 {
    padding-bottom: 80px !important;
  }
}

.pb-sp-19 {
  padding-bottom: 10.1333333333vw;
}

@media screen and (min-width: 768px) {
  .pb-19 {
    padding-bottom: 76px !important;
  }
}

.pb-sp-18 {
  padding-bottom: 9.6vw;
}

@media screen and (min-width: 768px) {
  .pb-18 {
    padding-bottom: 72px !important;
  }
}

.pb-sp-17 {
  padding-bottom: 9.0666666667vw;
}

@media screen and (min-width: 768px) {
  .pb-17 {
    padding-bottom: 68px !important;
  }
}

.pb-sp-16 {
  padding-bottom: 8.5333333333vw;
}

@media screen and (min-width: 768px) {
  .pb-16 {
    padding-bottom: 64px !important;
  }
}

.pb-sp-15 {
  padding-bottom: 8vw;
}

@media screen and (min-width: 768px) {
  .pb-15 {
    padding-bottom: 60px !important;
  }
}

.pb-sp-14 {
  padding-bottom: 7.4666666667vw;
}

@media screen and (min-width: 768px) {
  .pb-14 {
    padding-bottom: 56px !important;
  }
}

.pb-sp-13 {
  padding-bottom: 6.9333333333vw;
}

@media screen and (min-width: 768px) {
  .pb-13 {
    padding-bottom: 52px !important;
  }
}

.pb-sp-12 {
  padding-bottom: 6.4vw;
}

@media screen and (min-width: 768px) {
  .pb-12 {
    padding-bottom: 48px !important;
  }
}

.pb-sp-11 {
  padding-bottom: 5.8666666667vw;
}

@media screen and (min-width: 768px) {
  .pb-11 {
    padding-bottom: 44px !important;
  }
}

.pb-sp-10 {
  padding-bottom: 5.3333333333vw;
}

@media screen and (min-width: 768px) {
  .pb-10 {
    padding-bottom: 40px !important;
  }
}

.pb-sp-9 {
  padding-bottom: 4.8vw;
}

@media screen and (min-width: 768px) {
  .pb-9 {
    padding-bottom: 36px !important;
  }
}

.pb-sp-8 {
  padding-bottom: 4.2666666667vw;
}

@media screen and (min-width: 768px) {
  .pb-8 {
    padding-bottom: 32px !important;
  }
}

.pb-sp-7 {
  padding-bottom: 3.7333333333vw;
}

@media screen and (min-width: 768px) {
  .pb-7 {
    padding-bottom: 28px !important;
  }
}

.pb-sp-6 {
  padding-bottom: 3.2vw;
}

@media screen and (min-width: 768px) {
  .pb-6 {
    padding-bottom: 24px !important;
  }
}

.pb-sp-5 {
  padding-bottom: 2.6666666667vw;
}

@media screen and (min-width: 768px) {
  .pb-5 {
    padding-bottom: 20px !important;
  }
}

.pb-sp-4 {
  padding-bottom: 2.1333333333vw;
}

@media screen and (min-width: 768px) {
  .pb-4 {
    padding-bottom: 16px !important;
  }
}

.pb-sp-3 {
  padding-bottom: 1.6vw;
}

@media screen and (min-width: 768px) {
  .pb-3 {
    padding-bottom: 12px !important;
  }
}

.pb-sp-2 {
  padding-bottom: 1.0666666667vw;
}

@media screen and (min-width: 768px) {
  .pb-2 {
    padding-bottom: 8px !important;
  }
}

.pb-sp-1 {
  padding-bottom: 0.5333333333vw;
}

@media screen and (min-width: 768px) {
  .pb-1 {
    padding-bottom: 4px !important;
  }
}

.pb-sp-0 {
  padding-bottom: 0vw;
}

@media screen and (min-width: 768px) {
  .pb-0 {
    padding-bottom: 0px !important;
  }
}

.hide {
  display: none !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.btn {
  cursor: pointer;
  border: none;
  outline: none;
  display: inline-block;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 57.7333333333vw;
  height: 13.3333333333vw;
  border-radius: 6.6666666667vw;
  background-color: #3563d7;
  color: white;
}
.btn:hover {
  background-color: #5fa0f9;
}
@media screen and (min-width: 768px) {
  .btn {
    width: 260px;
    height: 60px;
    border-radius: 30px;
  }
}

.black-theme .btn {
  background-color: #0a3468;
}
.black-theme .btn:hover {
  background-color: #7495be;
}

.green-theme .btn {
  background-color: #0bb291;
}
.green-theme .btn:hover {
  background-color: #16e8d0;
}

.pink-theme .btn {
  background-color: #ff5ac7;
}
.pink-theme .btn:hover {
  background-color: #ff94f3;
}

.yellow-theme .btn {
  background-color: #ffa800;
}
.yellow-theme .btn:hover {
  background-color: #ffe100;
}