@charset "utf-8";

/*-------------- all --------------*/


.btns { display: block; width: 320px; border: 1px solid #9a8b68; padding: 25px 0; font-size: 14px; text-align: center; letter-spacing: 0.04em; color: #bdb28f; font-weight: 700; margin: 100px auto;}
.view { font-weight: 700; letter-spacing: 0.04em; color: #bdb28f; text-decoration: underline; text-decoration-color: #bdb28f; text-underline-offset: 9px;}
h3 { font-size: 20px; letter-spacing: 0.04em;}
h3 span { display: block; font-size: 50px; font-weight: 500; margin-bottom: 11px;}

.access { background: none; border-top: 1px solid #c9c9c9;}

/*-------------- fv --------------*/

#fv .fv { background: url(../images/meals/fv.jpg) no-repeat center center / cover;}
#fv h2 span { letter-spacing: 4px;}
/*------------------- restaurant -------------------*/
#restaurant {background: url(../images/meals/bg_03.png) no-repeat center center; background-size: cover;padding: 100px 0 73px;}
#restaurant h3{text-align: center; font-size: 31px; color: #bdb28f; letter-spacing: 10px;display: flex;flex-direction: column; align-items: center; padding: 0 0 45px;}
#restaurant h3 .title{font-size: 80px; color: #000; padding: 18px 0 20px; font-weight: 100;}
#restaurant h3 .logo{ /* width: 190px; height: auto; */ font-size: 0px;}
#restaurant p{text-align: center; line-height: 2; font-size: 20px;}

/*-------------- about --------------*/
.bg { background: url(../images/meals/bg_01.png) no-repeat left 30% / 447px;}
#about { position: relative; padding: 40px 0 70px; z-index: 2; text-align: center; }
#about h3 { font-size: 20px; font-weight: 500; margin-bottom: 21px;}
#about h3 span { display: block; font-size: 0px; margin: 21px 0 20px ;}
#about p { font-size: 16px; line-height: 2; letter-spacing: 0.04em; font-weight: 300; margin-bottom: 40px;}

#about .slide { overflow: hidden; padding-bottom: 20px;}
#about .slick-slider { position: relative; width: 940px; margin: 0 auto; text-align: center;}
#about .slick-slider .slick-lists { position: relative; width: 940px; margin-right: 60px;}
#about .slick-slider .slick-lists div { }
#about .slick-slider .slick-list { overflow: visible;}
#about .slick-list img { display: block; width: 100%; height: auto; margin-bottom: 12px;}
#about .slick-list p { font-size: 21px; letter-spacing: 0.04em; font-weight: 500;}
#about .slick-slider .slick-dots { bottom: -20px;}
#about .slick-slider .slick-dots li { width: 10px; height: 10px; margin: 0 5px; background-color: #c9c9c9; border-radius: 50%;}
#about .slick-slider .slick-dots li.slick-active { background-color: #8c0000;}
#about .slick-slider .slick-dots li button::before { color: transparent;}
#about .slick-prev,
#about .slick-next { width: 80px; height: 80px; z-index: 1; top: 42%;}
#about .slick-prev:before,
#about .slick-next:before { content: "";}
#about .slick-prev { background: url(../images/common/btn_01.png) no-repeat center center / 100%; left: -40px;}
#about .slick-next { background: url(../images/common/btn_02.png) no-repeat center center / 100%; right: -40px;}

/*-------------- meals --------------*/
#meals{border-bottom: 1px solid #c9c9c9; margin: 0 0 94px;}
#meals h3{display: flex;text-align: center; flex-direction: column; align-items: center; font-size: 16px; padding:0 0 18px; font-weight: 700;}
#meals h3 .logo{/* width: 69px; height: auto; font-size: 0px; */margin: 0 0 18px; font-size: 0;}
#meals h3 .tt{font-size: 30px; }
#meals p{font-size: 18px; display: flex; flex-direction: column; align-items: center; font-weight: 500; text-align: center; line-height: 210%;}
#meals p span{ font-weight: 300; font-size: 16px; padding: 2px 0 50px;}

#meals table{ margin: 0 auto 83px;width: 100%; max-width: 650px;}
#meals table th{background: #000; color: #fff; font-size: 16px; padding: 9px 0; font-weight: 500;}
#meals table tr:nth-child(1){padding: 0 0 10px;}
#meals table tr:not(:last-child){border-bottom: 1px solid #c9c9c9;}
#meals table tr td{font-size: 16px; width: 10%; line-height: 140%; padding: 21px 0;font-weight: 500; vertical-align: top;}
#meals table tr:nth-child(2) td{font-size: 16px; width: 10%; line-height: 140%; padding: 25px 0 16px;font-weight: 500;}
#meals table tr td:nth-child(2){font-size: 20px; width: calc(100% - 60%); padding: 19px 20px 19px 0;}
#meals table tr:nth-child(2) td:nth-child(2){padding: 25px 20px 16px 0;}

/*-------------- speciality --------------*/

#speciality { padding-bottom: 60px;}
#speciality h3 { text-align: center; margin-bottom: 42px; font-weight: 500;}
#speciality h3 .logo{margin: 0 0 20px;}
#speciality p{text-align: center; line-height: 190%;padding: 0 0 54px;}
#speciality .speciality {display: flex; justify-content: space-between; flex-wrap: wrap; flex-direction: row; width: 862px; margin: 0 auto;}
#speciality .speciality .box{width: 400px; height: auto;}
#speciality .speciality .box p{font-size: 20px; padding: 10px 0 30px; font-weight: 500;}
#speciality .speciality img { width: 100%; height: auto;}

/*-------------- breakfast --------------*/

#breakfast { padding: 93px 0 158px; background: url(../images/meals/bg_04.png) no-repeat center center; background-size: cover;}
#breakfast .flex { display: flex; justify-content: flex-end; max-width: 1100px; margin: 0 auto; position: relative;}
#breakfast .flex img { width: 100%; max-width: 700px; height: auto; margin-right: 54px; }
#breakfast .flex .box_1 { width: 496px;  margin: 0 0 0 auto; }

#breakfast h3 { margin-bottom: 58px; text-align: center;}
#breakfast h3 .logo{/* width: 306px; */ margin: 0 auto 20px; font-size: 0;}
#breakfast h3 .logo img { }
#breakfast h4 { font-size: 36px; font-weight: 700; letter-spacing: 0.04em; line-height: 1.333; margin-bottom: 24px;}
#breakfast p { font-size: 16px; line-height: 2; padding: 0 0 50px;}
#breakfast .box h5{font-size: 20px; border-bottom: 1px solid #b5b5b5; line-height: 190%; margin: 0 0 22px;font-weight: 500;}
#breakfast .box ul li{font-size: 16px; font-weight: 500;}
#breakfast .box ul li:not(:last-child){padding: 0 0 13px;}

#breakfast .slide { overflow: hidden; max-width: 700px; width: 100%; position: absolute; left: -14%;}
#breakfast .slick-slider { position: relative;  max-width: 700px; width: 100%;  margin: 0 auto; text-align: center; padding: 0 0 20px;}
#breakfast .slick-slider .slick-lists { position: relative;  max-width: 700px; width: 100%; margin-right: 60px;}
#breakfast .slick-slider .slick-list { overflow: visible;}
#breakfast .slick-list img { display: block; width: 100%; height: auto; margin-bottom: 12px;}
#breakfast .slick-list p { font-size: 21px; letter-spacing: 0.04em; font-weight: 500;}
#breakfast .slick-slider .slick-dots { bottom: 0px; left: 0px; width: auto;}
#breakfast .slick-slider .slick-dots li { width: 14px; height: 14px; margin: 0 20px 0 0 ; background-color: #c9c9c9; border-radius: 50%;}
#breakfast .slick-slider .slick-dots li.slick-active { background-color: #8c0000;}
#breakfast .slick-slider .slick-dots li button::before { color: transparent;}

@media only screen and (max-width: 1400px) {
	
	#breakfast .slide { left: -3%;max-width: 600px;height: auto; }
	#breakfast .slick-slider { max-width: 600px;height: auto; width: 100%;}
	#breakfast .slick-slider .slick-lists {   max-width: 600px;height: auto;  width: 100%; }
}
/* ----------------------------- mobile ------------------------------- */
@media only screen and (max-width: 768px) {
	
	/*-------------- all --------------*/
	
	.btns { display: block; width: 80%; margin: 0 auto; padding: 18px 0; font-size: 12px; background-color: #fff; margin: 50px auto;}
	.view { }
	h3 { font-size: 15px;}
	h3 span { font-size: 40px; margin-bottom: 11px;}
	
	
	/*-------------- fv --------------*/
	
	#fv .fv { background: url(../images/meals/fv_sp.jpg) no-repeat center center / cover; padding: 27% 0 27%;}
	#fv h2 .logo{/* width: 70%; */ margin: 0 auto 15px;}
	#fv h2 .logo img{width: auto; height: 25.5px;}
	#fv h2 span {font-size: 35px; margin-bottom: 15px;}
	/*------------------- restaurant -------------------*/
	#restaurant {padding: 50px 0 45px;background: url(../images/meals/bg_03_sp.png) no-repeat center bottom; background-size: 100%;}
	#restaurant h3{font-size: 18px;  padding: 0 0 12px;}
	#restaurant h3 .title{font-size: 60px;  padding: 6px 0 10px;}
	#restaurant h3 .logo{/* width:100%;max-width: 160px; height: auto; */ font-size: 0;}
	#restaurant h3 .logo img { width: auto; height: 10.5px;}
	#restaurant p{ font-size: 13px;}

	/*-------------- about --------------*/
	
	.bg { background: none;}
	#about { padding: 50px 0;}
	#about h3 { font-size: 15px; margin-bottom: 20px;}
	#about h3 .logo {/* width: 44%; */  margin:0 auto 16px;}
	#about h3 .logo img{width: auto; height: 24.5px;}
	#about p { font-size: 13px; letter-spacing: 0; margin-bottom: 28px;}
	
	#about .slick-slider { width: 100%;}
	#about .slick-slider .slick-lists { width: 100%; margin: 0 8px;}
	#about .slick-slider .slick-lists div { }
	#about .slick-list img { width: 100%; height: auto; margin-bottom: 10px;}
	#about .slick-list p { font-size: 15px; line-height: 1.667; letter-spacing: 0; margin-bottom: 35px;}
	#about .slick-slider .slick-dots { bottom: -20px;}
	#about .slick-slider .slick-dots li { margin: 0 5px;}
	#about .slick-prev,
	#about .slick-next { width: 40px; height: 40px; z-index: 1; top: 40%;}
	#about .slick-prev { left: 10px;}
	#about .slick-next { right: 10px;}
	
	/*-------------- meals --------------*/
	#meals{ margin: 0 0 50px;}
	#meals h3{ font-size: 13px; padding: 0 0 15px;}
	#meals h3 span { font-size: 35px;}
	#meals h3 .logo{/* width:16%; */ height: auto; font-size: 0; margin: 0 0 11px;}
	#meals h3 .logo img { width: auto; height: 10.5px;}
	#meals h3 .tt{font-size: 20px; }
	#meals p{font-size: 15px; line-height: 160%; }
	#meals p span{  font-size: 13px; padding: 15px 0 25px;}
	
	#meals table{ margin: 0 auto 41px; width: 95%;}
	#meals table th{font-size: 15px; padding: 8px 0;}
	
	#meals table tr td{font-size: 15px !important; width: 10%;  padding: 15px 0 0; display: block; width: 100%;}
	#meals table tr:nth-child(2) td{padding: 15px 0px 0 ; width: 100%;	}
	#meals table tr:nth-child(2) td:nth-child(2) {padding: 5px 0px 15px 15px;}
	#meals table tr td:nth-child(2){font-size: 18px !important;  padding: 5px 0px 15px 15px;width: 100%; line-height: 156%; }
	
	/*-------------- speciality --------------*/
	
	#speciality { padding-bottom: 15px; background: none; width: 95%; margin: 0 auto;}
	#speciality h3 { text-align: center; margin-bottom: 30px;}
	#speciality h3 span { font-size: 0px; width: 100%; margin-bottom: 15px;}
	#speciality h3 span img{width: auto; height: 25.5px;}
	#speciality p{font-size: 13px;padding: 0 0 20px;}
	#speciality .speciality { display: block; padding: 35px 0 28px; width: auto;}
	#speciality .speciality:nth-of-type(1) { padding-top: 0px;}
	#speciality .speciality .box { width: 100%; height: auto;}
	#speciality .speciality img { width: 100%;}

	#speciality .speciality .box p{font-size: 15px; padding: 10px 0 30px;}	
		
		
	/*-------------- breakfast --------------*/
	
	#breakfast { padding: 50px 0 42px;}
	#breakfast .flex { display: block; width: 90%; margin: 0 auto; background: none; }
	#breakfast img {width: 100%;}
	#breakfast .flex .box_1 { width: 100%;  padding: 0; }
	#breakfast h3 { font-size: 15px; margin-bottom: 20px;}
	#breakfast h3 .logo{/* width: 60%; */ margin: 0 auto 15px;  font-size: 0px;}
	#breakfast h3 span img{width: auto; height: 25.5px;}
	#breakfast h4 { font-size: 20px; line-height: 1.5; margin-bottom: 17px;}
	#breakfast p { font-size: 13px; padding: 0 0 30px	}
	#breakfast .box h5{font-size: 17px; margin: 0 0 20px; padding-bottom: 5px;}
	#breakfast .box ul li{font-size: 15px;}
	#breakfast .box ul li:not(:last-child){padding: 0 0 10px;}	
	
	#breakfast .slide {max-width: 100%; width: 100%;  position: initial; left: 0px; margin: 0 0 18px;}
	
	#breakfast .slick-slider { position: relative; max-width: 100%; width: 100%;  height: 50%;margin: 0 auto; text-align: center; padding: 0 0 20px;}
	#breakfast .slick-slider .slick-lists { position: relative; max-width: 100%; width: 100%;  margin-right: auto;}
	#breakfast .slick-slider .slick-lists div { }
	#breakfast .slick-slider .slick-list { overflow: visible; padding: 0px !important;}
	#breakfast .slick-list img { display: block; width: 100%; height: auto; margin-bottom: 12px;}
	#breakfast .slick-list p { font-size: 21px; letter-spacing: 0.04em; font-weight: 500;}
	#breakfast .slick-slider .slick-dots { bottom: 0px; left: 45%; right: auto;width: auto;}
	#breakfast .slick-slider .slick-dots li { width: 14px; height: 14px; margin: 0 5px ; background-color: #c9c9c9; border-radius: 50%;}
	#breakfast .slick-slider .slick-dots li.slick-active { background-color: #8c0000;}
	#breakfast .slick-slider .slick-dots li button::before { color: transparent;}	
}