: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;
}

/* .maas-band
================================================== */

.maas-band {
  overflow: visible;
  position: relative;
  z-index: 2;
}

.maas-band__bg {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15px), calc(50% + 27.5px) calc(100% - 15px), 50% 100%, calc(50% - 27.5px) calc(100% - 15px), 0 calc(100% - 15px));
  inset: 0;
  position: absolute;
  bottom: -15px;
  z-index: 0;
  pointer-events: none;
}

@media (width >= 768px ) {
  .maas-band__bg {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 45px), calc(50% + 75px) calc(100% - 45px), 50% 100%, calc(50% - 75px) calc(100% - 45px), 0 calc(100% - 45px));
    bottom: -45px;
  }
}

/* .maas-light-band
================================================== */

.maas-light-band {
  position: relative;
}

/* .maas-index
================================================== */

.maas-index {
  position: relative;
  z-index: 1;
}

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

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

/* .maas-exhibition
================================================== */

.maas-exhibition {
  position: relative;
  z-index: 1;
}

.maas-exhibition__inner {
  padding-top: 40px;
}

.maas-exhibition__banner {
  display: block;
  border-radius: var(--mh--border-radius--md);
  overflow: hidden;
}

.maas-exhibition__img {
  display: block;
  transition: transform var(--mh--duration) var(--mh--easing);
}

@media (width >= 768px ) {
  .maas-exhibition__inner {
    padding-top: 80px;
  }
  .maas-exhibition__banner {
    max-width: 1100px;
    margin-inline: auto;
  }
}

@media (hover: hover) and (pointer: fine) {
  .maas-exhibition__banner:hover .maas-exhibition__img {
    transform: scale(1.05);
  }
}

/* .maas-problem
================================================== */

.maas-problem {
  position: relative;
  z-index: 1;
}

.maas-problem__inner {
  padding-top: 60px;
  padding-bottom: 50px;
  position: relative;
}

.maas-problem__head {
  position: relative;
  text-align: center;
}

.maas-problem__head-txt {
  font-size: var(--mh--font-size--x6l);
  line-height: var(--mh--line-height--sm);
  color: var(--mh--color--grayscale-100);
}

.maas-problem__head-img {
  width: 80px;
  position: absolute;
  top: 20px;
  left: 79%;
}

.maas-problem__list {
  display: grid;
  margin-top: 20px;
  gap: 10px;
}

.maas-problem__item {
  display: flex;
  padding: 15px 10px;
  border-radius: var(--mh--border-radius--md);
  position: relative;
  align-items: center;
  justify-content: center;
  gap: 15px;
  background-color: var(--mh--color--grayscale-100);
}

.maas-problem__item-num {
  font-size: var(--mh--font-size--x2s);
  line-height: var(--mh--line-height--xs);
  color: var(--mh--color--primary-500);
}

.maas-problem__item-txt {
  flex: 1;
  font-size: var(--mh--font-size--md);
  line-height: var(--mh--line-height--sm);
  color: var(--mh--color--secondary-500);
}

@media (width >= 768px ) {
  .maas-problem__inner {
    padding-top: 120px;
    padding-bottom: 140px;
  }
  .maas-problem__head-txt {
    font-size: var(--mh--font-size--x6l);
    white-space: nowrap;
  }
  .maas-problem__head-img {
    width: 247px;
    top: -88px;
    right: 72px;
    left: auto;
  }
  .maas-problem__list {
    margin-top: 60px;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }
  .maas-problem__item {
    display: block;
    padding: 60px 0;
    text-align: center;
  }
  .maas-problem__item-num {
    width: 40px;
    position: absolute;
    top: 16px;
    left: 20px;
    font-size: var(--mh--font-size--x2l);
    white-space: nowrap;
  }
  .maas-problem__item-txt {
    font-size: var(--mh--font-size--x2l);
  }
}

/* .maas-support
================================================== */

.maas-support {
  overflow: hidden;
  position: relative;
  z-index: 1;
  background-color: var(--mh--color--grayscale-100);
}

.maas-support__inner {
  padding-top: 50px;
  padding-bottom: 125px;
  position: relative;
  z-index: 1;
}

.maas-support__bg-deco {
  inset-inline: 0;
  position: absolute;
  bottom: 0;
  z-index: 0;
}

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

.maas-support__list {
  display: grid;
  margin-top: 30px;
}

.maas-support__item {
  padding-top: 20px;
  border-top: 1px solid var(--mh--color--grayscale-500);
}

.maas-support__item + .maas-support__item {
  margin-top: 50px;
}

.maas-support__item:nth-of-type(2) .maas-support__item-character {
  width: 34%;
  right: -16px;
  bottom: -20px;
}

.maas-support__item:nth-of-type(3) .maas-support__item-character {
  width: 19%;
  right: -8px;
  bottom: -24px;
}

.maas-support__item-content {
  display: grid;
  gap: 10px;
}

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

.maas-support__item-body {
  display: grid;
  gap: 15px;
}

.maas-support__item-head {
  font-size: var(--mh--font-size--x6l);
  line-height: var(--mh--line-height--sm);
  text-indent: -0.5em;
  color: var(--mh--color--secondary-500);
}

.maas-support__item-txt {
  font-size: var(--mh--font-size--md);
  line-height: var(--mh--line-height--md);
}

.maas-support__item-btn {
  display: grid;
  margin-top: 10px;
  gap: 5px;
}

.maas-support__item-img {
  margin-top: 40px;
  position: relative;
}

.maas-support__item-base {
  display: block;
  width: 100%;
  height: auto;
}

.maas-support__item-character {
  width: 18%;
  height: auto;
  position: absolute;
  right: -22px;
  bottom: -28px;
}

@media (width >= 768px ) {
  .maas-support__inner {
    padding-top: 50px;
    padding-bottom: 200px;
  }
  .maas-support__head-area {
    display: grid;
    align-items: end;
    justify-content: space-between;
    grid-template-columns: max-content minmax(0, 776px);
    gap: 40px;
  }
  .maas-support__head-txt {
    margin-top: 0;
    font-size: var(--mh--font-size--md);
  }
  .maas-support__list {
    margin-top: 60px;
  }
  .maas-support__item {
    display: grid;
    padding-top: 75px;
    grid-template-columns: 1fr 510px;
    gap: 40px;
  }
  .maas-support__item + .maas-support__item {
    margin-top: 105px;
  }
  .maas-support__item:nth-of-type(2) .maas-support__item-character {
    width: 42%;
    right: -70px;
    bottom: -56px;
  }
  .maas-support__item:nth-of-type(3) .maas-support__item-character {
    width: 25%;
    right: -42px;
    bottom: -32px;
  }
  .maas-support__item-content {
    grid-template-columns: 60px 1fr;
    gap: 0;
  }
  .maas-support__item-img {
    margin-top: 0;
  }
  .maas-support__item-num {
    font-size: var(--mh--font-size--x3l);
  }
  .maas-support__item-body {
    display: block;
    gap: 0;
  }
  .maas-support__item-txt {
    max-width: 776px;
    margin-top: 30px;
    font-size: var(--mh--font-size--md);
  }
  .maas-support__item-btn {
    max-width: 450px;
    margin-top: 50px;
    gap: 10px;
  }
  .maas-support__item-character {
    width: 25%;
    right: -32px;
    bottom: -68px;
  }
}

/* .maas-voice
================================================== */

.maas-voice {
  overflow: hidden;
  position: relative;
}

.maas-voice__inner {
  padding-top: 40px;
  padding-bottom: 80px;
  position: relative;
  z-index: 1;
}

.maas-voice__head {
  position: relative;
}

.maas-voice__head-img {
  width: 70px;
  position: absolute;
  top: 90px;
  right: 28px;
}

.maas-voice__body {
  margin-top: 30px;
}

.maas-voice__slider {
  position: relative;
}

.maas-voice__slider-meta {
  margin-bottom: 10px;
}

.maas-voice__slider-foot {
  display: grid;
  margin-top: 35px;
  gap: 20px;
  align-items: center;
  grid-template-columns: 1fr auto;
}

.maas-voice__slider-progress {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  position: relative;
  background-color: var(--mh--color--grayscale-500);
}

.maas-voice__slider-bar {
  width: 20%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: width 0.3s ease;
  background-color: var(--mh--color--primary-500);
}

.maas-voice__slider-nav {
  display: flex;
  position: static;
  gap: 10px;
}

.maas-voice__slider-arrow {
  display: grid;
  opacity: 1;
  width: 36px;
  height: 36px;
  border: 1px solid var(--mh--color--grayscale-700);
  border-radius: var(--mh--border-radius--md);
  position: static;
  top: auto;
  right: auto;
  left: auto;
  place-content: center;
  transform: none;
  background-color: transparent;
  cursor: pointer;
  color: var(--mh--color--grayscale-900);
}

.maas-voice__slider-arrow::after {
  display: inline-block;
  width: 9px;
  height: 10px;
  color: currentColor;
  content: "";
  background-color: currentcolor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%2210%22%20fill%3D%22none%22%20viewBox%3D%220%200%209%2010%22%3E%0A%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M4.43%2010%203.302%208.775%205.93%205.9H0V4.1h5.93L3.302%201.23%204.43%200%209%205l-4.57%205Z%22%2F%3E%0A%3C%2Fsvg%3E%0A");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%2210%22%20fill%3D%22none%22%20viewBox%3D%220%200%209%2010%22%3E%0A%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M4.43%2010%203.302%208.775%205.93%205.9H0V4.1h5.93L3.302%201.23%204.43%200%209%205l-4.57%205Z%22%2F%3E%0A%3C%2Fsvg%3E%0A");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: all var(--mh--duration) var(--mh--easing);
}

.maas-voice__slider-arrow.is-prev {
  transform: scale(-1, 1);
}

.maas-voice__slider-arrow:disabled {
  opacity: 0.4;
}

.maas-voice__card {
  padding: 10px;
  border-radius: var(--mh--border-radius--md);
  background-color: var(--mh--color--grayscale-100);
}

.maas-voice__card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.maas-voice__card-num {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--mh--color--grayscale-500);
  font-size: var(--mh--font-size--md);
  color: var(--mh--color--secondary-500);
}

.maas-voice__card-head {
  display: flex;
  margin-top: 15px;
  align-items: center;
  gap: 10px;
}

.maas-voice__card-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.maas-voice__card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.maas-voice__card-meta {
  flex: 1;
}

.maas-voice__card-name {
  font-size: var(--mh--font-size--lg);
  line-height: var(--mh--line-height--sm);
  color: var(--mh--color--grayscale-900);
}

.maas-voice__card-tag {
  margin-top: 5px;
  font-size: var(--mh--font-size--xs);
  line-height: var(--mh--line-height--sm);
  color: var(--mh--color--primary-500);
}

.maas-voice__card-txt {
  margin-top: 10px;
  font-size: var(--mh--font-size--sm);
  line-height: var(--mh--line-height--lg);
}

.maas-voice__card-arrow {
  display: grid;
  width: 36px;
  height: 36px;
  margin-top: 10px;
  margin-left: auto;
  border: 1px solid var(--mh--color--grayscale-700);
  border-radius: var(--mh--border-radius--md);
  place-content: center;
  background-color: var(--mh--color--grayscale-100);
}

.maas-voice__card-arrow::after {
  display: inline-block;
  width: 9px;
  height: 10px;
  color: currentColor;
  content: "";
  background-color: currentcolor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%2210%22%20fill%3D%22none%22%20viewBox%3D%220%200%209%2010%22%3E%0A%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M4.43%2010%203.302%208.775%205.93%205.9H0V4.1h5.93L3.302%201.23%204.43%200%209%205l-4.57%205Z%22%2F%3E%0A%3C%2Fsvg%3E%0A");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%2210%22%20fill%3D%22none%22%20viewBox%3D%220%200%209%2010%22%3E%0A%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M4.43%2010%203.302%208.775%205.93%205.9H0V4.1h5.93L3.302%201.23%204.43%200%209%205l-4.57%205Z%22%2F%3E%0A%3C%2Fsvg%3E%0A");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: all var(--mh--duration) var(--mh--easing);
}

@media (width >= 768px ) {
  .maas-voice__inner {
    padding-top: 80px;
    padding-bottom: 140px;
  }
  .maas-voice__head-img {
    width: 186px;
    top: 160px;
    right: 104px;
  }
  .maas-voice__body {
    margin-top: 60px;
  }
  .maas-voice__slider-meta {
    margin-bottom: 10px;
  }
  .maas-voice__slider-foot {
    gap: 20px;
  }
  .maas-voice__slider-nav {
    gap: 15px;
    translate: 0 0;
  }
  .maas-voice__card {
    padding: 15px 20px;
  }
  .maas-voice__card-head {
    margin-top: 30px;
    gap: 20px;
  }
  .maas-voice__card-avatar {
    width: 120px;
    height: 120px;
  }
  .maas-voice__card-txt {
    margin-top: 20px;
  }
  .maas-voice__card-arrow {
    margin-top: 20px;
  }
  .maas-voice__card-name {
    font-size: var(--mh--font-size--xl);
  }
  .maas-voice__card-tag {
    font-size: var(--mh--font-size--md);
  }
}

@media (hover: hover) and (pointer: fine) {
  .maas-voice__card-link:hover .maas-voice__card-arrow {
    border-color: var(--mh--color--primary-500);
    background-color: var(--mh--color--primary-500);
    color: var(--mh--color--grayscale-100);
  }
  .maas-voice__card-link:hover .maas-voice__card-arrow::after {
    animation: arrow-slide var(--mh--duration) var(--mh--easing);
  }
  .maas-voice__card-arrow {
    transition: color var(--mh--duration) var(--mh--easing), background-color var(--mh--duration) var(--mh--easing), border-color var(--mh--duration) var(--mh--easing);
  }
  .maas-voice__slider-arrow {
    transition: color var(--mh--duration) var(--mh--easing), background-color var(--mh--duration) var(--mh--easing), border-color var(--mh--duration) var(--mh--easing);
  }
  .maas-voice__slider-arrow:hover {
    border-color: var(--mh--color--primary-500);
    background-color: var(--mh--color--primary-500);
    color: var(--mh--color--grayscale-100);
  }
  .maas-voice__slider-arrow:hover::after {
    animation: arrow-slide var(--mh--duration) var(--mh--easing);
  }
}

/* .maas-feature
================================================== */

.maas-feature {
  position: relative;
  background-color: var(--mh--color--grayscale-100);
}

:not(.maas-voice) + .maas-feature {
  margin-top: var(--mh--space--md);
}

.maas-feature > * {
  position: relative;
  z-index: 1;
}

.maas-feature__bg {
  display: none;
}

@media (width >= 768px ) {
  .maas-feature {
    background-color: transparent;
  }
  .maas-feature__bg {
    display: block;
    inset: 0;
    position: absolute;
    z-index: 0;
    background-color: var(--mh--color--grayscale-100);
  }
}

@media (width >= 1450px ) {
  .maas-feature__bg {
    border-radius: var(--mh--border-radius--md);
    right: 30px;
    left: 30px;
  }
}

/* .maas-case
================================================== */

.maas-case {
  overflow: hidden;
  position: relative;
}

.maas-case__inner {
  padding-top: 30px;
}

.maas-case__head-area {
  margin-top: 10px;
  font-size: var(--mh--font-size--sm);
  line-height: var(--mh--line-height--md);
}

.maas-case__head-btn {
  margin-top: 20px;
}

.maas-case__body {
  margin-top: 30px;
}

.maas-case__tab-scroll {
  margin-bottom: 20px;
  margin-inline: calc(var(--mh--contents--padding--side) * -1);
  padding-inline: var(--mh--contents--padding--side);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.maas-case__tab-scroll::-webkit-scrollbar {
  display: none;
}

.maas-case__tab-list {
  display: flex;
  width: max-content;
  flex-wrap: nowrap;
  gap: 8px;
}

.maas-case__foot-btn {
  margin-top: 40px;
}

@media (width >= 768px ) {
  .maas-case__inner {
    padding-top: 80px;
  }
  .maas-case__head-area {
    display: grid;
    margin-top: 0;
    align-items: end;
    grid-template-columns: 1fr 320px;
    gap: 40px;
    font-size: var(--mh--font-size--md);
  }
  .maas-case__head-btn {
    margin-top: 0;
  }
  .maas-case__body {
    margin-top: 60px;
  }
  .maas-case__tab-scroll {
    margin-bottom: 25px;
    margin-inline: 0;
    padding-inline: 0;
    overflow-x: visible;
  }
  .maas-case__tab-list {
    width: 100%;
    flex-wrap: nowrap;
    gap: 8px;
  }
}