@media screen and (min-width: 768px) {
  .h2-bg { background-image: url(../images/voice/h2.jpg); background-position: center;}
  #voice .inner { width: 1100px; margin: 0 auto; }
  #voice .category-box { width: 1100px; margin: 0 auto; margin-bottom: 56px; }
  #voice .category-box .category-list { display: flex; flex-wrap: wrap; justify-content: space-between }
  #voice .category-box .category-list li { justify-content: center; display: flex; align-items: center; margin-bottom: 20px; width: 13.5%; }
  #voice .category-box .category-list li a { display: table; width: 100%; height: 100px; padding: 20px; text-align: center; color: #2b2b2b; font-size: 18px; font-weight: 700; letter-spacing: 0.9px; background-color: #ebebec; transition: 0.2s linear; }
  #voice .category-box .category-list li a:hover { background-color: #2b2b2b; color: #ffffff; text-decoration: none; }
  #voice .category-box .category-list li a span { display: table-cell; vertical-align: middle; }
  #voice .category-box .category-list li a.current-color { background-color: #2b2b2b; color: #fff; }
  #voice .system-list { width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap; margin-bottom: -50px; }
  #voice .system-list > li { width: 260px; margin-right: 20px; padding-bottom: 50px; }
  #voice .system-list > li:nth-child(4n) { margin-right: 0px; }
  #voice .system-list .rel-box { position: relative; }
  #voice .system-list a:hover{ text-decoration: none; }
  #voice .system-list .system-icon { width: 50px; height: 50px; color: #ffffff;  font-size: 13px; font-weight: 700; text-transform: uppercase; background-color: #ca1c1d; border-radius: 50%; text-align: center; padding-top: 15px; position: absolute; top: -20px; left: 10px; z-index: 50; }
  #voice .system-list .system-pic { margin-bottom: 10px; }
  #voice .system-list .fit { width: 260px; height: 220px; }
  #voice .system-list .fit img { width: 100%; height: 220px; }
  #voice .system-list .wrap-system-category-name { position: absolute; bottom: 10px; left: 0; width: 100%; padding-left: 10px; box-sizing: border-box;}
  #voice .system-list .wrap-system-category-name .system-category-name { background-color: #fff; border: 1px solid #9c9c9c; color: #898989; font-size: 13px; font-weight: 500; line-height: 26px; letter-spacing: 0.65px; display: inline-block; padding: 0 8px; margin-top: 5px; }
  #voice .system-list a:hover .system-ttl{ text-decoration: underline; }
  /*============================ #detail-Box ============================*/
  #detail-Box { width: 1100px; margin: 0 auto; }
  #detail-Box .inner .bg-box { width: 1100px; background-color: #ffffff; padding: 50px 0 60px; }
  #detail-Box .inner .bg-box .system-i-pic { margin-bottom: 40px; }
  #detail-Box .inner .bg-box .wysiwyg { width: 100%; max-width: 900px; margin: 0 auto; }
  #detail-Box .inner .bg-box .wysiwyg h2 { border: 0; padding-left: 0; }
  #detail-Box .inner .bg-box .wysiwyg h3 { background: transparent; font-size: 18px; position: relative; padding-left: 20px; }
  #detail-Box .inner .bg-box .wysiwyg h3::before { content: ''; display: block; width: 10px; height: 2px; background: #C91A22; position: absolute; left: 0; top: 50%; margin-top: -1px; }
  #detail-Box .inner .bg-box .wysiwyg .alignnone,
  #detail-Box .inner .bg-box .wysiwyg .alignright,
  #detail-Box .inner .bg-box .wysiwyg .alignleft { width: 100% !important; }
  #detail-Box .inner .bg-box .wysiwyg .wp-caption-text { text-align: right; font-weight: 400; font-size: 14px; }
  #detail-Box .inner .bg-box .wysiwyg .speaker { color: #C91A22; font-weight: 700; }
  #detail-Box .inner .bg-box .system-gallery .gallery-list.popupgallery { margin-top: 100px; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -ms-flex-wrap: wrap; flex-wrap: wrap; }
  #detail-Box .inner .bg-box .system-gallery .gallery-list.popupgallery li { width: 18.4%; margin-right: 22px; margin-bottom: 22px; }
  #detail-Box .inner .bg-box .system-gallery .gallery-list.popupgallery li:nth-child(5n) { margin-right: 0px; }
  #detail-Box .inner .bg-box .system-gallery .gallery-list.popupgallery .system-Frame.fit { width: 170px; height: 120px; }
  #detail-Box .inner .bg-box .system-gallery .gallery-list.popupgallery .system-Frame.fit img { width: 100%; height: 120px; }
  #detail-Box .inner .bg-box .photographer { text-align: right; }
  /* その他の施工実績のタイトル */
  #detail-Box .inner .ttl-02 { margin-top: 88px; text-align: center; margin-bottom: 40px; }
  #detail-Box .inner .ttl-02 .jp { color: #010000; font-size: 30px; font-weight: 700; letter-spacing: 0.8px; line-height: 1; display: block; margin-bottom: 28px; }
}

@media screen and (max-width: 767px) { .h2-bg { background-image: url(../images/voice/sp-h2.jpg); background-position: center; }
  .mv-deco-box { margin-bottom: 6.28%; }
  #voice .inner { width: 87.92%; margin: 0 auto; }
  #voice .category-box { margin-bottom: 6.86%; }
  #voice .category-box .category-list { display: flex; flex-wrap: wrap; }
  #voice .category-box .category-list li { justify-content: center; display: flex; align-items: center; width: 32%; margin-bottom: 2%; margin-right: 2%; }
  #voice .category-box .category-list li:nth-child(3n) { margin-right: 0; }
  #voice .category-box .category-list li a { display: table; width: 100%; min-height: 15vw; padding: 3%; color: #2b2b2b; font-size: 1.4rem; font-weight: 700; letter-spacing: 0.7px; line-height: 1.7; text-align: center; background-color: #ebebec; }
  #voice .category-box .category-list li a:hover { color: #fff; text-decoration: none; background-color: #2b2b2b; transition: 0.2s linear; }
  #voice .category-box .category-list li a span { display: table-cell; vertical-align: middle;}
  #voice .category-box .category-list li a.current-color { width: 100%; background-color: #2b2b2b; color: #ffffff; }
  #voice .category-box .category-list li a.current-color:hover { background-color: #2b2b2b; color: #ffffff; }
  #voice .system-list { display: -webkit-box; display: -moz-flex; display: -ms-flex; display: -o-flex; display: -ms-flexbox; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: -6.59%; }
  #voice .system-list > li { width: 46.7%; margin-right: 6.59%; margin-bottom: 6.59%; }
  #voice .system-list > li:nth-child(2n) { margin-right: 0px; }
  #voice .system-list .rel-box { position: relative; }
  #voice .system-list a:hover{ text-decoration: none; }
  #voice .system-list .system-icon { background-color: #bb0415; position: absolute; width: 40px; height: 40px; color: #ffffff; font-size: 1.0rem; font-weight: 700; letter-spacing: 0.65px; text-align: center; border-radius: 50%; padding-top: 6%; padding-left: 1%; top: -15%; left: 2%; z-index: 10; }
  #voice .system-list .system-pic { margin-bottom: 5%; }
  #voice .system-list .fit { width: 100%; height: 110px; }
  #voice .system-list .fit img { width: 100%; height: 110px; }
  #voice .system-list .wrap-system-category-name .system-category-name { background-color: #2b2b2b; color: #ffffff; font-size: 1rem; font-weight: 500; line-height: 1.7; letter-spacing: .6px; display: inline-block; padding: 3% 6%; margin-top: 3%; }
  #voice .system-list a:hover .system-ttl{ text-decoration: underline; }
 
  /*============================ #detail-Box ============================*/
  #detail-Box .inner { width: 100%; }
  #detail-Box .inner .bg-box { background-color: #ffffff; padding: 7.85% 6.04% 10.26%; }
  #detail-Box .inner .bg-box .system-i-pic { margin-bottom: 8.24%; }
  #detail-Box .inner .bg-box .wysiwyg { width: 100%; max-width: 900px; margin: 0 auto; }
  #detail-Box .inner .bg-box .wysiwyg h2 { border: 0; padding-left: 0; }
  #detail-Box .inner .bg-box .wysiwyg h3 { background: transparent; font-size: 16px; position: relative; padding-left: 20px; }
  #detail-Box .inner .bg-box .wysiwyg h3::before { content: ''; display: block; width: 10px; height: 2px; background: #C91A22; position: absolute; left: 0; top: 50%; margin-top: -1px; }
  #detail-Box .inner .bg-box .wysiwyg .alignnone,
  #detail-Box .inner .bg-box .wysiwyg .alignright,
  #detail-Box .inner .bg-box .wysiwyg .alignleft { width: 100% !important; }
  #detail-Box .inner .bg-box .wysiwyg .wp-caption-text { text-align: right; font-weight: 400; font-size: 14px; }
  #detail-Box .inner .bg-box .wysiwyg .speaker { color: #C91A22; font-weight: 700; }
  #detail-Box .inner .bg-box .system-gallery .gallery-list.popupgallery { margin-top: 10%; display: -webkit-box; display: -moz-flex; display: -ms-flex; display: -o-flex; display: -ms-flexbox; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -ms-flex-wrap: wrap; flex-wrap: wrap; }
  #detail-Box .inner .bg-box .system-gallery .gallery-list.popupgallery li { width: 46.7%; margin-right: 6.59%; margin-bottom: 5.49%; }
  #detail-Box .inner .bg-box .system-gallery .gallery-list.popupgallery li:nth-child(2n) { margin-right: 0px; }
  #detail-Box .inner .bg-box .system-gallery .gallery-list.popupgallery .system-Frame.fit { width: 100%; height: 115px; }
  #detail-Box .inner .bg-box .system-gallery .gallery-list.popupgallery .system-Frame.fit img { width: 100%; height: 120px; }
  #detail-Box .inner .bg-box .photographer { text-align: right; font-size: 1.4rem; }
  /* その他の施工実績のタイトル */
  #detail-Box .inner .ttl-02 { margin-top: 12%; text-align: center; margin-bottom: 6%; }
  #detail-Box .inner .ttl-02 .jp { color: #010000; font-size: 2rem; font-weight: 700; letter-spacing: 1.5px; line-height: 1; display: block; margin-bottom: 3%; }
  #detail-Box .category-box { width: 87.92%; margin: 0 auto; margin-bottom: 6.86%; }
  #detail-Box .system-list { width: 87.92%; margin: 0 auto; }

/*# sourceMappingURL=page-voice.css.map */