/* =====================================================================
   ショップ共通スタイル
   配色は :root の変数。店舗ごとの上書きは管理画面の設定（shopThemeCss）
   ===================================================================== */
.badge-soldout { background: var(--gray) !important; color: #fff !important; }
:root {
  --dark:   #6a6352;
  --mid:    #c5b899;
  --light:  #f5f0e8;
  --white:  #ffffff;
  --red:    #cc0000;
  --gray:   #888888;
  --border: #e0d8cc;
  --text:   #333333;
  --radius: 2px;
  --dark2:      #4a4338;
  --dark3:      #8b7d6b;
  --accent:     #2e7d32;
  --accent-soft:#e8f5e9;
  --red-dark:   #aa0000;
  --red-soft:   #fce4ec;
  --surface:    #f9f7f4;
  --disabled:   #c9c6bf;
  --muted:      #555555;
  --icon:       var(--mid);
}

/* ===== 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: var(--light); }
.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: color-mix(in srgb, var(--mid) 70%, transparent);
  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: color-mix(in srgb, var(--mid) 60%, transparent); 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-has-sub > a { padding-bottom: 4px; }
.nav-drawer .nav-sub { margin-top: 0; padding-left: 14px; border-top: none; }
.nav-drawer .nav-sub li { border-bottom: 1px solid rgba(255,255,255,.04); }
.nav-drawer .nav-sub li:last-child { border-bottom: none; }
.nav-drawer .nav-sub a { padding: 9px 0; font-size: 12px; letter-spacing: .5px; color: rgba(255,255,255,.45); }
.nav-drawer .nav-sub a:hover { color: rgba(255,255,255,.75); }
.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%, var(--dark2) 55%, var(--dark3) 100%);
  text-align: center; color: var(--white); padding: 24px 0 40px; position: relative; overflow: hidden; overflow: clip;
}
.hero:not(:has(.hero-slide)) { display: none; }
.hero-slides { display: flex; gap: 16px; transition: transform .6s ease; }
.hero-slides:has(.hero-slide:only-child) { justify-content: center; }
.hero-slides.hero-jump, .hero-slides.hero-jump .hero-slide { transition: none; }
.hero-slide { flex: 0 0 min(1200px, 78vw); aspect-ratio: 3 / 1; overflow: hidden; opacity: .4; cursor: pointer; transition: opacity .6s; }
.hero-slide.active { opacity: 1; cursor: default; }
.hero-slide picture { display: block; width: 100%; height: 100%; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; }
.hero-nav { position: absolute; bottom: 14px; 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: var(--dark2); }
.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: var(--red-dark); }
.btn-full { width: 100%; text-align: center; }
.btn:disabled, .btn[disabled] { background: var(--disabled); color: var(--white); cursor: not-allowed; opacity: 1; }
.btn:disabled:hover, .btn[disabled]:hover { background: var(--disabled); }

/* ===== 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(--icon); 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(--icon); 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; }

/* ===== SUB BANNERS (HOW TO ORDER と footer の間) ===== */
section.sub-banner-section { padding-top: 0; }
.sub-banner-grid {
  display: grid;
  grid-template-columns: repeat(4, 280px);
  gap: 20px;
  justify-content: center;
}
.sub-banner-item {
  display: block;
  width: 280px;
  height: 120px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--light);
}
.sub-banner-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
a.sub-banner-item:hover img { transform: scale(1.04); }

/* ===== 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(--icon); 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: var(--muted); margin: 16px 0; border-top: 1px solid var(--border); padding-top: 16px; }
.detail-desc a { color: inherit; text-decoration: underline; }
.detail-desc p, .detail-desc ul, .detail-desc ol { margin: 0 0 1em; }
.detail-desc ul, .detail-desc ol { padding-left: 1.5em; }

/* 注文ガイドバー */
.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(--icon); outline-offset: -2px; }
.char-counter { font-size: 11px; color: var(--gray); text-align: right; margin-top: 4px; }
/* 複数画像アップロード */
.upload-multi-wrap { display: flex; flex-direction: column; gap: 10px; }
.upload-multi-label { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 2px dashed var(--border); border-radius: var(--radius); cursor: pointer; font-size: 13px; color: var(--dark); transition: border-color .2s; }
.upload-multi-label:hover { border-color: var(--icon); }
.upload-multi-input { display: none; }
.upload-multi-preview { display: flex; gap: 8px; flex-wrap: wrap; }
/* 画像付き選択肢カード */
.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(--icon); }
.option-img-card.selected { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
.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: var(--red); box-shadow: 0 0 0 1px var(--red); }
.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(--icon); }
.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(--accent); }
.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: var(--muted); 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: var(--surface); 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(--icon); outline-offset: -2px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.req-mark { color: var(--red); }

/* パスワード表示切替（password-toggle.js が input を .pw-field でラップする） */
.pw-field { position: relative; display: block; width: 100%; }
.pw-field > input.pw-input { width: 100%; padding-right: 42px; }
.pw-toggle {
  position: absolute; top: 0; right: 0; width: 40px; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--gray); line-height: 1;
}
.pw-toggle:hover, .pw-toggle.is-on { color: var(--dark); }
.pw-toggle:disabled { opacity: .4; cursor: not-allowed; }

.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(--accent); 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); }

.sample-confirm-section { margin-top: 16px; }
.sample-confirm-banner { margin-bottom: 12px; }
.sample-confirm-banner img { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.sample-confirm-box { border: 2px solid var(--border); border-radius: var(--radius); padding: 4px; }
.sample-confirm-option {
  display: flex; align-items: center; gap: 4px; padding: 12px 14px; font-size: 13px;
  cursor: pointer; border-radius: calc(var(--radius) - 2px); transition: background .15s;
}
.sample-confirm-option:hover { background: var(--light); }
.sample-confirm-option:has(input:checked) { background: var(--light); font-weight: 700; }
input[type="radio"], input[type="checkbox"] { accent-color: var(--accent); }

/* ===== 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: var(--muted); 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); }

/* 注文完了ページの会員登録パネル（チャット利用に会員登録が必要な旨を促す） */
.register-panel { border: 2px solid var(--dark); background: var(--white); padding: 24px; margin: 28px 0 0; text-align: left; }
.register-panel-head {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--dark); color: var(--white); margin: -24px -24px 18px; padding: 12px 16px;
  font-size: 13px; font-weight: 700; letter-spacing: 1px; text-align: center; line-height: 1.6;
}
.register-panel .register-lead { font-size: 12px; color: var(--gray); line-height: 1.9; margin-bottom: 16px; text-align: left; }
.register-panel .register-email { font-weight: 700; color: var(--dark); word-break: break-all; }
.register-panel .form-group { margin-bottom: 12px; }
.register-hint { font-size: 11px; line-height: 1.7; margin: 0 0 14px; color: var(--gray); text-align: left; }
.register-hint.ng { color: var(--red); }
.register-hint.ok { color: var(--accent); }
.register-sub { font-size: 11px; color: var(--gray); margin-top: 14px; text-align: center; line-height: 1.9; }
.register-sub a { color: var(--dark); }

/* ===== 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; }

/* 注文明細（1商品ぶん）。オプション画像が混ざっても行が崩れないよう flex で組む */
.order-item-row { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.order-item-thumb { width: 110px; height: 110px; background: var(--light); display: flex; align-items: center; justify-content: center; color: var(--icon); flex-shrink: 0; overflow: hidden; border-radius: 2px; }
.order-item-thumb img { width: 110px; height: 110px; object-fit: cover; display: block; }
.order-item-main { flex: 1; min-width: 0; }
.order-item-name { font-weight: 700; font-size: 14px; line-height: 1.5; }
.order-item-price { font-weight: 700; white-space: nowrap; }

/* オプション一覧: ラベル列＋値列のグリッド。画像つきの値でも縦位置が揃う */
.order-opts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; align-items: center; margin: 8px 0 0; font-size: 11px; }
.order-opts dt { color: var(--gray); line-height: 1.5; }
.order-opts dd { margin: 0; color: var(--dark); line-height: 1.5; min-width: 0; word-break: break-word; }
.order-opts dd img { vertical-align: middle; }

.order-card-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.order-card-footer .order-summary { font-size: 13px; }

@media (max-width: 600px) {
  .order-item-thumb, .order-item-thumb img { width: 76px; height: 76px; }
  .order-opts { grid-template-columns: 1fr; gap: 2px; }
  .order-opts dt { margin-top: 6px; }
}

/* ===== 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: var(--red-soft); color: var(--red); }
.s-waiting_payment { background: var(--red-soft); color: var(--red); }
.s-confirmed       { background: var(--dark); color: var(--white); }
.s-sample_check    { background: var(--light); color: var(--dark); }
.s-awaiting_reply  { background: var(--light); color: var(--dark); }
.s-making          { background: var(--dark); color: var(--white); }
.s-made            { background: var(--accent-soft); color: var(--accent); }
.s-shipped         { background: var(--accent); color: var(--white); }
.s-done            { background: var(--light); color: var(--muted); }
.s-cancelled       { background: var(--light); color: var(--gray); }

/* ===== 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; border-radius: 16px; }
.msg.shop .msg-bubble { background: var(--white); border: 1px solid var(--border); border-top-left-radius: 4px; }
.msg.user .msg-bubble { background: var(--dark); color: var(--white); border-bottom-right-radius: 4px; }
.msg-meta { font-size: 10px; color: var(--gray); margin-top: 4px; }
.msg.user .msg-meta { text-align: right; }
/* チャット画像: バブル幅を超えないよう縮小（インラインstyleだとメディアクエリで上書きできないためクラス化） */
.chat-img { max-width: min(240px, 100%); max-height: 280px; width: auto; height: auto; border-radius: 4px; display: block; cursor: zoom-in; }
.chat-input-area { background: var(--white); border-top: 1px solid var(--border); padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
/* 入力欄は JS で 8 行目まで自動的に伸び、9 行目以降はスクロール */
.chat-input-area textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--border); padding: 8px 12px; font-size: 16px; line-height: 1.5; resize: none; height: 60px; min-height: 60px; overflow-y: hidden; 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; }

.chat-back { margin-bottom: 12px; }
.chat-img-preview { padding: 8px 0; font-size: 12px; color: var(--gray); }

/* モバイルのチャット画面: マイページブロックを横並びにして、チャットを画面幅いっぱいに */
@media (max-width: 900px) {
  .mypage-layout.chat-layout { margin: 0 auto 24px; padding: 0; gap: 0; }
  .mypage-layout.chat-layout .mypage-sidebar {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; padding: 12px 16px;
  }
  .mypage-layout.chat-layout .mypage-sidebar h3 { margin-bottom: 0; }
  .mypage-layout.chat-layout .mypage-sidebar .customer-name { margin-bottom: 0; }
  .mypage-layout.chat-layout .sidebar-menu {
    flex: 0 0 100%; display: flex; background: var(--white);
    margin: 0 -16px -12px; border-top: 1px solid var(--border);
  }
  .mypage-layout.chat-layout .sidebar-menu li {
    flex: 1 1 auto; border-bottom: none; border-right: 1px solid var(--border); min-width: 0;
  }
  .mypage-layout.chat-layout .sidebar-menu li:last-child { border-right: none; }
  .mypage-layout.chat-layout .sidebar-menu a {
    padding: 11px 6px; text-align: center; font-size: 12px; white-space: nowrap;
  }
  .mypage-layout.chat-layout .chat-wrap { max-width: none; }
  /* 画像バブルが窮屈にならないよう横幅を拡大 */
  .mypage-layout.chat-layout .msg { max-width: 85%; }
  .mypage-layout.chat-layout .chat-back { padding: 12px 16px 0; margin-bottom: 0; }
  .mypage-layout.chat-layout .chat-img-preview { padding: 8px 16px; }
}

/* ===== 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: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent); }
.flash.error   { background: var(--red-soft); color: var(--red); border: 1px solid var(--red); }
.flash.info    { background: var(--light); color: var(--text); border: 1px solid var(--border); }

/* ===== 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: color-mix(in srgb, var(--mid) 50%, transparent); }
.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 color-mix(in srgb, var(--mid) 40%, transparent); 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-tabs {
  display: flex; gap: 0; flex-wrap: wrap;
  max-width: 860px; margin: 0 auto 24px;
  border-bottom: 2px solid var(--border);
}
.news-tab {
  background: none; border: none; cursor: pointer;
  padding: 10px 20px; font-size: 13px; font-weight: 600; color: var(--gray);
  letter-spacing: .5px; position: relative; white-space: nowrap;
  transition: color .15s;
}
.news-tab:hover { color: var(--dark); }
.news-tab.active { color: var(--dark); }
.news-tab.active::after {
  content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px;
  background: var(--dark);
}
.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: var(--red-soft); color: var(--red); border: 1px solid var(--red); }
.cat-sale        { background: var(--red); color: var(--white); border: 1px solid var(--red); }
.cat-maintenance { background: var(--light); color: var(--muted); border: 1px solid var(--border); }
.cat-blue        { background: var(--light); color: var(--dark); border: 1px solid var(--border); }
.cat-green       { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent); }
.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-tabs { gap: 0; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .news-tab { padding: 9px 14px; font-size: 12px; }
  .news-item { grid-template-columns: 1fr; grid-template-rows: 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; margin-bottom: 0; }
  .news-excerpt { display: none; }
}

/* ===== 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 { padding: 16px 0 32px; }
  .hero-slides { gap: 8px; }
  .hero-slide { flex-basis: 84vw; }
  .hero-nav { bottom: 10px; }
  /* トップページ セクション並び替え */
  .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; }
  .top-sections #sec-sub-banners { order: 8; }

  /* 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; }

  /* サブバナー: 2列×2行 */
  section.sub-banner-section { padding-top: 24px; }
  .sub-banner-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .sub-banner-item { width: 100%; height: auto; aspect-ratio: 280 / 120; }
}
@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;
  }
}