.interview {
  .cont {
    .box {
      max-width: 70%;
      display: flex;
      flex-direction: column;
      gap: 32px;

      @media screen and (max-width: 991px) {
        max-width: 80%;
      }

      @media screen and (max-width: 560px) {
        max-width: 100%;
      }
    }
  }

  .re-fv {
    .cont {
      .box {
        width: 100%;
        max-width: 1820px !important;
        margin: 0 auto;
        display: flex;
        align-items: stretch;
        position: relative;
        flex-direction: unset;
      }
    }
  }

  .item {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;

    @media screen and (max-width: 991px) {
      grid-template-columns: repeat(2, 1fr);
    }

    @media screen and (max-width: 560px) {
      grid-template-columns: 1fr;
    }
  }

  .interview-card {
    position: relative;
    display: flex;
    justify-content: center;

    .img {
      position: relative;
      border-radius: 10px;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 16px;
      aspect-ratio: 3 / 4;
      width: 100%;

      @media screen and (max-width: 1580px) {
      }

      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, #0479ff 0%, #0009ff00 40%);
        z-index: 0;
        border-radius: 10px;
      }

      &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #ff9900;
        z-index: -1;
        transform: rotate(3deg);
        border-radius: 10px;
      }

      .num {
        position: absolute;
        top: 13px;
        left: 0;
        background: #ff9900;
        color: #fff;
        font-weight: 700;
        font-size: 14px;
        padding: 3px 14px;
        border-radius: 0 30px 30px 0;
        z-index: 1;
      }

      .badge {
        position: absolute;
        top: 12px;
        right: 12px;
        background: #007a3d;
        color: #fff;
        font-weight: 700;
        font-size: 14px;
        padding: 4px 10px;
        border-radius: 4px;
        z-index: 1;

        &.new {
          background: #00a552;
        }
        &.old {
          background: #ff9900;
        }
      }

      .catch {
        position: relative;
        z-index: 1;
        color: #fff;
        font-weight: 700;
        font-size: clamp(1.125rem, 0.9706rem + 0.4412vw, 1.5rem);
        line-height: 1.4;
        text-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
      }
    }

    .info {
      display: flex;
      align-items: center;
      gap: 12px;
      background: #fff;
      border-radius: 10px;
      padding: 8px 20px;
      position: relative;
      z-index: 2;
      margin-top: 8px;
      justify-content: space-between;

      @media screen and (max-width: 1580px) {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
      }

      .name {
        color: #007bff;
        font-weight: 900;
        font-size: clamp(1.125rem, 0.9706rem + 0.4412vw, 1.5rem);

        small {
          color: #333;
          font-weight: 500;
          font-size: 14px;
          margin-left: 2px;
        }
      }

      .detail {
        font-size: 13px;
        color: #333;
        font-weight: 600;
      }
    }
  }
}

.interview-single {
  position: relative;

  .fv-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 45%;

    @media screen and (max-width: 560px) {
      max-width: 100%;
    }
  }

  .single-fv {
    position: relative;

    .cont {
      padding: 200px 8% 80px;

      @media screen and (max-width: 1280px) {
        padding: 110px 8% 40px;
      }

      @media screen and (max-width: 991px) {
        padding: 110px 3% 20px;
      }

      @media screen and (max-width: 560px) {
        padding: 100px 16px 0px;
      }

      .box {
        max-width: 1560px;

        .up-cont {
          display: flex;
          align-items: center;
          justify-content: space-between;

          @media screen and (max-width: 560px) {
            flex-direction: column-reverse;
          }
        }

        .left {
          flex: 1;

          @media screen and (max-width: 1280px) {
            flex: 0.5;
          }

          @media screen and (max-width: 560px) {
            width: 100%;
          }

          .fv-ttl {
            @media screen and (max-width: 560px) {
              display: none;
            }
            .en {
              font-size: clamp(1.5rem, 0.4706rem + 2.9412vw, 4rem);
              font-weight: 900;
              font-family: Arial, Helvetica, sans-serif;
              line-height: 1;
            }
            .number {
              font-size: clamp(2.5rem, 1.0588rem + 4.1176vw, 6rem);
              font-weight: 900;
              font-family: Arial, Helvetica, sans-serif;
              line-height: 1;
            }
          }

          .under {
            padding-left: 10%;
            display: flex;
            flex-direction: column;
            gap: 80px;

            @media screen and (max-width: 560px) {
              gap: 16px;
              padding-left: 0%;
            }

            .catch {
              font-size: clamp(1.25rem, 0.8382rem + 1.1765vw, 2.25rem);
              font-weight: 900;
              line-height: 1.2;
              margin-top: 16px;
            }

            .info {
              .name {
                font-size: clamp(1.5rem, 1.3456rem + 0.4412vw, 1.875rem);
                font-weight: 600;
                display: flex;
                align-items: center;

                & span {
                  font-size: clamp(1.25rem, 1.1471rem + 0.2941vw, 1.5rem);
                }

                .cate-01 {
                  background-color: #ff9900;
                  padding: 8px 10px 8px 8px;
                  border-radius: 3px;
                  color: #fff;
                  font-size: 16px;
                  margin-left: 8px;
                  line-height: 1;
                }

                .cate-02 {
                  background-color: #51c541;
                  padding: 8px 10px 8px 8px;
                  border-radius: 3px;
                  color: #fff;
                  font-size: 16px;
                  margin-left: 8px;
                  line-height: 1;
                }
              }

              .career {
                font-weight: 500;
              }
            }
          }
        }

        .right {
          flex: 1.3;

          @media screen and (max-width: 1280px) {
            flex: 0.8;
            padding-right: 5rem;
          }

          @media screen and (max-width: 991px) {
            padding-right: 0rem;
          }

          .fv-ttl.none {
            display: none;

            @media screen and (max-width: 560px) {
              display: block;
              margin-bottom: 16px;
            }

            .en {
              font-size: clamp(1.5rem, 0.4706rem + 2.9412vw, 4rem);
              font-weight: 900;
              font-family: Arial, Helvetica, sans-serif;
              line-height: 1;
            }
            .number {
              font-size: clamp(2.5rem, 1.0588rem + 4.1176vw, 6rem);
              font-weight: 900;
              font-family: Arial, Helvetica, sans-serif;
              line-height: 1;
            }
          }

          .img {
            position: relative;

            &::before {
              content: "";
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%) rotate(3deg);
              width: 100%;
              height: 100%;
              background-color: #0479ff;
              border-radius: 10px;
              z-index: -1;
            }

            & img {
              border-radius: 10px;
            }
          }
        }
      }
    }

    .cont-02 {
      padding: 80px 40px;

      @media screen and (max-width: 991px) {
        padding: 40px;
      }

      @media screen and (max-width: 560px) {
        padding: 40px 16px;
      }

      .box-02 {
        max-width: 70%;
        display: flex;
        flex-direction: column;
        gap: 64px;
        margin: 0 auto;

        @media screen and (max-width: 1280px) {
          max-width: 90%;
        }

        @media screen and (max-width: 991px) {
          max-width: 100%;
        }

        .item {
          overflow: hidden;

          .img-cont {
            display: flex;
            gap: 40px;
            padding-right: 12px;

            @media screen and (max-width: 560px) {
              flex-direction: column;
              gap: 16px;
            }

            .left {
              flex: 2;
            }

            .right {
              flex: 1;
            }
          }

          .qa-block {
            position: relative;
            padding-bottom: 32px;
            margin-bottom: 32px;

            @media screen and (max-width: 991px) {
              margin-bottom: 0px;
            }

            &:last-child {
              border-bottom: none;
            }

            .q,
            .a {
              display: flex;
              align-items: center;
              gap: 8px;
              font-size: clamp(1.125rem, 1.0221rem + 0.2941vw, 1.375rem);

              @media screen and (max-width: 560px) {
                font-size: 16px;
              }
            }

            .q {
              font-weight: 600;
              padding-bottom: 4px;
              border-bottom: 1px solid #ccc;
            }

            .a-ttl {
              color: #f2941d;
              font-weight: 700;
            }

            .icon {
              flex-shrink: 0;
              display: flex;
              align-items: center;
              justify-content: center;
              font-weight: 700;
            }

            .icon-q {
              color: #0479ff;
              font-size: clamp(1.5rem, 1.3456rem + 0.4412vw, 1.875rem);
              padding-left: 1rem;

              @media screen and (max-width: 560px) {
                padding-left: 0%;
              }
            }

            .icon-a {
              color: #f2941d;
              font-size: clamp(1.5rem, 1.3456rem + 0.4412vw, 1.875rem);
              padding-left: 1rem;

              @media screen and (max-width: 560px) {
                padding-left: 0%;
              }
            }

            .txt {
              padding-left: 54px;

              @media screen and (max-width: 560px) {
                padding-left: 0%;
              }
            }

            &.has-img {
              display: flex;
              align-items: center;
              gap: 40px;

              .qa-txt {
                flex: 1;
              }

              .flex {
                gap: 32px;
                margin-top: 16px;
                width: 100%;
                max-width: 95%;
                margin: 24px auto 0;

                @media screen and (max-width: 560px) {
                  flex-direction: column;
                  gap: 16px;
                }

                .a-cont {
                  position: relative;
                  flex: 1;
                }

                .qa-img {
                  position: relative;
                  flex: 1.1;

                  &::before {
                    content: "";
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%) rotate(3deg);
                    width: 100%;
                    height: 100%;
                    background-color: #ff9900;
                    border-radius: 10px;
                    z-index: -1;
                    border-radius: 2px 100px;

                    @media screen and (max-width: 560px) {
                      border-radius: 2px 50px;
                    }
                  }
                }
              }

              .qa-img img {
                width: 100%;
                border-radius: 2px 120px;

                @media screen and (max-width: 560px) {
                  border-radius: 2px 50px;
                }
              }

              .qa-img .note {
                position: absolute;
                right: 8px;
                bottom: 8px;
                background: rgba(0, 0, 0, 0.6);
                color: #fff;
                font-size: 12px;
                padding: 2px 8px;
                border-radius: 3px;
              }
            }

            @media (max-width: 768px) {
              &.has-img {
                flex-direction: column;
                align-items: stretch;

                &.reverse {
                  flex-direction: column;
                }

                .qa-img {
                  flex: none;
                }
              }
            }
          }
        }
      }
    }
  }

  .qa-img-slider {
    overflow: visible;

    .slick-list {
      overflow: visible;
    }

    .slick-dots {
      bottom: 12px;

      li button:before {
        color: #fff;
        opacity: 0.6;
      }

      li.slick-active button:before {
        opacity: 1;
      }
    }
  }

  .qa-img-slide {
    position: relative;

    &::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(3deg);
      width: 100%;
      height: 100%;
      background-color: #ff9900;
      border-radius: 10px;
      z-index: -1;
      border-radius: 2px 100px;
    }

    & img {
      width: 100%;
      border-radius: 2px 130px;
    }
  }

  .other-interview {
    background: #eee;

    .cont {
      padding: 80px 32px;

      @media screen and (max-width: 991px) {
        padding: 40px;
      }

      @media screen and (max-width: 560px) {
        padding: 40px 16px;
      }
    }

    .box {
      width: 100%;
      max-width: 1560px !important;

      @media screen and (max-width: 991px) {
        max-width: 100% !important;
      }
    }

    .other-interview__ttl {
      margin-bottom: 32px;

      .en {
        display: block;
        font-size: clamp(1.5rem, 0.4706rem + 2.9412vw, 4rem);
        font-weight: 900;
        font-family: Arial, Helvetica, sans-serif;
        color: #ff9900;
        line-height: 1;
      }

      .jp {
        font-weight: 700;
        margin-top: 8px;
        font-size: clamp(1.25rem, 1.1471rem + 0.2941vw, 1.5rem);
      }
    }

    .other-interview__list {
      margin: 0 -12px;

      .slick-list {
        overflow: hidden;
      }

      .slick-track {
        display: flex;
      }

      .slick-arrow {
        position: absolute;
        top: 40%;
        transform: translateY(-50%);
        z-index: 2;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        font-size: 0;
        cursor: pointer;

        &::before {
          content: "";
          position: absolute;
          top: 50%;
          left: 50%;
          width: 8px;
          height: 8px;
          border-top: 2px solid #0479ff;
          border-right: 2px solid #0479ff;
        }

        &.slick-prev {
          left: -20px;

          @media screen and (max-width: 560px) {
            left: 20px;
          }

          &::before {
            transform: translate(-30%, -50%) rotate(-135deg);
          }
        }

        &.slick-next {
          right: -20px;

          @media screen and (max-width: 560px) {
            right: 20px;
          }

          &::before {
            transform: translate(-70%, -50%) rotate(45deg);
          }
        }

        &.slick-disabled {
          opacity: 0.3;
          pointer-events: none;
        }
      }
    }

    .other-interview__slide {
      padding: 0 12px;
    }

    .other-interview__card {
      display: block;
      border-radius: 6px;
      overflow: hidden;
      background: #fff;

      .img {
        position: relative;
        aspect-ratio: 9 / 5;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;

        .num {
          position: absolute;
          top: 8px;
          left: 8px;
          background: #ff9900;
          color: #fff;
          font-weight: 700;
          font-size: 12px;
          padding: 3px 10px;
          border-radius: 3px;
        }
      }

      .info {
        background: #0479ff;
        color: #fff;
        padding: 12px 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .catch {
          font-weight: 700;
          line-height: 1.4;
        }

        .bottom {
          display: flex;
          justify-content: space-between;
          flex-direction: column;
          align-items: flex-end;
        }

        .name {
          font-weight: 900;
          font-size: 1.3rem;
          line-height: 1;

          & small {
            font-weight: 500;
            font-size: 12px;
            margin-left: 2px;
          }
        }

        .detail {
          font-size: 14px;
          font-weight: 600;

          @media screen and (max-width: 991px) {
            font-size: 12px;
          }
        }
      }
    }
  }
}

.other-content {
  .cont {
    @media screen and (max-width: 1280px) {
      padding: 40px;
    }
    @media screen and (max-width: 560px) {
      padding: 16px;
    }
  }
}