@charset "utf-8";

div#menuWrap {
	width: 960px;
	margin: 5px auto 20px;
	display: grid;
	display: -ms-grid;
	-ms-grid-columns: 1fr 1fr 1fr 1fr;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	-ms-grid-rows: 270px 150px;
	grid-template-rows: 270px 150px repeat(auto-fit, 150px);
}
div#menuWrap > *:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; }
div#menuWrap > *:nth-child(2) { -ms-grid-row: 1; -ms-grid-column: 3; }
div#menuWrap > *:nth-child(3) { -ms-grid-row: 1; -ms-grid-column: 4; }
div#menuWrap > *:nth-child(4) { -ms-grid-row: 2; -ms-grid-column: 3; }
div#menuWrap > *:nth-child(5) { -ms-grid-row: 3; -ms-grid-column: 1; }
div#menuWrap > *:nth-child(6) { -ms-grid-row: 4; -ms-grid-column: 1; }
div#menuWrap > *:nth-child(7) { -ms-grid-row: 4; -ms-grid-column: 3; }
div#menuWrap > *:nth-child(8) { -ms-grid-row: 4; -ms-grid-column: 4; }
div#menuWrap > *:nth-child(9) { -ms-grid-row: 5; -ms-grid-column: 1; }
div#menuWrap > *:nth-child(10) { -ms-grid-row: 5; -ms-grid-column: 2; }
div#menuWrap > *:nth-child(11) { -ms-grid-row: 7; -ms-grid-column: 1; }
div#menuWrap > *:nth-child(12) { -ms-grid-row: 7; -ms-grid-column: 2; }
div#menuWrap > *:nth-child(13) { -ms-grid-row: 7; -ms-grid-column: 3; }
div#menuWrap > *:nth-child(14) { -ms-grid-row: 7; -ms-grid-column: 4; }
div#menuWrap > *:nth-child(15) { -ms-grid-row: 8; -ms-grid-column: 1; }
div#menuWrap > *:nth-child(16) { -ms-grid-row: 8; -ms-grid-column: 3; }
div#menuWrap > *:nth-child(17) { -ms-grid-row: 8; -ms-grid-column: 4; }
div#menuWrap > *:nth-child(18) { -ms-grid-row: 9; -ms-grid-column: 1; }
div#menuWrap > *:nth-child(19) { -ms-grid-row: 9; -ms-grid-column: 2; }

div#menuWrap div.box {
	margin: 10px;
	border-radius: 8px;
	position: relative;
	overflow: hidden;
}
div#menuWrap div.box.food { -ms-grid-column:1; -ms-grid-column-span:2; grid-column:1 / 3; -ms-grid-row:1; -ms-grid-row-span:2; grid-row:1 / 3; }
div#menuWrap div.box.drink { -ms-grid-column:3; -ms-grid-column-span:2; grid-column:3 / 5; -ms-grid-row:2; -ms-grid-row-span:2; grid-row:2 / 5; }
/* div#menuWrap div.box.special { -ms-grid-column:1; -ms-grid-column-span:2; grid-column:1 / 3; -ms-grid-row:3; -ms-grid-row-span:2; grid-row:3 / 5; } */
div#menuWrap div.box.special01 { -ms-grid-column:1; -ms-grid-column-span:2; grid-column:1 / 3; -ms-grid-row:3; -ms-grid-row-span:1; grid-row:3 / 5; }
div#menuWrap div.box.special02 { -ms-grid-column:1; -ms-grid-column-span:2; grid-column:1 / 3; -ms-grid-row:5; -ms-grid-row-span:2; grid-row:5 / 7; }

/* 特販ないとき
div#menuWrap div.box.otsumami,
div#menuWrap div.box.dessert { -ms-grid-row:3; -ms-grid-row-span:2; grid-row:3 / 7; }
*/

/* 特販あるとき */
div#menuWrap div.box.otsumami,
div#menuWrap div.box.dessert { -ms-grid-row:5; -ms-grid-row-span:2; grid-row:5 / 7; }


div#menuWrap div.box.lunch { -ms-grid-column:1; -ms-grid-column-span:2; grid-column:1 / 3; -ms-grid-row:7; -ms-grid-row-span:2; grid-row:7 / 9; }
div#menuWrap div.box.girlsplan { -ms-grid-column:3; -ms-grid-column-span:2; grid-column:3 / 5;  -ms-grid-row:7; -ms-grid-row-span:2; grid-row:7 / 9; }
div#menuWrap div.box.noodle,
div#menuWrap div.box.party,
div#menuWrap div.box.kids,
div#menuWrap div.box.energy { -ms-grid-row:9; -ms-grid-row-span:2; grid-row:9 / 11; }

div#menuWrap div.box.voicedrink { -ms-grid-column:1; -ms-grid-column-span:2; grid-column:1 / 3; -ms-grid-row:11; -ms-grid-row-span:2; grid-row:11 / 13; }
div#menuWrap div.box.voicedrink-org { -ms-grid-column:3; -ms-grid-column-span:2; grid-column:3 / 5; -ms-grid-row:11; -ms-grid-row-span:2; grid-row:11 / 13; }

div#menuWrap div.box.mio,
div#menuWrap div.box.shotbottle,
div#menuWrap div.box.tequila { -ms-grid-row:13; -ms-grid-row-span:2; grid-row:13 / 15; }

div#menuWrap div.box img {
	object-fit: cover;
	-o-object-fit: cover;
	height: 250px;
	width: 100%;
	border-radius: 8px;
	-moz-transition: -moz-transform 0.2s linear;
  -webkit-transition: -webkit-transform 0.2s linear;
  -o-transition: -o-transform 0.2s linear;
  -ms-transition: -ms-transform 0.2s linear;
  transition: transform 0.2s linear;
}
div#menuWrap div.box img:hover{
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
}
div#menuWrap div.box.sizeL img {
	height: 400px;
}
div#menuWrap div.box div.caption {
	position: absolute;
	left: 0;
	bottom: 0;
	margin: 0;
	width: 100%;
	font-size: 112%;
}
	div#menuWrap div.box div.caption.captionRed { color:#fff; padding:0.7em 0 0.7em 3em; border-radius:0 0 8px 8px; }
	div#menuWrap div.box div.caption.captionWh { color:#1a1a1a; padding:0.7em 0 0.7em 3em; }
	div#menuWrap div.box div.caption.captionRed.iconFD { background:rgba(230,0,18,0.8) url("../img/1812/ic_food_wh.png") no-repeat left 10px center / auto 75%; }
	div#menuWrap div.box div.caption.captionRed.iconDK { background:rgba(230,0,18,0.8) url("../img/1812/ic_drink_wh.png") no-repeat left 10px center / auto 75%; }
	div#menuWrap div.box div.caption.captionWh.iconFDP { background:rgba(255,255,255,0.85) url("../img/1812/ic_food_pk.png") no-repeat left 10px center / auto 75%; }
	div#menuWrap div.box div.caption.captionWh.iconDKB { background:rgba(255,255,255,0.85) url("../img/1812/ic_drink_bl.png") no-repeat left 10px center / auto 75%; }
	div#menuWrap div.box.potato div.caption.captionWh.iconFDP { background-size:30px auto; }

	div#menuWrap div.box.sizeL div.caption { font-size:137%; }

div#menuWrap div#topItem {
	text-align: center;
	width: 218px;
}
div#menuWrap div#topItem img {
	height: auto;
}
div#menuWrap div#topItem h2 {
	margin: 0;
}
div#menuWrap div#topItem h2 img {
	max-width: 180px;
}
div#menuWrap div#topItem ul {
}
div#menuWrap div#topItem ul li {
}
div#menuWrap div#topItem ul li img {
	max-height: 180px;
	width: auto;
	margin: 0 auto;
}
.bx-wrapper {
	margin-bottom: 0;
}
.bx-wrapper .bx-pager.bx-default-pager a {
	background-color: #ccc;
	width: 6px;
	height: 6px;
	margin: 0 4px;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
	background-color: #e60012;
}



/* ==============================================================
 Less than TABLET
================================================================= */
@media screen and (max-width: 991px) {
	div#menuWrap { width:96%; }
}


/* ==============================================================
 Less than 851px
================================================================= */
@media screen and (max-width: 851px) {
	div#menuWrap { width:92%; margin:2% auto 4%; display:block; overflow:hidden; zoom:1; }
	div#menuWrap:after { visibility:hidden;	display:block; font-size:0;	content:" "; clear:both; height:0; }
	div#menuWrap div.box { float:left; display:inline; width:30.3%; margin:1.5%; }
	div#menuWrap div#topItem { width:47%; }
	div#menuWrap div.box.sizeL { width:97%; }
	div#menuWrap div.box.sizeL img { height:350px; }
	div#menuWrap div.box.potato { width:47%; }
	div#menuWrap div.box.special01,
	div#menuWrap div.box.special02,
	div#menuWrap div.box.voicedrink,
	div#menuWrap div.box.voicedrink-org { width:97%; }
	div#menuWrap div.box.special01 img,
	div#menuWrap div.box.special02 img,
	div#menuWrap div.box.voicedrink img,
	div#menuWrap div.box.voicedrink-org img { height:350px; }
	div#menuWrap div.box.girlsplan { width:63.7%; }
	div#menuWrap div.box div.caption.captionRed.iconFD,
	div#menuWrap div.box div.caption.captionRed.iconDK,
	div#menuWrap div.box div.caption.captionWh.iconFDP,
	div#menuWrap div.box div.caption.captionWh.iconDKB { background-size:30px auto; }
	div#menuWrap div.box.special div.caption,
	div#menuWrap div.box.special div.caption01,
	div#menuWrap div.box.special div.caption02 { font-size:112% !important; }
	div#menuWrap div.box div.caption.captionRed,
	div#menuWrap div.box div.caption.captionWh { padding-left:50px; }



	/* GRID
	div#menuWrap { grid-template-columns:1fr 1fr; grid-template-rows:auto; }
	div#menuWrap div.box { grid-row:auto !important; grid-column:1 !important; }
	div#menuWrap div.box.sizeL { grid-column:1 / 3 !important; }
	/*
}


/* ==============================================================
 Less than SP-LANDSCAPE
================================================================= */
@media screen and (max-width:568px) {
	div#menuWrap div.box { width:47%; }
	div#menuWrap div.box.lunch,
	div#menuWrap div.box.girlsplan,
	div#menuWrap div.box.voicedrink,
	div#menuWrap div.box.voicedrink-org { width:97%; }
	div#menuWrap div.box img { height:210px; }
	div#menuWrap div.box.drink img,
	div#menuWrap div.box.special img { height:230px; }
	div#menuWrap div.box.special01 img,
	div#menuWrap div.box.special02 img,
	div#menuWrap div.box.voicedrink img,
	div#menuWrap div.box.voicedrink-org img { height:210px; }
}

/* ==============================================================
 SP-LANDSCAPE
================================================================= */
@media screen and (min-width:480px) and (max-width:767px) {
}


/* ==============================================================
 SP-PORTRAIT
================================================================= */
@media screen and (min-width:0px) and (max-width:479px) {
}

/* ==============================================================
 Less than SP-PORTRAIT
================================================================= */
@media screen and (max-width:479px) {
    div#menuWrap div.box.special01 img,
	div#menuWrap div.box.special02 img,
	div#menuWrap div.box.voicedrink img,
	div#menuWrap div.box.voicedrink-org img { height:180px; }
}

/* ==============================================================
 Less than SP-PORTRAIT / iPhone5
================================================================= */
@media screen and (max-width:320px) {
    div#menuWrap div.box.special01 img,
	div#menuWrap div.box.special02 img,
	div#menuWrap div.box.voicedrink img,
	div#menuWrap div.box.voicedrink-org img { height:150px; }
}