@charset "UTF-8";

/* =====================
  utility
===================== */
main {
  --_font-number: 'Outfit', sans-serif;
}

/* =====================
  introduction
===================== */
.u-bg {
  padding-block: 130px 0;

  @media not all and (width >=768px) {
    padding-block: calc((100 / 750) * 160 * 1vw) 0;

    .contents {
      padding-inline: calc((100 / 750) * 40 * 1vw);
    }
  }

  /* introduction */
  .contents {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    padding-block-end: 130px;

    @media not all and (width >=768px) {
      gap: calc((100 / 750) * 60 * 1vw);
      padding-block-end: calc((100 / 750) * 160 * 1vw);
    }

    .img {
      position: relative;
      grid-area: 1 / 1 / 3 / 2;
      inline-size: 400px;
      block-size: 632px;
      margin-inline-start: 20px;
      pointer-events: none;

      @media not all and (width >=768px) {
        grid-area: 3 / 1 / 3 / 1;
        inline-size: auto;
        block-size: calc((100 / 750) * 632 * 1vw);
        margin-block-start: calc((100 / 750) * 40 * 1vw);
        margin-inline: auto;
      }

      .item:where(:not([data-id='1'])) {
        position: absolute;
        z-index: 2;
      }

      .item {
        &[data-id='1'] {
          inline-size: 400px;

          @media not all and (width >=768px) {
            display: block;
            inline-size: auto;
            margin-inline: auto;
          }
        }

        &[data-id='2'] {
          top: 31px;
          left: -138px;

          @media not all and (width >=768px) {
            top: calc((100 / 750) * 40 * 1vw);
            left: calc((100 / 750) * -100 * 1vw);
            inline-size: calc((100 / 750) * 160 * 1vw);
          }
        }

        &[data-id='3'] {
          right: -68px;
          bottom: -32px;

          @media not all and (width >=768px) {
            right: calc((100 / 750) * -100 * 1vw);
            bottom: calc((100 / 750) * -40 * 1vw);
            inline-size: calc((100 / 750) * 270 * 1vw);
          }
        }

        &[data-id='4'] {
          top: -109px;
          right: -286px;

          @media not all and (width >=768px) {
            top: calc((100 / 750) * -70 * 1vw);
            right: calc((100 / 750) * -110 * 1vw);
            inline-size: calc((100 / 750) * 290 * 1vw);
          }
        }
      }
    }

    /* h1 */
    .unit[data-id='1'] {
      grid-area: 1 / 2 / 2 / 3;
      align-items: flex-start;
      margin-block-end: 0;
      font-family: var(--yumin);
      font-size: 30px;
      font-weight: bold;
      line-height: 1.66;

      @media print, screen and (width >=768px) {
        padding-block: 140px 0;
      }

      @media not all and (width >=768px) {
        grid-area: 1 / 1 / 2 / 1;
        margin-block-end: calc((100 / 750) * 45 * 1vw);
        margin-block-end: 0;
        font-size: calc((100 / 750) * 37 * 1vw);
      }
    }

    /* p */
    .unit[data-id='2'] {
      grid-area: 2 / 2 / 3 / 3;
      inline-size: 534px;
      translate: 70px 0;

      @media not all and (width >=768px) {
        grid-area: 2 / 1 / 3 / 1;
        inline-size: auto;
        translate: 0 0;
      }
    }
  }
}

/* =====================
  number
===================== */
article.number {
  padding-block: 130px;
  background: var(--gray);

  @media not all and (width >=768px) {
    padding-block: calc((100 / 750) * 160 * 1vw);
    padding-inline: calc((100 / 750) * 40 * 1vw);
  }

  & hgroup {
    margin-block-end: 60px;

    @media not all and (width >=768px) {
      margin-block-end: calc((100 / 750) * 80 * 1vw);
    }
  }

  .unit[data-id='1'] {
    margin-block-end: 60px;
    text-align: center;

    @media not all and (width >=768px) {
      margin-block-end: calc((100 / 750) * 80 * 1vw);
    }
  }

  & dl {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    justify-content: center;
    margin-block-end: 60px;

    @media not all and (width >=768px) {
      grid-template-columns: repeat(2, 1fr);
      gap: calc((100 / 750) * 10 * 1vw);
      margin-block-end: 0;
    }

    .wrap {
      padding-block: 38px 27px;
      background: #111;
      border: 1px solid #5b5b5b;
      border-radius: 10px;

      @media not all and (width >=768px) {
        padding-block: calc((100 / 750) * 38 * 1vw) calc((100 / 750) * 27 * 1vw);
        border-radius: calc((100 / 750) * 10 * 1vw);
      }

      & dt {
        display: grid;
        gap: 20px;
        align-items: center;
        justify-content: center;
        text-align: center;

        @media not all and (width >=768px) {
          gap: calc((100 / 750) * 20 * 1vw);
        }

        & img {
          display: block;
          margin-inline: auto;

          @media not all and (width >=768px) {
            inline-size: calc((100 / 750) * 100 * 1vw);
          }
        }

        & h3 {
          font-size: 22px;
          font-weight: bold;

          @media not all and (width >=768px) {
            font-size: calc((100 / 750) * 22 * 1vw);
          }
        }
      }

      & dd {
        margin-block: calc((1em - 1lh) / 2);

        strong {
          font-family: var(--_font-number);
          font-weight: 500;
          line-height: 1;
          color: var(--orange);
        }

        span {
          font-weight: bold;
        }
      }
    }

    .wrap[data-id='1'] {
      & dd {
        display: grid;
        grid-auto-flow: column;
        gap: 7px;
        align-items: baseline;
        justify-content: center;
        margin-block-start: 3px;
        line-height: 1;

        @media not all and (width >=768px) {
          margin-block-start: 0;
        }

        strong {
          font-size: 90px;

          @media not all and (width >=768px) {
            font-size: calc((100 / 750) * 90 * 1vw);
          }
        }

        span {
          font-size: 33px;

          @media not all and (width >=768px) {
            font-size: calc((100 / 750) * 33 * 1vw);
          }
        }
      }
    }

    .wrap[data-id='2'] {
      & dt {
        @media not all and (width >=768px) {
          & img {
            inline-size: calc((100 / 750) * 130 * 1vw);
          }
        }
      }

      & dd {
        display: grid;
        grid-auto-flow: column;
        gap: 22px;
        justify-content: center;
        margin-block-start: 10px;

        @media not all and (width >=768px) {
          gap: calc((100 / 750) * 19 * 1vw);
          margin-block-start: 1.2vw;
        }

        .item {
          display: grid;
          grid-auto-flow: column;
          gap: 1px;
          align-items: baseline;
          justify-content: center;
          font-weight: bold;
          line-height: 1;

          @media not all and (width >=768px) {
            gap: calc((100 / 750) * 1 * 1vw);
          }
        }

        span {
          font-size: 25px;

          @media not all and (width >=768px) {
            font-size: calc((100 / 750) * 25 * 1vw);
          }
        }

        strong {
          font-size: 40px;

          @media not all and (width >=768px) {
            font-size: calc((100 / 750) * 40 * 1vw);
          }
        }
      }
    }

    .wrap[data-id='3'] {
      & dd {
        display: grid;
        grid-auto-flow: column;
        gap: 5px;
        align-items: baseline;
        justify-content: center;
        margin-block-start: 3px;

        & strong {
          font-size: 90px;

          @media not all and (width >=768px) {
            font-size: calc((100 / 750) * 90 * 1vw);
          }
        }

        span {
          font-size: 33px;

          @media not all and (width >=768px) {
            font-size: calc((100 / 750) * 33 * 1vw);
          }
        }
      }
    }

    .wrap[data-id='4'] {
      & dt {
        @media not all and (width >=768px) {
          & img {
            inline-size: calc((100 / 750) * 109 * 1vw);
          }
        }
      }

      & dd {
        display: grid;
        grid-auto-flow: column;
        align-items: baseline;
        justify-content: center;

        @media not all and (width >=768px) {
          margin-block-start: 0.4vw;
        }

        strong {
          font-size: 90px;

          @media not all and (width >=768px) {
            font-size: calc((100 / 750) * 90 * 1vw);
          }

          span {
            font-size: 50px;

            @media not all and (width >=768px) {
              font-size: calc((100 / 750) * 50 * 1vw);
            }
          }
        }

        span {
          font-size: 33px;
          translate: 8px 0;

          @media not all and (width >=768px) {
            font-size: calc((100 / 750) * 33 * 1vw);
            translate: 0 0;
          }
        }
      }
    }

    .wrap[data-id='5'] {
      & dd {
        display: grid;
        grid-template-columns: auto auto auto;
        gap: 0 5px;
        align-items: baseline;
        justify-content: center;
        margin-block-start: 0;
        translate: 0 -8px;

        @media not all and (width >=768px) {
          margin-block-start: 2.4vw;
        }

        strong {
          font-size: 90px;

          @media not all and (width >=768px) {
            font-size: calc((100 / 750) * 90 * 1vw);
          }
        }

        span {
          font-size: 33px;

          @media not all and (width >=768px) {
            font-size: calc((100 / 750) * 33 * 1vw);
          }
        }

        small {
          display: block;
          grid-column: 1 / -1;
          margin-block: calc((1em - 1lh) / 2);
          font-size: 14px;
          text-align: center;

          @media not all and (width >=768px) {
            font-size: calc((100 / 750) * 14 * 1vw);
          }
        }
      }
    }

    .wrap[data-id='6'] {
      & dt {
        @media not all and (width >=768px) {
          & img {
            inline-size: calc((100 / 750) * 48 * 1vw);
          }
        }
      }

      & dd {
        display: grid;
        grid-auto-flow: column;
        align-items: baseline;
        justify-content: center;

        @media not all and (width >=768px) {
          margin-block-start: 0.4vw;
        }

        & strong {
          font-size: 90px;

          @media not all and (width >=768px) {
            font-size: calc((100 / 750) * 90 * 1vw);
          }
        }

        & span {
          font-size: 33px;

          @media not all and (width >=768px) {
            font-size: calc((100 / 750) * 33 * 1vw);
          }
        }
      }
    }
  }
}

/* =====================
  staff
===================== */
.staff {
  padding-block: 130px;

  @media not all and (width >=768px) {
    inline-size: calc(100vw - calc((100 / 750) * 80 * 1vw));
    padding-block: calc((100 / 750) * 80 * 1vw);
    margin-inline: auto;
  }

  .u-inner {
    position: relative;
    display: grid;
    grid-template-columns: 443px 1fr;
    gap: 60px;
    padding-block: 90px;
    padding-inline: 60px;
    background: var(--gray);
    border-block: 1px solid var(--orange);

    @media not all and (width >=768px) {
      grid-template-columns: auto;
      gap: calc((100 / 750) * 60 * 1vw);
      padding-block: calc((100 / 750) * 90 * 1vw);
      padding-inline: calc((100 / 750) * 60 * 1vw);
    }

    & hgroup {
      grid-area: 1 / 1 / 2 / 2;
      margin-block: calc((1em - 1lh) / 2);

      @media not all and (width >=768px) {
        grid-area: 1 / 1 / 2 / 1;
      }
    }

    p {
      grid-area: 2 / 1 / 3 / 2;
      margin-block: calc((1em - 1lh) / 2);

      @media not all and (width >=768px) {
        grid-area: 3 / 1 / 4 / 1;
      }
    }

    a {
      grid-area: 3 / 1 / 4 / 2;

      @media not all and (width >=768px) {
        grid-area: 4 / 1 / 5 / 1;
        margin-inline: auto;
      }
    }

    img {
      position: absolute;
      top: 90px;
      right: -80px;
      inline-size: 648px;

      @media not all and (width >=768px) {
        position: relative;
        inset: unset;
        grid-area: 2 / 1 / 3 / 1;
        inline-size: 100%;
      }
    }
  }
}

/* =====================
  requirements
===================== */
.requirements {
  padding-block: 130px;
  background: var(--gray);

  @media not all and (width >=768px) {
    padding-block: calc((100 / 750) * 160 * 1vw);
    padding-inline: calc((100 / 750) * 40 * 1vw);
  }

  & hgroup {
    margin-block-end: 60px;

    @media not all and (width >=768px) {
      margin-block-end: calc((100 / 750) * 80 * 1vw);
    }
  }

  .u-table {
    table-layout: fixed;

    & :where(td) a {
      color: var(--orange);
      text-decoration: underline;
      transition: all 250ms ease 0s;

      @media (any-hover: hover) {
        &:hover {
          text-decoration: none;
          opacity: 0.8;
        }
      }
    }
  }
}

/* =====================
  cv
===================== */
.cv {
  padding-block: 90px;

  @media not all and (width >=768px) {
    padding-block: calc((100 / 750) * 70 * 1vw);
    padding-inline: calc((100 / 750) * 80 * 1vw);
  }

  a {
    display: grid;
    grid-auto-flow: column;
    gap: 16px;
    align-items: center;
    justify-content: center;
    max-inline-size: 1000px;
    padding-block: 65px;
    margin-inline: auto;
    font-size: 21px;
    font-weight: bold;
    background: var(--orange);
    border-radius: 10px;

    @media not all and (width >=768px) {
      gap: calc((100 / 750) * 24 * 1vw);
      padding-block: calc((100 / 750) * 45 * 1vw);
      font-size: calc((100 / 750) * 28 * 1vw);
      border-radius: calc((100 / 750) * 10 * 1vw);
    }

    &::after {
      inline-size: 18px;
      aspect-ratio: 1 / 1;
      content: '';
      background-color: currentcolor;
      mask-image: var(--icon-arrow);
      mask-repeat: no-repeat;
      mask-position: center;
      mask-size: contain;
    }

    @media not all and (width >=768px) {
      &::after {
        inline-size: calc((100 / 750) * 18 * 1vw);
      }
    }
  }
}