@charset "utf-8";

/*============================
mainArea
============================*/

.mainPanel { margin-top: 25px; height: 400px; width: 100%; background: url(../../imgFile/bg_about.jpg) no-repeat center -140px; background-size: cover; }
.mainText { margin-top: 30px; text-align: center; line-height: 1.8; font-size: 16px; }

/*============================
contents
============================*/

.contents { margin-top: 50px; }
.contents + .contents { margin-top: 60px; }

/*title*/
.contents .contentTitle { text-align: center; }
.contents .contentTitle .text { display: inline-block; padding-bottom: 10px; border-bottom: 1px solid #aaa; text-align: center; font-size: 20px; letter-spacing: 0.2em; }

/*lead*/
.contents .lead { width: 700px; margin: 20px auto 0; font-size: 15px; }

/*title*/
.contents .info_shop { margin-top: 30px; display: table; width: 100%; }
.contents .info_shop .koma,
.contents .info_shop .space { display: table-cell; vertical-align: top; }
.contents .info_shop .koma { background: #f7f5f0; width: 31%; }
.contents .info_shop .space { width: 3.5%; }
.contents .info_shop .koma .img { height: 200px; background: url(../../imgFile/bg_info01.jpg) no-repeat center center; background-size: cover; }
.contents .info_shop .koma .img.img--02 { background: url(../../imgFile/bg_info02.jpg) no-repeat center center; background-size: cover; }
.contents .info_shop .koma .img.img--03 { background: url(../../imgFile/bg_info03.jpg) no-repeat center center; background-size: cover; }
.contents .info_shop .koma .text { padding: 20px; }
.contents .info_shop .koma .text .main { font-weight: bold; }
.contents .info_shop .koma .text .sub { margin-top: 5px; font-size: 13px; }

.contents .info_gallery { display: table; width: 100%; margin-top: 30px; }
.contents .info_gallery .img,
.contents .info_gallery .text { display: table-cell; vertical-align: top; }
.contents .info_gallery .img { width: 50%; background: url(../../imgFile/bg_gallery.jpg) no-repeat center center; background-size: cover; }
.contents .info_gallery .text { width: 50%; background: #f7f5f0; padding: 30px; }
.contents .info_gallery .text .title { display: block; padding-bottom: 10px; font-weight: bold; font-size: 15px; }


/*slider*/
.contents .slider { margin-top: 30px; padding: 30px 0 60px; background: #f7f5f0; }
.contents .slider div { text-align: center; }
.contents .slider img { width: 400px; margin: 0 auto; } 
.contents .slider button.slick-prev { position: absolute; top: 50%; margin-top: -30px; z-index: 99; }

.slick-dots { position: absolute; bottom: 30px; display: block; width: 100%; padding: 0; list-style: none; text-align: center; }
.slick-dots li { position: relative; display: inline-block; width: 20px; height: 20px; margin: 0 5px; padding: 0; cursor: pointer; }
.slick-dots li button { font-size: 0; line-height: 0; display: block; width: 20px; height: 20px; padding: 5px; cursor: pointer; color: transparent; border: 0; outline: none; background: transparent; }
.slick-dots li button:before { 
   font-family: slick;
   line-height: 20px;
   position: absolute;
   top: 0px;
   left: 0px;
   width: 20px;
   height: 20px;
   content: "•";
   text-align: center;
   opacity: 0.5;
   color: #a97;
   -webkit-font-smoothing: antialiased;
   font-size: 70px;
}
.slick-dots li.slick-active button:before  { opacity: 1; }

.slick-prev, .slick-next {
	font-size: 0;
	line-height: 0;
	position: absolute;
	top: 50%;
	display: block;
	width: 40px;
	height: 60px;
	margin-top: -30px;
	padding: 0;
	cursor: pointer;
	color: transparent;
	border: none;
	outline: none;
	background: rgba(255, 255, 255, 0.8) url(../../imgFile/icon_arrow_left.svg) no-repeat 10px center;
	background-size: 15px;
}
.slick-next { 
	right: 0; 
	background: rgba(255, 255, 255, 0.8) url(../../imgFile/icon_arrow_right.svg) no-repeat 15px center;
	background-size: 15px;
}
.slick-prev:hover, .slick-next:hover {
	opacity: 0.8;
}
.slick-prev:before, .slick-next:before {
	content: "";
}


/*----------------------------------------
　　　　　　　　以下、SP用の指定
----------------------------------------*/


@media only screen and (max-width: 640px) {

.contentArea { max-width: 100%; min-width: 100%; }
.contents .lead { width: 100%; }
.contents .contentTitle .text { font-size: 18px; }

.mainPanel { margin-top: 25px; height: 200px; width: 100%; background: url(../../imgFile/bg_about.jpg) no-repeat center center; background-size: cover; }
.mainText div { display: inline; font-size: 14px; }

.contents .info_shop,
.contents .info_shop .koma { display: block; width: 100%; }
.contents .info_shop .koma .img { height: 140px; }
.contents .info_shop .space + .koma { margin-top: 20px; }

.contents .info_gallery,
.contents .info_gallery .img, .contents .info_gallery .text { display: block; width: 100%; }
.contents .info_gallery .img { height: 140px; }
.contents .info_gallery .text { padding: 20px; }

/*.contents .slider img { width: 100%; }*/

}