/* ===== ブログ（記事ページ・記事一覧）専用スタイル =====
   本体の css/style.css を読み込んだうえで、このファイルを追加で読み込む。
   トップページの見た目は一切変えない（このファイルの中だけで完結させること）。
   色・書体は style.css の :root で決めた値をそのまま使う。 */

/* --- 共通の幅 --- */
/* 上部は固定ヘッダー（ロゴ＋サブリンクの2段・108px）に隠れないよう厚めに取る */
.blog-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(122px, 12vw, 150px) 20px 0;
}

/* --- パンくず（今どのページにいるか） --- */
.blog-crumb {
  font-family: var(--font-ja);
  font-size: 12px;
  color: #7c8794;
  padding: 18px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.blog-crumb a { color: #7c8794; text-decoration: none; }
.blog-crumb a:hover { color: var(--primary-blue); text-decoration: underline; }
.blog-crumb span[aria-current] { color: var(--text-heading); }

/* --- 記事の見出しまわり --- */
.blog-head { padding: 22px 0 0; }
.blog-kicker {
  display: inline-block;
  font-family: var(--font-ja);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--primary-blue);
  background: var(--bg-light);
  border-radius: 999px;
  padding: 5px 12px;
  margin-bottom: 14px;
}
.blog-title {
  font-family: var(--font-ja);
  font-size: clamp(23px, 3.2vw + 12px, 36px);
  font-weight: 700;
  line-height: 1.5;
  color: var(--text-heading);
  letter-spacing: .01em;
}
.blog-lead {
  font-family: var(--font-ja);
  font-size: 16px;
  line-height: 1.95;
  color: var(--text-body);
  margin-top: 18px;
  padding: 16px 18px;
  background: var(--bg-light);
  border-radius: 8px;
}
.blog-lead strong { color: var(--text-heading); }

/* 更新日・書いた人（AIと検索エンジンが読む場所でもある） */
.blog-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 16px;
  font-family: var(--font-ja);
  font-size: 12.5px;
  color: #7c8794;
}
.blog-meta .by { color: var(--text-heading); font-weight: 700; }

/* --- 目次 --- */
.blog-toc {
  margin: 26px 0 0;
  border: 1px solid #e3e9f2;
  border-radius: 10px;
  padding: 16px 18px;
}
.blog-toc h2 {
  font-family: var(--font-ja);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--text-heading);
  margin-bottom: 10px;
}
.blog-toc ol { list-style: none; counter-reset: toc; display: flex; flex-direction: column; gap: 8px; }
.blog-toc li { counter-increment: toc; position: relative; padding-left: 26px; }
.blog-toc li::before {
  content: counter(toc);
  position: absolute; left: 0; top: 1px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--bg-light); color: var(--primary-blue);
  font-family: var(--font-en); font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.blog-toc a {
  font-family: var(--font-ja); font-size: 14px; line-height: 1.7;
  color: var(--text-body); text-decoration: none;
}
.blog-toc a:hover { color: var(--primary-blue); text-decoration: underline; }

/* --- 本文 --- */
.blog-body { padding: 6px 0 0; }
.blog-body h2 {
  font-family: var(--font-ja);
  font-size: clamp(19px, 1.2vw + 15px, 25px);
  font-weight: 700;
  line-height: 1.55;
  color: var(--text-heading);
  margin: 46px 0 18px;
  padding-left: 14px;
  border-left: 5px solid var(--primary-blue);
  scroll-margin-top: 120px;
}
.blog-body h3 {
  font-family: var(--font-ja);
  font-size: clamp(17px, .7vw + 14px, 20px);
  font-weight: 700;
  line-height: 1.6;
  color: var(--text-heading);
  margin: 34px 0 14px;
  scroll-margin-top: 120px;
}
.blog-body p {
  font-family: var(--font-ja);
  font-size: 16px;
  line-height: 2.0;
  color: var(--text-dark);
  margin-bottom: 18px;
}
.blog-body strong { font-weight: 700; color: var(--text-heading); }
.blog-body a { color: var(--primary-blue); }

.blog-body ul, .blog-body ol { margin: 0 0 22px; padding-left: 0; list-style: none; }
.blog-body ul li, .blog-body ol li {
  font-family: var(--font-ja);
  font-size: 16px;
  line-height: 1.95;
  color: var(--text-dark);
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
}
.blog-body ul li::before {
  content: "";
  position: absolute; left: 8px; top: 13px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--light-blue);
}
.blog-body ol { counter-reset: n; }
.blog-body ol li { counter-increment: n; }
.blog-body ol li::before {
  content: counter(n);
  position: absolute; left: 0; top: 4px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--primary-blue); color: #fff;
  font-family: var(--font-en); font-size: 11.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* 段階・手順を並べるときの囲み */
.blog-steps {
  margin: 0 0 22px;
  border: 1px solid #e3e9f2;
  border-radius: 10px;
  overflow: hidden;
}
.blog-steps li {
  display: flex; align-items: baseline; gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #eef2f8;
  margin: 0;
}
.blog-steps li:last-child { border-bottom: none; }
/* 「第1段階」の札を出すので、丸数字は消す（.blog-body ol li::before より強く指定する） */
.blog-body ol.blog-steps li::before { display: none; content: none; }
.blog-steps .n {
  flex: none;
  font-family: var(--font-ja); font-size: 11.5px; font-weight: 700;
  color: var(--primary-blue); background: var(--bg-light);
  border-radius: 4px; padding: 3px 8px;
}
.blog-steps .t { font-family: var(--font-ja); font-size: 16px; font-weight: 700; color: var(--text-heading); line-height: 1.7; }

/* 引用・注意書き */
.blog-note {
  margin: 30px 0 0;
  padding: 14px 16px;
  background: #f7f8fa;
  border-radius: 8px;
  font-family: var(--font-ja);
  font-size: 13px;
  line-height: 1.85;
  color: #6b7684;
}

/* 記事末のCTA */
.blog-cta {
  margin: 44px 0 0;
  padding: 26px 20px;
  background: var(--bg-light);
  border-radius: 12px;
  text-align: center;
}
.blog-cta h2 {
  font-family: var(--font-ja); font-size: 19px; font-weight: 700;
  color: var(--text-heading); line-height: 1.6; margin-bottom: 10px;
}
.blog-cta p {
  font-family: var(--font-ja); font-size: 14.5px; line-height: 1.9;
  color: var(--text-body); margin-bottom: 18px;
}
.blog-cta-btn {
  display: inline-block;
  background: var(--orange-cta); color: #fff;
  font-family: var(--font-ja); font-size: 16px; font-weight: 700;
  text-decoration: none;
  padding: 15px 34px; border-radius: 999px;
  box-shadow: 0 4px 12px rgba(255,153,0,.28);
  transition: transform .15s, box-shadow .15s;
}
.blog-cta-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(255,153,0,.34); }

/* 書いた人 */
.blog-author {
  margin: 40px 0 0;
  padding: 20px;
  border: 1px solid #e3e9f2;
  border-radius: 12px;
  display: flex; gap: 16px; align-items: flex-start;
}
.blog-author img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; }
.blog-author .nm { font-family: var(--font-ja); font-size: 16px; font-weight: 700; color: var(--text-heading); }
.blog-author .rl { font-family: var(--font-ja); font-size: 12.5px; color: #7c8794; margin: 3px 0 8px; }
.blog-author .tx { font-family: var(--font-ja); font-size: 13.5px; line-height: 1.85; color: var(--text-body); }

/* 関連記事 */
.blog-related { margin: 40px 0 0; }
.blog-related h2 {
  font-family: var(--font-ja); font-size: 15px; font-weight: 700;
  letter-spacing: .06em; color: var(--text-heading); margin-bottom: 14px;
}

/* --- 記事カード（一覧・関連で共通） --- */
.blog-cards { display: flex; flex-direction: column; gap: 14px; }
.blog-card {
  display: block;
  border: 1px solid #e3e9f2;
  border-radius: 12px;
  padding: 20px;
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
  background: #fff;
}
.blog-card:hover {
  border-color: var(--light-blue);
  box-shadow: 0 6px 18px rgba(6,98,206,.08);
  transform: translateY(-1px);
}
.blog-card .ttl {
  display: block;
  font-family: var(--font-ja); font-size: 17px; font-weight: 700;
  line-height: 1.6; color: var(--text-heading);
}
.blog-card .ex {
  display: block;
  font-family: var(--font-ja); font-size: 14px; line-height: 1.85;
  color: var(--text-body); margin-top: 10px;
}
.blog-card .mt {
  display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center;
  margin-top: 12px; font-family: var(--font-ja); font-size: 12px; color: #7c8794;
}
.blog-card .tag {
  color: var(--primary-blue); background: var(--bg-light);
  border-radius: 999px; padding: 3px 10px; font-weight: 700;
}

/* --- 一覧ページの冒頭 --- */
.blog-index-head { padding: 26px 0 4px; }
.blog-index-head h1 {
  font-family: var(--font-ja);
  font-size: clamp(22px, 2.4vw + 13px, 32px);
  font-weight: 700; line-height: 1.5; color: var(--text-heading);
}
.blog-index-head p {
  font-family: var(--font-ja); font-size: 15px; line-height: 1.95;
  color: var(--text-body); margin-top: 14px;
}

/* 一覧・記事の下側の余白 */
.blog-section { padding-bottom: 56px; }

@media (max-width: 767px) {
  .blog-wrap { padding: 122px 16px 0; }
  .blog-body p, .blog-body ul li, .blog-body ol li { font-size: 15.5px; }
  .blog-author { flex-direction: column; gap: 12px; }
}

/* ===== 記事内の表（2026-09-03 追加。狭い画面でも読めるよう横スクロールを許可） ===== */
.blog-table {
  margin: 28px 0 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.blog-table table {
  border-collapse: collapse;
  width: 100%;
  min-width: 320px;
  font-family: var(--font-ja);
  font-size: 14px;
  line-height: 1.8;
}

.blog-table th,
.blog-table td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid #e7ebf0;
  vertical-align: top;
}

.blog-table th {
  background: #f3f6fa;
  font-weight: 700;
  color: #33415c;
  font-size: 13px;
}

.blog-table td:first-child {
  font-weight: 700;
  color: #33415c;
}

.blog-table tr:last-child td {
  border-bottom: none;
}

@media (max-width: 560px) {
  .blog-table table { font-size: 14px; }
  .blog-table th,
  .blog-table td { padding: 10px 9px; }
}

/* =====================================================================
   記事内の図解（2026-09-03 追加・案B）
   画像ではなくHTML/CSSで作る。理由は3つ。
     1. 図の中の文字が、検索エンジンとAIに読まれる（画像だと読まれない）
     2. スマホで拡大しなくても読める・崩れない
     3. あとから数字（50人・14日など）を文字で直せる
   色はサイトの見出し色 --text-heading（紺）と、期限を示す赤で統一している。
   ===================================================================== */

.blog-fig {
  margin: 30px 0 0;
  padding: 20px 18px 22px;
  background: #f7f9fc;
  border: 1px solid #e3e9f2;
  border-radius: 10px;
}

.blog-fig-title {
  font-family: var(--font-ja);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text-heading);
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e3e9f2;
}

.blog-fig-note {
  font-family: var(--font-ja);
  font-size: 12.5px;
  line-height: 1.8;
  color: #7c8794;
  margin: 14px 0 0;
}

/* ---- 図: 手順の流れ ---- */
.fig-flow { display: flex; flex-direction: column; }

.fig-flow-step {
  display: grid;
  grid-template-columns: 32px 1fr;
  column-gap: 13px;
  position: relative;
  padding-bottom: 18px;
}

.fig-flow-step:last-child { padding-bottom: 0; }

.fig-flow-step::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 32px;
  bottom: 0;
  width: 2px;
  background: #d9e1ee;
}

.fig-flow-step:last-child::before { display: none; }

.fig-flow-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--text-heading);
  color: var(--white);
  display: grid;
  place-items: center;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 14px;
  position: relative;
  z-index: 1;
}

.fig-flow-step--deadline .fig-flow-num { background: #a4484a; }

.fig-flow-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 3px;
  font-family: var(--font-ja);
}

.fig-flow-t { font-weight: 700; font-size: 15px; line-height: 1.6; color: #33415c; }
.fig-flow-d { font-size: 13px; line-height: 1.8; color: #7c8794; }

.fig-deadline {
  align-self: flex-start;
  font-size: 12px;
  font-weight: 700;
  color: #a4484a;
  background: #fbf0f0;
  border: 1px solid #dcb4b4;
  border-radius: 4px;
  padding: 2px 9px;
  margin-top: 3px;
  letter-spacing: .02em;
}

/* ---- 図: 人数の数え方 ---- */
.fig-count {
  border: 1.5px solid var(--text-heading);
  border-radius: 10px;
  padding: 15px 14px 17px;
  background: var(--white);
  font-family: var(--font-ja);
}

.fig-count-head {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--text-heading);
  text-align: center;
  margin: 0 0 12px;
}

.fig-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.fig-chip {
  font-size: 13px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 20px;
  background: #eaf0f8;
  color: var(--text-heading);
  white-space: nowrap;
}

.fig-chip--note { background: #fbf0f0; color: #a4484a; }

.fig-count-sum {
  text-align: center;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.7;
  color: #33415c;
  margin: 14px 0 0;
  padding-top: 13px;
  border-top: 1px dashed #d9e1ee;
}

.fig-count-sum em { font-style: normal; color: #a4484a; }

/* ---- 図: 費用が決まる要素 ---- */
.fig-factors { display: flex; flex-direction: column; gap: 17px; font-family: var(--font-ja); }
.fig-factor { display: flex; flex-direction: column; gap: 7px; }
.fig-factor-t { font-size: 14px; font-weight: 700; color: #33415c; margin: 0; }

.fig-factor-bar {
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(to right, #dce7f5, var(--text-heading));
}

.fig-factor-ends {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  line-height: 1.6;
  color: #7c8794;
}

.fig-factor-ends span:last-child { text-align: right; }

/* ---- 図: 費用の比較 ---- */
.fig-compare { display: flex; flex-direction: column; gap: 15px; font-family: var(--font-ja); }
.fig-cmp-row { display: flex; flex-direction: column; gap: 6px; }
.fig-cmp-t { font-size: 13.5px; font-weight: 700; color: #33415c; margin: 0; }

.fig-cmp-bar {
  display: flex;
  height: 38px;
  border-radius: 6px;
  overflow: hidden;
}

.fig-cmp-seg {
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--white);
  text-align: center;
  line-height: 1.35;
  padding: 0 4px;
}

.fig-cmp-seg--base { background: var(--text-heading); }
.fig-cmp-seg--fee { background: #a4484a; }

@media (max-width: 560px) {
  .blog-fig { padding: 17px 14px 19px; }
  .fig-chip { font-size: 12.5px; padding: 5px 10px; }
  .fig-cmp-seg { font-size: 11.5px; }
}

/* ===== 記事冒頭の絵（2026-09-03 追加）=====
   1記事に1枚だけ、題名の下に置く。本文中には入れない（本文は図解で見せる）。
   画像は images/差し込みデータ/イラスト/blog-*.png（幅720px・色数を減らした軽量版。原本は l*.png）。 */
.blog-eyecatch {
  width: min(100%, 400px);
  margin: 28px auto 0;
}

.blog-eyecatch img {
  display: block;
  width: 100%;
  height: auto;
}