/* ===== ブログ記事の共通部品（Kosugi Maru／金#92651A／紺#1e293b） =====
   article.css（ヒーロー・本文の余白）に重ねて使う。記事ごとの体裁を揃える。 */

/* 2カラム・アイコンカード（体験・具体例） */
.flow-cards{max-width:860px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.flow-card{background:#fff;border:1px solid #ece7dd;border-radius:16px;padding:24px 24px;box-shadow:0 6px 24px rgba(0,0,0,.04);display:flex;gap:16px;align-items:flex-start}
.flow-card .ic{font-size:2rem;line-height:1;flex-shrink:0}
.flow-card .t{font-size:1.02rem;font-weight:700;color:#1e293b;line-height:1.5}
.flow-card .d{font-size:.86rem;color:#64748b;line-height:1.8;margin-top:6px}
.flow-caption{text-align:center;color:#92651A;font-weight:700;font-size:.95rem;margin:22px auto 0}

/* 3カラム・センターカード（3条件・3つの効果 など） */
.card3{max-width:900px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card3 .c{background:#fff;border:1px solid #ece7dd;border-radius:16px;padding:26px 22px;text-align:center;box-shadow:0 6px 24px rgba(0,0,0,.04)}
.card3 .c .ic{font-size:2rem;line-height:1}
.card3 .c .t{font-size:1.05rem;font-weight:700;color:#1e293b;margin:10px 0 8px;line-height:1.5}
.card3 .c .d{font-size:.86rem;color:#64748b;line-height:1.85}

/* 対比（内発 vs 外発 など） */
.compare{max-width:820px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.compare .col{border-radius:16px;padding:24px 22px}
.compare .col.good{background:#faf8f4;border:1px solid #e6dcc7;border-top:4px solid #92651A}
.compare .col.bad{background:#f6f7f9;border:1px solid #e5e9ef;border-top:4px solid #9aa6b2}
.compare .col h3{font-size:1.05rem;font-weight:700;color:#1e293b;margin-bottom:14px;text-align:center}
.compare .row{padding:11px 0;border-bottom:1px solid rgba(0,0,0,.06)}
.compare .row:last-child{border-bottom:none}
.compare .k{font-size:.72rem;font-weight:700;color:#92651A;letter-spacing:.08em}
.compare .col.bad .k{color:#9aa6b2}
.compare .v{color:#334155;font-size:.88rem;line-height:1.7;margin-top:2px}

/* 番号つきリスト（効果・ヒント） */
.flow-benefits{max-width:760px;margin:0 auto;padding:0 24px;display:grid;gap:16px}
.benefit{background:#fff;border:1px solid #ece7dd;border-left:4px solid #92651A;border-radius:12px;padding:22px 24px}
.benefit .n{font-size:.72rem;font-weight:700;letter-spacing:.14em;color:#92651A}
.benefit .t{font-size:1.08rem;font-weight:700;color:#1e293b;margin:6px 0 8px;line-height:1.5}
.benefit .d{font-size:.9rem;color:#475569;line-height:1.9}

.flow-tips{max-width:760px;margin:0 auto;padding:0 24px;display:grid;gap:14px}
.tip{display:flex;gap:16px;align-items:flex-start;background:#faf8f4;border:1px solid #efe9dd;border-radius:12px;padding:20px 22px}
.tip .num{width:34px;height:34px;border-radius:50%;background:#92651A;color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.9rem}
.tip .t{font-size:.98rem;font-weight:700;color:#1e293b;line-height:1.5}
.tip .d{font-size:.86rem;color:#64748b;line-height:1.8;margin-top:4px}

/* CTA（記事末の無料診断導線） */
.flow-cta{background:#1e293b;color:#fff;text-align:center;padding:64px 24px}
.flow-cta h2{font-size:1.4rem;font-weight:700;line-height:1.5;margin-bottom:14px}
.flow-cta p{font-size:.92rem;color:rgba(255,255,255,.8);line-height:1.9;margin-bottom:28px}
.flow-cta .btn{display:inline-block;background:#92651A;color:#fff;text-decoration:none;font-weight:700;padding:.95rem 2.2rem;border-radius:999px;font-size:.98rem}
.flow-cta .sub-link{display:block;margin-top:16px;color:rgba(255,255,255,.7);font-size:.82rem;text-decoration:underline}

/* 記事末：他の記事への回遊（任意） */
.article-more{max-width:760px;margin:0 auto;padding:48px 24px 8px}
.article-more .lead{font-size:.8rem;font-weight:700;letter-spacing:.14em;color:#92651A;text-align:center;margin-bottom:18px}
.article-more a{display:block;background:#fff;border:1px solid #ece7dd;border-radius:12px;padding:16px 20px;text-decoration:none;color:#1e293b;font-weight:700;font-size:.95rem;margin-bottom:10px}
.article-more a span{display:block;font-weight:400;font-size:.8rem;color:#94a3b8;margin-top:4px}

@media (max-width:640px){
  .flow-cards,.card3,.compare{grid-template-columns:1fr}
  /* スマホは本文幅を広げる。外側(.article-body)の左右28px＋内側の二重余白を詰めて 合計 約12px に。
     各記事のインラインstyleより後勝ちさせるため !important。 */
  .article-body{padding-left:12px !important;padding-right:12px !important}
  .lf-body,.blog-list,.flow-cards,.card3,.compare,.flow-benefits,.flow-tips,.field4,.core6{padding-left:0 !important;padding-right:0 !important}
  .flow-cta{padding-left:16px !important;padding-right:16px !important}
}

/* 記事内の図版（本文と同じ幅・角丸・キャプション付き） */
.lf-fig{max-width:680px;margin:34px auto;padding:0 24px}
.lf-fig img{width:100%;height:auto;display:block;border-radius:12px;box-shadow:0 8px 26px rgba(12,26,48,.12)}
.lf-fig figcaption{font-size:.78rem;color:#94a3b8;line-height:1.7;margin-top:10px;text-align:center}
@media(max-width:700px){.lf-fig{margin:26px auto;padding:0}.lf-fig img{border-radius:8px}}