@charset "UTF-8";

 :root {
  /* font */
  --font-family: "Hiragino Kaku Gothic StdN";
  --font-family-jp: "Noto Sans JP", sans-serif;
  --font-family-base: "Hiragino Kaku Gothic ProN";
  --font-family-link: "Noto Sans JP", "sans-serif";
  --h1-size: 40px;
  --h2-size: 32px;
  --h3-size: 24px;
  --h4-size: 20px;
  --font-size-base: 16px;
  --font-size-s: 13px;

  /* color */
  --color-black: #000;
  --color-white: #fff;
  --color-SolidGray-900: #111827;
  --color-SolidGray-400: #9CA3AF;
  --color-SolidGray-White: #f5f5f5;
  --color-SolidGray-100: #F3F4F6;
  --color-link: #0859BF;
}

.inner {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
}

.section {
  padding: 80px 0;
}

.btn-apply {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 55px;
  padding: 15px 24px;
  border-radius: 30px;
  background: #368CF7;
  text-decoration: none;
  color: #fff;
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 26px; /* 162.5% */

  &:hover {
    background: #0859BF;
    text-decoration: none;
  }
}

.link-text {
  color: #0859BF;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

h2 {
  font-family: var(--font-family);
  color: var(--color-SolidGray-900);
  font-size: var(--h2-size);
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

h3 {
  font-family: var(--font-family);
  color: var(--color-SolidGray-900);
  font-size: var(--h3-size);
  text-align: center;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

h4 {
  color: var(--Color-SolidGray-900);
  font-family: var(--font-family);
  font-size: 20px;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
}

.text {
  color: var(--color-black);
  font-size: var(--font-size-base);
  font-style: normal;
  font-weight: 400;
  line-height: 26px; /* 162.5% */
}

.note {
  color: var(--color-SolidGray-900);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
}

.note-list {
  & li {
    position: relative;
    padding: 0 0 0 16px;
      &::before {
          content: '※';
          position: absolute;
          top: 0;
          left: 0;
      }
  }
}

img {
  max-inline-size: 100%;
  max-block-size: 100%;
}

.function-tooltip {
  display: inline-block;
  vertical-align: middle;
}

.tooltip {
  position: relative;
  margin: 0 0 0 4px;
  transform: translateY(-2px);
  z-index: 1;

  .tooltip-icon {
    display: block;
    width: 24px;
    height: 24px;
    background: url(../images/icon_tooltip.svg) no-repeat center center;
    background-size: 100% 100%;

    &::before {
      content: "";
      display: block;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 11px 6px 0 6px;
      border-color: #4C4E52 transparent transparent transparent;
      position: absolute;
      left: 0;
      right: 0;
      bottom: calc(100% + 2px);
      margin: auto;
      opacity: 0;
      visibility: hidden;
    }
  }

  .tooltip-text {
    width: 170px;
    position: absolute;
    left: 50%;
    bottom: calc(100% + 16px);
    transform: translateX(-60%);
    background: var(--color-black);
    color: #fff;
    z-index: 1;
    padding: 14px;
    white-space: wrap;
    font-size: var(--font-size-s);
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    opacity: 0;
    visibility: hidden;

    &::after {
      content: "";
        display: block;
        width: 13px;
        height: 17px;
        background: var(--color-black);
        clip-path: polygon(0 0, 100% 0, 50% 100%);
        position: absolute;
        bottom: -16px;
        left: 0;
        right: 0;
        margin: 0 auto;
    }
  }
}

.tooltip:hover .tooltip-text {
  opacity: 1;
  visibility: visible;
}

@media (600px <= width) {
  .sp-only {
    display: none;
  }
}

@media (width < 600px) {
  .pc-only {
    display: none;
  }
}

.layout_main {
  margin-bottom: 0;
}

/* hero section */
.hero {
  min-height: 298px;
  background: url(../images/pc-hero-bg.svg) no-repeat right bottom;
  background-size: cover;
  color: #fff;

  .hero-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 40px 0;

    .hero-text {
      width: calc((31.62 / 60) * 100%);
      display: flex;
      flex-direction: column;
      gap: 24px;
      align-items: flex-start;

      .header {
        .hero-sub-headline {
          color: var(--color-black);
          font-weight: 600;
          line-height: 30px; /* 150% */
        }

        .hero-headline {
          color: var(--color-black);
          font-family: var(--font-family);
          font-size: var(--h1-size);
          font-style: normal;
          font-weight: 800;
          line-height: 1.2;
        }
      }

      .text {
        font-size: 20px;
        line-height: 30px; /* 150% */
      }
    }

    .hero-image {
      width: 100%;
      max-width: 222.022px;
    }
  }

}

/* about section */
.about {
    background: #fff;

    .about-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 50px;

      .about-image {
        width: 100%;
        max-width: 249px;
      }

      .about-summary {
        display: flex;
        flex-direction: column;

        .headline {
          margin-bottom: 24px;

          mark {
            background: linear-gradient(white 90%, #ffd800 90%);
            border-bottom: 6px solid #ffd800;
          }
        }

        .text {
          color: var(--color-SolidGray-900);

          span {
            color: var(--color-SolidGray-900);
            font-size: var(--font-size-base);
            font-style: normal;
            font-weight: 600;
            line-height: 26px;
          }
        }
      }
    }
}

/* feature section */
.feature {
  background: #FFF6C2;

  .feature-inner {
    display: flex;
    flex-direction: column;
    gap: 40px;

    .feature-headline {
      text-align: center;
      font-size: var(--h3-size);

      .headline-strong {
        color: #368CF7;
        font-family: var(--font-family);
        font-size: var(--h1-size);
        font-style: normal;
        font-weight: 700;
        line-height: normal;
      }

      .strong {
        font-family: var(--font-family);
        font-size: var(--h2-size);
        color: var(--color-SolidGray-900);
        font-style: normal;
        font-weight: 700;
        line-height: normal;
      }
    }

    .text {
      color: var(--color-SolidGray-900);
      padding: 0 100px;

      .check-mark {
        content: url(../images/img-check.svg);
        position: relative;
        top: 6px;
      }
    }

    .feature-image img {
      width: 100%;
    }
  }
}

/* merit section */
.merit {
  background: #fff;

  .merit-inner {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-self: stretch;
    padding: 0 100px;

    .headline {

      .merit-headling {
        font-family: var(--font-family);
        color: #368CF7;
        font-size: var(--h1-size);
        text-align: center;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
      }
    }

    .merit-lists {
      display: flex;
      flex-direction: column;
      gap: 40px;
      align-items: flex-start;

      .merit-list {
        display: flex;
        align-items: center;
        gap: 48px;

        .merit-image {
          display: flex;
          justify-content: center;
          align-items: center;
          max-width: 136px;
          height: 136px;
          line-height: 0;
          flex-shrink: 0;
        }
      }

      .merit-summary {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        .title {
          color: var(--color-black);
          font-size: 20px;
          font-style: normal;
          font-weight: 600;
          line-height: normal;
          text-align: center;
          margin-bottom: 8px;
        }

        .text {
          line-height: 24px; /* 150% */
        }
      }

      .btn-apply {
        margin: 0 auto;
      }
    }
  }
}

/* usecase section */
.usecase {
  background: #FFC532;

  .usecase-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    align-self: stretch;

    .headline {
      color: var(--color-SolidGray-900);
      text-align: center;
      font-size: var(--h3-size);
      font-style: normal;
      font-weight: 700;
      line-height: normal;

      .headline-strong {
        color: var(--color-SolidGray-900);
        font-size: var(--h1-size);
        font-style: normal;
        font-weight: 700;
        line-height: normal;
      }
    }

    .usecase-lists {
      display: flex;
      align-items: center;
      gap: 62px;

      .usecase-list {
        display: flex;
        flex-direction: column;
        gap: 16px;
        justify-content: center;
        align-items: center;
        position: relative;
        width: 256px;
        height: 321px;
        border-radius: 8px;
        text-decoration: none;
        box-sizing: border-box;
        background: #fff;

        .usecase-image {
          flex: 0 0 208px;
          min-height: 208px;
          aspect-ratio: 1/1;
        }

        .text {
          font-weight: 600;
          line-height: 24px;
          text-align: center;

          .strong {
            font-size: 20px;
            color: var(--color-black);
            font-style: normal;
            font-weight: 600;
            line-height: 24px;
          }
        }

      }
    }
  }
}

/* price section */
.price {
  background: #fff;

  .price-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    align-self: stretch;

    .price-headline {
      font-weight: 700;
    }

    .table-wrap {
      width: 100%;

      table {
        table-layout: fixed;
        border-collapse: collapse;
        border-spacing: 0;
        width: 100%;
        margin-bottom: 8px;

        tr {
          border: 1px solid #dcdcdc;

          .head {
            border-right: 1px solid #dcdcdc;
            background: #f3f4f6;
            width: 200px;
            text-align: center;
            vertical-align: middle;
            padding: 0 12px;
            color: var(--color-SolidGray-900);
            text-align: center;
            font-family: "Hiragino Kaku Gothic ProN";
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 26px; /* 162.5% */
          }

          .data {
            border: 1px solid var(--Color-SolidGray-400);
            background: var(--color-white);
            display: flex;
            padding: 12px;
            flex-direction: column;
            align-items: flex-start;
            gap: 4px;
            flex: 1 0 0;
            align-self: stretch;
            color: var(--color-SolidGray-900);
            font-family: "Hiragino Kaku Gothic ProN";
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 26px; /* 162.5% */
          }
        }
      }

      .table-notes {
        color: var(--color-SolidGray-900);
        font-size: 13px;
        font-style: normal;
        font-weight: 400;
        line-height: 16px; /* 123.077% */
      }
    }
  }
}

/* condition section */
.condition {
  background: var(--color-SolidGray-100);

  .condition-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    align-self: stretch;

    .condition-headline {
      font-weight: 700;
    }

    .condition-wrap {
      width: 100%;

      table {
        table-layout: fixed;
        border-collapse: collapse;
        border-spacing: 0;
        width: 100%;
        margin-bottom: 8px;

        tr {
          border: 1px solid #dcdcdc;

          .head {
            border: 1px solid #dcdcdc;
            background: #f3f4f6;
            width: 200px;
            text-align: center;
            vertical-align: middle;
            padding: 0 12px;
            color: var(--color-SolidGray-900);
            font-family: "Hiragino Kaku Gothic ProN";
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 26px; /* 162.5% */
          }

          .data {
            background: var(--color-white);
            display: flex;
            padding: 12px;
            flex-direction: column;
            align-items: flex-start;
            gap: 4px;
            flex: 1 0 0;
            align-self: stretch;

            ul {
              li {
                color: var(--color-SolidGray-900);
                font-family: "Hiragino Kaku Gothic ProN";
                font-size: 16px;
                font-style: normal;
                font-weight: 400;
                line-height: 26px; /* 162.5% */
              }
            }
          }
        }
      }

      .table-notes {
        color: var(--color-SolidGray-900);
        font-size: 13px;
        font-style: normal;
        font-weight: 400;
        line-height: 16px; /* 123.077% */
      }
    }

  }
}

/* flow section */
.flow {
  background: #fff5c2;

  .flow-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    align-self: stretch;

    .flow-steps {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;

      .flow-step {
        position: relative;
        flex: 0 0 auto;
        min-width: 155px;
        background: url(../images/flow-step-default-bg.svg) no-repeat center center;

        .badge {
          position: absolute;
          top: -8px;
          left: -8px;
          width: 32px;
          height: 32px;
          border-radius: 999px;
          background: #4a98f7;
          color: #fff;
          display: grid;
          place-items: center;
          font-weight: 700;
          font-size: 13px;
          box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
          z-index: 2;
        }

        .card {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 104px;
          flex-shrink: 0;

          .label {
            color: var(--color-SolidGray-900);
            text-align: center;
            font-size: 16px;
            font-style: normal;
            font-weight: 600;
            line-height: 26px;
          }
        }
      }

      .flow-step06 {
        background: url(../images/flow-step-default-end.svg) no-repeat center center;
        min-width: 135px;
      }
    }
  }

  .steps {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    align-self: stretch;

    .step {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
      align-self: stretch;

      .step-number{
        display:flex;
        align-items:center;
        gap:12px;
        padding:0;

        .badge{
          width: 42px;
          height: 42px;
          border-radius: 999px;
          background: #67A8F9;;
          color: #fff;
          font-weight: 600;
          line-height: 30px;
          font-size: 20px;
          display:grid;
          place-items:center;
          box-shadow:0 1px 3px rgba(0,0,0,.15);
        }

        .step-title {
          color: var(--color-SolidGray-900);
          font-size: 24px;
          font-style: normal;
          font-weight: 700;
          line-height: normal;
          position: relative;
          font-family: var(--font-family);
        }
      }

      .step-details {
        background: var(--color-white);
        border-radius: 0 0 8px 8px;
        display: flex;
        padding: 24px;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        align-self: stretch;

        ul {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 8px;
          align-self: stretch;
        }

        .text {
          color: var(--color-SolidGray-900);
        }

        .btn-apply {
          margin: 0 auto;
        }
      }
    }

    .step-details-02 {
      margin-top: -14px;
    }

    .step-02 .step-details{
      align-items: center;
    }

    .step-03 .step-details{
      gap: 0;

      .step-link {
        margin-top: 8px;

          a {
            position:relative;
            padding-left:12px;
            line-height: normal;


            &::before {
              content: "\f105";
              font-family: FontAwesome;
              position:absolute;
              left:0;
              top:50%;
              transform: translateY(-45%);
              color: var(--color-SolidGray-900);
              font-size: 18px;
            }
          }
      }
    }

    .step-06 .step-details{

      ul {
        margin-top: -8px;

        li {
          color: var(--color-SolidGray-900);
          font-size: 13px;
          font-style: normal;
          font-weight: 400;
          line-height: 16px;
        }
      }
    }
  }
}

/* renewal section */
.renewal {
  background: var(--color-SolidGray-100);

  .renewal-inner {
    display: flex;
    flex-direction: column;
    align-self: stretch;

    .headline {
      text-align: center;
      margin-bottom: 40px;
    }

    .text {
      color: var(--color-SolidGray-900);
      line-height: 24px;
    }

    .notes {
      margin-top: 8px;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
  }
}

/* faq section */
.faq {
  background: var(--color-white);

  .faq-inner {
    display: flex;
    flex-direction: column;
    gap: 40px;

    .headline {
      text-align: center;
      font-weight: 800;
    }

    .faq-details {
      margin: 0 auto;

      & dl {
        display: flex;
        flex-direction: column;
        gap: 24px;
        padding: 32px 0;
        border-bottom: solid 1px var(--color-SolidGray-400);

        &:first-of-type {
          border-top: solid 1px var(--color-SolidGray-400);
        }

        & dt {
          font-size: var(--h4-size);
          color: var(--color-SolidGray-900);
          font-weight: 800;
          line-height: 24px;
          padding: 6px 0 6px 54px;
          position: relative;

          &::before {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            content: "Q.";
            width: 42px;
            height: 42px;
            padding: 6px 6px 6px 12px;
            background: #ffd800;
            border-radius: 50%;
            font-family: 'Hiragino Kaku Gothic ProN', 'メイリオ', sans-serif;
            font-size: var(--h4-size);
            font-weight: 600;
            line-height: 30px;
            color: var(--color-SolidGray-900);
            position: absolute;
            top: 0;
            left: 0;
          }
        }

        dd {

          .answer {
            display: flex;
            padding-left: 54px;
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
            align-self: stretch;

            & .list-mark {
              list-style: disc outside;
              margin: 0 0 0 1.25rem;
            }

            ul li .link-text {
              font-size: var(--font-size-s);
              line-height: 16px;
              font-weight: 400;
            }
          }
        }
      }
    }
  }
}

/* apply section */
.apply {
  background: #ffd800;

  .apply-inner {
    display: flex;
    flex-direction: column;
    gap: 40px;

    .headline {
      text-align: center;
      font-weight: 600;
      color: var(--color-black);
    }

    .btn-apply {
      margin: 0 auto;
    }
  }
}

/* Tablet */
@media (min-width: 600px) and (max-width: 992px) {
  .hero {
    padding: 0 20px;
  }

  .section {
    padding: 80px 20px;
  }

  /* hero section */
  .hero {

    .hero-inner {
      flex-direction: column;
      gap: 38px;
      padding: 40px 16px;
      align-items: center;
      text-align: center;

      .hero-text {
        align-items: center;
        width: 100%;
      }
    }
  }

  /* about section */
  .about {
    .about-inner {
      flex-direction: column;
      gap: 40px;
    }
  }
   /* feature section */
   .feature {

    .feature-inner {

      .feature-summary {
        width: 100%;
        max-width: 640px;
        margin: 0 auto;
        padding: 0;

        .text {
          padding: 0;
        }
      }

      .feature-image {
        width: 100%;
        max-width: 640px;
        margin: 0 auto;
      }
    }
  }

  /* merit section */
  .merit {

    .merit-inner {

      .merit-lists {
        width: 100%;
        max-width: 640px;
        margin: 0 auto;

        .merit-list {
          flex-direction: column;
          gap: 16px;

          .merit-image {
            max-width: 40%;
          }
        }

        .merit-summary {

          .text {
            padding: 0;
          }
        }
      }
    }
  }

  .price {

    .price-inner {

      .price-headline {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: var(--h4-size);

          span {
            font-family: var(--font-family);
            color: var(--color-SolidGray-900);
            font-size: var(--h2-size);
            font-style: normal;
            font-weight: 700;
            line-height: normal;
          }
      }
    }
  }

  /* flow section */
  .flow {
    & .flow-inner {
        .flow-steps {
            justify-content: center;
            padding: 0 160px;
        }
    }
}
}

/* スマホ */
@media screen and (max-width: 599px) {
  /* hero section */
  .hero {
    background: url(../images/sp-hero-bg.png) no-repeat right bottom;
    background-size: cover;
    max-height: 100%;

    .hero-inner {
      flex-direction: column;
      gap: 38px;
      padding: 40px 16px;

      .hero-text {
        align-items: center;
        gap: 38px;
        width: 100%;
        margin: 0 auto;
        text-align: center;

        .header {

          .hero-sub-headline {
            font-size: var(--h4-size);
          }

          .hero-headline {

            span {
              font-size: var(--h2-size);
            }
          }
        }

        .text {
          text-align: center;
        }
      }

      .hero-image {
        max-width: 172px;
      }
    }
  }

  /* about section */
  .about {
    padding: 64px 16px;

    .about-inner {
      flex-direction: column;
      gap: 40px;

      .about-summary {
        width: 100%;
        max-width: 640px;
        margin: 0 auto;

        .headline {
          font-size: var(--h3-size);
          font-weight: 700;
        }
      }
    }
  }

  /* feature section */
  .feature {
    padding: 64px 0;

    .feature-inner {
      padding: 0;
      gap: 24px;

      .feature-headline {
        font-size: var(--h4-size);
        padding: 0;

        .headline-strong {
          font-size: var(--h2-size);
        }

        .strong {
          font-size: var(--h3-size);
        }
      }

      .feature-summary {
        width: 100%;
        margin: 0 auto;
        padding: 0 16px;

        .text {
          padding: 0;
        }
      }

      .feature-image {
        width: 100%;
      }
    }
  }

  /* merit section */
  .merit {
    padding: 64px 0;
    width: 310px;
    margin: 0 auto;

    .merit-inner {
      padding: 0;

      .headline {

        .merit-sub-headling {
          font-size: var(--h4-size);
        }

        .merit-headling {
          font-size: var(--h2-size);
        }
      }

      .merit-lists {
        gap: 48px;

        .merit-list {
          flex-direction: column;
          gap: 16px;

          .merit-image {
            max-width: 40%;
          }
        }

        .merit-summary {
          align-items: center;

          .text {
            width: 296px;
            margin: 0 auto;
          }
        }

        .btn-apply {
          margin: 0 auto;
        }
      }
    }
  }

  /* usecase section */
  .usecase {
    padding: 64px 16px;

    .usecase-inner {
      gap: 24px;

      .headline {
        font-size: var(--h4-size);

        .headline-strong {
          font-size: var(--h2-size);
        }
      }

      .usecase-lists {
        flex-direction: column;
        gap: 32px;

        .usecase-list {
          flex-direction: row;
          gap: 8px;
          width: 344px;
          height: 100%;
          padding: 16px 0;

          .usecase-image {
            flex: 0 0 88px;
            min-height: 88px;
          }

          .text {
            text-align: left;

            .strong {

            }
          }
        }
      }
    }
  }

  /* price section */
  .price {
    padding: 64px 16px;

    .price-inner {

      .price-headline {
        text-align: center;
        font-size: var(--h4-size);

        span {
          font-family: var(--font-family);
          color: var(--color-SolidGray-900);
          font-size: var(--h2-size);
          font-style: normal;
          font-weight: 700;
          line-height: normal;
        }
      }

      .table-wrap {

        table {

          tr {
            border: 1px solid #dcdcdc;

            .head {
              width: 104px;
            }

          }
        }
      }
    }
  }

  .tooltip .tooltip-text {
    transform: translateX(-50%);
  }

  /* condition section */
  .condition {
    padding: 64px 16px;

    .condition-inner {

      .condition-headline {
        font-weight: 700;
      }

      .condition-wrap {
        width: 100%;

        table {
          border-collapse: collapse;
          border-spacing: 0;
          width: 100%;
          margin-bottom: 8px;

          tr {

            .head {
              width: 104px;
            }


          }
        }
      }

    }
  }

  /* flow section */
  .flow {
    padding: 64px 16px;

    .flow-inner {
      .flow-steps {
        flex-wrap: wrap;
        gap: 10px 8px;
        padding: 0 20px;
      }

      .steps {
        .step {
          .step-number {
            .step-title {
              font-size: var(--h4-size);
              font-weight: 700;
            }

            .badge {
              width: 32px;
              height: 32px;
              line-height: 26px;
              font-size: 16px;
            }
          }

          .step-details h4 {
            font-size: var(--font-size-base);
            font-weight: 700;
          }
        }
      }
    }
  }

  /* renewal section */
  .renewal {
    padding: 64px 16px;

    .renewal-inner {

      .notes {
        gap: 8px;
      }
    }
  }

  /* faq section */
  .faq {
    padding: 64px 16px;

    .faq-inner {

      .faq-details {
        margin-bottom: 0;

        & dl {
          display: flex;
          flex-direction: column;
          gap: 24px;
          padding: 32px 0;
          border-bottom: solid 1px var(--color-SolidGray-400);

          & dt {
            font-weight: 600;
            line-height: 30px;
            padding: 1px 5px 1px 49px;

            &::before {
              width: 32px;
              height: 32px;
              padding: 3px 1.27px 4px 8px;
              font-size: var(--font-family-base);
              line-height: 26px;
            }
          }
        }
      }
    }
  }

  /* apply section */
  .apply {
    padding: 64px 16px;

    .apply-inner {

      .headline {
        font-size: var(--font-size-base);
        font-weight: 600;
        line-height: 26px;

        .headline-strong {
          font-size: var(--h3-size);
          color: var(--color-SolidGray-900);
          font-style: normal;
          font-weight: 700;
          line-height: normal;
        }
      }

      .btn-apply {
        margin: 0 auto;
      }
    }
  }
}