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


/* MENU grid
------------------------------------------------------------*/
.grid_12 *,
.grid_12 *:after,
.grid_12 *:before 							{ border-box; box-sizing: border-box; }
.box01 										{ position: relative; z-index: 1; display: block; overflow: hidden; margin: 0; width:100%; height: 0; padding-bottom: 33%; background-color: #000; text-align: center; cursor: pointer; }
.box02										{ position: relative; z-index: 1; display: block; overflow: hidden; margin: 0; width:100%; height: 0; padding-bottom: 20%; background-color: #000; text-align: center; cursor: pointer; }
.grid_12 figure img 						{ border: 0; position: relative; display: block; min-height: 100%; opacity: 0.8; }
.grid_12 figure figcaption					{ color: #fff; text-transform: uppercase; font-size: 1.25em; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.grid_12 figure figcaption::before,
.grid_12 figure figcaption::after			{ pointer-events: none; }
.grid_12 figure figcaption					{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block;}
.grid_12 figure h2							{ font-family: 'Quattrocento:400', serif;}
.grid_12 figure h2,
.grid_12 figure p 							{ margin: 0; }
.grid_12 figure p 							{ letter-spacing: 1px; font-size:13px; }
figure.effect-romeo							{ -webkit-perspective: 1000px; perspective: 1000px; }
figure.effect-romeo.col3					{ width: 33.061%; float: left; border-top: 1px solid #fff; border-left: 1px solid #fff; border-bottom: 1px solid #fff; }
figure.effect-romeo.col3first				{ border-left:none; width: 33.88%;}
figure.effect-romeo.col3 h2					{ font-size: 26px; }
figure.effect-romeo.clearBox 				{clear: both !important;}
figure.effect-romeo img						{ -webkit-transition: opacity 0.35s, -webkit-transform 0.85s; transition: opacity 0.35s, transform 0.85s; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
figure.effect-romeo:hover img				{ opacity: 0.4; -webkit-transform: translate3d(0,0,130px); transform: translate3d(0,0,130px); }
figure.effect-romeo h2						{ position: absolute; top: 52%; left: 0; width: 100%; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; }
figure.effect-romeo p						{ position: absolute; top: 46%; left: 0; width: 100%; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; }
figure.effect-romeo h2						{ -webkit-transform: translate3d(0,-50%,0) translate3d(0,-100%,0); transform: translate3d(0,-50%,0) translate3d(0,-100%,0); }
figure.effect-romeo p						{ padding: 0.25em 2em; -webkit-transform: translate3d(0,-50%,0) translate3d(0,150%,0); transform: translate3d(0,-50%,0) translate3d(0,150%,0); }
figure.effect-romeo:hover h2				{ -webkit-transform: translate3d(0,-50%,0) translate3d(0,-50%,0); transform: translate3d(0,-50%,0) translate3d(0,-50%,0); }
figure.effect-romeo:hover p					{ -webkit-transform: translate3d(0,-50%,0) translate3d(0,100%,0); transform: translate3d(0,-50%,0) translate3d(0,100%,0); }
figure.effect-romeo figcaption				{ padding: 0; }
figure.effect-romeo figcaption::before,
figure.effect-romeo figcaption::after		{ position: absolute; content: ''; opacity: 0; }
figure.effect-romeo figcaption::before,
figure.effect-romeo figcaption::after		{ -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; }
figure.effect-romeo:hover figcaption::before,
figure.effect-romeo:hover figcaption::after	{ opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
figure.effect-romeo:hover figcaption::after	{ -webkit-transition-delay: 0.15s; transition-delay: 0.15s; }




/* MENU 詳細ページ（GRAND MENU）
------------------------------------------------------------*/
#menuBox									{ position:relative; overflow:hidden; }
.menu_inner									{ display:block; overflow:hidden; }
/*.detailBox		 						{ text-align:justify; text-justify:distribute-all-lines; }*/
.detailBox img 								{ width:100%; background-color:transparent!important; }
.detailBox h3								{ font-size:1.75em; margin-top:0px!important; margin-bottom:5px!important; padding-left:2px;/*枠消え回避 */ }
.detailBox h4								{ font-size:1.55em; margin-bottom:30px; margin-top:0px!important; padding-left:2px;/*枠消え回避 */ }
.detailBox p.textBox		 				{ text-align:justify; text-justify:distribute-all-lines; padding-left:2px;/*枠消え回避 */ }
.menu_title	 								{ font-size:1.2em; padding-left:2px;/*枠消え回避 */ }
.menu_text									{ font-size:1em; padding-left:2px;/*枠消え回避 */ }
.menu_price									{ font-size:1em; padding-left:2px;/*枠消え回避 */ }
.price_notes								{ font-size:0.8em; padding-left:2px;/*枠消え回避 */ color: #666; }
/*.detailBox p 								{ font-size:1em; padding-left:2px; }*/



/* MENU 詳細ページ（SIDEDISH MENU）
------------------------------------------------------------*/
.grid_menuList01 ul{
    overflow: hidden;
    list-style: none;
	padding-right:2px;/*左側消え回避 */
    position: relative;
}

.grid_menuList01 ul li{
    display: block;
    width: 100%;
    overflow: hidden;
    margin-bottom: 40px;
	padding-left:2px;/*左側消え回避 */
    position: relative;
}

.grid_menuList01 ul li .item_info{
    display: inline-block;
    float: left;
}

.grid_menuList01 ul li .item_notes{
	display: block;
	clear: both;
	width: 100%;
	word-break:break-all;
}

.grid_menuList01 ul li h3{
    font-size:1.2em;
    margin: 0;
    padding: 0 30px 10px 0;
    letter-spacing: 1px;
}

.grid_menuList01 ul li .item_desc{
	color: #545454;
	font-size: 12px;
	letter-spacing: 1px;
	line-height: 2em;
}

.grid_menuList01 ul li .priceBox{
	float: right;
	letter-spacing: .5px;
	margin: 0;
	font-size:1em;
	background-color: rgb(253,253,252);
	position: absolute;
	right: 0px;
	z-index: 50;	/* <span class="separator"></span>より上に配置するため */
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 30px;
}

.grid_menuList01 ul li .separator{
	width: 100%;
	height: 1px;
	position: absolute;
	top: 17px;
	background-color: #e3e1e1;
}
.price_notes02								{ font-size:0.65em; padding-left:2px;/*枠消え回避 */ color: #666; }
.notesTitle									{ font-size:0.65em; padding-left:2px; }



/* Right側（バナー）
------------------------------------------------------------*/
#SD_Bnr										{ position: absolute; top: 0px; right: 0px; height: 100px; }




/* バナー設定 */
.bnr { position: relative; }

.bnr li {
	display: inline-block;
	margin: 0;
	padding: 0px;
	text-align: left;
	position: relative;
}

.bnr figure {
	margin: 0;
	position: relative!important;
}

/* 指差しアイコン設定 */
.icon {
	background-image: url(../../menu/img/bnr-icon.png);
	height: 65px;
	width: 45px;
	position: absolute;
	z-index: 100;
	right: 10%;
	bottom: 5px;
}


.bnr figure img {
    /*max-width: 100%;*/
	display: block;
	position: relative;
}

.bnr figcaption {
	position: absolute;
	top: 0;
	left: 0;
	padding: 10px;
	background-color: rgb(253,253,252);
	font-size: 0.8em;
}


.bnr figcaption h3 {
	margin: 0!important;
	padding: 0!important;
	color: #666;
}


.bnr figcaption a {
	text-align: center;
	padding: 1px 5px;
	border-radius: 2px;
	display: inline-block;
	background: #c9c9c9;
	color: #fff;
	line-height: 3em;
}
.bnr figcaption a:hover {
	background-color: #979797;
}

/* Style */
.boxstyle li {
	-webkit-perspective: 1700px;
	-moz-perspective: 1700px;
	perspective: 1700px;
	-webkit-perspective-origin: 0 50%;
	-moz-perspective-origin: 0 50%;
	perspective-origin: 0 50%;
}

.boxstyle figure {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.boxstyle figure > div {
	overflow: hidden;
}

.boxstyle figure img {
	-webkit-transition: -webkit-transform 0.4s;
	-moz-transition: -moz-transform 0.4s;
	transition: transform 0.4s;
}

.no-touch .boxstyle figure:hover img,
.boxstyle figure.cs-hover img {
	-webkit-transform: translateX(23%);	/* マウスオーバー時：画像の移動距離設定 */
	-moz-transform: translateX(23%);	/* マウスオーバー時：画像の移動距離設定 */
	-ms-transform: translateX(23%);	/* マウスオーバー時：画像の移動距離設定 */
	transform: translateX(23%);	/* マウスオーバー時：画像の移動距離設定 */
}

.boxstyle figcaption {
	height: 100%;
	width: 40%;
	opacity: 0;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	transform-origin: 0 0;
	-webkit-transform: rotateY(-90deg);
	-moz-transform: rotateY(-90deg);
	transform: rotateY(-90deg);
	-webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
	-moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
	transition: transform 0.4s, opacity 0.1s 0.3s;
}

.no-touch .boxstyle figure:hover figcaption,
.boxstyle figure.cs-hover figcaption {
	opacity: 1;
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	transform: rotateY(0deg);
	-webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
	-moz-transition: -moz-transform 0.4s, opacity 0.1s;
	transition: transform 0.4s, opacity 0.1s;
}




/* Right側（スクロールサイドナビ）
------------------------------------------------------------*/
#SDnavi										{ position: absolute; top: 140px; right: 0px; }
.SDnavi_inner 								{ border:#ccc 1px solid; padding:10px; margin-top:0; margin-bottom:40px; }
.SDnavi_inner02 							{ margin-top:0; margin-bottom:40px; }
.SDnavi_inner h4 							{ font-size:1.2em; letter-spacing:0.15em; text-align:center; border-bottom: 1px dotted #999; margin-top: 0px!important; margin-bottom:3px!important; padding-bottom:5px; color: #414141; }
.SDnavi_inner ul 							{ font-size:1em!important; }
.SDnavi_inner ul li							{ position: relative; padding-left:24px; }
.SDnavi_inner ul li::after {
	display: block;
	content: '';
	position: absolute; top: 1.3em;/*ダイヤトップ位置調整*/
	left: 0.5em;/*ダイヤ左位置調整*/
	width: 6px;
	height: 6px;
	background-color: #999;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.SDnavi_inner ul li a 						{ color: #414141; }
.SDnavi_inner ul li a:hover					{ color: #999; }

.line										{ border-bottom: 1px dotted #999; padding:5px; margin-bottom:5px; }
.last										{ margin-bottom:0px!important; padding-top: 5px; padding-right: 5px; padding-bottom: 0px!important; padding-left: 5px; }






/* PC用
------------------------------------------------------------*/
@media only screen and (min-width: 960px){
	.menu_text							{ font-size:0.9em; padding-left:2px;/*枠消え回避 */ }
	 
/* MENU 詳細ページ（SIDEDISH MENU）
------------------------------------------------------------*/
	.grid_menuList01 ul li .item_desc	{ font-size:0.8em; line-height: 2em; }

}

/* PC調整用
------------------------------------------------------------*/
@media only screen and (max-width:1200px){
	.menu_inner							{ width:900px; display:block; overflow:hidden; }
	.icon 								{ right: 27%; } /* 指差しアイコン設定 */
	.bnr li 							{ width: 100%; min-width: 260px; }

/* MENU 詳細ページ（GRAND MENU）
------------------------------------------------------------*/
	.detailBox h3						{ font-size:1.6.5em; margin-top:0px!important; margin-bottom:5px!important; }
	.detailBox h4	
						{ font-size:1.25em; margin-bottom:30px; margin-top:0px!important; }
}

@media only screen and (min-width: 960px) and (max-width:1000px) {
}


/* タブレット用
------------------------------------------------------------*/
@media only screen and (max-width: 959px) {
	.menu_title	 						{ font-size:1em; }
	.menu_text							{ font-size:0.74em; line-height: 1.8em; }
	.SDnavi_inner h4 					{ font-size:1em; }
	.SDnavi_inner ul 					{ font-size:0.8em!important; }
	.SDnavi_inner ul li					{ padding-left:20px; }
	.SDnavi_inner ul li::after 			{
		position: absolute; top: 1.6em;/*ダイヤトップ位置調整*/
		left: 0.5em;/*ダイヤ左位置調整*/
	}
	.bnr li {
		width: 100%;
		min-width: 300px;
	}
	.boxstyle figcaption {
		font-size: 0.7em;
		width: 27%;
	}
	.bnr figcaption h3 {
		margin: 0!important;
		padding: 0!important;
	}
	.bnr figcaption a {
		margin: 0px;
		padding-top: 4px;
		padding-right: 5px;
		padding-bottom: 1px;
		padding-left: 5px;
		line-height: 3em;
	}
	.icon 								{ right: 48%; } /* 指差しアイコン設定 */

/* MENU 詳細ページ（GRAND MENU）
------------------------------------------------------------*/
	.detailBox h3						{ font-size:1.5em; margin-top:0px!important; margin-bottom:0px!important;}
	.detailBox h4						{ font-size:1.2em; margin-bottom:10px; margin-top:0px!important; }
	.detailBox p 						{ line-height: 2em; }
	.menu_text							{ font-size:0.74em; padding-left:2px;/*枠消え回避 */ }
	

/* MENU 詳細ページ（SIDEDISH MENU）
------------------------------------------------------------*/
	.grid_menuList01 ul li h3			{ padding: 0 15px 10px 0; }
	.grid_menuList01 ul li .priceBox	{ padding: 0 0 0px 15px; }
	.grid_menuList01 ul li .item_desc	{ font-size:0.74em; line-height: 1.8em; }


}

@media only screen and (min-width: 768px) and (max-width: 959px) {
	.menu_inner							{ width:576px; display:block; overflow:hidden; }

}

/* スマートフォン 横(ランドスケープ)以下 調整用
------------------------------------------------------------*/
@media only screen and (max-width: 767px) {
	.menu_inner							{ width:100%; display:block; overflow:hidden; }
}

/* スマートフォン 横(ランドスケープ)
------------------------------------------------------------*/
@media only screen and (min-width: 480px) and (max-width: 767px) {
	.grid_12 figure p 					{ display: none; }
	.grid_12 figure						{ padding-bottom: 40%;}
	figure.effect-romeo.col3,
	figure.effect-romeo.col3first 		{ width: 100%; border-left: none;}
	figure.effect-romeo h2				{ font-size:18px; -webkit-transform: translate3d(0,-50%,0) translate3d(0,-10%,0); transform: translate3d(0,-50%,0) translate3d(0,-10%,0); }
	figure.effect-romeo.col3 h2			{ font-size: 16px; }
	figure.effect-romeo:hover h2		{ -webkit-transform: translate3d(0,-50%,0) translate3d(0,0,0); transform: translate3d(0,-50%,0) translate3d(0,0,0); }
	
	#SDnavi,#SD_Bnr						{display: none;}

/* MENU 詳細ページ（GRAND MENU）
------------------------------------------------------------*/
	.detailBox h3						{ font-size:1.65em; margin-top:0px!important; margin-bottom:5px!important;}
	.detailBox h4						{ font-size:1.4em; margin-bottom:30px; margin-top:0px!important; }

/* MENU 詳細ページ（SIDEDISH MENU）
------------------------------------------------------------*/
	.grid_menuList01 ul li h3			{ padding: 0 30px 10px 0; }
	.grid_menuList01 ul li .priceBox	{ padding: 0 0 0px 30px; }
}

/* スマートフォン 縦(ポートレート)
------------------------------------------------------------*/
@media only screen and (max-width:480px){
	.grid_12 figure p					{ display: none; }
	.grid_12 figure						{ padding-bottom: 40%;}
	figure.effect-romeo.col3,
	figure.effect-romeo.col3first		{ width: 100%; border-left: none;}
	figure.effect-romeo h2				{ font-size:18px; -webkit-transform: translate3d(0,-50%,0) translate3d(0,-10%,0); transform: translate3d(0,-50%,0) translate3d(0,-10%,0); }
	figure.effect-romeo.col3 h2			{ font-size: 16px; }
	figure.effect-romeo:hover h2		{ -webkit-transform: translate3d(0,-50%,0) translate3d(0,0,0); transform: translate3d(0,-50%,0) translate3d(0,0,0); }
	
	#SDnavi,#SD_Bnr						{display: none;}

/* MENU 詳細ページ（GRAND MENU）
------------------------------------------------------------*/
	.detailBox h3						{ font-size:1.35em; margin-top:0px!important; margin-bottom:0px!important; letter-spacing:0.12em; }
	.detailBox h4						{ font-size:1.15em; margin-bottom:20px; margin-top:0px!important; letter-spacing:0.12em; }
	.detailBox p 						{ font-size:1em; }

/* MENU 詳細ページ（SIDEDISH MENU）
------------------------------------------------------------*/
	.grid_menuList01 ul li h3			{ padding: 0 15px 10px 0; }
	.grid_menuList01 ul li .priceBox	{ padding: 0 0 0px 15px; }

}