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

/* =========================================================
 #heading
========================================================= */
#heading .inner figure{
	background-image: url("../img/menu/heading.jpg");
}
#heading h1{
    width: 30vw;
}
#heading h1 em{
    font-size: 4rem;
}

/* =========================================================
 #main
========================================================= */

/* tabMenu
--------------------------------------------------------- */
#tabMenu .inner{
	width: 1360px;
}

/* secBeverage #secFood 共通
--------------------------------------------------------- */
#secBeverage,
#secFood,
#secSweets{
	margin: 100px 0 0 0;
}

#secBeverage .inner,
#secFood .inner,
#secSweets .inner{
    width: 1360px;
	margin: 0 auto;
}

#secBeverage .itemWrap,
#secFood .itemWrap,
#secSweets .itemWrap{
	display: flex;
	flex-wrap: wrap;
    justify-content: space-between;
}
#secBeverage .itemWrap::before,
#secFood .itemWrap::before,
#secSweets .itemWrap::before{
  content:"";
  display: block;
  width:310px;
  order:1;
}
#secBeverage .itemWrap::after,
#secFood .itemWrap::after,
#secSweets .itemWrap::after{
  content:"";
  display: block;
  width:310px;
}

#secBeverage .itemWrap + h3,
#secFood .itemWrap + h3,
#secSweets .itemWrap + h3{
	margin-top: 80px;
}

#secBeverage h2 + .note,
#secFood h2 + .note,
#secSweets h2 + .note{
	margin-bottom: 50px;
}
#secBeverage .note + h3,
#secFood .note + h3,
#secSweets .note + h3,
#secSweets .note + .itemWrap{
	margin-top: 50px;
}

#secBeverage .itemWrap .item,
#secFood .itemWrap .item,
#secSweets .itemWrap .item{
	position: relative;
	width: 310px;
}

#secBeverage .itemWrap .item.new:before,
#secFood .itemWrap .item.new:before,
#secSweets .itemWrap .item.new:before{
	content: "";
	display: block;
	width:86px;
	height:87px;
	background-image: url("../img/menu/i_new.png");
	background-repeat: no-repeat;
	position: absolute;
	top: -5px;
	left: -6px;
	z-index: 1;
}

#secBeverage .itemWrap .item figure,
#secFood .itemWrap .item figure,
#secSweets .itemWrap .item figure{
	width: 309px;
	height: auto;
}

#secBeverage .itemWrap .item figure img,
#secFood .itemWrap .item figure img,
#secSweets .itemWrap .item figure img {
	width: 100%;
	height: auto;
}

#secBeverage .itemWrap .item .desc,
#secFood .itemWrap .item .desc,
#secSweets .itemWrap .item .desc{
	padding: 30px 30px 50px 0;
}

#secBeverage .itemWrap .item.limited .desc:before,
#secFood .itemWrap .item.limited .desc:before,
#secSweets .itemWrap .item.limited .desc:before{
	content: "店舗限定";
	display: inline-block;
	width: 110px;
	border: solid 1px #c0a84b;
	font-size: 1.3rem;
	color: #cbb047;
	box-sizing: border-box;
	padding: 10px;
	text-align: center;
	margin: 0 0 20px 0;
}

#secBeverage .itemWrap .item .desc .name,
#secFood .itemWrap .item .desc .name,
#secSweets .itemWrap .item .desc .name{
	font-size: 2.0rem;
	font-family: "游明朝体", "Yu Mincho", YuMincho, serif;
	letter-spacing: 0.05em;
	line-height: 1.4;
}

#secBeverage .itemWrap .item .desc .price,
#secFood .itemWrap .item .desc .price,
#secSweets .itemWrap .item .desc .price{
    /* 値段非表示 */
    display: none;
    /* 値段ある時用 */
    margin-top: 10px;
	font-size: 1.5rem;
	letter-spacing: 0.05em;
	line-height: 1.4;
}

#secBeverage .itemWrap .item .desc .name small,
#secFood .itemWrap .item .desc .name small,
#secSweets .itemWrap .item .desc .name small{
	display: block;
	font-size: 1.5rem;
	font-family: "游ゴシック体", YuGothic, "Yu Gothic", sans-serif;
	letter-spacing: 0.1em;
	color: #85722d;
	margin: 0 0 20px 0;
}

#secBeverage .itemWrap .item .mask,
#secFood .itemWrap .item .mask,
#secSweets .itemWrap .item .mask{
	opacity:0;
	transition:all 0.6s ease;
	position:absolute;
	top:0;
	left:0;
	width:310px;
	height:310px;
	background-color: rgba(0,0,0,0.5);
	color:#ffffff;
	padding:50px 36px 0 36px;
	box-sizing:border-box;
	line-height: 1.6;
	letter-spacing: 0.1em;
	text-align: justify;
}

#secBeverage .itemWrap .item .mask:hover,
#secFood .itemWrap .item .mask:hover,
#secSweets .itemWrap .item .mask:hover{
	opacity:1;
}

/* set menu */
#secFood .setWrap {
}
#secFood .setWrap + h3,
#secSweets .setWrap + h3{
	margin-top: 80px;
}
#secFood .setWrap h4,
#secSweets .setWrap h4{
    margin-top: 80px;
	margin-bottom: 50px;
    text-align: center;
    font-size: 2.6rem;
}
#secFood .setWrap ul,
#secSweets .setWrap ul {
	display: flex;
	flex-wrap: wrap;
    justify-content: space-between;
    width: 1200px;
    margin-right: auto;
    margin-left: auto;
}
#secFood .setWrap ul + ul,
#secSweets .setWrap ul + ul{
margin-top: 80px;
}
#secFood .setWrap ul.single,
#secSweets .setWrap ul.single {
    justify-content: center;
}
#secFood .setWrap ul li,
#secSweets .setWrap ul li {
    width: 46%;
}
#secFood .setWrap ul.single li,
#secSweets .setWrap ul.single li {
    width: 100%;
}
#secFood .setWrap ul li figure img,
#secSweets .setWrap ul li figure img{
    width: 100%;
}
#secFood .setWrap ul li figure + p,
#secSweets .setWrap ul li figure + p{
    margin-top: 10px;
}

/* note */
#secFood .setWrap ul.note {
    width: auto;
}
#secFood .setWrap ul.note li {
    width: 100%;
}

/* lead */
.lead {
    width: 60%;
    margin: 50px auto 60px;
}

/* allergy */
#secAllergy  {
	margin-top: 50px;
	text-align: center;
}
#secAllergy p  {
	text-align: center;
}
#secAllergy p::before {
	content: "";
	display: inline-block;
	width: 12px;
	height: 15px;
	padding-left: 10px;
	background-image: url("../img/common/i_pdf.svg");
	background-repeat: no-repeat;
}

/* animation */
#secBeverage.fadein,
#secFood.fadein,
#secAllergy.fadein{
  opacity : 0.1;
  transform : translate(0, 200px);
  transition : all ease 1.2s;
}
#secBeverage.fadein.scrollin,
#secFood.fadein.scrollin,
#secAllergy.fadein.scrollin{
  opacity : 1;
  transform : translate(0, 0);
}

/* secTicket
--------------------------------------------------------- */
#secTicket{
	margin: 100px 0 0 0;
}
#secTicket .top20 {
    margin-top: 20px;
}


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

/* =========================================================
 #main
========================================================= */
	
#heading .inner figure{
	background-image: url("../img/menu/heading_sp.jpg");
}
#heading h1 {
    width: 90vw;
    padding-top: 70px;
    padding-bottom: 30px;
}
#heading h1 em{
    font-size: 8vw;
}

/* tabMenu
--------------------------------------------------------- */
 #tabMenu .inner {
    width: auto;
  }

/* secBeverage #secFood  #secSweets 共通
--------------------------------------------------------- */
#secBeverage,
#secFood,
#secSweets{
	margin: 50px 0 0 0;
}

#secBeverage .inner,
#secFood .inner,
#secSweets .inner{
	width: auto;
	margin: 0 15px;
}

#secBeverage h2 span,
#secFood h2 span,
#secSweets h2 span{
	font-size: 8vw;
}

#secBeverage h2 + p,
  #secFood h2 + p,
  #secSweets h2 + p{
	margin-bottom: 30px;
}
    
#secBeverage .note + h3,
#secFood .note + h3,
#secSweets .note + h3,
#secSweets .note + .itemWrap{
	margin-top: 30px;
}
  
#secBeverage .itemWrap .item,
#secFood .itemWrap .item,
#secSweets .itemWrap .item{
	width:48%;
	margin-left:4%;
}

#secBeverage .itemWrap .item:nth-child(3n+1),
#secFood .itemWrap .item:nth-child(3n+1),
#secSweets .itemWrap .item:nth-child(3n+1){
	margin-left:4%;
}

#secBeverage .itemWrap .item:nth-child(odd),
#secFood .itemWrap .item:nth-child(odd),
#secSweets .itemWrap .item:nth-child(odd){
	margin-left:0;
}

#secBeverage .itemWrap .item:nth-child(n+3),
#secFood .itemWrap .item:nth-child(n+3),
#secSweets .itemWrap .item:nth-child(n+3){
	margin-top: -1px;
}

#secBeverage .itemWrap .item.new:before,
#secFood .itemWrap .item.new:before,
#secSweets .itemWrap .item.new:before{
	width:60px;
	height:61px;
	background-size: 100% auto;
}

#secBeverage .itemWrap .item figure,
#secFood .itemWrap .item figure,
#secSweets .itemWrap .item figure{
	width: auto;
	height: auto;
}
#secBeverage .itemWrap .item figure img,
#secFood .itemWrap .item figure img,
#secSweets .itemWrap .item figure img{
	width: auto;
	height: auto;
}

#secBeverage .itemWrap .item .desc,
#secFood .itemWrap .item .desc,
#secSweets .itemWrap .item .desc{
	padding: 15px 15px 40px 0;
}

#secBeverage .itemWrap .item.limited .desc:before,
#secFood .itemWrap .item.limited .desc:before,
#secSweets .itemWrap .item.limited .desc:before{
	width: 80px;
	font-size:2.8vw;
	padding: 5px;
	margin: 0 0 10px 0;
}

#secBeverage .itemWrap .item .desc .name,
#secFood .itemWrap .item .desc .name,
#secSweets .itemWrap .item .desc .name{
	font-size: 4vw;
	margin: 0 0 10px 0;
}

#secBeverage .itemWrap .item .desc .name small,
#secFood .itemWrap .item .desc .name small,
#secSweets .itemWrap .item .desc .name small{
	font-size: 3vw;
	margin: 0 0 10px 0;
}
    
#secBeverage .itemWrap .item .desc .price,
#secFood .itemWrap .item .desc .price,
#secSweets .itemWrap .item .desc .price{
	font-size: 3vw;
}

#secBeverage .itemWrap .item .mask,
#secFood .itemWrap .item .mask,
#secSweets .itemWrap .item .mask{
	opacity:1;
	position:relative;
	width:auto;
	height:auto;
    margin-top: 20px;
	background-color:transparent;
	color:#201f1d;
	padding:0;
	font-size: 3vw;
}
    
/* set menu */
#secFood .setWrap {
}
#secFood .setWrap + h3,
#secSweets .setWrap + h3{
	margin-top: 80px;
}
#secFood .setWrap h4,
#secSweets .setWrap h4{
    margin-top: 50px;
	margin-bottom: 20px;
    font-size: 1.5rem;
}
#secFood .setWrap ul,
#secSweets .setWrap ul{
    flex-direction: column;
    justify-content: center;
    width: 90%;
}
#secFood .setWrap ul li,
#secSweets .setWrap ul li{
    width: 100%;
}
#secFood .setWrap ul li:nth-of-type(2),
#secSweets .setWrap ul li:nth-of-type(2){
    margin-top: 20px;
}
#secFood .setWrap ul li figure + p,
#secSweets .setWrap ul li figure + p{
    font-size: 1.4rem;
}
    
/* lead */
.lead {
    width: 100%;
    margin: 50px auto 60px;
}

/* secTicket
--------------------------------------------------------- */
  #secTicket .inner {
    width: auto;
    margin: 0 15px;
  }

}