#hero-area {
  div {
    top: 17.6rem;
  }
}

#intro {
  margin: 0;
  padding: 6.4rem 2rem;
  position: relative;
  width: 36rem;
  @media (width >= 961px) {
    padding: 0;
    width: 100%;
  }
  &::before {
    background: #F9F9F9;
    content: "";
    display: block;
    height: calc(100% - 34.4rem);
    left: 0;
    position: absolute;
    top: 34.4rem;
    width: 100%;
    z-index: -1;
    @media (width >= 961px) {
      height: calc(100% - 55.9rem);
      top: 55.9rem;
    }
  }
  >div {
    @media (width >= 961px) {
      margin: 0 auto;
      padding: 9rem 2rem 10rem;
      width: 96rem;
    }
    >time {
      font-size: 1.4rem;
      font-weight: 400;
      line-height: 1.8;
      margin: 0 0 .8rem;
    }
    >h2 {
      font-size: 2.4rem;
      line-height: 1.6;
      margin: 0 0 .4rem;
      @media (width >= 961px) {
        font-size: 3.2rem;
        margin: 0 0 .8rem;
      }
    }
    >p {
      font-size: 1.6rem;
      line-height: 1.8;
      margin: 0 0 2.4rem;
      @media (width >= 961px) {
        font-size: 1.8rem;
        margin: 0 0 4rem;
      }
    }
    >figure {
      margin: 0 0 4rem;
      @media (width >= 961px) {
        margin: 0 0 6.4rem;
      }
      img {
        aspect-ratio: 32 / 21;
        border-radius: .8rem;
        margin: 0 0 1rem;
        object-fit: cover;
        width: 100%;
      }
      figcaption {
        font-size: 1.4rem;
        font-weight: 400;
        line-height: 1.8;
        @media (width >= 961px) {
          font-size: 1.6rem;
        }
        span {
          margin: 0 .8rem;
        }
      }
      &:last-of-type {
        margin: 0 0 2.4rem;
        @media (width >= 961px) {
          float: right;
          margin: 0 0 0 5.6rem;
          width: 28rem;
          img {
            aspect-ratio: 28 / 42;
          }
        }
      }
    }
  }
}

.interviewer {
  font-size: 1.7rem;
  line-height: 1.8;
  margin: 0 0 2rem;
  @media (width >= 961px) {
    font-size: 1.8rem;
  }
}

.interviewee {
  display: flex;
  flex-direction: column;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.8;
  margin: 0 0 1.6rem;
  @media (width >= 961px) {
    margin: 0 0 1.8rem;
  }
  p {
    margin: 0;
    &.name {
      font-weight: 500;
      span {
        margin: 0 .6rem 0 .3rem;
      }
    }
  }
  &.last0 {
    margin: 0;
  }
  &.last32 {
    margin: 0 0 3.2rem;
    @media (width >= 961px) {
      margin: 0 0 5.6rem;
    }
  }
}

main h3 {
  border-left: solid .4rem #E6E61F;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 4rem;
  margin: 0 0 3.2rem;
  padding: 0 0 0 1.8rem;
  @media (width >= 961px) {
    font-size: 2.8rem;
    line-height: 5rem;
  }
}

#box1 {
  margin: 0 auto;
  padding: 6.4rem 2rem 0;
  width: 36rem;
  @media (width >= 961px) {
    clear: both;
    padding: 10rem 2rem 0;
    width: 96rem;
  }
}
#box2 {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  margin: 0 auto;
  padding: 6.4rem 2rem 0;
  width: 36rem;
  @media (width >= 961px) {
    flex-direction: row;
    gap: 5.6rem;
    padding: 10rem 2rem 0;
    width: 96rem;
    >div {
      width: 58.4rem;
    }
  }
  >figure {
    margin: 0;
    @media (width >= 961px) {
      width: 28rem;
    }
    img {
      aspect-ratio: 32 / 21;
      border-radius: .8rem;
      object-fit: cover;
      width: 100%;
      @media (width >= 961px) {
        aspect-ratio: 28 / 42;
      }
    }
  }
}
#box3 {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  margin: 0 auto;
  padding: 6.4rem 2rem 8rem;
  width: 36rem;
  @media (width >= 961px) {
    flex-direction: row;
    gap: 5rem;
    padding: 10rem 2rem;
    width: 96rem;
    >div {
      order: 1;
      width: 50rem;
    }
  }
  >figure {
    margin: 0;
    @media (width >= 961px) {
      order: 2;
      width: 37rem;
    }
    img {
      aspect-ratio: 32 / 21;
      border-radius: .8rem;
      object-fit: cover;
      width: 100%;
      @media (width >= 961px) {
        aspect-ratio: 37 / 24.7;
      }
    }
  }
}
#after {
  background: #F9F9F9;
  margin: 0 auto 6.4rem;
  padding: 2.4rem 2rem 3.2rem;
  width: 32rem;
  @media (width >= 961px) {
    margin: 0 auto 10rem;
    padding: 3.2rem;
    width: 92rem;
  }

  h3 {
    border: 0;
    font-size: 2.2rem;
    line-height: 1.8;
    margin: 0 0 1rem;
    padding: 0 0 0 3rem;
    position: relative;
    @media (width >= 961px) {
      font-size: 2.4rem;
    }
    &::before {
      background: #E6E61F;
      border-radius: 50%;
      content: "";
      display: block;
      height: 1.4rem;
      left: 0;
      margin: 0;
      padding: 0;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 1.4rem;
    }
  }

  p {
    font-size: 1.6rem;
    line-height: 1.8;
    margin: 0;
    @media (width >= 961px) {
      font-size: 1.8rem;
    }
  }
}

figure.last {
  margin: 0 auto 6.4rem;
  width: 32rem;
  @media (width >= 961px) {
    margin: 0 auto 11rem;
    width: 92rem;
  }
  img {
    aspect-ratio: 32 / 21;
    border-radius: .8rem;
    object-fit: cover;
    width: 100%;
  }
}
#other {
  background: #F9F9F9;
  margin: 0;;
  padding: 7.2rem 2rem 8rem;
  @media (width >= 961px) {
    padding: 9rem 2rem 10rem;
  }
  >div {
    @media (width >= 961px) {
      margin: 0 auto;
      width: 92rem;
    }
    >p {
      color: #E6E61F;
      font-family: "Roboto", sans-serif;
      font-size: 1.4rem;
      line-height: 1;
      margin: 0 0 1.4rem;
      @media (width >= 961px) {
        font-size: 1.6rem;
        margin: 0 0 1.6rem;
      }
    }
    >h3 {
      font-size: 2.9rem;
      line-height: 1.6;
      margin: 0 0 2.4rem;
      @media (width >= 961px) {
        font-size: 4rem;
        line-height: 1;
        margin: 0 0 3.2rem;
      }
    }
    >div {
      display: flex;
      flex-direction: column;
      gap: 2.3rem;
      @media (width >= 961px) {
        flex-direction: row;
        gap: 3.2rem;
      }
      >a {
        background: #1A1A1A;
        border-radius: .8rem;
        display: block;
        height: 14.7rem;
        margin: 0;
        overflow: hidden;
        position: relative;
        transition: .5s;
        width: 100%;
        @media (width >= 961px) {
          height: 20.4rem;
          width: 44.4rem;
        }
        &::before {
          border-radius: 50%;
          color: #E6E61F;
          content: "Interview";
          display: block;
          font-family: "Roboto", sans-serif;
          font-size: 1rem;
          font-weight: 700;
          left: 1.2rem;
          line-height: 1;
          position: absolute;
          top: 1.2rem;
          z-index: 10;
          @media (width >= 961px) {
            font-size: 1.4rem;
            left: 1.6rem;
            top: 1.6rem;
            width: 1rem;
          }
        }
        &::after {
          background: #E6E61F;
          border-radius: 50%;
          bottom: 1.2rem;
          content: "";
          display: block;
          height: .7rem;
          position: absolute;
          right: 1.2rem;
          width: .7rem;
          z-index: 10;
          @media (width >= 961px) {
            bottom: 1.6rem;
            height: 1rem;
            right: 1.6rem;
            width: 1rem;
          }
        }
        img {
          height: 100%;
          object-fit: cover;
          opacity: .6;
          vertical-align: bottom;
          width: 100%;
        }
        h4 {
          bottom: 3.4rem;
          color: #fff;
          font-size: 1.4rem;
          left: 1.2rem;
          line-height: 1.6;
          margin: 0;
          padding: 0;
          position: absolute;
          @media (width >= 961px) {
            bottom: 4.6rem;
            font-size: 1.6rem;
            left: 1.6rem;
          }
        }
        p {
          bottom: 1.2rem;
          color: #fff;
          font-size: 1.2rem;
          left: 1.2rem;
          line-height: 1.6;
          margin: 0;
          padding: 0;
          position: absolute;
          @media (width >= 961px) {
            bottom: 1.6rem;
            font-size: 1.4rem;
            left: 1.6rem;
          }
        }
        &:hover {
          img {
            opacity: .4;
          }
        }
      }
    }
  }
}