@charset "UTF-8";

.main {
  .u-mv {
    &::before {
      background-image: url('../../img/recruit/requirements/mv.png');
    }

    @media (width <=768px) {
      & .u-inner {
        & .u-h1-title {
          & span[lang='en'] {
            font-size: calc((100 / 390) * 40 * 1vw);
          }
        }
      }
    }
  }

  /* =====================
    requirements
  ===================== */
  .requirements {
    position: relative;
    padding-block: 160px 139px;
    background: linear-gradient(180deg, #001636 15.73%, #002f4e 57.86%, #0c7db5 100%);

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

    &::before {
      position: absolute;
      top: 0;
      right: 0;
      inline-size: 100%;
      block-size: 1258px;
      pointer-events: none;
      content: '';
      background-image: url('../../img/recruit/jobcategories/about_bg.png');
      background-repeat: no-repeat;
      background-position: top center;
      background-size: cover;
    }

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

    .u-inner {
      position: relative;
      padding-inline: 40px;

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

      /* ==== btn ==== */
      .btn-set {
        display: block grid;
        grid-template-columns: repeat(2, 291px);
        column-gap: 45px;
        justify-content: center;
        margin-block-end: 64px;

        @media only screen and (width <=768px) {
          grid-template-columns: 1fr;
          gap: calc((100 / 390) * 32 * 1vw);
          margin-block-end: calc((100 / 390) * 64 * 1vw);
        }

        .item {
          position: relative;

          .menu-item {
            position: relative;
            display: block flow;
            inline-size: 100%;
            block-size: 100%;
            padding-block: 16px;
            padding-inline: 40px 57px;
            font-size: 20px;
            font-weight: 500;
            color: #fff;
            text-align: center;
            border: 1px solid #fff;

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

            &::after {
              position: absolute;
              top: 50%;
              right: 40px;
              display: block flow;
              inline-size: 14px;
              block-size: 18px;
              content: '';
              background-image: url('../../img/recruit/requirements/icon_arrow.svg');
              background-repeat: no-repeat;
              background-position: center;
              background-size: contain;
              transform: translateY(-50%);
            }

            @media only screen and (width <=768px) {
              &::after {
                right: calc((100 / 390) * 40 * 1vw);
                inline-size: calc((100 / 390) * 14 * 1vw);
                block-size: calc((100 / 390) * 18 * 1vw);
              }
            }
          }
        }
      }

      /* ==== Section ==== */
      .section {
        padding-block: 72px 80px;
        padding-inline: 80px;
        background-color: #fff;

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

        & h3.title {
          font-size: 36px;
          font-weight: 500;

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

        .u-table {
          margin-block-start: 24px;

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

          .tr:last-child {
            :where(dt, dd) {
              border-block-end: 1px solid var(--_border-color);
            }
          }
        }

        &[data-id='req02'] {
          margin-block-start: 88px;

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

          .u-table {
            margin-block-start: 42px;

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

      /* ==== TAB ==== */
      .tab {
        position: relative;
        display: block flex;
        gap: 40px;
        margin-block-start: 26px;

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

        & li {
          inline-size: 275px;
          border-style: solid;
          border-width: 1px;
          border-image-source: linear-gradient(to bottom, #001636, #0c7db5);
          border-image-slice: 1;

          @media (width <=768px) {
            inline-size: 100%;
            font-size: calc((100 / 390) * 16 * 1vw);
            text-align: left;
          }

          & button {
            display: block flex;
            gap: 40px;
            align-items: center;
            inline-size: 100%;
            block-size: 100%;
            padding-block: 16px;
            padding-inline: 40px;
            font-size: 18px;
            font-weight: 500;

            @media only screen and (width <=768px) {
              gap: calc((100 / 390) * 24 * 1vw);
              padding-block: calc((100 / 390) * 16 * 1vw);
              padding-inline: calc((100 / 390) * 40 * 1vw);
              font-size: calc((100 / 390) * 18 * 1vw);
            }

            .tag {
              display: block grid;
              flex-shrink: 0;
              place-content: center;
              inline-size: 55px;
              block-size: 26px;
              font-size: 13px;
              line-height: 1.2;
              border-style: solid;
              border-width: 1px;
              border-image-source: linear-gradient(to bottom, #001636 0%, #0c7db5);
              border-image-slice: 1;

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

          /* ==== active ==== */
          &.active {
            background-image: linear-gradient(to bottom, #001636, #0c7db5);
            border: solid 1px #fff;

            & button {
              & span {
                color: #fff;
                background: unset;
                background-clip: unset;
                -webkit-text-fill-color: unset;
                border-image-source: unset;
              }
            }
          }
        }
      }

      /* エリアの表示非表示と形状 */
      .area {
        display: none;
        /* 透過0 */
        /* はじめは非表示 */
        opacity: 0;

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

      /* areaにis-activeというクラスがついた時の形状 */
      .area.is-active {
        display: block;
        /* 表示 */
        animation-name: displayanime;
        /* ふわっと表示させるためのアニメーション */
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
      }
    }
  }
}