@charset "UTF-8";

.main {
  /* =====================
    MV
  ===================== */
  .u-mv-recruit {
    background-image: url('../../img/recruit/person/mv.png');
  }

  /* =====================
    person
  ===================== */
  .person {
    position: relative;
    padding-block: 145px;

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

    .u-inner {
      .wrap {
        margin-inline: 50px;

        @media only screen and (width <= 768px) {
          margin-inline: 0;
        }

        & h3.u-text-gradation {
          font-size: 32px;
          font-weight: 600;
          text-align: center;

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

        .description {
          text-align: center;
          margin-block-start: 24px;

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

        .list {
          margin-block-start: 56px;
          display: block grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 20px;

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

          .item {
            position: relative;
            border-radius: 20px;
            padding-inline: 32px;
            padding-block: 40px;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            background-image: url('../../img/recruit/person/person_list_bg.png');

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

            .unit {
              display: block flex;
              align-items: center;
              gap: 24px;

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

              .icon {
                inline-size: 118px;
                block-size: 118px;
                display: block grid;
                place-content: center;
                border-radius: 50rem;
                background: #fff;

                @media only screen and (width <= 768px) {
                  inline-size: calc((100 / 390) * 60 * 1vw);
                  block-size: calc((100 / 390) * 60 * 1vw);
                }
              }
              .h4-title {
                display: block grid;
                line-height: 1;
                gap: 18px;

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

                .title {
                  font-size: 24px;
                  font-weight: 500;

                  @media only screen and (width <= 768px) {
                    font-size: calc((100 / 390) * 18 * 1vw);
                  }
                }
                .u-text-gradation {
                  display: block flow;
                  font-family: var(--title);
                  font-size: 36px;
                  text-transform: uppercase;

                  @media only screen and (width <= 768px) {
                    font-size: calc((100 / 390) * 24 * 1vw);
                  }
                }
              }
            }
            .description {
              text-align: left;
              margin-block-start: 1.5em;
            }
          }
        }
      }
    }

    /* loop */
    .loop {
      position: relative;
      inline-size: fit-content;
      pointer-events: none;
      display: block flex;
      gap: 24px;
      margin-block-start: 80px;
      overflow: hidden;

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

      .loop-box {
        display: block flex;
        gap: 24px;
        flex-shrink: 0;
        animation: loop-list1 100s linear infinite;

        @media (width <= 768px) {
          gap: calc((100 / 390) * 16 * 1vw);
        }
        .loop-item {
          width: fit-content;
          display: block;
          flex-shrink: 0;
          & img {
            border-radius: 20px;
            @media (width <= 768px) {
              inline-size: calc((100 / 390) * 177 * 1vw);
            }
          }
        }
      }
    }
  }
}