/* works.css */


/* works top */

.worksBlock {
    float:left;
    width:32%;
    max-width:320px;
    margin-right:2.0%;
    margin-bottom:60px;
}
.worksBlock:nth-child(3n) {
    margin-right:0;
}
.worksBlock .img {
    position:relative;
    width:100%;
    height:0;
    background:#e8e8e8;
    padding-top:74.375%;
}
.worksBlock img {
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
}
.worksBlock .txt {
    border:1px solid #d7d7d7;
}
.worksBlock .title {
    position:relative;
    border-bottom:1px solid #d7d7d7;
}
.worksBlock h3 {
    padding:0 1em;
    vertical-align:middle;
    line-height:2.4;
    font-size:1.2em;
}
.worksBlock h3 a {
    display:inline-block;
    background:url("../images/arrow_gray_s.png") no-repeat left center;
    padding-left:12px;
}
.worksBlock .title .cat {
    position:absolute;
    top:0.5em;
    right:1em;
}
.worksBlock .title .cat span {
    height:1.6em;
    padding:0 1em;
    line-height:1.6;
    font-size:0.9em;
}
.worksBlock .title .cat span.newly {
    background:#555;
    color:#fff;
}
.worksBlock .title .cat span.makeover {
    background:#ccc;
    color:#000;
}
.worksBlock p {
    display:inline-block;
    width:calc(100% - 2em);
    min-height:3.2em;
    padding:1em;
    line-height:1.6;
    font-size:0.9em;
}



/* works pages */
#contents.worksPage h1 {
    padding:0;
}
#contents.worksPage h2 {
    width:auto;
    background:none;
    padding:0.5em 1em 80px;
    color:#000;
    text-align:center;
    line-height:1.4;
    font-size:1.3em;
}
p.category {
    padding:70px 0 0;
    text-align:center;
    font-size:1.2em;
}

.mainImg {
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}

.thumbBlock {
    float:left;
    width:32%;
    margin-right:2.0%;
    padding-bottom:2.3em;
}
.thumbBlock:nth-child(3n) {
    margin-right:0;
}
.thumbBlock .img {
    position:relative;
    width:100%;
    height:0;
    background:#e8e8e8;
    padding-top:100%;
}
.thumbBlock img {
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:auto;
    max-width:100%;
    height:auto;
    max-height:100%;
    margin:auto;
}
.thumbBlock .txt {
    border-bottom:1px solid #d7d7d7;
    text-align:center;
    line-height:2.3;
}






/* - 1000px */
/*-----------------------------------------------------------*/
@media only screen and (max-width: 1000px) {






}
/* - 1000px end */





/* - 667px */
/*-----------------------------------------------------------*/
@media only screen and (max-width: 667px) {


.section {
    width:90%;
}


/* works top */

.worksBlock {
    display:table;
    float:none;
    width:100%;
    max-width:inherit;
    margin-right:0;
    margin-bottom:30px;
}
.worksBlock:nth-child(3n) {
}
.worksBlock .img {
    display:table-cell;
    width:50%;
    height:auto;
    padding-top:0;
}
.worksBlock img {
    max-height:100%;
}
.worksBlock .txt {
    display:table-cell;
    width:50%;
}
.worksBlock .title {
}
.worksBlock h3 {
    border-bottom:1px solid #d7d7d7;
}
.worksBlock .title .cat {
    position:static;
    height:auto;
    padding:0.5em 1em;
}
.worksBlock p {
    padding:1em 0 1em 1em;
    border-left:none;
    border-right:none;
    border-bottom:none;
}



/* works pages */
#contents.worksPage h1 {
    font-size:1.8em;
}
#contents.worksPage h2 {
    font-size:1.1em;
}
p.category {
    font-size:1.0em;
}

.mainImg {
    width:100%;
}

.thumbBlock {
    float:left;
    width:49%;
    margin-right:2.0%;
    margin-bottom:0;
    font-size:0.8em;
}
.thumbBlock:nth-child(2n) {
    margin-right:0;
}
.thumbBlock:nth-child(3n) {
    margin-right:2.0%;
}
.thumbBlock:nth-child(6n) {
    margin-right:0;
}






}
/* - 667px end */





/* - 480px */
/*-----------------------------------------------------------*/
@media only screen and (max-width: 480px) {








}
/* - 480px end */