@import "txt_style.css";

.shopWrap{
	margin-bottom: 100px;
}



.shopCateList{
	display: flex;
	gap: 10px;
	margin-bottom: 20px;
}

.shopCateList li{
	min-width: 100px;
	height: 26px;
	line-height: 22px;
	text-align: center;
	border: 1px solid #006c54;
	border-radius: 50px;
}

.shopName{
	font-size: 3rem;
	margin-bottom: 40px;
	color: #000;
}

.shopIntro{
	color: #000;
	margin-bottom: 60px;
	font-weight: normal!important;
}

.accessList li{
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 20px;
	color: #000;
}

.accessList li img{
	max-width: 26px;
}

.shopInner .boxTtl{
		margin-bottom: 40px;
}

.shopInner.pageContInnerbox{
		margin-bottom: 30px;
} 


/*------ slider----------*/
.shopImgSliderBox{
	position: relative;
	margin-bottom: 110px;
}


.shopImgSliderList{
	margin:auto;
	position: relative;
	z-index: 2;	
}

.shopImgSliderList .slick-slide li {
    width: 800px!important;          /* 画像の横幅を固定 */
    margin: 0 10px;    /* スライド間の余白 */
}

.shopImgSliderList .slick-slide img {
    width: 100%;           /* li に合わせて画像を縮小 */
    height: auto;          /* アスペクト比維持 */
}

.arrows_pos{
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 860px;
	z-index: 2;
}

.arrows_pos .arrow{
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	cursor: pointer;
	max-width: 50px;	
}

.arrows_pos .arrow:hover{
	opacity: 0.7;
}

.arrows_pos .arrow.prev{
	left: 0;
}	

.arrows_pos .arrow.next{
	right: 0;
}
 

.shopImgSliderList .slick-dots {
	bottom: -50px;
}

.shopImgSliderList .slick-dots li.slick-active button:before
{
    opacity: 1;
    color: #006c54;
}


/* Media Queries ================================================== */
/*896*/
@media screen and (max-width: 896px) {


.shopName {		
	margin-bottom: 20px;
}

.shopIntro {
  margin-bottom: 30px;
}


.shopInner .boxTtl {
  margin-bottom: 20px;
}



/*------ slider----------*/

	.shopImgSliderBox {
	  margin-bottom: 80px;
	}


	.shopImgSliderList {
		max-width: calc(100% - 10px - 10px);	
	}

	.shopWrap .btnCommon,
	.shopWrap .btnCommonBlank{
		width: 100%;
	}	

	.shopImgSliderList .slick-slide li {
		    margin: 0;
		    padding: 0;
		    width: 100%!important;
	}

	 .arrows_pos {
	    position: absolute;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    margin: auto;
	    width: calc(100% - 20px);
	    height: 40px;
	    z-index: 3;
	  }

	.arrows_pos .arrow{
		max-width: 40px;	
	}


}