@charset "utf-8";
/* CSS Document */

.main_img img {
    width: 100%;
}
.md{
	display: none;
}
#style{
	width: 960px;
	margin: 0 auto;
	padding: 100px 0 40px 0;
}


/*モーダルウィンドウ*/

/*全て共通：hideエリアをはじめは非表示*/
.hide-area{
	display: none;
}

/*全て共通：モーダルのボタンの色を変更したい場合*/
.modaal-close:after, 
.modaal-close:before{
	background:#ccc;	
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background:#666;
}


.gallery-list{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
	margin-top: 50px;
}
.gallery-list li{
    width: 23%;
    margin-right: 2.6%;
    margin-bottom: 12px;
}
.gallery-list li img{
	width: 100%
}
.gallery-list li:nth-child(4n){
    margin-right: auto;
}

@media screen and (max-width: 970px) {
	/* 960px以下に適用されるCSS（タブレット用） */	
#style{
    width: 94%;
}
	
}

@media screen and (max-width: 550px) {
	/* 479px以下に適用されるCSS（スマホ用） */
	
#style{
    padding-top: 50px;
    padding-bottom: 50px;
}	
.gallery-list li {
    width: 48%;
    margin-right: 4%;
    margin-bottom: 10px;
}
.gallery-list li:nth-child(2n) {
    margin-right: 0;
}
}