@charset "utf-8";

/* =========================================================
   基本設定（リセットに近い最小限）
   ========================================================= */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

html, body { overflow-x: hidden; }  /* 横スクロール抑止 */

body {
  margin: 0;                         /* ブラウザ既定の外側余白をリセット */
  color: #333;
  font-family:
    system-ui,                       /* 各OSの標準UIフォント（将来も継続見込み） */
    "Hiragino Sans", "Hiragino Kaku Gothic ProN",  /* mac系 */
    "Meiryo",                        /* Windowsで安定（Yuより細く出にくい） */
    "Yu Gothic UI", "Yu Gothic",     /* 近年のWindows */
    sans-serif;                      /* 最終フォールバック */
  line-height: 1.7;                  /* 可読性重視の行間 */
  -webkit-text-size-adjust: 100%;
  background: #fff;
}

/* 画像はデフォルトで縮小対応＆行間崩れ防止 */
img {
  border: none;
  max-width: 100%;
  height: auto;
  display: block;
}

/* =========================
   リンク付き画像のわずかな色変化＆アクセシビリティ
   ========================= */
/* ▼ 通常時：なめらかに変化させる（他の画像には影響しない） */
a img {
  transition: filter .15s ease, box-shadow .15s ease, outline-color .15s ease;
}

/* ▼ マウスホバー／タップ中に少しだけ強調（“色が変わる”の体感） */
a:hover img,
a:active img {
  /* ほんのり明るく＆彩度UP（過度な変化は避ける） */
  filter: brightness(1.03) saturate(1.06);
  box-shadow: 0 0 0 2px rgba(185,124,86,.15);
}

/* ▼ キーボード操作でリンクにフォーカスが当たった時も分かるように */
a:focus-visible img {
  /* 色変化に加えて、薄いアクセントの縁取りで判別しやすく */
  filter: brightness(1.03) saturate(1.06);
  outline: 2px solid var(--coco-accent, #B97C56);
  outline-offset: 3px; /* 画像から少し離して見やすく */
}

/* ▼ タッチ端末向け：タップ時の反応を確実に（coarseポインタ） */
@media (pointer: coarse){
  a:active img { filter: brightness(1.05) saturate(1.08); }
}

/* =========================================================
   カラー変数（ブランドカラー）
   ========================================================= */
:root{
  --coco-primary: #7A5C3A; /* 真鍮寄りブラウン */
  --coco-accent:  #B97C56; /* コッパー：差し色/ライン */
  --coco-accent2: #F3E3D8; /* やわらかコッパー光 */
  --coco-bg-soft: #F7F7F5; /* あたたかみのある白 */
  --coco-border:  #E3E2DE; /* やわらか薄枠 */
}

/* =========================================================
   レイアウト枠
   ========================================================= */
.page-scale {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 768px) {
  .page-scale { padding: 0 20px; }
}

/* セクションの上下余白（シンプルに） */
.section { padding-block: 8px; }
@media (min-width: 768px) {
  .section { padding-block: 3px; }
}

/* =========================================================
   見出し
   ========================================================= */
h1 {
  font-size: clamp(16px, 3.2vw, 20px);
  color: #666;
  margin: 0;
}

h2{
  font-size:clamp(18px,2.8vw,20px);
  background:var(--coco-bg-soft);
  box-shadow:inset 0 0 0 1px var(--coco-border);
  border-left:4px solid var(--coco-accent);
  color:var(--coco-primary);
  padding:6px 10px; margin:12px 0 8px; border-radius:4px; line-height:1.5;
}

h3{
  font-size:clamp(16px,2.6vw,17px);
  background:var(--coco-bg-soft);
  box-shadow:inset 0 0 0 1px var(--coco-border);
  border-left:3px solid var(--coco-accent);
  color:var(--coco-primary);
  padding:6px 10px; margin:10px 0 6px; border-radius:4px; line-height:1.5;
}

h3 + *{ margin-top: 6px; }

/* 迷惑フォルダ注意文を“少し大きく赤”で強調する専用クラス */
.note-strong {            /* ← 任意のクラス名 */
  color: #d83434;         /* 視認性の良い赤（#f00より落ち着きあり） */
  font-size: 1.15em;      /* 「少し大きく」= 約15%拡大 */
  font-weight: 800;       /* 太めで明瞭に */
}

.notice{
  font-size: 0.95rem;
  color:#555;
  margin: 8px 0;
}

/* 共通: エラーメッセージ色 */
.error { color: #b00020; }

/* 区切り線のデザイン */
.line {
  border-top: 1px solid #ccc;   /* 線の色と太さ */
  margin: 20px 0;              /* 上下余白 */
}

/* ▼ スペーサー要素（サイズ違い） */
.space-r { height: -4px; }
.space-s { height: 8px; }
.space-m { height: 16px; }
.space-l { height: 24px; }

/* =========================================================
   ヘッダー・フッター
   ========================================================= */
.header p {
  font-size: 14px;
  margin: 0;
  color: #666;
}
.footer {
  padding: 16px 0;                         /* 余白を少し広げてゆったり */
  background: linear-gradient(90deg,       /* ブランド感のあるグラデ */
              rgba(122, 92, 58, 0.1),
              rgba(198, 138, 46, 0.08));
  text-align: center;
  font-size: 14px;
  color: #555;
  border-top: 1px solid var(--coco-border);
}

.footer a {
  color: var(--coco-primary);              /* ブランドブラウン */
  text-decoration: none;
  font-weight: 600;
}

.footer a:hover {
  text-decoration: underline;              /* マウスオーバーで強調 */
}

.footer p {
  margin: 0;
  line-height: 1.6;
}

/* =========================================================
   ページ上部リンク（右寄せ・枠付きボタン）
   ========================================================= */
.tophe { margin: 16px 0; text-align: right; }
.tophe a {
  display: inline-block;
  padding: 6px 10px;
  border: 1px solid var(--coco-border);
  border-radius: 9999px;
  background: #fff;
  color: #333;
  text-decoration: none;
  line-height: 1.2;
}
.tophe a:hover,
.tophe a:focus-visible {
  border-color: var(--coco-accent);
  color: var(--coco-accent);
  outline: none;
  box-shadow: 0 0 0 2px rgba(198,138,46,.15);
}
@media (max-width: 480px){
  .tophe a { padding: 4px 8px; font-size: 13px; }
}

/* =========================================================
   サイト内メニュー（横並び→縮小で折り返し）
   ========================================================= */
.menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.menu-list .menu a {
  display: inline-block;
  padding: 4px 8px;
  border: 1px solid var(--coco-border);
  border-radius: 4px;
  background: #fff;
  color: #333;
  text-decoration: none;
  line-height: 1.2;
  /* white-space: nowrap; */ /* 必要なら有効化 */
}
.menu-list .menu a:hover,
.menu-list .menu a:focus-visible {
  border-color: var(--coco-accent);
  color: var(--coco-accent);
  outline: none;
}
@media (max-width: 480px) {
  .menu-list { gap: 4px; }
  .menu-list .menu a {
    padding: 3px 7px;
    border-radius: 3px;
    font-size: 13px;
    line-height: 1.2;
  }
}

/* =========================================================
   カテゴリナビ（横並び＋折り返し）
   ========================================================= */
.category-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.category-list > li { list-style: none; }
.cat-link {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--coco-border);
  border-radius: 9999px;
  background: #fff;
  color: #333;
  text-decoration: none;
  line-height: 1.2;
  /* white-space: nowrap; */ /* 必要なら有効化 */
}
.cat-link:hover { border-color: var(--coco-accent); }
.cat-link:focus-visible {
  outline: 2px solid var(--coco-accent);
  outline-offset: 2px;
}
@media (max-width: 480px) {
  .cat-link { padding: 3px 8px; font-size: 13px; line-height: 1.2; }
}

/* ===== パンくずリスト用CSS ===== */
.breadcrumb {
  font-size: 14px;          /* 基本文字サイズ */
  margin: 0.5em 0 1em;
  padding: 0;
}

.breadcrumb ol {
  list-style: none;         /* 数字を消す */
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;          /* 折り返し可 */
}

.breadcrumb li {
  display: flex;
  align-items: center;
  white-space: nowrap;      /* 改行防止 */
}

.breadcrumb li + li::before {
  content: "›";             /* 区切り記号（＞でもOK） */
  margin: 0 0.4em;
  color: #999;
  font-size: 0.9em;
}

.breadcrumb a {
  text-decoration: none;
  color: #0066cc;           /* リンク色 */
}

.breadcrumb a:hover {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .breadcrumb {
    font-size: 13px;        /* 少し小さめ */
  }
  .breadcrumb ol {
    flex-direction: row;    /* 横並び */
    flex-wrap: wrap;        /* 画面が狭いとき折り返し */
  }
  .breadcrumb li {
    margin-bottom: 4px;     /* 折り返し時の余白 */
  }
}

/* =========================================================
   スコープ限定：.box-b[data-scope="style-b"] 内のみ
   ========================================================= */
/* 注文画面（style-b）内の .box_button の上余白をCSSで管理 */
.box-b[data-scope="style-b"] .box_button {
  margin-top: 12px;
}

/* ▼ 商品一覧（常に4列） */
.box-b[data-scope="style-b"] .grid-4{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:12px; list-style:none; padding:0; margin:0;
}
.box-b[data-scope="style-b"] .grid-4 li{ padding:4px; text-align:center; background:#fff; }
.box-b[data-scope="style-b"] .grid-4 a{ display:block; text-decoration:none; color:inherit; }
.box-b[data-scope="style-b"] .grid-4 img{ width:100%; height:auto; display:block; border-radius:2px; }
/* 説明文3行省略（非WebKitは1行） */
.box-b[data-scope="style-b"] .grid-4 .desc{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
  overflow:hidden; line-height:1.4; margin:4px 0; font-size:.9em;
}
@supports not (-webkit-line-clamp: 3){
  .box-b[data-scope="style-b"] .grid-4 .desc{ white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
}
.box-b[data-scope="style-b"] .grid-4 .series-title{
  font-size:.9em; font-weight:400; margin:2px 0; color:#333;
  background-color:rgba(122,92,58,.12); padding:2px 6px; border-radius:4px;
}
.box-b[data-scope="style-b"] .grid-4 .price{ font-size:.9em; font-weight:400; margin:2px 0 0; color:var(--coco-accent); }

/* =========================================================
   旧構造 price-dl / spec の最低限
   ========================================================= */
.box-b[data-scope="style-b"] .price-dl,
.box-b[data-scope="style-b"] .spec{
  display:grid; grid-template-columns:var(--label-w,7em) 1fr; gap:6px 10px; margin:0;
}
.box-b[data-scope="style-b"] .price-dl dt,
.box-b[data-scope="style-b"] .spec dt{ color:#666; font-weight:600; white-space:nowrap; }
.box-b[data-scope="style-b"] .price-dl dd,
.box-b[data-scope="style-b"] .spec dd{ margin:0; }
.box-b[data-scope="style-b"] .price-dl dt.em{ color:var(--coco-primary); }

/* ===== はみ出し対策（複数要素まとめて） ===== */
.box-b[data-scope="style-b"] .cards-2>*,
.box-b[data-scope="style-b"] .card,
.box-b[data-scope="style-b"] .cards-2,
.box-b[data-scope="style-b"] .meta dd,
.box-b[data-scope="style-b"] .meta .card-name{
  min-width:0; word-break:break-word; overflow-wrap:anywhere; hyphens:auto;
}

/* ===== スマホ（～480px） ===== */
@media (max-width:480px){
  .box-b[data-scope="style-b"] .cards-2{ gap:4px; --label-w:5.4em; }
  .box-b[data-scope="style-b"] .card{ padding:8px; }
  .box-b[data-scope="style-b"] .meta{ grid-template-columns:1fr; gap:2px 0; font-size:.95rem; }
  .box-b[data-scope="style-b"] .meta dt{
    grid-column:1; font-size:.9rem; line-height:1.2; color:#666; margin-top:6px; white-space:normal;
  }
  .box-b[data-scope="style-b"] .meta dt:first-of-type{ margin-top:2px; }
  .box-b[data-scope="style-b"] .meta dd{ grid-column:1; margin:0 0 6px; line-height:1.35; }
  .box-b[data-scope="style-b"] .meta .card-name{ font-size:clamp(14px,4.2vw,16px); -webkit-line-clamp:2; }

  /* 商品一覧の行間だけ広げる */
  .box-b[data-scope="style-b"] .grid-4{ column-gap:4px; row-gap:20px; }
  .box-b[data-scope="style-b"] .grid-4 li{ padding:0; }
  .box-b[data-scope="style-b"] .grid-4 .series-title{ margin:2px 0 0; }
  .box-b[data-scope="style-b"] .grid-4 .desc{ margin:2px 0 0; line-height:1.35; font-size:.88em; }
  .box-b[data-scope="style-b"] .grid-4 .price{ margin:2px 0 0; font-size:.85em; }
}

/* =========================================================
   dl.spec を枠付きテーブル風に統一（最終上書き）
   ========================================================= */
.box-b[data-scope="style-b"] .spec{
  --label-w:12em; /* ★PCのラベル幅を広めに（11.5～12.5emで調整可） */
  gap:0 !important; border:1px solid var(--coco-border);
  border-radius:10px; overflow:hidden; background:#fff;
}
.box-b[data-scope="style-b"] .spec dt,
.box-b[data-scope="style-b"] .spec dd{
  margin:0; padding:10px 12px; border-top:1px solid var(--coco-border); line-height:1.5;
}
.box-b[data-scope="style-b"] .spec dt:first-of-type,
.box-b[data-scope="style-b"] .spec dd:first-of-type{ border-top:none; }
.box-b[data-scope="style-b"] .spec dt{
  font-weight:600; color:#333; border-right:1px solid var(--coco-border);
  background-color:rgba(122,92,58,.08);
  white-space:nowrap; /* ★PCでは折り返さない（1行に収める） */
  word-break:break-word; overflow-wrap:anywhere;
}
@media (max-width:480px){
  .box-b[data-scope="style-b"] .spec{ grid-template-columns:1fr !important; }
  .box-b[data-scope="style-b"] .spec dt{
    border-right:none; border-top:1px solid var(--coco-border);
    white-space: normal; /* ★スマホは折り返しOKに戻す */
  }
  .box-b[data-scope="style-b"] .spec dt:first-of-type{ border-top:none; }
  .box-b[data-scope="style-b"] .spec dd{ border-top:1px solid var(--coco-border); }
  .box-b[data-scope="style-b"] .spec dd:first-of-type{ border-top:1px solid var(--coco-border); }
}

/* ===== PC用サムネ（最小120pxで均等） ===== */
@media (min-width:768px){
  .box-b[data-scope="style-b"] .thumbs{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
    gap:8px; justify-content:center;
  }
  .box-b[data-scope="style-b"] .thumbs img{ width:100%; height:auto; }
}

/* ===== 価格だけ赤＆少し大きめ ===== */
.box-b[data-scope="style-b"] .price-dl .price-now strong{
  color:#d83434; font-size:clamp(1.08rem,1.9vw,1.35rem);
  font-weight:800; line-height:1.15; letter-spacing:.02em; font-variant-numeric:tabular-nums;
}
@media (max-width:480px){
  .box-b[data-scope="style-b"] .price-dl .price-now strong{ font-size:clamp(1.02rem,4vw,1.25rem); }
}

/* ===== 商品情報フォーム：余白とサイズ（select/input/textarea を一括） ===== */
.box-b[data-scope="style-b"] .spec dd > :is(select,input[type="text"],textarea){ margin-bottom:6px; }
@media (max-width:480px){
  .box-b[data-scope="style-b"] .spec dd > :is(select,input[type="text"],textarea){ margin-bottom:8px; }
}
/* プルダウンを少し大きく（候補文字も含めて） */
.box-b[data-scope="style-b"] .spec dd select{
  font-size:15.5px; line-height:1.2; padding:6px 28px 6px 10px;
  min-height:36px; height:auto; box-sizing:border-box;
}
.box-b[data-scope="style-b"] .spec dd select option{ font-size:15.5px; }
@media (max-width:480px){
  .box-b[data-scope="style-b"] .spec dd select{ font-size:16px; padding:8px 28px 8px 10px; min-height:40px; }
}

/* =========================================================
   カード型商品一覧（2列Grid）— 見出し無し / 左ラベル固定幅
   ※ .box-c[aria-label="カテゴリ一覧"] 内だけに限定
   ========================================================= */
.box-c[data-scope="style-c"] .cards-2{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr)); /* 常に2列 */
  gap:12px;
  list-style:none;
  padding:0;
  margin:12px 0 16px;

  /* ラベル列の固定幅（ここだけ変えれば全体調整できる） */
  --label-w: 7em;
}

.box-c[data-scope="style-c"] .card{
  border:1px solid var(--coco-border);
  border-radius:10px;
  background:#fff;
  padding:10px;
}

.box-c[data-scope="style-c"] .card-img img{
  width:100%;
  height:auto;
  display:block;
  border-radius:6px;
}

/* 情報ブロック：商品名／メーカー価格／通販特価／サイズ／納期 */
.box-c[data-scope="style-c"] .meta{
  display:grid;
  grid-template-columns: var(--label-w) 1fr; /* ← 左列固定幅 */
  align-items: baseline;
  gap: 6px 10px;
  margin: 8px 0 0;
}
.box-c[data-scope="style-c"] .meta dt{
  color:#666;
  font-weight:600;
  white-space: nowrap; /* ラベルは折り返さない */
}
.box-c[data-scope="style-c"] .meta dd{ margin:0; }

/* 商品名（値側）— 2行で省略 */
.box-c[data-scope="style-c"] .meta .card-name{
  font-size: clamp(16px, 3vw, 18px);
  font-weight: 700;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* 価格の装飾 */
.box-c[data-scope="style-c"] .price-old{ color:#777; }
.box-c[data-scope="style-c"] .price-now{ color: var(--coco-primary); }
.box-c[data-scope="style-c"] .price-now strong{ font-weight: 800; }
.box-c[data-scope="style-c"] .meta dt.em{ color: var(--coco-primary); }

/* =========================
   スマホではみ出す問題の対策パッチ
   ========================= */

/* 1) Gridのはみ出し防止（min-content幅を無効化） */
.box-c[data-scope="style-c"] .cards-2 > * { min-width: 0; }  /* 各カード */
.box-c[data-scope="style-c"] .card       { min-width: 0; }   /* 念のためカード自体にも */

/* 2) 長い型番／数字／ハイフンの強制折り返し */
.box-c[data-scope="style-c"] .cards-2,
.box-c[data-scope="style-c"] .card,
.box-c[data-scope="style-c"] .meta dd,
.box-c[data-scope="style-c"] .meta .card-name {
  word-break: break-word;          /* CJKでも安全寄り */
  overflow-wrap: anywhere;         /* どこでも折れる */
  hyphens: auto;                   /* ラテン語圏の単語に効く */
}

/* =========================
   スマホ：ラベルを上／値を下に縦積み（～480px）
   ========================= */
@media (max-width: 480px) {
  /* 余白・幅の最終調整 */
  .box-c[data-scope="style-c"] .cards-2{ gap: 4px; --label-w: 5.4em; }
  .box-c[data-scope="style-c"] .card{ padding: 8px; }

  /* ラベル固定2列 → 1列（ラベル→値の縦並び）へ */
  .box-c[data-scope="style-c"] .meta{
    grid-template-columns: 1fr;  /* ← 1列に */
    gap: 2px 0;                  /* ラベルと値の間はタイトに */
    font-size: 0.95rem;          /* 全体を少しだけ縮小 */
  }

  /* ラベル（dt）は小さめ＆余白で段落っぽく */
  .box-c[data-scope="style-c"] .meta dt{
    grid-column: 1;              /* 明示的に1列目 */
    font-size: 0.9rem;
    line-height: 1.2;
    color: #666;
    margin-top: 6px;             /* 各項目の頭に少し余白 */
    white-space: normal;         /* スマホでは折返しOK */
  }
  .box-c[data-scope="style-c"] .meta dt:first-of-type{ margin-top: 2px; }

  /* 値（dd）は見やすさ優先で一段上げる */
  .box-c[data-scope="style-c"] .meta dd{
    grid-column: 1;
    margin: 0 0 6px 0;
    line-height: 1.35;
  }

  /* 商品名はやや小さく、2行省略は維持 */
  .box-c[data-scope="style-c"] .meta .card-name{
    font-size: clamp(14px, 4.2vw, 16px);
    -webkit-line-clamp: 2;
  }

  /* 強調価格がデカくなりすぎるのを防止 */
  .box-c[data-scope="style-c"] .price-now strong{
    font-size: 1em;
    line-height: 1.3;
  }
}

/* =========================
   PCだけ .meta を“隙間ゼロ＆ズレなし”のテーブル枠に（768px～）
   ========================= */
@media (min-width: 768px) {
  .box-c[data-scope="style-c"] .meta{
    /* 既存の2列グリッドは維持 */
    grid-template-columns: var(--label-w) 1fr;
    gap: 0 !important;          /* ← セル間余白を完全に0に */
    align-items: stretch;        /* ← 行内の高さをそろえる */
    border: 1px solid var(--coco-border);
    border-radius: 6px;
    overflow: hidden;            /* 角丸と背景を密着 */
    background: #fff;
  }

  .box-c[data-scope="style-c"] .meta dt,
  .box-c[data-scope="style-c"] .meta dd{
    margin: 0;                   /* 余白を完全排除 */
    padding: 8px 12px;
    line-height: 1.5;
    border-top: 1px solid var(--coco-border); /* 行の横線 */
  }

  /* 1行目だけ上線なし（dtとddの“最初の2要素”を同時に外す） */
  .box-c[data-scope="style-c"] .meta > :nth-child(-n+2){ border-top: none; }

  /* 左列：縦線＋薄茶背景（枠までピッタリ） */
  .box-c[data-scope="style-c"] .meta dt{
    border-right: 1px solid var(--coco-border);
    font-weight: 600;
    color: #333;
    background-color: rgba(122, 92, 58, 0.08);
    white-space: nowrap;         /* PCでは折り返さない */
  }
}

/* =========================================================
   旧来の商品ページ画像（.imgonmouse）をレスポンシブ化
   ※ HTMLそのまま、幅固定・floatを撤廃
   ========================================================= */
.imgonmouse{
  border: 1px solid var(--coco-border);
  overflow: hidden;
  width: auto;                /* ← 固定幅640pxを撤廃 */
  max-width: 100%;
  text-align: center;
  margin: 8px 0;
  border-radius: 10px;
  background: #fff;
}
.imgonmouse img{
  margin: 10px auto;
  height: auto;               /* ← 高さ固定を撤廃 */
  max-height: min(70vh, 520px);
  width: 100%;
  object-fit: contain;
}
.imgonmouse ul{
  padding: 0;
  margin: 6px 0 8px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.imgonmouse ul li{
  list-style: none;
  margin: 0;
  padding: 0;
  float: none;                /* ← float撤廃、Flexに統一 */
}
.imgonmouse ul li img{
  height: auto;
  width: 120px;               /* サムネ既定幅 */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--coco-border);
  padding: 2px;
  border-radius: 6px;
}
@media (max-width: 640px){
  .imgonmouse ul li img{
    width: 84px;              /* モバイルは控えめ */
  }
}

/* =========================================================
   ギャラリー（新構造 .gallery / .thumbs）用 — 任意ページで利用可
   ========================================================= */
.gallery{ border:1px solid var(--coco-border); border-radius:10px; background:#fff; padding:10px; }
.gallery-main{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:6px; }
.thumbs{ display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap:6px; margin-top:8px; }
.thumbs button{ appearance:none; border:1px solid var(--coco-border); background:#fff; border-radius:6px; padding:0; cursor:pointer; }
.thumbs img{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:6px; }
.thumbs button[aria-current="true"]{ outline:2px solid var(--coco-accent); outline-offset:1px; }

/* =========================================================
   注文ボタン（控えめおしゃれ＋アクセシビリティ強化）
   ========================================================= */

/* ▼ ベース：中央寄せは維持 */
div.box_button { 
  text-align: center;
}

/* === 注文ボタン（見やすい立体感＋幅広｜リンク有無で共通） === */
/* ▼ 共通：どの要素でも .button_order を付ければ同じ見た目になる */
.button_order,
a.button_order,
button.button_order,
input.button_order,
span.button_order {
  display: inline-flex;               /* 中身を中央寄せにしやすい */
  align-items: center;
  justify-content: center;
  gap: .4em;

  padding: 14px 32px;                 /* 横余白を広めにして見やすく */
  min-width: 240px;                   /* 最小幅を確保 */
  font: 700 1.1rem/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
  text-align: center;

  color: #fff;                        /* 白文字で明確に */
  text-decoration: none;              /* aタグの下線を消す（a用） */

  /* 背景は --coco-primary を基準に下側を少し締める（5色のみで完結） */
  background: linear-gradient(
    to bottom,
    var(--coco-primary),
    color-mix(in oklab, var(--coco-primary), black 12%)
  );

  border: none;                       /* 枠線は無しでスッキリ */
  border-radius: 8px;                 /* 角丸 */

  box-shadow: 0 4px 6px rgba(0,0,0,0.2); /* 外側影だけで立体感 */
  cursor: pointer;
  user-select: none;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease, background .12s ease;
  -webkit-appearance: none;           /* 入力系タグの見た目差をなくす */
  appearance: none;
}

/* ▼ ホバー：accent をブレンドしてわずかに明るく */
.button_order:hover {
  background: linear-gradient(
    to bottom,
    color-mix(in oklab, var(--coco-accent) 40%, var(--coco-primary)),
    color-mix(in oklab, var(--coco-accent) 15%, var(--coco-primary))
  );
  box-shadow: 0 5px 10px rgba(0,0,0,0.25);
}

/* ▼ クリック時：軽く沈む */
.button_order:active {
  transform: translateY(2px);
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}

/* ▼ キーボード操作の見失い防止：--coco-accent2 をアウトラインに使用 */
.button_order:focus-visible {
  outline: 3px solid var(--coco-accent2); /* 明るめの縁取り */
  outline-offset: 2px;
}

/* ▼ 無効化：a/span は aria-disabled、button/input は disabled */
.button_order[aria-disabled="true"],
.button_order.is-disabled,
button.button_order:disabled,
input.button_order:disabled {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;               /* 誤操作防止（aにも効く） */
  filter: grayscale(.15);
  transform: none;
  box-shadow: 0 3px 6px rgba(0,0,0,0.15);
}

/* ▼ モバイル（タッチ端末）はさらに押しやすく */
@media (pointer: coarse){
  .button_order{
    padding: 14px 20px;
  }
}

/* ▼ 低モーション環境ではアニメを控えめに */
@media (prefers-reduced-motion: reduce){
  .button_order{
    transition: none;
  }
}

/* ▼ おまけ：アウトライン（ゴースト）版 */
.button_order.-ghost{
  background: transparent;
  color: var(--coco-primary, #1e3a8a);
  border: 1.5px solid currentColor;
  box-shadow: none;
}
.button_order.-ghost:hover{
  background-color: color-mix(in oklab, var(--coco-primary, #1e3a8a), white 88%);
}

/* ===== PC用ギャラリー画像のサイズ調整 ===== */
@media (min-width: 768px) {
  .gallery-main {
    max-width: 640px;  /* ★PC時の最大幅を指定（お好みで調整） */
    margin: 0 auto;    /* 中央寄せ */
    width: 100%;       /* 親幅には合わせるが最大幅で制限 */
  }
}

/* ===== PC用サムネイル：最小120pxで均等配置 — 汎用(グローバル) ===== */
@media (min-width: 768px) {
  .thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;          /* サムネイルの間隔（お好みで 6px や 10px に調整可） */
    justify-content: center;
  }
  .thumbs img {
    width: 100%;       /* セル幅いっぱいに表示 */
    height: auto;
  }
}

/* テキストとボタンのあいだのすき間（共通） */
.spec .option-btn{
  margin-inline-start: .5em;
  display: inline-block;
}

/* ── リンクあり：<span class="option-btn"><a>…</a></span> ── */
.option-btn a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;        /* ← ボタン内の余白は元のまま */
  font-size: .8em;
  font-weight: 700;
  border-radius: 9999px;
  text-decoration: none;
  color: var(--coco-primary, #7A5C3A);
  background: linear-gradient(180deg, #fff7e6, #ffe1b2);
  border: 1px solid #d5a95a;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 -1px 0 rgba(0,0,0,.06),
    0 1.5px 3px rgba(0,0,0,.08);
  transition: transform .12s ease, box-shadow .12s ease, background .2s ease, outline-color .12s ease;
  cursor: pointer;
}
.option-btn a:hover,
.option-btn a:focus-visible{
  background: linear-gradient(180deg, #fff2d6, #ffd89a);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.80),
    inset 0 -1px 0 rgba(0,0,0,.08),
    0 2px 5px rgba(0,0,0,.12);
  outline: 2px solid var(--coco-accent, #B97C56);
  outline-offset: 2px;
  transform: translateY(-1px);
}
.option-btn a:active{
  transform: translateY(0);
  box-shadow:
    inset 0 1px 0 rgba(0,0,0,.05),
    0 1px 2px rgba(0,0,0,.12);
}

/* ── リンクなし：<span class="option-btn">変更OK</span> ── */
/* :has(a) で「中に a が無いときだけ」見た目を付与（追加HTML不要） */
.option-btn:not(:has(a)){
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  font-size: .8em;
  font-weight: 700;
  border-radius: 9999px;
  color: var(--coco-primary, #7A5C3A);
  background: linear-gradient(180deg, #fff7e6, #ffe1b2);
  border: 1px solid #d5a95a;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 -1px 0 rgba(0,0,0,.06),
    0 1.5px 3px rgba(0,0,0,.08);
  cursor: default; /* 非リンクなので手の形にしない */
}

/* （任意）スマホでボタンが次の行に回った時、行頭が詰まるのを少し緩和 */
@media (max-width: 480px){
  .spec .option-btn{
    margin-inline-start: .6em;
    margin-block-start: .25em;
  }
}

/* === スマホ限定：左の画像カードだけ余白を詰めて拡大 === */
@media (max-width: 480px){
  /* 左＝ .cards-2 の最初の .card だけに適用（右は無変更） */
  .cards-2 .card:first-child{
    padding: 4px;          /* カード内の余白を最小限に */
  }
  .cards-2 .card:first-child .card-img{
    margin: 0;             /* figure の外側余白をカット */
  }
  .cards-2 .card:first-child .card-img img{
    display: block;
    width: 100%;           /* 横幅いっぱいに表示（縦横比は維持） */
    height: auto;
    object-fit: contain;   /* はみ出しを防いで見た目を整える */
  }
}

/* === スマホ限定：枠内にきっちり収める（はみ出し防止） === */
@media (max-width: 480px){
  /* 1) dl.spec 内のテキストを“どこでも改行OK”に */
  .spec dd{
    overflow-wrap: anywhere;   /* 連続文字でも折り返す */
    word-break: break-word;    /* CJKも安全寄りに折る */
    min-width: 0;              /* 内部要素のはみ出し抑止 */
  }

  /* 2) 入力欄・セレクト・テキストエリアを枠幅にフィット */
  .spec dd input[type="text"],
  .spec dd input[type="tel"],
  .spec dd input[type="email"],
  .spec dd select,
  .spec dd textarea{
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;    /* パディング込みで100% */
  }

  /* 3) 画像やインライン要素の保険（万一の横スクロール抑止） */
  .spec dd img,
  .spec dd code{
    max-width: 100%;
    height: auto;
    display: inline-block;
    overflow-wrap: anywhere;
  }
}

/* =========================================================
   .box-d[data-scope="style-d"]：確認ページの同意＋送信ブロック
   最小構成：SP=縦／PC=横、同意ラベルは押しやすく
   ========================================================= */
.box-d[data-scope="style-d"] .consent {
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 12px 0;
}
.box-d[data-scope="style-d"] .consent label{
  /* ラベル全体がタップ領域（操作しやすく） */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 9999px;
  background: #fff;
  border: 1px solid var(--coco-border);
  transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.box-d[data-scope="style-d"] .consent label:hover{
  border-color: var(--coco-accent);
  box-shadow: 0 0 0 2px rgba(185,124,86,.08);
}
.box-d[data-scope="style-d"] .consent input[type="checkbox"]{
  /* 見やすく少しだけ拡大 */
  transform: scale(1.15);
  margin: 0;
}
.box-d[data-scope="style-d"] .consent a{
  color: var(--coco-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ボタン行：SP=縦／PC=横（※既存.button_orderの見た目は流用） */
.box-d[data-scope="style-d"] .btn-row{
  display: flex;
  flex-direction: column;   /* SPは縦積み */
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
}
@media (min-width: 768px){
  .box-d[data-scope="style-d"] .btn-row{
    flex-direction: row;    /* PCは横並び */
    flex-wrap: nowrap;
  }
}

/* 送信用フォームを横に並べるための最小指定 */
.box-d[data-scope="style-d"] form.inline{
  display: inline-block;
  margin: 0;
}

/* ワンポイント一覧（figure版） */
.box-onepoint[data-scope="onepoint"]{
  --card-min: 120px; /* 列の最小幅：小さくすると列数↑ */
  --gap: 10px;       /* カード間隔 */
  --img-max: 180px;  /* 画像の上限幅 */
}
.box-onepoint[data-scope="onepoint"] .onepoint-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(var(--card-min),1fr));
  gap:var(--gap);
  margin:8px 0 16px; padding:0;
}
.box-onepoint[data-scope="onepoint"] .onepoint{
  margin:0; border:1px solid var(--coco-border,#E3E2DE);
  border-radius:8px; background:#fff; padding:8px; text-align:center;
}
.box-onepoint[data-scope="onepoint"] .onepoint figcaption{
  margin:0 0 6px; font-size:14px; line-height:1.3; color:#333;
}
.box-onepoint[data-scope="onepoint"] .onepoint img{
  display:block; width:100%; height:auto; max-width:var(--img-max); margin:0 auto;
}
/* 横長(175/265)は2カラム占有 */
.box-onepoint[data-scope="onepoint"] .onepoint:has(img[width="175"]),
.box-onepoint[data-scope="onepoint"] .onepoint:has(img[width="265"]){ grid-column:span 2; }
/* SP調整 */
/* 列数を増やしたい時は --card-min を 110px/100px… に、画像を小さくしたい時は --img-max を 150px/120px… に下げればOK。 */
@media (max-width:480px){
  .box-onepoint[data-scope="onepoint"]{ --card-min:100px; --gap:8px; }
  .box-onepoint[data-scope="onepoint"] .onepoint figcaption{ font-size:13px; }
}

/* ===== 確認ページ専用スコープ（style-d）===== */
/* .box_button：このスコープ内だけフレックス化（他ページは無影響） */
[data-scope="style-d"] .box_button {
  margin-top: 12px;              /* 既存の見た目を踏襲 */
  display: flex;                 /* 縦積みレイアウト */
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* ボタン行（スマホ=縦 → PC=横） */
[data-scope="style-d"] .btn_row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
}
@media (min-width: 768px) {
  [data-scope="style-d"] .btn_row { flex-direction: row; flex-wrap: nowrap; }
}

/* 同意ブロック（インラインstyleを移設） */
[data-scope="style-d"] .notice.-center { text-align: center; font-size: 1.1rem; line-height: 1.6; }
[data-scope="style-d"] .agree-label { cursor: pointer; display: inline-block; }
[data-scope="style-d"] .agree-checkbox { transform: scale(1.15); vertical-align: middle; margin-right: 6px; }
[data-scope="style-d"] .inline-form { display: inline; }
[data-scope="style-d"] .agree-note { font-size: 0.9em; }
[data-scope="style-d"] .notice.error { margin: 0; }