@charset "utf-8";
/*一番上の画像*/
.top-photo {
margin: 100%;
height: 25vh;
background: url(../img/menulunch.jpg)no-repeat center center/cover;
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
z-index: -1;
}
.dinner>.top-photo {
background: url(../img/menu-dinner.jpg)no-repeat center 70%/130%;
}
.drink>.top-photo {
background: url(../img/menu-do.jpg)no-repeat left 35%/cover;
}
.deza>.top-photo{
background: url(../img/menu-dess.jpg)no-repeat 30% bottom/180%;
}



/*headerについて-------------*/
header {
height:25vh;
margin-top:50px;
padding-top: 8vh;
}
h1 {
width: 230px;
height: 70px;
margin: 0 auto;
font-size: 40px;
color: #fff;
text-align: center;
background: url(../img/h2.svg)no-repeat center bottom/contain;
text-shadow:0px 0px 8px #249B24;
}
/*タブメニューのタブ---------------*/
.all_area {
/*background: #fff;*/
}
.tab_area{
width: 100%;
margin: 0 auto;
overflow:hidden;
/*display:table;中央*/
display: flex;
justify-content:center;
align-items:baseline;
border-bottom: 3px solid #249b24;
}

.tab_area li{
/*Tab liの装飾*/
width:24%;
cursor: pointer;
/*コピペ先のやつ
vertical-align:middle;
display:table-cell;
*/
}
.tab_area li>p {
font-family: "メイリオ", sans-serif;
width: 90%;
margin: 0px auto ;
text-align:center;
font-size: 1.3rem;
line-height: 2;
color: #744b28;
}

.tab_area li.select>p {
/*アクティブタブの装飾*/
color:#c12c2c;
font-weight:bold;
font-size: 1.6rem;
}

/*タブメニューの内容---------------*/
.hide{display:none;}
.main {
color: #444;
}
.content_area{
/*Tabの内容を表示するエリアの装飾*/
text-align: center;
}

/*ランチについて*/
h2 {
margin: 20px 0;
color: #c12c2c;
font-size: 2rem;
font-weight:normal;
}
.content_area p {
/*ランチのp*/
font-size:1.4rem;
}
.content_area .photo {
width: 90%;
margin: 30px auto;
}
.content_area .photo img {
border: 3px solid #249b24;
}
/*ランチ以外のtypeについて*/

.type {
overflow: hidden;
}
.pctype-photo{
display: none;
}
.type h2 {
font-size: 1.8rem;
margin: 25px 0 15px
}
.type>dl {
width: 100%;
display:flex;
justify-content:center;
flex-wrap: wrap;
align-items:flex-end;
line-height: 1.3;
font-size: 1.2rem;

}
.type dt,.type dd {
margin-bottom: 10px;
}
.type dt {
width: 65%;
text-align: left;
/*background: #faa;*/
list-style: square;
/*
display: list-item;
list-style: square;リストの黒い四角
*/
}
.type dd {
width: 18%;
text-align: left;
/*background: #aaf;*/
}

/*ドリンク 文字が長いので*/
h3 {
text-align: left;
margin: 25px 0 10px 40px;
font-size: 1.6rem;
display: list-item;
list-style: square;
color: #000;
}
.vino {
width: 100%;
display:flex;
justify-content:center;
flex-wrap: wrap;
align-items:flex-end;
line-height: 1.2;
font-size: 1rem;
color: #444;
margin-bottom: 10px;
}
.vino>.name {
width: 60%;
text-align: left;
font-size: 1.6rem;
list-style: square;
}
.vino>.price {
width: 18%;
text-align: left;
}
.vino>.txt {
width: 78%;
text-align: left;

}
.sonota {
margin-top: 10px;
font-weight:bold;
font-size: 1.5rem;
color: #000;
}
/*メニューについて終わり*/
.odenwa {
text-align: center;
font-size: 1.2rem;
color: #744b28;
margin: 20px 0 10px;
}
/*footer*/

.end-tel {
display: block;
}
/*--------------------------------------------------------------*/
/*...【タブレットサイト】...*/
/*--------------------------------------------------------------*/
@media screen and (min-width:700px){

/*一番上の画像*/
.top-photo {
height: 310px;
}
.dinner>.top-photo {
background-position: center center;
}

/*headerについて-------------*/
header {
height:310px;
margin-top:0;
padding-top: 150px;
}
h1 {
width: 300px;
height:90px;
margin: 0 auto;
padding:0px;
font-size: 46px;
}
/*headerについて終わり*/
/*タブメニューのタブ---------------*/
.all_area {
}
.tab_area{
width: 100%;
}

.tab_area li{
/*Tab liの装飾*/
width:20%;
}
.tab_area li>p {
width: 80%;
font-size: 2.2rem;
line-height: 1.8;
}
.tab_area li.select>p {
font-size: 2.6rem;
}
/*タブレット タブメニューのタブ---------------*/
/*タブレット タブメニューの内容---------------*/
.hide{display:none;}
.main {
color: #444;
}
.content_area{
/*Tabの内容を表示するエリアの装飾*/
width:95%;
display: flex;
flex-wrap: wrap;
justify-content:space-around;
margin: 0 auto ;
}
    .lunch {
        justify-content: center;
    }
/*ランチについて*/
.lunch-right {
width: 50%;
padding: 50px 0 0;
}
.content_area .photo {
width: 45%;
padding: 90px 30px 90px 0;
margin: 0 ;
order: -1;
}
h2 {
margin: 0 0 30px;
color: #c12c2c;
font-size: 2rem;
font-weight:normal;
}
.content_area p {
/*ランチのp*/
font-size:1.4rem;
}

/*ランチ以外のtypeについて--*/
.type {
width: 46%;
overflow: hidden;
/*background: #afa;*/

}
.pctype-photo{
display: block;
}
.type-vino {
width: 100%
}
.type-vinowrap {
flex-grow: 2;
display: flex
}
.type h2 {
font-size: 1.8rem;
margin: 65px 0 15px
}
.type br {

}

.type>dl {
width: 100%;
display:flex;
justify-content:center;
flex-wrap: wrap;
align-items:flex-end;
line-height: 1.3;
font-size: 1.4rem;

}
.type dt,.type dd {
margin-bottom: 10px;
}
.type dt {
width: 80%;
text-align: left;
/*background: #faa;*/
list-style: square;
/*
display: list-item;
list-style: square;リストの黒い四角
*/
}
.type dd {
width: 18%;
text-align: left;
/*background: #aaf;*/
}

/*ドリンク 文字が長いので*/
.wine {
width: 45%;
margin: 0 auto;
}
h3 {
text-align: left;
margin: 5px 0 20px 30px;
font-size: 1.6rem;
display: list-item;
list-style: square;
color: #000;
}
.vino {
width: 100%;
display:flex;
justify-content:center;
flex-wrap: wrap;
align-items:flex-end;
line-height: 1.2;
font-size: 1rem;
color: #444;
margin-bottom: 15px;
}
.vino>.name {
width: 80%;
text-align: left;
font-size: 1.6rem;
list-style: square;
}
.vino>.price {
width: 18%;
text-align: left;
}
.vino>.txt {
width: 95%;
text-align: left;
font-size: 1.3rem;
line-height: 1.4;

}
.sonota {
margin-top: 10px;
font-size: 1.6rem;
}

.deza {
padding-bottom: 50px;
}

.deza dl {
margin-bottom: 20px;
}

/*メニューについて終わり*/
.odenwa {
font-size: 16px;
margin-bottom: 30px;
}




}

/*--------------------------------------------------------------*/
/*...【PCサイト】...*/
/*--------------------------------------------------------------*/
@media (min-width:1100px){

/*一番上の画像*/
.top-photo {
margin: 100%;
height: 45vh;
margin: auto;
}
.dinner>.top-photo {
background-position: center 45%;
background-size: cover;
}
.drink>.top-photo {
background-position: center 30%;
}
.deza>.top-photo {
background-position: center 95%;
background-size: 120%;
}

/*headerについて-------------*/
header {
height:45vh;
}
h1 {
width: 300px;
height:100px;
font-size: 6.0rem;
}
/*タブメニューのタブ---------------*/
.all_area {
}
.tab_area{
width: 100%;
}

.tab_area li{
/*Tab liの装飾*/
width:15%;
}
.tab_area li>p {
width: 75%;
margin: 0px auto 0;
text-align:center;
font-size: 2.6rem;
line-height: 2;
}

.tab_area li.select>p {
/*アクティブタブの装飾*/
font-size: 2.8rem;
color: #249b24;
}

/*タブメニューの内容---------------*/
.hide{display:none;}
.main {
color: #444;
}
.content_area{
/*Tabの内容を表示するエリアの装飾*/
width:85%;
text-align: center;
display: flex;
flex-wrap: wrap;
justify-content:space-around;
margin: 0 auto 50px;
}
    .lunch {
        justify-content: center;
    }
/*ランチについて*/
.lunch-right {
width: 45%;
padding: 80px 30px 0 0;
}
.content_area .photo {
width: 55%;
padding: 90px 40px 90px 0;
margin: 0 ;
order: -1;
}
h2 {
margin: 0 0 30px;
color: #c12c2c;
font-size: 2.6rem;
font-weight:normal;
}
.content_area p {
/*ランチのp*/
font-size:1.4rem;
}

/*ランチ以外のtypeについて*/
.type {
width: 45%;
overflow: hidden;
/*background: #afa;*/

}
.pctype-photo{
display: block;
}
.type-vino {
width: 100%
}
.type-vinowrap {
flex-grow: 2;
display: flex
}
.type h2 {
font-size: 2.8rem;
margin: 65px 0 15px
}
.type br {
display: none;
}

.type>dl {
width: 100%;
display:flex;
justify-content:center;
flex-wrap: wrap;
align-items:flex-end;
line-height: 1.3;
font-size: 1.6rem;

}
.type dt,.type dd {
margin-bottom: 10px;
}
.type dt {
width: 80%;
text-align: left;
/*background: #faa;*/
list-style: square;
}
.type dd {
width: 18%;
text-align: left;
/*background: #aaf;*/
}

/*ドリンク 文字が長いので*/
h3 {
text-align: left;
margin: 25px 0 10px 40px;
font-size: 1.6rem;
display: list-item;
list-style: square;
color: #000;
}
.vino {
width: 100%;
display:flex;
justify-content:center;
flex-wrap: wrap;
align-items:flex-end;
line-height: 1.2;
color: #444;
margin-bottom: 10px;
}
.vino>.name {
width: 80%;
text-align: left;
font-size: 1.6rem;
list-style: square;
}
.vino>.price {
width: 18%;
text-align: left;
}
.vino>.txt {
width: 90%;
text-align: left;
font-size: 14px;
color: #777;
}
.sonota {
margin-top: 10px;
font-size: 1.6rem;
}
/*メニューについて終わり*/
/*footer*/
footer {
margin-top: 0px;
}










}