@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
body{
background-color:#fafafa;
font-family:"Roboto";
}

a {
  color: #000;
  text-decoration: none;
  padding-bottom: 1px;
}

a:hover {
  color: #d68e08;
  text-decoration: none;
  -webkit-transition: .4s;
  transition: .4s;
  padding-bottom: 0;
}

.container{
width:100%;
padding-top:50px;
overflow:hidden;
}

.container .content-center{
width:1250px;
margin:0 auto;

}

h1{
font-weight:bold;
margin-bottom:2rem;
font-size:2rem;
letter-spacing:1px;
line-height:120%;
}
.title{
font-weight:bold;
}

.galleryWrap{

}

.galleryWrap .imageWrap{
width:230px;
height:230px;
margin:0 20px 20px 0;
float:left;
text-align:center;
position:relative;
overflow:hidden;
}

.galleryWrap .imageWrap:nth-child(5n){
margin:0 0 20px 0;
}

.galleryWrap .imageWrap img{
max-width:150%;
max-height:150%;
position:absolute;
top:50%;
left:50%;
-webkit-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
width:auto;
height:auto;
}

@media screen and (min-width: 567px) and (max-width: 1249px) {
.content{color:#green;
}

body{
background-color:#fafafa;
font-family:"Roboto";
}

.container{
width:100%;
padding-top:30px;
}

.container .content-center{
width:90%;
margin:0 auto;
overflow:hidden;
}

h1{
font-weight:bold;
margin-bottom:2rem;
font-size:2rem;
letter-spacing:1px;
line-height:120%;
}
h1.small{
font-size:0.8rem;
letter-spacing:0;
}
.title{
font-weight:bold;
}

.galleryWrap{

}

.galleryWrap .imageWrap,
.galleryWrap .imageWrap:nth-child(5n){
width:23%;
height:20vw;
margin:0 2.5% 2.5vw 0;
float:left;
text-align:center;
position:relative;
overflow:hidden;
}


.galleryWrap .imageWrap:nth-child(4n){
margin:0 0 2.5vw 0;
}

.galleryWrap .imageWrap img{
max-width:150%;
max-height:150%;
position:absolute;
top:50%;
left:50%;
-webkit-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
width:auto;
height:auto;

}
}

@media screen and (max-width: 566px) {

body{
background-color:#fafafa;
font-family:"Roboto";
}

.container{
width:100%;
padding-top:3vw;
}

.container .content-center{
width:90%;
margin:0 auto;
overflow:hidden;
}

h1{
font-weight:bold;
margin-bottom:2rem;
font-size:2rem;
letter-spacing:1px;
line-height:120%;
}
h1small{
font-size:0.8rem;
letter-spacing:0;
}
.title{
font-weight:bold;
}

.galleryWrap{

}

.galleryWrap .imageWrap,
.galleryWrap .imageWrap:nth-child(4n),
.galleryWrap .imageWrap:nth-child(5n){
width:32%;
height:28vw;
margin:0 2% 2vw 0;
float:left;
text-align:center;
position:relative;
overflow:hidden;
}


.galleryWrap .imageWrap:nth-child(3n){
margin:0 0 2vw 0;
}

.galleryWrap .imageWrap img{
max-width:150%;
max-height:150%;
position:absolute;
top:50%;
left:50%;
-webkit-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
width:auto;
height:auto;

}
}