.mv {
  padding-block: 48px;
  position: relative;
  overflow: hidden
}
.mv__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden
}
.mv__bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  overflow: hidden
}
.mv__contents {
  position: relative;
  z-index: 1
}
.mv__body {
  display: grid;
  align-items: center;
  gap: 32px
}
.mv__head {
  display: grid;
  gap: 16px
}
.mv__lead {
  width: -moz-fit-content;
  width: fit-content;
  font-family: "M PLUS 1p",sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1;
  color: #fff;
  border-bottom: 1px solid #fff;
  padding-bottom: 4px
}
.mv__ttl {
  font-family: "M PLUS 1p",sans-serif;
  font-weight: 700;
  font-size: 3.4rem;
  line-height: 1;
  color: #fff
}
.mv .m-btn-01 {
  width: 340px;
  max-width: 100%;
  font-size: 1.5rem
}
.service__cta {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 32px;
  min-height: 263px;
  background: linear-gradient(95.93deg,#00cad8 0,#00818a 100%);
  border-radius: 8px;
  padding: 38px 16px;
  position: relative;
  overflow: hidden
}
.service__cta-img {
  width: 320px;
  opacity: .1;
  position: absolute;
  top: calc(50% + 24px);
  left: -102px;
  z-index: 0;
  translate: 0 -50%
}
.service__cta-img img {
  width: 100%
}
.service__cta-body {
  display: grid;
  justify-items: center;
  gap: 32px;
  position: relative;
  z-index: 1
}
.service__cta-ttl {
  font-weight: 700;
  font-size: 2.2rem;
  text-align: center;
  color: #fff
}
.service__cta-ttl span {
  color: #fffac7
}
.service__cta .m-btn-01 {
  width: 318px;
  max-width: 100%;
  padding: 14px 22px
}
.ticket__block {
  display: grid;
  gap: 24px
}
.ticket__block-body {
  display: grid;
  align-content: start;
  gap: 24px
}
.ticket__block-lead {
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.5;
  border-left: 4px solid #00818a;
  padding-left: 16px
}
.ticket__block-txt {
  font-size: 1.4rem
}
.ticket__block-img img {
  width: 100%
}
.flow__scroll.is-sb-dragging {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none
}
.flow__list {
  display: flex;
  gap: 8px;
  padding-top: 18px;
  padding-bottom: 72px
}
.flow__list::-webkit-scrollbar {
  display: none
}
.flow__bar {
  display: none
}
.flow__bar::before {
  content: "";
  display: block;
  position: absolute;
  inset: -12px 0
}
.is-sb-dragging .flow__bar {
  cursor: grabbing
}
@supports not ((animation-timeline:scroll()) and (timeline-scope:--sx)) {
  .flow__bar {
    display: none
  }
  @media screen and (max-width:767px) {
    .is-sb-js .flow__bar {
      display: block
    }
  }
}
.is-sb-off .flow__bar {
  display: none
}
.flow__bar-thumb {
  display: block;
  width: calc(100% * var(--sb-ratio,.5));
  height: 100%;
  background-color: #b9b9b9;
  border-radius: inherit;
  animation: flow-bar-thumb linear both;
  animation-timeline: --flow-sx
}
.is-sb-js .flow__bar-thumb {
  animation: none;
  translate: calc(100% * (1 - var(--sb-ratio,.5))/ var(--sb-ratio,.5) * var(--sb-progress,0)) 0
}
.flow__item {
  min-width: 148px;
  position: relative
}
.flow__item-inr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  height: 100%;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 24px 12px;
  position: relative
}
.flow__item-tag {
  font-family: Figtree,sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: .04em;
  line-height: 1;
  color: #fff;
  background-color: #00818a;
  clip-path: polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%);
  padding: 8px 20px 8px 8px;
  position: absolute;
  top: -18px;
  left: -1px
}
.flow__item-icon {
  width: 95px
}
.flow__item-icon img {
  width: 100%
}
.flow__item-ttl {
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.5;
  text-align: center
}
.flow__item-comment {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  font-weight: 700;
  font-size: 1.4rem;
  color: #00818a;
  background-color: #ecf7f7;
  border-radius: calc(infinity * 1px);
  padding: 8px;
  position: absolute;
  top: calc(100% + 16px);
  left: 0
}
.flow__item-comment::before {
  content: "";
  display: block;
  width: 14px;
  aspect-ratio: 14/12;
  clip-path: polygon(50% 0,0 100%,100% 100%);
  background-color: #ecf7f7;
  position: absolute;
  bottom: 100%;
  left: 50%;
  translate: -50% 1px
}
@keyframes flow-bar-thumb {
  to {
    translate: calc(100% * (1 - var(--sb-ratio,.5))/ var(--sb-ratio,.5)) 0
  }
}
@media screen and (min-width:768px) {
  .mv {
    padding-block: 96px
  }
  .mv__body {
    gap: 40px
  }
  .mv__head {
    gap: 24px
  }
  .mv__lead {
    font-size: 2rem
  }
  .mv__ttl {
    font-size: 5.2rem
  }
  .service__cta {
    min-height: 288px;
    background: linear-gradient(105.19deg,#00cad8 0,#00818a 100%);
    padding: 48px
  }
  .service__cta-img {
    width: 359px;
    left: -16px
  }
  .service__cta-ttl {
    font-size: 3.2rem
  }
  .service__cta .m-btn-01 {
    width: 340px;
    font-size: 1.6rem;
    padding: 16px 22px
  }
  .ticket__block {
    grid-template-columns: 1fr 380px;
    align-items: start;
    gap: 40px
  }
  .ticket__block-lead {
    font-size: 2.2rem
  }
  .ticket__block-txt {
    font-size: 1.5rem
  }
  .flow__list {
    flex-wrap: wrap;
    gap: 80px 8px;
    padding-bottom: 80px
  }
  .flow__item {
    min-width: 198px
  }
  .flow__item-inr {
    padding: 24px 20px
  }
  .flow__item-icon {
    width: 116px
  }
  .flow__item-ttl {
    font-size: 2rem
  }
  .flow__item-comment {
    font-size: 1.6rem;
    top: calc(100% + 24px)
  }
}
@media screen and (max-width:767px) {
  .flow__scroll {
    timeline-scope: --flow-sx
  }
  .flow__list {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-timeline: --flow-sx x;
    scrollbar-width: none
  }
  .flow__bar {
    display: block;
    height: 8px;
    background-color: #f3f3f3;
    border-radius: calc(infinity * 1px);
    position: relative;
    touch-action: pan-y;
    cursor: grab
  }
  .flow__item {
    flex: 1
  }
}