@charset "utf-8";
@import url(cmn.css);
@import url(base.css);

#head{
background-color: rgba(0,0,0,1);
}

/* ------------------------------------------------------------
contents
------------------------------------------------------------ */
.cat-nav{
overflow: hidden;
margin-bottom: 40px;
}
.cat-nav li{
float: left;
width: 32%;
margin-right: 2%;
}
.cat-nav li:nth-child(3n){
margin-right: 0;
}
.cat-nav li a{
display: block;
box-sizing: border-box;
border: 1px solid #a67614;
background-image: url("../images/cmn-images/work-icon02.png");
background-position: 95% 50%;
background-repeat: no-repeat;
background-size: 6px auto;
color: #fff;
background-color: #a67614;
padding: 15px 0;
}
.cat-nav li a:hover{
text-decoration: none;
}
.cat-nav .current a{
border: 1px solid #6e6b68;
background-image: url("../images/cmn-images/work-icon01.png");
color: #000;
background-color: #fff;
padding: 15px 0;
}

.works-box{
overflow: hidden;
}
.works-box li{
float: left;
width: 22%;
margin-right: 4%;
margin-bottom: 20px;
}
.works-box li:nth-child(4n){
margin-right: 0;
}
.works-box li img{
width: 100%;
height: 200px;
object-fit: cover;
}



/* ==========================================================================
pc
========================================================================== */
@media screen and (min-width: 1100px) {


}

/* ==========================================================================
tablet
========================================================================== */
@media screen and (max-width:1099px) {


}

/* ==========================================================================
sp
========================================================================== */
@media screen and (max-width: 699px) {
.cat-nav{
margin-bottom: 30px;
}
.cat-nav li{
float: left;
display: table;
width: 32%;
margin-right: 2%;
}
.cat-nav li:nth-child(3n){
margin-right: 0;
}
.cat-nav li a{
display: table-cell;
font-size: 1.2rem;
vertical-align: middle;
padding: 10px 10px;
}

.works-box li{
width: 48%;
margin-right: 4%;
margin-bottom: 20px;
}
.works-box li:nth-child(2n){
margin-right: 0;
}
.works-box li img{
width: 100%;
height: 130px;
object-fit: cover;
}

}