@charset "utf-8";

.wrap {
	overflow-x: hidden;
}

.header_left {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;
}

header {
	position: sticky;
	top: 0;
}

@media only screen and (max-width: 821px){
	#gNav {
		height: initial;
	}
}

@media only screen and (min-width: 1440px){
	header .w1100 {
		width: 1440px;
	}
}

.wrap {
	margin-top: 0;
	padding-top: 0;
}

.content {
	padding-top: 0;
}


/* ==============================

	メイン画像

============================== */
/* mv */
.mv {
	background: url('../img/mv_bg.png') no-repeat center top / cover;
	padding: 0;
}

.mv_inner {
	width: 560px;
}

.mv_inner .btn {
	margin-top: 20px;
	text-align: center;
}


@media only screen and (max-width: 820px){
	.mv_inner {
		width: 100%;
	}
}





/* ==============================

	導入

============================== */
/* intro */
.intro {
	background: url(../img/intro_bg.png) no-repeat center top / cover;
	margin-bottom: 160px;
	padding-top: 180px;
	margin-top: -150px;
}

.intro h2 {
	line-height: 1.6;
	margin-bottom: 0px;
}

.intro h2 .grad {
	background: -webkit-linear-gradient(bottom, #a1895c, #dcba70 50%,#7d6435 100% );
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}

.intro h2 .line {
	background: linear-gradient(transparent 60%, #fffa67 0%);
	font-weight: bold;
}

.intro .intro_txt {
	text-align: center;
	font-size: 1.2rem;
	font-weight: bold;
	margin-top: 20px;
}



@media only screen and (max-width: 820px){
	.intro h2 .grad {
		background:none;
		background-clip: none;
		-webkit-text-fill-color: none;
		color: #7d6435;
	}
}

@media (max-width: 1280px) and (min-width: 821px) {
	.intro h2 {
		font-size: 2rem;
}
}

/* ==============================

	メニュー

============================== */
/* menu共通 */
.menu {
	padding: 60px 0;
}

.menu_inner {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;
}

.menu_info {
	width: 40%;
	margin-left: 5%;
}

.menu_img {
	width: 55%;
}

.menu_info {
	text-align: left;
}

.menu_info h2 {
	text-align: left;
	margin-bottom: 0px;
}

.menu_info .menu_icon {
	max-width: max-content;
}

.menu_info .menu_price {
	font-size: 2rem;
	font-weight: bold;
	margin-bottom: 50px;
	margin-top: 30px;
}

.menu_info .menu_price span {
	font-size: 1.6rem;
}


@media only screen and (max-width: 820px){
	.menu_inner {
		flex-direction:row-reverse;
	}

	.menu_info {
		order: 2;
		width: 100%;
		margin-left: 0%;
	}

	.menu_info h2 {
		text-align: center;
	}

	.menu_info .menu_price {
		text-align: center;
		margin-bottom: 10px;
		font-size: 1.4rem;
	}

	.menu_img {
		order: 1;
		width: 100%;
		margin: 0 auto;
	}

	.menu_img .menu_icon {
		margin: 0 auto;
		max-width: max-content;
	}

}


/* menu01 */
.menu01 {
	background: url(../img/menu01_bg.png) no-repeat right top / 70%;
}

.menu01 .menu_info h2,
.menu01 .menu_info .menu_price  {
	color: #d3b27f;
}



/* menu02 */
.menu02 {
	background: url(../img/menu02_bg.png) no-repeat left top / 50%;
}

.menu02 .menu_info h2,
.menu02 .menu_info .menu_price  {
	color: #4d6981;
}

.menu02 .menu_inner {
	flex-direction:row-reverse;
}

.menu02 .menu_info {
	width: 40%;
	margin-left: 5%;
}


/* menu03 */
.menu03 {
	background: url(../img/menu03_bg.png) no-repeat right top / 50%;
}

.menu03 .menu_info h2,
.menu03 .menu_info .menu_price  {
	color: #9cb4c0;
}

/* menu04 */
.menu04 {
	background: url(../img/menu02_bg.png) no-repeat left top / 50%;
}

.menu04 .menu_info h2,
.menu04 .menu_info .menu_price  {
	color: #4d6981;
}

.menu04 .menu_inner {
	flex-direction:row-reverse;
}

.menu04 .menu_info {
	width: 40%;
	margin-left: 5%;
}

.menu04_2 {
	margin-top:3rem;
}
.menu04_2 h2{
	font-size:2rem;
}
.menu04_2_img{
	text-align: right;
	margin-top: -13.5em;
	margin-left: 15em;
}
.menu04_2_img img{
	width: 240px;
}


@media only screen and (max-width: 820px){
	/* menu01 */
	.menu01 {
		background: url(../img/menu01_bg.png) no-repeat right top / 100%;
	}

	/* menu02 */
	.menu02 {
		background: url(../img/menu02_bg.png) no-repeat left top / 100%;
	}

	.menu02 .menu_info {
		width: 100%;
		margin-left: 0%;
	}

	/* menu03 */
	.menu03 {
		background: url(../img/menu03_bg.png) no-repeat right top / 100%;
	}

	/* menu04 */
	.menu04 {
		background: url(../img/menu02_bg.png) no-repeat left top / 100%;
	}

	.menu04 .menu_info {
		width: 100%;
		margin-left: 0%;
	}

	.menu04_2_img{
		text-align: center;
		margin-top: -2rem;
		margin-left: 0;
	}
}




/* ==============================

	サイドメニュー

============================== */
/* sidemenu */
.sidemenu_inner {
	margin-bottom: 100px;
	padding-bottom: 100px;
	border-bottom: 1px solid #d8d7d7;
}

.sidemenu ul {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: start;
}

.sidemenu ul li {
	width: calc((100% / 5) - 30px );
}

.sidemenu_info {
	text-align: center;
	margin-top: -30px;
}

.sidemenu_info h3 {
	font-size: 1.4rem;
	margin-bottom: 5px;
	line-height: 1;
}

.sidemenu_info .sidemenu_price {
	font-size: 2rem;
	font-weight: bold;
	margin-bottom: 20px;
	line-height: 1;
}

.sidemenu_info .sidemenu_price span {
	font-size: 1.2rem;
}

.sidemenu_info .sidemenu_txt {
	font-size: 0.9rem;
}



@media only screen and (max-width: 820px){
	.sidemenu_inner {
		margin-bottom: 50px;
		padding-bottom: 50px;
	}

	.sidemenu ul li {
		width: 100%;
		margin-bottom: 60px;
	}

	.sidemenu ul li img {
		width: 60%;
		display: block;
		margin: 0 auto;
	}
}





/* ==============================

	メニュー一覧

============================== */
/* menulist */
.menulist {
	margin-bottom: 100px;
}

.menulist h2 {
	padding-top: 100px;
	background: url(../img/menu_list_bg.png) no-repeat center top / contain ;
}

.menulist ul {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: flex-start;
}

.menulist ul li {
	width: 28%;
	margin: 2%;
}

.menulist ul li h3 {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1rem;
	font-weight:bold;
	border-bottom: 1px solid #3d3536;
	padding-bottom: 10px;
	margin-bottom: 10px;
	letter-spacing: 0em;
	line-height: 1.1;
}

.menulist ul li table {
	width: 100%;
	font-size: 0.9rem;
}

.menulist ul li th {
	padding: 5px 0;
}

.menulist ul li td {
	text-align: right;
	color: #aa3713;
}



/* --- 簡易スタイル（必要なら調整） --- */
.menu-tabs{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;
	gap:0rem;
	margin:0 0 1rem;
/*	position: sticky;
	top: 90px;
	background-color: rgba(255,255,255,0.7);
	padding: 20px;
*/
	}

.menu-tab{
	padding: .8rem 2rem;
	border:1px solid #ddd;
	background:#fff;
	border-radius:5px;
	cursor:pointer;
	width: 16%;
}

.menu-tab.is-active{
	background:#111;
	color:#fff;
	border-color:#111;
}

.menu-panel{
	margin:0 0 1.5rem;
}

.menu_list{
	list-style:none;
	padding:0;
	margin:0;
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
	gap:0px;
}

.menu_list li{
	border-radius:4px;
	padding:12px;
}

.menu_list h3{
	font-size:1rem;
	margin:.25rem 0 .5rem;
}

.menu_list_img{
	margin:0 0 .5rem;
}

.menu_list_img img {
	height: auto;
}

.menu_list_price{
	font-weight:bold;
	margin:.25rem 0;
	text-align: right;
}

.menu_list_comment{
	margin:.25rem 0 0;
	opacity:.9;
}




@media only screen and (max-width: 820px){
	.menulist {
		margin-bottom: 50px;
	}

	.menulist h2 {
		padding-top: 50px;
	}

	.menulist .scroll_comment {
		text-align: right;
	}

	.menulist ul li {
		width: 50%;
		margin: 0 0 30px 0;
	}

	.menulist ul li:last-child {
		margin: 0 0 0 0;
	}

	.menulist ul li h3 {
		font-size: 0.8rem;
	}

	.menu-tabs{
		flex-wrap:nowrap;     /* 折り返さない */
		overflow-x:auto;      /* 横スクロール */
		-webkit-overflow-scrolling: touch; /* iOSで慣性スクロール */
	}

	.menu-tab {
		flex: 0 0 auto;        /* 縮まず、自分の幅だけ確保 */
		white-space: nowrap;   /* テキストを折り返さない */
		width: initial;
		margin-right: 5px;
	}

}



/* ==============================

	お知らせ

============================== */
/* news */
.news_inner {
	margin-bottom: 100px;
	padding-bottom: 100px;
}



@media only screen and (max-width: 820px){
	.news_inner {
		margin-bottom: 50px;
		padding-bottom: 50px;
	}

}

/* ==============================

	店舗情報

============================== */
/* info */
.info {
	background: #d3b27f;
	padding: 30px 0;
	color: #FFF;
}

.info_inner {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;
}

.info_gmap {
	width: 46%;
	height: 0;
	overflow: hidden;
	padding-bottom: 36.25%;
	position: relative;

}

.info_gmap iframe {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
}

.info_tbl {
	width: 50%;
}

.info_tbl tr {
	background-size: 14px 2px;
	background-image: linear-gradient(to right, rgba(255,255,255,0.6), rgba(255,255,255,0.6) 2px, transparent 2px, transparent 8px);
	background-repeat: repeat-x;
}

.info_tbl tr:nth-child(1) {
	background: none;
}

.info_tbl td {
	padding: 20px 0;
	padding-left: 20px;
}



@media only screen and (max-width: 820px){
	.info_gmap {
		width: 100%;
		padding-bottom: 70%;
	}

	.info_tbl {
		width: 100%;
	}

	.info_tbl th {
		width: 25%;
	}

}





.tokusho,
.privacy {
	margin-bottom: 100px;
}

.tokusho h2,
.privacy h2 {
	text-align: left;
	margin-bottom: 20px;
}

.tokusho th {
	white-space: nowrap;
}

.privacy dt {
	font-weight: bold;
	margin-top: 40px;
	margin-bottom: 5px;
}

@media only screen and (max-width: 821px){
	.tokusho h2,
	.privacy h2 {
		font-size: 1.4rem; 
	}
}


/* ==============================

	端末ごとの微調整

============================== */
/* ipadの縦のみ */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
	header {
		padding: 0px;
	}

	header .inner {
		width: 90%;
	}

	header .header_logo {
		width: 20%;
	}

	#gNav {
		font-size: 12px;
	}

	header.scroll-nav {
		padding: 0px 0px;
	}

	.scroll-nav .header_logo  {
		width: 20%;
	}

	.mv {
		padding-top: 0;
	}

	.sidemenu_info h3,
	.menulist ul li h3 {
		font-size: 1.4rem;
	}
}
@media only screen and (min-device-width: 821px) and (max-device-width: 1280px) and (orientation:portrait) {
	.menu04_2_img{
		text-align: center;
		margin-top: -5rem;
		margin-left: 0;
	}
}



/* other_mv */
.other_mv {
	background-color: #ededed;
	height: 320px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 0px;
}

.other_mv h1 {
	display: table;
	font-size: 2rem;
	font-family: 'Noto Serif JP', serif;
}

@media only screen and (max-width: 821px){
	.other_mv {
		height: auto;
		padding: 40px 0;
	}
	
	.other_mv h1 {
		display: table;
		font-size: 2rem;
	}
}