@charset "utf-8";
/* CSS Document */
body{	
	background-color:#12301b;
	color:#FFCD2E;
	min-width:950px;
}
/* mainvisual */
#mainvisual{
}
.mainTopLine{
	position:absolute;
	width:100%;
	height:120px;
	background:linear-gradient(0deg,rgba(18,48,27,0),rgba(18,48,27,0.8)) !important;
	background-repeat:repeat-x;
	z-index:1;
}
.mainBottomLine{
	position:absolute;
	background-image:url(/public/img/main-bottom-line.png);
	background-repeat: no-repeat;
	background-size:100% 243px;
	background-position:center bottom;
	height:350px;
	width:100%;
	margin-top:251px;
	z-index:1;
}
/* SLIDE */
#slider_wrapper .mainTitle{
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
	height:600px;
}
#slider_wrapper .slide1{
	background-image:url(/public/img/slide/mainslide01.webp);
}
#slider_wrapper .slide2{
	background-image:url(/public/img/slide/mainslide02.webp);
}
#slider_wrapper .slide3{
	background-image:url(/public/img/slide/mainslide03.webp);
}
#slider_wrapper .slide4{
	background-image:url(/public/img/slide/mainslide04.webp);
}
#slider_wrapper .slide5{
	background-image:url(/public/img/slide/mainslide05.webp);
}
.slick-dots{
	background-image:url(/public/img/header-bg.jpg);
	background-position:center center;
	background-size:100% 100%;
	background-repeat:no-repeat;	
}
.slick-dots li button:before{
	font-size: 12px;
	color: #12301b;
}
.slick-dots li.slick-active button:before{
	color: #12301b;
}
.recomandMenu{
	position:absolute;
	border-radius:5px;
	padding:10px;
	width:350px;
	top:650px;
	right:100px;
	background-color:#12301b;
	line-height:1.5;
}
.recomandMenu p{
	font-size:20px;
	font-weight:bold;
	float:left;
	color:#FFCD2E;
	padding:13px 0;
	padding-left:40px;
	background-image:url(/public/img/icon-recomend.svg);
	background-size:30px 30px;
	background-position:left center;
	background-repeat:no-repeat;
}
.recomandMenu p span{
	display:block;
	color:#FFF;
	font-weight:normal;
}
.recomandMenu img{
	float:right;
	width:130px;
}
#hny{
	max-width:700px;
	width:90%;
	margin:0 auto;
	margin-bottom: 30px;
	text-align:center;	
}
#thaiSelected{
	max-width:600px;
	width:90%;
	margin:0 auto;
	text-align:center;
}
#thaiSelected p{
	margin-top:5px;
	line-height:1.5;
}
#thaiSelected span{
	display:inline-block;
}

#aboutUs{
	padding:100px 0;
	width:100%;
	margin:0 auto;
}
.aboutUsWrapper{
	width:90%;
	margin-left:10%;
}
.aboutUsWrapper .sideTitle{
	position:absolute;
	color:#0f5b2f;
	font-size:20px;
	font-weight:500;
	line-height:2;
	padding:20px 0;
	margin-left:-40px;
  	writing-mode: vertical-rl;
	background: linear-gradient(180deg, #e7b43f 10%, #e2d876);
}
_::-webkit-full-page-media, _:future, :root .aboutUsWrapper .sideTitle,
_::-webkit-full-page-media, _:future, :root .whyToongtongWrapper .sideTitle,
_::-webkit-full-page-media, _:future, :root .chefWrapper .sideTitle {
	display:none;
}
.aboutUsWrapper h2{
	font-weight:500;
	margin-bottom:20px;
}
.aboutUsWrapper p{
	line-height:1.8;
	font-size:16px;
	text-align:left;
	color:#FFF;
}
#aboutUs .columTwo{
	background-color:#082410;
    display: flex;
    justify-content: flex-end;
    flex-direction: row-reverse;
}
#aboutUs .columTwo .colL{
	padding:50px;
	text-align:center;
	width: 150%;
}
#aboutUs .columTwo .colR{
	flex-basis: 250%;
	background-image:url(/public/img/top/about-us.webp);
	background-size:cover;
	background-position:center center;
	background-repeat:no-repeat;
}

#aboutUs.toongtong .columTwo .colR{
	background-image:url(/public/img/top/welcome.webp);
	background-position: top center;
}
#whyToongtong.suwirun .columTwo .colL{
	background-image:url(/public/img/suwirun/original-olong-bland.webp);
}

@media only screen and (max-width : 1300px) {
	#aboutUs .columTwo .colR{
		background-size:120% auto;
	}

}

.youtube {
    margin:30px auto;
    text-align: center;
}
.youtube iframe {
    width: 890px;
    height: 500px;
}

@media only screen and (max-width : 1300px) {
	.youtube iframe{
		width:880px;
		height:498px;
	}
}
@media only screen and (max-width: 1000px) {
	.youtube iframe{
		width:800px;
		height:453px;
	}
}

@media only screen and (max-width: 910px) {
	.youtube iframe{
		width:700px;
		height:396px;
	}
}

@media only screen and (max-width: 810px) {
	.youtube iframe{
		width:600px;
		height:340px;
	}
}

@media only screen and (max-width: 750px) {
	.youtube iframe{
		width:500px;
		height:283px;
	}
}
@media only screen and (max-width: 610px) {
	.youtube iframe{
		width:400px;
		height:227px;
	}
}

@media only screen and (max-width: 510px) {
	.youtube iframe{
		width:350px;
		height:198px;
	}
}
@media only screen and (max-width: 410px) {
	.youtube iframe{
		width:350px;
		height:198px;
	}
}
@media only screen and (max-width: 350px) {
	.youtube iframe{
		width:300px;
		height:170px;
	}
}

#aboutUs .gotoShop,
#whyToongtong .gotoShop{	
    display: flex;
	margin:50px auto 0;
}
#aboutUs .gotoShop div,
#whyToongtong .gotoShop div{
	flex-grow: 1;
}
#aboutUs .gotoShop div div,
#whyToongtong .gotoShop div div{
	color:#0f5b2f;
	background-color:#ffcb05;
	padding:10px 20px;
	width:80%;
	max-width:300px;
	margin:0 auto;
	font-size:16px;
	text-align:center;
	font-weight:500;
	line-height:1.7;
	border:2px solid #ffcb05;
	transition: all 0.3s ease-in-out 0s;
}
#aboutUs .gotoShop div a:hover div,
#whyToongtong .gotoShop div a:hover div{
	color:#ffcb05;
	background-color:#0f5b2f;
	transition: all 0.3s ease-in-out 0s;
}
#aboutUs .gotoShop div div span,
#whyToongtong .gotoShop div div span{
	display:block;
	font-size:12px;
}

#whyToongtong{
	width:100%;
	margin-bottom:100px;
}
.whyToongtongWrapper{
	width:90%;
	margin-right:10%;
}
.whyToongtongWrapper .sideTitle{
	position:absolute;
	color:#0f5b2f;
	font-size:20px;
	font-weight:500;
	line-height:2;
	padding:20px 0;
	margin-left:90%;
  	writing-mode: vertical-rl;
	background: linear-gradient(180deg, #e7b43f 10%, #e2d876);
}
.whyToongtongWrapper h2{
	text-align:center;
	font-weight:500;
	margin-bottom:20px;
}
.whyToongtongWrapper p{
	line-height:1.8;
	font-size:16px;
	text-align:left;
	color:#FFF;
}
#whyToongtong .columTwo{
    display: flex;
	min-height:700px;
	background-color:#082410;
}
#whyToongtong .columTwo .colR{
	padding:50px;
	width: 90%;
}
#whyToongtong .columTwo .colL{
	flex-basis: 100%;
	background-image:url(/public/img/why-bg.webp);
	background-size:cover;
	background-position:center center;
}

#mainfood{
	background-color:#FFF;
}
.mainfoodWrapper{
	max-width:1100px;
	width:100%;
	margin:0 auto;
    display: flex;
	color:#0f5b2f;
}
.mainfoodWrapper h3{
	font-size:20px;
	font-weight:bold;
	line-height:1.5;
	color:#0f5b2f;
	margin-top:30px;
	margin-bottom:30px;
	text-align:center;
}
.mainfoodWrapper h3 span{
	font-size:14px;
	font-weight:normal;
	display:block;
}
.mainfoodWrapper .subMenu{
	padding:50px 20px;
}
.mainfoodWrapper .subMenu p{
	margin-bottom:30px;
}
.mainfoodWrapper a .gotoMenu div{
	color:#0f5b2f;
	text-align:center;
	padding:10px;
	font-weight:500;
	max-width:250px;
	margin:0 auto;
	border-bottom:1px solid #0f5b2f;
	border-top:1px solid #0f5b2f;
	transition: all 0.3s ease-in-out 0s;
}
.mainfoodWrapper a:hover .gotoMenu div{
	color:#ffcb05;
	background-color:#0f5b2f;
	transition: all 0.3s ease-in-out 0s;
}
/* Chef */
#ourChef{
	color:#FFF;
}
.chefTitle{
    width: 90%;
	max-width:250px;
    margin: 20px auto 50px;
	padding:10px 20px;
	text-align:center;
	border-bottom:double rgba(255,255,255,0.5);
	border-top:double rgba(255,255,255,0.5);
}
.chefTitle h2{
	display:inline;
	text-align:center;
	font-weight:500;
	line-height:1.5;
	color:#FFF;
	transition: all 0.3s ease-in-out 0s;
}
.chefTitle span.topH2{
	display:block;
	color:#FFF;
	font-size:13px;
	font-weight:normal;
	margin-left:0px;
}
.chefTitle span{
	display:inline;
	margin-left:20px;
	color:#FFF;
	font-size:14px;
	font-weight:normal;
	transition: all 0.3s ease-in-out 0s;
}

.chefWrapper{
	max-width:900px;
	width:90%;
	margin:0 auto;
	margin-bottom:50px;
}
.chefWrapper .sideTitle{
	position:absolute;
	line-height:2;
	margin-left:-40px;
	letter-spacing:10px;
  	writing-mode: vertical-rl;
}
#ourChef .columTwo{
    display: flex;
	background-color:#0f5b2f;
}

#ourChef .columTwo .colL{
	width:50%;
}
#ourChef .columTwo .colR{
	width:50%;
	padding:30px;
}
#ourChef .columTwo .colR li{
	list-style:disc;
	margin-left:20px;
}
#ourChef h3 span{
	display:block;
	font-weight:normal;
	font-size:16px;
}
#ourChef h3{
	font-weight:500;
	line-height:1.5;
	margin-bottom:30px;
	font-size:21px;
}
/* Reserve */
.reserveTop .reserveWrapper{
	padding-top:30px;
}
.reserveWrapper{
	width:90%;
	max-width:800px;
	margin:0 auto;
	padding:70px 0;
    display: flex;
}
.reserveWrapper .reserveBtn{
	width:100%;
	box-sizing:border-box;
	margin:0 auto;
	padding:0 20px;
}
.reserveWrapper .reserveBtn a div{
	color:#0f5b2f;
	padding:10px;
	text-align:center;
	background-color:#ffcb05;
	border:2px solid #ffcb05;
	line-height:1.5;
	transition: all 0.3s ease-in-out 0s;
}
.reserveWrapper .reserveBtn a:hover div{
	color:#ffcb05;
	background-color:#0f5b2f;
	transition: all 0.3s ease-in-out 0s;
}
.reserveWrapper .reserveBtn a div p{
	font-size:20px;
	font-weight:500;
}

/* info */
.infoTitle{
    width: 90%;
	max-width:250px;
    margin: 20px auto;
	padding:10px 20px;
	text-align:center;
	border-bottom:double rgba(255,255,255,0.5);
	border-top:double rgba(255,255,255,0.5);
}
.infoTitle a h2{
	display:inline;
	text-align:center;
	font-weight:500;
	line-height:1.5;
	color:#FFF;
	transition: all 0.3s ease-in-out 0s;
}
.infoTitle a:hover h2,
.infoTitle a:hover h2 span{
	color: #ffcb05 !important;
	transition: all 0.3s ease-in-out 0s;
}
.infoTitle span.topH2{
	display:block;
	color:#FFF;
	font-size:13px;
	font-weight:normal;
	margin-left:0px;
}
.infoTitle span{
	display:inline;
	margin-left:20px;
	color:#FFF;
	font-size:14px;
	font-weight:normal;
	transition: all 0.3s ease-in-out 0s;
}
.info-item{
	box-sizing:border-box;
	color:#FFF;
    width: 90%;
	max-width:800px;
    margin: 0px auto;
    padding: 30px;
	font-size:16px;
	border-bottom:1px dashed rgba(255,255,255,0.5);
	line-height:1.6em;
	transition: all 0.3s ease-in-out 0s;
}
.info-item:hover{
	background-color:rgba(255,255,255,0.1);
	transition: all 0.3s ease-in-out 0s;
}
.info .infoTxtTitle{
	color:#FFCD2E;
	display:inline;
}
.info .date{
	display: inline-block;
}
.info .desc{
	display: -webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.info a{
	color:#FFCD2E;
}
.info .desc a:hover{
	text-decoration:underline;
}
/* deli */


.deli .txtTitle{
	text-align:center;
	font-weight:bold;
	font-size:18px;
	margin-bottom:20px;
}
.deli table{
	max-width:700px;
	margin:0 auto;
}
.deli table th{
	vertical-align:top;
	text-align:right;
	width:27.5%;
	padding-right:2.5%;
}
.deli table td{
	width:70%;
}

.deli .twoCol{
	margin-top:30px;
}
.deli .colL{
	float:left;
	width:49%;
}
.deli .colR{
	float:right;
	width:49%;
}
.deli .twoCol .txtDetail{
	font-size:14px;
}

/* info */
#info{
	background-color:#FFCD2E;
	color:#12301b;
	text-align:center;	
    width: 800px;
    margin: 0 auto;
    padding: 30px;
    margin-top: 30px;
    border-radius: 10px;
}
#info p{
	margin:0 auto;
	text-align:left;
	font-size:18px;
}
#info p.title{
	font-size:28px;
	font-weight:bold;
}
#info p.subtitle{
	font-size:22px;
	font-weight:bold;
}
#takeout{
	/*text-align:center;*/
}
#takeout img{
	width:90%;
	max-width:400px;
}
#coupon{
	color:#12301b;
}
#coupon a p{
	color:#FFCD2E;
}
#coupon img{
	width:90%;
	max-width:400px;
	border-radius:10px;
}

.noprice{
	text-decoration:line-through;
	font-size:16px;
	color:#666;
}
.priceoff{
	font-size:22px;
	color:red;
	font-weight:bold;
}

#fixReserve{
	position:fixed;
	top:30%;
	right:0;
	color:#0f5b2f;
	background-color:#ffcb05;
	/*background: linear-gradient(135deg, #955E16, #F4E77F, #955E16);*/
	padding:20px 0;
	font-size:26px;
	font-weight:500;
	border:2px solid #12301b;
	border-right:none;
	z-index:9;
	transition: all 0.3s ease-in-out 0s;
}
#fixReserve span{
    writing-mode: vertical-rl;
}
a:hover #fixReserve{
	color:#ffcb05;
	background-color:#0f5b2f;
	border-color:#ffcb05;
	transition: all 0.3s ease-in-out 0s;
}

/*------- SMART PHONE ------*/
@media only screen and (max-width : 450px) {
	body{
	  min-width: inherit;
  }
	.mainTopLine{
		height:50px;
	}
	#mainvisual{
		margin-top:61px;
	}
	.mainBottomLine{
		background-size:150% 100px;
		height:100px;
		margin-top:201px;
	}
	.recomandMenu{
		display:none;
	}
	#slider_wrapper .mainTitle{
		background-size:cover;
		height:300px;
	}
	#slider_wrapper .slide2{
		background-image:url(/public/img/slide/mainslide02-sp.webp);
	}
	#slider_wrapper .slide3{
		background-image:url(/public/img/slide/mainslide03-sp.webp);
	}
	#slider_wrapper .slide4{
		background-image:url(/public/img/slide/mainslide04-sp.webp);
	}
	#slider_wrapper .slide5{
		background-image:url(/public/img/slide/mainslide05-sp.webp);
	}
	#slider_wrapper .slide6{
		background-image:url(/public/img/slide/mainslide06-sp.webp);
	}
	#slider_wrapper .slide7{
		background-image:url(/public/img/slide/mainslide07-sp.webp);
	}
	#slider_wrapper .slide8{
		background-image:url(/public/img/slide/mainslide08-sp.webp);
	}
	#slider_wrapper .slide9{
		background-image:url(/public/img/slide/mainslide09-sp.webp);
	}
	#slider_wrapper .slide10{
		background-image:url(/public/img/slide/mainslide10-sp.webp);
	}
	#thaiSelected{
		text-align:left;
	}
	#thaiSelected span{
		display:inline;
	}
/* Info */
	.infoTitle a h2{
		font-size:20px;
	}
	.infoTitle span.topH2{
		font-size:12px;
	}
	.info-item{
		font-size:14px;
		padding:5%;
	}
	
	#aboutUs{
		padding:50px 0;
		text-align:left;
	}
	.aboutUsWrapper,
	.whyToongtongWrapper{
		width:100%;
		margin-left:0;
	}
	.aboutUsWrapper .sideTitle,
	.whyToongtongWrapper .sideTitle{
		font-size:18px;
		line-height:0;
		margin-left:0;
		padding:3px 20px;
		position:relative;
		writing-mode:horizontal-tb;
		display: none;
	}
	#aboutUs .columTwo{
		display:block;
	}
	.aboutUsWrapper h2,
	.whyToongtongWrapper h2{
		text-align:left;
		font-size:18px;
	}
	.aboutUsWrapper p{
		line-height:1.8;
		font-size:14px;
	}
	.whyToongtongWrapper p{
		line-height:1.8;
		font-size:14px;
		margin-bottom:30px;
	}
	
	#aboutUs .columTwo .colL{
		float:none;
		width:100%;
		padding:5%;
		box-sizing:border-box;
	}
	#aboutUs .columTwo .colR,
	#aboutUs.toongtong .columTwo .colR{
		float:none;
		width:100%;
		height:300px;
		background-position:center;
		background-size: cover;
	}
	#aboutUs.toongtong .columTwo .colR{
		height:400px;
		background-size: cover;
		background-position:top;
	}
	#aboutUs .gotoShop,
	#whyToongtong .gotoShop{
		display:block;
	}
	#aboutUs .gotoShop div.gotoKashiwa,
	#whyToongtong .gotoShop div.gotoKashiwa{
		margin-bottom:30px;		
	}
	
	#aboutUs .gotoShop div div,
	#whyToongtong .gotoShop div div{
		text-align:center;
	}
	#whyToongtong{
		margin-bottom:0;
	}
	#whyToongtong .columTwo{
		display:block;
		min-height:inherit;
	}
	#whyToongtong .columTwo .colR{
		float:none;
		width:100%;
		padding:5%;
		box-sizing:border-box;
	}
	#whyToongtong .columTwo .colL{
		float:none;
		width:100%;
		height:200px;
	}
	.whyToongtongWrapper h2{
		margin-top:0;
	}
	
	.mainfoodWrapper{
		display:block;
	}
	.reserveWrapper{
		display:block;
		padding:50px 0;
	}
	.reserveWrapper .reserveBtn{
		padding:0;
	}
	.reserveWrapper .reserveBtn.reserveKitamatsudo{
		margin-bottom:20px;
	}
	.reserveWrapper .reserveBtn a div{
		line-height:1.2;
	}


	#ourChef .columTwo{
		display:block;
		width:100%;
		margin:0 auto;
	}
	#ourChef .columTwo .colL{
		width:90%;
		margin:0 5%;
		padding:5% 0;
		box-sizing:border-box;
		border-bottom:1px dashed rgba(255,255,255,0.5);
	}
	#ourChef .columTwo .colR{
		width:100%;
		padding:5% 5% 5%;
		box-sizing:border-box;
	}
	.chefWrapper .sideTitle{
		display:none;
	}

/* News */
	#info{
    width: 80%;
    padding: 5%;
    border-radius: 5px;
}
#info p{
	font-weight:normal;
	font-size:14px;
}
#info p.title{
	font-weight:bold;
	font-size:20px;
}
#info p.subtitle{
	font-size:18px;
	font-weight:bold;
}
.noprice{
	font-size:13px;
}
.priceoff{
	font-size:18px;
}

/* deli */

.deli{	
    margin: 0px auto;
    padding: 0; 
}
.deli table{
	max-width:700px;
	margin:0 auto;
}
.deli table th{
	vertical-align:top;
	text-align:right;
	width:30%;
	padding-right:2.5%;
}
.deli table td{
	width:67.5%;
}

.deli .twoCol{
	margin-top:30px;
}
.deli .colL,
.deli .colR{
	float:none;
	width:100%;
	margin-bottom:20px;
}

.deli .twoCol .txtTitle{
	font-size:16px;
	margin-bottom:0;
}
.deli .twoCol .txtDetail{
	margin-bottom:10px;
}
.deli .twoCol img{
	width:70%;
	margin:0 15%;
}

#fixReserve{
	display:none;
}
		
}