/* =========================
   Theme
========================= */

:root{

  /* Color */

  --color-bg:#f5f5f5;
  --color-card:#ffffff;
  --color-text:#222;
  --color-sub:#666;

  --color-primary:#222;
  --color-success:#28a745;
  --color-danger:#dc3545;

  --color-border:#ddd;

  /* Radius */

  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:24px;
  --radius-pill:999px;

  /* Shadow */

  --shadow-sm:
    0 2px 8px rgba(0,0,0,.06);

  --shadow:
    0 4px 12px rgba(0,0,0,.08);

  /* Space */

  --space-xs:8px;
  --space-sm:12px;
  --space-md:16px;
  --space-lg:24px;
  --space-xl:40px;

}

/* =========================
   Reset
========================= */

*{

  margin:0;
  padding:0;

  box-sizing:border-box;

}

html{

  -webkit-text-size-adjust:100%;

  scroll-behavior:smooth;

}

img{

  display:block;

  max-width:100%;

}

button,
input,
textarea,
select{

  font:inherit;

}

/* =========================
   Base
========================= */

body{

  min-height:100dvh;

  font-family:

    "Yu Gothic",
    "Hiragino Sans",
    sans-serif;

  background:

    var(--color-bg);

  color:

    var(--color-text);

  padding-bottom:

    env(safe-area-inset-bottom);

}

/* =========================
   Layout
========================= */

.container{

  width:min(100%,1200px);

  margin:auto;

  padding-inline:

    var(--space-md);

}

/* =========================
   Header
========================= */

header{

  position:sticky;

  top:0;

  z-index:1000;

  background:#fff;

  border-bottom:

    1px solid var(--color-border);

}

.header-inner{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:var(--space-md);

  padding:

    var(--space-md) 0;

}

/* =========================
   Header
========================= */

header{

  position:sticky;

  top:0;

  z-index:1000;

  background:#fff;

  border-bottom:

    1px solid var(--color-border);

}

.header-inner{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:var(--space-md);

  padding:

    var(--space-md) 0;

}

/* =========================
   Hero
========================= */

.hero img{

  width:100%;

  height:360px;

  object-fit:cover;

}

/* =========================
   Products
========================= */

.products{

  padding:

    var(--space-xl) 0 70px;

}

.section-title{

  text-align:center;

  margin-bottom:

    var(--space-lg);

}

.section-title h2{

  font-size:clamp(

    28px,

    5vw,

    40px

  );

}

.category-scroll{

  display:flex;

  gap:10px;

  overflow-x:auto;

  padding-bottom:4px;

  margin-bottom:

    var(--space-lg);

  scrollbar-width:none;

}

.category-scroll::-webkit-scrollbar{

  display:none;

}

.category-scroll button{

  white-space:nowrap;

  border:

    1px solid var(--color-border);

  background:#fff;

  padding:

    10px 16px;

  border-radius:

    var(--radius-pill);

}

.product-grid{

  display:grid;

  grid-template-columns:1fr;

  gap:24px;

}

.product-card{

  display:flex;

  flex-direction:column;

  height:100%;

  background:#fff;

  border-radius:

    var(--radius-lg);

  overflow:hidden;

  box-shadow:

    var(--shadow-sm);

  transition:.2s;

}

.product-card:hover{

  transform:

    translateY(-3px);

}

.product-card img{

  width:100%;

  height:220px;

  object-fit:cover;

}

.product-content{

  display:flex;

  flex-direction:column;

  flex:1;

  padding:18px;

}

.product-content h3{

  margin-bottom:10px;

  font-size:22px;

}

.product-content p{

  margin-bottom:12px;

  color:var(--color-sub);

}

.price{

  margin-bottom:18px;

  font-size:28px;

  font-weight:bold;

}

.product-content button{

  margin-top:auto;

}

/* =========================================================
   ⑫ Buttons
========================================================= */

button,
.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:48px;

    padding:14px 20px;

    border:none;

    border-radius:16px;

    cursor:pointer;

    font-size:16px;

    font-weight:bold;

    transition:.2s;

}

button:hover,
.btn:hover{

    opacity:.92;

}

button:active,
.btn:active{

    transform:scale(.98);

}

.btn-primary{

    background:#222;

    color:#fff;

}

.btn-success{

    background:#28a745;

    color:#fff;

}

.btn-danger{

    background:#dc3545;

    color:#fff;

}

.back-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-bottom:20px;

    padding:12px 20px;

    background:#222;

    color:#fff;

    text-decoration:none;

    border-radius:16px;

}

.order-btn{

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

    margin-top:20px;

    background:#222;

    color:#fff;

    text-decoration:none;

    font-size:20px;

    min-height:56px;

    border-radius:18px;

}

.clear-btn{

    width:100%;

    background:#dc3545;

    color:#fff;

    margin-top:24px;

}

/* =========================================================
   ⑬ Forms
========================================================= */

.form-area{

    background:#fff;

    padding:24px;

    border-radius:20px;

    box-shadow:var(--shadow-sm);

}

.form-area label{

    display:block;

    margin-top:16px;

    margin-bottom:6px;

    font-weight:bold;

}

input,
select,
textarea{

    width:100%;

    padding:14px;

    border:1px solid #ddd;

    border-radius:14px;

    font-size:16px;

    background:#fff;

}

input:focus,
select:focus,
textarea:focus{

    outline:none;

    border-color:#2196f3;

    box-shadow:0 0 0 3px rgba(33,150,243,.15);

}

textarea{

    min-height:120px;

    resize:vertical;

}

/* =========================================================
   ⑭ Gallery
========================================================= */

.shop-gallery{

    padding:60px 0;

}

.shop-gallery h2{

    text-align:center;

    margin-bottom:30px;

    font-size:36px;

}

.gallery-grid{

    display:grid;

    grid-template-columns:1fr;

    gap:20px;

}

.gallery-grid img{

    width:100%;

    aspect-ratio:4/3;

    object-fit:cover;

    border-radius:20px;

}

@media(min-width:768px){

    .gallery-grid{

        grid-template-columns:repeat(3,1fr);

    }

}

/* =========================================================
   ⑮ Cart
========================================================= */

.cart-summary{

    background:#fff;

    padding:18px;

    margin:24px 0;

    border-radius:18px;

    font-size:18px;

    font-weight:bold;

    text-align:center;

    box-shadow:var(--shadow-sm);

}

.cart-footer{

    position:fixed;

    left:0;

    right:0;

    bottom:0;

    background:#fff;

    border-top:1px solid #ddd;

    padding:16px;

    padding-bottom:calc(16px + env(safe-area-inset-bottom));

    z-index:999;

}

.cart-actions{

    display:flex;

    gap:12px;

}

.cart-actions>*{

    flex:1;

}

/* =========================================================
   ⑯ POS
========================================================= */

.pos-header{

    background:#111;

    color:#fff;

    text-align:center;

    padding:14px;

}

.pos-layout{

    display:grid;

    grid-template-columns:1fr;

    gap:16px;

    padding:16px;

}

.pos-panel{

    background:#fff;

    border-radius:16px;

    padding:16px;

    box-shadow:var(--shadow-sm);

}

.pos-products{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:16px;

}

.reservation-card{

    background:#fff;

    padding:16px;

    border:1px solid #ddd;

    border-radius:14px;

    cursor:pointer;

    transition:.2s;

}

.reservation-card.selected{

    border:3px solid #28a745;

}

.reservation-card.checked-in{

    opacity:.5;

    filter:grayscale(1);

}

/* =========================================================
   ⑰ Calendar
========================================================= */

.calendar-day.selected{

    background:#2196f3;

    color:#fff;

    border:2px solid #1565c0;

}

.calendar-day.selected
.calendar-date,

.calendar-day.selected
.calendar-status{

    color:#fff;

}

.calendar-day.available:hover,
.calendar-day.few:hover{

    background:#e3f2fd;

    cursor:pointer;

}

/* =========================================================
   ⑱ Responsive
========================================================= */

@media(min-width:768px){

    .pos-layout{

        grid-template-columns:
        1fr 1fr;

    }

}

@media(min-width:1024px){

    .pos-layout{

        grid-template-columns:
        1fr 1fr 1fr;

    }

}

@media(max-width:767px){

    .section-title h2{

        font-size:30px;

    }

    .product-content h3{

        font-size:20px;

    }

    .price{

        font-size:24px;

    }

    .order-btn{

        font-size:18px;

    }

}

/* =========================================================
   ⑲ Staff Menu
========================================================= */

.staff-menu{

    display:grid;

    gap:18px;

    margin:24px 0;

    padding-bottom:
        calc(
            24px +
            env(safe-area-inset-bottom)
        );

}

.staff-menu-btn{

    display:flex;

    align-items:center;

    gap:18px;

    min-height:88px;

    padding:20px;

    background:#fff;

    color:#222;

    text-decoration:none;

    border-radius:20px;

    box-shadow:var(--shadow-sm);

    transition:.2s;

}

.staff-menu-btn:hover{

    transform:translateY(-2px);

}

.staff-menu-btn:active{

    transform:scale(.98);

}

.staff-icon{

    font-size:34px;

    width:44px;

    text-align:center;

    flex-shrink:0;

}

.staff-menu-btn span:last-child{

    font-size:22px;

    font-weight:bold;

}

@media(min-width:768px){

    .staff-menu{

        max-width:600px;

        margin:30px auto;

    }

}

.staff-product.selected{

  background:#eaf8ea;

  border:2px solid #28a745;

}

/* =========================
   現在受付中
========================= */

.current-reservation{

  background:#ffffff;

  border-radius:16px;

  padding:20px;

  box-shadow:0 3px 10px rgba(0,0,0,.08);

}

.current-header{

  display:flex;

  justify-content:space-between;

  align-items:center;

  margin-bottom:15px;

}

.current-status{

  display:inline-block;

  background:#28a745;

  color:#fff;

  padding:6px 12px;

  border-radius:999px;

  font-size:14px;

  font-weight:bold;

}

.current-name{

  font-size:28px;

  font-weight:bold;

  margin-bottom:10px;

}

.current-info{

  margin:6px 0;

  font-size:17px;

}

.current-total{

  background:#f8f8f8;

  padding:15px;

  border-radius:12px;

  margin-top:15px;

}

.current-total h2{

  margin-top:10px;

  font-size:30px;

  color:#d32f2f;

}

.empty-state{

  text-align:center;

  color:#888;

  padding:40px 10px;

}

/* =========================
   Tablet Layout
========================= */

.tablet-layout{

  display:flex;

  flex-direction:column;

  gap:20px;

  padding-bottom:280px;

}

.tablet-layout .panel{

  background:#fff;

  border-radius:18px;

  padding:18px;

  box-shadow:0 3px 10px rgba(0,0,0,.08);

}

.tablet-layout h2{

  margin-bottom:15px;

}

/* 商品 */

#productArea{

  display:none;

}

/* 商品グリッド */

#optionGrid,
#drinkGrid{

  display:grid;

  grid-template-columns:
    repeat(2,1fr);

  gap:15px;

}

/* スマホ */

@media(max-width:768px){

  #optionGrid,
  #drinkGrid{

    grid-template-columns:1fr;

  }

}

/* カート */

.cart-footer{

  position:fixed;

  bottom:0;

  left:0;

  right:0;

  background:#fff;

  padding:15px;

  border-top:2px solid #ddd;

  box-shadow:0 -3px 10px rgba(0,0,0,.1);

}

.cart-buttons{

  display:flex;

  gap:10px;

}

.cart-buttons button{

  flex:1;

}

/* =========================
   Tablet 商品カード
========================= */

#productArea .product-card{

  border-radius:18px;

}

#productArea img{

  height:180px;

}

#productArea button{

  padding:18px;

  font-size:18px;

}

/*=========================
営業日管理カレンダー
=========================*/

.calendar-container{

  max-width:900px;

  margin:auto;

}

.calendar-header{

  display:flex;

  justify-content:space-between;

  align-items:center;

  margin-bottom:20px;

}

.calendar-header button{

  padding:8px 18px;

  font-size:18px;

}

.calendar-grid{

  display:grid;

  grid-template-columns:repeat(7,1fr);

  gap:8px;

}

.calendar-week{

  text-align:center;

  font-weight:bold;

  padding:8px;

}

.calendar-day{

  min-height:90px;

  border:1px solid #ccc;

  border-radius:8px;

  cursor:pointer;

  background:#fff;

  transition:.2s;

}

.calendar-day:hover{

  transform:scale(1.03);

}

.calendar-date{

  font-size:18px;

  font-weight:bold;

}

.calendar-status{

  margin-top:12px;

  font-size:13px;

}

.business{

  background:#e8f7e8;

}

.holiday{

  background:#ffdcdc;

}

.today{

  border:3px solid #2196f3;

}

/* =========================
   BBQ Calendar
========================= */


#calendar .bbq-week{

  display:grid;

  grid-template-columns:repeat(7,1fr);

  gap:8px;

}


#calendar .bbq-calendar-grid{

  display:grid;

  grid-template-columns:repeat(7,1fr);

  gap:8px;

}


#calendar .bbq-day{

  appearance:none;

  display:flex;

  flex-direction:column;

  justify-content:center;

  align-items:center;

  width:100%;

  height:85px;

  padding:0;

  margin:0;

  border-radius:14px;

}

/* BBQ 曜日表示 */

#calendar .bbq-week div{

  text-align:center;

  font-weight:bold;

  height:35px;

  line-height:35px;

}

/* =========================
   BBQ Calendar Selected Date
========================= */

#calendar .bbq-day.selected{

  /* 枠の中の色 */
  background:#2196f3 !important;

  /* 日付文字・残り枠の色 */
  color:#fff !important;

  /* 枠線の色 */
  border:3px solid #1565c0 !important;

  transform:scale(1.05);

  box-shadow:
    0 4px 12px rgba(33,150,243,.35);

}

#calendar .bbq-day.selected .date{

  color:#fff !important;

  font-size:22px;

  font-weight:bold;

}

#calendar .bbq-day.selected .status{

  color:#fff !important;

  font-weight:bold;

}

#calendar .bbq-day.selected:hover{

  background:#1976d2;

}

.preview-image{

  width:120px;
  height:120px;

  object-fit:cover;

  border:1px solid #ccc;

  border-radius:8px;

  display:none;

  margin-top:10px;

}

.loading{

  margin-top:10px;

  font-weight:bold;

  min-height:24px;

}

.loading.success{

  color:#28a745;

}

.loading.uploading{

  color:#007bff;

}

.drop-area{

  border:2px dashed #999;

  border-radius:10px;

  padding:20px;

  text-align:center;

  cursor:pointer;

  background:#fafafa;

  transition:.2s;

}

.drop-area.drag{

  background:#e8f4ff;

  border-color:#2196f3;

}

/* =========================
   商品管理カード
========================= */

.product-management-list{

  display:block;

}


.product-card{

  background:#fff;

  border-radius:12px;

  padding:15px;

  margin-bottom:20px;

  box-shadow:
  0 2px 8px rgba(0,0,0,.15);

}


.product-card h3{

  margin-top:0;

  font-size:20px;

}


.product-card-row{

  margin-bottom:15px;

}


.product-card-row label{

  display:block;

  font-size:14px;

  font-weight:bold;

  color:#555;

  margin-bottom:5px;

}


.product-card input,
.product-card select{

  width:100%;

  padding:8px;

  box-sizing:border-box;

}


.product-card img.preview-image{

  width:140px;

  height:140px;

  object-fit:cover;

  border-radius:10px;

}


/* ボタン */

.product-card button{

  padding:10px 18px;

  margin-right:8px;

  border-radius:6px;

  border:none;

  cursor:pointer;

}


.product-card .save-btn{

  background:#28a745;

  color:white;

}


/* =========================
   スマホ調整
========================= */

@media(max-width:767px){


  .product-card{

    padding:12px;

  }


  .product-card h3{

    font-size:18px;

  }


  .product-card img.preview-image{

    width:120px;

    height:120px;

  }


}

.image-change-btn{

  display:inline-block;

  background:#007bff;

  color:white;

  padding:10px 15px;

  border-radius:8px;

  cursor:pointer;

}


.image-change-btn input{

  display:none;

}

.product-card .save-btn{

  position:sticky;

  bottom:15px;

}

.image-change-btn{

  display:inline-block;

  background:#007bff;

  color:white;

  padding:10px 15px;

  border-radius:8px;

  cursor:pointer;

}


.image-change-btn input{

  display:none;

}

.product-actions{

  display:flex;

  gap:10px;

  margin-top:15px;

}



.product-actions button{

  flex:1;

  padding:12px;

  font-size:16px;

  border-radius:8px;

}



.delete-btn{

  background:#dc3545;

  color:white;

}

.admin-top-buttons{

  display:flex;

  gap:10px;

  margin-bottom:20px;

}


.add-product-btn{

  background:#007bff;

  color:white;

  border:none;

  padding:10px 15px;

  border-radius:8px;

  font-size:16px;

}

/* =========================
   BBQカレンダー専用
========================= */

.bbq-calendar-header{

  display:flex;
  justify-content:space-between;
  align-items:center;

  margin-bottom:20px;

}

.bbq-calendar-header h2{

  margin:0;
  font-size:24px;

}

.bbq-calendar-grid{

  display:grid;

  grid-template-columns:repeat(7,1fr);

  gap:10px;

}

.bbq-week{

  text-align:center;
  font-weight:bold;
  padding:10px 0;
  background:#f5f5f5;
  border-radius:6px;

}

.bbq-day{

  background:#fff;

  border:1px solid #ddd;

  border-radius:10px;

  padding:10px;

  min-height:150px;

}

.bbq-empty{

  visibility:hidden;

}

.bbq-date{

  font-weight:bold;

  font-size:18px;

  margin-bottom:10px;

}

.bbq-status{

  margin-bottom:10px;

}

.bbq-limit{

  margin-bottom:10px;

}

.bbq-limit input{

  width:70px;
  text-align:center;

}

.bbq-save{

  width:100%;

}

.bbq-closed{

  background:#f8f8f8;

}

.complete-modal{

  position:fixed;

  inset:0;

  background:rgba(0,0,0,.5);

  display:flex;

  justify-content:center;

  align-items:center;

  z-index:9999;

}


.complete-box{

  background:#fff;

  width:90%;

  max-width:350px;

  border-radius:15px;

  padding:30px;

  text-align:center;

}


.complete-icon{

  font-size:60px;

  margin-bottom:15px;

}


.complete-box h2{

  margin:10px 0;

}


.complete-box p{

  font-size:20px;

  margin:20px 0;

}

.category-title{

  margin-top:25px;

  margin-bottom:10px;

  padding-bottom:8px;

  border-bottom:2px solid #ddd;

  font-size:22px;

}

.bottom-order-bar{

  position:fixed;

  left:0;

  right:0;

  bottom:0;

  background:#fff;

  border-top:2px solid #ddd;

  display:flex;

  justify-content:space-between;

  align-items:center;

  padding:12px;

  gap:15px;

  z-index:1000;

  box-shadow:0 -2px 8px rgba(0,0,0,.15);

}

.bottom-total{

  font-size:22px;

  font-weight:bold;

}

.bottom-order-button{

  width:180px;

  height:50px;

  border:none;

  border-radius:10px;

  background:#28a745;

  color:#fff;

  font-size:18px;

  cursor:pointer;

}

main{

  padding-bottom:90px;

}

.qty-number{

  min-width:32px;

  height:32px;

  padding:0 10px;

  border-radius:999px;

  background:#0d6efd;

  color:#fff;

  display:flex;

  align-items:center;

  justify-content:center;

  font-size:18px;

  font-weight:bold;

}

.qty-zero{

  background:#ccc;

  color:#666;

}

/* =========================
   数量アニメーション
========================= */

.qty-pop{

  animation:qtyPop .18s ease;

}

@keyframes qtyPop{

  0%{

    transform:scale(1);

  }

  50%{

    transform:scale(1.35);

  }

  100%{

    transform:scale(1);

  }

}

/* =========================
   営業日更新バー
========================= */

#businessLoadingBar{

  display:none;

  position:fixed;

  top:0;

  left:0;

  width:100%;

  background:#333;

  color:white;

  text-align:center;

  padding:12px;

  z-index:9999;

  font-size:16px;

}

.payment-group{

  margin-top:30px;

  margin-bottom:15px;

  padding-bottom:8px;

  border-bottom:3px solid #4caf50;

  font-size:24px;

  font-weight:bold;

}

/* =========================
   ヘッダー操作ボタン
========================= */

.header-actions{

  display:flex;

  gap:12px;

  align-items:center;

}


.header-btn{

  display:inline-block;

  padding:10px 16px;

  border-radius:8px;

  text-decoration:none;

  font-weight:bold;

  white-space:nowrap;

}



/* BBQ */

.bbq-btn{

  background:#ff8c42;

  color:#fff;

}



/* カート */

.cart-btn{

  background:#28a745;

  color:#fff;

}



/* =========================
   店舗リンク
========================= */

.shop-links{

  display:flex;

  flex-wrap:wrap;

  gap:12px;

  margin-top:15px;

}


.shop-link{

  display:inline-block;

  padding:10px 14px;

  border-radius:8px;

  background:#333;

  color:#fff;

  text-decoration:none;

}


.shop-link:hover,
.header-btn:hover{

  opacity:.85;

}

@media(max-width:600px){

.header-actions{

  width:100%;

  justify-content:center;

}

.header-btn{

  flex:1;

  text-align:center;

}

}

#calendar .bbq-day.selected{

  position:relative;

}

#calendar .bbq-day.selected{

  position:relative;

}

#calendar .bbq-day.selected::after{

  content:"✓";

  position:absolute;

  top:6px;

  right:8px;

  width:22px;

  height:22px;

  border-radius:50%;

  background:#28a745;

  color:#fff;

  font-size:14px;

  display:flex;

  align-items:center;

  justify-content:center;

  font-weight:bold;

}

/*==================================
開店準備中
==================================*/

#openingOverlay{

  position:fixed;

  top:0;
  left:0;

  width:100%;
  height:100%;

  background:rgba(255,255,255,.96);

  z-index:99999;

  display:flex;

  justify-content:center;

  align-items:center;

  padding:20px;

  box-sizing:border-box;

}

.opening-box{

  max-width:500px;

  width:100%;

  background:#fff;

  border-radius:15px;

  padding:40px 30px;

  text-align:center;

  box-shadow:0 10px 30px rgba(0,0,0,.15);

}

.opening-box h2{

  font-size:34px;

  color:#d35400;

  margin-bottom:25px;

}

.opening-box p{

  font-size:18px;

  line-height:2;

  color:#555;

}

.header-right{

  margin-left:auto;

  text-align:right;

}

.header-right div{

  font-size:14px;

  margin-bottom:5px;

}

.logout-btn{

  display:inline-block;

  padding:8px 15px;

  background:#dc3545;

  color:#fff;

  text-decoration:none;

  border-radius:6px;

}

.logout-btn:hover{

  opacity:.9;

}