/* 記事ページ用（/article.css）。/style.css の後に読み込む。LP_BA の style.css は書き換えない。
   変数 --ink --ink-sub --wood --wood-light --tint --card --serif --numeral は style.css のものを使う。 */

.mast__home { color: inherit; text-decoration: none; }

.art { padding: 36px 0 72px; }
.art__in { max-width: 760px; margin: 0 auto; padding: 0 20px; }
.art p { margin-bottom: 1.1em; }
.art a { color: var(--wood); text-underline-offset: 3px; }
.art a:hover { color: var(--ink); }
.art strong { color: var(--ink); }

.crumb { font-size: 12.5px; color: var(--ink-sub); margin-bottom: 22px; }
.crumb a { color: var(--ink-sub); }

.art__head { margin-bottom: 28px; }
.art h1 { font-size: clamp(27px, 7.2vw, 42px); line-height: 1.35; letter-spacing: 0; margin-bottom: 10px; }
.art__sub { font-family: var(--serif); font-weight: 800; font-size: clamp(16px, 4.2vw, 20px); color: var(--wood); margin-bottom: 8px !important; }
.art__meta { font-size: 12.5px; color: var(--ink-sub); margin-bottom: 0 !important; }
.art__lead { font-size: 17px; }

.toc { margin: 28px 0 8px; padding: 18px 20px; background: var(--card); border: 1px solid var(--ink); }
.toc__t { font-family: var(--serif); font-weight: 800; margin-bottom: 8px !important; }
.toc ol { list-style: decimal; padding-left: 1.4em; }
.toc li { font-size: 15px; line-height: 1.9; }

.art h2 { font-size: clamp(23px, 6vw, 32px); line-height: 1.4; margin: 56px 0 16px; padding-top: 26px; border-top: 2px solid var(--ink); }
.art h3 { font-size: clamp(18px, 4.6vw, 21px); line-height: 1.5; font-weight: 800; margin: 30px 0 10px; }

.art__list { margin: 0 0 1.2em; }
.art__list li { position: relative; padding: 8px 0 8px 18px; font-size: 15.5px; line-height: 1.85; border-bottom: 1px solid #d7cfbf; }
.art__list li::before { content: ""; position: absolute; left: 2px; top: 1.1em; width: 7px; height: 7px; background: var(--wood); border-radius: 50%; }

/* 3つの方法の早見 */
.sum { display: grid; gap: 14px; margin: 8px 0 12px; }
.sum > li { background: var(--card); border: 1px solid var(--ink); padding: 16px 18px 6px; }
.sum__no { font-family: var(--numeral); font-style: italic; color: var(--wood); font-size: 14px; letter-spacing: .12em; margin: 0 0 2px !important; }
.art .sum h3 { margin: 0 0 8px; }
.sum dl > div { padding: 8px 0 10px; border-top: 1px solid #d7cfbf; }
.sum dt { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; color: var(--wood); }
.sum dd { font-size: 14.5px; line-height: 1.75; color: var(--ink-sub); }

/* 当サービスの内容 */
.svc { margin: 12px 0 24px; border-top: 2px solid var(--ink); }
.svc > div { padding: 14px 0 16px; border-bottom: 1px solid var(--ink); }
.svc dt { font-family: var(--serif); font-weight: 800; font-size: 17px; margin-bottom: 2px; }
.svc dd { font-size: 15px; line-height: 1.85; color: var(--ink-sub); }

/* 作例（前後） */
.pair { display: grid; gap: 22px; margin: 26px 0 8px; }
.pair figure { margin: 0; }
.pair img { width: 100%; height: auto; border: 1px solid var(--ink); background: var(--card); }
.pair figcaption { padding-top: 8px; font-size: 13.5px; color: var(--ink-sub); }

.src li { padding: 6px 0; font-size: 14px; line-height: 1.8; word-break: break-all; border-bottom: 1px solid #d7cfbf; }

@media (min-width: 760px) {
  .art { padding: 56px 0 104px; }
  .art__in { padding: 0 40px; }
  .art p, .art__list li { font-size: 17px; }
  .art__list li { font-size: 16.5px; }
  .sum { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .sum > li { border-right-width: 0; }
  .sum > li:last-child { border-right-width: 1px; }
  .art__in { max-width: 860px; }
  .pair { grid-template-columns: 1fr 1fr; gap: 20px; }
  .svc > div { display: grid; grid-template-columns: 9em 1fr; gap: 20px; }
  .svc dd { font-size: 16px; }
}