@charset "UTF-8";

/* =====================
  共通
===================== */
.interview-list {
  display: block flex;
  justify-content: center;
  gap: 80px;

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

  .anchor {
    display: block flow;
    inline-size: 100%;
    block-size: 100%;

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

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

    .info {
      margin-block-start: 24px;
      display: block flex;
      align-items: center;
      gap: 16px;

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

      .name {
        font-family: var(--number);
        font-size: 36px;
        line-height: 1.1;
        color: var(--primary);

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

      .u-anchor {
        margin-inline: auto 0;
        padding-inline: 16px;
        padding-block: 16px;

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

    @media (any-hover: hover) {
      &:hover {
        .u-anchor {
          color: white;
          --_primary-color: #1990bc;
          --_secondary-color: #4ae296;
          &::after {
            background-image: url('../img/_common/arrow-white.svg');
          }
        }
      }
    }
  }
}

/* =====================
  Recruit
===================== */
body[data-id='recruit'] {
  .main {
    /* =====================
      MV
    ===================== */
    .u-mv {
      background-image: url('../img/recruit/mv.png');
    }
    /* =====================
      message
    ===================== */
    .message {
      position: relative;
      padding-block-start: 112px;
      padding-block-end: 55px;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      background-image: url('../img/recruit/message_bg.png');

      @media (width <= 768px) {
        padding-block-start: calc((100 / 390) * 88 * 1vw);
        padding-block-end: calc((100 / 390) * 64 * 1vw);
        background-color: #fff;
      }

      .u-inner {
        .wrap {
          position: relative;
          display: block flex;
          gap: 56px;

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

          &::before {
            content: '';
            display: block flow;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            background-image: url('../img/recruit/message_01.png');
            inline-size: 350px;
            block-size: 240px;
            position: absolute;
            top: -24px;
            right: 40px;
            pointer-events: none;
          }
          &::after {
            content: '';
            display: block flow;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            background-image: url('../img/recruit/message_03.png');
            inline-size: 220px;
            block-size: 160px;
            position: absolute;
            top: 264px;
            right: 0;
            pointer-events: none;
          }

          @media (width <= 768px) {
            &::before {
              inline-size: calc((100 / 390) * 350 / 2 * 1vw);
              block-size: calc((100 / 390) * 240 / 2 * 1vw);
              top: calc((100 / 390) * -72 * 1vw);
              right: calc((100 / 390) * 16 * 1vw);
            }
            &::after {
              inline-size: calc((100 / 390) * 220 / 2 * 1vw);
              block-size: calc((100 / 390) * 160 / 2 * 1vw);
              top: calc((100 / 390) * 56 * 1vw);
              right: 0;
            }
          }

          .u-h2-title {
            flex-shrink: 0;
          }
          .unit {
            inline-size: 627px;

            @media (width <= 768px) {
              inline-size: 100%;
            }

            .catch {
              font-family: var(--serif);
              font-size: 24px;

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

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

        .message_wrap {
          position: relative;
          display: block flex;
          align-items: center;
          gap: 64px;
          margin-block-start: 48px;

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

          &::before {
            content: '';
            display: block flow;
            flex-shrink: 0;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            background-image: url('../img/recruit/message_02.png');
            inline-size: 360px;
            block-size: 240px;
            pointer-events: none;
          }

          @media (width <= 768px) {
            &::before {
              inline-size: calc((100 / 390) * 360 * 1vw);
              block-size: calc((100 / 390) * 240 * 1vw);
            }
          }

          .p_wrap {
            inline-size: 568px;

            @media (width <= 768px) {
              inline-size: 100%;
            }

            .description {
              & + .description {
                margin-block-start: 1.5em;

                @media (width <= 768px) {
                  margin-block-start: 1em;
                }
              }
            }
          }
        }
      }
    }

    /* =====================
      number
    ===================== */
    .number {
      padding-block-start: 112px;
      padding-block-end: 112px;

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

      .u-inner {
        .number_wrap {
          display: block grid;
          grid-template-columns: repeat(3, 412px);
          gap: 24px 22px;
          margin-block-start: 48px;

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

          .item {
            position: relative;
            min-block-size: 257px;
            padding-block: 31px;
            padding-inline: 52px;
            border-radius: 10px;
            border: 1px solid #61d7db;
            background-color: #fffefe;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            background-image: url('../img/recruit/number_01.png');
            display: block grid;
            grid-template-rows: repeat(2, max-content);
            row-gap: 16px;

            @media (width <= 768px) {
              border-radius: calc((100 / 390) * 10 * 1vw);
              min-block-size: unset;
              padding-block: calc((100 / 390) * 24 * 1vw);
              row-gap: calc((100 / 390) * 8 * 1vw);
            }

            .no-title {
              & h4 {
                font-size: 18px;
                font-weight: 500;
                line-height: 1.2;
                text-align: center;
                color: var(--primary);
                margin-block-start: 8px;

                @media (width <= 768px) {
                  font-size: calc((100 / 390) * 18 * 1vw);
                  margin-block-start: calc((100 / 390) * 8 * 1vw);
                }
              }
              & p[lang='en'] {
                font-family: var(--title);
                font-size: 20px;
                line-height: 1;
                color: var(--primary);
                text-align: center;
                background: linear-gradient(180deg, #1990bc 0%, #4ae296 100%);
                -webkit-background-clip: text;
                background-clip: text;
                -webkit-text-fill-color: transparent;
                white-space: nowrap;
                margin-block-start: 12px;

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

            .num {
              .count {
                font-family: var(--number);
                font-size: 96px;
                line-height: 1.2;
                color: var(--primary);

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

              .tani {
                font-size: 32px;
                font-weight: 600;
                line-height: 1.2;
                color: var(--primary);

                @media (width <= 768px) {
                  font-size: calc((100 / 390) * 24 * 1vw);
                }
              }
              .dot {
                font-family: var(--number);
                line-height: 1.2;
                font-size: 64px;

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

                &::before {
                  content: '.';
                  display: inline-block;
                }
              }
            }

            &:has(.num_wrap) {
              padding-inline: 32px;

              @media (width <= 768px) {
                padding-inline: calc((100 / 390) * 24 * 1vw);
              }
            }
            .num_wrap {
              display: block flex;
              align-items: center;
              gap: 10px;
              margin-inline-start: 27px;

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

              .tani {
                font-family: var(--number);
                font-size: 96px;
                line-height: 1.2;
                text-align: center;
                color: var(--primary);

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

            &[data-id='2'] {
              background-image: url('../img/recruit/number_02.png');
            }
            &[data-id='3'] {
              background-image: url('../img/recruit/number_03.png');
            }
            &[data-id='4'] {
              background-image: url('../img/recruit/number_04.png');
              padding-inline: 58px;

              @media (width <= 768px) {
                padding-inline: calc((100 / 390) * 52 * 1vw);
              }
            }
            &[data-id='5'] {
              background-image: url('../img/recruit/number_05.png');
              padding-inline: 32px;

              @media (width <= 768px) {
                padding-inline: calc((100 / 390) * 32 * 1vw);
              }
              .num {
                letter-spacing: -5.76px;

                @media (width <= 768px) {
                  letter-spacing: calc((100 / 390) * -2.88 * 1vw);
                }
              }
              .tani {
                margin-inline-start: 8px;
                letter-spacing: 0;

                @media (width <= 768px) {
                  margin-inline-start: calc((100 / 390) * 8 * 1vw);
                }
              }
            }
            &[data-id='6'] {
              background-image: url('../img/recruit/number_06.png');
              padding-inline: 40px;

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

    /* =====================
      interview
    ===================== */
    .interview {
      position: relative;
      padding-block-start: 114px;
      padding-block-end: 114px;

      @media (width <= 768px) {
        padding-block-start: calc((100 / 390) * 64 * 1vw);
        padding-block-end: calc((100 / 390) * 64 * 1vw);
      }
      .u-inner {
        .title_wrap {
          display: block flex;
          align-items: center;
          gap: 48px;

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

          .description {
            line-height: 2;
          }
        }

        .interview-list {
          margin-block-start: 55px;
          padding-inline: 80px;

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

    /* =====================
      requirements
    ===================== */
    .requirements {
      position: relative;
      padding-block-start: 112px;
      padding-block-end: 112px;

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

      .u-inner {
        padding-inline: 40px;

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

        .wrap {
          background-color: #fff;
          padding-block: 81px 80px;

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

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

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

    .entry_btn {
      position: relative;
      padding-block: 88px;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      background-image: url('../img/recruit/entry_bg.png');

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

      .u-inner {
        padding-inline: 80px;

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

        .anchor {
          --_primary-color: #1990bc;
          --_secondary-color: #4ae296;
          position: relative;
          display: block flex;
          align-items: center;
          justify-content: space-between;
          border-radius: 8px;
          padding-inline: 94px;
          padding-block: 56px;
          transition:
            --_primary-color 500ms ease 0s,
            --_secondary-color 500ms ease 0s;
          background: linear-gradient(180deg, var(--_primary-color) 0%, var(--_secondary-color) 100%);

          @media (any-hover: hover) {
            &:hover {
              --_primary-color: #4ae296;
              --_secondary-color: #1990bc;
            }
          }

          @media (width <= 768px) {
            border-radius: calc((100 / 390) * 8 * 1vw);
            padding-inline: calc((100 / 390) * 24 * 1vw);
            padding-block: calc((100 / 390) * 32 * 1vw);
          }

          .u-anchor[data-color='white'] {
            padding-inline: 16px;
            padding-block: 16px;

            @media (width <= 768px) {
              padding-inline: calc((100 / 390) * 16 * 1vw);
              padding-block: calc((100 / 390) * 16 * 1vw);
            }
            @media (any-hover: hover) {
              &:hover {
                color: white;
                --_primary-color: transparent;
                --_secondary-color: transparent;
                &::before {
                  background-image: linear-gradient(to bottom in oklab, white, white);
                }
                &::after {
                  background-image: url('../img/_common/arrow-white.svg');
                }
              }
            }
          }
        }
      }
    }
  }
}

/* =====================
  Interview
===================== */
body[data-id='interview'] {
  .main {
    .mv {
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      min-block-size: 578px;

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

      .u-inner {
        padding-inline: 40px;
        padding-block-start: 152px;

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

        .wrap {
          display: block flex;
          gap: 56px;

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

          .img {
            flex-shrink: 0;
          }

          .unit {
            margin-block-start: 80px;
            filter: drop-shadow(0px 0px 20px #12728d);

            @media (width <= 768px) {
              margin-block-start: 0;
              filter: drop-shadow(0px 0px calc((100 / 390) * 20 * 1vw) #12728d);
            }

            .catch {
              font-family: var(--serif);
              font-size: 32px;
              font-weight: 600;
              color: #fff;

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

            .info_wrap {
              display: block flex;
              align-items: center;
              gap: 16px;
              margin-block-start: 40px;

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

              .name {
                font-family: var(--number);
                font-size: 64px;
                line-height: 1.1;
                color: #fff;

                @media (width <= 768px) {
                  font-size: calc((100 / 390) * 48 * 1vw);
                }
              }
              .info_unit {
                color: #fff;

                @media (width <= 768px) {
                  line-height: 1.2;
                }
              }
            }
          }
        }
      }
      .breadcrumb {
        margin-block-start: 16px;

        @media (width <= 768px) {
          margin-block-start: calc((100 / 390) * 32 * 1vw);
        }
      }
    }
    .interview {
      position: relative;
      padding-block-start: 112px;
      padding-block-end: 112px;

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

      .u-inner {
        padding-inline: 40px;

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

        .qa_list {
          counter-reset: number 0;
          .item {
            background-color: #fff;
            padding-inline: 40px;
            padding-block: 29px 33px;

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

            @media (width <= 768px) {
              display: block flow;
            }

            .question {
              position: relative;
              display: block flex;
              align-items: baseline;
              gap: 16px;
              font-family: var(--serif);
              font-size: 20px;
              font-weight: 500;
              line-height: 1.8;
              color: var(--primary);

              @media (width <= 768px) {
                font-size: calc((100 / 390) * 18 * 1vw);
                padding-bottom: calc((100 / 390) * 8 * 1vw);
                gap: calc((100 / 390) * 8 * 1vw);
              }

              &::before {
                counter-increment: number;
                content: 'Q.' counter(number);
                font-family: var(--serif);
                font-size: 20px;
                font-weight: 500;
                color: var(--primary);
                flex-shrink: 0;
              }

              @media (width <= 768px) {
                &::before {
                  font-size: calc((100 / 390) * 18 * 1vw);
                }
              }
            }
            .answer {
              margin-block-start: 14px;

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

            & + .item {
              margin-block-start: 56px;

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

    .interview_list {
      position: relative;
      padding-block-start: 112px;
      padding-block-end: 112px;

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

      .u-inner {
        padding-inline: 80px;

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

        .interview-list {
          gap: 80px;

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

  .main[data-id='yk'] {
    .mv {
      background-image: url('../img/recruit/interview/yk_bg.png');
    }
  }

  .main[data-id='rn'] {
    .mv {
      background-image: url('../img/recruit/interview/rn_bg.png');
    }
  }

  .main[data-id='ao'] {
    .mv {
      background-image: url('../img/recruit/interview/ao_bg.png');
    }
  }
}