@charset "UTF-8";


/* ------------------------------
	.img_head_box
------------------------------ */
.img_head_box{
	background: url(../img/cafeandbar/pc_cafe_head_bg.jpg) no-repeat center center;
	background-size: cover;
}


@media screen and (max-width: 1050px){
}


@media screen and (max-width: 768px){
  .img_head_box {
    background-image: url('../img/cafeandbar/sp_cafe_head_bg.jpg');
  }
}



/* ------------------------------
	.cafeandbar
------------------------------ */
.cafeandbar .lead{
	padding: 40px 0 55px;
}

.cafeandbar .lead .ttl{
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 2.2;
	letter-spacing: 0.2em;
}

.cafeandbar .lead .txt{
	margin-top: 10px;
	font-size: 1.2rem;
	letter-spacing: 0.2em;
}

.menu .flex + .flex{
	margin-top: 60px;
}

.menu .flex:first-of-type .menu_box + .menu_box{
	margin-top: 30px;
}

.menu .flex > div + div{
	margin-left: 10px;
}

.menu_box{
	flex-shrink: 0;
	width: 320px;
}

.menu .ttl{
	margin-bottom: 20px;
	font-size: 1.2rem;
	letter-spacing: 0.2em;
}
.menu .ttl .txt_up{
	font-size: 1.8rem;
}

.menu_box .menu_ttl{
	padding: 8px 15px;
	margin-bottom: 10px;
	background-color: #815f55;
	text-transform: uppercase;
	font-size: 1.5rem;
	color: #fff;
	letter-spacing: 0.2em;
}

.menu_box dl{
	display: flex;
	justify-content: space-between;
	padding: 8px 0;
	border-bottom: 1px dotted #767777;
}

.menu_box dt,
.menu_box dd{
	line-height: 1.3;
	letter-spacing: 0.2em;
	font-size: 1.2rem;
}

.menu_box dd::before{
	content: "¥ ";
}

.menu_open{
	width: 240px;
}

.menu_open .open_ttl{
	padding-bottom: 1em;
	margin-bottom: 0.5em;
	line-height: 1.3;
	letter-spacing: 0.3em;
	font-size: 1.2rem;
	border-bottom: 1px solid #767777;
}

.menu_open .open_ttl span{
	font-size: 1.8rem;
}
.menu_open p{
	padding: 10px 0;
	line-height: 1.3;
	font-size: 1.2rem;
	border-bottom: 1px dotted #767777;
}
.menu_open p span:first-child{
	display: inline-block;
	width: 4.5em;
	letter-spacing: 0.2em;
}
.menu_open p .min{
	font-size: 1.0rem;
	margin-left: 0.5em;
}

.menu_slider{
	position: relative;
	z-index: 1;
	width: 600px;
}

.menu_slider .img img{
	width: 100%;
}

.menu_slider.slick-dotted.slick-slider{
	margin-bottom: 0;
}

.menu_slider .slick-arrow{
	position: absolute;
	z-index: 2;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 25px;
	cursor: pointer;
}
.menu_slider .prev_arrow{
	left: 20px;
}
.menu_slider .next_arrow{
	right: 20px;
}

.menu_slider .slick-dots{
	z-index: 2;
	bottom: 20px;
}

.menu_slider .slick-dots li{
	width: 7px;
	height: 7px;
	margin: 0 7px;
}
.menu_slider .slick-dots li button{
	content: "";
	width: 100%;
	height: 100%;
	padding: 0;
}
.menu_slider .slick-dots li button:before{
	content: "";
	width: 100%;
	height: 100%;
	padding: 0;
	background-color: #fff;
	border-radius: 50%;
}


@media screen and (max-width: 970px){
	.menu .flex{
		flex-wrap: wrap;
	}

	.menu .flex + .flex{
		margin-top: 40px;
	}

	.menu .flex:first-of-type{
		width: 100%;
	}

	.menu .flex:first-of-type > div{
		order: 2;
		width: 100%;
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
	}

	.menu_box{
		width: 48.5%;
	}
	.menu .flex > div + div{
		margin-left: 0;
	}

	.menu .flex .menu_box + .menu_box{
		margin-top: 0;
		margin-left: 3%;
	}

	.menu .flex .menu_open{
		margin: 40px auto 0;
	}

	.menu_slider{
		order: 1;
	}
	.menu_slider.slick-dotted.slick-slider{
		margin: 0 auto 40px;
	}
}


@media screen and (max-width: 768px){
	.cafeandbar .lead{
		padding-bottom: 45px;
	}

	.cafeandbar .lead .ttl{
		font-size: 1.6rem;
		line-height: 1.8;
	}

	.cafeandbar .lead .txt{
		margin-top: 10px;
	}

	.menu_box{
		width: 100%;
	}

	.menu .flex:first-of-type > div{
		flex-wrap: wrap;
	}

	.menu .flex:first-of-type .menu_box + .menu_box{
		margin-top: 35px;
		margin-left: 0;
	}
	.menu .flex + .flex{
		margin-top: 35px;
	}

	.menu .flex .menu_box + .menu_box{
		margin-top: 35px;
		margin-left: 0;
	}

	.menu .ttl .txt_up{
		font-size: 1.6rem;
	}

	.menu_box .menu_ttl{
		padding: 10px 12px;
		font-size: 1.4rem;
	}

	.menu .flex .menu_open{
		margin: 35px auto 0;
	}

	.menu_open .open_ttl span{
		font-size: 1.6rem;
	}

	.menu_slider{
		width: 100%;
	}
	.menu_slider.slick-dotted.slick-slider{
		margin-bottom: 40px;
	}

	.menu_slider .slick-arrow{
		width: 15px;
	}

	.menu_slider .prev_arrow{
		left: 3%;
	}
	.menu_slider .next_arrow{
		right: 3%;
	}
	.menu_slider .slick-dots{
		bottom: 15px;
	}
}