/* argument */
/* site style */
/* [ opacity ]
-------------------------------------------------*/
/* [ display style ]
-------------------------------------------------*/
/* [ background-image ]
-------------------------------------------------*/
.wcm {
  max-width: 1000px;
  width: 100%; }
.w100 {
	width:100% !important;
}
.fw {
  width: 100%; }

#works .mainImg {
  background: url(../img/works/bg_mainImg.jpg);
  -webkit-background-size: cover; background-size: cover;}

#works .mainImg .h2Wrap h2 {
  font-size: 0px;
  padding: 19px 30px; }

#works .category {
  width: 100%;
  display: table;}
  #works .category ul li {
    float: left;
	margin:0 5px;
  }
  #works .category ul li {
	  border:#D70C19 solid 1px;
	  padding:0 5px;
  }
	
  #works .category img.cat-heading {
    margin-right: 19px; }
  #works .category img.cat {
    margin-right: 12px; }

.works-container {
  margin: 75px 0px 0px 0px; }
  .works-container .work-item.even .thumb {
    float: left; }
  .works-container .work-item.even .item-content {
    float: right; }
    .works-container .work-item.even .item-content .comment {
      margin-right: 7px !important; }
    .works-container .work-item.even .item-content .more-info {
      float: left; }
    .works-container .work-item.even .item-content .comment {
      background:#fff;
	  border:#ccc solid 2px;
      float: left;
      margin: 0px 0px 0px 0px;
      padding: 8px 8px 8px 10px;
	  position:relative;
	  -webkit-border-radius: 5px;
	 -moz-border-radius: 5px;
	 border-radius: 5px;
	 position:relative;
	  
	}
	.works-container .work-item.even .item-content .comment img{
		position:absolute;
		left:-14px;
		top:50%;
		margin-top:-6px;
		z-index:55;
	}
  .works-container .work-item {
    margin: 0px 0px 44px 0px;
    background: #F2F2F2;
    color: #333; }
    .works-container .work-item .thumb {
      width: 45%;
      height:auto;
      float: right; }
    .works-container .work-item .item-content {
      width: 54%;
      float: left;
      padding: 26px 28px 31px 27px; }
	
      .works-container .work-item .item-content h3 {
        font-size: 22px;
        font-weight: bold;
        margin: 0px 0px 14px 0px; }
      .works-container .work-item .item-content .genre {
        background: #D70C19;
        color: #fff;
        font-size: 12px;
        height: 18px;
        line-height: 1;
        text-align: center;
        float: left;
        margin: 0px 4px 14px 0px;
        padding: 3px 6px 0px 6px; }
      .works-container .work-item .item-content .comp {
        font-size: 16px;
        float: left;
        margin: -3px 0px 0px 0px; }
      .works-container .work-item .item-content .detail {
        margin: 10px 0;
        padding: 10px 0;
        border-top: 2px solid #ccc;
        border-bottom: 2px solid #ccc; }
        .works-container .work-item .item-content .detail .row-detail {
          font-size: 12px; }
          .works-container .work-item .item-content .detail .row-detail b {
            margin-right: 40px; }
      .works-container .work-item .item-content .web {
        color: #D70C19;
        font-size: 12px;
        margin-bottom: 8px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        position: relative;
        top: -3px;
        text-align: left; }
      .works-container .work-item .item-content .web a{
        color: #D70C19; }
      .works-container .work-item .item-content .view-more {
        font-size: 0px; }
      .works-container .work-item .item-content .more-info {
        float: left;
        width: 285px;
        max-width: 100%; }
      .works-container .work-item .item-content .comment {
        width: 178px;
       background:#fff;
	    border:#ccc solid 2px;
        float: right;
        padding: 8px 8px 8px 8px;
        font-size: 12px;
        line-height: 1.5;
		 word-wrap: break-word;
		 position:relative;
		 -webkit-border-radius: 5px;
		 -moz-border-radius: 5px;
		 border-radius: 5px;
	 }
	
	.works-container .work-item .item-content .comment img{
		position:absolute;
		right:-14px;
		top:50%;
		margin-top:-6px;
		z-index:55;
	}


@media screen and (max-width: 767px) {
  .works_archive{
    width: 100%;
  }
  #works .mainImg {
    background: url(../img/works/bg_mainImg_sp.jpg);
    -webkit-background-size: cover; background-size: cover; }

  #works .mainImg .h2Wrap h2 {
    padding: 9px 10px; }

  .category ul {
    display: none; }
  .category ul li {
    width: 100%;
    border-style:none;
    border-style: none !important;
    margin: 0 !important;
    padding: 0 !important;  }
  .category img.cat {
    display: none !important; }
  .category a {
    padding: 12px 0px 0px 16px;
    height: 45px;
    border-bottom: 1px solid #393939;
    width: 100%;
    float: left;
    background: #262626;
    color: #fff;
    font-size: 14px; }
  .category ul li:last-child a {
    border: 0px; }

  .works-container {
    margin-top: 49px; }

    .works-container .work-item .item-content {
      width: 100%;
      float: left;
      padding: 26px 28px 31px 27px; }

    .works-container .work-item.even .thumb, .works-container .work-item.even .item-content, .works-container .work-item .thumb, .works-container .work-item .item-content {
      float: left; }
    .works-container .work-item {
      margin-bottom: 23px; }
      .works-container .work-item .thumb {
        height: auto;
        width: 100%; }
      .works-container .work-item .item-content {
        padding: 25px 16px 26px 16px; }
        .works-container .work-item .item-content .genre {
          display: none; }
        .works-container .work-item .item-content h3 {
          font-size: 14px;
          margin-bottom: 10px; }
        .works-container .work-item .item-content .comp {
          font-size: 12px;
          margin-bottom: 5px; }
        .works-container .work-item .item-content .description {
          font-size: 10px; }
        .works-container .work-item .item-content .detail {
          border-top-width: 1px;
          border-bottom-width: 1px;
          margin: 15px 0; }
          .works-container .work-item .item-content .detail .row-detail {
            font-size: 10px; }
            .works-container .work-item .item-content .detail .row-detail b {
              float: left;
              margin-right: 25px; }
            .works-container .work-item .item-content .detail .row-detail span {
              width: 170px;
              float: left;
              line-height: 1.5em; }
        .works-container .work-item .item-content .comment-sp {
          background: url(../img/works/img_review_sp.png) top center no-repeat !important;
          background-size: contain !important;
          float: left;
          width: 258px;
          height: 55px;
          font-size: 9px;
          padding: 4px 19px 12px 10px;
          margin-bottom: 15px;
		   overflow-x: scroll;
		   line-height: 1.8;
		  }
        .works-container .work-item .item-content .more-info .web {
          font-size: 9px; }
        .works-container .work-item .item-content .more-info .view-more img {
          height: 40px;
          width: auto; }
        .view-more img {
          height: auto;
          width: 100% !important; }

  .wp-pagenavi {
    margin: 4px 0px -12px -4px;
    text-align: left; }

  .wp-pagenavi span, .wp-pagenavi a {
    font-size: 13px;
    margin: 0 3px; }

  .wp-pagenavi .last {
    margin-right: 0px;
    padding: 0px;
    width: 69px; } }
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .work-item.even .thumb, .work-item.even .item-content, .work-item .thumb, .work-item .item-content {
    float: left !important; }
  .works-container .work-item .item-content .comment {
    background:url(../img/works/img_review_right.png) top center no-repeat;
    float: left;
    margin: 0px 7px 0px -10px;
    padding: 8px 8px 8px 20px;
  }
}
@media screen and (min-width:768px) and (max-width:960px) {
  .works-container .work-item .item-content .comment, .works-container .work-item.even .item-content .comment {
    width:52%;
    max-width:182px;
    margin-right:0px !important;
  }
  .works-container .work-item .item-content .more-info,.works-container .work-item.even .item-content .more-info {
    width:50%;
    max-width:295px;
    margin:5px -5px 0px 0px;
  }
  .works-container .work-item .item-content .comment, .works-container .work-item.even .item-content .comment {
    margin-right:7px !important;
  }
}


#serviceapp .works-container {
	margin-top:55px;
}