@charset "utf-8";

/*============================
pageSet
============================*/


/*============================
contents
============================*/

.contents { margin-top: 40px; }
.contents + .contents { margin-top: 80px; }

.contentTitle { text-align: center; }
.contentTitle .text { display: inline-block; padding-bottom: 5px; border-bottom: 1px solid #aaa; font-size: 20px; letter-spacing: 0.2em; }
.contentTitle .text .sub { margin-left: 10px; font-size: 14px; color: #666; }
.contentTitle .text .lo:before { content: "（"; margin: 0 5px 0 -2px; }
.contentTitle .text .lo:after { content: "）"; margin-left: 2px; }

/*aboutArea*/
.aboutArea { display: table; width: 100%; margin-top: 30px; }
.aboutArea .left,
.aboutArea .right { display: table-cell; vertical-align: top; }
.aboutArea .left { background: #f7f5f0; padding: 30px 30px 25px; }
.aboutArea .left .title { font-weight: bold; font-size: 15px; }
.aboutArea .left .body { margin-top: 10px; }
.aboutArea .left .sub { margin-top: 15px; font-size: 13px; }
.aboutArea .left .sub:before { display: inline-block; content: ""; margin-right: 3px; position: relative; top: 2px; height: 15px; width: 10px; background: url(../../imgFile/icon_shape.svg)no-repeat center center; background-size: 10px; }
.aboutArea .left .sub em:after { content: "："; }
.aboutArea .right { width: 190px; }

/*photoArea*/
.photoArea { margin-top: 40px; }
.photoArea .img { height: 400px; width: 100%; background-size: cover; }

.photoArea.photoArea--2clm { display: flex; }
.photoArea.photoArea--2clm .img { width: calc((100% - 30px)/2); height: 280px; }
.photoArea.photoArea--2clm .img + .img { margin-left: 30px; }

.photoArea.photoArea--3clm { display: flex; }
.photoArea.photoArea--3clm .img { width: calc((100% - 30px)/3); height: 200px; }
.photoArea.photoArea--3clm .img + .img { margin-left: 30px; }

.contents.contents--01 .photoArea.photoArea--sp { display: none; }

/*menuArea*/
.menuArea { margin-top: 40px; }
.menuArea .item { font-size: 16px; font-weight: bold; letter-spacing: 0.1em; }
.menuArea .item:before { display: inline-block; content: ""; margin-right: 7px; position: relative; top: 1px; height: 15px; width: 12px; background: url(../../imgFile/icon_shape.svg)no-repeat center center; background-size: 12px; }
.menuArea .item + .item { margin-top: 5px; }
.menuArea .price { padding-left: 15px; color: #666; font-size: 15px; font-weight: normal; letter-spacing: 0.1em; }

.menuArea .lunchMenu { display: table; width: 100%; }
.menuArea .lunchMenu + .lunchMenu { margin-top: 30px; }
.menuArea .lunchMenu .leftSet,
.menuArea .lunchMenu .rightSet { display: table-cell; vertical-align: top; }
.menuArea .lunchMenu .leftSet { width: 35%; }
.menuArea .lunchMenu .rightSet { padding-left: 20px; border-left: 1px solid #ddd; }
.menuArea .lunchMenu .rightSet .text {}
.menuArea .lunchMenu .rightSet .link { margin-top: 10px; }
.menuArea .lunchMenu .rightSet .link a { margin-right: 3px; color: #9b1; }
.menuArea .lunchMenu .rightSet .link:before { display: inline-block; content: ""; height: 12px; width: 20px; background: url(../../imgFile/icon_arrow_right.svg)no-repeat center center; background-size: 6px; }

.menuArea .teaMenu { display: table; width: 100%; }
.menuArea .teaMenu .leftSet,
.menuArea .teaMenu .rightSet { display: table-cell; vertical-align: top; }

.menuArea .teaMenu .title { padding-bottom: 30px; font-size: 18px; font-weight: bold; letter-spacing: 0.1em; }
.menuArea .teaMenu .item { font-size: 14px; text-indent: -20px; padding-left: 20px; }
.menuArea .teaMenu .item:before { background-size: 10px; }
.menuArea .teaMenu .price { font-size: 14px; }
.menuArea .teaMenu .info { margin: 10px 0 30px 20px; color: #666; }
.menuArea .other { margin-top: 30px; }



/*----------------------------------------
　　　　　　　　以下、SP用の指定
----------------------------------------*/


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

.contentArea { max-width: 100%; min-width: 100%; }
.contentTitle .text { font-size: 18px; }
.contentTitle .text .sub { margin-left: 0; display: block; font-size: 12px; }
.contents + .contents { margin-top: 60px; }

.aboutArea { display: block; background: #f7f5f0; padding: 20px; }
.aboutArea .left, .aboutArea .right { display: block; }
.aboutArea .right { width: 100%; height: 120px; }
.aboutArea .left { padding: 0 0 15px; }
.aboutArea .left .body { font-size: 13px; }

.contents.contents--01 .aboutArea .right { background: url(imgFile/menu_about_01.jpg) no-repeat center -50px; }
.contents.contents--01 .photoArea { display: none; }
.contents.contents--01 .photoArea.photoArea--sp { display: block; }

.photoArea .img { height: 200px; }
.photoArea.photoArea--3clm .img + .img,
.photoArea.photoArea--2clm .img + .img { margin-left: 5px; }
.photoArea.photoArea--2clm .img { width: calc((100% - 5px)/2); height: 150px; } 
.photoArea.photoArea--3clm .img { width: calc((100% - 10px)/3); height: 120px; }

.menuArea { margin-top: 20px; }
.menuArea .lunchMenu { display: block; }
.menuArea .lunchMenu .leftSet, .menuArea .lunchMenu .rightSet { display: block; width: 100%; }
.menuArea .lunchMenu .rightSet { margin-top: 15px; padding-left: 15px; }

.menuArea .teaMenu,
.menuArea .teaMenu .leftSet, .menuArea .teaMenu .rightSet { display: block; width: 100%; }
.menuArea .teaMenu { margin-top: 30px; }
.menuArea .teaMenu .title { padding-bottom: 20px; }
.menuArea .teaMenu .rightSet { margin-top: 40px; }



}