@charset "UTF-8";
.second { padding: 0; }
.second-text { width: 100%; }
.second-text img { width: 100%; }
.pcx { display: none; }

.menulist { background:url(../images/menu/menulist-bg.jpg)no-repeat top center ,#f9f7f4; background-size: 210%; padding: 16vw 0 14vw 0; }
.menulist .title { font-family: "baskerville-urw"; font-weight: 400; text-align: center; font-size: 9.5vw; letter-spacing: 3px; line-height: 1.4; color: #c19d52; margin-bottom: 6vw; }
.menulist .title span { display: block; font-size: 40%; font-family: var(--mincho); color: #666; letter-spacing: 1px; }
.menulist .subs { font-family: var(--mincho); width:90%; margin:0 auto 6vw; text-align: center; }
.menulist .items { width: 90%; margin: 0 auto; }
.menulist .items p { margin-bottom: 0; }
.menulist .items >li { border:1px solid #ccc; background: #fff; margin-bottom: 4vw; }
.menulist .name { font-family: var(--mincho); font-weight: 600; padding: 3% 3% 3% 7%; font-size: 4.2vw; line-height: 1.6; position: relative; }
.menulist .name:before { content: ""; width: 2px; height: 45%; background: #e3c69f; position: absolute; left: 4%; top: 28%; }
.menulist .s-list { padding: 0 3%; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: box; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: left; justify-content: left; margin-bottom: 4%; }
.menulist .s-list li { background: #666; color: #fff; padding: 1% 5%; margin-right: 2vw; font-weight: bold; border-radius: 60px; font-size: 95%; }
.menulist .s-list li.l { background: #e0adb2; }
.menulist .s-list li.s { background: #d27575; }
.menulist .s-list li.v { background: #dac4a7; }
.menulist .txt { text-align: justify; background: #f4efe4; padding: 3%; line-height: 1.4; font-size: 95%; border-top: 1px dashed #ccc; }
.menulist .campaign-item-price {padding: 4% 3%;color: #272727;line-height: 1.4;font-size: 5vw;font-family: var(--mincho);border-top: 1px dashed #ccc;background: #e5dbca;display: -webkit-box;display: -webkit-flex;display: flex;-webkit-justify-content: center;justify-content: center;-webkit-align-items: center;align-items: center;-webkit-flex-wrap: wrap;flex-wrap: wrap;gap: 0 8%;}
.menulist .campaign-item-price .normal { position: relative; }
.menulist .campaign-item-price .normal::before { content: ''; width: 60%; height: 1px; background: #272727; position: absolute; top: 50%; left: 24%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.menulist .campaign-item-price .normal::after { content: '\f105'; margin: 0 2.5vw; color: #272727; font-size: 3.42vw; font-family: 'icon'; opacity: 0.6; position: relative; top: -1px; left: 2%; display: inline-block; transform: rotate(90deg); }
.menulist .campaign-item-price .special { padding: 2% 2% 2% 4%; color: #c19d52; font-size: 180%; font-weight: bold; text-align: center; line-height: 1.4;background: #fff;}
.menulist .campaign-item-price > span { width: 60%; padding: 2% 2% 2% 6%; background: #fff; }
.menulist .campaign-item-price > span .special { font-size: 7.6vw; background: none; }
.menulist .campaign-item-price > span .normal { margin: 0 0 -3% 8%; font-size: 90%; display: block; }
.menulist .campaign-item-price > span .tax { font-size: 40%;  }
.menulist .campaign-item-price .tax { color: #272727; font-size: 55%; }
.menulist .campaign-item-price a {width: 20vw;height: 20vw;color: #fff;padding: 6% 0;font-size: 3.5vw;font-family: var(--gothic);font-weight: bold;text-align: center;background: #c9ad74;border-radius: 50px;position: relative;}
.menulist .campaign-item-price a::after { content: '\f105'; color: #fff; font-size: 4vw; font-family: 'icon'; font-weight: bold; position: absolute; bottom: 1px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: rotate(90deg); -webkit-transform: rotate(90deg);  }

/* =============================================
pc-size 
================================================*/ 
@media screen and (min-width: 736px) {
.intro { margin-bottom: 160px; margin-top: -40px; }
.intro .title { font-size: 30px; margin-bottom: 30px; }

.menulist { background: url(../images/menu/menulist-bg.jpg) no-repeat top center, #f9f7f4; background-size: contain; padding: 120px 0 80px 0; }
.menulist .title { font-size: 50px; background: url(../images/deco01@2x.png) no-repeat top center; background-size: 140px; padding-top: 40px; margin-bottom: 40px; }
.menulist .subs { margin-bottom: 40px; }
.menulist .items { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: box; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; max-width: 1200px; }
.menulist .items > li { width: 48%; }
.menulist .items p { font-size: 14px; padding: 20px; }
.menulist .items .txt { padding: 10px 20px 10px 20px; min-height: 118px; }
.menulist .s-list { margin: 0; padding: 0 20px 20px 20px; }
.menulist .s-list li { margin-right: 10px; }
.menulist .items .name { font-size: 18px; padding: 15px 4px 11px 42px; }
.menulist .items li:nth-child(8) .name { font-size: 16px; padding: 15px 4px 18px 42px; }
.menulist .name::before { left: 25px; }
.menulist .items .campaign-item-price { padding: 10px; gap: 0 20px; }
.menulist .campaign-item-price .normal::before { width: 80px; top: 46%; left: 35px; }
.menulist .campaign-item-price .normal::after { font-size: 18px; transform: rotate(90deg); -webkit-transform: rotate(90deg); }
.menulist .campaign-item-price .special { font-size: 28px; padding: 10px 10px 10px 30px; }
.menulist .campaign-item-price > span { padding: 10px 10px 0 20px; }
.menulist .campaign-item-price > span .special { padding: 0 0 0 12px; font-size: 28px; display: block; }
.menulist .campaign-item-price > span .normal { margin: 0 0 -5px 16px; font-size: 18px; display: block; line-height: 1; }
.menulist .campaign-item-price > span .tax { font-size: 40%; }
.menulist .campaign-item-price .tax { font-size: 55%; }
.menulist .campaign-item-price a { width: 90px; height: 90px; padding: 18px 0; font-size: 16px; }
.menulist .campaign-item-price a::after { font-size: 24px; bottom: -1px; }
}

@media screen and (min-width: 900px) {
.menulist .items > li { width: 48%; margin-bottom: 18px; }
.menulist .items .name { font-size: 18px; }
.menulist .items li:nth-child(8) .name { font-size: 18px; padding: 15px 4px 11px 42px; }
.menulist .items .txt { min-height: 100px; }
.menulist .campaign-item-price .special { padding: 10px 10px 10px 30px; }
.menulist .campaign-item-price > span { padding: 10px 10px 0 30px; }
}

@media screen and (min-width: 1000px) {
.name .pcx { display: block; }
.menulist .items .name { padding: 15px 4px 11px 42px; }
.menulist .items > li { width: 48%; margin-bottom: 18px; }
.menulist .campaign-item-price .special { padding: 10px 10px 10px 30px; }
}

@media screen and (min-width: 1200px) {
.menulist .subs { width: 1200px; text-align: center; }
.menulist .items .name { padding: 10px 4px 10px 39px; }
.menulist .items li:nth-child(8) .name { font-size: 16px; }
.menulist .items .txt { padding: 10px 20px 10px 20px; }
.menulist .name:before { top: 16px; width: 4px; }
}

@media screen and (min-width: 1260px) {
.menulist .items > li { width: 32%; background: #fff; position: relative; }
.menulist .items .txt { min-height: 120px; }
.menulist .campaign-item-price > span { padding: 10px 10px 0 36px; }
.menulist .campaign-item-price > span .normal { margin: 0 0 -12px 16px; }
.menulist .campaign-item-price > span .special { padding: 10px; }
.menulist .items .txt { padding: 18px 20px 10px 20px; }
}

@media screen and (min-width: 736px) and (-webkit-min-device-pixel-ratio: 2), screen and (min-width: 736px) and (min-resolution: 2dppx) {
.menulist { background: url(../images/menu/menulist-bg@2x.jpg) no-repeat top center, #f9f7f4; background-size: contain; }
}