/* Utility Classes */
.mt-0 {
  margin-top: 0 !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

.mb-70 {
  margin-bottom: 70px !important;

  @media screen and (max-width: 767px) {
    margin-bottom: 60px !important;
  }
}

/* Override Classes */
.section {
  @media screen and (max-width: 767px) {
    padding-block: 60px;
  }
}
.heading-a.tight {
  @media screen and (max-width: 767px) {
    letter-spacing: .08em;
  }
}

.lead.tight {
  @media screen and (max-width: 767px) {
    letter-spacing: .16em;
  }
}

.lead.tighter {
  @media screen and (min-width: 768px) {
    letter-spacing: .14em;
  }
}

.hero__heading .toc {
  @media screen and (max-width: 767px) {
    letter-spacing: .11em;
  }
}

.columns__column.support {
  @media screen and (max-width: 768px) {
    text-align: center;
  }

  & .image__content {
    @media screen and (max-width: 768px) {
      max-width:66%;
    }
  }
}

/* Problem */
.problem {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18vw, 1fr));
  column-gap: 50px;
  row-gap: 30px;
  text-align: center;

  @media screen and (max-width: 1050px) {
    grid-template-columns: 1fr;
    row-gap: 60px;
  }

  & li {
    display: grid;
    grid-template-rows: subgrid;
    row-gap: 30px;
    grid-row: span 3;
  }

  & h3 {
    font-size: 22px;
    font-weight: bold;
    letter-spacing: .2em;
    line-height: 2em;

    @media screen and (max-width: 767px) {
      font-size: 16px;
      line-height: 1.5em;
    }
  }

  & img {
    width: min(300px, 100%);
    aspect-ratio: 1;

    @media screen and (max-width: 767px) {
      width: min(240px, 100%);
      aspect-ratio: unset;
    }
  }

  & .paragraph {
    text-align: left;
    margin: 0;
  }
}

/* Solution */
.solution {
  padding-block: 40px 60px;
  text-align: center;

  @media screen and (max-width: 767px) {
    padding-bottom: 34px;
  }

  & p {
    font-size: 20px;
    font-weight: bold;
    letter-spacing: .16em;
    line-height: 33px;

    @media screen and (max-width: 767px) {
      font-size: 16px;
      line-height: 22px;
    }
  }
}

.solution__icon {
  width: 200px;
  height: 77px;
  margin-inline: auto;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iNzcuMjA0IiB2aWV3Qm94PSIwIDAgMjAwIDc3LjIwNCI+PHBhdGggZD0iTTEwMCwwLDIwMCw3Ny4ySDBaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMDAgNzcuMjA0KSByb3RhdGUoMTgwKSIgZmlsbD0iI2M5Y2ZkNyIvPjwvc3ZnPg==');
  background-size: contain;
  background-repeat: no-repeat;
  margin-bottom: 40px;

  @media screen and (max-width: 767px) {
    width: 140px;
    height: 54px;
  }
}

.solution__list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
  margin-block: 30px;

  @media screen and (max-width: 767px) {
    flex-direction: column;
    gap: 20px;
  }
}

.solution__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(355px, calc(50% - 25px));
  height: 70px;
  background-color: white;
  border: 1px solid #084e8b;
  border-radius: 55px;
  flex-shrink: 0;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: .16em;
  line-height: 33px;

  @media screen and (max-width: 767px) {
    width: min(100%, 355px);
    height: 60px;
    font-size: 18px;
  }
}

/* Service */
.service {
  padding-top: 0;
}

.service__main-title {
  padding-block: 97px 170px;
  margin-bottom: 48px;
  text-align: center;
  background: linear-gradient(#f3f6f8 0%, #f3f6f8 40%, #fff 41%);
  position: relative;
  z-index: 1;

  @media screen and (max-width: 767px) {
    padding-block: 50px 85px;
    margin-bottom: 36px;
  }

  & .service__arrow {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 329px;
    height: 100%;
    z-index: -1;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMzI5IiBoZWlnaHQ9IjQzMCIgdmlld0JveD0iMCAwIDMyOSA0MzAiPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iYSIgeDE9IjAuMDEyIiB5MT0iMC43MDUiIHgyPSIxIiB5Mj0iMC43MDUiIGdyYWRpZW50VW5pdHM9Im9iamVjdEJvdW5kaW5nQm94Ij48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiM0N2I3ZTMiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMwNzRjODgiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cGF0aCBkPSJNNjI4Niw3Mzc5aDcwLjI4M1Y3MDc2aDE4OC40MzR2MzAzSDY2MTVsLTE2NC41LDEyN1oiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02Mjg2IC03MDc2KSIgZmlsbD0idXJsKCNhKSIvPjwvc3ZnPg==');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    @media screen and (max-width: 767px) {
      width: 45vw;
      background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTY4IiBoZWlnaHQ9IjI5MSIgdmlld0JveD0iMCAwIDE2OCAyOTEiPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iYSIgeDE9IjAuMDEyIiB5MT0iMC43MDUiIHgyPSIxIiB5Mj0iMC43MDUiIGdyYWRpZW50VW5pdHM9Im9iamVjdEJvdW5kaW5nQm94Ij48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiM0N2I3ZTMiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMwNzRjODgiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cGF0aCBkPSJNNjI4Niw3MzAyLjAyMmgzNS44OVY3MDc2aDk2LjIyMXYyMjYuMDIzSDY0NTRMNjM3MCw3MzY3WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTYyODYgLTcwNzYpIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+');
    }
  }

  & h2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-inline: auto;
    padding: 30px 60px;
    background-color: white;
    border: 2px solid #1c7fbd;
    border-radius: 10px;
    font-size: min(36px, 3vw);
    letter-spacing: .2em;
    line-height: 1.55em;
    font-weight: bold;

    @media screen and (max-width: 767px) {
      padding: 20px;
      font-size: 20px;
      letter-spacing: .1em;
    }
  }
}

.service__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 70px;

  @media screen and (max-width: 1000px) {
    grid-template-columns: 1fr;
    gap: 60px;
  }
}

.service__item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  gap: 30px;

  & .paragraph {
    margin: 0;
  }

  & .button__anchor {
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 103px;
    border-radius: 55px;
    letter-spacing: .16em;

    @media screen and (max-width: 1000px) {
      min-height: 60px;
      letter-spacing: .08em;
      font-size: 16px;
    }
  }

  & .button__anchor__icon {
    display: flex;
    align-items: center;

    &::after {
      @media screen and (max-width: 1000px) {
        width: 10px;
        height: 13px;
        background-size: contain;
        right: -12px;
      }
    }
  }

  &:last-child {
    & .service__title h3 {
      letter-spacing: 0.07em;

      @media screen and (max-width: 1000px) {
        letter-spacing: 0.1em;
      }
    }

    & .service__detail-list li:nth-child(-n + 2) {
      @media screen and (max-width: 1000px) {
        letter-spacing: 0.16em;
      }
    }

    & .button__anchor {
      @media screen and (max-width: 1000px) {
        letter-spacing: 0;
      }
    }
  }

  &:nth-child(even) {
    & .paragraph {
      letter-spacing: 0.16em;
    }

    & .button__anchor {
      @media screen and (min-width: 1000px) {
        letter-spacing: .05em;
      }
    }
  }

  &:nth-child(3) {
    & .service__detail-list li:first-child {
      @media screen and (max-width: 1000px) {
        letter-spacing: 0.16em;
      }
    }
  }
}

.service__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  @media screen and (max-width: 1000px) {
    align-items: flex-start;
  }

  & span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    background-color: #084e8b;
    color: white;
    border-radius: 55px;
    font-size: 22px;
    line-height: 22px;
    font-weight: bold;
    letter-spacing: -0.05em;

    @media screen and (max-width: 1000px) {
      width: 22px;
      height: 22px;
      font-size: 16px;
      line-height: 16px;
    }
  }

  & h3 {
    font-size: 22px;
    line-height: 22px;
    letter-spacing: .2em;
    font-weight: bold;
    color: #084e8b;

    @media screen and (max-width: 1000px) {
      font-size: 16px;
      line-height: 22px;
      text-align: center;
    }
  }
}

.service__detail {
  padding: 30px;
  background-color: #f3f6f8;
  border-radius: 15px;

  @media screen and (max-width: 1000px) {
    padding: 20px;
  }

  & h4 {
    font-size: 20px;
    letter-spacing: .2em;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;

    @media screen and (max-width: 1000px) {
      font-size: 16px;
    }
  }

  & li {
    display: flex;
    align-items: flex-start;
    gap: 2px;
    font-size: 16px;
    letter-spacing: .2em;
    line-height: 2em;
    font-weight: bold;

    @media screen and (max-width: 1000px) {
      font-size: 13px;
      font-weight: 500;
      gap: 0;
    }

    &:not(:last-child) {
      margin-bottom: 2px;
    }

    &::before {
      content: '・';
    }
  }
}

/* Merit */
.merit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18vw, 1fr));
  column-gap: 50px;
  row-gap: 30px;
  text-align: center;

  @media screen and (max-width: 1050px) {
    grid-template-columns: 1fr;
    row-gap: 60px;
  }

  & li {
    display: grid;
    grid-template-rows: subgrid;
    row-gap: 30px;
    grid-row: span 3;
  }

  & h3 {
    font-size: 22px;
    font-weight: bold;
    letter-spacing: .2em;
    line-height: 2em;

    @media screen and (max-width: 767px) {
      font-size: 16px;
      line-height: 1.5em;
    }
  }

  &.development li:last-child h3 {
    letter-spacing: 0.05em;
  }

  & .merit__img-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 300px;

    @media screen and (max-width: 767px) {
      height: 180px;
    }
  }

  & img {
    width: auto;
    height: 230px;
    object-fit: contain;

    @media screen and (max-width: 767px) {
      height: 180px;
    }
  }

  & .paragraph {
    text-align: left;
    margin: 0;
  }

  &.omakase {
    & li:not(:last-child) .paragraph {
      letter-spacing: .15em;
    }
  }
}

/* Case */
.case {
  margin-top: 70px;
  border-radius: 10px;
  overflow: hidden;

  @media screen and (max-width:  767px) {
    margin-top: 40px;
  }
}

.case__title {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70px;
  padding: 19px 10px;
  background: linear-gradient(to right, #47B7E3 0%, #074C88 100%);
  color: #fff;
  font-size: 26px;
  font-weight: bold;
  line-height: 1em;
  letter-spacing: .1em;
  text-align: center;

  @media screen and (max-width:  767px) {
    padding: 11px 10px;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0.2em;
  }
}

.case__body {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  align-items: start;
  gap: 20px 30px;
  background-color: #fff;
  padding: 30px;

  @media screen and (max-width:  767px) {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1px 1fr;
    padding: 20px;
  }

  & .heading-a {
    font-size: 20px;
    line-height: 1.2em;
    letter-spacing: .16em;
    padding-bottom: 20px;
    margin-bottom: 20px;
    @media screen and (max-width:  767px) {
      font-size: 18px;
      letter-spacing: .1em;
    }
  }

  & .case__divider {
    width: 1px;
    height: 100%;
    background-color: #ccc;
    @media screen and (max-width:  767px) {
      width: 100%;
    }
  }

  & li {
    display: flex;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: .2em;
    line-height: 2em;

    @media screen and (max-width:  767px) {
      font-weight: 500;
      font-size: 13px;
    }

    &::before {
      content: '・';
    }

    &:not(:last-child) {
      margin-bottom: 2px;
    }
  }
}

/* CTA */
.banso-cta {
  padding: 40px 30px;
  border: 3px solid #1c7fbd;
  border-radius: 15px;
  background-color: #fff;
  @media screen and (max-width:  767px) {
    padding: 30px 18px;
    border-radius: 14px;
  }

  & h2 {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.5em;
    letter-spacing: .1em;
    color: #1c7fbd;
    @media screen and (max-width:  767px) {
      font-size: 16px;
      letter-spacing: .2em;
    }
  }

  & .lead:first-of-type {
    margin-block: 30px;
  }

  & .lead:last-of-type {
    margin-block: 30px 50px;
    @media screen and (max-width:  767px) {
      margin-block: 20px 30px;
    }
  }

  & .lead {
    @media screen and (max-width:  767px) {
      letter-spacing: .16em;
    }
  }
}

.banso-cta__btn-wrapper {
  text-align: center;

  & .button__anchor {
    width: 100%;
    max-width: 540px;
    padding-block: 24px;

    @media screen and (max-width:  767px) {
      padding: 14px 5px;
      letter-spacing: 0;
    }
  }
}

/* Timeline */
.timeline {
  display: grid;
  grid-template-columns: 292px 60px 1fr 460px;
  @media screen and (max-width: 1200px) {
    grid-template-columns: 250px 60px 1fr 40%;
  }
  @media screen and (max-width: 1050px) {
    grid-template-columns: 33% 40px 1fr;
  }
  @media screen and (max-width: 767px) {
    grid-template-columns: 116px 40px 1fr;
  }

  & .pt-0 {
    padding-top: 0 !important;
  }

  & .sp {
    display: none;
    @media screen and (max-width: 1050px) {
      display: block;
    }
  }

  & .pc {
    @media screen and (max-width: 1050px) {
      display: none;
    }
  }
}

.timeline__bullet-wrapper {
  position: relative;
  padding-block: 17.5px;
  z-index: 1;
  @media screen and (max-width: 1050px) {
    padding-block: 20px;
  }

  &::before {
    content: '';
    display: block;
    width: 16px;
    height: 100%;
    background-color: #1c7fbd;
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
    @media screen and (max-width: 1050px) {
      width: 12px;
      height: 200%;
      top: 0;
    }
  }

  &.last {
    &::before {
      top: 5px;
    }

    &::after {
      content: '';
      display: block;
      width: 80px;
      height: 60px;
      background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MSIgaGVpZ2h0PSI2MyIgdmlld0JveD0iMCAwIDgxIDYzIj48cGF0aCBkPSJNNjM1LjgxOSwyNjYwLjRsMzAsNDAsMzAtNDAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02MjUuMzE5IC0yNjQ5Ljg5NikiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzFjN2ZiZCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2Utd2lkdGg9IjE1Ii8+PC9zdmc+');
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      position: absolute;
      top: 97%;
      left: 50%;
      transform: translate(-50.5%, -50%);
      z-index: 1;
      @media screen and (max-width: 1050px) {
        display: none;
      }
    }

    &.sp {
      &::before {
        @media screen and (max-width: 1050px) {
          top: 0;
          height: 100%;
        }
      }
      &::after {
        @media screen and (max-width: 1050px) {
          display: block;
          width: 50px;
          height: 46px;
          background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1Ni44IiBoZWlnaHQ9IjQ1LjA2NyIgdmlld0JveD0iMCAwIDU2LjggNDUuMDY3Ij48cGF0aCBkPSJNNjM1LjgxOSwyNjYwLjRsMjAsMjYuNjY3LDIwLTI2LjY2NyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTYyNy40MTkgLTI2NTEuOTk2KSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMWM3ZmJkIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS13aWR0aD0iMTIiLz48L3N2Zz4=');
          top: 85%;
        }
      }
    }
  }

  &.first {
    &::before {
      @media screen and (max-width: 1050px) {
        top: 1px;
      }
    }
  }
}

.timeline__bullet {
  margin-inline: auto;
  width: 40px;
  aspect-ratio: 1;
  border-radius: 55px;
  background-color: #1c7fbd;
  @media screen and (max-width: 1050px) {
    width: 30px;
  }
}

.timeline__label-wrapper {
  padding-top: 17.5px;
  @media screen and (max-width: 1050px) {
    padding-top: 20px;
  }

  &.has-details {
    position: relative;
    z-index: 1;

    &::after {
      content: '';
      display: block;
      width: 100%;
      height: 1px;
      background-color: #084e8b;
      position: absolute;
      top: 37.5px;
      right: 0;
      @media screen and (max-width: 1050px) {
        display: none;
      }
    }

    & .timeline__label {
      &::before {
        @media screen and (max-width: 1050px) {
          content: '';
          display: block;
          width: 1px;
          height: 100%;
          position: absolute;
          top: 100%;
          left: 50%;
          background-color: #084e8b;
        }
      }
    }
  }

  &.span-2-top {
    position: relative;
    z-index: 1;
    &::after {
      content: '';
      display: block;
      width: calc(100% - 90px);
      height: calc(100% - 37.5px);
      border-top: 1px solid #084e8b;
      border-right: 1px solid #084e8b;
      position: absolute;
      bottom: 0;
      left: 0;
      @media screen and (max-width: 1200px) {
        width: calc(100% - 40px);
      }
      @media screen and (max-width: 1050px) {
          width: 95px;
          height: 140%;
          border-top: 0;
          top: 50%;
      }
    }
  }

  &.span-2-bottom {
    position: relative;
    z-index: 1;
    @media screen and (max-width: 1050px) {
        padding-bottom: 30px;
      }

    &::after {
      content: '';
      display: block;
      width: calc(100% - 90px);
      height: 37.5px;
      border-bottom: 1px solid #084e8b;
      border-right: 1px solid #084e8b;
      position: absolute;
      top: 0;
      left: 0;
      @media screen and (max-width: 1200px) {
        width: calc(100% - 40px);
      }
      @media screen and (max-width: 1050px) {
        max-width: 60px;
        width: 100%;
        height: 10px;
        top: 52px;
        left: 35px;
        border-right: 0;
        border-left: 1px solid #084e8b;
      }
    }

    &::before {
      @media screen and (max-width: 1050px) {
        content: '';
        position: absolute;
        top: 63px;
        left: 65px;
        display: block;
        width: 1px;
        height: 30px;
        background-color: #084e8b;
      }
    }
  }

  &.sp-pt-24 {
    @media screen and (max-width: 1050px) {
      padding-top: 24px;
    }
  }
}

.timeline__label {
  padding-inline: 12px 10px;
  font-size: min(20px, 1.7vw);
  line-height: 1.5em;
  font-weight: bold;
  letter-spacing: .2em;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  background-color: #fff;
  position: relative;
  z-index: 1;
  @media screen and (max-width: 1050px) {
    padding-inline: 2px 0;
    min-height: 30px;
    font-size: 16px;
    letter-spacing: .1em;
  }

  &.span-2 {
    width: 100%;
    max-width: 220px;
    @media screen and (max-width: 1200px) {
      max-width: calc(100% - 65px);
    }
    @media screen and (max-width: 1050px) {
      max-width: 100%;
      width: auto;
    }
  }
}

.timeline__details {
  border: 1px solid #084e8b;
  background-color: #fff;
  padding: 13.5px 20px;
  font-size: 16px;
  font-weight: bold;
  line-height: 2em;
  letter-spacing: .13em;
  max-height: max-content;
  margin-top: 7.5px;
  position: relative;
  z-index: 1;
  @media screen and (max-width: 1200px) {
    font-size: 1.15vw;
  }
  @media screen and (max-width: 1050px) {
    grid-column: span 2;
    font-size: 14px;
    margin-left: 5px;
    padding: 7px 12px;
    margin-top: 0;
  }
  @media screen and (max-width: 767px) {
    font-size: 13px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: .1em;
  }

  &.green {
    border-color: #1f9f89;
    letter-spacing: .2em;
    margin-top: 0;
    @media screen and (max-width: 1050px) {
      margin-left: 0;
      letter-spacing: .1em;
      line-height: 20px;
    }
  }

  &.row-span-2 {
    grid-row: span 2;
    position: relative;
    align-self: center;
    margin-top: -6px;
    z-index: 2;

    &::before {
      content: '';
      display: block;
      width: 90px;
      height: 1px;
      background-color: #084e8b;
      position: absolute;
      right: 100%;
      top: 50%;
      transform: translateY(-50%);
      @media screen and (max-width: 1200px) {
        width: 40px;
      }
    }
  }

  &:empty {
    border: 0;
    padding: 0;
    margin: 0;
  }

  &.ls-60 {
    @media screen and (max-width: 767px) {
      letter-spacing: .06em;
    }
  }
}

.timeline__note-wrapper {
  grid-row: span 4;
  max-height: 300px;
  display: flex;
  align-items: center;
  gap: 22px;
  padding-right: 10px;
  position: relative;
  z-index: 1;
  @media screen and (max-width: 1050px) {
    grid-row: span 8;
    max-height: 100%;
    flex-direction: column-reverse;
    justify-content: flex-start;
    align-items: center;
    gap: 28px;
    padding-right: 0;
    padding-bottom: 70px;
  }

  &::before {
    content: '';
    display: block;
    max-width: 58px;
    height: calc(100% - 78px);
    border: 4px solid #1f9f89;
    border-right-color: transparent;
    width: 100%;
    position: absolute;
    right: -34px;
    z-index: -1;
    @media screen and (max-width: 1050px) {
      max-width: 51.5%;
      height: calc(100% - 70px);
      border-width: 2px;
      right: -9px;
      top: 35px;
    }
    @media screen and (max-width: 767px) {
      max-width: 65px;
    }
  }

  &::after {
    content: '';
    display: block;
    width: 15px;
    height: 22px;
    position: absolute;
    top: 26px;
    right: -11px;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOC40ODEiIGhlaWdodD0iMjcuMDgiIHZpZXdCb3g9IjAgMCAxOC40ODEgMjcuMDgiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02NDMuNTEzIC0yMDAwLjQ3OSkiPjxyZWN0IHdpZHRoPSI2IiBoZWlnaHQ9IjEwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2NTUuOTk1IDIwMDguOTE5KSIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik02NDguMzQyLDIwMDMuMzA4bDEwLjcxMiwxMC43MTItMTAuNzEyLDEwLjcxMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIpIiBmaWxsPSJub25lIiBzdHJva2U9IiMxZjlmODkiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSI0Ii8+PC9nPjwvc3ZnPg==');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    @media screen and (max-width: 1050px) {
      background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMy40MSIgaGVpZ2h0PSIyMi44MjkiIHZpZXdCb3g9IjAgMCAyMy40MSAyMi44MjkiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02NjQuOTI3IC0yMDAyLjkzMSkiPjxyZWN0IHdpZHRoPSIxMyIgaGVpZ2h0PSI2IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2NzUuMzM3IDIwMTEuMjkpIiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTY0OC4zNDIsMjAwMy4zMDhsMTAsMTAtMTAsMTAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE4IDEuMDM4KSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMWY5Zjg5IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIvPjwvZz48L3N2Zz4=');
      width: 20px;
      height: 20px;
    }
  }
}

.timeline__note {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 30px;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  background-color: #1f9f89;
  width: 40px;
  height: 100px;
  max-height: 300px;
  @media screen and (max-width: 1050px) {
    width: 30px;
    height: 74px;
    font-size: 16px;
    line-height: 20px;
  }
}

.timeline.omakase {
  max-width: 944px;
  margin-inline: auto;
  grid-template-columns: 50px 60px 1fr 460px;
  @media screen and (max-width: 1050px) {
    grid-template-columns: 55px 50px 1fr !important;
  }

  & .timeline__note-wrapper {
    grid-row: span 8;
    @media screen and (max-width: 1050px) {
      grid-row: span 10;
    }
  }

  & .timeline__details.r-span-2 {
    grid-row: span 2;
  }

  & .timeline__details.row-span-2 {
    grid-row: span 4;
    margin-block: 0 -40px;
    @media screen and (max-width: 1050px) {
      grid-row: span 1;
      margin-block: 0;
    }

    &::before {
      width: 120px;
      @media screen and (max-width: 1050px) {
        width: 40px;
        height: 116px;
        background: transparent;
        border: 1px solid #084e8b;
        bottom: 100%;
        top: initial;
        left: 182px;
        right: initial;
        transform: translateY(0);
        border-left: 0;
        border-bottom: 0;
      }
    }
  }

  & .timeline__details.row-span-3 {
    grid-row: span 3;
    @media screen and (max-width: 1050px) {
      grid-row: span 1;
    }
  }

  & .timeline__label-wrapper span {
    display: block;
    font-size: 14px;
    font-weight: bold;
    padding-left: 12px;
    margin-bottom: 26px;
    @media screen and (max-width: 1050px) {
      padding-left: 0;
      margin-bottom: 0;
    }
  }

  & .timeline__label-wrapper.span-2-top,
  & .timeline__label-wrapper.span-2-bottom  {
    &::after {
      width: calc(100% - 120px);
      @media screen and (max-width: 1050px) {
        display: none;
      }
    }
  }

  & .timeline__label-wrapper.span-2-bottom  {
    &::before {
      @media screen and (max-width: 1050px) {
        top: 42%;
        left: 0;
        width: 173px;
        height: 1px;
        background-color: #084e8b;
      }
    }
  }

  & .timeline__label.span-2 {
    max-width: 220px;

    &.sp-pr-8 {
      @media screen and (max-width: 1050px) {
        padding-right: 8px;
      }
    }
  }

  & .timeline__note-wrapper {
    max-height: 100%;
    @media screen and (max-width: 1050px) {
      align-items: flex-start;
      justify-content: center;
      padding-bottom: 0;
    }

    &::before {
      right: -26px;
      @media screen and (max-width: 1050px) {
        right: -18px;
        max-width: 65px;
      }
    }

    &::after {
      display: none;
    }
  }

  & .timeline__note {
    height: 130px;
  }

  & .timeline__bullet-wrapper.sm {
    padding-bottom: 5px;
  }

  & .timeline__bullet-wrapper.sp.last {
    @media screen and (max-width: 1050px) {
      padding-block: 22px;
    }
  }

  & .timeline__details {
    @media screen and (max-width: 1050px) {
      margin-left: 0;
    }
  }
}

/* Support Service */
.support-service {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;

  @media screen and (max-width: 1050px) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media screen and (max-width: 767px) {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  & > li {
    border-radius: 10px;
    overflow: hidden;
    background-color: #fff;
  }
}

.support-service__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  min-height: 50px;
  background-image: linear-gradient(to right, #47b7e3 0%, #074c88 100%);
  font-size: 20px;
  font-weight: bold;
  line-height: 1.5em;
  letter-spacing: .1em;
  color: #fff;
}

.support-service__body {
  padding: 20px 5px;
  text-align: center;

  & ul {
    display: inline-block;
    text-align: left;
  }

  & li {
    display: flex;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.5em;
    letter-spacing: .2em;
  @media screen and (max-width: 767px) {
    font-weight: 500;
  }

    &::before {
      content: '・';
    }

    &:not(:last-child) {
      margin-bottom: 4px;
    }
  }
}

/* Strengths Support */
.merit.support {
  grid-template-columns: repeat(3, 1fr);
  row-gap: 70px;

  @media screen and (max-width: 1050px) {
    grid-template-columns: repeat(2, 1fr);
  }
  @media screen and (max-width: 767px) {
    grid-template-columns: 1fr;
    row-gap: 60px;
  }

  & h3 {
    letter-spacing: .13em;
  }

  & li:not(:nth-child(3)) .paragraph {
    letter-spacing: .15em;
    @media screen and (max-width: 767px) {
      letter-spacing: .21em;
    }
  }

  & li:first-child .paragraph {
    letter-spacing: .15em;
    @media screen and (max-width: 767px) {
      letter-spacing: .17em;
    }
  }
}

/* Support Table */
.table-container {
  position: relative;
  overflow: auto;
  @media screen and (max-width: 767px) {
    width: calc(100vw - 20px);
    padding-right: 20px;
  }
}

.support-table {
  table-layout: fixed;
  width: 100%;
  min-width: 880px;

  & tr {
    border-bottom: 1px solid #c9cfd7;
  }

  & th {
    color: #084E8B;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: .036em;
    text-align: left;
    padding: 18px 55px;
    vertical-align: middle;
    white-space: nowrap;
    @media screen and (max-width: 767px) {
      font-size: 16px;
      padding: 15px;
      text-align: center;
    }
  }

  & td {
    text-align: center;
    font-size: 16px;
    line-height: 2em;
    font-weight: bold;
    letter-spacing: .04em;
    padding: 10px;
    @media screen and (max-width: 767px) {
      font-size: 14px;
    }
  }
}

.table-scroll-icon {
  position: absolute;
  top: 50%;
  left: calc(50vw - 15px);
  transform: translate(-50%, -50%);
  display: none;
  width: 160px;
  height: auto;
  box-shadow: 0 0 0 rgb(133, 133, 133);
  border-radius: 10px;
  animation: pulse 2s infinite;

  @media screen and (max-width: 960px) {
    display: block;
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(133, 133, 133, 0.4);
  }

  70% {
    box-shadow: 0 0 0 12px rgba(133, 133, 133, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(133, 133, 133, 0);
  }
}

.table-notes {
  margin-block: 40px 70px;
  @media screen and (max-width: 767px) {
    margin-top: 20px;
  }

  & .paragraph {
    display: flex;
    margin-block: 0 2px;

    &:last-child p {
      text-decoration: underline;
    }

    &::before {
      content: '・';
    }

    & .flex {
      display: flex;
    }
  }
}

/* Support Usage */
.usage {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;
  @media screen and (max-width: 1100px) {
    grid-template-columns: 1fr;
    gap: 30px;
    margin-inline: auto;
  }
}

.usage__content {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  padding: 20px 5px;
  position: relative;
  border-radius: 10px;
  height: 100%;

  &.yellow {
    padding: 20px 18px;
    background-color: #fff2cb;
    border: 2px solid #ffbf00;
    height: max-content;
    @media screen and (max-width: 1100px) {
      padding: 20px;
      margin-bottom: 10px;
    }

    & img {
      width: 100%;
      height: auto;
      margin-bottom: 10px;
    }

    & .usage__head {
      font-size: 20px;
      @media screen and (max-width: 1250px) {
        font-size: 1.5vw;
      }
      @media screen and (max-width: 1100px) {
        font-size: 20px;
      }
      @media screen and (max-width: 767px) {
        font-size: 16px;
      }
    }
  }

  &:first-child {
    @media screen and (max-width: 1100px) {
      padding-bottom: 12px;
    }
  }
}

.usage__head {
  text-align: center;
  font-weight: bold;
  font-size: 20px;
  line-height: 1.5em;
  letter-spacing: .1em;
  color: #084e8b;
  margin-bottom: 12px;
  @media screen and (max-width: 767px) {
    font-size: 16px;
    margin-bottom: 8px;
  }
}

.usage__user {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  position: relative;

  & i {
    margin-bottom: 12px;
    display: block;
    width: 70px;
    height: 104px;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNzAuMTU2IiBoZWlnaHQ9IjEwMy4xMTgiIHZpZXdCb3g9IjAgMCA3MC4xNTYgMTAzLjExOCI+PGRlZnM+PGNsaXBQYXRoIGlkPSJhIj48Y2lyY2xlIGN4PSIxOS45NyIgY3k9IjE5Ljk3IiByPSIxOS45NyIgZmlsbD0ibm9uZSIvPjwvY2xpcFBhdGg+PGxpbmVhckdyYWRpZW50IGlkPSJiIiB4MT0iLTAuMzc4IiB5MT0iMy4wMiIgeDI9Ii0wLjM1MSIgeTI9IjMuMDIiIGdyYWRpZW50VW5pdHM9Im9iamVjdEJvdW5kaW5nQm94Ij48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNjMmM5ZDQiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNkZGUxZTgiLz48L2xpbmVhckdyYWRpZW50PjxjbGlwUGF0aCBpZD0iYyI+PHBhdGggZD0iTTAsNzguMDg2YzAsLjEyNiwwLC4yNTMsMCwuMzgxVjk5LjIxNEg3MC4xNTZWNzguNDY3QTM1LjA3OSwzNS4wNzksMCwwLDAsMzUuMjY4LDQzLjJoLS4xOTRBMzUuMDczLDM1LjA3MywwLDAsMCwwLDc4LjA4NiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAtNDMuMTk5KSIgZmlsbD0ibm9uZSIvPjwvY2xpcFBhdGg+PGxpbmVhckdyYWRpZW50IGlkPSJkIiB4MT0iMCIgeTE9IjEuMzEyIiB4Mj0iMC4wMTYiIHkyPSIxLjMxMiIgeGxpbms6aHJlZj0iI2IiLz48L2RlZnM+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCkiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE1LjEwOCAwKSI+PGcgY2xpcC1wYXRoPSJ1cmwoI2EpIj48cmVjdCB3aWR0aD0iMzkuOTQiIGhlaWdodD0iMzkuOTQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMCkiIGZpbGw9InVybCgjYikiLz48L2c+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgNDcuMTAzKSI+PGcgY2xpcC1wYXRoPSJ1cmwoI2MpIj48cmVjdCB3aWR0aD0iNzAuMjYiIGhlaWdodD0iNTYuMDE3IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIC0wLjAwMikiIGZpbGw9InVybCgjZCkiLz48L2c+PC9nPjwvZz48L3N2Zz4=');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    @media screen and (max-width: 1100px) {
      width: 55px;
      height: 80px;
      margin-bottom: 8px;
    }
  }
}

.usage__text {
  font-size: 20px;
  line-height: 1.7em;
  letter-spacing: .1em;
  font-weight: bold;
  text-align: center;
  @media screen and (max-width: 767px) {
    font-size: 16px;
  }
  @media screen and (min-width: 1101px) {
    position: relative;
    z-index: 1;
    background-color: #fff;
  }

  & span {
    font-size: 16px;
    @media screen and (max-width: 1125px) {
      display: block;
    }
    @media screen and (max-width: 767px) {
      font-size: 12px;
    }
  }
}

.usage__logo-wrapper {
  text-align: center;
  margin-bottom: 6px;
}

.usage__logo {
  width: 180px;
  height: auto;
  margin-inline: auto;
  @media screen and (max-width: 1100px) {
    width: 140px;
  }
}

.usage__list-title {
  font-size: 16px;
  font-weight: bold;
  letter-spacing: .1em;
  line-height: 1.5em;
  @media screen and (max-width: 767px) {
    font-size: 12px;
    font-weight: 500;
  }
}

.usage__list {
  & li {
    display: flex;
    font-weight: bold;
    font-size: 16px;
    letter-spacing: .2em;
    line-height: 1.5em;
    margin-top: 4px;
    @media screen and (max-width: 767px) {
      font-size: 12px;
      font-weight: 500;
    }

    &::before {
      content: '・';
    }
  }
}

.usage__contact-us {
  position: absolute;
  left: calc(50% + 53px);
  bottom: 32px;
  font-size: 16px;
  letter-spacing: .1em;
  font-weight: bold;
  width: min(168px, 12.5vw);
  @media screen and (max-width: 1100px) {
    width: 86px;
    bottom: 23px;
    left: calc(50% + 40px);
    white-space: nowrap;
  }
  @media screen and (max-width: 767px) {
    font-size: 12px;
  }

  &::after {
    content: '';
    display: block;
    width: 100%;
    height: 18px;
    position: absolute;
    top: 80%;
    left: 0;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNjcuNSIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE2Ny41IDE4Ij48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1NC44NTUgMjApIHJvdGF0ZSgtOTApIj48bGluZSB5MT0iMTUzLjg1NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTEgLTU0Ljg1NSkiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzc2YjJkNyIgc3Ryb2tlLXdpZHRoPSI1Ii8+PHBhdGggZD0iTTksMGw5LDE2SDBaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMCAxMTIuNjQ1KSByb3RhdGUoMTgwKSIgZmlsbD0iIzc2YjJkNyIvPjwvZz48L3N2Zz4=');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
    @media screen and (max-width: 1100px) {
      background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4Ni45NzgiIGhlaWdodD0iMTU4Ljk2MSIgdmlld0JveD0iMCAwIDg2Ljk3OCAxNTguOTYxIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNzAuNzAxIDc5LjkxMSkiPjxwYXRoIGQ9Ik0wLDc5LjlWMEgxNTAuMTY3IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNTAuNTk3IC03Ny40MTEpIHJvdGF0ZSg5MCkiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzc2YjJkNyIgc3Ryb2tlLXdpZHRoPSI1Ii8+PHBhdGggZD0iTTcuMDgxLDBsNy4wODEsMTIuNTg5SDBaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNTcuNjc5IDc5LjA1KSByb3RhdGUoMTgwKSIgZmlsbD0iIzc2YjJkNyIvPjwvZz48L3N2Zz4=');
      height: 170px;
      background-size: cover;
      background-position: right;
    }
    @media screen and (max-width: 767px) {
      height: 156px;
      background-size: 100%;
      background-position: left;
    }
  }

  & span {
    @media screen and (max-width: 1100px) {
      display: block;
      margin-bottom: 5px;
    }
  }
}

.usage__knowledge {
  position: absolute;
  bottom: 20%;
  right: 50%;
  font-size: 16px;
  letter-spacing: .1em;
  font-weight: bold;
  @media screen and (max-width: 1100px) {
    bottom: calc(100% - 15px);
    left: calc(50% - 7px);
    display: flex;
    align-items: center;
  }
  @media screen and (max-width: 767px) {
    font-size: 12px;
  }

  &::before {
    content: '';
    display: block;
    width: min(222px, 18vw);
    height: 112px;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMjUuMjE2IiBoZWlnaHQ9IjExMi41MzkiIHZpZXdCb3g9IjAgMCAyMjUuMjE2IDExMi41MzkiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMjUuNTgzKSI+PHBhdGggZD0iTTc5NS43MDYsMTY4My4xNTJ2MTAzLjUzOUg1ODQuOTkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC01NzIuOTkgLTE3MDguNzM0KSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNzZiMmQ3IiBzdHJva2Utd2lkdGg9IjUiLz48cGF0aCBkPSJNOSwwbDksMTZIMFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgODYuOTU3KSByb3RhdGUoLTkwKSIgZmlsbD0iIzc2YjJkNyIvPjwvZz48L3N2Zz4=');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right bottom;
    @media screen and (max-width: 1100px) {
      background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNC4xNjIiIGhlaWdodD0iNTUuMzM3IiB2aWV3Qm94PSIwIDAgMTQuMTYyIDU1LjMzNyI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIwLjU4NCA4Mykgcm90YXRlKDkwKSI+PHBhdGggZD0iTS0zNy4xLDBILTg1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg5LjQ0MiAtMjcuNjY1KSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNzZiMmQ3IiBzdHJva2Utd2lkdGg9IjUiLz48cGF0aCBkPSJNNy4wODEsMGw3LjA4MSwxMi41ODlIMFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC04MyAtMjAuNTg0KSByb3RhdGUoLTkwKSIgZmlsbD0iIzc2YjJkNyIvPjwvZz48L3N2Zz4=');
      background-position: center;
      width: 15px;
      height: 55px;
      flex-shrink: 0;
    }
  }

  & span {
    display: block;
    margin-top: 2px;
    margin-left: 70px;
    white-space: nowrap;
    @media screen and (max-width: 1100px) {
      margin: 0;
    }
  }
}

.usage__viewing {
  position: absolute;
  bottom: 20%;
  right: -47px;
  font-size: 16px;
  letter-spacing: .1em;
  font-weight: bold;
  text-align: right;
  @media screen and (max-width: 1100px) {
    top: calc(100% - 21px);
    right: calc(50% + 40px);
    display: flex;
  }
  @media screen and (max-width: 767px) {
    font-size: 12px;
  }

  &::before {
    content: '';
    display: block;
    width: min(208px, 18vw);
    height: 112px;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDYuNTAyIiBoZWlnaHQ9IjExMS42MzgiIHZpZXdCb3g9IjAgMCAyMDYuNTAyIDExMS42MzgiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC01NzUuNDg4IC0xNjU3Ljc3MykiPjxwYXRoIGQ9Ik01OTEuOTksMTY4My4xNTJWMTc4NS43OUg3ODQuMDE2IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTQuMDAyIC0yNS4zNzkpIiBmaWxsPSJub25lIiBzdHJva2U9IiM3NmIyZDciIHN0cm9rZS13aWR0aD0iNSIvPjxwYXRoIGQ9Ik05LDBsOSwxNkgwWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNzgxLjk5IDE3NTEuNDExKSByb3RhdGUoOTApIiBmaWxsPSIjNzZiMmQ3Ii8+PC9nPjwvc3ZnPg==');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right bottom;
    @media screen and (max-width: 1100px) {
      width: 15px;
      height: 85px;
      background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNC4xNjIiIGhlaWdodD0iODYuODQ1IiB2aWV3Qm94PSIwIDAgMTQuMTYyIDg2Ljg0NSI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTE0Ny4xMzQgLTE2OS4yMDUpIj48cGF0aCBkPSJNMjI1LjQ3NywwaDc2LjciIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE1NC4yMTUgLTU2LjI3Mikgcm90YXRlKDkwKSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNzZiMmQ3IiBzdHJva2Utd2lkdGg9IjUiLz48cGF0aCBkPSJNNy4wODEsMGw3LjA4MSwxMi41ODlIMFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE2MS4yOTYgMjU2LjA1KSByb3RhdGUoMTgwKSIgZmlsbD0iIzc2YjJkNyIvPjwvZz48L3N2Zz4=');
    }
  }

  & span {
    display: block;
    margin-right: 68px;
    margin-top: 2px;
    @media screen and (max-width: 1100px) {
      margin-right: 0;
      margin-top: 30px;
    }
  }
}

.usage__back-forth {
  padding-left: 15px;
  width: 50%;
  font-size: 16px;
  letter-spacing: .1em;
  font-weight: bold;
  flex-grow: 1;
  z-index: 1;
  @media screen and (max-width: 1100px) {
    position: absolute;
    padding-left: 5px;
    width: 125px;
    top: 25px;
    right: calc(50% + 36px);
    display: flex;
    align-items: baseline;
    gap: 23px;
    font-size: 12px;
  }

  &::before {
    content: '';
    position: absolute;
    bottom: 20px;
    left: 26px;
    display: block;
    width: min(130px, 40%);
    height: 100%;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTMwLjY5MiIgaGVpZ2h0PSIxODkuMzY2IiB2aWV3Qm94PSIwIDAgMTMwLjY5MiAxODkuMzY2Ij48ZGVmcz48Y2xpcFBhdGggaWQ9ImEiPjxjaXJjbGUgY3g9IjkuODIiIGN5PSI5LjgyIiByPSI5LjgyIiBmaWxsPSJub25lIi8+PC9jbGlwUGF0aD48bGluZWFyR3JhZGllbnQgaWQ9ImIiIHgxPSItMC4zNzgiIHkxPSIyLjU4MiIgeDI9Ii0wLjM1MSIgeTI9IjIuNTgyIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjYzJjOWQ0Ii8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjZGRlMWU4Ii8+PC9saW5lYXJHcmFkaWVudD48Y2xpcFBhdGggaWQ9ImMiPjxwYXRoIGQ9Ik0wLDYwLjM1NXEwLC4wOTMsMCwuMTg3djEwLjJIMzQuNVY2MC4zNTdBMTcuMjUxLDE3LjI1MSwwLDAsMCwxNy4zNDMsNDMuMmgtLjA5NEExNy4yNDksMTcuMjQ5LDAsMCwwLDAsNjAuMzU1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIC00My4xOTgpIiBmaWxsPSJub25lIi8+PC9jbGlwUGF0aD48bGluZWFyR3JhZGllbnQgaWQ9ImQiIHgxPSIwIiB5MT0iMSIgeDI9IjAuMDE2IiB5Mj0iMSIgeGxpbms6aHJlZj0iI2IiLz48L2RlZnM+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTQxMS40OSAtMTY4My43MTYpIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3IDApIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0MDQuNDkgMTgyMi4zNzIpIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3LjQzIDApIj48ZyBjbGlwLXBhdGg9InVybCgjYSkiPjxyZWN0IHdpZHRoPSIxOS42NDEiIGhlaWdodD0iMTkuNjQxIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDApIiBmaWxsPSJ1cmwoI2IpIi8+PC9nPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDIzLjE2MykiPjxnIGNsaXAtcGF0aD0idXJsKCNjKSI+PHJlY3Qgd2lkdGg9IjM0LjUiIGhlaWdodD0iMjcuNTQ3IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDApIiBmaWxsPSJ1cmwoI2QpIi8+PC9nPjwvZz48L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDgzLjQ5IDE4MjIuMzcyKSI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNy40MyAwKSI+PGcgY2xpcC1wYXRoPSJ1cmwoI2EpIj48cmVjdCB3aWR0aD0iMTkuNjQxIiBoZWlnaHQ9IjE5LjY0MSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAwKSIgZmlsbD0idXJsKCNiKSIvPjwvZz48L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAyMy4xNjMpIj48ZyBjbGlwLXBhdGg9InVybCgjYykiPjxyZWN0IHdpZHRoPSIzNC41IiBoZWlnaHQ9IjI3LjU0NyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAwKSIgZmlsbD0idXJsKCNkKSIvPjwvZz48L2c+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQ0My45OSAxNzk5LjUwOSkiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDcuNDMgMCkiPjxnIGNsaXAtcGF0aD0idXJsKCNhKSI+PHJlY3Qgd2lkdGg9IjE5LjY0MSIgaGVpZ2h0PSIxOS42NDEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMCkiIGZpbGw9InVybCgjYikiLz48L2c+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMjMuMTYzKSI+PGcgY2xpcC1wYXRoPSJ1cmwoI2MpIj48cmVjdCB3aWR0aD0iMzQuNSIgaGVpZ2h0PSIyNy41NDciIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMCkiIGZpbGw9InVybCgjZCkiLz48L2c+PC9nPjwvZz48L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTAuMDEgMzMuNzEzKSI+PGcgdHJhbnNmb3JtPSJtYXRyaXgoLTAuODk5LCAtMC40MzgsIDAuNDM4LCAtMC44OTksIDQ5NC4xMTQsIDE3NjMuODEzKSI+PGxpbmUgeTE9Ijk5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMSAwKSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNzZiMmQ3IiBzdHJva2Utd2lkdGg9IjUiLz48cGF0aCBkPSJNOSwwbDksMTZIMFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE5LjY1OSAxMTMuMDc2KSByb3RhdGUoMTgwKSIgZmlsbD0iIzc2YjJkNyIvPjwvZz48ZyB0cmFuc2Zvcm09Im1hdHJpeCgwLjg5OSwgMC40MzgsIC0wLjQzOCwgMC44OTksIDUwNC4wOTksIDE2NDYuMjc3KSI+PGxpbmUgeTE9Ijk5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMSAwKSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNzZiMmQ3IiBzdHJva2Utd2lkdGg9IjUiLz48cGF0aCBkPSJNOSwwbDksMTZIMFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE5LjY1OSAxMTMuMDc2KSByb3RhdGUoMTgwKSIgZmlsbD0iIzc2YjJkNyIvPjwvZz48L2c+PC9nPjwvc3ZnPg==');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;
    z-index: -1;
    @media screen and (max-width: 1250px) {
      height: 42%;
    }
    @media screen and (max-width: 1125px) {
      height: 12.3vw;
    }
    @media screen and (max-width: 1100px) {
      width: 90px;
      height: 98px;
      background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iODkuMzE2IiBoZWlnaHQ9IjEwMS4yNTYiIHZpZXdCb3g9IjAgMCA4OS4zMTYgMTAxLjI1NiI+PGRlZnM+PGNsaXBQYXRoIGlkPSJhIj48Y2lyY2xlIGN4PSI1LjU5OSIgY3k9IjUuNTk5IiByPSI1LjU5OSIgZmlsbD0ibm9uZSIvPjwvY2xpcFBhdGg+PGxpbmVhckdyYWRpZW50IGlkPSJiIiB4MT0iLTAuMzc4IiB5MT0iMi41ODIiIHgyPSItMC4zNTEiIHkyPSIyLjU4MiIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iI2MyYzlkNCIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI2RkZTFlOCIvPjwvbGluZWFyR3JhZGllbnQ+PGNsaXBQYXRoIGlkPSJjIj48cGF0aCBkPSJNMCw1Mi45ODFxMCwuMDUzLDAsLjEwNlY1OC45SDE5LjY3MlY1Mi45ODJBOS44MzYsOS44MzYsMCwwLDAsOS44ODksNDMuMkg5LjgzNUE5LjgzNSw5LjgzNSwwLDAsMCwwLDUyLjk4MSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAtNDMuMTk4KSIgZmlsbD0ibm9uZSIvPjwvY2xpcFBhdGg+PGxpbmVhckdyYWRpZW50IGlkPSJkIiB4MT0iMCIgeTE9IjEiIHgyPSIwLjAxNiIgeTI9IjEiIHhsaW5rOmhyZWY9IiNiIi8+PC9kZWZzPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC00Ni40MyAtMTcuMDI1KSI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDYuNDMgMTcuMDI1KSI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAxMy4wMzYpIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0LjIzNiAwKSI+PGcgY2xpcC1wYXRoPSJ1cmwoI2EpIj48cmVjdCB3aWR0aD0iMTEuMTk5IiBoZWlnaHQ9IjExLjE5OSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAwKSIgZmlsbD0idXJsKCNiKSIvPjwvZz48L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAxMy4yMDcpIj48ZyBjbGlwLXBhdGg9InVybCgjYykiPjxyZWN0IHdpZHRoPSIxOS42NzEiIGhlaWdodD0iMTUuNzA3IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDApIiBmaWxsPSJ1cmwoI2QpIi8+PC9nPjwvZz48L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDUuMDQ1IDEzLjAzNikiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQuMjM2IDApIj48ZyBjbGlwLXBhdGg9InVybCgjYSkiPjxyZWN0IHdpZHRoPSIxMS4xOTkiIGhlaWdodD0iMTEuMTk5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDApIiBmaWxsPSJ1cmwoI2IpIi8+PC9nPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDEzLjIwNykiPjxnIGNsaXAtcGF0aD0idXJsKCNjKSI+PHJlY3Qgd2lkdGg9IjE5LjY3MSIgaGVpZ2h0PSIxNS43MDciIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMCkiIGZpbGw9InVybCgjZCkiLz48L2c+PC9nPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMi41MjIgMCkiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQuMjM2IDApIj48ZyBjbGlwLXBhdGg9InVybCgjYSkiPjxyZWN0IHdpZHRoPSIxMS4xOTkiIGhlaWdodD0iMTEuMTk5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDApIiBmaWxsPSJ1cmwoI2IpIi8+PC9nPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDEzLjIwNykiPjxnIGNsaXAtcGF0aD0idXJsKCNjKSI+PHJlY3Qgd2lkdGg9IjE5LjY3MSIgaGVpZ2h0PSIxNS43MDciIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMCkiIGZpbGw9InVybCgjZCkiLz48L2c+PC9nPjwvZz48L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjMuNjcyIDY2LjQ1KSI+PHBhdGggZD0iTTcuMDgxLDBsNy4wODEsMTIuNTg5SDBaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjI2OCAwKSIgZmlsbD0iIzc2YjJkNyIvPjxwYXRoIGQ9Ik03LjM0OSw5LjgwOVY0OS4zM0g2Ny41MTIiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzc2YjJkNyIgc3Ryb2tlLXdpZHRoPSI1Ii8+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0wLjI3NyAtOC45MTYpIj48cGF0aCBkPSJNNy4wODEsMGw3LjA4MSwxMi41ODlIMFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEzNi4wMjIgMTAxLjM4MSkgcm90YXRlKDkwKSIgZmlsbD0iIzc2YjJkNyIvPjxwYXRoIGQ9Ik04Ni44MjIsNzcuNDY4djMwLjk5NWgzOC42MTEiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzc2YjJkNyIgc3Ryb2tlLXdpZHRoPSI1Ii8+PC9nPjwvZz48L3N2Zz4=');
      bottom: inherit;
      top: 0;
      left: 35px;
    }
  }

  & .usage__follow-up {
    margin-top: 20px;
    line-height: 25px;
    @media screen and (max-width: 1125px) {
      margin-top: -5px;
    }
    @media screen and (max-width: 1100px) {
      margin-top: 59px;
      line-height: 19px;
      text-align: right;
    }
  }

  & .usage__consultation {
    text-align: right;
    margin-top: 10px;
    margin-right: 10px;
    @media screen and (max-width: 1100px) {
      margin: 0;
    }
  }
}

/* TOC Merit */
.merit.toc {
  & .merit__item {
    &:not(:last-child) .paragraph {
      @media screen and (min-width: 768px) {
        letter-spacing: .15em;
      }
    }

    &:first-child .paragraph {
      @media screen and (max-width: 767px) {
        letter-spacing: .17em;
      }
    }
  }
}

/* TOC Pricing */
.toc-pricing {
  display: grid;
  grid-template-columns: 360px repeat(2, 1fr);
  margin-bottom: 70px;
  text-align: center;
  max-width: 940px;
  margin-inline: auto;
  @media screen and (max-width: 1050px) {
    grid-template-columns: 1fr;
  }
  @media screen and (max-width: 767px) {
    margin-bottom: 40px;
  }

  & .toc-pricing__item {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;

    &:not(:first-child) h3 {
      @media screen and (max-width: 1050px) {
        border-top: 0;
      }
    }
  }

  & h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 60px;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: .036em;
    color: #084e8b;
    border-top: 1px solid #c9cfd7;
    border-bottom: 1px solid #c9cfd7;
    background-color: #fff;
    @media screen and (max-width: 767px) {
      height: 50px;
      font-size: 16px;
    }
  }

  p {
    padding: 14px 10px;
    background-color: #fff;
    border-bottom: 1px solid #c9cfd7;
    align-content: center;
    height: 100%;
    font-size: 16px;
    font-weight: bold;
    line-height: 2em;
    letter-spacing: .04em;
    @media screen and (max-width: 767px) {
      font-weight: 500;
      font-size: 14px;
      padding-block: 12px;
      line-height: 1.7em;
    }
  }
}

/* TOC Flow */
.flow {
  position: relative;
  width: min(652px, calc(100% - 130px));
  margin-inline: auto;
  @media screen and (max-width: 480px) {
    width: 100%;
  }

  & img {
    width: 100%;
    height: auto;
  }

  & p {
    display: flex;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: .1em;
    line-height: 25px;
    max-width: 250px;
    text-align: left;
    position: absolute;
    top: 100px;
    right: 0;
    transform: translateX(50%);
    @media screen and (max-width: 1050px) {
      top: 0;
      left: 60%;
      transform: translateX(0);
    }
    @media screen and (max-width: 600px) {
      max-width: 133px;
      font-size: 10px;
      line-height: 16px;
    }

    &::before {
      content: '※';
    }
  }
}