@charset "UTF-8";

/*PC*/
@media print, screen and (min-width: 768px) {
#hed{
}

#hed .hed_bg {
background: url("../images/example/hed_bg.jpg") center no-repeat;
background-size: auto;
background-size: cover;
width: 100%;
height: 400px;
position: relative;
}

#example {
position: relative;
width: 100%;
overflow: hidden;
margin-bottom: 150px;
}

#example .is-current {
margin-top: 100px;
}

#example .example_list{
position: relative;
width: 1200px;
margin: auto;
display: flex;
flex-wrap: wrap;
}

#example .example_list li{
width:5.73%;
height:80px;
margin-right: 1%;
margin-bottom: 1%;
overflow: hidden;
}

#example .example_list li img{
object-fit: contain;
transform: scale(2.5);
}

#example .example_list li:nth-child(15n){
margin-right: 0;
}


.lum-lightbox-inner {
bottom: 15%;
left: 15%;
right: 15%;
top: 15%;
}

.lum-lightbox-inner img {
width: 50%;
height: auto;
}

/*
---------------------------------*/



}
/*sp*/
@media only screen and (max-width: 767px) {
#hed .hed_bg {
background: url("../images/example/hed_bg.jpg") center no-repeat;
background-size: auto;
background-size: cover;
width: 100%;
height: 350px;
position: relative;
}

#example {
position: relative;
width: 100%;
margin-bottom: 150px;
}

#example .is-current {
margin-top: 60px;
}

#example .example_list{
position: relative;
width: 90%;
margin: auto;
display: flex;
flex-wrap: wrap;
}

#example .example_list li{
width:22.75%;
height: 60px;
margin-right:3%;
margin-bottom: 3%;
overflow: hidden;
}


#example .example_list li img{
object-fit: cover;
}


#example .example_list li:nth-child(4n){
margin-right: 0;
}
.lum-lightbox-inner {
bottom: 10%;
left: 10%;
right: 10%;
top: 10%;
}

.lum-lightbox-inner img {
width: 80%;
height: auto;
}

}