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

/* ----------------------------------------
    dress
---------------------------------------- */

#gallery {
	margin: 0 auto;
	width: 970px;
	z-index: 9;
}
#gallery li {
	cursor: pointer;
	float: left;
	display: block;
	margin-right: 10px;
	margin-bottom: 10px;
}
#gallery li img {
	display: block;
}


/*------------- modal -------------*/ 

#modal-gallery,
#modalBg {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 100;
	width: 100%;
	height: 100%;
}
#modal-gallery {
	display: none;
}
#modalBg {
	background: rgba(0,0,0,0.8);
	background-size: cover;
}
#modalBg:hover {
	opacity: 1;
}

#modalContents,
#modalNum,
.modalClose,
#modalPrev,
#modalNext {
	position: absolute;
	z-index: 100;
}
#modalContents {
	left: 50%;
	top: 50%;
	width: 500px;
	margin: -250px 0 0 -250px;
	text-align: center;
}

#modalContents .modalSection {
	display: none;
	overflow: hidden;
}

#modalContents .modalSection.on {
	display: block;
}

#modalContents ul {
	position: relative;
	left: 0;
	white-space: nowrap;
	transition: .5s;
}
#modalContents li {
	display: inline-block;
	width: 100%;
	vertical-align: top;
}
#modalContents li img {
	max-height: 500px;
}

li.ls img {
	margin-top: 70px;
}

.modalClose {
	right: 50%;
	top: 50%;
	margin: -274px -293px 0 0;
	width: 21px;
	height: 21px;
	background: url(../img/gallery/close.png) 50% 50% no-repeat;
}

#modalPrev,
#modalNext {
	top: 50%;
	width: 39px;
	height: 74px;
    margin-top: -87px;
    padding: 50px;
}
#modalPrev {
	left: 50%;
	margin-left: -350px;
	background: url(../img/gallery/prev.png) 50% no-repeat;
}
#modalNext {
	right: 50%;
	margin-right: -350px;
	background: url(../img/gallery/next.png) 50% 50% no-repeat;	
}

/* ++++++++++++++++++++++++++++++++++++++++

	for SP
	
++++++++++++++++++++++++++++++++++++++++ */

@media screen and (max-width: 767px) {
	#gallery {
		padding-bottom: 5%;
		margin: auto;
		width: 87.5%;
	}
	#gallery li {
		width: 32%;
		margin-right: 2%;
		margin-bottom: 2%;
	}
	#gallery li:nth-child(3n) {
		margin-right: 0;
	}
	
	#modalContents {
		width: 260px;
		margin: -190px 0 0 -130px;
	}
	#modalContents li img {
		max-height: auto;
	}	
	li.ls img {
		margin-top: 90px;
	}
	
	#modalPrev {
		margin-left: -215px;
	}
	#modalNext {
		margin-right: -215px;
	}
	
	.modalClose {
		right: 50%;
		top: 50%;
		margin: -225px -130px 0 0;
	}
	
}