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

.gallery li{
	list-style:none;
}
.gallery li img{
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

/*選択するサムネイル画像の設定*/
.choice-btn{
	padding: 2%;
	background-color: #00a0e9;
}
.choice-btn li{
	width:23%!important;
	margin: 1%;
	cursor: pointer;
	outline: none;
	background:#333;
	list-style:none;
	background-color: #00a0e9;
}

/*選択されていないものは透過40%*/
.choice-btn li img{
	opacity: 0.7;
}

/*選択されているものは透過しない*/
.choice-btn li.slick-current img{
	opacity: 1;
}


@media screen and (min-width : 768px) {
/*矢印の設定*/
.slick-prev, 
.slick-next {
	position: absolute;
	z-index: 3;
	top: 42%;
	cursor: pointer;
	outline: none;
	border-top: 2px solid #00a0e9;
	border-right: 2px solid #00a0e9;
	height: 25px;
	width: 25px;
}
.slick-prev {
	left:2.5%;
	transform: rotate(-135deg);
}
.slick-next {
	right:2.5%;
	transform: rotate(45deg);
}

/*選択するサムネイル画像の設定*/
.choice-btn{
	margin: -52px 26% 3%;
	padding: 0;
	background: none;
}
.choice-btn li{
	width: 20%;
}
}






@media screen and (min-width : 769px) {
.gallery{
	min-width: 769px;
	max-width: 1120px;
	margin: auto;
	background-image: url("../images/top/galleryBg.jpg");
	background-repeat: repeat-x;
	background-size: contain;
}
.gallery li a:hover img{
	opacity: .9!important;
}
.choice-btn {
/*	margin: -52px 26% 3%;*/
}
}

@media screen and (min-width : 900px) {
.choice-btn {
	width: 50%;
	margin: -60px auto 3%;
}
}
@media screen and (min-width : 950px) {
.choice-btn {
	margin-top: -60px;
}
}

@media screen and (min-width : 1000px) {
.choice-btn {
	margin-top: -65px;
}
}

@media screen and (min-width : 1100px) {
.choice-btn {
	margin-top: -75px;
	width: 550px;
}
}

@media screen and (min-width : 1200px) {
.choice-btn {
	margin-top: -75px;
}
}