@charset "UTF-8";

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

  /* =====================
    features
  ===================== */
  .features {
    position: relative;
    padding-block: 120px;
    background: var(--gradation);

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

    &::before {
      content: '';
      position: absolute;
      background-repeat: repeat-x;
      background-size: contain;
      background-position: bottom center;
      background-image: url('../../img/recruit/about/feature_dot.png');
      inline-size: 100%;
      min-block-size: 1757px;
      bottom: 0;
      left: 0;
    }

    @media only screen and (width <= 768px) {
      &::before {
        min-block-size: unset;
      }
    }

    .u-inner {
      .section {
        margin-inline: 50px;
        background-color: #fff;
        border-radius: 20px;
        padding-inline: 80px;
        padding-block: 88px;

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

        .unit {
          margin-block-start: 56px;

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

          .description {
            margin-block-start: 1.5em;
          }
        }
        .img {
          display: block flow;
          margin-block-start: 48px;
          margin-inline: auto 0;

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

        & + .section {
          margin-block-start: 40px;

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

        &[data-id='2'] {
          .description {
            text-align: center;
            margin-block-start: 56px;

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

          .list {
            display: block grid;
            grid-template-columns: repeat(3, 220px);
            justify-content: center;
            gap: 54px;
            margin-block-start: 42px;

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

            .item {
              position: relative;
              inline-size: 220px;
              aspect-ratio: 1/1;
              border-radius: 50rem;
              background-repeat: no-repeat;
              background-size: contain;
              background-position: center;
              background-image: url('../../img/recruit/about/philosophy_bg.svg');
              display: block grid;
              place-content: center;

              @media only screen and (width <= 768px) {
                inline-size: calc((100 / 390) * 100 * 1vw);
                place-content: unset;
                justify-items: center;
                align-items: start;
                grid-template-rows: repeat(2, max-content);

                .icon {
                  inline-size: calc((100 / 390) * 80 * 1vw);
                }
              }

              .title {
                font-size: 20px;
                font-weight: 500;
                text-align: center;
                color: var(--primary);

                @media only screen and (width <= 768px) {
                  font-size: calc((100 / 390) * 16 * 1vw);
                  line-height: 1;
                }
              }
            }
          }
        }
      }
    }
  }
  /* =====================
    Outline
  ===================== */
  .outline {
    position: relative;
    padding-block: 120px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url('../../img/recruit/about/outline_bg.png');

    @media only screen and (width <= 768px) {
      padding-block: calc((100 / 390) * 80 * 1vw);
    }
    .u-inner {
      .wrap {
        background-color: #fff;
        border-radius: 20px;
        padding-inline: 80px;
        padding-block: 80px;
        margin-inline: 50px;

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

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

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

  /* =====================
    message
  ===================== */
  .message {
    position: relative;
    padding-block-start: 391px;
    padding-block-end: 120px;

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

    &::before {
      content: '';
      position: absolute;
      background-repeat: repeat-x;
      background-size: cover;
      background-position: bottom center;
      background-image: url('../../img/recruit/about/message_bg.png');
      inline-size: 100%;
      block-size: 420px;
      top: 0;
      left: 0;
      pointer-events: none;
    }

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

    .u-inner {
      position: relative;

      .wrap {
        position: relative;
        margin-inline: 50px;

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

        .unit {
          margin-inline: 120px;
          margin-block-start: 58px;

          @media only screen and (width <= 768px) {
            margin-inline: 0;
            margin-block-start: calc((100 / 390) * 24 * 1vw);
          }
          & h3.catch {
            font-size: 32px;
            font-weight: 500;

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

            &:first-of-type {
              margin-block-start: 2em;
            }
          }
        }

        .name-set {
          display: block flex;
          align-items: baseline;
          justify-content: end;
          gap: 24px;
          margin-block-start: 32px;

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

          & dd {
            font-family: var(--name);
            font-size: 24px;
            font-weight: bold;
            line-height: 1.5;

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