@charset "UTF-8";
.main {
  /* =====================
    MV
  ===================== */
  .u-mv {
    &::after {
      background-image: url('../img/recruit/mv.png');
    }
  }
  /* =====================
    message
  ===================== */
  .message {
    position: relative;
    padding-block: 132px 64px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url('../img/recruit/message_bg.png');
    inline-size: 100%;

    @media (width <= 768px) {
      background-position: right top;
      padding-block: calc((100 / 390) * 65 * 1vw) calc((100 / 390) * 65 * 1vw);
    }

    .inner {
      position: relative;
      inline-size: 1440px;

      @media (width <= 768px) {
        inline-size: 100%;
      }

      .wrap {
        position: relative;
        display: block grid;
        column-gap: 72px;

        @media (width <= 768px) {
          column-gap: 0;
        }

        .u-h2-title {
          grid-area: 1/1/2/2;
          margin-inline-start: 80px;

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

        .img_wrap {
          position: relative;
          grid-area: 2/1/3/2;
          margin-block-start: 49px;
          inline-size: 680px;

          @media (width <= 768px) {
            margin-block-start: calc((100 / 390) * 88 * 1vw);
            inline-size: 100%;

            & img {
              width: 100%;
            }
          }

          .ja-catch {
            position: absolute;
            font-family: var(--catch);
            text-shadow: 0px 0px 10px #073301;
            font-size: 32px;
            line-height: 1.34;
            color: #fff;
            -webkit-writing-mode: vertical-rl;
            writing-mode: vertical-rl;
            top: 27px;
            right: 48px;

            @media (width <= 768px) {
              text-shadow: 0 0 calc((100 / 390) * 10 * 1vw) #073301;
              font-size: calc((100 / 390) * 20 * 1vw);
              top: calc((100 / 390) * 28 * 1vw);
              right: calc((100 / 390) * 16 * 1vw);
            }

            .indent2 {
              display: block flow;
              padding-inline-start: 1.8em;

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

        .en-catch {
          position: absolute;
          font-family: var(--title);
          font-size: 64px;
          line-height: 1.1;
          text-align: right;
          text-transform: uppercase;
          color: rgba(255, 255, 255, 0.5);
          opacity: 0.7;
          text-shadow: 4px 4px 30px rgba(0, 45, 8, 0.4);
          top: -16px;
          right: 80px;

          @media (width <= 768px) {
            font-size: calc((100 / 390) * 24 * 1vw);
            top: calc((100 / 390) * 70 * 1vw);
            right: calc((100 / 390) * 16 * 1vw);
          }
        }

        .message_wrap {
          position: relative;
          grid-area: 1/2/3/3;
          margin-block-start: 242px;
          margin-inline-end: 80px;

          @media (width <= 768px) {
            grid-area: 3/1/4/2;
            margin-block-start: calc((100 / 390) * 32 * 1vw);
            margin-inline: calc((100 / 390) * 16 * 1vw);
          }

          .description + .description {
            margin-block-start: 1em;
          }
        }
      }
    }
  }

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

    @media (width <= 768px) {
      padding-block: calc((100 / 390) * 64 * 1vw) 0;
    }
    .u-inner {
      padding-inline: 40px;

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

      .wrap {
        position: relative;
        padding-inline: 80px;
        padding-block: 92px 80px;

        @media (width <= 768px) {
          margin-inline: 0;
          padding-inline: calc((100 / 390) * 16 * 1vw);
          padding-block: calc((100 / 390) * 47 * 1vw);
        }

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

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

  .entry_btn {
    padding-block: 80px 120px;

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

    .u-inner {
      .anchor {
        position: relative;
        inline-size: 690px;
        margin-inline: auto;
        display: block flex;
        align-items: start;
        justify-content: space-between;
        padding-inline: 80px;
        padding-block: 44px 27px;
        background-image: linear-gradient(220deg, #d2d200 -8.93%, #007635 37.32%, #18562a 83.58%);

        @media (width <= 768px) {
          inline-size: calc((100 / 390) * 358 * 1vw);
          padding-inline: calc((100 / 390) * 24 * 1vw);
          padding-block: calc((100 / 390) * 20 * 1vw);
        }

        &::after {
          content: '';
          inline-size: 32px;
          aspect-ratio: 32 / 20;
          mask-repeat: no-repeat;
          mask-size: contain;
          mask-position: center;
          mask-image: var(--icon-arrow);
          background-color: #fff;
          margin-block-start: 23px;
        }

        @media (width <= 768px) {
          &::after {
            inline-size: calc((100 / 390) * 24 * 1vw);
            margin-block-start: calc((100 / 390) * 20 * 1vw);
          }
        }
      }
    }
  }
}