/* =========================
     基本カラー変数（必要最小限）
     ========================= */
  :root{
    --ink:#111827;   /* 本文の濃い文字色 */
    --muted:#6b7280; /* 注釈用グレー */
    --line:#e5e7eb;  /* 枠線の薄いグレー */
  }

  /* =========================
     下部説明エリア（FAX/タイプ/価格/納期/注意）
     すっきり＋分かりやすい帯見出し
     ========================= */
  .section-easy{
    background:#fff;
    border:1px solid var(--line);
    border-radius:12px;
    box-shadow:0 1px 3px rgba(0,0,0,.05);
    padding:16px;
    margin:22px 0;
  }

  /* 見出し：淡い帯。既存h2装飾は無効化 */
  .section-easy h2{
    margin:0 0 12px;
    padding:8px 12px;
    font:700 18px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans JP",sans-serif;
    color:var(--ink) !important;
    background:#f3f4f6 !important; /* ほんのり帯 */
    border:none !important;
    border-bottom:none !important;
    border-radius:6px;
  }

  /* 既存の section p に付く左線・背景を打ち消し */
  .section-easy p{
    margin:8px 0;
    padding:0 !important;
    background:transparent !important;
    border:none !important;
  }

  /* 表：行ごとに読みやすく */
  .table-easy{
    width:100%;
    border-collapse:separate; border-spacing:0;
    margin:8px 0 0;
  }
  .table-easy th,.table-easy td{
    border:1px solid var(--line);
    padding:9px 10px;
    vertical-align:top;
  }
  .table-easy th{
    background:#f8fafc;
    font-weight:700;
    text-align:left;
    white-space:nowrap;
  }

  /* 箇条書き（視線移動を速く） */
  .section-easy ul{ margin:6px 0 0 1.2em; padding:0; }
  .section-easy li{ margin:4px 0; }

  /* 注意ボックス：淡色の囲み */
  .box-note{
    background:#f9fafb;
    border:1px solid var(--line);
    border-radius:8px;
    padding:10px 12px;
    margin:10px 0;
  }

  /* 小さめ注釈 */
  .note-sm{ color:var(--muted); font-size:.9rem }

  /* 見出し直下の詰まり防止 */
  .section-easy h2 + *{ margin-top:6px; }

  /* 強調：金額など */
  .details strong{
    color: var(--ink) !important;
    font-weight: 700 !important;
  }

  /* 組成などの重要語 */
  .point{
    color: var(--ink) !important;
    font-weight: 700 !important;
  }

  /* サイズや単位の黄色ハイライト */
  .highlight{
    background: #fff7cc !important;      /* うっすら黄色 */
    padding: 1px 6px !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    box-decoration-break: clone;          /* 複数行でも切れ目なく背景 */
    -webkit-box-decoration-break: clone;
  }

  /* 注記（.details内の .hint と、.details.hint の両方に対応） */
  .details .hint,
  .details.hint{
    color: var(--muted) !important;
    font-size: .9rem !important;
  }

  /* =========================
     色見本カードのリスト（.snet）
     4→3→1列のレスポンシブ
     ========================= */
  .snet{
    list-style:none;
    margin:8px 0 24px;
    padding:0;
    display:grid;
    gap:12px;
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .snet li a{
    display:block;
    border:1px solid var(--line);
    border-radius:12px;
    padding:10px;
    text-align:center;
    color:inherit;
    text-decoration:none;
    background:#fff;
    box-shadow:0 1px 3px rgba(0,0,0,.06);
    transition:.2s;
  }
  .snet li a:hover{
    background:#f9fafb;
    box-shadow:0 2px 6px rgba(0,0,0,.12);
    transform:translateY(-2px);
  }
  .snet img{
    display:block;
    margin:0 auto 8px;
    border-radius:8px;
  }

/* --- 画像下のテキストを2行化（色名→色番） --- */
/* 既存の .snet li a::after のブロックは削除 or コメントアウトしてから、これを貼ってください */

/* 画像の下に色名と色番を2行で表示 */



  /* =========================
     レスポンシブ
     ========================= */
  @media (max-width:1024px){
    .snet{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  }

/* 置き換え：@media (max-width:640px) 内の .snet を2列に */
@media (max-width:640px){
  .section-easy{ padding:12px }
  .table-easy th,.table-easy td{ padding:8px }

  .snet{
    grid-template-columns: 1fr 1fr; /* ← ここを 1fr から 1fr 1fr に */
    gap:8px;
  }
}


/* ==== 商品スペック（1枠＋内部余白） ==== */
ul.details{
  list-style:none !important;
  margin:14px 0 20px 0 !important;
  padding:20px 24px !important;
  border:1px solid #514e46;
  border-radius:10px;
  background:#fefdfd;              /* 少し濃いクリーム色でカード感 */
}
ul.details li{
  margin:8px 0;
  line-height:1.6;
}



/* 強調 */
.details strong{
  color:#b45309 !important;     
  font-weight:700 !important;
}
.point{
  color:#92400e !important;
  font-weight:700 !important;
}
.highlight{
  background:#fbbf24 !important; 
  padding:2px 6px !important;    /* 内部の黄背景も少しゆったり */
  border-radius:4px !important;
  font-weight:600 !important;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}
.details .hint,
.details.hint{
  color:#92400e !important;
  font-size:.9rem !important;
  opacity:0.85;
}

#b > h2, #ms > h2, #m > h2, #g > h2, #n > h2 {
  background:#333;        /* 濃いグレー背景 */
  color:#fff;             /* 白文字 */
  padding:8px 12px;
  border-radius:6px;
  font-weight:700;
  font-size:15px;         /* 小さめに調整 */
  line-height:1.3;
  white-space: nowrap;    /* ← 折り返し禁止 */
  overflow: hidden;       /* はみ出した分を隠す */
  text-overflow: ellipsis;/* 長すぎる場合は「…」で省略 */
}


.snet img {
  display: block;
  max-width: 100%;
  height: auto !important;
  object-fit: cover; /* 過度な縦長・横長を防止 */
}

.snet li a::after{
  content: attr(data-name) " " attr(data-code);
  display:block;
  font-size:.95rem;
  line-height:1.4;
  margin-top:4px;
  font-weight:600;
  color:#1d4ed8;       /* リンクっぽい青色 */
  text-decoration: underline; /* ← 下線を追加 */
}

.box-note{
  background:#fff8eb;      /* 淡いクリーム色 */
  border-left:4px solid #f59e0b; /* オレンジの左線 */
  padding:10px 12px;
  margin:12px 0;
  font-weight:500;
}

body {
  font-family: system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #333;
}

h2 {
  background:#333;
  color:#fff;
  padding:8px 12px;
  border-radius:6px;
  font-size:15px;
  font-weight:700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

h1 {
  font-size: 22px;     /* ← 大きさを調整（例: 22px） */
  font-weight: 700;    /* 見出し感は残す */
  line-height: 1.3;    /* 行間をやや詰める */
  margin: 16px 0;      /* 上下の余白を控えめに */
}

/* ===== FAQのインデント最適化 ===== */
#faq dl{ margin:0; }
#faq dt{
  margin:10px 0 4px;
  font-weight:700;
}
#faq dd{
  margin:0 0 12px;    /* 左インデントを消す */
}

/* FAQ内のリンク見やすく（折り返し＆下線） */
#faq a{
  color:#1d4ed8;
  text-decoration:underline;
  text-underline-offset:2px;
  word-break:break-word;     /* 長い語を折る */
  overflow-wrap:anywhere;    /* どこでも折ってOK */
}

/* スマホ最適化：さらに詰める */
@media (max-width:640px){
  #faq dt{ margin:8px 0 4px; }
  #faq dd{ margin:0 0 10px; }
}