@charset "UTF-8";
/* =========================================================
   つくりば コラム用 汎用パーツCSS（article-components）v2
   - テーマの .article ul/ol/li 装飾（点・番号カウンタ）と衝突しないよう、
     リスト要素(ul/ol/li)を使わず div/span/p で構成する
   - すべて .article 配下のセレクタにして既存CSSより高い詳細度で確実に適用
   - スマホは縦積みに自動切替（レスポンシブ）
   ========================================================= */
:root{
  --tsk-ink:#22282b; --tsk-text:#555f63;
  --tsk-orange:#df7b35; --tsk-orange-d:#e77735; --tsk-yellow:#f4b642;
  --tsk-blue:#16a7d8; --tsk-green:#41b883; --tsk-pink:#e85c86;
  --tsk-paper:#fffaf2; --tsk-soft:#fff0df; --tsk-border:#eadfce;
}

/* ===== 番号付き要点（.tsk-steps / .tsk-step） ===== */
.article .tsk-steps{margin:30px 0;display:flex;flex-direction:column;gap:12px}
.article .tsk-step{display:flex;gap:16px;align-items:center;background:var(--tsk-paper);border:1px solid var(--tsk-border);border-radius:14px;padding:15px 18px}
.article .tsk-step__n{flex:none;width:44px;height:44px;border-radius:50%;background:var(--tsk-orange);color:#fff;font-weight:800;font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center}
.article .tsk-step:nth-child(2) .tsk-step__n{background:var(--tsk-blue)}
.article .tsk-step:nth-child(3) .tsk-step__n{background:var(--tsk-green)}
.article .tsk-step:nth-child(4) .tsk-step__n{background:var(--tsk-pink)}
.article .tsk-step:nth-child(5) .tsk-step__n{background:var(--tsk-yellow)}
.article .tsk-step__b{flex:1;min-width:0}
.article .tsk-step__t{display:block;font-size:1.08rem;color:var(--tsk-ink);font-weight:700;margin:0 0 3px;line-height:1.4}
.article .tsk-step__d{display:block;color:var(--tsk-text);font-size:.93rem;line-height:1.7;margin:0}

/* ===== 役割・比較カード（.tsk-cards / .tsk-card） ===== */
.article .tsk-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:30px 0}
.article .tsk-card{background:var(--tsk-paper);border:1px solid var(--tsk-border);border-radius:14px;overflow:hidden}
.article .tsk-card__h{padding:13px 16px;color:#fff;font-weight:800;font-size:1.08rem}
.article .tsk-card:nth-child(1) .tsk-card__h{background:var(--tsk-blue)}
.article .tsk-card:nth-child(2) .tsk-card__h{background:var(--tsk-orange)}
.article .tsk-card:nth-child(3) .tsk-card__h{background:var(--tsk-green)}
.article .tsk-card__b{padding:22px 15px;display:flex;flex-direction:column;gap:11px}
.article .tsk-i{position:relative;margin:0;padding-left:19px;color:var(--tsk-text);font-size:.95rem;line-height:1.65}
.article .tsk-i::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--tsk-orange)}
.article .tsk-card:nth-child(1) .tsk-i::before{background:var(--tsk-blue)}
.article .tsk-card:nth-child(3) .tsk-i::before{background:var(--tsk-green)}
.article .tsk-i b{color:var(--tsk-ink);font-weight:700}

/* ===== 実例の囲み（.tsk-callout）フラット ===== */
.article .tsk-callout{margin:30px 0;background:#faf4ea;border-radius:6px;padding:22px 24px}
.article .tsk-callout__t{display:inline-block;background:var(--tsk-orange);color:#fff;font-weight:700;font-size:.77rem;letter-spacing:.06em;padding:5px 13px;border-radius:4px;margin:0 0 13px}
.article .tsk-callout p{margin:0;color:#4a463f;line-height:1.9}

/* ===== CTAボックス（.tsk-cta）／テーマ(content-cta-article.php)が出力 ===== */
.article .tsk-cta{margin:42px 0 8px;background:linear-gradient(160deg,#fffaf2,#fff0df);border:2px solid var(--tsk-orange);border-radius:14px;padding:30px 28px;text-align:center}
.article .tsk-cta__sym{width:40px;height:40px;display:block;margin:0 auto 10px}
.article .tsk-cta__t{font-size:1.5rem;font-weight:800;color:var(--tsk-ink);margin:0 0 16px;line-height:1.5}
.article .tsk-cta__t span{box-shadow:inset 0 -.45em 0 #ffdca6; padding:0 .12em; font-size: 1.4rem; font-weight: bold;}
.article .tsk-cta__d,.article .tsk-cta p{margin:0 auto 22px;max-width:34em;color:var(--tsk-text);line-height:1.85;font-size:.97rem}
.article a.tsk-cta__btn{display:inline-block;background:var(--tsk-orange);color:#fff;font-weight:800;text-decoration:none;padding:14px 60px;border-radius:999px;font-size:1rem}
.article a.tsk-cta__btn:hover{
  opacity: 0.7;
  transition: 0.5s;
}

@media (max-width:600px){
  .article .tsk-cta{padding:26px 18px}
  .article .tsk-cta__t{font-size:1.3rem}
  .article a.tsk-cta__btn{
    display:block;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ===== レスポンシブ（スマホ） ===== */
@media (max-width:600px){
  .article .tsk-cards{grid-template-columns:1fr;gap:20px}
  .article .tsk-step{padding:14px 15px;gap:13px}
  .article .tsk-step__n{width:38px;height:38px;font-size:18px}
  .article .tsk-cta{padding:22px 18px}
  .article .tsk-card__h {
    font-size: 1rem;
    padding: 10px 15px;
  }
  .article .tsk-card {
    border-radius: 8px;
  }
  .article .tsk-cta__t {
    padding: 0 1rem;
  }
  .article .tsk-cta__t span {
    font-size: 1.1rem;
  }
}

/* ===== 比較表（.tsk-table） ===== */
.article .tsk-table-wrap{margin:28px 0;overflow-x:auto}
.article table.tsk-table{width:100%;border-collapse:collapse;background:#fff;font-size:.95rem}
.article table.tsk-table th,.article table.tsk-table td{border:1px solid var(--tsk-border);padding:12px 14px;text-align:left;vertical-align:top;line-height:1.6}
.article table.tsk-table thead th{background:var(--tsk-orange);color:#fff;font-weight:700;white-space:nowrap}
.article table.tsk-table tbody th{background:var(--tsk-soft);color:var(--tsk-ink);font-weight:700;white-space:nowrap}
.article table.tsk-table td{color:var(--tsk-text)}

/* ===== チェックリスト（.tsk-check） ===== */
.article .tsk-check{margin:30px 0;background:var(--tsk-paper);border:1px solid var(--tsk-border);border-radius:14px;padding:22px 26px}
.article .tsk-check__t{font-weight:800;color:var(--tsk-ink);font-size:1.12rem;margin:0 0 14px}
.article .tsk-check__item{position:relative;margin:0 0 11px;padding-left:32px;color:var(--tsk-text);line-height:1.7}
.article .tsk-check__item:last-child{margin-bottom:0}
.article .tsk-check__item::before{content:"";position:absolute;left:0;top:.15em;width:19px;height:19px;border-radius:5px;background:var(--tsk-green)}
.article .tsk-check__item::after{content:"";position:absolute;left:7px;top:.32em;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}