/* 幅指定 */
.interview-inner{
    margin: 0 auto;
    max-width: 760px;
    position: relative;
    padding: 20px 20px;
  }
/* インタビュースタイル */
.interview-top-image-area{
    width: 100%;
    display: flex;
  }
  
  .interviews-image-box{
    width: 75%;
    position: relative;
  }
  .interviews-image{
    width: 100%;
    height: 480px;
  }
  
  .interview-logo-size{
    width: 25%;
    background-color: #FF0A00;
    padding: 180px 40px 0 40px;
    position: relative;
  }
  .interview-logo-size::after {
    content: "";
    bottom: 0px;
    left: 0px;
    position: absolute;
    width: 240px;
    height: 160px;
    border-top: 80px solid transparent;
    border-left: 120px solid #E50012;
    border-right: 120px solid transparent;
    border-bottom: 80px solid #E50012;
  }
  .interview-logo-image{
    width: 100px;
    height: 40px;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
  }
  
  .client-interview{
    font-size: 1.2rem;
    color: white;
    border-bottom: 1px solid #fff;
    padding-bottom: 15px;
    margin-bottom: 15px;
    position: relative;
    z-index: 1;
  }
  
  .interview-logo-company-name {
    font-size: 20px;
    color: white;
    position: relative;
    width: 100%;
    z-index: 1;
  }
  .cases-sub-title-interview{
    font-size: 20px;
    font-weight: bold;
    background-color: #FF0A00;
    color: white;
    padding: 10px 30px;
    max-width: 760px;
    margin: 0 auto;
  }
  .cases-title-interview{
    font-size: 26px;
    line-height: 1.4;
    font-weight: bold;
    color: white;
    padding: 18px 30px;
    max-width: 760px;
    margin: 0 auto;
  }
/* interviews area */
.interview-left-area{
  width: 75%;
  background-color: white;
}
.interview-right-area{
  width: 25%;
  background-color: #F4F4F4;
}

.interviews-wraper{
  display: flex;
}
.interview-sub-title-wrap{
  background-color: #FF0A00;
}

.interview-title-wrap{
  background-color: black;
}
/* 最初の部分からインタビュー */
.interview-development{
  color: #7B7B7B;
  font-size: 16px;
  font-weight: 100;
}

  .cases-company_name{
	  font-size: 18px;
    color:white;
    position: absolute;
    left: 50%;
    transform: translate(-50%,40%);
  }

.cases-interview-explanation{
    padding-left: 10px;
    font-size: 16px;
}

/* インタビュー記事ループデザイン */  
.cases-interview-image-top{
    margin-top: 40px;
}

.cases-interview-image-bottom{
    margin-top: 40px;
}

.cases-interview-image{
    display: flex;
}

.cases-interview-image-size{
    height: 50px;
    width: 150px;
    margin: 40px;
    padding: 0px;
}

.cases-interview-image-area{
    margin-right: 90px;
}

.cases-interview-image_name{
    font-size: 14px;
    font-weight: bold;
    
}

.cases-interview-image_explanation{
    font-size: 14px;
}

.cases-interview-image_url{
    font-size: 14px;
}

/* インタビューページ詳細 */
.detail-tag{
  margin: 1%;
}

.cases-interview{
	padding: 1%;
}

.cases-question-titel{
  margin: 5% 0 5% 0;
font-size: 24px;
  font-weight: bold;
  color: #000000;
}

.cases-question{
  margin: 0% 0 3% 0;
font-size: 20px;
color: #930000;
}

.cases-answer{
  margin: 1% 0 5% 0;
  font-size: 16px;
  color: #000000;
}

.interview-image{
  width: 100%;
}

.interview-image-name{
  font-weight: bold;
  font-size: 14px;
}

.interview-image-explanation{
  font-size: 14px;
}

.interview-image-url{
  font-size: 14px;
}

.example-interviews-image-size{
  width: 100%;
  height:336px;
}


/* 関連事例 */
.example-cases-title{
  position: relative;
    background-color: #343434;
    height: 50px;
    width: 100%;
}

.example-cases-name{
  color: white;
    font-size: 18px;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.interview-company-card{
  margin: 1.75em 0 1.75em;
}
.interview-copmany-image {
  width: 200px;
}

.interviews-explanation-wrap{
  width: calc(100% - 160px);
}

.interviews-company-name{
  font-weight: bold;
  font-size: 14px;
}

.interviews-company-explanation{
  font-size: 14px;
}

@media (max-width: 1024px) {
    .interviews-image {
      height: 400px;
    }
    .interview-development {
      font-size: 14px;
    }
  }

  @media (max-width: 800px) {
    .interview-inner{
       margin: 0 auto;
       padding-bottom: 30px;
    }
    .detail-solution-word{
      font-size: 14px;
    }
    .site-inner.defaultpage {
      padding: 0;
      padding-top: 22vw;
    }
    .cases-title-interview{
      font-size: 20px;
      max-width: initial;
    }
    .cases-sub-title-interview {
      padding: 0 30px;
      font-size: 16px;
      display: inline-block;
      position: absolute;
      top: 370px;
      line-height: 30px !important;
      white-space: nowrap;
    }
    .interview-top-image-area {
      display: flex;
      flex-wrap: wrap;
    }
    .interviews-image-box {
        width: 100%;
    }
    .interview-logo-size {
      width: 100%;
      height: auto;
      padding: 5px 20px 10px 30px;
      display: flex;
    }
    .interview-logo-image{
      width: 50px;
      height: 20px;
      margin: 0;
    }
    .interview-logo-size::after {
      width: 60px;
      height: 20px;
      border-top: 10px solid transparent;
      border-left: 30px solid#E50012;
      border-right: 30px solid transparent;
      border-bottom: 10px solid#E50012;
  }
  
    .client-interview{
      font-size: 12px;
      display: inline-block;
      border-bottom: none;
      padding: 0;
      margin: 0;
      white-space: nowrap;
      padding-left: 5px;
    }
  
    .interview-logo-company-name {
      font-size: 14px;
      color: white;
      position: relative;
      width: 100%;
      text-align: right;
    }
    /* interviews area */
    .interview-left-area{
      width: 100%;
    }
    .interview-right-area{
      width: 0%;
    }
    .cases-answer {
      margin: 1% 0 7% 0;
  }
  .cases-question-titel {
    margin: 5% 0 7% 0;
}
.cases-question {
  margin: 0% 0 7% 0;
}
  }

  @media (max-width: 600px) {
    .cases-sub-title-interview {
      top: 270px;
  }
  .interviews-image {
    height: 300px;
  }
  .example-cases-name{
    font-size: 16px;
    font-weight: initial;
  }
  .detail-tag{
    margin: 0%;
  }
  .cases-interview-explanation{
    padding-left: 0px;
  }
  .cases-interview{
    padding: 0%;
  }
}
  
  @media screen and (max-width: 414px) {
    /* ヘッダー部分 */
    .cases-type {
        font-size: 10px;
        top: 27%;
    }
    .interviews-image {
      height: 270px;
    }
    .cases-sub-title-interview {
      top: 240px;
  }
    .cases-name {
      font-size: 16px;
      font-weight: initial;
    }
    .example-image {
        height: 86px;
      }
    
    .detail-solution-word{
      font-size: 11px;
    }
    .interview-development {
      font-size: 13px;
    }
      .cases-question-titel {
        font-size: 20px;
    }
    .cases-question {
      font-size: 17px;
    }
    .interview-inner{
      margin: 0 auto;
      padding-bottom: 20px;
    }
    /* interview */
    .cases-company_name {
      font-size:14px;
      transform: translate(-50%,30%);
    }
    .cases-sub-title-interview{
      font-size: 13px;
      font-weight: initial;
      width: 100%;
    }
    .cases-title-interview{
      font-size: 16px;
      font-weight: initial;
      line-height: 1.5em;
    }
    .interview-logo-company-name{
      font-size: 12px;
    }
    .client-interview{
      font-size: 10px;
    }
    .interview-logo-image {
      width: 30px;
      height: 13px;
      margin: 0;
    }
    .interview-development {
      font-size: 12px;
    }
    .detail-solution-word {
      font-size: 10px;
    }
    .interview-copmany-image {
      width: 140px;
      margin: auto;
    }
    .interviews-explanation-wrap {
      width: 100%;
    }
    .interview-image-inner {
      width: 414px !important;
      position: relative;
      left: -25px;
  }
}

@media screen and (max-width: 375px) {
    .interview-image-inner {
      width: 375px !important;
      position: relative;
      left: -25px;
  }
}