.interview-top-banner {
  padding-block: 40px;
  @media screen and (min-width: 768px) {
    padding-block: 80px;
  }

  .interview-top-banner__inner {
    position: relative;
    width: min(100%, 1080px);
    margin-inline: auto;
    @media screen and (min-width: 768px) {
      padding-inline: 20px;
    }
  }

  .interview-top-banner__overlay {
    margin-bottom: 24px;
    span {
      display: block;
      font-weight: 700;
      margin-block: 0.5em;

      &:nth-child(1) {
        font-size: 32px;
        font-family: var(--font-en);
      }

      &:nth-child(2) {
        font-size: 14px;
      }
    }

    @media screen and (min-width: 768px) {
      position: absolute;
      left: 0;
      top: 0;
    }
  }

  .interview-top-banner__wrapper {
    display: flex;
    flex-flow: column;
    gap: 40px;

    @media screen and (min-width: 768px) {
      flex-flow: row-reverse;
    }
  }

  .interview-top-banner__content {
    flex: 1 1 0%;

    h1 {
      font-feature-settings: 'palt';
      font-size: 24px;
      line-height: 1.7;
      margin-bottom: 20px;
    }

    ul {
      font-weight: 700;

      li {
        &:not(:last-child) {
          margin-bottom: 8px;
        }
      }

      .position {
        font-size: 14px;
        line-height: 1.7;
        margin-bottom: 4px;
      }

      .initial-join {
        display: flex;
        align-items: center;
        gap: 16px;
      }

      .initial {
        font-size: 24px;
        font-family: var(--font-en);
      }

      .join {
        font-size: 12px;
        border: 1px solid;
        padding: 2px 4px;
      }
    }

    @media screen and (min-width: 768px) {
      flex: 1 1 0%;
      padding-left: 40px;
      padding-top: 180px;
    }

    @media screen and (min-width: 1024px) {
      padding-left: 60px;
    }
  }

  .interview-top-banner__img {
    flex: 1 1 0%;

    @media screen and (min-width: 768px) {
      max-width: 550px;
    }

    @media screen and (min-width: 1024px) {
      flex: auto;
    }
  }
}

.interview-wrapper {
  width: min(100%, 750px);
  margin-inline: auto;
  padding-bottom: 80px;

  > *:not(:last-child) {
    margin-bottom: 40px;
    @media screen and (min-width: 768px) {
      margin-bottom: 80px;
    }
  }

  @media screen and (min-width: 768px) {
    padding-bottom: 160px;
  }
}

/* Blocks */

/* Block Image */
.block-image {
  img {
    display: block;
    width: 100%;
  }
}

/* Block QA */
.block-qa {
  .block-qa__question {
    font-weight: 700;
    font-size: 16px;
    line-height: 2;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;

    @media screen and (min-width: 768px) {
      font-size: 18px;
    }

    &::before {
      flex: none;
      content: '';
      display: block;
      width: 44px;
      height: 44px;
      background: transparent
        url('../img/co-creation/human-resource/icon-q..webp') no-repeat center
        center / contain;
    }

    span {
      display: inline-block;
      border-bottom: 1px solid;
      padding-block: 4px;
    }
  }

  .block-qa__answer {
    font-weight: 700;
    font-size: 20px;
    line-height: 2;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;

    @media screen and (min-width: 768px) {
      font-size: 24px;
    }

    &::before {
      flex: none;
      content: '';
      display: block;
      width: 44px;
      height: 44px;
      background: transparent
        url('../img/co-creation/human-resource/icon-a..webp') no-repeat center
        center / contain;
    }
  }
}

.block-qa__interviews {
  > *:not(:last-child) {
    margin-bottom: 20px;
  }
}

.block-qa__interview-item {
  display: flex;
  align-items: baseline;
  gap: 16px;

  .interview-initial {
    flex: none;
    display: flex;
    gap: 4px;
    font-weight: 700;
    &::after {
      content: ')';
    }
  }

  .interview-content {
    font-weight: 500;
    line-height: 2;
  }
}

/* Block Text Content */
.block-text-content {
  .block-text-content__header {
    font-weight: 700;
    font-size: 20px;
    line-height: 1.625;
    margin-bottom: 24px;

    @media screen and (min-width: 768px) {
      font-size: 24px;
    }
  }

  .block-text-content__content {
    font-weight: 500;
    font-size: 16px;
    line-height: 2;
  }
}

/* Interview Links */
.interview-links {
  text-align: center;

  > * {
    margin-block: 24px;
  }

  .button {
    width: min(100%, 440px);
    min-height: 96px;
    font-weight: 700;
    font-size: 16px;
    padding: 20px;
    gap: 16px;
    flex-flow: row wrap;

    .button__label {
      padding: 0;
    }

    .button__icon {
      width: 20px;
      height: 20px;
    }

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

    .button__logo--swap {
      position: relative;
      display: inline-grid;
      place-items: center;

      .button__logo--default,
      .button__logo--hover {
        grid-area: 1 / 1;
        transition: opacity 0.2s ease;
      }

      .button__logo--hover {
        opacity: 0;
      }
    }
  }
}

.interview-links .button:is(:hover, :focus-visible) {
  background-color: #001e40;
  color: #fff;

  .button__logo:not(.button__logo--swap) {
    filter: brightness(0) invert(1);
  }

  .button__logo--default {
    opacity: 0;
  }

  .button__logo--hover {
    opacity: 1;
  }
}