@charset "UTF-8";
/* =========================================================
   コラム記事ページ用。style.css(記事の中身) → parts.css → このファイル → guide-frame.css(全ページ共通のヘッダー・フッター) の順に読む
   ホームと同じ見た目(色・角の丸み・左のコラム一覧のカード)にそろえ、
   souzoku-soleil.jp のように余白で読ませる。文字は本文20px・一番小さいところでも14px
   ========================================================= */

body { font-size: 20px; letter-spacing: .05em; }

/* ---------- 記事の上(タイトルと写真) ---------- */
.crumb-band .wrap { padding-top: 20px; padding-bottom: 4px; }
.article-hero { border-bottom: 0; }
.article-hero .wrap { padding-top: 32px; padding-bottom: 32px; }
.article-hero h1.title { line-height: 1.55; letter-spacing: .05em; }

/* ---------- 3列の並び(左：目次とコラム一覧／中：本文／右：相談) ---------- */
.layout { padding-top: 56px; padding-bottom: 150px; }
@media (min-width: 1400px) {
  .layout { gap: 56px; }
}

/* ---------- 本文：余白で読ませる ---------- */
article p { font-size: 20px; line-height: 2.05; margin-bottom: 32px; }
article section { padding-top: 120px; }
article section > h2 { margin-bottom: 48px; }
article h3 { margin-top: 64px; margin-bottom: 24px; }
article ul.plain, article ol.plain { margin-bottom: 36px; }
article .table-wrap, article .example, article .point-box, article .step-cards, article .faq-box { margin-top: 40px; margin-bottom: 40px; }
@media (min-width: 701px) { .summary { padding-top: 36px; padding-bottom: 32px; } }
.dc { margin-top: 64px; }
.toc-acc { margin-top: 64px; }
.related { margin-top: 120px; }
.author { margin-top: 120px; }
.mid-banner, .inline-cta { margin-top: 64px; margin-bottom: 64px; }

/* ---------- 左の欄：ホームの左のコラム一覧と同じカード ---------- */
.left-box, .left-col .side-toc-box { border: 1px solid var(--g-line); border-radius: var(--radius); background: #fff; box-shadow: 0 10px 30px rgba(20,74,52,.08); }
.left-col .side-toc-title, .left-box .side-box-title { padding-bottom: 10px; border-left: 0; border-bottom: 3px solid var(--g-700); font-size: 20px; letter-spacing: .08em; color: var(--g-900); }
.left-list li + li { border-top: 1px dashed var(--g-line); }
.left-list a { position: relative; padding-right: 22px; font-size: 17px; font-weight: 500; color: var(--g-700); }
.left-list a::after { content: ""; position: absolute; right: 4px; top: 50%; width: 8px; height: 8px; margin-top: -5px; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(-45deg); }
.left-list a:hover { text-decoration: none; color: var(--g-900); background: var(--g-50); }
.left-list .is-current a { border-left: 4px solid var(--g-700); background: var(--g-50); color: var(--g-900); }

/* ---------- 右の欄：ホームと同じ相談バナー(文字で組んだもの)＋監修など ---------- */
.side-col .h-side-in { width: 100%; }
.side-box { border-color: var(--g-line); border-radius: var(--radius); }
.side-box-title { color: var(--g-900); border-left-color: var(--g-700); }

@media (max-width: 1023px) {
  .layout { padding-top: 32px; padding-bottom: 104px; }
  article section { padding-top: 96px; }
}
@media (max-width: 700px) {
  body { padding-bottom: 64px; }
  .layout { padding-top: 20px; }
  article section { padding-top: 80px; }
  article section > h2 { margin-bottom: 36px; }
  article p { margin-bottom: 28px; }
  /* 関連記事の一覧が中身の幅で枠を押し広げ、小さいスマホでページが横に動くのを防ぐ */
  .related-list { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================
   souzoku-soleil.jp の記事ページに寄せる(10/26)
   色の面や箱を減らし、白地に細い線と緑の差し色だけで区切る
   ========================================================= */
/* タイトル部分：緑のカードをやめて白地に。小さな分類名＋緑のタイトル、右に小さな写真、下に細い線 */
.article-hero .wrap::before { display: none; }
.article-hero .kicker, .ah-top .kicker { display: inline-flex; align-items: center; gap: 10px; padding: 0; border-radius: 0; background: none; color: var(--g-700); font-size: 16px; letter-spacing: .12em; }
.ah-top .kicker::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.ah-top { font-size: 15px; gap: 6px 20px; }
.article-hero h1.title { color: var(--g-900); }
@media (min-width: 1024px) {
  .article-hero .wrap { grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: center; padding-top: 48px; padding-bottom: 48px; border-bottom: 1px solid var(--border); }
  .article-hero .article-head { padding: 0; }
  .article-hero h1.title { font-size: 38px; line-height: 1.5; }
  .article-hero .eyecatch { display: block; }
  .article-hero .eyecatch img { height: auto; min-height: 0; aspect-ratio: 3 / 2; border: 0; border-radius: 4px; -webkit-mask-image: none; mask-image: none; }
}

/* 章の見出し：面をやめ、「1.」の番号付きの文字＋細い灰色の線、左だけ短い緑の線 */
article section > h2 { position: relative; min-height: 0; padding: 0 0 18px; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: none; font-size: 30px; line-height: 1.55; color: var(--g-900); }
article section > h2::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 64px; height: 3px; background: var(--g-700); }
article section > h2 .h2-num { position: static; transform: none; margin: 0 .35em 0 0; font-size: inherit; color: var(--g-700); }
article section > h2 .h2-num::before { content: none; display: none; }

/* 小見出し：左に細い緑の縦線だけ */
article h3 { padding: 2px 0 2px 16px; border: 0; border-left: 3px solid var(--g-700); border-radius: 0; background: none; font-size: 23px; color: var(--g-900); }

/* この記事でわかること・目次：面をやめて細い線の枠 */
.summary { background: #fff; border: 1px solid var(--border); border-radius: 4px; }
.toc-acc { border: 1px solid var(--border); border-radius: 4px; }

/* 左の欄：カードをやめ、細い線で区切った一覧に(ソレイユの「もくじ」と同じ) */
.left-box, .left-col .side-toc-box { padding: 18px 0 8px; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: none; box-shadow: none; }
.left-col .side-toc-title, .left-box .side-box-title { margin-bottom: 8px; padding: 0 0 12px; border: 0; border-bottom: 1px solid var(--border); font-size: 17px; color: var(--g-900); }
.left-col .side-toc li a { border-bottom: 1px solid var(--border); }
.left-col .side-toc li a b { width: auto; height: auto; min-width: 1.8em; border-radius: 0; background: none; color: var(--g-700); font-size: 15px; font-weight: 700; }
.left-col .side-toc li a.is-active { background: var(--g-50); }
.left-list li + li { border-top: 1px solid var(--border); }
.left-list .is-current a { border-left: 3px solid var(--g-700); }

@media (max-width: 700px) {
  article section > h2 { font-size: 23px; padding-bottom: 14px; }
  article h3 { font-size: 20px; }
}

/* スマホで「この記事でわかること」を途中まで見せるときの薄い覆いも、白地に合わせる */
.summary.is-folded::after { background: linear-gradient(rgba(255,255,255,0), #fff 70%); }