@charset "utf-8";

body {
  background: url("../images/cmn-images/bg2.png") 50% 50% no-repeat;
  background-attachment: fixed;
}
#page-title {
  background: url("../images/works-images/page-title.jpg") 50% 40% no-repeat;
  background-size: cover;
}

/* ----------------------------------------
 gallery
------------------------------------------- */
#gallery ul{
  overflow:hidden;
}
#gallery li{
  float:left;
  width:18%;
  font-size:1.3rem;
  text-align:center;
  margin-right: 2.5%;
  margin-bottom: 30px;
}
#gallery li:nth-child(5n){
  margin-right: 0;
}
/*#gallery .img-box{
position: relative;
padding-top: 80%;
margin-bottom: 10px;
}
#gallery .img-box img{
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
top: 0;
left: 0;
}*/
#gallery .img-box{
  display:block;
  width:100%;
  padding-top:75%;
  position:relative;
  margin-bottom:10px;
}
#gallery .img-box img{
  position:absolute;
  height:auto;
  width:auto;
  max-width:100%;
  max-height:100%;
  left: 50%;
  top: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
  margin-bottom:6px;
  -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;
}
.listgroup li a:hover img{
  opacity: 0.4;  
  filter: alpha(opacity=40);
}
/* ----------------------------------------
detail
------------------------------------------- */
#detail .float-l{
  width:35%;
}
#detail .float-r{
  width:60%;
}
#detail h3{
  margin-bottom: 15px;
}
/* ----------------------------------------
detail-gallery
------------------------------------------- */
#detail-gallery ul{
  width:100%;
  overflow:hidden;
}
#detail-gallery li{
  float:left;
  position:relative;
  width:48%;
  text-align:center;
  margin:0 4% 30px 0;
}
#detail-gallery li:nth-child(2n){
  margin:0 0 30px 0;
}
#detail-gallery .img-box{
  display:block;
  width:100%;
  padding-top:75%;
  position:relative;
  margin-bottom:10px;
}
#detail-gallery .img-box img{
  position:absolute;
  height:auto;
  width:auto;
  max-width:100%;
  max-height:100%;
  left: 50%;
  top: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
  margin-bottom:6px;
  -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;
}
#detail-gallery .img-box img:hover{
  opacity: 0.4;  
  filter: alpha(opacity=40);
}
/* ----------------------------------------
pageNav
------------------------------------------- */
ul.pageNav {
	margin: 0 0 60px;
	text-align: center;
}

ul.pageNav li {
	display: inline;
	margin: 0 2px;
	padding: 0;
}

ul.pageNav li a {
	display: inline-block;
	margin-bottom: 5px;
	padding: 1px 8px;
	border: 1px solid #aaa;
	text-decoration: none;
	vertical-align: middle;
}

ul.pageNav li .current_page_number {
	display: inline-block;
	margin-bottom: 5px;
	padding: 1px 8px;
	color: #fff;
	background-color: #000;
	border: 1px solid #000;
	text-decoration: none;
	vertical-align: middle;
}


/* =======================
  PC
======================== */
@media screen and (min-width: 1200px) {}
/* =======================
  TABLET
======================== */
@media screen and (max-width:1199px) {
}
/* =======================
  SP
======================== */
@media screen and (max-width: 699px) {
/* ----------------------------------------
 gallery
------------------------------------------- */
#gallery li{
  width:48%;
  margin-right: 4%;
  margin-bottom: 20px;
}
#gallery li:nth-child(5n){
  margin-right: 4%;
}
#gallery li:nth-child(2n){
  margin-right: 0;
}

/* ----------------------------------------
detail
------------------------------------------- */
#detail .float-l{
  float: none;
  width:100%;
  margin-bottom: 20px;
}
#detail .float-r{
  float: none;
  width:100%;
}
/* ----------------------------------------
detail-gallery
------------------------------------------- */
#detail-gallery li{
  margin:0 4% 15px 0;
}
#detail-gallery li:nth-child(2n){
  margin:0 0 15px 0;
}

}