@charset "UTF-8";
.main {
  /* =====================
    MV
  ===================== */
  .u-mv {
    background-image: url('../img/recruit/mv.png');

    @media (width <= 768px) {
      background-image: url('../img/recruit/mv_2x.png');
    }
  }
  /* =====================
    message
  ===================== */
  .message {
    position: relative;
    padding-block: 114px 114px;

    &::after {
      content: '';
      display: block flow;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      background-image: url('../img/recruit/message_bg.png');
      inline-size: 100%;
      min-block-size: 736px;
      position: absolute;
      top: 0;
      left: 0;
      pointer-events: none;
    }
    @media (width <= 768px) {
      padding-block: calc((100 / 390) * 80 * 1vw);
      &::after {
        background-image: url('../img/recruit/message_bg_2x.png');
        min-block-size: calc((100 / 390) * 1035 * 1vw);
      }
    }

    .u-inner {
      position: relative;
      display: block flex;
      justify-content: center;
      gap: 89px;

      @media (width <= 768px) {
        flex-direction: column;
        align-items: center;
        gap: calc((100 / 390) * 37 * 1vw);

        .message_img {
          &[data-id='1'] {
            width: calc((100 / 390) * 240 * 1vw);
            height: calc((100 / 390) * 160 * 1vw);
          }
          &[data-id='2'] {
            width: calc((100 / 390) * 160 * 1vw);
            height: calc((100 / 390) * 110 * 1vw);
            margin-block-start: calc((100 / 390) * 11 * 1vw);
          }
        }
      }

      .message_wrap {
        .u-content-catch {
          margin-block-start: 30px;

          @media (width <= 768px) {
            margin-block-start: 0;
          }
        }
        .description {
          position: relative;
          margin-block-start: 36px;
          z-index: 3;

          @media (width <= 768px) {
            margin-block-start: calc((100 / 390) * 23 * 1vw);
          }
          & + .description {
            margin-block-start: 1.8em;
          }
        }
      }
    }
  }
  /* =====================
    sdgs
  ===================== */
  .sdgs {
    padding-block: 101px 104px;
    background-color: #f1fbef;

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

    .action-title_wrap {
      display: block flex;
      align-items: center;
      gap: 84px;

      @media (width <= 768px) {
        flex-direction: column;
        align-items: start;
        gap: calc((100 / 390) * 32 * 1vw);
      }

      .u-h2-title {
        span[lang='en'] {
          text-transform: unset;
        }
      }
    }
    .action {
      .action-list {
        margin-block-start: 40px;
        display: block grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 44px;

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

        & > li {
          background-color: #fff;
          padding-inline: 32px;
          padding-block: 32px;

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

          .img_wrap {
            display: block flex;
            justify-content: space-between;
            align-items: flex-end;
            .picture {
              display: block flow;
            }
            @media (width <= 768px) {
              .action-icon {
                flex-shrink: 0;
                & img {
                  width: calc((100 / 390) * 70 * 1vw);
                  height: calc((100 / 390) * 70 * 1vw);
                }
              }
              .action-img {
                flex-shrink: 0;
                & img {
                  width: calc((100 / 390) * 240 * 1vw);
                  height: calc((100 / 390) * 160 * 1vw);
                }
              }
            }
          }
          .u-cube {
            margin-block-start: 24px;

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

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

  /* =====================
    requirements
  ===================== */
  .requirements {
    position: relative;
    padding-block: 114px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url('../img/recruit/requirements_bg.png');
    inline-size: 100%;

    @media (width <= 768px) {
      padding-block: calc((100 / 390) * 64 * 1vw) calc((100 / 390) * 64 * 1vw);
      background-image: url('../img/recruit/requirements_bg_2x.png');
    }
    .requirements_wrap {
      position: relative;
      background-color: #fff;
      margin-inline: 41px;
      padding-inline: 69px;
      padding-block: 80px;
      border-radius: 10px;

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

      /* ==== TAB ==== */
      .tab {
        position: relative;
        display: block flex;
        justify-content: center;
        gap: 20px;
        margin-block-start: 54px;

        @media (width <= 768px) {
          flex-direction: column;
          align-items: center;
          gap: calc((100 / 390) * 5 * 1vw);
          margin-block-start: calc((100 / 390) * 33 * 1vw);
        }
        & li {
          inline-size: 250px;
          border-radius: 50rem;
          border: solid 1px #559359;
          font-weight: 500;
          text-align: center;
          color: #559359;
          line-height: 1.2;

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

            @media (width <= 768px) {
              padding-inline: calc((100 / 390) * 32 * 1vw) 0;
              padding-block: calc((100 / 750) * 14 * 1vw);
            }
            .fs15 {
              display: block flow;
              font-size: 15px;
              margin-block-start: 2px;

              @media (width <= 768px) {
                display: inline-block;
                font-size: calc((100 / 390) * 13 * 1vw);
              }
            }
          }
          /* ==== active ==== */
          &.active {
            border: solid 1px #fff;
            background-color: rgba(85, 147, 89, 0.9);
            color: #fff;
          }
        }
      }

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

        @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;
      }
      .cube-title {
        margin-inline-start: 71px;
        .fs20 {
          display: inline;
          font-size: 20px;
        }

        @media (width <= 768px) {
          margin-inline-start: 0;
          .fs20 {
            font-size: calc((100 / 390) * 15 * 1vw);
          }
        }
      }
      .u-table {
        margin-block-start: 40px;

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

        .circle {
          position: relative;
          display: block flex;
          align-items: center;
          gap: 8px;
          margin-block-end: 9px;

          &:before {
            content: '';
            display: inline-block;
            inline-size: 16px;
            block-size: 16px;
            background-color: #cbb088;
            border-radius: 50rem;
          }
          &[data-id='2'] {
            margin-block-start: 16px;
          }

          @media (width <= 768px) {
            gap: calc((100 / 390) * 8 * 1vw);
            margin-block-end: calc((100 / 390) * 9 * 1vw);
            &:before {
              inline-size: calc((100 / 390) * 13 * 1vw);
              block-size: calc((100 / 390) * 13 * 1vw);
            }
            &[data-id='2'] {
              margin-block-start: calc((100 / 390) * 16 * 1vw);
            }
          }
        }
        .clumn_wrap {
          display: block flex;
          gap: 48px;
          margin-block-start: 10px;
          margin-block-end: 8px;

          @media (width <= 768px) {
            flex-direction: column;
            gap: 0;
            margin-block-start: calc((100 / 390) * 8 * 1vw);
            margin-block-end: calc((100 / 390) * 8 * 1vw);
          }
        }
      }
      .u-anchor {
        margin-block-start: 55px;

        @media (width <= 768px) {
          margin-block-start: calc((100 / 390) * 30 * 1vw);
        }
      }
    }
  }
}
@keyframes displayAnime {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}