@charset "utf-8";
/*------------------------------------------------------------
	トップページ
------------------------------------------------------------*/

#gNavi .navi05 a span {
    color: #0097E1;
}

#gNavi .navi05 a span:before {
    display: block;
}

.pageTitle {
    margin-bottom: 15px;
    background-image: url(../img/user-voice/page_title_bg.jpg);
}

.pageTitle .headLine01 {
    margin-bottom: 22px !important;
}

#main {
    margin-bottom: 150px;
}

#main .headLine05 {
    margin-bottom: 34px;
}

#main .imgList {
    margin-bottom: 54px;
}
#main .imgList li {
    width: 28%;
    float: left;
    font-size: 16px;
    line-height: 1.74;
    margin-bottom:20px;
    padding: 20px;
}
#main .imgList li a{
  display: block;
  text-decoration: none;
}
#main .imgList li a:hover{
  opacity: 0.6;
}
#main .imgList li:nth-child(3n-1) {
    margin: 0 20px;
}
#main .imgList li .pho {
    margin-bottom: 12px;
    text-align: center;
}

#main .imgList li h4 {
    margin-bottom: 16px;
    font-size: 20px;
    line-height: 1.6;
    text-align: center;
    letter-spacing: 0.5px;
}

#main .h3Ttl {
    margin-bottom: 30px;
}

#main .link {
    text-align: center;
}

#main .link a {
    padding: 27px 64px;
    min-width: 66.8%;
    display: inline-block;
    color: #FFF;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    background: url(../img/for-vendor/bg01.png) no-repeat left center;
    background-size: cover;
    box-sizing: border-box;
    border-radius: 40px;
}

#main .link a:hover {
    text-decoration: none;
    opacity: 0.7;
}
#main .content .img_head{
  display:flex;
  justify-content: space-between;
  align-items: center;
}
#main .content span.cat{
  padding:2px 5px;
  color:#FFF;
  background:#0097e1;
  text-align: center;
  margin-right:5px;
  font-size:12px;
  display: inline-block;
  margin-bottom:5px;
}
#main .content span.cat-chiku{
  background:	#e14a00;
}
#main .content span.cat-gaiheki{
  background:	#00e1bb;
}
#main .content span.cat-solar{
  background:#97e100;
}
#main .content span.cat-ecoqto{
  background:#e10097;
}
#main .content span.cat-ih{
  background:#00e14a;
}
#main .content .imgList li h4{
  text-align: left;
  margin-bottom:5px;
}
#main .content .imgList .pho img{
  max-width:100%;
}
#main .content.user-voice-detail{
  max-width:800px;
  margin:60px auto 20px;
  display: block;
}
#main .content.user-voice-detail .red{
  color:red;
}
#main .content.user-voice-detail .user-img{
  width:100%;
  margin-top:10px;
}
#main .content.user-voice-detail h2{
  font-size:24px;
  margin-bottom:10px;
}
#main .content.user-voice-detail h3{
  font-size:20px;
  font-weight: bold;
  margin-top:1.5em;
}
#main .content.user-voice-detail p{
  width:100%;
  font-size:16px;
  margin-top:10px;
  line-height:1.75;
}
#main .content.user-voice-detail .img_head p{
  margin-top:0;
}
#main .content.user-voice-detail .per-info{
  display: flex;
  border: 2px solid #DEEEF6;
  padding: 10px;
  margin: 20px auto;
}
#main .content.user-voice-detail span.red{
  color:red;
}
@media all and (min-width: 0) and (max-width: 767px) {
    .pageTitle {
        margin-bottom: -22px;
        background-image: url(../img/user-voice/sp_page_title_bg.jpg);
    }

    .pageTitle .headLine01 {
        margin-bottom: 40px !important;
    }

    .pageTitle .headLine01 .en {
        margin-right: 0;
        display: block;
        line-height: 1.1;
    }

    .pageTitle .headLine01 .ttl {
        margin-top: 8px;
    }

    #main {
        margin-bottom: 74px;
    }

    #main .headLine05 {
        margin-bottom: 18px;
        font-size: 16px;
    }

    #main .imgList {
        margin: -10px 0 35px;
    }

    #main .imgList li,
    #main .imgList li:nth-child(3n-1) {
        margin: 14px 0 0;
        width: 41%;
        font-size: 12px;
        line-height: 1.5;
        text-align: justify;
        padding:10px;
    }

    #main .imgList li:nth-child(2n) {
        float: right;
    }

    #main .imgList li .pho {
        margin-bottom: 5px;
    }

    #main .imgList li .pho img {
        width: 100%;
    }
    #main .content .img_head{
      flex-direction:column-reverse;
      align-items: flex-start;
    }
    #main .content .img_head .date{
      margin-bottom:5px;
    }
    #main .content.user-voice-detail .img_head .date,#main .content.user-voice-detail span.cat{
      margin-bottom:0;
    }
    #main .content.user-voice-detail .img_head{
      flex-direction: row;
    }
    #main .imgList li h4 {
        margin-bottom: 7px;
        font-size: 14px;
        line-height: 1.5;
    }
    #main .h3Ttl {
        margin-bottom: 18px;
    }
    #main .link a {
        padding: 13px 40px 11px;
        min-width: inherit;
        width: 100%;
        display: block;
        font-size: 14px;
        line-height: 1.3;
        background-image: url(../img/for-vendor/sp_bg01.png);
        border-radius: 30px;
    }
    #main .content.user-voice-detail .per-info{
      margin:10px auto;
    }
}