/*==========================================
  お客様の声一覧
===========================================*/

/* 一覧全体 */
.voice_list {
  clear: both;
  display: flex;
  flex-wrap: wrap;
  font-weight: 500;
  font-size: 16px;
  max-width: 931px;
  margin: 55px auto 22px;
  position: relative;
}

/* 一覧に表示するお客様の声個別 */
.voice_container {
  max-width: 100%;
  display: block;
  margin-bottom: 48px;
}

/* リンク */
.voice_container a {
  text-decoration: none;
}

/* 左側のお客様の声 */
.voice_container:nth-child(odd) {
  padding: 0 20px 0 0;
}

/* 右側のお客様の声 */
.voice_container:nth-child(even) {
  padding: 0 0 0 20px;
}

/* タイトル */
.voice_content__title {
  font-size: 21px;
  padding: 10px 2px;
  line-height: 30px;
  height: 80px;
  overflow: hidden;
}

/* メイン画像コンテナ */
.voice_content__imgbox {
  width: 100%;
  height: auto;
  max-width: 430px;
  max-height: 322px;
  position: relative;
}

.voice_content__imgbox::before {
  content:"";
  display: block;
  padding-top: 74.9%; /* 高さを幅の75%に固定 */
}

/* メイン画像 */
.voice_content__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  font-family: 'object-fit: cover';

  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}


/* newラベルコンテナ */
.voice_content__new {
  margin: -22px auto 7px 0;
  height: 22px;
  line-height: 20px;
  position: relative;
}

/* newラベル */
.voice_content__newlabel {
  background: #cf000e;
  font-size: 15px;
  color: #fff;
  border-radius: 3px;
  padding: 0 3px;
  display: inline-block;
}

/* お客様名 */
.voice_content__customer {
  background: #d3c9b8;
  padding: 0 10px;
}


/* IE11 */
@media all and (-ms-high-contrast:none){

  /* newラベル */
  .voice_content__newlabel {
    padding: 5px 3px 0;
    line-height: 16px;
  }

  /* お客様名 */
  .voice_content__customer {
    padding: 5px 10px 0;
    line-height: 20px;
  }
}

/* 小さい画面 */
@media(max-width: 767px){

  /* 一覧全体 */
  .voice_list {
    width: 100%;
    max-width: 440px;
    display:block;
    margin: 55px auto 22px;
  }

  /* 一覧に表示するお客様の声個別 */
  .voice_container {
    width: 100%;
    padding: 0;
    float: none;
  }

  /* タイトル */
  .voice_content__title {
    height: 80px;
  }

  /* 左側のお客様の声 */
  /* 右側のお客様の声 */
  .voice_container:nth-child(odd),
  .voice_container:nth-child(even) {
    padding: 0;
  }

  /* pcで左側に表示していたお客様の声 */
  .voice_container:nth-child(odd) {
    margin-right: 0;
  }

  /* pcで右側のお客様の声 */
  .voice_container:nth-child(even) {
    margin-left: 0;
  }

  /* newラベルコンテナ */
  .voice_content__new {
    margin: 10px 5px 5px 0;
    height: 22px;
    line-height: 20px;
    position: relative;
  }

  /* お客様の声コンテナ1つめ */
  .voice_row:first-child .voice_container:first-child {
    margin-top: -20px;
  }

  /* もっと見るボタン */
  .more_button button {
    width: 170px;
  }
}

/* レスポンシブIE */
@media(max-width: 767px) and (-ms-high-contrast:none){

  /* タイトル */
  .voice_content__title {
    padding: 10px;
    height: 80px;
  }
}


/*==========================================
  お客様の声詳細
===========================================*/

/* お客様の声コンテンツ全体枠 */
.voice_single {
  width: 100%;
  max-width: 940px;
  margin: 55px auto 0;
  font-size: 16px;
}

.voice_content {
  width: 100%;
  clear: both;
}

/* タイトル */
.voice_single .title {
  font-size: 21px;
  line-height: 30px;
}

/* お客様名 */
.voice_single .voice_content__customer {
  width: 100%;
  margin: 22px auto 30px;
}

/* メイン画像コンテナ */
.single_content__mainbox {
  width: 100%;
  height: auto;
  max-width: 910px;
  max-height: 500px;

  margin-bottom: 30px;
  position: relative;
  overflow: hidden;
}

.single_content__mainbox::before {
  content:"";
  display: block;
  padding-top: 54.9%;
}

/* メイン画像 */
.single_content__mainbox img {
  width: 100%;
  height: 100%;
  object-fit: cover;

  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

.row_container {
  margin-bottom: 40px;
}

/* 画像説明 */
.description {
  margin: 6px 0 8px;
}

.left_img .left_container {
  max-width: 430px;
  margin-right: 30px;
  float: left;
}

.right_container {
  float: right;
}

/* 左画像、右テキストのときの画像 */
.left_img img {
  width: 430px;
  height: 290px;
  object-fit: cover;
  font-family: 'object-fit: cover';
}

/* 右画像、左テキストのときの画像 */
.right_img .right_container {
  max-width: 380px;
  float: right;
  margin-left: 30px;
}

.right_img img {
  width: 380px;
  height: 480px;
  object-fit: cover;
  font-family: 'object-fit: cover';
}

/* 画像のみのコンテナ, テキストのみのテキスト */
.img_only, .text_only p {
  margin: -5px 0 55px;
}


/* 見出し */
.headline h2 {
  font-size: 21px;
  line-height: 35px;
  margin: -5px 0 0;
}

/* 画像横並びコンテナ */
.img_pair .left_container {
  max-width: 445px;
  padding-left: 0;
}

.img_pair .right_container {
  max-width: 445px;
  padding-right: 0;
}

/* 画像横並びのときの画像領域 */
.img_pair .imgbox {
  width: 100%;
  height: auto;
  max-width: 430px;
  max-height: 290px;
  margin: 0 auto;

  position: relative;
  overflow: hidden;
}

.img_pair .imgbox::before {
  content:"";
  display: block;
  padding-top: 67.4%;
}

/* 画像横並びのときの画像 */
.img_pair img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  font-family: 'object-fit: cover';

  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}


/* 画像のみのときの画像 */
.img_only img {
  width: 100%;
}

/* 画像のみ */
.img_only .imgbox {
  width: 100%;
  height: auto;
  max-width: 910px;
  max-height: 450px;

  position: relative;
  overflow: hidden;
}

.img_only .imgbox::before {
  content:"";
  display: block;
  padding-top: 49.5%;
}

.img_only .imgbox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  font-family: 'object-fit: cover';

  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}


/* このお客様の施工例をみる と お客様の声一覧への領域 */
.voice_single_foot {
  max-width: 940px;
  margin: 0 auto;
  font-size: 16px;
}

.voice_single_foot__content {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: #666666 2px solid;
  border-bottom: #666666 2px solid;
}

/* このお客様の施工例をみるの画像 */
.voice_single_foot__parts img {
  width: auto;
  margin-right: 15px;
  width: 104px;
  height: 70px;
}

/* このお客様の施工例をみる と お客様の声一覧への領域 */
.voice_single_foot__parts a {
  display: block;
}

/* このお客様の施工例をみる と お客様の声一覧への領域 */
.voice_single_foot a:hover {
  text-decoration: none;
}

.back_button {
  margin: 0 0 0 auto;
}

/*===================================================
　お客様の声一覧へボタン(もっと見るボタンデザインほぼコピー)
====================================================*/

.back_button button {
  background-color: #ffffff;
  border: 1px solid #000000;
  color: #000000;
  font-size: 100%;
  padding: 5px 0;
  width: 240px;
  display: block;
  margin: 0 auto;
  transition: background-color .5s;
  font-weight: bold;
}
.back_button button:hover {
  background-color: #000000;
  border: #000000 1px solid;
  color: #ffffff;
}
.back_button a,
.back_button a:hover {
  text-decoration: none;
}

/* IE11 */
@media all and (-ms-high-contrast:none){

  .back_button button {
    padding: 7px 0 2px;
  }
}


  /*===================================================
  　お客様の声詳細の画像サイズ可変設定
  ====================================================*/

/* 小さい画面 */
@media(max-width: 767px){

  /* メイン画像以外の、画像のみを囲むdiv要素 */
  .img_pair > .left_container,
  .img_pair > .right_container,
  .left_container img,
  .right_container img,
  .img_pair .description {
    margin: 0 auto;
  }

  .right_img .description {
    max-width: 380px;
  }

  .left_container, .right_container {
    float: none;
    margin: 0 auto 22px;
  }

  .left_container img, .right_container img {
    display: block;
  }

  .img_pair .description {
    max-width: 430px;
  }

  /* 左画像右テキストの画像領域 */
  /* 右画像左テキストの画像領域 */
  /* 画像のみの画像領域 */
  /* 画像横並びの画像領域 */
  .left_container .imgbox,
  .right_container .imgbox,
  .img_only .imgbox,
  .img_pair .left_container .imgbox,
  .img_pair .right_container .imgbox {
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
  }

  /* 左画像右テキスト */
  .left_img .left_container {
    margin: 0 auto;
    float: none;
  }

  .left_img .left_container .imgbox::before {
    content:"";
    display: block;
    padding-top: 67.4%;
  }

  .left_img .left_container .imgbox img {
    width: 100%;
    height: 100%;
    max-width: 430px;
    max-height: 290px;
    object-fit: cover;

    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
  }


  /* 右画像左テキストの画像 */
  .right_img .right_container {
    width: 100%;
    max-width: 380px;
    float: none;
    margin: 0 auto;
  }

  .right_img .right_container .imgbox::before {
    content:"";
    display: block;
    padding-top: 126.3%;
  }

  .right_img .right_container .imgbox img {
    width: 100%;
    height: 100%;
    max-width: 380px;
    max-height: 480px;
    object-fit: cover;

    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
  }

  /* 画像横並びの左 */
  .img_pair .left_container,
  .img_pair .right_container {
    width: 100%;
    padding: 0;
  }

  .img_pair .left_container .description {
    margin-bottom: 20px;
  }

  .img_pair .left_container .imgbox::before,
  .img_pair .right_container .imgbox::before {
    content:"";
    display: block;
    padding-top: 67.4%;
  }

  .img_pair .left_container .imgbox img,
  .img_pair .right_container .imgbox img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
  }

  /* 画像の表示設定変更ここまで */



  /* このお客様の施工例をみる と お客様の声一覧への領域 */

  .voice_single_foot__parts {
    text-align: center;
    margin-bottom: 20px;
  }

  .voice_single_foot__content {
    display: block;
    height: auto;
    padding: 15px;
  }

  /* このお客様の施工例をみるの画像 */
  .voice_single_foot__parts img {
    width: 100%;
    height: 100%;
    display: block;
  }
}