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

/* PC
---------------------------------------------------------------------- */

@media (min-width: 1001px) {
	
/* visual
---------------------------------------------------------------------- */
#pageTitleVox {
	width: 100%;
	height: 345px;
	background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)), url(../images/pageTitleBg.jpg) no-repeat top center;
	background-size: cover;
	position: relative;
}
#pageTitleVox .inner{
	width: 90%;
	height: 345px;
	margin: 0 auto;
	position: relative;
}

/* inner
---------------------------------------------------------------------- */	
	.restaurantbreakfast {
		padding-top: 155px;
		text-align: center;
    }
	.breakfast,
	.restaurant{
		width: 100%;
	}
	.breakfast .inner,
	.restaurant .inner{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}
	.breakfast .inner figure,
	.restaurant .inner figure{
		width: 52%;
	}
	.breakfast .inner .rightArea,
	.restaurant .inner .leftArea{
		width: 43%;
	}
	.breakfast .inner .rightArea{
		margin: 0 0 0 5%;
	}
	.breakfast .inner .menuExample{
		width: 100%;
		max-width: 1100px;
		text-align: center;
		margin: 80px auto 0;
		padding: 40px 0 60px;
		border: 1px solid #CCCCCC;
	}
	.breakfast .inner .menuExample h3{
		color: #B94047;
		font-size: 32px;
		font-weight: bold;
		font-family: 'Zen Kaku Gothic New', sans-serif;
	}
	.breakfast .inner .menuExample p{
		/* width: 800px; */
		width: 820px;
		margin: 0 auto;
		line-height: 2;
		text-align: center;
	}	
	.breakfast .inner .menuExample p.att{
		text-align: left;
	}	
	.breakfast .inner table{
		width: 100%;
		text-align: left;
		margin: 40px auto 0;
	}
	.breakfast .inner table th{
		width: 10%;
		padding-right: 20px;
		border-right: 1px solid #ccc;
	}
	.breakfast .inner table td{
		width: 90%;
		padding-left: 40px;
	}
	.breakfast .inner .txt{
		width: 90%;
		text-align: left;
	}
	.reservationBtn{
		width: 90%;
	}
	.restaurant{
		width: 100%;
		display: flex;
		margin: 0 auto;
		flex-wrap: wrap;
		max-width: 1100px;
		text-align: center;
		justify-content: flex-start;		
	}
	.restaurant li{
		width: 33.3%;
	}
	.restaurant li img{
		width: 100%;
	}
}

/* SP
---------------------------------------------------------------------- */
@media screen and (max-width:1000px){
/* visual
---------------------------------------------------------------------- */
#pageTitleVox {
	width: 100%;
	height: 250px;
	background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)), url(../images/pageTitleBg_sp.jpg) no-repeat top center;
	background-size: cover;
	position: relative;
	margin-top: -80px;
}
#pageTitleVox .inner{
	width: 90%;
	height: 250px;
	margin: 0 auto;
	position: relative;
}

/* inner
---------------------------------------------------------------------- */	
	.restaurantbreakfast {
		margin-top: 0;
		text-align: center;
    }
	.breakfast{
		width: 90%;
		margin: 0 auto;
	}
	.breakfast .inner{
		width: 100%;
	}
	.breakfast .inner figure,
	.breakfast .inner .rightArea{
		width: 100%;
	}
	.breakfast .inner .rightArea{
		margin: 0 auto;
	}
	.breakfast .inner .menuExample{
		width: 100%;
		padding: 20px;
		text-align: center;
		margin: 1em auto 0;
		border: 1px solid #CCCCCC;
	}
	.breakfast .inner .menuExample h3{
		color: #B94047;
		font-size: 24px;
		font-weight: bold;
		font-family: 'Zen Kaku Gothic New', sans-serif;
	}
	.breakfast .inner .menuExample p{
		width: 100%;
		margin: 0 auto;
		line-height: 2;
	}
	.breakfast .inner table{
		width: 100%;
		text-align: left;
		margin: 40px auto 0;
	}
	.breakfast .inner table th{
		width: 15%;
		padding-right: 5%;
		border-right: 1px solid #ccc;
	}
	.breakfast .inner table td{
		width: 75%;
		padding-left: 5%;
	}
	.restaurant{
		width: 100%;
	}
	.restaurant li{
		width: 100%;
	}
}