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


/*---------------------------------------------------------------------
						共通
----------------------------------------------------------------------*/

body { background-color: #efeeed; }
header {
	background-color: inherit;
	box-shadow: inherit;
}

header h1 a {
	background: url("../img/logo.png") top left no-repeat;
	background-size: contain;
	pointer-events: none;
}

header.change-color {
	background-color: #000000;
	transition: 0.3s;
}

.hamburger div span { background-color: #ffffff; }

h2{
	font-size: 40px;
	color: #b89329;
	font-weight: normal;
	line-height: 2;
	margin-bottom: 20px;
}

.btn{
	padding: 20px 10px;
	color: #ffffff;
	display: inline-block;
	width: 230px;
	font-size: 16px;
	margin: 5px;
	max-width: 46%;
	text-align: center;
}

.yellow2 {
	background-color: #b89329;
	font-size: 14px;
	width: 100%;
	padding: 12px 10px;
	color: #ffffff;
	text-align: center;
}

.eng {
	border: 1px solid #ffffff;
	color: #ffffff;
}

@media screen and (max-width: 1100px) {
	h2 { margin-bottom: 20px; }
	.btn { font-size: 14px; }
}

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

	.img_pc { display: none; }
	.img_sp { display: block; }
	h2 {
		font-size: 30px;
		margin-bottom:10px;
	}
	.btn { padding: 12px; }
	body { padding-bottom: 105px; }
}

/*---------------------------------------------------------------------
												#mv
----------------------------------------------------------------------*/

#mv{
	margin: 0 auto 60px;
	position: relative;
}

/*=============
slick
=============*/

/*h2 {
	font-size: 40px;
	position: absolute;
	z-index: 11;
	top: 20px;
	left: 20px;
}*/

.mv_slide a {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	/*height: 100vh;*/
	height: 0%;
	padding-top: min(100vh, 75%);

	margin: 0;
	text-decoration: none;
}

.mv_slide a.img01 { background-image: url(../img/mv1.jpg); }
.mv_slide a.img02 { background-image: url(../img/mv2.jpg); }
.mv_slide a.img03 { background-image: url(../img/mv3.jpg); }

.mv_slide .slick-dots {
	bottom: 4%;
	z-index: +1;
}

#mv ul{
	right: 0;
	bottom: 3%;
	position: fixed;
	z-index: 1;
}
#mv ul li{
	margin-bottom: 7px;
	font-size: 0;
	filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.1));
}
#mv ul img{ width: 54px; }

@media screen and (max-width: 1200px) {
	.mv_slide a.img02 { background-image: url(../img/mv2_2.jpg); }
}

@media screen and (max-width: 768px) {
	/*.mv_slide a { height: 70vh; }*/
	.mv_slide a.img01 { background-image: url(../img/mv1_ipad.jpg); }
	.mv_slide a.img02 { background-image: url(../img/mv2_ipad.jpg); }
	.mv_slide a.img03 { background-image: url(../img/mv3_ipad.jpg); }
}
@media screen and (max-width: 750px) {
	.mv_slide a {
		/*height: 70vh;*/
		padding-top: min(70vh, 75%);
	}
	.mv_slide a.img01 { background-image: url(../img/mv1_sp.jpg); }
	.mv_slide a.img02 { background-image: url(../img/mv2_sp.jpg); }
	.mv_slide a.img03 { background-image: url(../img/mv3_sp.jpg); }
	#mv ul {
		bottom: 0;
		width: 100%;
	}
	#mv ul li {
		display: block;
		width: 100%;
		margin-bottom: 0;
	}
	#mv ul img { width: 100%; }
}

/*---------------------------------------------------------------------
												#youtube
----------------------------------------------------------------------*/

#youtube {
	font-size: 0;
	margin: 0 auto 40px;
	text-align: center;
	width: 100%;
}
#youtube iframe{ border: none; }

@media screen and (max-width: 1000px) {
	#youtube { aspect-ratio: 16 / 9; }
	#youtube iframe {
		width: 96%;
		height: 100%;
	}
}
@media screen and (max-width: 750px) {
	#youtube{ margin: 0 auto 10px; }
}
/*---------------------------------------------------------------------
												#info
----------------------------------------------------------------------*/

.news{
	width: 1000px;
	max-width: 96%;
	margin: 0 auto;
}

@media screen and (max-width: 750px) {
	.news {
		margin-bottom: 20px;
		width: 100%;
	}
	.news img { display: block; }
}

/*---------------------------------------------------------------------
												#message
----------------------------------------------------------------------*/

#message{
	padding-top: 160px;
	margin: 0 auto 200px;
	text-align: center;
	font-size: 16px;
	line-height: 2.625;
	background: url(../img/patt.png)center center repeat-x;
}

@media screen and (max-width: 750px) {
	#message {
		margin: 0 auto 80px;
		max-width: 96%;
		padding-top: 60px;
	}
}

/*---------------------------------------------------------------------
												#chef
----------------------------------------------------------------------*/

/*#chef h2{
	background: url(../img/chef_ttl.png) top center no-repeat;
	background-size: contain;
}*/
#chef ul{ display: flex; text-align: center; }
#chef ul li:first-child{
	width: 45%;
	background: url(../img/chef_img.jpg) top center no-repeat;
	background-size: cover;
}
#chef ul li:first-child img{ width: 100%; }
#chef ul li:last-child{
	width: 55%;
	background-color: #dfdad5;
	padding: 110px 60px 120px;
	line-height: 2;
	font-size: 0;
}

#chef ul li:last-child p{ margin-bottom: 46px; }

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

	#chef ul li:last-child{ padding: 100px 50px 100px; }
	#chef ul li:last-child p { margin-bottom: 30px; }

}

@media screen and (max-width: 750px) {
	#chef ul{ display: block; }
	#chef ul li:first-child {
		padding-top: 340px;
		background: url(../img/chef_img.jpg) center center no-repeat;
		background-size: cover;
		width: 100%;
	}
	#chef ul li:last-child{
		width: 100%;
		padding: 60px 26px 50px;
	}
	#chef ul li:last-child p { margin-bottom: 20px; }
}

/*---------------------------------------------------------------------
												#interior
----------------------------------------------------------------------*/

#interior{
	text-align: center;
	background: url(../img/interior_bg.jpg)top center no-repeat;
	background-size: cover;
	margin-bottom: 160px;
}
/*#interior h2 {
	background: url(../img/interior_ttl.png) top center no-repeat;
	background-size: contain;
}*/
#interior div{
	width: 800px;
	max-width: 56%;
	background-color: #162e35;
	margin: 0 auto;
	padding: 150px 0;
	background: url(../img/patt2.gif)top center repeat;
}

#interior div p{
	color: #ffffff;
	line-height: 2;
	margin-bottom: 46px;
}

@media screen and (max-width: 750px) {
	#interior{ margin-bottom: 80px; }
	#interior div{
		padding:60px 0 70px;
		max-width: 100%;
	}
		#interior div p{ margin-bottom: 30px; }
}

/*---------------------------------------------------------------------
												#event
----------------------------------------------------------------------*/

#event{
	width: 1300px;
	max-width: 94%;
	margin: 0 auto 60px;
}

/*------------現在のイベント----------------*/

#event .e_article{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	margin-bottom: 60px;
}

#event .e_article dt {
	background-color: #162e35;
	margin-right: 30px;
	outline: 1px solid #ffffff;
	outline-offset: -10px;
	width: 300px;
	position: relative;
	max-width: 28%;
}

/*#event .e_article{ margin-bottom: 60px; }
#event .e_article dt{
	display: inline-block;
}
#event .e_article dd {
	width: 16.5%;
	font-size: 0;
	display: inline-block;
	margin-right: 1%;
	vertical-align: top;
}*/

#event .e_article dd:last-child { margin-left: 0; }

#event .e_article dt em {
	background: url(../img/event_ttl.png) top center no-repeat;
	background-size: contain;
	position: absolute;
	right: 0;
	left: 0;
	top: 36%;
	text-align: center;
	width: 76%;
	margin: 0 auto;
	font-size: 40px;
	color: #b89329;
	font-weight: normal;
	line-height: 2;
}

#event .e_article dd {
	width: 16.5%;
	font-size: 0;
	margin: 0 auto;
}

#event .e_article dd img{
	width: 100%;
	height: 47.5%;
}

#event .a_article li img { width: 100%; height: 100%;}
_:lang(x)::-internal-media-controls-overlay-cast-button,
#event .a_article li img {
	height: 54%;
}

#event dl dd p{
	margin: 20px 0 17px;
	font-size: 15px;
}
#event dl dd span {
	margin-bottom: 22px;
	font-size: 14px;
	display: block;
	text-align: left;
}

/*------------過去のイベント_アーカイブ----------------*/

.a_article{
	width: 1200px;
	margin: 0 auto;
	text-align: center;
}
.a_article>div {
	display: flex;
	align-items: center;
	margin-bottom: 40px;
}
.a_article h4{
	border: 1px solid #162e35;
	padding: 14px 60px;
	font-weight: normal;
	font-size: 20px;
}
.a_article>div:before,
.a_article>div:after {
	content: "";
	flex-grow: 1;
	height: 1px;/* 線の太さ */
	background: #000;/* 線の色 */
}
.a_article ul {
	display: flex;
	justify-content: center;
}
.a_article li{
	width: 40%;
	font-size: 0;
	margin: 15px;
	display: flex;
}
.a_article li div{
	width: 100%;
	margin: 10px 0 0 20px;
	text-align: left;
}
.a_article li div p{
	text-align: left;
	margin-bottom: 17px;
}
.a_article li div span {
	margin-bottom: 22px;
	display: block;
}

@media screen and (max-width: 1250px) {
	.a_article { max-width: 92%; }
	.a_article li{
		width: 48%;
		margin: 8px 8px;
	}
}
@media screen and (max-width: 1000px) {
	#event{ margin: 0 auto 100px; }
	#event .e_article dt{
		max-width: 33%;
		margin-bottom: 20px;
	}
	#event .e_article dd {
		width: 30.5%;
		margin-bottom: 20px;
	}
	#event .e_article p{ margin: 14px 0 12px; }
	#event .e_article span{ margin-bottom: 15px; }
	.a_article li{
		display: inline-block;
		width: 33%;
	}
	.a_article li div{
		margin: 10px auto 0;
		width: 100%;
	}
	#event .e_article::after {
	content: "";
	display: block;
	width: 36.5%;
	}
	#event .a_article li img { height: 60%; }
}

@media screen and (max-width: 750px) {
	#event { margin: 0 auto 80px; }
	#event .e_article{ margin-bottom: 30px; }
	#event .e_article dt{
		max-width: 49%;
		margin-right: 0;
		width: 49%;
	}
	#event .e_article dt em{
		top: 40%;
		font-size: 30px;
	}
	#event .e_article dd{ width: 48.5%; }
	.a_article{
		width: 100%;
		max-width: 100%;
	}
	.a_article ul{ justify-content: space-between; }
	.a_article li{
		width: 48.5%;
		margin: 0;
	}
	.a_article>div{ margin-bottom: 24px; }
	#event .e_article::after { display: none; }
}

/*---------------------------------------------------------------------
												#shop
----------------------------------------------------------------------*/

#shop{
	padding: 140px 0 150px;
	background: linear-gradient(to left, #efeeed 0%, #efeeed 67%, #dfdad5 67%, #dfdad5 100%);
}
#shop>div{
	width: 1400px;
	max-width: 80%;
	margin: 0 auto;
}
#shop>div>div{
	display: flex;
	margin-bottom: 40px;
	align-items: center;
}
#shop>div>div>img{ width: 60%; }
#shop h2{
	background: url(../img/shop_ttl.png) center center no-repeat;
	background-size: contain;
	width: 37%;
	text-align: center;
	line-height: 130px;
	margin: 0 0 30px 30px;
}
#shop ul{
	width: 1200px;
	max-width: 86%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}
#shop ul li{ width: 49%; }
@media screen and (max-width: 1000px) {
	#shop{ padding: 100px 0 90px; }
	#shop>div{ max-width: 92%; }
	#shop h2{ line-height: 120px; }
}

@media screen and (max-width: 750px) {
	#shop{ padding: 70px 0; }
	#shop ul{ display: block; }
	#shop ul li{
		width: 100%;
		font-size: 0;
		margin-bottom: 12px;
	}
	#shop>div>div{
		display: block;
		margin-bottom: 26px;
	}
	#shop>div>div>img{ width: 100%; }
	#shop h2{
		width: 100%;
		margin: 20px auto 0;
		line-height: 104px;
	}
}

/*---------------------------------------------------------------------
												#story
----------------------------------------------------------------------*/

#story{
	background: url(../img/patt2.gif)top center repeat;
	padding: 90px 0 100px;
	margin-bottom: 150px;
}
#story div{
	width: 1000px;
	max-width: 80%;
	margin: 0 auto 50px;
	/*display: flex;*/
	text-align: center;
}
/*#story div h2{
	background: url(../img/f_story_ttl.png) center left no-repeat;
	background-size: contain;
	width: 33%;
	writing-mode: vertical-rl;
	align-items: center;
	display: grid;
	margin: 0 7% 0 0;
}*/
#story div p{
	color: #ffffff;
	font-size: 16px;
	text-align: center;
	line-height: 2;
}
#story ul{
	width: 1200px;
	margin: 0 auto;
	max-width: 80%;
	display: flex;
}
#story ul li{ width: 33%; }

@media screen and (max-width: 1000px) {
	#story div h2{ width: 55%; }
	#story div p { margin-top: 3%; }
}

@media screen and (max-width: 750px) {
	#story {
		margin-bottom: 70px;
		padding: 80px 0;
	}
	#story div{
		display: block;
		margin: 0 auto 30px;
		max-width: 86%;
	}
	#story div h2{
		width: 100%;
		/*background: url(../img/f_story_ttl.png) center center no-repeat;
		background-size: contain;*/
		margin: 0 auto 30px;
	}
	#story ul{ display: block; max-width: 86%; }
	#story ul li{
		width: 100%;
		margin-bottom: 10px;
	}
}

/*---------------------------------------------------------------------
												#guide
----------------------------------------------------------------------*/

#guide{
	padding-bottom: 100px;
	margin-bottom: 100px;
	background: linear-gradient(to bottom, #efeeed 0%, #efeeed 39%, #dfdad5 39%, #dfdad5 100%);
}
#guide>div{
	width: 1200px;
	margin: 0 auto;
	max-width: 94%;
	display: flex;
}
/*#guide h2{
	background: url(../img/guide_ttl.png) top left no-repeat;
	background-size: contain;
}*/

#guide div div{
	width: 59%;
	overflow: hidden;
}

#guide ul{
	float: left;
	width: 100%;
	display: flex;
}
#guide ul li{
	width: 41%;
	line-height: 1.86666;
	font-size: 15px;
	color: #162e35;
}
#guide ul li:first-child { margin-right: 4%; }

#guide div .map { width: 40%; }
#guide div .map iframe{ width: 100%; }

@media screen and (max-width: 750px) {
	#guide{
		padding-bottom: 50px;
		margin-bottom: 50px;
		background: linear-gradient(to bottom, #efeeed 0%, #efeeed 65%, #dfdad5 35%, #dfdad5 100%);
	}
	#guide>div{ display: block; max-width: 88%; }
	#guide div div { width: 100%; }
	#guide ul { display: block; }
	#guide ul li{ width: 100%; }
	#guide ul li:last-child{ margin-top: 20px; }
	#guide div .map { width: 100%; margin-top: 30px; }
	#guide div .map iframe { height: 300px; }
}

/*---------------------------------------------------------------------
												#reserve
----------------------------------------------------------------------*/

#reserve{
	width: 1200px;
	max-width: 94%;
	margin: 0 auto 100px;
	background: url(../img/reserve_bg.png) top left no-repeat;
}
#reserve ul{
	width: 920px;
	margin: 0 auto;
	padding-top: 100px;
	display: flex;
	max-width: 90%;
}
#reserve ul li{ width: 47%; }
#reserve ul li:first-child { margin-right: 50px; }
#reserve ul li img{ width: 100%; }
/*#reserve ul li h2{
	background: url(../img/reserve_ttl.png) top left no-repeat;
	background-size: contain;
}*/
#reserve ul li p {
	line-height: 2;
	letter-spacing: 0;
	margin: 0 auto 26px;
}

@media screen and (max-width: 750px) {
	#reserve{
		margin: 0 auto 70px;
		background-size: 64%;
	}
	#reserve ul{
		display: block;
		padding-top: 56px;
	}
	#reserve ul li{ width: 100%; }
	#reserve ul li:first-child{ margin: 0 auto 60px; }
}

/*---------------------------------------------------------------------
												#link_bnr
----------------------------------------------------------------------*/
#link_bnr{
	width: 1000px;
	margin: 0 auto 140px;
	max-width: 80%;
}
#link_bnr ul{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
#link_bnr ul li{ margin: 5px; }
#link_bnr ul li img{ display: block; }

@media screen and (max-width: 750px) {
	#link_bnr {
		margin: 0 auto 70px;
		max-width: 90%;
	}
	#link_bnr ul{ justify-content: left; }
	#link_bnr ul li { margin: 3px; width: 48%; }
}