/* エコラビLP2 コラム専用スタイル。共通トークンとLP本体の部品を継承する。 */
.column-main {
  background: var(--c-bg);
}

.column-hero {
  padding-block: calc(var(--u) * 8);
  background: #fff7df;
  border-bottom: 1px solid var(--c-line);
}

.column-hero-inner {
  width: min(calc(100% - var(--u) * 6), var(--container));
  margin-inline: auto;
  text-align: center;
}

.column-label,
.article-category {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 14px;
  color: var(--c-brand-deep);
  background: var(--c-surface);
  border: 1px solid var(--c-brand);
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
}

.column-hero h1 {
  max-width: 900px;
  margin: calc(var(--u) * 2) auto 0;
  color: var(--c-brand-deep);
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.28;
}

.column-hero p:last-child {
  max-width: 720px;
  margin: calc(var(--u) * 2) auto 0;
  color: var(--c-ink-sub);
}

.column-list-section {
  padding-block: calc(var(--u) * 10) calc(var(--u) * 12);
}

.column-list-heading {
  margin: 0;
  color: var(--c-ink);
  font-size: clamp(28px, 3.6vw, 42px);
  text-align: center;
}

.column-count {
  width: min(calc(100% - var(--u) * 6), var(--container));
  margin: calc(var(--u) * 3) auto 0;
  color: var(--c-ink-sub);
  font-size: 13px;
  text-align: center;
}

.column-tag-heading {
  width: min(calc(100% - var(--u) * 6), var(--container));
  margin: calc(var(--u) * 3) auto 0;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--c-ink);
  font-size: 14px;
  font-weight: 700;
}

.column-tag-icon {
  width: 16px;
  height: 16px;
  color: var(--c-ink-sub);
}

.column-tag-filter {
  width: min(calc(100% - var(--u) * 6), var(--container));
  margin: 10px auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.column-tag {
  padding: 7px 14px;
  color: var(--c-ink);
  background: var(--c-ink-invert);
  border: 1px solid var(--c-line);
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}

.column-tag.is-active {
  color: var(--c-ink-invert);
  background: var(--c-brand);
}

.column-card[hidden] {
  display: none;
}

.column-grid {
  width: min(calc(100% - var(--u) * 6), var(--container));
  margin: calc(var(--u) * 5) auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 3);
}

.column-card {
  min-width: 0;
  overflow: hidden;
  background: var(--c-ink-invert);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
}

.column-card a {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}

.column-card-visual {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--c-surface);
}

.column-card-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.column-card-overlay {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: calc(var(--u) * 5) calc(var(--u) * 2.5) calc(var(--u) * 2);
  background: linear-gradient(to top, rgba(6, 45, 33, .92) 15%, rgba(6, 45, 33, .55) 55%, rgba(6, 45, 33, 0));
}

.column-card-overlay-tag {
  display: inline-block;
  padding: 3px 10px;
  color: var(--c-ink-invert);
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: var(--radius-pill);
  font-size: 11px;
  letter-spacing: .04em;
}

.column-card-overlay-title {
  margin-top: 10px;
  color: var(--c-ink-invert);
  font-size: 21px;
  font-weight: 800;
  line-height: 1.35;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}

.column-card-body {
  padding: calc(var(--u) * 3);
}

.column-card-meta,
.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  color: var(--c-ink-sub);
  font-size: 12px;
}

.column-card-meta span:first-child {
  color: var(--c-brand);
}

.column-card h2 {
  margin: calc(var(--u) * 2) 0 0;
  color: var(--c-brand-deep);
  font-size: 22px;
  line-height: 1.45;
}

.column-card-summary {
  margin-top: calc(var(--u) * 2);
  color: var(--c-ink-sub);
  font-size: 14px;
}

.column-card-more {
  margin-top: calc(var(--u) * 3);
  color: var(--c-brand);
  font-size: 13px;
}

.sample-notice {
  width: min(calc(100% - var(--u) * 6), var(--container));
  margin: calc(var(--u) * 4) auto 0;
  padding: calc(var(--u) * 2);
  color: var(--c-ink-sub);
  background: var(--c-surface);
  border-left: 4px solid var(--c-accent);
  font-size: 13px;
}

.breadcrumb {
  width: min(calc(100% - var(--u) * 6), var(--container));
  margin-inline: auto;
  padding-block: calc(var(--u) * 2);
  color: var(--c-ink-sub);
  font-size: 12px;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
}

.breadcrumb li:not(:last-child)::after {
  content: "/";
  margin-left: 6px;
  color: var(--c-line);
}

.breadcrumb a {
  color: var(--c-brand-deep);
}

.article-layout {
  width: min(calc(100% - var(--u) * 6), 840px);
  margin-inline: auto;
  padding-block: calc(var(--u) * 6) calc(var(--u) * 12);
}

.article-header {
  padding-bottom: calc(var(--u) * 4);
  border-bottom: 2px solid var(--c-brand);
}

.article-header h1 {
  margin: calc(var(--u) * 2) 0 0;
  color: var(--c-ink);
  font-size: clamp(34px, 5vw, 54px);
  line-height: 1.35;
}

.article-meta {
  margin-top: calc(var(--u) * 2);
}

.article-lead {
  margin-top: calc(var(--u) * 4);
  color: var(--c-ink-sub);
  font-size: 18px;
}

.article-hero {
  margin: calc(var(--u) * 4) 0 0;
}

.article-hero img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.article-toc {
  margin: calc(var(--u) * 4) 0 0;
  padding: calc(var(--u) * 2.5) calc(var(--u) * 3);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-m);
}

.article-toc summary {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--c-brand-deep);
  font-size: 16px;
  cursor: pointer;
  list-style: none;
}

.article-toc summary span {
  font-weight: 700;
}

.article-toc summary::-webkit-details-marker {
  display: none;
}

.article-toc summary::after {
  content: "";
  width: 10px;
  height: 10px;
  margin-left: auto;
  border-right: 2px solid var(--c-brand-deep);
  border-bottom: 2px solid var(--c-brand-deep);
  transform: rotate(45deg);
  transition: transform .2s;
}

.article-toc[open] summary::after {
  transform: rotate(-135deg);
}

.article-toc-icon {
  width: 18px;
  height: 18px;
  color: var(--c-brand-deep);
  flex-shrink: 0;
}

.article-toc-list {
  margin: calc(var(--u) * 2) 0 0;
  padding-top: calc(var(--u) * 2);
  border-top: 1px solid var(--c-line);
}

.article-toc-list > li {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 700;
}

.article-toc-list > li:first-child {
  margin-top: 0;
}

.article-toc-list a {
  color: var(--c-ink);
}

.article-toc-list ul {
  margin: 8px 0 0 1.4em;
}

.article-toc-list ul li {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 400;
}

.article-toc-list ul a {
  color: var(--c-ink-sub);
}

.article-hero figcaption {
  margin-top: calc(var(--u) * 1);
  color: var(--c-ink-sub);
  font-size: 13px;
  text-align: right;
}

.article-body {
  padding-top: calc(var(--u) * 2);
}

.article-body h2 {
  margin: calc(var(--u) * 7) 0 calc(var(--u) * 3);
  padding: 0 0 calc(var(--u) * 1.5) 18px;
  color: var(--c-brand-deep);
  border-left: 3px solid var(--c-brand);
  border-bottom: 1px solid var(--c-line);
  font-size: clamp(24px, 3.2vw, 32px);
  line-height: 1.45;
}

.article-body h3 {
  margin: calc(var(--u) * 4) 0 calc(var(--u) * 1.5);
  color: var(--c-brand-deep);
  font-size: 21px;
}

.article-body p + p,
.article-body p + ul,
.article-body ul + p {
  margin-top: calc(var(--u) * 2);
}

.article-body ul,
.article-body ol {
  margin-left: 1.5em;
  padding-left: 4px;
}

.article-body li + li {
  margin-top: var(--u);
}

.article-image-placeholder {
  aspect-ratio: 16 / 9;
  margin: calc(var(--u) * 4) 0;
  display: grid;
  place-content: center;
  padding: calc(var(--u) * 3);
  color: var(--c-brand-deep);
  background: var(--c-surface);
  border: 2px dashed var(--c-brand);
  border-radius: var(--radius-m);
  text-align: center;
}

.article-image-placeholder span {
  display: block;
  font-size: 20px;
}

.article-image-placeholder figcaption {
  margin-top: 8px;
  color: var(--c-ink-sub);
  font-size: 12px;
}

.article-cta {
  margin-block: calc(var(--u) * 6);
  padding: calc(var(--u) * 4);
  background: #fff7df;
  border: 2px solid var(--c-brand);
  border-radius: var(--radius-m);
}

.article-cta p:first-child {
  color: var(--c-brand-deep);
  font-size: 22px;
  text-align: center;
}

.article-cta > p:nth-child(2) {
  margin-top: var(--u);
  color: var(--c-ink-sub);
  text-align: center;
}

.article-cta .cta-cluster {
  margin-top: calc(var(--u) * 3);
}

.related-articles {
  margin-top: calc(var(--u) * 7);
  padding-top: calc(var(--u) * 5);
  border-top: 1px solid var(--c-line);
}

.related-articles h2 {
  margin: 0;
  color: var(--c-brand-deep);
  font-size: 28px;
}

.related-grid {
  margin-top: calc(var(--u) * 3);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--u) * 2);
}

.related-card {
  display: grid;
  min-height: 120px;
  align-content: center;
  padding: calc(var(--u) * 2.5);
  color: var(--c-brand-deep);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-s);
  text-decoration: none;
}

.related-card span {
  margin-bottom: 6px;
  color: var(--c-brand);
  font-size: 11px;
}

.related-group + .related-group {
  margin-top: calc(var(--u) * 4);
}

.related-group h3 {
  margin: 0;
  color: var(--c-ink-sub);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.article-byline {
  margin-top: calc(var(--u) * 1);
  color: var(--c-ink-sub);
  font-size: 13px;
}

.article-byline a {
  color: inherit;
}

.article-author {
  margin: calc(var(--u) * 5) 0;
  padding: calc(var(--u) * 3);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-s);
}

.article-author-name {
  margin: 0;
  color: var(--c-brand-deep);
  font-weight: 700;
}

.article-author-meta {
  margin: 6px 0 0;
  color: var(--c-ink-sub);
  font-size: 13px;
}

.article-author-note {
  margin: calc(var(--u) * 1.5) 0 0;
  font-size: 14px;
  line-height: 1.8;
}

.lp-back-link {
  margin-top: calc(var(--u) * 5);
  text-align: center;
}

.lp-back-link a {
  display: inline-grid;
  min-height: 48px;
  place-items: center;
  padding: 8px 20px;
  color: var(--c-ink-invert);
  background: var(--c-brand-deep);
  border-radius: var(--radius-s);
  text-decoration: none;
}

.column-card h2,
.article-header h1,
.article-body h2,
.article-body h3,
.article-cta p:first-child,
.related-articles h2 {
  font-weight: 700 !important;
}

@media (max-width: 1020px) {
  .column-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .column-hero {
    padding-block: calc(var(--u) * 6);
  }

  .column-hero-inner,
  .column-grid,
  .sample-notice,
  .breadcrumb,
  .article-layout {
    width: calc(100% - var(--u) * 4);
  }

  .column-grid,
  .related-grid {
    grid-template-columns: 1fr;
  }

  .column-card-visual {
    min-height: 150px;
  }

  .article-layout {
    padding-top: calc(var(--u) * 3);
  }

  .article-header h1 {
    font-size: 32px;
  }

  .article-lead {
    font-size: 16px;
  }

  .article-body h2 {
    font-size: 25px;
  }

  .article-cta {
    padding: calc(var(--u) * 2.5) calc(var(--u) * 2);
  }
}

@media (max-width: 380px) {
  .column-hero h1,
  .article-header h1 {
    font-size: 29px;
  }

  .article-cta p:first-child {
    font-size: 19px;
  }
}

/* 記事内の定義表(項目/内容の2列)。LP比較表用の min-width:760px・中央寄せを記事用に上書きする */
.article-body .table-wrap {
  margin-top: calc(var(--u) * 3);
  border: 1px solid var(--c-brand);
}

.article-body .table-wrap table {
  min-width: 0;
}

.article-body .table-wrap th,
.article-body .table-wrap td {
  padding: calc(var(--u) * 1.75) calc(var(--u) * 2);
  font-size: 14px;
  line-height: 1.7;
  text-align: left;
}

.article-body .table-wrap tbody th {
  width: 34%;
  vertical-align: top;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .article-body .table-wrap tbody tr {
    display: grid;
  }

  .article-body .table-wrap tbody th,
  .article-body .table-wrap td {
    width: auto;
    border-width: 0 0 1px;
    white-space: normal;
  }

  .article-body .table-wrap tbody tr:last-child td {
    border-bottom-width: 0;
  }
}

/* ===== 読みやすさの改善（2026-08-09）=====
   参考サイト smartgrashi.com の実測と比較して、次の3点が劣っていた。
   ①<strong>が太字になっていなかった（font-weight:400のまま・記事内に25個あるのに効いていない）
   ②段落の間隔が16pxで、smartgrashiの28.8px（1行ぶん）より詰まっていた
   ③h2が罫線だけで、smartgrashiの「背景ベタ塗り＋白文字」よりスキャンしにくい     */

/* ① 強調を実際に効かせる。読み飛ばす読者が拾えるようにする。
   ★style.css に `body :where(*) { font-weight: 400 !important }` という全体ルールがあり
     （方針=「太字はページ全体で10要素未満に限定する。袋文字・囲みで作る」）、
     記事内の<strong>25個が一つも効いていなかった。
     LPは「1画面で決めさせる」ため太字を絞る方針でよいが、コラムは
     「長文を拾い読みして必要な条件を見つける」ページなので目的が違う。
     記事本文の中だけ例外にする（LP側の方針は変えない）。 */
.article-body strong,
.article-body b {
  font-weight: 700 !important;
  color: var(--c-brand-deep);
  background: linear-gradient(transparent 62%, rgba(15, 112, 74, .16) 62%);
}

/* ② 段落の間隔を1行ぶんに広げる（16px → 26px） */
.article-body p + p,
.article-body p + ul,
.article-body p + ol,
.article-body ul + p,
.article-body ol + p {
  margin-top: 26px;
}

/* ③ h2を背景ベタ塗りにして、スクロール中でも節の切れ目が分かるようにする */
.article-body h2 {
  padding: 12px 16px;
  color: #fff;
  background: var(--c-brand-deep);
  border-left: none;
  border-bottom: none;
  border-radius: 4px;
  font-size: clamp(19px, 2.6vw, 24px);
  line-height: 1.5;
}

/* h3は本文との区別がつく程度に。h2との階層差をはっきりさせる */
.article-body h3 {
  padding-left: 12px;
  border-left: 4px solid var(--c-brand);
  font-size: clamp(17px, 2.2vw, 20px);
}

/* ============================================================
   読みやすさの部品（2026-08-09 追加）
   これまで強調の手段が <strong> の1種類しかなく、7,000字が
   同じ調子で流れていた。マーカー・色分け・吹き出し・ボックスを
   足して「どこが大事か」を目で拾えるようにする。
   ⚠️ ランキング・星評価・創作口コミは作らない（景表法・ステマ規制）。
   ============================================================ */

/* --- 1. マーカー（本文中で最も重要な1文に引く。h2ひとつにつき最大1本） --- */
.article-layout .mk {
  background: linear-gradient(transparent 58%, #ffe58a 58%);
  font-weight: 700;
  padding-bottom: 1px;
}

/* --- 2. 色付き強調。用途で色を分ける --- */
.article-layout .em-cost { color: #c83e22; font-weight: 700; }  /* お金・損得 */
.article-layout .em-warn { color: #a52118; font-weight: 700; }  /* できない・要注意 */
.article-layout .em-ok   { color: #0f704a; font-weight: 700; }  /* 条件を満たす・お得 */

/* --- 3. 吹き出し（左＝読者の疑問／右＝スタッフの回答） --- */
.article-body .talk {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: calc(var(--u) * 3) 0;
}
.article-body .talk-you { flex-direction: row; }
.article-body .talk-us  { flex-direction: row-reverse; }

.article-body .talk-face {
  flex: 0 0 52px;
  width: 52px;
  text-align: center;
  font-size: 11px;
  line-height: 1.4;
  color: var(--c-ink-sub);
}
.article-body .talk-face span {
  display: grid;
  place-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 4px;
  border-radius: 50%;
  font-size: 24px;
}
.article-body .talk-you .talk-face span { background: #eef3f1; }
.article-body .talk-us  .talk-face span { background: #e3f1e9; }

.article-body .talk-text {
  position: relative;
  max-width: 100%;
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.85;
}
.article-body .talk-text p { margin: 0; }
.article-body .talk-text p + p { margin-top: .6em; }
.article-body .talk-you .talk-text { background: #f1f4f3; border: 1px solid #dfe6e3; }
.article-body .talk-us  .talk-text { background: #e8f4ee; border: 1px solid #bfe0cd; }

.article-body .talk-text::before {
  content: "";
  position: absolute;
  top: 18px;
  width: 0; height: 0;
  border: 8px solid transparent;
}
.article-body .talk-you .talk-text::before {
  left: -16px;
  border-right-color: #dfe6e3;
}
.article-body .talk-us .talk-text::before {
  right: -16px;
  border-left-color: #bfe0cd;
}

/* --- 4. ボックス（注意／ポイント） --- */
.article-body .box {
  margin: calc(var(--u) * 3) 0;
  padding: 16px 18px 18px;
  border-radius: 10px;
  font-size: 15px;
  line-height: 1.85;
}
.article-body .box > p:first-child,
.article-body .box > .box-title {
  margin: 0 0 8px;
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.article-body .box p + p,
.article-body .box .box-title + * { margin-top: 8px; }
.article-body .box ul { margin: 8px 0 0 1.4em; }

.article-body .box-warn  { background: #fff6e6; border: 1px solid #f0c97a; }
.article-body .box-warn  > .box-title { color: #9a5a00; }
.article-body .box-point { background: #eef7f2; border: 1px solid #a9d6bd; }
.article-body .box-point > .box-title { color: #0b4a35; }

/* --- 5. チェックリスト（当てはまるか自己診断させる） --- */
.article-body .checks {
  margin: calc(var(--u) * 2) 0;
  padding: 0;
  list-style: none;
}
.article-body .checks li {
  position: relative;
  margin: 0 0 10px;
  padding: 10px 14px 10px 42px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.75;
}
.article-body .checks li::before {
  content: "";
  position: absolute;
  left: 14px; top: 15px;
  width: 15px; height: 9px;
  border-left: 3px solid var(--c-brand);
  border-bottom: 3px solid var(--c-brand);
  transform: rotate(-45deg);
}

/* --- 6. 比較表の「おすすめ側」を色で示す --- */
.article-body .table-wrap table .pick {
  background: #eef7f2;
  font-weight: 700;
}
.article-body .table-wrap thead th {
  background: var(--c-brand-deep);
  color: #fff;
  font-weight: 700;
}

/* --- 7. 本文中の図版（目の休憩所。長い記事では2〜3枚入れる） --- */
.article-body .inline-figure {
  margin: calc(var(--u) * 4) 0;
}
.article-body .inline-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}
.article-body .inline-figure figcaption {
  margin-top: 8px;
  color: var(--c-ink-sub);
  font-size: 13px;
  text-align: center;
}

/* --- 8. スマホ調整 --- */
@media (max-width: 600px) {
  .article-body .talk-text { font-size: 14px; padding: 12px 14px; }
  .article-body .talk-face { flex-basis: 44px; width: 44px; }
  .article-body .talk-face span { width: 44px; height: 44px; font-size: 20px; }
  .article-body .box, .article-body .checks li { font-size: 14px; }
}

/* --- 9. CTA内の「当てはまるか」チェック（2026-08-09） --- */
.article-cta .cta-checks {
  margin: 14px auto 0;
  padding: 0;
  max-width: 34em;
  list-style: none;
  text-align: left;
}
.article-cta .cta-checks li {
  position: relative;
  margin: 0 0 8px;
  padding: 8px 12px 8px 34px;
  background: rgba(255, 255, 255, .72);
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.7;
}
.article-cta .cta-checks li::before {
  content: "";
  position: absolute;
  left: 12px; top: 14px;
  width: 13px; height: 8px;
  border-left: 3px solid var(--c-brand);
  border-bottom: 3px solid var(--c-brand);
  transform: rotate(-45deg);
}
@media (max-width: 600px) {
  .article-cta .cta-checks li { font-size: 14px; }
}

/* --- 10. 記事内CTAはLINEを主役にする（2026-08-09）
   旧版は電話が主役だったが、コラム経由で実際に届いた唯一の問い合わせはLINEだった。
   「まず値段だけ知りたい」段階の読者は電話をかけない。 --- */
/* ★電話を主役にする。電話は横いっぱいで最大、LINEとフォームはその下に並べる。
   （2026-08-09 Piino指摘。CVは電話が最重要） */
.newtype .article-cta .cta-cluster {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.newtype .article-cta .cta-phone {
  grid-column: 1 / -1;
  min-height: 92px;
}
.newtype .article-cta .cta-phone b { font-size: clamp(28px, 4.4vw, 36px); }
.newtype .article-cta .cta-phone span { font-size: 13px; }
.newtype .article-cta .cta-line,
.newtype .article-cta .cta-form { min-height: 58px; font-size: 15px; }
@media (max-width: 480px) {
  .newtype .article-cta .cta-cluster { grid-template-columns: 1fr; }
}
.newtype .article-cta .cta-form { min-height: 44px; }

@media (max-width: 600px) {
  .newtype .article-cta .cta-cluster { grid-template-columns: 1fr; }
  .newtype .newtype .article-cta .cta-line { grid-row: auto; }
}

/* --- 11. ボックスの見出しを目で拾えるようにする --- */
.article-body .box > .box-title {
  font-size: 16px;
  letter-spacing: .01em;
}
.article-body .box-warn > .box-title::before { content: "⚠"; font-size: 17px; }
.article-body .box-point > .box-title::before { content: "✓"; font-size: 15px; }

/* --- 12. 表の見出し（早わかり表など） --- */
.article-body .table-wrap caption.quick-caption {
  padding: 10px 14px;
  color: #fff;
  background: var(--c-brand);
  border-radius: 8px 8px 0 0;
  font-size: 15px;
  font-weight: 700;
  text-align: left;
  caption-side: top;
}

/* --- 13. 修正: 吹き出しの本文が幅からはみ出していた（実測 301px / 枠285px） --- */
.article-body .talk-text {
  flex: 1 1 auto;
  min-width: 0;
}

/* --- 14. 4列の比較表はスマホで横スクロールさせる。
   既存の「行をgridに畳む」変換は2列表向けで、4列だと意味が崩れる。 --- */
@media (max-width: 720px) {
  .article-body .table-wrap.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .article-body .table-wrap.scroll-x table { min-width: 620px; }
  .article-body .table-wrap.scroll-x tbody tr { display: table-row; }
  .article-body .table-wrap.scroll-x tbody th,
  .article-body .table-wrap.scroll-x tbody td {
    width: auto;
    border-width: 0 1px 1px 0;
    white-space: normal;
  }
  .article-body .table-wrap.scroll-x tbody th { white-space: nowrap; }
}
.article-body .table-wrap.scroll-x::before {
  content: "→ 表は横にスクロールできます";
  display: block;
  margin-bottom: 6px;
  color: var(--c-ink-sub);
  font-size: 12px;
  text-align: right;
}
@media (min-width: 721px) {
  .article-body .table-wrap.scroll-x::before { display: none; }
}

/* --- 15. 比較表の但し書き（約束の範囲を限定する。表の断定を独り歩きさせない） --- */
.article-body .table-note {
  margin-top: 10px;
  padding: 10px 14px;
  background: var(--c-surface);
  border-left: 3px solid var(--c-line);
  border-radius: 0 6px 6px 0;
  color: var(--c-ink-sub);
  font-size: 13px;
  line-height: 1.8;
}
.article-body .table-wrap td small {
  display: block;
  margin-top: 3px;
  color: var(--c-ink-sub);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
}

/* --- 16. 【不具合修正 2026-08-09】記事内CTAの電話番号が読めなくなっていた。
   .article-body strong/b に色と下線を当てる規則（上記①）が、CTAの中の
   <b>電話番号</b> まで巻き込み、赤背景(#c83e22)に深緑(#0b4a35)で出ていた。
   本番の公開47記事すべてで発生。CTAの中だけ元の色に戻す。 --- */
.article-cta b,
.article-cta strong,
.cta-phone b,
.cta-line b,
.cta-form b {
  color: inherit;
  background: none;
}

/* 新型の電話ボタンは縮めない（24pxに詰めると番号が窮屈で読みにくい） */
.newtype .article-cta .cta-phone { min-height: 76px; }
.newtype .article-cta .cta-phone b { font-size: 28px; }

/* --- 17. CTA内の事業者表示（2026-08-09）
   記事の途中から読み始めた人に「誰の案内か」を示す。画像バナーは使わない。 --- */
.newtype .article-cta .cta-identity {
  margin: 14px 0 0;
  color: var(--c-ink-sub);
  font-size: 12px;
  line-height: 1.7;
  text-align: center;
}

/* ============================================================
   18. カード型CTA（2026-08-09 Piino指示）
   「文章＋ボタン」だけでは誘導が弱い。ブランドオフの記事内CTAを参考に、
   ①色の帯で存在を主張 ②誰の何のサービスか ③無料の範囲 ④できること4点
   ⑤行動喚起 ⑥事業者情報 を1ブロックにまとめる。
   ★写真は使わない（重くなる／AI生成は文字化けと構図違反のリスク）。色と文字だけで作る。
   ★ランキング・星・口コミは作らない（景表法・ステマ規制）。
   ============================================================ */
/* --- 21. ボタンの矢印（参考サイトと同じ。押せることを形で示す） --- */
.column-aside-cta::after {
  content: "▶";
  position: absolute;
  right: 14px; top: 50%;
  margin-top: -8px;
  font-size: 11px;
  opacity: .8;
}
.column-aside-cta { position: relative; }

/* --- 22. 記事の要約ボックス（参考サイトの「今回の記事のポイント」） --- */
.article-body .article-summary {
  margin: calc(var(--u) * 5) 0 calc(var(--u) * 3);
  padding: 18px 20px 20px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 10px;
}
.article-body .article-summary > p:first-child {
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--c-brand);
  color: var(--c-brand-deep);
  font-size: 16px;
  font-weight: 700;
}
.article-body .article-summary ul { margin: 0 0 0 1.3em; padding: 0; }
.article-body .article-summary li { margin-bottom: 6px; font-size: 14.5px; line-height: 1.8; }

/* --- 23. あわせて読みたい（参考サイトのオレンジ枠カード） --- */
.article-body .read-also {
  position: relative;
  display: block;
  margin: calc(var(--u) * 4) 0;
  padding: 20px 44px 18px 20px;
  background: #fffdf6;
  border: 2px solid #f0c97a;
  border-radius: 10px;
  color: var(--c-ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.7;
  text-decoration: none;
}
.article-body .read-also::before {
  content: "あわせて読みたい";
  position: absolute;
  top: -10px; left: 16px;
  padding: 2px 10px;
  background: #f0b323;
  border-radius: 999px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.article-body .read-also::after {
  content: "›";
  position: absolute;
  right: 18px; top: 50%;
  margin-top: -14px;
  color: #d4a017;
  font-size: 26px;
}

/* ============================================================
   25. 記事末尾のカードだけ特別にする（2026-08-09 Piino指摘）
   競合(smartgrashi.com)は記事末のカードが一番強い（バナー画像＋大ボタン）。
   エコラビは lead/mid/end が全部同じ見た目で、末尾が埋もれていた。
   ★画像は既存の実写を使い、文字はCSSで重ねる（AI生成に日本語を焼くと崩れるため）。
   ============================================================ */
.newtype .cta-final-banner {
  position: relative;
  margin: 0 0 16px;
  overflow: hidden;
  border-radius: 10px;
}
.newtype .cta-final-banner img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 7;
  object-fit: cover;
}

/* 末尾の電話ボタンは一段大きく、色も琥珀に寄せて「最後の一押し」にする */

/* --- 26. CTAの3ステップ（2026-08-09 再追加）
   ★19番ブロックを差し替えたときに巻き込んで消してしまった。HTMLは使い続けていたので
     ただの番号付きリストとして表示されていた（Piino指摘で発覚）。
   競合と同じピル型バッジにする。 --- */
.newtype .cta-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}
.newtype .cta-steps li {
  position: relative;
  padding: 12px 10px 13px;
  background: #fff;
  border: 1px solid #cfe0d7;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}
.newtype .cta-steps li span {
  display: block;
  width: fit-content;
  margin: 0 auto 7px;
  padding: 3px 12px;
  background: var(--c-brand-deep);
  border-radius: 999px;
  color: #fff;
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
}
.newtype .cta-steps li + li::before {
  content: "";
  position: absolute;
  left: -7px; top: 50%;
  width: 0; height: 0;
  margin-top: -5px;
  border: 5px solid transparent;
  border-left-color: #0f704a;
}
@media (max-width: 560px) {
  .newtype .cta-steps { grid-template-columns: 1fr; }
  .newtype .cta-steps li + li::before {
    left: 50%; top: -7px; margin: 0 0 0 -5px;
    border-left-color: transparent; border-top-color: #0f704a;
  }
}

/* --- 27. 末尾カードの注記（2026-08-09 再追加。26と同じ巻き込み削除で消えていた） --- */
.newtype .cta-card-fine {
  margin: 10px 0 0;
  color: var(--c-ink-sub);
  font-size: 11px;
  line-height: 1.7;
}

/* ============================================================
   28. 記事中のCTAは軽く（2026-08-09 Piino指摘「共通CTAと最後のカードが同じ」）
   競合は記事中がキャッチ＋ボタンだけ。3か所とも同じフル装備にすると
   末尾の存在感が消え、しつこく見える。
   ============================================================ */
.newtype .article-cta.cta-slim {
  padding: 20px 22px 22px;
  background: #fffdf5;
  border: 2px solid var(--c-brand);
  border-radius: 10px;
}
.newtype .cta-slim-catch {
  margin: 0 0 14px;
  color: var(--c-brand-deep);
  font-size: clamp(16px, 2.2vw, 19px);
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}
.newtype .cta-slim-catch b { color: var(--c-cta-bg); }
.newtype .article-cta.cta-slim .cta-cluster { grid-template-columns: 1fr 1fr; gap: 8px; }
.newtype .article-cta.cta-slim .cta-phone { grid-column: 1 / -1; min-height: 78px; }
.newtype .article-cta.cta-slim .cta-phone b { font-size: clamp(26px, 4vw, 32px); }
.newtype .article-cta.cta-slim .cta-line,
.newtype .article-cta.cta-slim .cta-form { min-height: 50px; font-size: 14px; }

/* ============================================================
   29. 末尾のカードだけ「一番強い形」（2026-08-09 A案・4回目の作り直し）
   競合 https://smartgrashi.com/coach-wallet-broken-sell/ のRECLOカードと
   同じ幅に並べて実測した差を、次の6点で埋める:
     ①ボタンを1本に（3本並べると共通CTAに見える）
     ②アクセントを緑1色に（競合は「ブランド色1色＋白グレー」。琥珀は全廃）
     ③要素間の余白を倍に（16〜20px → 36〜40px）
     ④無料枠を縦積みに（横並びだと潰れて短くなる）
     ⑤チェックを1行の短文に（折り返すと読めない）
     ⑥バナーを独立ブロックに（写真に暗幕をかけず、横いっぱいで見せる）
   ★色はすべてWCAG AAを満たす組み合わせのみ使う（計算済み）。
   ============================================================ */
.newtype .article-cta.cta-final {
  overflow: hidden;
  padding: 0;
  background: #fff;
  border: 3px solid var(--c-brand-deep);
  border-radius: 14px;
  box-shadow: 0 12px 34px rgba(11, 74, 53, .18);
}

/* ①帯 */
.newtype .cta-final-head {
  padding: 26px 24px 28px;
  background: linear-gradient(135deg, #0f704a 0%, #0b4a35 100%);
  text-align: center;
}
.newtype .cta-final-pill {
  display: inline-block;
  padding: 5px 16px;
  background: #fff;
  border-radius: 999px;
  color: #0b4a35;
  font-size: 13px;
  font-weight: 700;
}
.newtype .cta-final-catch {
  margin: 14px 0 0;
  color: #fff;
  font-size: clamp(22px, 3.4vw, 30px);
  font-weight: 700;
  line-height: 1.4;
}
.newtype .cta-final-catch em { font-style: normal; color: #ffd966; }
.newtype .cta-final-sub {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, .92);
  font-size: clamp(13px, 1.8vw, 15px);
  line-height: 1.6;
}

.newtype .cta-final-body { padding: 36px 32px 30px; }

/* ②リード */
.newtype .cta-final-lead {
  margin: 0 0 36px;
  color: var(--c-ink);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.95;
  text-align: center;
}
.newtype .cta-final-lead b { color: var(--c-brand-deep); }

/* ③チェック（1行の短文・緑のみ） */
.newtype .cta-final-body .cta-checks {
  margin: 0 auto 36px;
  padding: 0;
  max-width: 30em;
  list-style: none;
}
.newtype .cta-final-body .cta-checks li {
  position: relative;
  margin: 0 0 10px;
  padding: 14px 16px 14px 50px;
  background: #f1f8f3;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
}
.newtype .cta-final-body .cta-checks li::before {
  content: "";
  position: absolute;
  left: 17px; top: 50%;
  width: 21px; height: 21px;
  margin-top: -10.5px;
  background: #0f704a;
  border-radius: 50%;
}
.newtype .cta-final-body .cta-checks li::after {
  content: "";
  position: absolute;
  left: 23px; top: 50%;
  width: 9px; height: 5px;
  margin-top: -3px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}

/* ④無料枠（縦積み） */
.newtype .cta-final-free {
  margin: 0 0 36px;
  padding: 24px 20px 20px;
  background: #f7fbf8;
  border: 2px dashed #0f704a;
  border-radius: 12px;
  text-align: center;
}
.newtype .cta-final-free-pill {
  display: inline-block;
  padding: 5px 16px;
  background: #0b4a35;
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.newtype .cta-final-free ul {
  margin: 18px auto 16px;
  padding: 0;
  max-width: 22em;
  list-style: none;
}
.newtype .cta-final-free li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  padding: 12px 18px;
  background: #fff;
  border: 1px solid #cfe0d7;
  border-radius: 8px;
}
.newtype .cta-final-free li span { color: var(--c-ink); font-size: 15px; font-weight: 700; }
.newtype .cta-final-free li b {
  color: #0b4a35;
  font-family: var(--font-en);
  font-size: 30px;
  line-height: 1;
}
.newtype .cta-final-free > p {
  margin: 0;
  color: var(--c-ink-sub);
  font-size: 13.5px;
  line-height: 1.85;
}

/* ⑤バナー（写真は横いっぱい。暗幕をかけない） */
.newtype .cta-final-banner {
  margin: 0 0 36px;
  overflow: hidden;
  border-radius: 12px;
}
.newtype .cta-final-banner img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 7;
  object-fit: cover;
}
.newtype .cta-final-banner-foot {
  margin: 0;
  padding: 14px 12px;
  background: #0b4a35;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
}
.newtype .cta-final-banner-foot span {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 400;
  opacity: .92;
}

/* ⑥キャッチ＋STEP */
.newtype .cta-final-push {
  margin: 0 0 16px;
  color: var(--c-brand-deep);
  font-size: 14px;
  line-height: 1.7;
  text-align: center;
}
.newtype .cta-final-push b {
  display: block;
  margin-top: 4px;
  font-size: clamp(19px, 2.6vw, 23px);
}
.newtype .cta-final-body .cta-steps { margin: 0 0 36px; }

/* ⑦ボタンは1本だけ */
.newtype .cta-final-btn {
  position: relative;
  display: grid;
  place-content: center;
  min-height: 112px;
  padding: 14px 26px;
  background: var(--c-cta-bg);
  border: 2px solid var(--c-ink);
  border-radius: 12px;
  box-shadow: 0 8px 0 #7e2616, 0 18px 30px rgba(0, 0, 0, .14);
  color: #fff;
  text-align: center;
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease;
}
.newtype .cta-final-btn:hover { transform: translateY(4px); box-shadow: 0 4px 0 #7e2616, 0 10px 20px rgba(0, 0, 0, .14); }
.newtype .cta-final-btn span { font-size: 14px; font-weight: 700; letter-spacing: .04em; }
.newtype .cta-final-btn b { font-family: var(--font-en); font-size: clamp(34px, 5.4vw, 44px); line-height: 1.12; }
.newtype .cta-final-btn small { font-size: 12px; opacity: .95; }
.newtype .cta-final-btn::after {
  content: "▶";
  position: absolute;
  right: 18px; top: 50%;
  margin-top: -9px;
  font-size: 13px;
  opacity: .8;
}
.newtype .cta-final-btn-sub {
  margin: 12px 0 0;
  color: var(--c-ink-sub);
  font-size: 13.5px;
  text-align: center;
}
.newtype .cta-final-btn-sub a { color: var(--c-brand-deep); font-weight: 700; }

.newtype .cta-final .cta-card-fine { margin-top: 24px; }
.newtype .cta-final .cta-identity { margin-top: 10px; }

@media (max-width: 600px) {
  .newtype .cta-final-head { padding: 20px 16px 22px; }
  .newtype .cta-final-body { padding: 26px 16px 22px; }
  .newtype .cta-final-lead,
  .newtype .cta-final-body .cta-checks,
  .newtype .cta-final-free,
  .newtype .cta-final-banner,
  .newtype .cta-final-body .cta-steps { margin-bottom: 28px; }
  .newtype .cta-final-free li { padding: 10px 14px; }
  .newtype .cta-final-free li b { font-size: 26px; }
}

/* ============================================================
   30. 右側の追従サイドバー（2026-08-09 再追加）
   ★29番の整理でCSSブロックを削りすぎ、19番のサイドバー定義まで消してしまった。
     同種の巻き込み削除は3回目。範囲指定で消さず、以後は追記のみにする。
   競合(smartgrashi.com)の「おすすめ買取業者」枠と同じ4要素:
     ①社名 ②写真 ③短い説明 ④ボタン1本
   ★ランキング・星評価・他社掲載は採らない（エコラビは当事者。景表法・ステマ規制）。
   ============================================================ */
.article-shell.newtype {
  display: grid;
  grid-template-columns: minmax(0, 840px) 300px;
  gap: 44px;
  width: min(calc(100% - var(--u) * 4), 1220px);
  margin-inline: auto;
  align-items: start;
}
.article-shell.newtype > .article-layout { width: 100%; margin-inline: 0; }

.column-aside { position: sticky; top: 88px; }
.column-aside-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid #dbe4e0;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(11, 74, 53, .10);
}
.column-aside-head {
  padding: 12px 14px;
  background: linear-gradient(135deg, #0f8055 0%, #0b4a35 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  letter-spacing: .02em;
}
.column-aside-body { padding: 16px 14px 14px; }
.column-aside-name {
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--c-line);
  color: var(--c-ink);
  font-size: 20px;
  font-weight: 700;
}
.column-aside-row {
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: 12px;
  align-items: start;
  margin-bottom: 14px;
}
.column-aside-row img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 6px;
}
.column-aside-row p { margin: 0; color: var(--c-ink); font-size: 12.5px; line-height: 1.75; }
.column-aside-cta {
  position: relative;
  display: block;
  padding: 14px 8px;
  background: var(--c-cta-bg);
  border: 2px solid var(--c-ink);
  border-radius: 8px;
  box-shadow: 0 4px 0 #7e2616;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease;
}
.column-aside-cta:hover { transform: translateY(2px); box-shadow: 0 2px 0 #7e2616; }
.column-aside-cta::after {
  content: "▶";
  position: absolute;
  right: 14px; top: 50%;
  margin-top: -8px;
  font-size: 11px;
  opacity: .85;
}
.column-aside-cta small { display: block; margin-top: 3px; font-size: 11px; font-weight: 400; opacity: .95; }

@media (max-width: 1200px) {
  .article-shell.newtype { display: block; width: min(calc(100% - var(--u) * 6), 840px); }
  .column-aside { position: static; margin-top: calc(var(--u) * 4); }
  .column-aside-card { max-width: 420px; margin-inline: auto; }
}

/* --- 31. 記事中CTAはボタン1本（2026-08-09 Piino指摘「共通CTAが元に戻ってる」）
   電話・LINE・フォームを3本並べると、サイト共通のCTAと同じ見た目になる。
   競合も記事中はボタン1本。LINEとフォームはテキストリンクに落とす。 --- */

/* --- 32. 記事中CTAは3ボタン・電話が主役（2026-08-10 Piino指示）
   ボタン1本にしたら「戻して」と指示。チェックリスト＋3ボタンの形に戻す。
   ただし電話が横いっぱいで最大、LINEとフォームはその下に半分ずつ。 --- */
.newtype .cta-slim-lead {
  margin: 14px 0 16px;
  color: var(--c-ink);
  font-size: 15px;
  line-height: 1.85;
  text-align: center;
}
.newtype .article-cta.cta-slim .cta-checks {
  margin: 14px auto 0;
  padding: 0;
  max-width: 34em;
  list-style: none;
  text-align: left;
}
.newtype .article-cta.cta-slim .cta-checks li {
  position: relative;
  margin: 0 0 8px;
  padding: 10px 14px 10px 40px;
  background: #fff;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.7;
}
.newtype .article-cta.cta-slim .cta-checks li::before {
  content: "";
  position: absolute;
  left: 14px; top: 50%;
  width: 16px; height: 9px;
  margin-top: -6px;
  border-left: 3px solid var(--c-brand);
  border-bottom: 3px solid var(--c-brand);
  transform: rotate(-45deg);
}
.newtype .article-cta.cta-slim .cta-cluster { grid-template-columns: 1fr 1fr; gap: 8px; }
.newtype .article-cta.cta-slim .cta-phone {
  grid-column: 1 / -1;
  min-height: 92px;
}
.newtype .article-cta.cta-slim .cta-phone b { font-size: clamp(28px, 4.4vw, 36px); }
.newtype .article-cta.cta-slim .cta-line,
.newtype .article-cta.cta-slim .cta-form { min-height: 52px; font-size: 14px; }
@media (max-width: 560px) {
  .newtype .article-cta.cta-slim .cta-cluster { grid-template-columns: 1fr; }
}