:root{
  --bg:#ffffff;
  --fg:#111827;
  --muted:#6b7280;
  --border:#e5e7eb;
  --primary:#2563eb;
  --primary-weak:#e0ecff;
  --danger:#ef4444;
  --ok:#10b981;
  --card:#ffffff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--fg);
  background:var(--bg);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans JP",sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
}

/* Layout */
.container{
  max-width: 1120px;
  margin: 16px auto;
  padding: 0 16px;
}
.site-header{
  position:sticky; top:0; z-index:30;
  background:var(--bg);
  display:flex; justify-content:space-between; align-items:center;
  gap:12px;
  padding: 12px 16px;
  border-bottom:1px solid var(--border);
}
.site-header h1{ font-size: 1.1rem; margin:0 }
.tabs{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 16px }
.tab{
  display:inline-block;
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  text-decoration:none;
  color:var(--fg);
  background:#fafafa;
  transition:.15s ease background,.15s ease border-color;
}
.tab:hover{ background:#f3f4f6 }
.tab.active{ background:var(--primary-weak); border-color:#bfdbfe }

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px;
  margin:12px 0;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}

/* Typography */
h1,h2,h3{ line-height:1.3; margin:0 0 8px }
h2{ font-size:1.15rem }
h3{ font-size:1.05rem }
p{ margin:8px 0 }

/* Forms */
label{ display:block; margin:10px 0 }
input[type=text],
input[type=email],
input[type=number],
input[type=password],
input[type=date],
textarea,
select{
  width:100%;
  padding:12px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  font-size:16px;
  background:#fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, textarea:focus, select:focus{
  outline:none;
  border-color:#93c5fd;
  box-shadow:0 0 0 3px rgba(147,197,253,.35);
}
input::placeholder, textarea::placeholder{ color:#9ca3af }

.grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
}
@media (max-width: 820px){
  .grid{ grid-template-columns: 1fr }
}

/* Buttons */
.btn{
  display:inline-block;
  padding:10px 14px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#f8fafc;
  cursor:pointer;
  text-decoration:none;
  color:var(--fg);
  line-height:1.2;
  user-select:none;
}
.btn:hover{ background:#f3f4f6 }
.btn.primary{ background:var(--primary); border-color:var(--primary); color:#fff }
.btn.primary:hover{ filter:brightness(0.95) }
.btn.ok{ background:var(--ok); border-color:var(--ok); color:#fff }
.btn.danger{ background:var(--danger); border-color:var(--danger); color:#fff }
.btn.disabled{ pointer-events:none; opacity:.55 }

/* Alerts */
.alert{ padding:12px 14px; border-radius:10px; margin:10px 0 }
.alert.success{ background:#ecfeff; border:1px solid #a5f3fc }
.alert.error{ background:#fee2e2; border:1px solid #fecaca }

/* Images */
.thumb{ width:140px; height:140px; object-fit:cover; border:1px solid var(--border); border-radius:10px }
.thumbs{ display:flex; flex-wrap:wrap; gap:8px }
.placeholder{ width:100%; min-height:200px; border:1px dashed var(--border); display:grid; place-items:center; border-radius:12px; color:#9ca3af }

/* Tables */
.table-wrap{ overflow:auto; -webkit-overflow-scrolling:touch }
.table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
}
.table th,
.table td{
  padding:10px;
  border-bottom:1px solid var(--border);
  text-align:left;
  vertical-align:top;
}
.table th{ white-space:nowrap; position:sticky; top:0; background:#f9fafb }
.right{ text-align:right }
.muted{ color:var(--muted) }

/* Responsive table (card-like) for very small screens without HTML changes */
@media (max-width: 560px){
  .table{ font-size:15px }
  .table th{ display:none }
  .table tr{ display:block; border:1px solid var(--border); border-radius:12px; margin-bottom:10px; padding:6px 4px }
  .table td{
    display:flex; justify-content:space-between; gap:8px; border-bottom:none; padding:8px 10px;
  }
  .table td::before{
    content: attr(data-th);
    flex: 0 0 42%;
    color:#6b7280;
    font-weight:600;
    padding-right:6px;
  }
}

/* Modal */
.modal{ position:fixed; inset:0; background:rgba(0,0,0,.5); display:none; z-index:9999 }
.modal-content{ background:#fff; max-width:960px; width:92%; margin:40px auto; padding:16px; border-radius:12px }
.modal-header{ display:flex; justify-content:space-between; align-items:center; gap:8px }
.modal-body{ max-height:70vh; overflow:auto }

/* CTA bar */
.cta-bar{
  position:fixed; left:0; right:0; bottom:0;
  background:#111827; color:#fff; padding:12px 14px;
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  z-index:50;
}
.cta-bar .summary{ font-weight:700 }
.cta-bar .btn{ background:var(--ok); border-color:var(--ok); color:#fff }
main{ padding-bottom:88px } /* keep space for CTA */

/* Better tap targets on mobile */
@media (max-width: 820px){
  .btn{ padding:12px 16px; font-size:16px }
  input, select, textarea{ font-size:16px } /* prevent iOS zoom */
}

/* Utilities */
.hr{ height:1px; background:var(--border); margin:12px 0 }
.badge{ display:inline-block; padding:2px 8px; border-radius:9999px; font-size:12px; border:1px solid var(--border); background:#f9fafb }
.badge.ok{ background:#ecfdf5; border-color:#a7f3d0; color:#065f46 }
.badge.warn{ background:#fffbeb; border-color:#fcd34d; color:#92400e }
.badge.danger{ background:#fef2f2; border-color:#fecaca; color:#991b1b }

/* Print (basic) */
@media print{
  .site-header, .tabs, .cta-bar{ display:none }
  .card{ page-break-inside: avoid }
}
/* ==== PCだけ、商品説明と注文フォームを左右2カラムにする ==== */
@media (min-width: 1024px) {
  /* ページ全体が縦長にならないよう、商品ブロック自体を2カラム化 */
  .product {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 左: 画像/説明 / 右: 入力フォーム */
    gap: 24px;
    align-items: start;
  }

  /* 右カラム（.product-info）の中で、説明系とフォームをさらに左右に分割 */
  .product-info {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 左: 説明/価格/サマリー, 右: 注文フォーム */
    gap: 16px;
  }

  /* 見出しは2カラムまたぎ（デザイン現状維持） */
  .product-info > h2 {
    grid-column: 1 / -1;
  }

  /* 説明・価格・（※トップのサマリーは非表示設定のまま）を左側に固定 */
  .product-info .desc,
  .product-info .price,
  .product-info .summary {
    grid-column: 1;
  }

  /* 注文入力フォームは右側に固定 */
  .product-info .order-form {
    grid-column: 2;
    align-self: start;
  }
}
/* ==== ここまで追記 ==== */