@charset "UTF-8";
@media screen and (min-width: 768px),print { /*----------------------------------------- h2 画像 ------------------------------------------*/
  .cc-ttl-Box-01 { background: url('../images/voice/h2.jpg') top center no-repeat , url('../images/index/h-bg.jpg') top center ; }
.cc-ttl-01 { color: #fff; }
/* PC用 共通して使える -------------------------------------*/
/* voice -------------------------------------*/
#voice .Box { width: 800px; margin-left: auto; margin-right: auto; background: url('../images/voice/voice-bg.jpg') top center; padding: 25px 20px; position: relative; }
#voice .Box .date { color: #ffc71b; margin-bottom: 20px; font-size: 14px; }
#voice .Box .date:before{ content: '■';　 }
#voice .system-list{ background: #fff; padding: 40px 20px; }
#voice .system-list li { padding-bottom: 32px; margin-bottom: 24px; border-bottom: 1px dotted #989989; position: relative; width: 100%; }
#voice .system-list li { padding-bottom: 32px; margin-bottom: 24px; border-bottom: 1px dotted #989989; position: relative; width: 100%; }
#voice .system-list a:hover { text-decoration: none; }
#voice .system-list .system-ttl { font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック","Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro",  Verdana, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; color: #898989; font-size: 16px; line-height: 1.8; margin-bottom: 40px; }
#voice .system-list .system-area:before{ content: '■' ; color: #0099ba ;}
#voice .system-list .system-area { margin-right: 10px; }
#voice .system-list .rel-Box { position: relative; }
#voice .system-list .status-icon { position: absolute; top: -10px; left: -10px; z-index: 10; }
#voice .system-list .pic-Box { width: 300px; height: 225px; margin-right: 27px; float: left; }
#voice .system-list .system-pic-Box { margin-bottom: 8px; }
#voice .system-list .system-pic { text-align: center; }
#voice .system-list .system-pic img { width: 300px; height: 225px; }
#voice .system-list .system-category { display: inline-block; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック","Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro",  Verdana, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; color: #ffffff; font-size: 16px; font-weight: 700; background-color: #e04040; text-align: center; padding: 0px 20px; margin-bottom: 10px; }
#voice .system-list .txt-Box { width: 390px;float: left; padding-top: 20px; position: relative; padding-bottom: 100px; }
#voice .system-list .txt-Box .more-link{ position: absolute; bottom: 0; }
.system-list-comment { line-height: 1.8; }

#voice .system-list a:hover .system-list-comment{text-decoration: underline;}
#voice .system-list a:hover .system-ttl{text-decoration: underline;}
#voice .txt-Box table{ width: 100%; margin-bottom: 20px;}
#voice .txt-Box th{ padding: 10px; border-right: #ccc solid 1px; background:#f3f2e6; width: 23%;  }
#voice .txt-Box td{ padding: 10px; background:#f3f2e6;}
.voicebox{ border-bottom: #ccc 1px dotted; padding-bottom: 20px; margin-bottom: 20px; }
/* voice-dl(詳細) -------------------------------------*/
#voice-dl .Box { width: 800px; margin-left: auto; margin-right: auto; background-color: #fff;  }
#voice-dl .Box .ttl { text-align: center; margin-bottom: 16px; }
#voice-dl .Box .color-Box { background-color: #fff; padding: 40px 40px 64px; }
#voice-dl .Box .system-customer { font-family: Meiryo; color: #333; font-size: 18px; margin-bottom: 3px; }
#voice-dl .Box .system-customer .system-area { display: inline-block; margin-right: 1em; padding-left: 1.3em; text-indent: -1.3em; margin-bottom: 4px; }
#voice-dl .Box .system-customer .system-area:before { content: "■"; margin-right: .3em; }
#voice-dl .Box .system-customer .system-name { display: inline-block; margin-bottom: 4px; }
#voice-dl .Box .ttl-02 { color: #000000; font-size: 20px; font-weight: 700; line-height: 40px; padding-bottom: 16px; margin-bottom: 32px; border-bottom: 7px solid #dcdddd; }
#voice-dl .Box .system-date { color: #333; font-size: 18px; }
#voice-dl .Box .system-date:before { content: "■"; margin-right: .3em; }
#voice-dl .wysiwyg { margin-top: 32px; }
#voice-dl .gallery-Box { margin: 60px auto 0;  background: #eeefef; text-align: center; padding: 25px 20px; }
#voice-dl .gallery-Box h6{ margin-bottom: 20px; }
#voice-dl .gallery-Box li { float: left; width: 150px; overflow: hidden; margin-right: 20px; margin-bottom: 40px; }
#voice-dl .gallery-Box li:nth-child(4n) { margin-right: 0; }
#voice-dl .gallery-Box li .pic { width: 150px; height: 100px; margin-bottom: .4em; overflow: hidden;}
#voice-dl .gallery-Box li .pic:hover { -ms-filter: "alpha( opacity=80 )"; filter: alpha(opacity=80); opacity: 0.8; }
#voice-dl .gallery-Box li .pic img { width: 150px; height: 100px; }
#voice-dl .gallery-Box li .txt { color: #383231; font-size: 14px; line-height: 1.85; }

}
@media screen and (max-width: 767px) { /* SP用 共通して使える -------------------------------------*/
/* voice -------------------------------------*/
#voice .Box { width: 95%; margin: 10% auto; }
#voice .system-list { margin-bottom: -20px; line-height: 1.85; }
#voice .system-list h4{ margin-bottom: 10%; }
#voice .system-list a:hover { text-decoration: none; }
#voice .system-list a:hover .system-ttl { text-decoration: underline; }
#voice .system-list li { width: 100%; margin:0 auto 4%; border: 1px solid #d8d8d8; padding: 3% 2%; }
#voice .system-list .rel-Box { position: relative; }
#voice .system-list .rel-Box .deco { position: absolute; right: -1px; bottom: 0; }
#voice .system-list .pic-Box { width: 40%; height: 100%; margin-right: 5%; float: left; text-align: center; }
#voice .system-list .txt-Box { float: right; width: 55%; position: relative; }
#voice .system-list .txt-Box .more-link{ text-align: center; }
#voice .system-list .system-pic { width: 100%; height: 100%; margin-bottom: 4%; float: left; }
#voice .system-list .system-pic img { width: 100%; height: 100%; }
#voice .system-list .system-pic:hover { -ms-filter: "alpha( opacity=80 )"; filter: alpha(opacity=80); opacity: 0.8; }
#voice .system-list .system-customer { color: #333; font-size: 1.3rem; }
#voice .system-list .system-customer .system-area { display: inline-block; margin-right: 1em; padding-left: 1.3em; text-indent: -1.3em; margin-bottom: 4px; }
#voice .system-list .system-customer .system-area:before { content: "■"; margin-right: .3em; }
#voice .system-list .system-customer .system-name { display: inline-block; margin-bottom: 4px; }
#voice .system-list .system-ttl { font-size: 1.4rem; line-height: 1.65; }
/* voice-dl(詳細) -------------------------------------*/
#voice-dl .Box { width: 100%; margin-left: auto; margin-right: auto; background-color: #dcdddd; padding: 5% 5% 7%; }
#voice-dl .Box .ttl { text-align: center; margin-bottom: 5%;width: 40%;margin-left: auto;margin-right: auto; }
#voice-dl .Box .color-Box { background-color: #fff; padding: 6% 6% 8%; }
#voice-dl .Box .system-customer { font-family: Meiryo; color: #333; font-size: 1.8rem; }
#voice-dl .Box .system-customer .system-area { display: inline-block; margin-right: 1em; padding-left: 1.3em; text-indent: -1.3em; margin-bottom: 4px; }
#voice-dl .Box .system-customer .system-area:before { content: "■"; margin-right: .3em; }
#voice-dl .Box .system-customer .system-name { display: inline-block; margin-bottom: 4px; }
#voice-dl .Box .ttl-02 { color: #000000; font-size: 1.8rem; font-weight: 700; padding-bottom: 6%; margin-bottom: 7%; border-bottom: 5px solid #dcdddd; line-height: 1.85; }
#voice-dl .wysiwyg { margin-top: 6%; }
#voice-dl .gallery-Box { margin-top: 12%; margin-bottom: -5%; }
#voice-dl .gallery-Box h6 { margin-bottom: 5%;}
#voice-dl .gallery-Box li { width: 32%; margin-right: 2%; margin-bottom: 5%; }
#voice-dl .gallery-Box li:nth-child(3n) { margin-right: 0; }
#voice-dl .gallery-Box li .pic { height: 75px; margin-bottom: .4em; }
#voice-dl .gallery-Box li .pic:hover { -ms-filter: "alpha( opacity=80 )"; filter: alpha(opacity=80); opacity: 0.8; }
#voice-dl .gallery-Box li .pic img { width: 100%; height: 75px; }
#voice-dl .gallery-Box li .txt { color: #383231; font-size: 1.2rem; line-height: 1.65; } }
@media screen and (max-width: 380px) { #voice .system-list .system-pic { height: 97px; }
#voice .system-list .system-pic img { height: 97px; } }
@media screen and (max-width: 321px) { .deco { display: none; } }