/* ============================================
   スター不動産 ブログ装飾パーツ(注目記事 news 専用)
   ・フロント: header.php で is_singular('news') のときのみ読み込み
   ・エディタ: functions.php(block_editor_settings_all)で news 編集画面のみ反映
   ・使い方: パターン一覧「ブログ装飾パーツ」から挿入、
     または「高度な設定 > 追加CSSクラス」にクラス名を入力
   ・マーカー(st-marker-*)はインライン用のため、
     コードエディタ/カスタムHTMLで <span class="st-marker-green">…</span> のように使用
   ============================================ */

/* ---------- マーカー ---------- */
.st-marker-green { background: linear-gradient(transparent 60%, #b9e6c3 60%); font-weight: 700; }
.st-marker-orange { background: linear-gradient(transparent 60%, #ffd9a0 60%); font-weight: 700; }
.st-marker-dot { border-bottom: 3px dotted #f39b1d; font-weight: 700; }

/* ---------- ボックス ---------- */
.st-box-point, .st-box-warning {
  position: relative; border-radius: 12px;
  padding: 26px 22px 18px; margin: 2em 0; line-height: 1.9;
}
.st-box-point { border: 2px solid #2f8f4e; background: #f2f9f3; }
.st-box-warning { border: 2px solid #d64949; background: #fdf3f3; }
.st-box-point::before, .st-box-warning::before {
  position: absolute; top: -14px; left: 16px;
  color: #fff; font-weight: 700; font-size: 13px;
  padding: 4px 14px; border-radius: 999px;
}
.st-box-point::before { content: "★ ポイント"; background: #2f8f4e; }
.st-box-warning::before { content: "！ 注意"; background: #d64949; }
.st-box-memo {
  border: 2px dashed #f39b1d; border-radius: 12px;
  padding: 18px 22px; margin: 2em 0; background: #fff9ef; line-height: 1.9;
}
.st-box-memo::before { content: "メモ"; font-weight: 900; color: #f39b1d; margin-right: 12px; }

/* ---------- 表 ---------- */
.st-table table, table.st-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: 14px; border: 1px solid #d5e5d8; border-radius: 12px; overflow: hidden;
}
.st-table th { background: #2f8f4e; color: #fff; padding: 12px 16px; font-weight: 700; }
.st-table th:last-child { background: #f39b1d; }
.st-table td { padding: 12px 16px; border-bottom: 1px solid #e2eee4; text-align: center; }
.st-table td:first-child { background: #f2f9f3; font-weight: 700; text-align: left; }
.st-table td:last-child { background: #fff9ef; }
.st-table tr:last-child td { border-bottom: none; }

/* ---------- 吹き出し ---------- */
.st-balloon-left, .st-balloon-right { display: flex; gap: 14px; align-items: flex-start; margin: 1.5em 0; }
.st-balloon-right { flex-direction: row-reverse; }
.st-balloon-left .st-balloon-icon, .st-balloon-right .st-balloon-icon {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 13px; overflow: hidden;
}
.st-balloon-left .st-balloon-icon { background: #e9f3ea; border: 2px solid #2f8f4e; color: #2f8f4e; }
.st-balloon-right .st-balloon-icon { background: #fff4e0; border: 2px solid #f39b1d; color: #e08a10; }
.st-balloon-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.st-balloon-left .st-balloon-text, .st-balloon-right .st-balloon-text {
  position: relative; border-radius: 14px; padding: 14px 18px; font-size: 15px; line-height: 1.8;
}
.st-balloon-left .st-balloon-text { background: #f2f9f3; border: 2px solid #cfe6d4; }
.st-balloon-right .st-balloon-text { background: #fff9ef; border: 2px solid #f5d9a8; }
.st-balloon-left .st-balloon-text::before {
  content: ""; position: absolute; left: -10px; top: 18px; width: 16px; height: 16px;
  background: #f2f9f3; border-left: 2px solid #cfe6d4; border-bottom: 2px solid #cfe6d4;
  transform: rotate(45deg);
}
.st-balloon-right .st-balloon-text::before {
  content: ""; position: absolute; right: -10px; top: 18px; width: 16px; height: 16px;
  background: #fff9ef; border-right: 2px solid #f5d9a8; border-top: 2px solid #f5d9a8;
  transform: rotate(45deg);
}

/* ---------- Q&A ---------- */
.st-faq { border: 1px solid #d5e5d8; border-radius: 12px; overflow: hidden; margin: 2em 0; }
.st-faq-q, .st-faq-a { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; margin: 0; }
.st-faq-q { background: #f2f9f3; font-weight: 700; }
.st-faq-q::before, .st-faq-a::before {
  width: 34px; height: 34px; border-radius: 50%; color: #fff; font-weight: 900;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.st-faq-q::before { content: "Q"; background: #2f8f4e; }
.st-faq-a::before { content: "A"; background: #f39b1d; }

/* ---------- ボタン ---------- */
.st-btn, .st-btn-orange, .st-btn-outline {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 15px; border-radius: 999px;
  text-decoration: none; transition: all .15s ease;
}
.st-btn { background: #2f8f4e; color: #fff !important; padding: 14px 30px; box-shadow: 0 4px 0 #1f6b38; }
.st-btn:hover { transform: translateY(2px); box-shadow: 0 2px 0 #1f6b38; }
.st-btn-orange { background: #f39b1d; color: #fff !important; padding: 14px 30px; box-shadow: 0 4px 0 #c77c0d; }
.st-btn-orange:hover { transform: translateY(2px); box-shadow: 0 2px 0 #c77c0d; }
.st-btn-outline { background: #fff; color: #2f8f4e !important; border: 2px solid #2f8f4e; padding: 12px 28px; }
.st-btn-outline:hover { background: #f2f9f3; }
.st-btn::after, .st-btn-orange::after { content: "→"; }
/* .post-content a { text-decoration: underline } より優先させて下線を消す */
.post-content .st-btn, .post-content .st-btn-orange, .post-content .st-btn-outline,
.post-content a.st-blogcard { text-decoration: none; }

/* ---------- リスト ---------- */
ul.st-list-check { list-style: none; padding: 20px 22px; margin: 2em 0; background: #f7fbf8; border-radius: 12px; }
ul.st-list-check li { position: relative; padding-left: 28px; margin: 10px 0; line-height: 1.7; }
ul.st-list-check li::before { content: "✓"; position: absolute; left: 0; color: #2f8f4e; font-weight: 900; }
ol.st-list-num { list-style: none; counter-reset: stnum; padding: 20px 22px; margin: 2em 0; background: #f7fbf8; border-radius: 12px; }
ol.st-list-num li { position: relative; padding-left: 38px; margin: 10px 0; line-height: 1.7; counter-increment: stnum; }
ol.st-list-num li::before {
  content: counter(stnum); position: absolute; left: 0; top: 1px;
  width: 24px; height: 24px; border-radius: 50%; background: #f39b1d; color: #fff;
  font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}

/* リスト(記号バリエーション) */
ul.st-list, ul.st-list-green, ul.st-list-ng, ul.st-list-caution,
ul.st-list-mix, ul.st-list-star, ul.st-list-arrow {
  list-style: none; padding: 20px 22px; margin: 2em 0;
  background: #f7fbf8; border-radius: 12px;
}
ul.st-list-ng { background: #fdf3f3; }
ul.st-list-caution { background: #fff9ef; }
ul.st-list li, ul.st-list-green li, ul.st-list-ng li, ul.st-list-caution li,
ul.st-list-mix li, ul.st-list-star li, ul.st-list-arrow li {
  position: relative; padding-left: 28px; margin: 10px 0; line-height: 1.7;
}
ul.st-list li::before {
  content: ""; position: absolute; left: 8px; top: .65em;
  width: 6px; height: 6px; border-radius: 50%; background: #333;
}
ul.st-list-green li::before {
  content: ""; position: absolute; left: 6px; top: .6em;
  width: 9px; height: 9px; border-radius: 50%; background: #2f8f4e;
}
ul.st-list-ng li::before { content: "✗"; position: absolute; left: 0; color: #d64949; font-weight: 900; }
ul.st-list-caution li::before { content: "△"; position: absolute; left: 0; color: #f39b1d; font-weight: 900; }
ul.st-list-star li::before { content: "★"; position: absolute; left: 0; color: #f39b1d; }
ul.st-list-arrow li::before { content: "→"; position: absolute; left: 0; color: #2f8f4e; font-weight: 700; }
ul.st-list-mix li.ok::before { content: "○"; position: absolute; left: 0; color: #2f8f4e; font-weight: 900; }
ul.st-list-mix li.ng::before { content: "✗"; position: absolute; left: 0; color: #d64949; font-weight: 900; }
ul.st-list-mix li.caution::before { content: "△"; position: absolute; left: 0; color: #f39b1d; font-weight: 900; }

/* ---------- ステップ ---------- */
.st-steps { list-style: none; counter-reset: ststep; padding: 0; margin: 2em 0; }
.st-steps li { position: relative; counter-increment: ststep; padding: 0 0 28px 62px; }
.st-steps li::before {
  content: counter(ststep); position: absolute; left: 0; top: 0;
  width: 44px; height: 44px; border-radius: 50%; background: #2f8f4e; color: #fff;
  font-weight: 900; display: flex; align-items: center; justify-content: center;
}
.st-steps li::after {
  content: ""; position: absolute; left: 21px; top: 50px; bottom: 6px; width: 3px; background: #cfe6d4;
}
.st-steps li:last-child { padding-bottom: 0; }
.st-steps li:last-child::before { background: #f39b1d; }
.st-steps li:last-child::after { display: none; }
.st-steps .st-step-title { font-weight: 700; font-size: 16px; color: #1f6b38; padding-top: 10px; display: block; }
.st-steps p { margin: 6px 0 0; font-size: 14px; line-height: 1.8; color: #555; }

/* ---------- 引用 ---------- */
blockquote.st-quote {
  position: relative; margin: 2em 0; background: #f7fbf8; border-radius: 12px;
  padding: 24px 28px 18px 56px; font-size: 15px; line-height: 1.9; color: #444;
}
blockquote.st-quote::before {
  content: "\201C"; position: absolute; left: 18px; top: 8px;
  font-size: 52px; color: #2f8f4e; font-family: Georgia, serif; line-height: 1;
}
blockquote.st-quote cite { display: block; margin-top: 10px; font-size: 12px; color: #8a988d; font-style: normal; }

/* ---------- 会社紹介(記事冒頭用) ---------- */
.st-intro {
  position: relative; margin: 2.5em 0 2em;
  border: 2px solid #2f8f4e; border-radius: 14px;
  background: linear-gradient(135deg, #f2f9f3 0%, #fdfdf9 100%);
  padding: 30px 26px 24px;
  display: flex; gap: 20px; align-items: flex-start;
}
.st-intro::before {
  content: "★ この記事を書いた会社";
  position: absolute; top: -14px; left: 16px;
  background: #2f8f4e; color: #fff; font-weight: 700; font-size: 13px;
  padding: 4px 14px; border-radius: 999px; line-height: 1.5;
}
.st-intro-logo {
  width: 72px; height: 72px; border-radius: 50%; flex-shrink: 0;
  background: #fff; border: 2px solid #cfe6d4;
  padding: 8px; box-sizing: border-box; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.st-intro-logo img { width: 100%; height: 100%; object-fit: contain; }
.st-intro-body { display: flex; flex-direction: column; gap: 8px; }
.st-intro-name {
  margin: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-weight: 900; font-size: 18px; color: #1f6b38; line-height: 1.4;
}
.st-intro-tag { font-size: 12px; font-weight: 400; color: #8a988d; }
.st-intro-desc { margin: 0; font-size: 14px; line-height: 1.9; color: #444; }
.st-intro-btns { margin: 4px 0 0; display: flex; gap: 12px; flex-wrap: wrap; }
.st-intro .st-btn,
.st-intro .st-btn-orange { padding: 9px 20px; font-size: 13px; }
.st-intro .st-btn { box-shadow: 0 3px 0 #1f6b38; }
.st-intro .st-btn:hover { box-shadow: 0 1px 0 #1f6b38; }
.st-intro .st-btn-orange { box-shadow: 0 3px 0 #c77c0d; }
.st-intro .st-btn-orange:hover { box-shadow: 0 1px 0 #c77c0d; }
.st-intro .st-btn-outline { padding: 7px 18px; font-size: 13px; }
@media (max-width: 480px) {
  .st-intro { flex-direction: column; align-items: center; padding: 30px 20px 22px; }
  .st-intro-name { justify-content: center; }
}

/* ---------- ブログカード ---------- */
a.st-blogcard {
  display: flex; border: 1px solid #d5e5d8; border-radius: 12px; overflow: hidden;
  text-decoration: none; color: inherit; margin: 2em 0; transition: border-color .15s;
}
a.st-blogcard:hover { border-color: #2f8f4e; }
.st-blogcard-thumb { width: 140px; flex-shrink: 0; object-fit: cover; }
.st-blogcard-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 6px; }
.st-blogcard-label { font-size: 11px; font-weight: 700; color: #f39b1d; letter-spacing: .05em; }
.st-blogcard-title { font-weight: 700; font-size: 15px; line-height: 1.6; }
.st-blogcard-url { font-size: 12px; color: #8a988d; }