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


/*詳細ページ*/
#detail{
	position: relative;
	padding-bottom: 200px;
}

#detail:after{
	content: "";
	background-image: url(../img/common/message_detail.svg);
	position: absolute;
	width: 330px;
	height: 100px;
	background-repeat: no-repeat;
	left:0;
	right: 0;
	bottom: 50px;
	margin: auto;	
}

h2.title02 .text {
	font-size: 45px;
	line-height: 2em;
	letter-spacing: 4px;
}

h2.title02 {
	position: relative;
	text-align: center;
	margin: 60px auto 90px;
}

#detail h3{
	font-size: 30px;
	letter-spacing: 3px;
	text-align: center;
	line-height: 1.5em;
	margin-bottom: 50px;
}

#detail .slider01.slick-dotted.slick-slider{
	margin-bottom: 100px;
}

#detail .slider01 .slick-dots {
	bottom: -30px;
}

#detail .slider01 .slick-dots li{
	margin: 0 10px;
}

#detail .slider01 .slick-dots li button:before {
	content: '';
	border-radius: 10px;
	width: 10px;
	height: 10px;
}

#detail .slider01 .slick-dots li.slick-active button:before {
	content: '';
	background-color: #00a199;
	border-radius: 10px;
	width: 10px;
	height: 10px;
}

#detail .slider .slick-slide .imgWrap{
	overflow: hidden;
	height: 560px;
	position: relative;
}

#detail .slider .slick-slide .imgWrap .img{
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	margin: auto;
}


#detail .slider .slick-slide img{
	width: 100%;
}

#detail #data{
	width: 850px;
	margin: 0 auto 95px;
}

#detail .dataList{
	float: left;
	width: 48%;
	margin-right: 4%;
}

#detail .dataList_type01{
	margin-right: 0;
}

#detail .dataList li{
	border-bottom: 1px solid #b2b2b2;
	padding: 15px 0;
	box-sizing: border-box;
}

#detail .dataList li .title{
	float: left;
	display: block;
	width: 25%;
	font-size: 12px;
	letter-spacing: 3px;
	line-height: 2em;
}

#detail .dataList li .data{
	position: relative;
	float: right;
	display: block;
	width: 70%;
	font-size: 15px;
	font-weight: bold;
	letter-spacing: 3px;
	line-height: 1.5em;
	font-family: "Sawarabi Mincho";/*数字のみ反映*/
}

#detail .dataList li a{
	display: block;
}


#detail .dataList li a .data:before{
	content: "";
	position: absolute;
	background-image: url(../img/common/icon_arrow01.svg);
	background-repeat: no-repeat;
	width: 10px;
	height: 10px;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
}

#detail #message{
	margin-bottom: 90px;
}

#detail #message h4{
	margin-bottom: 35px;
	letter-spacing: 2px;
	color:#00a199;
	font-size: 18px;
	text-align: center;
}

#detail #message .textWrap{
	font-size: 15px;
	line-height: 2em;
	letter-spacing: 2px;
	width: 650px;
	margin: auto;
}

#detail #other .inner{
	padding: 30px 0;
	box-sizing: border-box;
	position: relative;
}


#detail #other h4{
	font-size: 18px;
	text-align: center;
	margin-bottom: 10px;
	color: #00a199;
	letter-spacing: 2px;
}

#detail #other .slideArea{
	border-top:1px solid #ccc;
}

#detail #other .slideArea.taste,
#detail #other .slideArea.staff{
	border-bottom:1px solid #ccc;
}

#detail #other .slider02 .slick-slide img{
	width: 100%;
}

#detail #other .slideArea{
	position: relative;
}

#detail #other .slideArea h5{
	position: absolute;
	left:25px;
	top:50%;
	font-size: 13px;
	margin: auto;
}
	
#detail #other .slider02,
#detail #other .slider03{
	width: 724px;
	margin-right: 70px;
	float: right;
	box-sizing: border-box;
}

#detail #other .slider02 .slick-slide,
#detail #other .slider03 .slick-slide {
	margin: 0 15px;
}

#detail #other .slider02 .slick-prev:before,
#detail #other .slider03 .slick-prev:before{
	content: "";
	background-image: url(../img/common/icon_arrow_left.svg);
	background-repeat: no-repeat;
	background-size: cover;
	width: 25px;
	height: 50px;
	top: 7px;
	left: -30px;
}

#detail #other .slider02 .slick-next:before,
#detail #other .slider03 .slick-next:before{
	content: "";
	background-image: url(../img/common/icon_arrow_right.svg);
	background-repeat: no-repeat;
	background-size: cover;
	width: 25px;
	height: 50px;
	top: 7px;
	right: -30px;
}


#detail #other .slider02 .imgWrap,
#detail #other .slider03 .imgWrap{
	overflow: hidden;
	height: 80px;
	position: relative;
}

#detail #other .slider02 .imgWrap .img,
#detail #other .slider03 .imgWrap .img{
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	margin: auto;
}

#detail #other .taste .slider02 .imgWrap .img{
	text-align: center;
	top: 45%;
	font-size: 12px;
	color: #FFF;
	letter-spacing: 1px;
	width: 100%;
}

/*画面サイズが1400px以下の場合*/
@media screen and (max-width: 1400px) {

}

/*画面サイズが1200px以下の場合*/
@media screen and (max-width: 1200px) {	

}

/*画面サイズが1100px以下の場合*/
@media screen and (max-width: 1100px) {
	#detail #data {
		width: 80%;
	}
	
	#detail #message .textWrap {
		width: 80%;
	}
	
	#detail #other .slider02,
	#detail #other .slider03 {
		width: 600px;
	}
	
	#detail #other .slider02 .imgWrap,
	#detail #other .slider03 .imgWrap{
		height: 60px;
	}	
}

/*画面サイズが800px以下の場合*/
@media screen and (max-width: 800px) {
	#detail .slider .slick-slide .imgWrap {
		height: 450px;
	}
	
	#detail #other .slideArea h5 {
		position: relative;
		left: auto;
		top: auto;
		font-size: 18px;
		margin: 0 auto 30px;
		text-align: center;
		letter-spacing: 2px;
	}
	
	#detail #other .slider02,
	#detail #other .slider03 {
		width: 80%;
		float: none;
		margin: auto;
	}
}

/*画面サイズが680px以下の場合*/
@media screen and (max-width: 680px) {
	h2.title02 {
		margin: 60px auto 20px;
	}
	
	h2.title02 .text {
		font-size: 25px;
	}
	
	#detail h3 {
		font-size: 22px;
		letter-spacing: 2px;
	}
	
	#detail .slider .slick-slide .imgWrap {
		height: 350px;
	}
	
	#detail .slider01 .slick-dots li {
		margin: 0 5px;
	}
	
	#detail .dataList {
		float: none;
		width: auto;
		margin-right: 0;
	}
	
	#detail #message .textWrap {
		width: auto;
		font-size: 13px;
		line-height: 1.8;
	}
	
	#detail #data {
		width: auto;
	}
	
	#detail #other .slider02,
	#detail #other .slider03 {
		width: 70%;
	}
	
	#detail #other .slider02 .imgWrap,
	#detail #other .slider03 .imgWrap{
		height: 90px;
	}	
}

/*画面サイズが600px以下の場合*/
@media screen and (max-width: 600px) {
	#detail .slider .slick-slide .imgWrap {
		height: 220px;
	}
	
	#detail #other .slider02 .slick-prev:before,
	#detail #other .slider03 .slick-prev:before{
		content: "";
		top: 5px;
		left: -20px;
	}
	
	#detail #other .slider02 .slick-next:before,
	#detail #other .slider03 .slick-next:before{
		content: "";
		top: 5px;
		right: -20px;
	}
	
	#detail #other .slider02,
	#detail #other .slider03 {
		width: 80%;
	}
	
	#detail #other .slider02 .imgWrap,
	#detail #other .slider03 .imgWrap{
		height: 90px;
	}
	
	#detail:after{
		content: "";
		width: 300px;
		height: 90px;
	}
}

/*画面サイズが560px以下の場合*/
@media screen and (max-width: 560px) {

}

/*画面サイズが480px以下の場合*/
@media screen and (max-width: 480px) {

}

/*画面サイズが400px以下の場合*/
@media screen and (max-width: 400px) {

}