@charset "utf-8";

.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;
text-align: center;
border:solid 1px rgba(0,0,0,0.5);
border-radius: 5px;
color: #000;
background-color: #fff;
padding: 15px 0;
}
/* ----------img-group---------- */
.img-group{
overflow: hidden;
margin-bottom: 20px;
}
.img-group li{
float: left;
width: 23%;/*横列調整*/
box-sizing: border-box;
text-align: center;
margin-right: 2.6%;
margin-bottom: 30px;
}
.img-group li:nth-child(4n){
margin-right: 0;
}
.img-group li div{
position: relative;
padding-top: 66%;
font-size: 1.4rem;
margin-bottom: 10px;
}
.img-group li div img{
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
top: 0;
left: 0;
}

/* ----------pager---------- */
.pager{
	text-align:center;
}
.pager a,.pager span{
display: inline-block;
font-size: 1.3rem;
background:rgba(255,255,255,1);
border:solid 1px rgba(0,0,0,0.5);
border-radius: 5px;
padding:3px 10px;
margin:0 2px;
}
.pager .current{
	background:rgba(0,0,0,1);
	border:solid 1px rgba(0,0,0,0.5);
	color:rgba(255,255,255,1);
}

/* ----------work-box---------- */
#work-box{
  width:100%;
  overflow:hidden;
}
#work-box .float-l{
  width:47%;
}
#work-box .float-r{
  width:47%;
  text-align:left;
}
.img-box{
  width:100%;
  padding-top:66.6%;
  position:relative;
  margin-bottom: 20px;
}
.img-box img{
  position:absolute;
  height:auto;
  width:auto;
  max-width:100%;
  max-height:100%;
  left: 50%;
  top: 50%;
  object-fit: cover;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
  -webkit-transition: 0.4s ease-in-out;  
     -moz-transition: 0.4s ease-in-out;  
       -o-transition: 0.4s ease-in-out;  
          transition: 0.4s ease-in-out;
}
.b-img-box{
  width:100%;
  overflow:hidden;
}
.s-img-box{
  width:100%;
  overflow:hidden;
}
.s-img-box li{
  float:left;
  width:18%;
  box-sizing:border-box;
  cursor: pointer;
  margin-right: 2.5%;
  margin-bottom:10px;
}
.s-img-box li:nth-child(5n){
  margin-right: 0;
}


/* ------------------------------PC------------------------------ */
@media screen and (min-width: 1200px) {
}
/* ------------------------------TABLET------------------------------ */
@media screen and (max-width:1199px) {


}
/* ------------------------------SP------------------------------ */
@media screen and (max-width: 699px) {
.page-head{
padding-top: 70px;
}
/* ----------cat-nav---------- */
.cat-nav li a{
font-size: 1.2rem;
padding: 15px 0;
}
/* ----------img-group---------- */
.img-group li{
float: left;
width: 48%;
margin-right: 4%;
margin-bottom: 20px;
}
.img-group li:nth-child(4n){
margin-right: 0;
}
.img-group li:nth-child(2n){
margin-right: 0;
}
.img-group li div{
margin-bottom: 5px;
}
/* ----------work-box---------- */
#work-box .float-l{
  width:100%;
  margin-bottom: 0;
}
#work-box .float-r{
  width:100%;
  text-align:left;
  margin-bottom: 20px;
}
.s-img-box li{
  margin-bottom:0;
}

}