:root {
  --mh--breakpoint--min: 375px;
  --mh--breakpoint--sm: 640px;
  --mh--breakpoint--md: 768px;
  --mh--breakpoint--lg: 1100px;
  --mh--breakpoint--xl: 1280px;
  --mh--breakpoint--x2l: 1450px;
}

/* .cloud-band
================================================== */

.cloud-band {
  padding-bottom: 40px;
  position: relative;
  background-color: var(--mh--color--grayscale-400);
}

@media (width >= 768px ) {
  .cloud-band {
    padding-bottom: 80px;
  }
  .cloud-band::after {
    content: "";
    width: 0;
    height: 0;
    border-width: 60px 90px 0;
    border-style: solid;
    border-color: var(--mh--color--grayscale-400) transparent transparent;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* .cloud-index
================================================== */

.cloud-index__inner {
  padding-top: 40px;
}

@media (width >= 768px ) {
  .cloud-index__inner {
    padding-top: 80px;
  }
}

/* .cloud-about
================================================== */

.cloud-about__inner {
  padding-top: 40px;
  padding-bottom: 80px;
}

.cloud-about__textarea {
  margin-top: 30px;
}

.cloud-about__lead {
  font-size: var(--mh--font-size--x6l);
  line-height: var(--mh--line-height--sm);
  color: var(--mh--color--grayscale-900);
}

.cloud-about__txt {
  margin-top: 20px;
  font-size: var(--mh--font-size--xl);
  line-height: var(--mh--line-height--smd);
  letter-spacing: var(--mh--letter-spacing--sm);
}

.cloud-about__img {
  width: 100%;
  margin: 20px auto 0;
}

@media (width >= 768px ) {
  .cloud-about__inner {
    display: grid;
    padding-top: 80px;
    padding-bottom: 160px;
    grid-template-columns: minmax(0, 769fr) minmax(0, 734fr);
    column-gap: 109px;
  }
  .cloud-about__body {
    grid-row: 1;
    grid-column: 1/-1;
  }
  .cloud-about__textarea {
    width: calc((100% - 109px) * 769 / 1503);
    margin-top: calc((100% - 109px) * 300 / 1503);
  }
  .cloud-about__txt {
    margin-top: 40px;
  }
  .cloud-about__img {
    width: 100%;
    margin: 0;
    align-self: end;
    grid-row: 1;
    grid-column: 2;
  }
}

/* .cloud-support
================================================== */

.cloud-support__inner {
  padding-top: 50px;
  padding-bottom: 80px;
}

.cloud-support__head-txt {
  margin-top: 20px;
  font-size: var(--mh--font-size--md);
  line-height: var(--mh--line-height--md);
}

.cloud-support__list {
  margin-top: 30px;
}

.cloud-support__item {
  display: grid;
  padding-top: 20px;
  border-top: 1px solid var(--mh--color--grayscale-500);
  gap: 30px;
}

.cloud-support__item + .cloud-support__item {
  margin-top: 30px;
}

.cloud-support__item-content {
  display: grid;
  gap: 8px;
}

.cloud-support__item-num {
  font-size: var(--mh--font-size--x2l);
  line-height: var(--mh--line-height--xs);
  color: var(--mh--color--primary-500);
}

.cloud-support__item-head {
  font-size: var(--mh--font-size--x6l);
  line-height: var(--mh--line-height--sm);
  color: var(--mh--color--grayscale-900);
}

.cloud-support__item-tag {
  display: flex;
  margin-top: 15px;
  flex-wrap: wrap;
  gap: 5px;
}

.cloud-support__item-txt {
  margin-top: 20px;
  font-size: var(--mh--font-size--md);
  line-height: var(--mh--line-height--md);
}

.cloud-support__item-btn {
  display: grid;
  margin-top: 30px;
  gap: 5px;
}

@media (width >= 768px ) {
  .cloud-support__inner {
    padding-top: 100px;
    padding-bottom: 160px;
  }
  .cloud-support__head-area {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 60px;
  }
  .cloud-support__head {
    grid-row: 1;
    grid-column: 1/-1;
  }
  .cloud-support__head-txt {
    margin-top: 0;
    align-self: end;
    grid-row: 1;
    grid-column: 2;
    font-size: var(--mh--font-size--md);
  }
  .cloud-support__list {
    margin-top: 60px;
  }
  .cloud-support__item {
    padding-top: 80px;
    align-items: end;
    grid-template-columns: minmax(0, 1fr) 510px;
    gap: 60px;
  }
  .cloud-support__item + .cloud-support__item {
    margin-top: 100px;
  }
  .cloud-support__item-content {
    grid-template-columns: 40px minmax(0, 776px);
    gap: 20px;
  }
  .cloud-support__item-tag {
    margin-top: 30px;
    gap: 6px;
  }
  .cloud-support__item-txt {
    margin-top: 40px;
  }
  .cloud-support__item-btn {
    max-width: 450px;
    margin-top: 50px;
    gap: 10px;
  }
  .cloud-support__item-img {
    width: 510px;
    margin: 0;
  }
}