.bg-gray {
  background-color: #EFEFEF
}

.bg-white {
  background-color: #FFFFFF;
}

.color-white {
  color: #FFFFFF;
}

.color-red {
  color: #E60012;
}

.color-blue {
  color: #3355A4;
}

.bold {
  font-weight: 700;
}

.py-140 {
  padding-top: calc(140 / 1920 *100vw);
  padding-bottom: calc(140 / 1920 *100vw);
}

.px-225 {
  padding-left: calc(225 / 1920 *100vw);
  padding-right: calc(225 / 1920 *100vw);
}

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

.size-16 {
  font-size: clamp(14px, calc(16 / 1920 *100vw), 16px);
}

.size-29 {
  font-size: clamp(20px, calc(29 / 1920 *100vw), 29px);
}

.size-48 {
  font-size: clamp(26px, calc(48 / 1920 *100vw), 48px);
}

.flex {
  display: flex;
}

.justify-between {
  justify-content: space-between;
}

.gap-70 {
  gap: calc(70 / 1920 *100vw);
}

.mt-30 {
  margin-top: clamp(20px, calc(30 / 1920 *100vw), 30px);
}

.mt-70 {
  margin-top: clamp(50px, calc(70 / 1920 *100vw), 70px);
}

.flex-1 {
  flex: 1;
}

.card {
  display: flex;
  flex-direction: column;
  width: calc(50% - 35px);
  border-radius: 10px;
  box-shadow: 4px 8px 4px rgba(0, 0, 0, 0.25);
  background-color: #23B6BC;
  padding: calc(30 / 1920 *100vw) calc(30 / 1920 *100vw) calc(40 / 1920 *100vw);

  &.--s {
    width: 100%
  }
}

@media screen and (max-width: 768px) {
  .card.--s {
    width: 100%;
    max-width: none;
  }
}

.bg-green {
  background-color: #99D140;
}

.card-btn {
  display: block;
  width: calc(249 / 1920 *100vw);
  background: #FFF;
  border-radius: 10px;
  font-size: clamp(16px, calc(19 / 1920 *100vw), 19px);
  border: 1px solid #000;
  margin: calc(30 / 1920 *100vw) auto 0;
  padding: calc(17 / 1920 *100vw) calc(47 / 1920 *100vw) calc(20 / 1920 *100vw);
  color: #000;
  position: relative;
  transition: all 0.2s ease;

  &::after {
    position: absolute;
    content: '';
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    width: calc(10 / 1920 *100vw);
    height: calc(10 / 1920 *100vw);
    top: 50%;
    right: calc(20 / 1920 *100vw);
    transform: translateY(-50%) rotate(45deg);
  }

  &:hover {
    text-decoration: none;
  }
}

.w-250 {
  width: calc(250 / 1920 *100vw);
}

.mx-a {
  margin-left: auto;
  margin-right: auto;
}

.bg-lightblue {
  background-color: #E2F6FF;
}

.flex-wrap {
  flex-wrap: wrap;
}

.bg-aqua {
  background-color: #DEEEFF;
}

.size-36 {
  font-size: clamp(24px, calc(36 / 1920 *100vw), 36px);
}

.radius-10 {
  border-radius: 10px;
}

.card-s {
  display: flex;
  flex-direction: column;
  width: calc(100% - 35px);
  max-width: 460px;
  min-width: 250px;
  border-radius: 10px;
  box-shadow: 4px 8px 4px rgba(0, 0, 0, 0.25);
  background-color: #FFF;
  padding: calc(30 / 1920 *100vw) calc(30 / 1920 *100vw) calc(40 / 1920 *100vw);
}

.justify-center {
  justify-content: center;
}

.py-45 {
  padding-top: calc(45 / 1920 *100vw);
  padding-bottom: calc(45 / 1920 *100vw);
}

.px-240 {
  padding-left: calc(240 / 1920 *100vw);
  padding-right: calc(240 / 1920 *100vw);
}

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

.mt-45 {
  margin-top: calc(45 / 1920 *100vw);
}

.letter-spacing-4 {
  letter-spacing: 4px;
}

.mt-36 {
  margin-top: calc(36 / 1920 *100vw);
}

.mt-80 {
  margin-top: calc(80 / 1920 *100vw);
}

.link-text {
  >p {
    >a {
      color: #E60012;
      font-size: clamp(14px, calc(16 / 1920 *100vw), 16px);
      font-weight: 700;
      transition: all 0.2s ease;

      &:hover {
        text-decoration: none;
      }
    }
  }
}

.py-23 {
  padding-top: calc(23 / 1920 *100vw);
  padding-bottom: calc(23 / 1920 *100vw);
}

@media screen and (max-width: 768px) {
  .card {
    padding: clamp(20px, calc(30 / 768 *100vw), 30px) clamp(20px, calc(30 / 768 *100vw), 30px) clamp(30px, calc(40 / 768 *100vw), 40px);
  }

  .card-s {
    width: 100%;
    max-width: 100%;
    padding: clamp(20px, calc(30 / 768 *100vw), 30px) clamp(20px, calc(30 / 768 *100vw), 30px) clamp(30px, calc(40 / 768 *100vw), 40px);
  }

  .sp-full {
    margin: 0 calc(50% - 50vw + 8.5px);
  }

  .card-btn {
    &::after {
      display: none;
    }
  }

  .sp-flex-col {
    flex-direction: column;
  }

  .sp-gap-30 {
    gap: 30px;
  }

  .sp-w-100 {
    width: 100%;
  }

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

  .sp-px-15 {
    padding-left: clamp(15px, calc(20 / 768 *100vw), 20px);
    padding-right: clamp(15px, calc(20 / 768 *100vw), 20px);
  }

  .sp-mt-0 {
    margin-top: 0;
  }

  .sp-mt-30 {
    margin-top: clamp(20px, calc(30 / 768 *100vw), 30px);
  }

  .w-250 {
    width: calc(250 / 768 *100vw);
  }

  .sp-pb-45 {
    padding-bottom: clamp(40px, calc(45 / 768 *100vw), 45px);
  }

  .p-top9 .c-title1.sp-mb-0 {
    margin-bottom: 0;
  }
}

@media screen and (min-width: 600px) {
  .c-btn1--style4 .c-btn1__inner {
    font-size: 2rem;
  }
}

.grid {
  display: grid;
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width:1279px) {
  .xl-grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:767px) {
  .md-grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

.max-w-444px {
  max-width: 444px;
}

.flex-nowrap {
  flex-wrap: nowrap;
}