@charset "utf-8";

#smtb {

  /* ↓↓↓ fv ↓↓↓ */
  .fv {
    width: 100%;
    aspect-ratio: 1280/320;
    display: flex;
    position: relative;

    @media (max-width: 768px) {
      aspect-ratio: unset;
      flex-direction: column;
    }

    .text-block {
      flex: 1;
      height: 100%;
      background-color: var(--color-green);

      @media (max-width: 768px) {
        flex: unset;
        width: 100%;
        height: 160px;
      }

      .fv-bg-text {
        position: absolute;
        top: 19%;
        left: 5.14%;
        width: fit-content;
        font-size: max(72px, 5.625vw);
        font-weight: 500;
        letter-spacing: 0;
        line-height: .9;
        color: #fff;
        opacity: .2;

        @media (max-width: 768px) {
          top: 15px;
          left: 10px;
          font-size: 48px;
        }
      }

      .fv-catch {
        position: absolute;
        top: 31%;
        left: 7.3%;
        width: fit-content;
        font-size: max(32px, 2.5vw);
        font-weight: 500;
        letter-spacing: 0;
        line-height: 1.625;
        color: #fff;

        @media (max-width: 768px) {
          top: 46px;
          left: 20px;
          font-size: 20px;
        }
      }
    }

    .image-block {
      width: 56.40625%;
      height: 100%;

      @media (max-width: 768px) {
        width: 100%;
        height: auto;
      }
    }
  }

  /* ↑↑↑ fv ↑↑↑ */

  /* ↓↓↓ interview-box ↓↓↓ */
  .interview-box {
    width: 100%;
    margin-top: 88px;

    @media (max-width: 768px) {
      margin-top: 100px;
    }
  }

  .interview-box + .interview-box {
    margin-top: 150px;

    @media (max-width: 768px) {
      margin-top: 100px;
    }
  }

  .interview-box .visual {
    width: 1280px;
    margin: 0 auto 72px;
    padding-top: 32px;
    padding-bottom: 76px;
    position: relative;

    @media (max-width: 768px) {
      width: 100%;
      margin-bottom: 70px;
      padding-top: 0;
      padding-bottom: 0;
    }

    &::before {
      content: '';
      position: absolute;
      top: 32px;
      left: 0;
      width: 722px;
      height: 90px;
      background: url('../img/interview/visual-deco_pc.png')no-repeat;
      background-size: contain;

      @media (max-width: 768px) {
        top: 0;
        width: 226px;
        background: url('../img/interview/visual-deco_sp.png');
        background-size: contain;
      }
    }

    .main_image {
      display: block;
      width: 1098px;

      @media (max-width: 768px) {
        width: 100%;
      }
    }

    .visual-copy {
      position: absolute;
      top: 0;

      @media (max-width: 768px) {
        position: relative;
        top: unset;
        margin-top: -72px;
      }
    }

    .info-group {
      position: absolute;
      bottom: 0;
      width: 440px;
      height: 295px;
      padding: 58px 0 0 48px;
      background-color: var(--color-green);
      color: #fff;

      @media (max-width: 768px) {
        position: relative;
        bottom: unset;
        width: 355px;
        height: 242px;
        margin-top: 48px;
        margin-left: auto;
        padding: 45px 0 0 20px;
      }

      .kana {
        font-size: 32px;
        font-weight: 500;
        letter-spacing: 0;
        line-height: 1;

        @media (max-width: 768px) {
          font-size: 20px;
        }
      }

      .name {
        margin-top: 25px;
        font-size: 20px;
        font-weight: 500;
        letter-spacing: 0.2em;
        line-height: 1;

        @media (max-width: 768px) {
          margin-top: 20px;
          font-size: 16px;
        }
      }

      .text {
        margin-top: 32px;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.02em;
        line-height: 2.2;

        @media (max-width: 768px) {
          margin-top: 25px;
          font-size: 13px;
          line-height: 2;
        }
      }
    }
  }

  .interview-box.ps01 .visual {

    .visual-copy {
      left: 88px;
      width: 103px;

      @media (max-width: 768px) {
        left: 0;
        width: 288px;
      }
    }

    .info-group {
      right: 88px;

      @media (max-width: 768px) {
        right: unset;
      }
    }
  }

  .interview-box.ps02 .visual {

    &::before {
      left: 182px;

      @media (max-width: 768px) {
        left: 0;
      }
    }

    .main_image {
      margin-left: auto;
    }

    .visual-copy {
      right: 88px;
      width: 166px;

      @media (max-width: 768px) {
        left: 0;
        width: 355px;
      }
    }

    .info-group {
      left: 88px;

      @media (max-width: 768px) {
        left: unset;
      }
    }
  }

  .interview-box.ps03 .visual {

    .visual-copy {
      left: 88px;
      width: 166px;

      @media (max-width: 768px) {
        left: 0;
        width: 305px;
      }
    }

    .info-group {
      right: 88px;

      @media (max-width: 768px) {
        right: unset;
      }
    }
  }


  .interview-box .set_group01 {
    width: 916px;
    margin: 0 auto;
    display: flex;
    gap: 45px;

    @media (max-width: 768px) {
      width: 100%;
      padding-inline: 20px;
      flex-direction: column;
    }

    .group-ttl {
      width: 446px;
      font-size: 26px;
      font-weight: 500;
      letter-spacing: 0;
      line-height: 1.625;
      color: #333;
      text-align: justify;
      word-break: break-all;

      @media (max-width: 768px) {
        width: 100%;
        font-size: 20px;
      }
    }

    .group-text {
      flex: 1;
      font-family: var(--text-zenkaku);
      font-size: 16px;
      letter-spacing: 0.02em;
      line-height: 2.25;
      text-align: justify;
      word-break: break-all;

      .note {
        display: block;
        width: 100%;
        margin-top: 5px;
        font-family: var(--text-zenkaku);
        font-size: 13px;
      }
    }
  }

  .interview-box .set_group02 {
    width: 916px;
    margin: 100px auto 0;
    position: relative;

    @media (max-width: 768px) {
      width: 100%;
      margin-top: 80px;
      padding-inline: 20px;
      flex-direction: column;
    }

    .group-text {
      width: 564px;
      display: flex;
      flex-direction: column;

      @media (max-width: 768px) {
        width: 100%;
      }

      .ttl {
        font-size: 26px;
        font-weight: 500;
        letter-spacing: 0;
        line-height: 1.625;
        color: #333;
        text-align: justify;
        word-break: break-all;

        @media (max-width: 768px) {
          font-size: 20px;
        }
      }

      .text {
        margin-top: 33px;
        font-family: var(--text-zenkaku);
        font-size: 16px;
        letter-spacing: 0.02em;
        line-height: 2.25;
        text-align: justify;
        word-break: break-all;

        @media (max-width: 768px) {
          margin-top: 45px;
        }
      }
    }

    .image {
      position: absolute;
      top: 0;
      right: -182px;
      width: 464px;

      @media (max-width: 768px) {
        position: relative;
        width: 100%;
        top: unset;
        right: unset;
        margin-top: 45px;
      }
    }
  }

  .interview-box .schedule {
    width: 916px;
    margin: 100px auto 0;
    padding: 55px 147px 64px 113px;
    background-color: #DFECEF;
    position: relative;

    @media (max-width: 768px) {
      width: calc(100% - 40px);
      margin-top: 80px;
      padding: 30px 20px 48px 40px;
    }

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      translate: -50% 0;
      width: 164px;
      height: 4px;
      background-color: var(--color-green2);
    }

    .head {
      font-size: 24px;
      font-weight: 500;
      letter-spacing: 0;
      line-height: 1;
      text-align: center;
      color: var(--color-green2);

      @media (max-width: 768px) {
        font-size: 20px;
      }
    }

    .schedule-list {
      width: 100%;
      margin-top: 48px;

      @media (max-width: 768px) {
        margin-top: 32px;
      }

      .item {
        display: flex;
        gap: 42px;
        position: relative;

        @media (max-width: 768px) {
          gap: 5px;
          flex-direction: column;
        }

        &::before {
          content: '';
          position: absolute;
          top: 10px;
          left: 60px;
          width: 10px;
          height: 10px;
          border-radius: 10px;
          background-color: var(--color-green2);

          @media (max-width: 768px) {
            top: 5px;
            left: -20px;
          }
        }

        &:not(:last-of-type)::after {
          content: '';
          position: absolute;
          top: 15px;
          left: 64px;
          width: 1px;
          height: calc(100% + 25px);
          background-color: var(--color-green2);

          @media (max-width: 768px) {
            top: 10px;
            left: -15px;
          }
        }

        .time {
          width: 45px;
          font-size: 17px;
          font-weight: 500;
          letter-spacing: 0.02em;
          line-height: 1.625;
          text-align: right;
          color: var(--color-green2);

          @media (max-width: 768px) {
            line-height: 1;
            text-align: left;
          }
        }

        .txt {
          flex: 1;
          font-family: var(--text-zenkaku);
          font-size: 16px;
          letter-spacing: 0.02em;
          line-height: 1.625;
          color: #333;
        }
      }

      .item + .item {
        margin-top: 25px;
      }
    }

    .note {
      display: block;
      width: 100%;
      margin-top: 24px;
      font-family: var(--text-zenkaku);
      font-size: 14px;
      letter-spacing: 0.02em;
      line-height: 1.857;
      text-align: right;
      color: #333;

      @media (max-width: 768px) {
        margin-top: 26px;
        text-align: left;
      }
    }
  }

  /* ↑↑↑ interview-box ↑↑↑ */

  .back-btn {
    width: 352px;
    height: 64px;
    margin: 120px auto;
    background-color: #fff;
    border: 1px solid #E8E8E8;
    display: grid;
    place-content: center;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1;
    color: #333;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

    @media (max-width: 768px) {
      width: 335px;
      margin: 100px auto;
    }
  }

}