@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 flex;
    align-items: end;
    inline-size: 100%;
    block-size: 100%;
    gap: 32px;

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

    .img {
      flex-shrink: 0;

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

    .info {
      min-inline-size: 200px;
      padding-block-end: 6px;

      @media (width <= 768px) {
        min-inline-size: unset;
        inline-size: 100%;
        padding-block-end: 0;
      }

      .name {
        font-family: var(--number);
        font-size: 56px;
        line-height: 1;
        color: #003f97;
        border-bottom: solid 1px #007ac6;
        padding-block-end: 16px;

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

      .position {
        margin-block-start: 13px;

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

      .u-arrow {
        margin-block-start: 32px;

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

    @media (any-hover: hover) {
      &:hover {
        .u-arrow {
          background-color: var(--secondary);
        }
      }
    }
  }
}

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

      @media (width <= 768px) {
        background-image: url('../img/top/recruit_bg_2x.png');
        padding-block-start: calc((100 / 390) * 46 * 1vw);
        padding-block-end: calc((100 / 390) * 64 * 1vw);
      }

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

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

        .wrap {
          position: relative;

          &::after {
            content: '';
            display: block flow;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            background-image: url('../img/recruit/message.png');
            inline-size: 660px;
            block-size: 648px;
            position: absolute;
            top: -26px;
            right: 0;
            pointer-events: none;
          }

          @media (width <= 768px) {
            &::after {
              inline-size: calc((100 / 390) * 358 * 1vw);
              block-size: unset;
              aspect-ratio: 330/324;
              position: relative;
              top: unset;
              left: 0;
              margin-block-start: calc((100 / 390) * 32 * 1vw);
            }
          }

          .u-content-catch {
            margin-block-start: 45px;
            font-weight: 500;
            color: var(--black);
            line-height: 1.8;

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

          .description {
            margin-block-start: 33px;

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

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

              @media (width <= 768px) {
                margin-block-start: 1em;
              }
            }
          }
        }
      }
    }
    /* =====================
      requirements
    ===================== */
    .requirements {
      position: relative;
      padding-block-start: 121px;
      padding-block-end: 119px;

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

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

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

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

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

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

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

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

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

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

        .number_wrap {
          display: block grid;
          grid-template-columns: repeat(4, 278px);
          gap: 32px;
          margin-block-start: 40px;

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

          .item {
            border-radius: 14px;
            border: solid 4px #007ac6;
            background-color: #f6f9fa;
            padding-block: 32px;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            background-image: url('../img/recruit/number_01.png');
            min-block-size: 358px;
            display: block grid;
            grid-template-rows: repeat(2, max-content);
            row-gap: 12px;

            @media (width <= 768px) {
              border-radius: calc((100 / 390) * 14 * 1vw);
              border: solid calc((100 / 390) * 4 * 1vw) #007ac6;
              min-block-size: unset;
              padding-block: calc((100 / 390) * 24 * 1vw) calc((100 / 390) * 92 * 1vw);
              row-gap: calc((100 / 390) * 0 * 1vw);
            }

            .no-title {
              & p[lang='en'] {
                font-size: 13px;
                font-weight: 500;
                line-height: 1.2;
                color: #007ac6;
                text-align: center;

                @media (width <= 768px) {
                  font-size: calc((100 / 390) * 13 * 1vw);
                }
              }
              & h4 {
                font-size: 18px;
                font-weight: 500;
                line-height: 1.2;
                text-align: center;
                color: #003f97;
                margin-block-start: 8px;

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

            .num {
              text-align: center;

              .count {
                font-family: var(--number);
                font-size: 96px;
                line-height: 1.2;
                letter-spacing: 2.88px;
                text-align: center;
                color: #007ac6;

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

              .tani {
                font-size: 32px;
                font-weight: bold;
                line-height: 1.2;
                text-align: center;
                color: #007ac6;

                @media (width <= 768px) {
                  font-size: calc((100 / 390) * 24 * 1vw);
                }
              }
            }
            .num_wrap {
              display: block flex;
              align-items: center;
              justify-content: center;
              gap: 20px;

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

              .tani {
                font-family: var(--number);
                font-size: 96px;
                line-height: 1.2;
                letter-spacing: 2.88px;
                text-align: center;
                color: #007ac6;

                @media (width <= 768px) {
                  font-size: calc((100 / 390) * 64 * 1vw);
                  letter-spacing: calc((100 / 390) * 2.88 * 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');
            }
          }
        }
      }
    }

    /* =====================
      interview
    ===================== */
    .interview {
      position: relative;
      padding-block-start: 106px;
      padding-block-end: 114px;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      background-image: url('../img/recruit/interview_bg.png');
      inline-size: 100%;
      min-block-size: 781px;

      @media (width <= 768px) {
        padding-block-start: calc((100 / 390) * 46 * 1vw);
        padding-block-end: calc((100 / 390) * 80 * 1vw);
      }
      .u-inner {
        padding-inline: 135px;

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

        .title_wrap {
          display: block flex;
          justify-content: space-between;
          align-items: center;
          gap: 104px;

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

          .u-h2-title {
            flex-shrink: 0;
          }
        }

        .interview-list {
          margin-block-start: 46px;

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

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

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

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

        .anchor {
          position: relative;
          overflow: hidden;
          display: block flex;
          align-items: center;
          justify-content: space-between;
          padding-inline: 80px;
          padding-block: 53px;
          background: linear-gradient(90deg, #003f97 0%, #499cd0 100%);
          border-radius: 10px;

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

          &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, #ffae61 23%, #feefdd 100%);
            transform: translateX(-100%);
            transition: transform 0.2s ease-in-out;
          }

          @media (any-hover: hover) {
            &:hover::before {
              transform: translateX(0);
            }
          }

          .u-h2-title {
            z-index: 2;
            & span[lang='en'] {
              font-size: 64px;

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

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

          .u-arrow {
            flex-shrink: 0;
            inline-size: 82px;
            background-color: #fff;

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

            &::after {
              inline-size: 28px;
              aspect-ratio: 1/1;
              background-color: var(--primary);
              flex-shrink: 0;
            }
            @media (width <= 768px) {
              &::after {
                inline-size: calc((100 / 390) * 16 * 1vw);
              }
            }
          }

          @media (any-hover: hover) {
            &:hover {
              .u-h2-title {
                & span[lang='en'] {
                  background-image: linear-gradient(180deg, rgba(0, 122, 198, 0.4) 0%, rgba(191, 227, 249, 0.2) 100%);
                }
                .title {
                  color: var(--primary);
                  &::before {
                    background-color: var(--secondary);
                  }
                }
              }
              .u-arrow {
                background-color: var(--secondary);
                &::after {
                  background-color: #fff;
                }
              }
            }
          }
        }
      }
    }
  }
}

/* =====================
  Interview
===================== */
body[data-id='interview'] {
  .main {
    .interview {
      position: relative;
      padding-block-start: 109px;
      padding-block-end: 120px;

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

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

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

        .u-content-catch {
          padding-inline: 80px;
          font-size: 36px;
          font-weight: 500;
          line-height: 1.8;
          margin-block-start: 47px;

          @media (width <= 768px) {
            padding-inline: 0;
            font-size: calc((100 / 390) * 20 * 1vw);
            margin-block-start: calc((100 / 390) * 32 * 1vw);
          }
        }
        .qa_wrap {
          position: relative;
          margin-block-start: 49px;

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

          .info_wrap {
            display: block flex;
            align-items: center;
            gap: 88px;
            padding-inline: 80px;
            background: linear-gradient(90deg, #003f97 16.13%, #aef3ff 74.57%);
            border-radius: 10px 10px 0px 0px;

            @media (width <= 768px) {
              flex-direction: column;
              align-items: start;
              padding-inline: calc((100 / 390) * 16 * 1vw) calc((100 / 390) * 158 * 1vw);
              padding-block: calc((100 / 390) * 32 * 1vw);
              row-gap: calc((100 / 390) * 12 * 1vw);
              border-radius: calc((100 / 390) * 10 * 1vw) calc((100 / 390) * 10 * 1vw) 0 0;
            }

            .name {
              font-family: var(--number);
              font-size: 72px;
              color: #fff;

              @media (width <= 768px) {
                font-size: calc((100 / 390) * 40 * 1vw);
                line-height: 1.2;
              }
            }
            .info_unit {
              position: relative;
              font-size: 20px;
              font-weight: 500;
              color: #fff;
              padding-inline-start: 24px;

              @media (width <= 768px) {
                font-size: calc((100 / 390) * 14 * 1vw);
                padding-inline-start: 0;
              }

              &::before {
                content: '';
                position: absolute;
                top: 50%;
                left: 0;
                transform: translateY(-50%);
                inline-size: 2px;
                block-size: 46px;
                background-color: #fff;
              }
              @media (width <= 768px) {
                &::before {
                  inline-size: 100%;
                  block-size: 1px;
                  top: calc((100 / 390) * -8 * 1vw);
                  left: 0;
                  transform: unset;
                }
              }
            }
          }

          .img {
            position: absolute;
            top: -148px;
            right: 110px;

            @media (width <= 768px) {
              top: calc((100 / 390) * -48 * 1vw);
              right: calc((100 / 390) * 8 * 1vw);
              inline-size: calc((100 / 390) * 140 * 1vw);
            }
          }
          .qa_list {
            background-color: #fff;
            border-radius: 0px 0px 10px 10px;
            padding-inline: 80px;
            padding-block: 96px;
            display: block grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: auto auto auto auto auto auto auto;
            gap: 57px 40px;

            @media (width <= 768px) {
              border-radius: 0 0 calc((100 / 390) * 10 * 1vw) calc((100 / 390) * 10 * 1vw);
              padding-inline: calc((100 / 390) * 16 * 1vw);
              padding-block: calc((100 / 390) * 32 * 1vw);
              grid-template-columns: 1fr;
              gap: calc((100 / 390) * 32 * 1vw);
            }

            .item {
              display: grid;
              grid-template-rows: subgrid;
              grid-row: span 2;
              gap: 0;

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

              .question {
                display: block grid;
                align-items: end;
                font-size: 20px;
                font-weight: 500;
                line-height: 1.5;
                color: #003f97;
                border-bottom: solid 2px rgba(0, 122, 198, 0.2);
                padding-bottom: 14px;

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

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

              &[data-id='1'] {
                inline-size: 540px;
                grid-area: 1/1/2/3;
                grid-row: span 2;

                @media (width <= 768px) {
                  inline-size: unset;
                  grid-area: unset;
                  grid-row: unset;
                }
              }
            }
          }
        }
      }
    }

    .interview_list {
      position: relative;
      padding-block-start: 106px;
      padding-block-end: 114px;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      background-image: url('../img/recruit/interview_bg.png');

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

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

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

        .interview-list {
          margin-block-start: 47px;

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