/* ============================================================
  【WordPress「追加CSS」貼り付け用】v5最新版
  ▼ 使い方
  WordPress管理画面 ▶「外観」▶「カスタマイズ」▶「追加CSS」
  にこのファイルの内容をすべてコピーして貼り付けてください。

  ※ テーマのh2/h3スタイルと競合する場合は
    制作会社にご相談のうえ調整してください。
============================================================ */

/* ===== リード文 ===== */
.lead {
  font-size: 0.97rem;
  line-height: 1.95;
  color: #444;
  margin-bottom: 48px;
}

/* ===== 目次 ===== */
.toc {
  background: #f7f5f2;
  border-left: 3px solid #b5a48c;
  padding: 20px 24px;
  margin-bottom: 52px;
}
.toc-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #9a8c7e;
  margin-bottom: 12px;
}
.toc ol { padding-left: 1.4em; }
.toc li { font-size: 0.88rem; margin-bottom: 6px; line-height: 1.6; }
.toc a { color: #6b7db3; text-decoration: none; }
.toc a:hover { text-decoration: underline; }

/* ===== 注意ボックス ===== */
.caution-box {
  background: #fff9f5;
  border-left: 3px solid #d4895a;
  padding: 14px 18px;
  margin: 20px 0 28px;
  font-size: 0.9rem;
  color: #555;
  line-height: 1.8;
}

/* ===== 比較テーブル ===== */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 20px 0 40px;
}
.comparison-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 0.85rem;
  background: #fff;
}
.comparison-table thead tr {
  background: #3d3530;
  color: #fff;
}
.comparison-table th,
.comparison-table td {
  padding: 12px 14px;
  border: 1px solid #e8e4de;
  text-align: left;
  vertical-align: top;
  line-height: 1.7;
}
.comparison-table thead th {
  border-color: #5a4f48;
}
.comparison-table tbody tr:nth-child(even) td { background: #f7f5f2; }
.col-pana { color: #1a4fa0; font-weight: 700; }
.col-miele { color: #9e1a1a; font-weight: 700; }
.col-bosch { color: #5a3e00; font-weight: 700; } /* 見やすいブラウン系 */

/* ===== メーカーカード ===== */
.maker-cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 20px 0 40px;
}
.maker-card {
  background: #fff;
  border: 1px solid #e8e4de;
}
.maker-card-header {
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #e8e4de;
}
.maker-card-header.pana { background: #eef3fb; border-left: 4px solid #1a4fa0; }
.maker-card-header.miele { background: #fdf0f0; border-left: 4px solid #9e1a1a; }
.maker-card-header.bosch { background: #f7f3ec; border-left: 4px solid #8a6a20; }
.maker-name { font-size: 1rem; font-weight: 700; }
.maker-name.pana { color: #1a4fa0; }
.maker-name.miele { color: #9e1a1a; }
.maker-name.bosch { color: #5a3e00; }
.maker-tag {
  font-size: 0.7rem;
  background: rgba(0,0,0,0.06);
  border-radius: 20px;
  padding: 3px 10px;
  color: #666;
}
.maker-card-body {
  padding: 18px 20px 20px;
  font-size: 0.9rem;
  line-height: 1.85;
}
.maker-card-body p { margin-bottom: 1em !important; }
.maker-card-body p:last-child { margin-bottom: 0 !important; }
.maker-fit {
  margin-top: 14px;
  padding: 10px 14px;
  background: #f7f5f2;
  font-size: 0.84rem;
  color: #666;
  line-height: 1.7;
}
.maker-fit strong { color: #333; }

/* ===== ポイントボックス ===== */
.point-box {
  background: #f7f5f2;
  border-left: 3px solid #b5a48c;
  padding: 18px 20px;
  margin: 20px 0 28px;
}
.point-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #9a8c7e;
  margin-bottom: 8px;
}
.point-box p { margin: 0 !important; font-size: 0.9rem; line-height: 1.8; }

/* ===== 選び方ポイントリスト ===== */
.point-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 20px 0 40px;
}
.point-item {
  background: #fff;
  border: 1px solid #e8e4de;
  border-left: 3px solid #b5a48c;
  padding: 16px 20px;
}
.point-item-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}
.point-num {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #b5a48c;
  flex-shrink: 0;
}
.point-item-body h3 {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
  color: #1a1a1a !important;
}
.point-item-body p {
  font-size: 0.88rem;
  color: #555;
  margin: 6px 0 0 !important;
  line-height: 1.8;
}

/* ===== ショールームリスト ===== */
.showroom-list {
  border: 1px solid #e8e4de;
  margin: 20px 0 36px;
}
.showroom-item {
  display: grid;
  grid-template-columns: 110px 1fr;
  border-bottom: 1px solid #e8e4de;
}
.showroom-item:last-child { border-bottom: none; }
.showroom-maker {
  padding: 14px 16px;
  font-weight: 700;
  font-size: 0.85rem;
  background: #f7f5f2;
  display: flex;
  align-items: flex-start;
  line-height: 1.5;
}
.showroom-maker.pana { color: #1a4fa0; }
.showroom-maker.miele { color: #9e1a1a; }
.showroom-maker.bosch { color: #5a3e00; }
.showroom-detail {
  padding: 14px 16px;
  font-size: 0.87rem;
  color: #555;
  line-height: 1.75;
}

/* ===== まとめ一覧 ===== */
.summary-list {
  border: 1px solid #e8e4de;
  margin: 20px 0 28px;
}
.summary-item {
  display: grid;
  grid-template-columns: 110px 1fr;
  border-bottom: 1px solid #e8e4de;
}
.summary-item:last-child { border-bottom: none; }
.summary-maker {
  padding: 14px 16px;
  font-weight: 700;
  font-size: 0.85rem;
  background: #f7f5f2;
  display: flex;
  align-items: center;
}
.summary-maker.pana { color: #1a4fa0; }
.summary-maker.miele { color: #9e1a1a; }
.summary-maker.bosch { color: #5a3e00; }
.summary-detail {
  padding: 14px 16px;
  font-size: 0.87rem;
  color: #444;
  line-height: 1.75;
}

/* ===== 現場ボイス ===== */
.voice-box {
  background: #3d3530;
  color: #fff;
  padding: 22px 24px;
  margin: 28px 0;
}
.voice-title {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: #c8b89a;
  margin-bottom: 10px;
  font-weight: 700;
}
.voice-box p { margin: 0 !important; font-size: 0.92rem; color: #ede8e0 !important; line-height: 1.9; }

/* ===== CTAブロック ===== */
.cta-block {
  border: 1px solid #e8e4de;
  background: #f7f5f2;
  padding: 36px 28px;
  text-align: center;
  margin-top: 60px;
}
.cta-lead {
  font-size: 0.92rem;
  color: #555;
  margin-bottom: 24px !important;
  line-height: 1.8;
}
.cta-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.cta-btn {
  display: inline-block;
  font-weight: 700;
  font-size: 0.88rem;
  padding: 13px 32px;
  border-radius: 2px;
  text-decoration: none !important;
  letter-spacing: 0.06em;
  transition: opacity 0.2s;
}
.cta-btn:hover { opacity: 0.8; }
.cta-btn-primary { background: #3d3530; color: #fff !important; }
.cta-btn-secondary {
  background: #fff;
  color: #3d3530 !important;
  border: 1px solid #3d3530;
}

/* ===== 注記 ===== */
.article-note {
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid #e8e4de;
  font-size: 0.76rem;
  color: #b0a898 !important;
  line-height: 1.9;
}

/* ===== スマホ対応 ===== */
@media (max-width: 520px) {
  .comparison-table th,
  .comparison-table td { padding: 9px 10px; font-size: 0.78rem; }
  .showroom-item,
  .summary-item { grid-template-columns: 80px 1fr; }
  .cta-block { padding: 28px 16px; }
  .cta-buttons { flex-direction: column; align-items: center; }
  .cta-btn { width: 100%; max-width: 280px; text-align: center; }
}