/* =====================================================================
   ISS — ショップ共通スタイル
   配色: #6a6352 / #c5b899 / #ffffff / #cc0000
   ===================================================================== */
:root {
  --dark:   #6a6352;
  --mid:    #c5b899;
  --light:  #f5f0e8;
  --white:  #ffffff;
  --red:    #cc0000;
  --gray:   #888888;
  --border: #e0d8cc;
  --text:   #333333;
  --radius: 2px;
}

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  color: var(--text); background: var(--white); line-height: 1.6; font-size: 15px;
}
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; }

/* ===== HEADER ===== */
.site-header {
  background: var(--dark); color: var(--white);
  position: sticky; top: 0; z-index: 500;
}
.header-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; height: 64px; gap: 16px;
}
.logo {
  font-size: 22px; font-weight: 700; letter-spacing: 4px;
  color: var(--white); text-decoration: none; flex-shrink: 0;
  display: inline-flex; align-items: center;
}
.logo span { color: var(--mid); }
.logo-img { display: block; max-height: 40px; width: auto; }
.nav-links { display: flex; gap: 28px; margin-left: 32px; }
.nav-links a { color: var(--mid); text-decoration: none; font-size: 12px; letter-spacing: 1.5px; transition: color .2s; }
.nav-links a:hover { color: var(--white); }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.btn-mypage { color: var(--mid); font-size: 12px; text-decoration: none; letter-spacing: 1px; }
.btn-mypage:hover { color: var(--white); }
.btn-cart {
  background: var(--mid); color: var(--dark); border: none;
  padding: 8px 18px; font-size: 12px; font-weight: 700; letter-spacing: 1px;
  cursor: pointer; display: flex; align-items: center; gap: 6px; text-decoration: none;
  border-radius: var(--radius); transition: background .2s;
}
.btn-cart:hover { background: #d4c9ac; }
.cart-badge {
  background: var(--red); color: #fff; border-radius: 50%;
  width: 18px; height: 18px; font-size: 10px;
  display: flex; align-items: center; justify-content: center;
}
.nav-toggle { display: none; background: none; border: none; color: var(--white); font-size: 22px; cursor: pointer; margin-left: 8px; }

/* ===== 検索ボタン & 検索バー ===== */
.btn-search {
  background: none; border: none; color: rgba(197,184,153,.7);
  cursor: pointer; padding: 6px; display: flex; align-items: center;
  transition: color .2s;
}
.btn-search:hover { color: var(--white); }
.header-search-bar {
  max-height: 0; overflow: hidden;
  transition: max-height .3s ease;
  background: var(--dark);
  border-top: 1px solid rgba(255,255,255,0);
}
.header-search-bar.open {
  max-height: 60px;
  border-top-color: rgba(255,255,255,.1);
}
.header-search-inner {
  max-width: 1200px; margin: 0 auto; padding: 10px 24px;
  display: flex; align-items: center; gap: 10px;
}
.header-search-inner form {
  flex: 1; display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.1); border-radius: var(--radius);
  padding: 0 12px;
}
.header-search-inner form svg { color: rgba(197,184,153,.6); flex-shrink: 0; }
.header-search-inner input[type="search"] {
  flex: 1; background: none; border: none; color: var(--white);
  padding: 9px 0; font-size: 13px; outline: none; font-family: inherit;
}
.header-search-inner input[type="search"]::placeholder { color: rgba(255,255,255,.35); }
.header-search-inner form button[type="submit"] {
  background: none; border: none; color: var(--mid);
  cursor: pointer; padding: 6px 0; display: flex; align-items: center;
}
#searchClose {
  background: none; border: none; color: rgba(255,255,255,.4);
  cursor: pointer; font-size: 15px; padding: 4px 6px; flex-shrink: 0;
  transition: color .2s;
}
#searchClose:hover { color: var(--white); }

/* ===== MOBILE DRAWER ===== */
.nav-drawer {
  position: fixed; top: 0; right: -280px; width: 280px; height: 100%;
  background: var(--dark); z-index: 600; transition: right .3s; padding: 24px 20px;
}
.nav-drawer.open { right: 0; }
.nav-drawer ul { list-style: none; margin-top: 40px; }
.nav-drawer li { border-bottom: 1px solid rgba(255,255,255,.08); }
.nav-drawer a { display: block; padding: 14px 0; color: var(--mid); text-decoration: none; font-size: 14px; letter-spacing: 1px; }
.nav-close { background: none; border: none; color: var(--mid); font-size: 20px; cursor: pointer; position: absolute; top: 16px; right: 16px; }
.nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 590; }
.nav-overlay.open { display: block; }

/* ===== BREADCRUMB ===== */
.breadcrumb { background: var(--light); padding: 10px 24px; font-size: 12px; color: var(--gray); }
.breadcrumb a { color: var(--gray); text-decoration: none; }
.breadcrumb a:hover { color: var(--dark); }
.breadcrumb span { margin: 0 8px; }

/* ===== HERO ===== */
.hero {
  background: linear-gradient(135deg, var(--dark) 0%, #4a4338 55%, #8b7d6b 100%);
  min-height: 480px; display: flex; align-items: center; justify-content: center;
  text-align: center; color: var(--white); padding: 40px 24px; position: relative; overflow: hidden;
}
.hero-slides { position: absolute; inset: 0; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s; }
.hero-slide.active { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; }
.hero-nav { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 2; }
.hero-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.4); border: none; cursor: pointer; padding: 0; transition: background .2s; }
.hero-dot.active { background: var(--mid); }

/* ===== BUTTONS ===== */
.btn { display: inline-block; cursor: pointer; border-radius: var(--radius); font-family: inherit; }
.btn-outline-light {
  background: transparent; border: 1px solid var(--mid); color: var(--mid);
  padding: 13px 38px; font-size: 12px; letter-spacing: 3px; transition: all .2s; text-decoration: none;
}
.btn-outline-light:hover { background: var(--mid); color: var(--dark); }
.btn-dark {
  background: var(--dark); color: var(--white); border: none;
  padding: 14px 28px; font-size: 13px; letter-spacing: 2px; font-weight: 700;
  transition: background .2s; text-decoration: none; display: inline-block;
}
.btn-dark:hover { background: #4a4338; }
.btn-red {
  background: var(--red); color: var(--white); border: none;
  padding: 14px 28px; font-size: 13px; letter-spacing: 2px; font-weight: 700;
  transition: background .2s; text-decoration: none; display: inline-block;
}
.btn-red:hover { background: #aa0000; }
.btn-full { width: 100%; text-align: center; }

/* ===== SECTION ===== */
.section { max-width: 1200px; margin: 0 auto; padding: 64px 24px; }
.section-title { text-align: center; margin-bottom: 44px; }
.section-title h2 { font-size: 20px; font-weight: 400; letter-spacing: 5px; color: var(--dark); }
.section-title p  { margin-top: 8px; font-size: 12px; color: var(--gray); letter-spacing: 2px; }
.divider { width: 40px; height: 1px; background: var(--mid); margin: 12px auto; }

/* ===== FEATURE BAND ===== */
.feature-band { background: var(--light); padding: 52px 24px; }
.feature-band-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 36px;
  text-align: center;
}
.feature-item .feature-icon { margin-bottom: 12px; color: var(--mid); line-height: 1; }
.feature-item h3 { font-size: 13px; font-weight: 700; color: var(--dark); margin-bottom: 8px; letter-spacing: 1px; }
.feature-item p  { font-size: 12px; color: var(--gray); line-height: 1.9; }

/* ===== PRODUCT GRID ===== */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 28px; }
.product-card { cursor: pointer; text-decoration: none; color: inherit; display: block; }
.product-img-wrap {
  background: var(--light); aspect-ratio: 1; overflow: hidden;
  transition: transform .3s; display: flex; align-items: center; justify-content: center;
  font-size: 52px;
}
.product-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.product-card:hover .product-img-wrap { transform: scale(1.02); }
.product-label { margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--dark); letter-spacing: 1px; }
.product-sub { font-size: 11px; color: var(--gray); margin-top: 4px; }
.product-price { font-size: 15px; color: var(--dark); margin-top: 6px; font-weight: 700; }
.product-price span { font-size: 11px; font-weight: 400; color: var(--gray); }
.badge-custom { display: inline-block; margin-top: 4px; background: var(--mid); color: var(--dark); font-size: 10px; padding: 2px 8px; letter-spacing: 1px; border-radius: 1px; }

/* ===== PRODUCT DETAIL ===== */
.detail-layout { max-width: 1100px; margin: 40px auto; padding: 0 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.detail-img { background: var(--light); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 80px; overflow: hidden; }
.detail-img img { width: 100%; height: 100%; object-fit: cover; }
.detail-thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; }
.detail-thumbs::-webkit-scrollbar { display: none; }
.detail-thumb { flex-shrink: 0; width: 68px; height: 68px; background: var(--light); display: flex; align-items: center; justify-content: center; font-size: 24px; cursor: pointer; border: 2px solid transparent; overflow: hidden; }
.detail-thumb img { width: 100%; height: 100%; object-fit: cover; }
.detail-thumb.active { border-color: var(--dark); }
/* PC: 全画像を縦積みで表示、Mobile: メイン+サムネイル */
.detail-imgs-stack { display: flex; flex-direction: column; gap: 10px; }
.detail-imgs-mobile { display: none; }
.detail-info .product-label { font-size: 22px; letter-spacing: 2px; }
.detail-price { font-size: 26px; font-weight: 700; color: var(--dark); margin: 12px 0 4px; }
.detail-price span { font-size: 13px; font-weight: 400; color: var(--gray); }
.detail-desc { font-size: 13px; line-height: 2; color: #555; margin: 16px 0; border-top: 1px solid var(--border); padding-top: 16px; }

/* 注文ガイドバー */
.order-guide-bar {
  background: var(--dark); color: var(--white);
  font-size: 12px; letter-spacing: 1px; text-align: center;
  padding: 10px 16px; margin: 20px 0 4px; border-radius: var(--radius);
}

/* ===== OPTION BLOCKS ===== */
.option-block { margin: 20px 0; }
.option-block > label { display: block; font-size: 12px; font-weight: 700; color: var(--dark); letter-spacing: 1px; margin-bottom: 8px; }
.option-block .req { color: var(--red); font-size: 10px; margin-left: 4px; }
.option-radio { display: flex; gap: 8px; flex-wrap: wrap; }
.option-radio input[type="radio"] { display: none; }
.option-radio label { border: 1px solid var(--border); padding: 7px 16px; font-size: 12px; cursor: pointer; color: var(--dark); transition: all .15s; }
.option-radio input:checked + label { background: var(--dark); color: var(--white); border-color: var(--dark); }
.option-select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border);
  font-size: 13px; background: var(--white); color: var(--dark);
  appearance: none; -webkit-appearance: none; border-radius: var(--radius);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236a6352' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.option-textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border); font-size: 13px; resize: vertical; min-height: 80px; border-radius: var(--radius); font-family: inherit; }
.option-input { width: 100%; padding: 10px 12px; border: 1px solid var(--border); font-size: 13px; border-radius: var(--radius); }
.option-input:focus, .option-select:focus, .option-textarea:focus { outline: 2px solid var(--mid); outline-offset: -2px; }
.char-counter { font-size: 11px; color: var(--gray); text-align: right; margin-top: 4px; }
/* 画像付き選択肢カード */
.option-img-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; }
.option-img-card { display: flex; flex-direction: column; align-items: center; min-width: 0; cursor: pointer; border: 2px solid var(--border); border-radius: var(--radius); padding: 8px; text-align: center; transition: border-color .15s, box-shadow .15s; }
.option-img-card:hover { border-color: var(--mid); }
.option-img-card.selected { border-color: #cc0000; box-shadow: 0 0 0 1px #cc0000; }
.option-img-card input[type="radio"] { display: none; }
.option-img-card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 2px; margin-bottom: 6px; }
.option-img-placeholder { width: 100%; aspect-ratio: 1/1; background: var(--light); display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--dark); margin-bottom: 6px; border-radius: 2px; }
.option-img-label { font-size: 12px; color: var(--dark); line-height: 1.4; }
.option-img-price { font-size: 11px; color: var(--gray); margin-top: 2px; }

/* フォント選択カード（横長サムネイルを縦に並べ、画像クリックで拡大表示／「選択する」ボタンで選択） */
.option-font-cards { display: flex; flex-direction: column; gap: 10px; }
.option-font-card { border: 2px solid var(--border); border-radius: var(--radius); padding: 8px; transition: border-color .15s, box-shadow .15s; }
.option-font-card.selected { border-color: #cc0000; box-shadow: 0 0 0 1px #cc0000; }
.option-font-card img { width: 100%; aspect-ratio: 3/1; object-fit: cover; border-radius: 2px; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.option-font-placeholder { width: 100%; aspect-ratio: 3/1; background: var(--light); display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--dark); border-radius: 2px; }
.option-font-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.option-font-label { font-size: 12px; color: var(--dark); line-height: 1.4; }
.option-font-select-btn { position: relative; display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; border: 1px solid var(--border); padding: 7px 16px; font-size: 12px; color: var(--dark); cursor: pointer; border-radius: 2px; white-space: nowrap; transition: all .15s; -webkit-tap-highlight-color: transparent; }
.option-font-select-btn:hover { border-color: var(--mid); }
.option-font-select-btn input[type="radio"] { position: absolute; width: 0; height: 0; margin: 0; padding: 0; border: 0; opacity: 0; appearance: none; -webkit-appearance: none; pointer-events: none; }
.option-font-select-btn .select-mark { display: none; }
.option-font-card.selected .option-font-select-btn { background: var(--dark); color: var(--white); border-color: var(--dark); }
.option-font-card.selected .option-font-select-btn .select-mark { display: inline-flex; }

/* 画像拡大表示ライトボックス */
.img-lightbox { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.85); z-index: 9999; align-items: center; justify-content: center; padding: 32px; cursor: zoom-out; }
.img-lightbox.open { display: flex; }
.img-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 8px 30px rgba(0,0,0,.5); }
.img-lightbox-close { position: absolute; top: 16px; right: 24px; color: #fff; cursor: pointer; line-height: 1; }

/* ===== QTY CONTROL ===== */
.qty-control { display: flex; align-items: center; gap: 12px; }
.qty-btn { width: 36px; height: 36px; border: 1px solid var(--border); background: var(--white); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; }
.qty-btn:hover { background: var(--light); }
.qty-value { font-size: 18px; font-weight: 700; width: 32px; text-align: center; }

/* ===== SHIPPING PREVIEW ===== */
.shipping-preview { background: var(--light); padding: 12px 14px; margin-top: 8px; font-size: 12px; }
.shipping-preview .sh-label { color: var(--gray); }
.shipping-preview .sh-cost { font-weight: 700; color: var(--dark); }
.shipping-preview .sh-note { color: var(--red); font-size: 11px; margin-top: 2px; }

/* ===== ACCORDION ===== */
.info-accordion { margin-top: 24px; border-top: 1px solid var(--border); }
.accordion-item { border-bottom: 1px solid var(--border); }
.accordion-header { padding: 14px 0; font-size: 12px; font-weight: 700; color: var(--dark); cursor: pointer; letter-spacing: 1px; display: flex; justify-content: space-between; list-style: none; user-select: none; }
.accordion-header::-webkit-details-marker { display: none; }
.accordion-body { font-size: 12px; color: #555; line-height: 2; padding-bottom: 14px; }

/* ===== CART ===== */
.page-layout { max-width: 1060px; margin: 0 auto; padding: 32px 24px; }
.page-layout.two-col { display: grid; grid-template-columns: 1fr 320px; gap: 44px; align-items: start; }

/* === チェックアウト 3エリアグリッド === */
.checkout-layout {
  max-width: 1000px; margin: 0 auto; padding: 32px 24px;
  display: grid;
  grid-template-columns: 1fr 320px;
  grid-template-rows: auto auto;
  column-gap: 44px;
  align-items: start;
}
.checkout-layout .checkout-form      { grid-column: 1; grid-row: 1; }
.checkout-layout .checkout-sidebar-col { grid-column: 2; grid-row: 1 / 3; }
.checkout-layout .checkout-submit-row  { grid-column: 1; grid-row: 2; padding-bottom: 32px; }
.section-heading { font-size: 15px; letter-spacing: 2px; color: var(--dark); margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--dark); }
.cart-item { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--border); align-items: flex-start; }
.cart-item-img { width: 88px; height: 88px; background: var(--light); display: flex; align-items: center; justify-content: center; font-size: 32px; flex-shrink: 0; overflow: hidden; }
.cart-item-img img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-name { font-size: 14px; font-weight: 700; color: var(--dark); }
.cart-item-opts { font-size: 11px; color: var(--gray); margin-top: 4px; line-height: 1.9; }
.cart-item-qty  { font-size: 12px; margin-top: 6px; display: flex; align-items: center; gap: 8px; }
.cart-item-del  { font-size: 11px; color: var(--red); cursor: pointer; background: none; border: none; margin-top: 4px; }
.cart-item-price { font-size: 16px; font-weight: 700; color: var(--dark); white-space: nowrap; }

/* ===== ORDER SUMMARY BOX ===== */
.checkout-login-box { background: #f9f7f4; border: 1px solid var(--border); border-radius: 4px; padding: 22px; margin-bottom: 20px; }
.checkout-login-box h3 { font-size: 13px; color: var(--dark); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; letter-spacing: .5px; }
.checkout-login-box p { font-size: 11px; color: var(--gray); line-height: 1.7; margin-bottom: 14px; }
.summary-box { background: var(--light); padding: 28px; }
.summary-box h3 { font-size: 13px; letter-spacing: 2px; color: var(--dark); margin-bottom: 20px; }
.summary-row { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 10px; }
.summary-row.total { border-top: 1px solid var(--border); margin-top: 16px; padding-top: 16px; font-weight: 700; font-size: 16px; }
.summary-secure { font-size: 11px; color: var(--gray); margin-top: 12px; text-align: center; line-height: 1.8; }

/* ===== CHECKOUT ===== */
.checkout-form h2 { font-size: 15px; letter-spacing: 2px; color: var(--dark); margin: 24px 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.checkout-form h2:first-child { margin-top: 0; }
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 11px; font-weight: 700; color: var(--dark); margin-bottom: 6px; letter-spacing: 1px; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border);
  font-size: 13px; border-radius: var(--radius); background: var(--white); font-family: inherit;
}
.form-group input:focus, .form-group select:focus { outline: 2px solid var(--mid); outline-offset: -2px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.req-mark { color: var(--red); }

.payment-methods, .delivery-methods { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 20px; }
.payment-method, .delivery-method {
  border: 2px solid var(--border); padding: 14px 16px; cursor: pointer;
  display: flex; align-items: center; gap: 12px; font-size: 13px;
  transition: border-color .15s;
}
.payment-method.selected, .delivery-method.selected { border-color: var(--dark); background: var(--light); }
.payment-method-icon, .delivery-icon { font-size: 22px; }
.delivery-method-info { flex: 1; }
.delivery-price { font-weight: 700; color: var(--dark); white-space: nowrap; }
.delivery-price.free { color: var(--red); }

#stripe-element-wrap { border: 1px solid var(--border); padding: 12px; margin-top: 8px; border-radius: var(--radius); background: var(--white); }

/* ===== ORDER COMPLETE ===== */
.complete-box { max-width: 640px; margin: 60px auto; padding: 0 24px; text-align: center; }
.complete-icon { margin-bottom: 16px; line-height: 1; }
.complete-box h1 { font-size: 22px; letter-spacing: 3px; color: var(--dark); margin-bottom: 12px; }
.complete-box p  { font-size: 14px; color: #555; line-height: 2; }
.complete-info { background: var(--light); padding: 24px; margin: 28px 0; text-align: left; }
.complete-info .row { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 8px; }
.complete-info .row span:first-child { color: var(--gray); }

/* ===== MYPAGE ===== */
.mypage-layout { max-width: 1100px; margin: 32px auto; padding: 0 24px; display: grid; grid-template-columns: 220px 1fr; gap: 32px; align-items: start; }
.mypage-sidebar { background: var(--light); padding: 24px; }
.mypage-sidebar h3 { font-size: 13px; font-weight: 700; color: var(--dark); margin-bottom: 6px; letter-spacing: 1px; }
.mypage-sidebar .customer-name { font-size: 12px; color: var(--gray); margin-bottom: 16px; }
.sidebar-menu { list-style: none; }
.sidebar-menu li { border-bottom: 1px solid var(--border); }
.sidebar-menu a { display: block; padding: 10px 0; font-size: 13px; color: var(--dark); text-decoration: none; transition: color .15s; }
.sidebar-menu a:hover, .sidebar-menu a.active { color: var(--red); }

.order-card { border: 1px solid var(--border); margin-bottom: 16px; }
.order-card-header { background: var(--light); padding: 12px 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.order-id   { font-size: 12px; font-weight: 700; color: var(--dark); }
.order-date { font-size: 11px; color: var(--gray); }
.order-card-body { padding: 16px; }

/* ===== STATUS BADGES ===== */
.status-badge { display: inline-block; padding: 3px 10px; font-size: 10px; border-radius: 2px; letter-spacing: 1px; font-weight: 700; }
.s-new             { background: #e3f2fd; color: #1565c0; }
.s-waiting_payment { background: #fff3e0; color: #e65100; }
.s-confirmed       { background: #f3e5f5; color: #6a1b9a; }
.s-making          { background: #f3e5f5; color: #6a1b9a; }
.s-shipped         { background: #e8f5e9; color: #2e7d32; }
.s-done            { background: #eeeeee; color: #666; }
.s-cancelled       { background: #fce4ec; color: #c62828; }

/* ===== CHAT ===== */
.chat-wrap { max-width: 800px; }
.chat-header { background: var(--dark); color: var(--white); padding: 16px 20px; }
.chat-header h3 { font-size: 14px; letter-spacing: 1px; }
.chat-header .order-ref { font-size: 11px; color: var(--mid); margin-top: 2px; }
.chat-messages { background: var(--light); min-height: 400px; max-height: 520px; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.msg { max-width: 70%; }
.msg.shop { align-self: flex-start; }
.msg.user { align-self: flex-end; }
.msg-bubble { padding: 12px 16px; font-size: 13px; line-height: 1.75; }
.msg.shop .msg-bubble { background: var(--white); border: 1px solid var(--border); }
.msg.user .msg-bubble { background: var(--dark); color: var(--white); }
.msg-meta { font-size: 10px; color: var(--gray); margin-top: 4px; }
.msg.user .msg-meta { text-align: right; }
.chat-input-area { background: var(--white); border-top: 1px solid var(--border); padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.chat-input-area textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--border); padding: 8px 12px; font-size: 16px; resize: none; height: 60px; font-family: inherit; border-radius: var(--radius); }
.chat-input-actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
.chat-img-label { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: var(--gray); cursor: pointer; border: 1px solid var(--border); border-radius: var(--radius); transition: color .15s, border-color .15s; }
.chat-img-label:hover { color: var(--dark); border-color: var(--dark); }
.chat-send { background: var(--dark); color: var(--white); border: none; padding: 0 20px; height: 36px; cursor: pointer; font-size: 13px; border-radius: var(--radius); white-space: nowrap; }

/* ===== STATIC PAGES (privacy / tokusho / contact) ===== */
.static-page { max-width: 800px; margin: 40px auto 80px; padding: 0 24px; }
.static-page-title { font-size: 20px; font-weight: 400; letter-spacing: 3px; color: var(--dark); margin-bottom: 32px; padding-bottom: 16px; border-bottom: 2px solid var(--border); }
.static-page-body { font-size: 14px; line-height: 2.2; color: var(--text); white-space: pre-wrap; word-break: break-word; }
.contact-form-wrap { background: var(--light); padding: 32px; margin-top: 32px; }
.contact-form-wrap h2 { font-size: 13px; letter-spacing: 2px; color: var(--dark); margin-bottom: 24px; font-weight: 700; }

/* ===== FLASH MESSAGES ===== */
.flash { padding: 12px 18px; margin-bottom: 16px; border-radius: var(--radius); font-size: 13px; }
.flash.success { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
.flash.error   { background: #fce4ec; color: #c62828; border: 1px solid #ef9a9a; }
.flash.info    { background: #e3f2fd; color: #1565c0; border: 1px solid #90caf9; }

/* ===== FOOTER ===== */
.site-footer { background: var(--dark); color: var(--mid); padding: 44px 24px; }
.footer-inner { max-width: 1200px; margin: 0 auto; text-align: center; }
.footer-logo { font-size: 20px; font-weight: 700; letter-spacing: 4px; margin-bottom: 16px; }
.footer-logo span { color: var(--mid); }
.footer-logo .logo-img { max-height: 36px; margin: 0 auto; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; margin-bottom: 16px; }
.footer-nav a { color: var(--mid); text-decoration: none; font-size: 12px; }
.footer-nav a:hover { color: var(--white); }
.footer-copy { font-size: 11px; color: rgba(197,184,153,.5); }
.footer-sns { display: flex; gap: 12px; justify-content: center; margin-bottom: 20px; }
.sns-icon {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(197,184,153,.4); color: var(--mid);
  transition: background .2s, color .2s, border-color .2s;
}
.sns-icon svg { width: 15px; height: 15px; }
.sns-icon:hover { background: var(--mid); color: var(--dark); border-color: var(--mid); }

/* ===== LOGIN ===== */
.login-box { max-width: 420px; margin: 60px auto; padding: 0 24px; }
.login-box h1 { font-size: 20px; letter-spacing: 3px; color: var(--dark); text-align: center; margin-bottom: 28px; }
.login-box .card { background: var(--white); border: 1px solid var(--border); padding: 32px; }

/* ===== NEWS SECTION ===== */
.news-section { background: var(--white); }
.news-item-link { text-decoration: none; color: inherit; display: block; }
.news-item-link:hover .news-title { text-decoration: underline; color: var(--dark); }
.news-body a { color: var(--dark); text-decoration: underline; word-break: break-all; }
.news-body a:hover { opacity: .7; }
.news-list { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 0; }
.news-item {
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 120px 1fr;
  grid-template-rows: auto auto;
  column-gap: 24px;
  align-items: start;
}
.news-meta {
  grid-column: 1; grid-row: 1 / 3;
  display: flex; flex-direction: column; gap: 8px; padding-top: 2px;
}
.news-cat {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 1px;
  padding: 3px 10px; border-radius: 2px;
  align-self: flex-start; min-width: 72px; text-align: center;
}
.cat-info        { background: var(--light); color: var(--dark); border: 1px solid var(--border); }
.cat-important   { background: #fce4ec; color: #c62828; border: 1px solid #ef9a9a; }
.cat-sale        { background: #fff8e1; color: #b8860b; border: 1px solid #ffe082; }
.cat-maintenance { background: #f5f5f5; color: #666; border: 1px solid #ddd; }
.cat-blue        { background: #e3f2fd; color: #1565c0; border: 1px solid #90caf9; }
.cat-green       { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
.news-date { font-size: 12px; color: var(--gray); letter-spacing: 1px; }
.news-title {
  grid-column: 2; grid-row: 1;
  font-size: 14px; font-weight: 700; color: var(--dark); letter-spacing: .5px; margin-bottom: 6px;
}
.news-excerpt {
  grid-column: 2; grid-row: 2;
  font-size: 12px; color: var(--gray); line-height: 1.9;
}
@media (max-width: 640px) {
  .news-item { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .news-meta { grid-column: 1; grid-row: 1; flex-direction: row; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
  .news-title { grid-column: 1; grid-row: 2; }
  .news-excerpt { grid-column: 1; grid-row: 3; }
}

/* ===== PAGINATION ===== */
.pagination { display: flex; gap: 4px; justify-content: center; margin-top: 28px; }
.pagination a, .pagination span {
  padding: 7px 12px; border: 1px solid var(--border); font-size: 12px;
  text-decoration: none; color: var(--dark); transition: background .15s;
}
.pagination a:hover { background: var(--light); }
.pagination .current { background: var(--dark); color: var(--white); border-color: var(--dark); }

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .detail-layout { grid-template-columns: 1fr; }
  .page-layout.two-col { grid-template-columns: 1fr; }
  .mypage-layout { grid-template-columns: 1fr; }
  .payment-layout { grid-template-columns: 1fr !important; }
  .detail-imgs-stack { display: none; }
  .detail-imgs-mobile { display: block; }
  /* チェックアウト: 1列 + 順序 sidebar→form→button */
  .checkout-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .checkout-layout .checkout-sidebar-col { grid-column: 1; grid-row: 1; }
  .checkout-layout .checkout-form        { grid-column: 1; grid-row: 2; }
  .checkout-layout .checkout-submit-row  { grid-column: 1; grid-row: 3; }
}
@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; margin-left: 0; }
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .products-page-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  /* ピックアップ商品: 全幅（正方形のまま）— pickup-grid 以外で使う場合の汎用ルール */
  .product-grid .product-card.is-pickup { grid-column: 1 / -1; }
  /* ピックアップグリッド: 1枚目のみ全幅、2枚目以降は2列ペア */
  .pickup-grid.product-grid .product-card.is-pickup { grid-column: auto; }
  .pickup-grid.product-grid .product-card:first-child { grid-column: 1 / -1; }
  /* 奇数合計を維持: 偶数番目がラスト1枚（孤立）になる場合は非表示 */
  .pickup-grid.product-grid .product-card:last-child:nth-child(even) { display: none; }
  .form-row { grid-template-columns: 1fr; }
  .hero { min-height: 320px; }
  /* トップページ セクション並び替え */
  .top-sections { display: flex; flex-direction: column; }
  .top-sections .hero           { order: 1; }
  .top-sections #sec-pickup     { order: 2; }
  .top-sections .news-section   { order: 3; }
  .top-sections #sec-products   { order: 4; }
  .top-sections #sec-feature    { order: 5; }
  .top-sections #how-to         { order: 6; }
  .top-sections #categories     { order: 7; }

  /* feature-band: 1列・アイコン左＋テキスト右の横並びレイアウト */
  .feature-band { padding: 32px 20px; }
  .feature-band-inner { grid-template-columns: 1fr; gap: 0; text-align: left; }
  .feature-item { display: flex; align-items: center; gap: 18px; padding: 14px 0; border-bottom: 1px solid rgba(0,0,0,.07); }
  .feature-item:last-child { border-bottom: none; }
  .feature-item .feature-icon { margin-bottom: 0; flex-shrink: 0; }
  .feature-item h3 { margin-bottom: 4px; }
  .feature-item p  { margin: 0; }

  /* ヘッダー: コンパクト化 */
  .header-inner { height: 52px; gap: 8px; padding: 0 12px; }
  .header-search-inner { padding: 10px 12px; }
  .header-search-bar.open { max-height: 56px; }
  .logo-img { max-height: 30px; }
  .btn-mypage { display: none; }       /* ドロワーメニューに含まれるため非表示 */
  .cart-text { display: none; }        /* カートテキスト非表示、アイコン+バッジのみ */
  .btn-cart { padding: 7px 12px; }
  .search-panel { top: 52px; padding: 8px 14px; }

  /* iOS フォーム自動ズーム防止 (font-size < 16px でズームが発生) */
  .option-input, .option-select, .option-textarea,
  .form-group input, .form-group select, .form-group textarea,
  .header-search-inner input[type="search"] { font-size: 16px !important; }
}
@media (max-width: 480px) {
  .header-inner { padding: 0 12px; }
  .section { padding: 44px 16px; }
}

/* ===== ログイン / 会員登録 ===== */
.login-grid {
  max-width: 900px;
  margin: 48px auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
@media (max-width: 640px) {
  .login-grid {
    grid-template-columns: 1fr;
    margin: 32px auto;
  }
}