@charset "UTF-8";

.interview {

  /*--------------------------------------------
    ページタイトル
  ----------------------------------------　-----*/
  .page_title {
    margin-bottom: 0;
    background-image: url("/assets/img/logo_bg_w.png"), url("/assets/img/recruit/interview/interview_title_bg.jpg");

    @media (width <= 1024px) {
      background-position: right 12vw bottom, left 30% bottom;
    }
    @media (width <= 767px) {
      /* ↓SP用背景画像を別で設定する場合に使用 */
      /* background: url("/assets/img/logo_bg_w.png"), url("/assets/img/recruit/interview/interview_title_bg_sp.jpg"); */
      /* background-position: right 12vw bottom, left 30% bottom; */
    }

    .cmn_ttl {
      img { /* ページタイトルsvg画像 */
        width: 225px;
        margin-bottom: 12px;

        @media (768px <= width <= 1024px) {
          width: 180px;
        }
        @media (width <= 767px) {
          width: 150px;
        }
      }
    }
  }

  /*--------------------------------------------
    インタビューコンテンツ
  ---------------------------------------------*/
  .interview_list {
    padding: 10.5% 0 18%;
    background: #F2F2F2;
    position: relative;

    @media (width <= 1024px) {
      padding: 15% 0 18%;
    }

    &::after {
      content: "";
      background-color: #FFF;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 12%;
      height: 100%;
      z-index: 1;
    }

    li {
      &:not(:last-of-type) {
        margin-bottom: 10%;
      }

      .balloon_btm {
        width: 640px;
        margin: 0 auto 6%;
        padding: 28px 0 33px;
        top: 100px;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
        z-index: 1;

        @media (width <= 1024px) {
          width: 100%;
          padding: 25px 0 30px;
          top: 0;
          margin-bottom: 0;
          transform: translateX(-50%);
        }
        @media (width <= 767px) {
          margin: 0 auto 50px;
        }

        &::before {
          border: 24px solid transparent;
          border-top: 42px solid #FFF;
          bottom: -65px;

          @media (width <= 1024px) {
            border: 12px solid transparent;
            border-top: 21px solid #FFF;
            bottom: -32px;
          }
        }

        &::after {
          border: 26px solid transparent;
          border-top: 44px solid #0F5CA8;
          bottom: -73px;

          @media (width <= 1024px) {
            border: 14px solid transparent;
            border-top: 22px solid #0F5CA8;
            bottom: -37px;
          }
        }

        h2 {
          font-size: 3.4rem;
          font-weight: bold;
          color: #0F5CA8;
          line-height: 1.5;

          @media (width <= 1024px) {
            font-size: 2.2rem;
          }
        }
      }

      .contnet_wrap {
        position: relative;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        @media (width <= 1024px) {
          margin-top: 0;
        }
        @media (width <= 767px) {
          flex-direction: column;
        }

        .img_area {
          position: relative;
          z-index: 2;
          /*width: 50%;*/
          @media (width <= 1024px) {
            text-align: center;
          }
          @media (width <= 767px) {
          }

          img {
            /*min-width: 550px;
            max-width: 630px;*/
            width: 45vw;

            @media (width <= 1024px) {
              min-width: auto;
            }
            @media (width <= 767px) {
              width: 100%;
            }
          }
          
          &::after {
            position: absolute;
            bottom: -9%;
            left: 0;
            content: "";
            background: url("/assets/img/recruit/interview/interview1_lb.svg") no-repeat;
            width: 398px;
            height: 70px;
            display: block;
            opacity: 0.7;
            z-index: 10;
            font-size: 8rem;
            letter-spacing: 0.12em;

            @media (width <= 1024px) {
              bottom: -5%;
              width: 100%;
            }
            @media (width <= 767px) {
              bottom: -30px;
            }
          }
        }

        .txt_area {
          position: relative;
          padding: 5% 5% 5.5% 10%;
          background-color: #FFF;
          width: 50vw;
          margin-top: 5%;
          margin-left: -5%;
          /*position: absolute;
          top: 40px;
          right: 0;
          width: 52vw;*/

          @media (width <= 1024px) {
            padding: 40px 30px 40px 75px; 
          }
          @media (width <= 767px) {
            width: 100%;
            margin-top: 0;
            margin-left: 0;
            padding: 50px 5% 40px; 
          }

          .flex {
            align-items: flex-end;
            justify-content: center;

            .icon {
              margin-right: 3%;

              @media (width <= 1024px) {
                width: 70px;
              }
            }

            .job {
              font-size: 1.8rem;

              @media (width <= 1024px) {
                font-size: 1.6rem;
              }
  
              span {
                font-size: 2rem;
                font-weight: bold;
                color: #0F5CA8;
                padding: 1% 2%;
                border: 2px solid #0F5CA8;
                margin-right: 5%;

                @media (width <= 1024px) {
                  font-size: 1.6rem;
                }
              }
            }

            h3 {
              font-size: 2.6rem;
              font-weight: bold;
              line-height: 1.2;
              margin-top: 6%;

              @media (width <= 1024px) {
                font-size: 2rem;
              }
            }
          }
          
          .cmn_txt {
            margin: 6% 0 8%;
          }

          .btn.type_01 {
            /*
            min-width: 500px;
            */
            position: absolute;
            bottom: -9%;
            margin: 0 auto;
            max-width: 35vw;
            z-index: 1;

            @media (width <= 1024px) {
            }
            @media (width <= 767px) {
              position: relative;
              min-width: auto;
              max-width: 100%;
            }
          }
        }
      }
    }

    /* interview02 */
    li {
      &:nth-of-type(2) {
        .contnet_wrap {
          flex-direction: row-reverse;
          @media (width <= 767px) {
            flex-direction: column;
          }
        }
        .img_area {
          margin: 0 0 0 auto;
          /*right: 0;
          position: absolute;*/

          @media (width <= 1024px) {
            position: relative;
          }

          &::after {
            background: url("/assets/img/recruit/interview/interview2_lb.svg") no-repeat;
            width: 419px;
            left: auto;
            right: 0;

            @media (width <= 1024px) {
              width: 100%;
              left: 0;
            }
          }
        }

        .txt_area {
          position: relative;
          padding: 5% 10% 5.5% 5%;
          margin-left: 0;
          margin-right: -5%;

          @media (width <= 1024px) {
            padding: 40px 75px 40px 30px;
          }
          @media (width <= 767px) {
            padding: 50px 5% 40px; 
          }

        }
      }

      /* interview03 */
      &:nth-of-type(3) .img_area {
        &::after {
          background: url("/assets/img/recruit/interview/interview3_lb.svg") no-repeat;
          width: 417px;

          @media (width <= 1024px) {
            width: 100%;
          }
        }
      }
    }
  }
}

/****** 社員インタビュー詳細ページ ******/
.interview_sub {

  /*--------------------------------------------
    ページタイトル
  ---------------------------------------------*/
  .page_title {
    background: url("/assets/img/recruit/interview/interview01_title_bg.jpg") no-repeat top center;
    background-size: cover;

    @media (768px <= width <= 1024px) {
      height: 300px;
    }
    @media (width <= 767px) {
      height: 240px;
    }

    .cmn_ttl {
      .title {
        align-items: center;

        img {
          width: 255px;
          margin-bottom: 0;

          @media (width <= 1024px) {
            width: 170px;
          }
        }

        span {
          color: #222;
          font-size: 2.2rem;
          font-weight: bold;
          margin-left: 25px;

          @media (768px <= width <= 1024px) {
            font-size: 1.6rem;
          }
          @media (width <= 767px) {
            font-size: 1.4rem;
            margin-left: 1em;
          }
        }
      }

      .catch.jp {
        line-height: 1.4;
        margin-top: 12px;

        @media (768px <= width <= 1024px) {
          font-size: 2.6rem;
        }
        @media (width <= 767px) {
          font-size: 2.25rem;
        }
      }
    }
  }
  
  .bg {
    position: relative;
    background: linear-gradient(to bottom, #FFF 0, #FFF 10%, #F2F2F2 10%, #F2F2F2 100%);
    padding-bottom: 6%;
    @media (768px <= width <= 1024px) {
      background: linear-gradient(to bottom, #FFF 0, #FFF 7%, #F2F2F2 7%, #F2F2F2 100%);
    }
    @media (width <= 767px) {
      padding-bottom: 12%;
    }

    &.interview02 {
      @media (width <= 767px) {
       background: linear-gradient(to bottom, #FFF 0, #FFF 13.2%, #F2F2F2 13.2%, #F2F2F2 100%);
     }
    }
    &.interview03 {
      @media (width <= 767px) {
       background: linear-gradient(to bottom, #FFF 0, #FFF 13.5%, #F2F2F2 13.5%, #F2F2F2 100%);
     }      
    }

    &::after {
      content: "";
      background-color: #FFF;
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      width: 13%;
      height: 100%;
      z-index: 1;
    }
  }

  /*--------------------------------------------
    インタビュイー紹介
  ---------------------------------------------*/
  .sec01 {
    padding: 0 0 8%;
    background: none;
    @media (width <= 767px) {
      padding: 0 0 10%;
    }

    .contnet_wrap {
      align-items: center;
      @media (width <= 1024px) {
      }
      @media (width <= 767px) {
        flex-direction: column;
      }

      .img_area {
        z-index: 2;

        @media (width <= 1024px) {
          margin-bottom: 5%;
        }
        @media (width <= 767px) {
          margin-bottom: 8%;
        }

        img {
          min-width: 550px;
          max-width: 630px;
          width: 43vw;

          @media (width <= 1024px) {
            min-width: auto;
            max-width: 100%;
            width: 65vw;
          }
        }
      }
      .txt_area {
        padding: 0 3.5%;

        @media (width <= 1024px) {
          padding: 0 0 0 5%;
        }
        @media (width <= 767px) {
          padding: 0;
        }

        .flex {
          align-items: flex-end;
          justify-content: center;

          .icon {
            margin-right: 3%;
            width: 92px;
            min-width: auto;
            max-width: none;

            @media (width <= 1024px) {
              width: 70px;
            }
          }

          .job {
            font-size: 1.8rem;

            @media (width <= 1024px) {
              font-size: 1.6rem;
            }

            span {
              font-size: 2rem;
              font-weight: bold;
              color: #0F5CA8;
              padding: 1% 2%;
              border: 2px solid #0F5CA8;
              margin-right: 5%;

              @media (width <= 1024px) {
                font-size: 1.6rem;
              }
            }
          }
          .name {
            font-size: 2.6rem;
            font-weight: bold;
            line-height: 1.2;
            margin-top: 6%;

            @media (width <= 1024px) {
              font-size: 2rem;
            }
          }
        }
        .cmn_txt {
          margin: 6% 0 0;
        }
      }
    }
  }

  /*--------------------------------------------
    インタビュー内容
  ---------------------------------------------*/
  .sec02 {
    @media (width <= 767px) {
    }
    .interview_content {
      .content_block {
        .txt_area {
          width: 57%;
          margin-right: 6%;

          @media (width <= 1024px) {
            width: 100%;
            margin-right: 0;
          }

          .wrap:not(:last-of-type) {
            padding-bottom: 8%;
            @media (width <= 767px) {
              padding-bottom: 12%;
            }
          }

          .question {
            font-size: 2.6rem;
            font-weight: bold;
            line-height: 1.3;
            padding-bottom: 3.5%;
            margin-bottom: 3%;
            border-bottom: 3px solid #0F5CA8;
            @media (width <= 767px) {
              font-size: 2rem;
              padding-bottom: 5%;
              margin-bottom: 5%;
            }
          }

          .txt_box:not(:last-of-type) {
            padding-bottom: 2%;
          }
        }

        .img_area {
          @media (width <= 1024px) {
            margin-top: 5%;
            text-align: center;
          }

          img {
            width: 460px;
            @media (width <= 1024px) {
              width: 300px;
            }

            @media (width <= 767px) {
              width: 80%;
              margin: 10% auto;
            }
          }
        }
      }

      .content_block:not(:last-of-type) {
        margin-bottom: 8%;
      }

      .content_block:nth-child(2) {
        .txt_area {
          order: 2;
          margin: 0 0 0 5%;

          @media (width <= 1024px) {
            margin: 0;
          }
        }
        .img_area {
          order: 1;
        }
      }
    }
  }

  /*--------------------------------------------
    メッセージ
  ---------------------------------------------*/
  .sec03 {
    padding: 5% 0;
    background: linear-gradient(#0f5ca8 0%, #47b1ce 100%);
    @media (width <= 767px) {
      padding: 15% 0 18%;
    }

    .flex_b {
      align-items: center;

      .title {
        color: #FFF;
        font-size: 3.4rem;
        font-weight: bold;
        width: 35%;

        @media (width <= 1024px) {
          width: 100%;
          margin-bottom: 30px;
        }
        @media (width <= 767px) {
          font-size: 2.8rem;
          margin-bottom: 8%;
        }
      }
      .txt_area {
        background-color: #FFF;
        padding: 2.5% 3.5%;
        width: 65%;
        height: 251px;
        line-height: 1.75;

        @media (width <= 1024px) {
          width: 100%;
          height: auto;
        }
        @media (width <= 767px) {
          padding: 8% 5% 10%;
        }

        .txt_box {
          line-height: 1.75;
        }

        .txt_box:not(:last-of-type) {
          padding-bottom: 2%;
          @media (width <= 767px) {
            padding-bottom: 5%;
          }
        }
      }
    }
  }

  /*--------------------------------------------
    他のインタビューを見る
  ---------------------------------------------*/
  .sec04 {
    padding: 7.5% 0 0;
    @media (width <= 767px) {
      padding: 15% 0 0;
    }

    .title {
      padding-bottom: 5%;
      font-size: 3.4rem;
      font-weight: bold;

      @media (width <= 1024px) {
        font-size: 2.8rem;
      }
      @media (width <= 767px) {
        padding-bottom: 10%;
      }
    }

    .other_message {
      justify-content: space-between;
      @media (width <= 767px) {
        flex-direction: column;
      }

      .content_block {
        width: calc(100% / 2 - 3%);
        text-align: center;

        @media (width <= 1024px) {
        }
        @media (width <= 767px) {
          width: 100%;
          padding-bottom: 10%;
        }

        .img_area {
          position: relative;

          img {
            width: 100%;
          }

          &::after {
            position: absolute;
            bottom: -10%;
            left: 0;
            content: "";
            width: 398px;
            height: 70px;
            display: block;
            opacity: 0.7;
            z-index: 10;
            font-size: 8rem;
            letter-spacing: 0.12em;
            @media (width <= 1024px) {
              width: 100%;
            }
            @media (width <= 767px) {
              bottom: -15%;
              width: 100%;
            }
          }
        }

        .catch {
          text-align: center;
          font-size: 2.6rem;
          font-weight: bold;
          line-height: 1.6;
          color: #0F5CA8;
          padding: 12% 0 6.5%;

          @media (width <= 1024px) {
            font-size: 2rem;
          }
        }

        &.int01 {
          .img_area {
            &::after {
              background: url("/assets/img/recruit/interview/interview1_lb.svg") no-repeat;
            }
          }
        }
        &.int02 {
          .img_area {
            &::after {
              background: url("/assets/img/recruit/interview/interview2_lb.svg") no-repeat;
            }
          }
        }
        &.int03 {
          .img_area {
            &::after {
              background: url("/assets/img/recruit/interview/interview3_lb.svg") no-repeat;
            }
          }
        }
      }
    }
  }
}