/* ページの型 v1 — 共通部品（2026-11-03、着物 rt8d を元に作成。正：着物 /buysell-fukuchan-hikaku/ 本番 01218767）
   - サイトに依存する値は下の :root の変数だけ。サイトごとの CSS で :root { --tpl-accent: … } を上書きする（このファイルの後に読み込む）。
   - セレクタは「.tpl-x.tpl-x」のようにクラスを2回重ねている。テーマの「.entry-content p」などより強くするため（詳細度 0,2,0）。
   - 使い方は README.md。 */

:root{
  --tpl-accent:#444;          /* 見出し語・項目名・＋－・番号の色（サイトの色） */
  --tpl-card-bg:#f6f6f6;      /* 結論カードの背景 */
  --tpl-marker:#fff176;       /* マーカー（黄色の下線） */
  --tpl-border:#e6e6e6;       /* 枠線 */
  --tpl-line:#eee;            /* 表の区切り線 */
  --tpl-head-bg:#f3f3f3;      /* 表の見出しの背景 */
  --tpl-map-bg:#fafafa;       /* 「この記事で分かること」の背景 */
  --tpl-text:#222;
  --tpl-muted:#666;
  --tpl-radius:4px;
  --tpl-btn-bg:var(--tpl-accent);   /* .tpl-btn（広告ではないボタン）の色 */
}

/* 1. 結論カード */
.tpl-card.tpl-card{
  background:var(--tpl-card-bg);
  border-left:6px solid var(--tpl-accent);
  border-radius:var(--tpl-radius);
  padding:14px 14px 10px;
  margin:12px 0 14px;
}
.tpl-card__answer.tpl-card__answer{
  font-size:1.18em;
  font-weight:700;
  line-height:1.6;
  margin:0 0 10px;
  color:var(--tpl-text);
}
.tpl-card__answer.tpl-card__answer strong{ background:linear-gradient(transparent 62%, var(--tpl-marker) 62%); }
.tpl-card__reasons.tpl-card__reasons{
  list-style:none;
  margin:0;
  padding:0;
}
.tpl-card__reasons.tpl-card__reasons li{
  position:relative;
  padding:0 0 6px 1.6em;
  margin:0;
  font-size:.95em;
  line-height:1.55;
}
.tpl-card__reasons.tpl-card__reasons li::before{
  content:attr(data-n);
  position:absolute;
  left:0;
  top:.1em;
  width:1.3em;
  height:1.3em;
  line-height:1.3em;
  text-align:center;
  font-size:.8em;
  font-weight:700;
  color:#fff;
  background:var(--tpl-accent);
  border-radius:50%;
}

/* 2. 比べる情報の直下のボタン（.tpl-actions の中に、サイトの広告ボタンをそのまま置く） */
.tpl-actions.tpl-actions{ margin:0 0 18px; }
.tpl-btn-wrap.tpl-btn-wrap{ margin:0 0 12px; text-align:center; }
.tpl-btn-sub.tpl-btn-sub{ display:block; font-size:13px; font-weight:700; color:var(--tpl-muted); margin:0 0 2px; line-height:1.4; }
a.tpl-btn.tpl-btn{
  display:block;
  box-sizing:border-box;
  width:100%;
  padding:16px 12px;
  border-radius:6px;
  background:var(--tpl-btn-bg);
  color:#fff !important;
  font-size:16px;
  font-weight:700;
  text-align:center;
  text-decoration:none !important;
  box-shadow:0 3px 8px rgba(0,0,0,.15);
}
a.tpl-btn.tpl-btn::before{ content:none !important; display:none !important; }

/* 3. 比べる情報＝短い表1つ（左に項目名の細い列、右に2つを横並び） */
.tpl-cmp.tpl-cmp{
  border:1px solid var(--tpl-border);
  border-radius:var(--tpl-radius);
  padding:10px 12px 8px;
  margin:0 0 14px;
  scroll-margin-top:70px;
}
.tpl-cmp__title.tpl-cmp__title{ font-weight:700; font-size:1.05em; margin:0 0 6px; }
.tpl-cmp__grid.tpl-cmp__grid{
  display:grid;
  grid-template-columns:6.2em minmax(0,1fr) minmax(0,1fr);
  font-size:.92em;
  line-height:1.45;
}
.tpl-cmp__grid.tpl-cmp__grid > span{
  padding:7px 4px;
  border-top:1px solid var(--tpl-line);
  text-align:center;
  overflow-wrap:anywhere;
}
.tpl-cmp__grid.tpl-cmp__grid > .tpl-cmp__h{ border-top:none; font-weight:700; background:var(--tpl-head-bg); }
.tpl-cmp__grid.tpl-cmp__grid > .tpl-cmp__h:first-child{ background:none; }
.tpl-cmp__grid.tpl-cmp__grid > .tpl-cmp__l{ text-align:left; font-weight:700; color:var(--tpl-accent); font-size:.92em; }
.tpl-cmp__note.tpl-cmp__note{ font-size:12px; color:var(--tpl-muted); margin:6px 0 0; line-height:1.5; }

/* 6. この記事で分かること */
.tpl-map.tpl-map{
  border:1px solid var(--tpl-line);
  border-radius:var(--tpl-radius);
  padding:10px 14px;
  margin:0 0 18px;
  background:var(--tpl-map-bg);
}
.tpl-map__title.tpl-map__title{ font-weight:700; margin:0 0 4px; font-size:.95em; }
.tpl-map.tpl-map ul{ border:none !important; background:none !important; padding:0 0 0 1.2em !important; margin:0 !important; }
.tpl-map.tpl-map li{ margin:2px 0; font-size:.95em; line-height:1.5; padding:0 !important; }

/* 4・5. 細かい情報＝畳む（h2 の下に要点1行＋「詳しく読む」）。マーカー */
.tpl-point.tpl-point{ margin:0 0 6px; font-weight:700; line-height:1.6; font-size:.95em; }
.tpl-marker.tpl-marker{ background:linear-gradient(transparent 62%, var(--tpl-marker) 62%); }
.tpl-lead.tpl-lead{ font-weight:700; margin-right:.3em; }
details.tpl-sec.tpl-sec{
  border:1px solid var(--tpl-border);
  border-radius:var(--tpl-radius);
  margin:0 0 8px;
  background:#fff;
}
details.tpl-sec.tpl-sec > summary{
  cursor:pointer;
  padding:8px 12px;
  font-size:.92em;
  font-weight:700;
  color:var(--tpl-accent);
  list-style:none;
}
details.tpl-sec.tpl-sec > summary::-webkit-details-marker{ display:none; }
details.tpl-sec.tpl-sec > summary::after{ content:"＋"; float:right; }
details.tpl-sec.tpl-sec[open] > summary::after{ content:"－"; }
details.tpl-sec.tpl-sec > .tpl-sec__body{ padding:0 12px 4px; }
details.tpl-sec.tpl-sec > .tpl-sec__body > *:first-child{ margin-top:0; }

/* よくある質問：質問だけ並べ、押すと答え */
details.tpl-faq.tpl-faq{
  border-bottom:1px solid var(--tpl-line);
  margin:0;
}
details.tpl-faq.tpl-faq > summary{ cursor:pointer; list-style:none; }
details.tpl-faq.tpl-faq > summary::-webkit-details-marker{ display:none; }
details.tpl-faq.tpl-faq > summary h3{
  margin:10px 0 !important;
  padding-right:1.6em;
  font-size:1em;
  position:relative;
}
details.tpl-faq.tpl-faq > summary h3::after{
  content:"＋";
  position:absolute;
  right:0;
  top:8px;
  color:var(--tpl-accent);
}
details.tpl-faq.tpl-faq[open] > summary h3::after{ content:"－"; }
details.tpl-faq.tpl-faq > p{ margin:0 0 12px; }