@charset "UTF-8";

/* =========================================
   BASE STYLES
   ========================================= */
html {
    scroll-behavior: auto !important;
}

body {
    background-color: #f6f6f6;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    color: #232323;
    overflow-anchor: none !important;
}

header.header, #masthead, .site-header { display: none !important; }

/* =========================================
   PAGE HEADER
   ========================================= */
.lsl-page-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding-top: 24px !important;
    padding-bottom: 20px !important;
    margin: 0 !important;
}

.lsl-venue-name { font-size: 15px !important; font-weight: bold !important; letter-spacing: 0.15em !important; margin-bottom: 6px !important; opacity: 0.8 !important; text-align: center !important; color: #333 !important; display: block !important; }
.lsl-menu-title { font-size: 32px !important; font-weight: 900 !important; line-height: 1 !important; letter-spacing: 0.05em !important; margin: 0 !important; text-align: center !important; color: #333 !important; display: block !important; }

/* ★変更：マージン調整を追加 */
.lsl-payment-notice { 
    /* ▼▼▼ ここで上下の余白を変更できます ▼▼▼ */
    margin-top: 24px !important;    /* 「ご注文〜」の上の余白 */
    margin-bottom: 18px !important; /* 「キャッシュレス〜」の下の余白 */
    /* ▲▲▲ ここまで ▲▲▲ */
    
    font-size: 1rem !important; 
    font-weight: bold !important; 
    color: #C95197 !important; 
    text-align: center !important; 
    width: 100% !important; 
    display: block !important; 
    line-height: 1.6 !important; /* 改行して2行になるため行間を追加 */
}

/* =========================================
   TAB NAVIGATION
   ========================================= */
.tab-nav {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 0 auto 30px;
    padding: 0;
    list-style: none;
    max-width: 600px;
    position: relative; 
    z-index: 10;
}

.tab-item {
    padding: 12px 40px;
    background-color: #fff;
    color: #888;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 30px;
    cursor: pointer;
    width: 45%;
    text-align: center;
    letter-spacing: 0.05em;
    border: 1px solid #ddd;
    -webkit-tap-highlight-color: transparent;
}

.tab-item.active {
    background-color: #333;
    color: #fff;
    border-color: #333;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* =========================================
   TAP LIST STYLES (レイアウト変更版)
   ========================================= */
#taplist-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 60px;
    box-sizing: border-box;
    min-height: 100vh; 
}

.taplist-grid {
    display: grid;
    gap: 40px; 
    grid-template-columns: 1fr;
}
@media (min-width: 768px) {
    .taplist-grid { grid-template-columns: 1fr 1fr; gap: 50px; }
}

.taplist-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    transform: translateZ(0); /* ← ★追加：iPhone等で画像が角丸を突き破るのを防ぐ魔法 */
}

/* ▼▼▼ 画像エリア 80% : 番号 20% ▼▼▼ */
.taplist-header-row {
    display: flex;
    align-items: stretch;
    width: 100%;
    border-bottom: 1px solid #eee;
}

/* 左側：番号エリア (20%) */
.taplist-number-box {
    width: 20%;
    background-color: #232323;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* バッジが乗る分、上を少し空ける */
    padding: 24px 2px 4px 2px;
    box-sizing: border-box;
    border-radius: 8px 0 0 0; 
    position: relative;
}

/* バッジのスタイル変更：左上だけ角丸 (7px) */
.taplist-badge { 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; 
    padding: 6px 0;
    font-size: 12px;
    font-weight: bold;
    color: #333; 
    text-align: center;
    z-index: 5;
    line-height: 1;
    /* ★ここがポイント：左上だけ7px、他は0 */
    border-radius: 7px 0 0 0; 
    /* ▼▼▼ 追加：影を強制的に消去する強力なおまじない ▼▼▼ */
    box-shadow: none !important;
    text-shadow: none !important;
    /* ▲▲▲ ここまで ▲▲▲ */
}
.badge-new { background-color: #f5fd00; }
.badge-out { background-color: #757575; }
.badge-award { background-color: #fbc02d; color: #333; }

.taplist-number-label {
    font-size: 0.7rem;
    font-weight: bold;
    letter-spacing: 0.1em;
    opacity: 0.7;
    margin-bottom: 0;
    line-height: 1;
}

.taplist-number-text {
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 2rem; 
    font-weight: 700;
    font-style: italic;
    line-height: 1;
}

/* 右側：画像エリア (80%) */
.taplist-image {
    width: 80%;
    background: #f5f5f5;
    position: relative;
    min-height: 140px;
    border-radius: 0 !important; /* 親枠の丸みを強制リセット */
}

.taplist-image img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    display: block; 
    /* ★ここがトドメ！左上0、右上8px、右下0、左下0 に強制指定 */
    border-radius: 0 8px 0 0 !important; 
}

.taplist-no-image { 
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: #eee; 
    color: #ccc; 
    font-weight: bold; 
}

.taplist-body { padding: 20px; }

.taplist-title { margin: 0 0 10px 0; line-height: 1.3; }
.taplist-title .title-en { display: block; font-size: 1.5rem; font-weight: bold; color: #333; margin-bottom: 4px; }
.taplist-title .title-jp { display: block; font-size: 0.875rem; font-weight: normal; color: #888; }

.taplist-specs { list-style: none; padding: 0; margin: 0 0 15px 0; display: flex; flex-wrap: wrap; gap: 10px; font-family: sans-serif; }
.taplist-specs li { font-size: 0.8125rem; color: #555; background: #f0f0f0; padding: 4px 8px; border-radius: 4px; }
.taplist-specs .spec-label { font-weight: bold; }
.taplist-note { font-size: 1rem; line-height: 1.7; color: #333; margin-bottom: 20px; }

.taplist-prices { display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; width: 100% !important; gap: 0; border-top: 1px solid #eee; padding-top: 15px; margin-top: auto; }
.price-item { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; border-right: 1px solid #eee; }
.price-item:last-child { border-right: none; }
.price-label { font-size: 0.9rem; color: #424242; margin-bottom: 2px; }
.price-value { font-size: 1.2rem; font-weight: bold; color: #333; }

/* =========================================
   FOOD & DRINK STYLES
   ========================================= */
.other-menu-wrapper { width: 100% !important; margin: 0 auto !important; padding: 0; box-sizing: border-box; display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 768px) { .other-menu-wrapper { grid-template-columns: 1fr 1fr; align-items: start; } }

.food-category-card { padding: 2.5rem 2rem; background: #fff; }
.food-card-heading { text-align: center; font-size: 1.375rem; font-weight: 900; margin: 0 0 2rem 0; color: #333; letter-spacing: 0.1em; border-bottom: 2px solid #eee; padding-bottom: 1rem; }
.food-list { display: flex; flex-direction: column; gap: 1rem; }
.food-row { display: flex; align-items: baseline; justify-content: space-between; width: 100%; }
.food-name { font-size: 1rem; font-weight: bold; color: #333; flex-shrink: 0; }
.food-line { flex-grow: 1; margin: 0 1rem; border-bottom: 1px dotted #ccc; position: relative; top: -5px; }
.food-price { font-size: 1.125rem; font-weight: bold; color: #333; flex-shrink: 0;
    font-family: 'Montserrat', sans-serif !important;
}


/* ★追加：「ぐうぐうのインスタ」リンク用スタイル */
.guuguu-link {
    display: block;
    margin-top: 30px; /* 上との間隔 */
    padding: 10px;
    border: 1px solid #ccc; /* 細い罫線 */
    background-color: #fcfcfc; /* ほんの少し目立つ薄い背景 */
    color: #333;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.95rem;
    border-radius: 4px;
    transition: all 0.2s ease;
    width: 80%; /* 幅を少し狭めて中央寄せ */
    margin-left: auto;
    margin-right: auto;
}

.guuguu-link:active,
.guuguu-link:hover {
    background-color: #eee;
    border-color: #bbb;
}

/* ★追加：日替わりメニュー下のテキスト(gugu_txt) */
.gugu-text {
    text-align: center;
    font-size: 0.95rem;
    color: #333;
    margin-top: -1rem;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

/* ★追加：売り切れ表示スタイル */
.sold-out {
    opacity: 0.25;
    pointer-events: none;
}