@charset "utf-8";

/* ////////////////////////////////////////////////////////////
	File Name	coordinate.css
*/

/* ギャラリー */
#coordinate .coordinate-gallery {
	margin: 30px auto 0 auto;
	width: 900px;
}
#coordinate .coordinate-gallery .image {
	position: relative;
	float: left;
	width: 700px;
}
#coordinate .coordinate-gallery .image .base {
	width: 100%;
}
#coordinate .coordinate-gallery .image ul {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
}
#coordinate .coordinate-gallery .image ul li {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
}
#coordinate .coordinate-gallery .image ul li.current {
	z-index: 1;
}
#coordinate .coordinate-gallery .image ul li span {
	display: block;
	width: 100%; height: 100%;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
}
#coordinate .coordinate-gallery .image ul li span img {
	display: none;
}
#coordinate .coordinate-gallery ul.thumb {
	float: right;
	width: 160px;
}
#coordinate .coordinate-gallery ul.thumb li {
	margin-bottom: 13px;
}
#coordinate .coordinate-gallery ul.thumb li:last-child {
	margin-bottom: 0;
}
#coordinate .coordinate-gallery ul.thumb li p {
	position: relative;
}
#coordinate .coordinate-gallery ul.thumb li p .base {
	width: 100%;
}
#coordinate .coordinate-gallery ul.thumb li p a {
	display: block;
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
}
#coordinate .coordinate-gallery ul.thumb li p span {
	display: block;
	width: 100%; height: 100%;
	background-image: url(../images/empty.png);
	background-color: #eeeeee;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
}
#coordinate .coordinate-gallery ul.thumb li p span.none {
	position: absolute;
	top: 0; left: 0;
}
#coordinate .coordinate-gallery ul.thumb li p span img {
	display: none;
}
#coordinate .coordinate-gallery ul.thumb li p a i {
	display: none;
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	border: 3px solid #cc0000;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
#coordinate .coordinate-gallery ul.thumb li p a.current {
	cursor: default;
}
#coordinate .coordinate-gallery ul.thumb li p a.current i {
	display: block;
}

/*============================================================
	メディアクエリ （タブレット）
*/
@media screen and (max-width: 1080px) {
	/* ギャラリー */
	#coordinate .coordinate-gallery {
		width: 700px;
	}
	#coordinate .coordinate-gallery .image {
		float: none;
		width: 100%;
	}
	#coordinate .coordinate-gallery ul.thumb {
		float: none;
		margin: 0 -10px;
		padding: 20px 0 0 0;
		width: auto;
	}
	#coordinate .coordinate-gallery ul.thumb li {
		float: left;
		margin: 0;
		width: 25%;
	}
	#coordinate .coordinate-gallery ul.thumb li p {
		margin: 0 10px;
	}
}

/*============================================================
	メディアクエリ （タブレット）
*/
@media screen and (max-width: 820px) {
	#coordinate .coordinate-gallery {
		width: 100%;
	}
}

/*============================================================
	メディアクエリ （スマホ）
*/
@media screen and (max-width: 620px) {
	#coordinate .container {
		max-width: 440px;
		padding: 20px 10px;
	}
	/* ギャラリー */
	#coordinate .coordinate-gallery {
		margin: 15px 0 0 0;
	}
	#coordinate .coordinate-gallery ul.thumb {
		margin: 0 -5px;
		padding: 10px 0 0 0;
	}
	#coordinate .coordinate-gallery ul.thumb li p {
		margin: 0 5px;
	}
}