@charset "UTF-8";

.main {
  .fs-80 {
    font-size: 80px;

    @media only screen and (width <=768px) {
      font-size: calc((100 / 390) * 72 * 1vw);
    }
  }

  .fs-64 {
    font-size: 64px;

    @media only screen and (width <=768px) {
      font-size: calc((100 / 390) * 56 * 1vw);
    }
  }

  .fs-56 {
    font-size: 56px;

    @media only screen and (width <=768px) {
      font-size: calc((100 / 390) * 48 * 1vw);
    }
  }

  .fs-48 {
    font-size: 48px;

    @media only screen and (width <=768px) {
      font-size: calc((100 / 390) * 40 * 1vw);
    }
  }

  .fs-40 {
    font-size: 40px;

    @media only screen and (width <=768px) {
      font-size: calc((100 / 390) * 32 * 1vw);
    }
  }

  .fs-36 {
    font-size: 36px;

    @media only screen and (width <=768px) {
      font-size: calc((100 / 390) * 32 * 1vw);
    }
  }

  .fs-32 {
    font-size: 32px;

    @media only screen and (width <=768px) {
      font-size: calc((100 / 390) * 24 * 1vw);
    }
  }

  .fs-28 {
    font-size: 28px;

    @media only screen and (width <=768px) {
      font-size: calc((100 / 390) * 24 * 1vw);
    }
  }

  .fs-24 {
    font-size: 24px;

    @media only screen and (width <=768px) {
      font-size: calc((100 / 390) * 20 * 1vw);
    }
  }

  .fs-20 {
    font-size: 20px;

    @media only screen and (width <=768px) {
      font-size: calc((100 / 390) * 18 * 1vw);
    }
  }

  .fs-14 {
    font-size: 14px;

    @media only screen and (width <=768px) {
      font-size: calc((100 / 390) * 14 * 1vw);
    }
  }

  .fs-12 {
    font-size: 12px;

    @media only screen and (width <=768px) {
      font-size: calc((100 / 390) * 12 * 1vw);
    }
  }

  /* =====================
    MV
  ===================== */
  .u-mv {
    &::before {
      background-image: url('../../img/recruit/keyword/mv.png');
    }
  }

  /* =====================
    benefit
  ===================== */
  .benefit {
    position: relative;
    padding-block: 120px;

    @media only screen and (width <=768px) {
      padding-block: calc((100 / 390) * 80 * 1vw);
    }

    .u-inner {
      >.description {
        margin-block-start: 56px;
        color: var(--main);
        text-align: center;

        @media only screen and (width <=768px) {
          margin-block-start: calc((100 / 390) * 48 * 1vw);
        }
      }

      .block-list {
        display: block flex;
        gap: 45px;
        align-items: center;
        justify-content: center;
        margin-block-start: 89px;

        @media only screen and (width <=768px) {
          flex-direction: column;
          gap: calc((100 / 390) * 32 * 1vw);
          margin-block-start: calc((100 / 390) * 64 * 1vw);
        }

        .item {
          display: block grid;
          grid-template-rows: repeat(3, max-content);
          row-gap: 21px;
          justify-items: center;
          inline-size: 350px;
          aspect-ratio: 1/1;
          padding-block-start: 61px;
          color: #fff;
          background: linear-gradient(180deg, #001636 0%, #0c7db5 100%);
          border-radius: 50rem;

          @media only screen and (width <=768px) {
            row-gap: calc((100 / 390) * 20 * 1vw);
            inline-size: calc((100 / 390) * 350 * 1vw);
            padding-block-start: calc((100 / 390) * 64 * 1vw);

            & img {
              inline-size: calc((100 / 390) * 81 * 1vw);
            }
          }

          .title {
            font-size: 24px;
            font-weight: 500;
            line-height: 1;

            @media only screen and (width <=768px) {
              font-size: calc((100 / 390) * 24 * 1vw);
            }
          }

          .description {
            line-height: 1.4;
            text-align: center;
          }
        }
      }

      .wrap {
        padding-block: 40px 36px;
        padding-inline: 40px;
        margin-block-start: 56px;
        margin-inline: 80px;
        border-style: solid;
        border-width: 1px;
        border-image-source: linear-gradient(to bottom, #001636, #0c7db5);
        border-image-slice: 1;

        @media only screen and (width <=768px) {
          padding-block: calc((100 / 390) * 32 * 1vw);
          padding-inline: calc((100 / 390) * 24 * 1vw);
          margin-block-start: calc((100 / 390) * 48 * 1vw);
          margin-inline: 0;
        }

        .title {
          padding-block: 8px;
          padding-inline: 48px;
          font-size: 20px;
          font-weight: 500;
          color: #001636;
          border-bottom: solid 1px #7f8a9a;

          @media only screen and (width <=768px) {
            padding-block: calc((100 / 390) * 8 * 1vw);
            padding-inline: calc((100 / 390) * 48 * 1vw);
            font-size: calc((100 / 390) * 20 * 1vw);
          }
        }

        .list {
          padding-inline-start: 48px;
          margin-block-start: 10px;

          @media only screen and (width <=768px) {
            padding-inline: 1em;
          }

          .dot {
            position: relative;
            padding-block: 4px;

            @media only screen and (width <=768px) {
              padding-inline-start: 1.5em;
              text-indent: -1.5em;
            }

            &::before {
              @media (width > 768px) {
                translate: 0 -3px;
              }

              @media (width <=768px) {
                translate: 0 -0.6vw;
              }

              display: inline-block;
              inline-size: 6px;
              aspect-ratio: 1/1;
              margin-inline-end: 16px;
              content: '';
              background-image: linear-gradient(to bottom, #001636 0%, #0c7db5);
              border-radius: 50rem;
            }
          }
        }
      }
    }
  }
}