@charset "UTF-8";

@media(max-width:767px) {
  * {
    line-height: 1.1;
  }
}

:is(.i_content_green, .i_border_green) {
  position: relative;
  width: min(calc(87.981vw - 7.696px), 1600px);
  margin: 0 auto;
  padding: 32px;
}

.i_content_green {
  border-radius: 44px;

  .i_bg {
    background-color: var(--pale-green);

    span {
      color: #fff;
    }
  }
}

.i_border_green {
  border: 4px solid var(--main-green);
  border-radius: 44px;

  .i_bg {
    overflow: hidden;

    span {
      color: var(--pale-green);
    }
  }
}

:is(.i_content_green, .i_border_green) h2 {
  position: relative;
  font-size: 64px;
  font-weight: bold;
  z-index: 2;

  &::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: calc(clamp(65px, calc(7.09135vw + 10.5384px), 124px) * -1);
    display: block;
    width: clamp(154px, calc(4.08654vw + 122.61536px), 188px);
    height: clamp(154px, calc(4.08654vw + 122.61536px), 188px);
    border-radius: 50%;
    background-color: var(--sub-green);
    z-index: -1;
  }
}

.i_button {
  position: relative;
  display: block;
  width: 256px;
  margin: 48px auto 70px;
  padding: 24px;
  border: 1px solid var(--heading-black);
  background-color: #fff;
  white-space: nowrap;
  transition: 0.3s;

  &::after {
    content: "";
    position: absolute;
    right: 24px;
    display: inline-block;
    width: 23px;
    height: 23px;
    background: url(../image/i_arrow.svg) center/contain no-repeat;
    vertical-align: text-bottom;
    transition: 0.3s;
  }

  &:hover {
    color: #888;

    &::after {
      transform: rotate(360deg);
    }
  }
}

.i_bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 44px;
  -webkit-user-select: none;
  user-select: none;
  z-index: -1;

  span {
    position: absolute;
    bottom: calc(clamp(12px, calc(2.430556vw - 6.6666752px), 40px) * -1);
    right: calc(clamp(12px, calc(2.430556vw - 6.6666752px), 40px) * -1);
    font-size: clamp(120px, 15.625vw, 300px);
    font-weight: 900;
  }
}


@media (max-width: 767px) {
  :is(.i_content_green, .i_border_green) {
    padding: 8px;
  }

  .i_content_green {
    border-radius: 22px;
  }

  .i_border_green {
    border-radius: 22px;
  }

  :is(.i_content_green, .i_border_green) h2 {
    font-size: 28px;

    &::before {
      left: -36px;
      width: 64px;
      height: 64px;
    }
  }

  .i_button {
    width: min(95%, 220px);
    margin: min(9.14286vw, 48px) auto min(9.14286vw, 70px);
    padding: 16px;

    &::after {
      right: min(calc(9.259259vw - 13.44444362px), 16px);
      width: 18px;
      height: 18px;
      vertical-align: text-bottom;
    }
  }

  .i_bg {
    border-radius: 22px;

    span {
      bottom: calc(min(calc(0.45767vw + 8.398155px), 12px) * -1);
      right: calc(min(calc(0.45767vw + 8.398155px), 12px) * -1);
      font-size: min(calc(14.6453vw + 4.74145px), 120px);
      font-weight: 900;
    }
  }
}


#i_news {
  margin-top: 132px;

  .news_list {
    max-width: 940px;
    margin: 64px auto 0;

    li {
      display: flex;
      gap: 1em;
      padding: 16px;
      border-bottom: 1px solid #888;

      time {
        line-height: 1.5;
      }

      p {
        line-height: 1.5;
        color: var(--heading-black);
        text-wrap: pretty;
      }

      a {
        text-decoration-style: solid;
        text-decoration-line: underline;
        text-decoration-color: var(--heading-black);
        transition: 0.2s;
        line-height: 1.5;

        &:hover {
          opacity: 0.5;
        }
      }
    }
  }
}

@media (max-width: 767px) {
  #i_news {
    margin-top: 60px;

    .news_list {
      max-width: 940px;
      margin: 28px auto 0;
    }
  }
}

#i_greeting {
  margin-top: calc(132px + (1.8229167vw * 3.5));

  p {
    width: fit-content;
    margin: 64px auto 72px;
    text-align: center;

    span {
      display: block;
      margin-top: 72px;
      text-align: right;
    }
  }
}

@media (max-width: 767px) {
  #i_greeting {
    margin-top: 60px;

    p {
      margin: 28px auto 28px;
      text-align: start;

      span {
        margin-top: 28px;
      }
    }
  }
}

#i_business {
  margin-top: calc(132px + (2.734375vw * 3.5));

  p {
    width: fit-content;
    margin: 64px auto;
    text-align: center;
  }

}

@media (max-width: 767px) {
  #i_business {
    margin-top: 60px;

    p {
      margin: 28px auto;
    }

  }
}

#i_work {
  margin-top: calc(132px + (3.64583vw * 3.5));

  .work_list {
    display: flex;
    flex-wrap: wrap;
    gap: 60px 0;
    justify-content: center;
    max-width: 1290px;
    margin: 64px auto 0;

    li {
      position: relative;
      width: calc(100% / 3);
      aspect-ratio: 7 / 6;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: 0.3s;

        &:has(+a:hover) {
          transform: scale(1.1);
        }
      }

      a {
        position: absolute;
        inset: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #0008;
        font-size: 24px;
        color: #fff;
        transition: 0.3s;

        &:hover {
          background-color: #0000;
          text-shadow: 1px 1px 0 #555;
        }
      }
    }
  }
}

@media (max-width: 767px) {
  #i_work {
    margin-top: 60px;

    .work_list {
      gap: 24px 0;
      margin: 28px auto 0;

      li {
        width: min(90%, 455px);
      }
    }
  }
}

#i_recruit {
  position: relative;
  width: 100%;
  aspect-ratio: 32 / 11;
  margin: 132px auto 0 0;

  .i_recruit_img {
    position: absolute;
    top: 0;
    left: 0;
    width: min(91.66667vw, 1760px);
    height: fit-content;
    overflow: hidden;

    .i_bg {
      border-radius: 0;
      z-index: unset;

      span {
        color: var(--pale-green);
        mix-blend-mode: overlay;
      }
    }
  }

  .i_recruit_text {
    position: absolute;
    right: 0;
    left: unset;
    top: clamp(16px, calc(28.47222vw - 202.6666496px), 344px);
    width: 100%;
    height: fit-content;

    p {
      min-width: fit-content;
      margin-top: clamp(24px, calc(2.25564vw + 6.6766848px), 36px);
      margin-left: auto;
      margin-right: 0;
      padding: 16px;
      padding-right: 8.33333vw;
      background-color: var(--main-orange);
      color: #fff;
      text-align: left;
    }

    p:nth-of-type(1) {
      margin-top: 0;
    }

    .short {
      width: 26.04167vw;
    }

    .middle {
      width: 33.85417vw;
    }

    .long {
      width: 41.66667vw;
    }
  }
}


@media (max-width: 767px) {
  #i_recruit {
    position: relative;
    width: 100%;
    height: 300px;
    margin: 60px auto 0 0;

    .i_recruit_img {
      width: 100%;
      height: 300px;
      overflow: hidden;

      img {
        position: relative;
        right: 150px;
        width: 918px;
        aspect-ratio: 88 / 33;
        max-width: unset;
      }
    }

    .i_recruit_text {
      top: clamp(14px, calc(0.42827vw + 12.71519px), 16px);

      p {
        margin-top: clamp(14px, calc(2.14133vw + 7.57601px), 24px);
        padding: clamp(8px, calc(1.2848vw + 4.1456px), 14px);
        line-height: 1.25;
      }
    }
  }
}

.i_sec {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 3.75vw;
  width: min(calc(87.981vw - 7.696px), 1600px);
  margin: 132px auto 0;

  div:nth-of-type(2) {
    position: relative;
    align-self: end;
    transform: translateY(50%);
  }

  img {
    aspect-ratio: 10 / 7;
    object-fit: cover;
    object-position: center;
  }

  .small {
    width: 18.229167vw;
    border-radius: 22px;
  }

  .medium {
    width: 27.34375vw;
    border-radius: 33px;
  }

  .large {
    width: 36.4583vw;
    border-radius: 44px;
  }
}

@media(max-width: 767px) {
  .i_sec {
    flex-direction: column;
    gap: 9.14285vw;
    width: calc(87.981vw - 7.696px);
    margin: 60px auto 0;

    div:nth-of-type(1) {
      align-self: start;
    }

    div:nth-of-type(2) {
      align-self: end;
      transform: unset;
    }

    .small {
      width: 50vw;
      border-radius: 22px;
    }

    .medium {
      width: 60vw;
      border-radius: 22px;
    }

    .large {
      width: 70vw;
      border-radius: 33px;
    }
  }
}

.insta_wrap {
  position: relative;
  margin-top: 182px;

  .content_bg {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
  }

  .content_wrap {
    position: relative;
    background: linear-gradient(135deg, #24b75abf, #0095f5bf);
    padding-block: min(2.5vw, 48px);

    h2 {
      font-size: clamp(24px, calc(100vw / 30), 64px);
      color: #fff;
      text-align: center;
      line-height: 1.5;
      letter-spacing: 2px;
    }

    .content {
      display: flex;
      gap: min(10.41666vw, 200px);
      justify-content: center;
      align-items: center;
      margin-top: min(2.5vw, 48px);

      a {
        transition: 0.2s;

        &:hover {
          opacity: 1;
          filter: brightness(1.25);
        }

        &::after {
          display: none;
        }

        img {
          width: min(15.625vw, 300px);
          aspect-ratio: 1 / 1;
        }
      }

      .text {
        p {
          color: #fff;
          line-height: 2;
          letter-spacing: 2px;

          &:not(:last-of-type) {
            margin-bottom: 16px;
          }
        }
      }
    }
  }
}

@media(max-width: 999px) {
  .insta_wrap {
    margin-top: 80px;

    .content_bg {
      width: unset;
    }

    .content_wrap {
      padding-block: clamp(24px, calc(5.88235vw + 5.17648px), 64px);

      h2 {
        width: 90%;
        margin-inline: auto;
        font-size: clamp(24px, 4.2vw, 42px);
      }

      .content {
        flex-direction: column;
        gap: clamp(24px, calc(5.88235vw + 5.17648px), 64px);
        width: 90%;
        margin-top: clamp(24px, calc(5.88235vw + 5.17648px), 64px);
        margin-inline: auto;

        a {
          max-width: 90%;

          img {
            width: 100%;
          }
        }

        .text {
          p {
            letter-spacing: clamp(0px, calc(0.44643vw - 1.42858px), 2px);
          }
        }
      }
    }
  }
}