/* =========================================================
   CTA・関連記事・著者欄・チェック欄など記事内の共通部品
========================================================= */

/* =========================================================
   Theme Component Library: StartFrom39
File: assets/css/article-components.css
Version: 1.3.0
Updated: 2026-09-21
Purpose: 投稿記事で使用する共通UI・CTA・関連記事・互換スタイルを一元管理

FILE MAP
01–05  記事本文・リード・見出し・要約・目次
06–16  ポイント・チェック・注意・リスト・番号カード・会話・計算
17–23  ステップ・フロー・表・結論・FAQ・免責事項
24–25  CTA・おすすめ導線
26–30  共通ボックス・記事幅・基本レスポンシブ
31      関連記事用の編集リンクカード
32      自分株式会社シリーズ・ワークシート
33      カテゴリー関連記事リンク
34      旧記事互換コンポーネント
35      レスポンシブ・ホバー指定（ファイル末尾へ集約）

管理上の注意
- カテゴリートップ専用CSSは含みません。
- .sf-jc-series / .sf-jc-roadmap は既存記事との互換性維持のため収録しています。
- 同じクラスを追加修正するときは、末尾へ追記せず該当セクションを編集してください。
========================================================= */

/* =========================================================
   01. ARTICLE BASE
========================================================= */

.sf-article {
  max-width: 720px;

  margin: 0 auto;
  padding: 20px;

  color: var(--sf-text);

  font-size: 16px;
  line-height: 1.9;
}

.sf-article *,
.sf-article *::before,
.sf-article *::after {
  box-sizing: border-box;
}

.sf-article p {
  margin: 0 0 20px;
}

.sf-article p:last-child {
  margin-bottom: 0;
}

.sf-article a {
  text-underline-offset: 3px;
}

.sf-article strong {
  color: #193f37;

  font-weight: 700;
}

.sf-article__body {
  width: 100%;
}

.sf-article__section {
  margin: 0 0 50px;
}

/* =========================================================
   02. LEAD
========================================================= */

.sf-article__lead,
.sf-lead {
  margin: 0 0 30px;

  color: #3d4542;

  font-size: 18px;
  line-height: 1.95;
  letter-spacing: 0.02em;
}

/* =========================================================
   03. C案：見出しH1〜H6
========================================================= */
.sf-article h1 {
  font-size: 24px;
  line-height: 1.55;
  color: #193f37;
  margin: 36px 0 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #a58c50;
}
.sf-article h1::after {
  content: none;
}
.sf-article h2:not([class$="title"]):not([class$="__title"]):not(.sf-faq-question) {
  font-size: 25px;
  padding: 0 0 14px 20px;
  margin: 50px 0 24px;
  border: 0;
  border-bottom: 1px solid #a58c50;
  background: none;
  border-radius: 0;
  color: #193f37;
  position: relative;
  line-height: 1.6;
  font-weight: 700;
}
.sf-article h2:not([class$="title"]):not([class$="__title"]):not(.sf-faq-question)::after {
  content: none;
}
.sf-article h2:not([class$="title"]):not([class$="__title"]):not(.sf-faq-question)::before {
  content: "";
  position: absolute;
  left: 0;
  top: .28em;
  width: 8px;
  height: 20px;
  background: #b65e42;
  border: 0;
  border-radius: 0;
}
.sf-article h3:not([class$="title"]):not([class$="__title"]):not(.sf-faq-question) {
  font-size: 21px;
  padding: 0 0 10px 22px;
  margin: 32px 0 18px;
  border: 0;
  border-bottom: 1px solid #e2d8c1;
  color: #193f37;
  position: relative;
  line-height: 1.6;
  font-weight: 700;
}
.sf-article h3:not([class$="title"]):not([class$="__title"]):not(.sf-faq-question)::after {
  content: none;
}
.sf-article h3:not([class$="title"]):not([class$="__title"]):not(.sf-faq-question)::before {
  content: "";
  position: absolute;
  left: 0;
  top: .2em;
  width: 3px;
  height: 19px;
  background: #b86f60;
  border: 0;
  border-radius: 0;
  transform: none;
}
.sf-article h4:not([class$="title"]):not([class$="__title"]):not(.sf-faq-question) {
  font-size: 19px;
  padding: 10px 14px;
  margin: 26px 0 16px;
  background: #edf2eb;
  border-left: 4px solid #819b85;
  border-bottom: 0;
  color: #193f37;
  position: relative;
  line-height: 1.6;
  font-weight: 700;
}
.sf-article h4:not([class$="title"]):not([class$="__title"]):not(.sf-faq-question)::after {
  content: none;
}
.sf-article h5:not([class$="title"]):not([class$="__title"]):not(.sf-faq-question) {
  font-size: 18px;
  padding-left: 18px;
  margin: 24px 0 14px;
  color: #193f37;
  position: relative;
  line-height: 1.6;
  font-weight: 700;
}
.sf-article h5:not([class$="title"]):not([class$="__title"]):not(.sf-faq-question)::after {
  content: none;
}
.sf-article h5:not([class$="title"]):not([class$="__title"]):not(.sf-faq-question)::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: 8px;
  height: 8px;
  background: #193f37;
  border: 0;
  border-radius: 0;
}
.sf-article h6:not([class$="title"]):not([class$="__title"]):not(.sf-faq-question) {
  font-size: 17px;
  padding: 2px 0 2px 13px;
  margin: 22px 0 12px;
  border-left: 1px solid #a58c50;
  color: #193f37;
  position: relative;
  line-height: 1.6;
  font-weight: 700;
}
.sf-article h6:not([class$="title"]):not([class$="__title"]):not(.sf-faq-question)::after {
  content: none;
}
.sf-article :is(.sf-heading-number,.sf-section-number,.sf-h2-number) {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  min-height: 42px;
  margin-right: 14px;
  background: #b65e42;
  color: #fffaf0;
  font-size: 21px;
  border-radius: 2px;
}

/* =========================================================
   04. ARTICLE SUMMARY
========================================================= */

.sf-article__summary {
  margin: 30px 0 38px;
  padding: 24px 26px;

  border: 1px solid #dfe8e5;
  border-radius: 12px;
  background: #f7fbfa;
}

.sf-article__summary-title {
  margin: 0 0 15px !important;
  padding: 0 !important;

  border: 0 !important;
  background: none !important;
  color: var(--sf-green-dark) !important;

  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.6 !important;
}

.sf-article__summary-title::after {
  display: none !important;
}

.sf-article__summary-list {
  margin: 0 !important;
  padding: 0 !important;

  list-style: none !important;
}

.sf-article__summary-list li {
  position: relative;

  margin: 0 0 8px !important;
  padding-left: 24px;
}

.sf-article__summary-list li:last-child {
  margin-bottom: 0 !important;
}

.sf-article__summary-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;

  color: var(--sf-green);

  font-weight: 700;
}

/* =========================================================
   05. TOC
========================================================= */

.sf-toc {
  margin: 38px 0 50px;
  padding: 26px 28px;

  border: 1px solid #e1e6e3;
  border-radius: 12px;
  background: #fff;
}

.sf-toc-title {
  margin: 0 0 15px !important;

  color: var(--sf-green-dark);

  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.sf-toc__list {
  margin: 0 !important;
  padding: 0 !important;

  list-style: none !important;
  counter-reset: sf-toc;
}

.sf-toc__list li {
  position: relative;

  margin: 0 !important;
  padding: 10px 0 10px 34px;

  border-bottom: 1px solid #efefec;

  counter-increment: sf-toc;
}

.sf-toc__list li:last-child {
  border-bottom: 0;
}

.sf-toc__list li::before {
  content: counter(sf-toc, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 10px;

  color: var(--sf-gold);

  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
}

.sf-toc__list a {
  color: #35423f;

  text-decoration: none;
}

.sf-toc__list a:hover {
  color: var(--sf-green);
}

/* =========================================================
   06. COMMON BOX BASE
========================================================= */

.sf-point-box,
.sf-check-box,
.sf-alert-box,
.sf-recommend-box,
.sf-merit-box,
.sf-demerit-box,
.sf-notice-box,
.sf-empathy-box,
.sf-caution-box,
.sf-message-box,
.sf-conversation-box,
.sf-example-box,
.sf-note-box,
.sf-formula-box,
.sf-calculation-box {
  margin: 30px 0;

  line-height: 1.8;
}

.sf-point-box,
.sf-check-box,
.sf-alert-box,
.sf-recommend-box,
.sf-merit-box,
.sf-demerit-box,
.sf-notice-box,
.sf-empathy-box {
  padding: 22px;

  border-radius: 10px;
  box-shadow: var(--sf-shadow);
}

.sf-box-title,
.sf-check-box-title,
.sf-point-title,
.sf-caution-title {
  margin: 0 0 12px;

  font-size: 16px;
  font-weight: 900;
  line-height: 1.6;
  letter-spacing: 0.04em;
}

/* =========================================================
   07. POINT BOX
========================================================= */

.sf-point-box {
  border-left: 4px solid #b08a55;
  background: #f9f1e5;
}

.sf-point-box .sf-box-title,
.sf-point-title {
  color: #fffaf0;

  background: #b65e42;

  margin: -22px -24px 20px;

  padding: 11px 24px;

  font-size: 17px;

  border: 0;

  border-radius: 2px 2px 0 0;

  line-height: 1.6;
}

.sf-point-box ul {
  margin: 0 !important;
  padding: 0 !important;

  list-style: none !important;
}

.sf-point-box li {
  position: relative;

  margin: 0 0 8px !important;
  padding-left: 26px;

  font-size: 15px;
  line-height: 1.7;
}

.sf-point-box li:last-child {
  margin-bottom: 0 !important;
}

.sf-point-box li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 3px;

  color: var(--sf-gold-soft);

  font-size: 13px;
  font-weight: 600;
}

/* =========================================================
   08. CHECK BOX
========================================================= */

.sf-check-box {
  border: 1px solid #9bad9c;
  background: #f7faf6;
}

.sf-check-box .sf-box-title,
.sf-check-box .sf-check-box-title {
  color: #fffaf0;

  background: #707d64;

  margin: -22px -24px 20px;

  padding: 11px 24px;

  font-size: 17px;

  border: 0;

  border-radius: 2px 2px 0 0;

  line-height: 1.6;
}

.sf-check-box ul,
.sf-check-box .sf-check-list {
  margin: 0 !important;
  padding: 0 !important;

  list-style: none !important;
}

.sf-check-box li {
  position: relative;

  margin: 0 0 9px !important;
  padding-left: 26px;

  font-size: 15px;
  line-height: 1.75;
}

.sf-check-box li:last-child {
  margin-bottom: 0 !important;
}

.sf-check-box li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 3px;

  color: #2f5f57;

  font-size: 14px;
  font-weight: 600;
}

/* =========================================================
   09. EMPATHY / ALERT / NOTICE / MERIT / DEMERIT
========================================================= */

.sf-empathy-box {
  border-left: 4px solid var(--sf-gold);
  background: #fff7e6;
  color: #5a4a1f;
}

.sf-empathy-box .sf-box-title {
  color: #9a7717;
}

.sf-alert-box {
  border-left: 4px solid #b86f60;
  background: #fcf0ec;
}

.sf-alert-box .sf-box-title {
  color: #b38c1e;
}

.sf-notice-box {
  border-left: 1px solid #dedbd2;

  background: #fff;
  color: #7a2c2c;

  padding: 22px 24px;

  border: 1px solid #dedbd2;

  border-radius: 3px;

  box-shadow: none;
}

.sf-notice-box .sf-box-title {
  color: #fffaf0;

  background: #a16a51;

  margin: -22px -24px 20px;

  padding: 11px 24px;

  font-size: 17px;

  border: 0;

  border-radius: 2px 2px 0 0;

  line-height: 1.6;
}

.sf-merit-box {
  border-left: 4px solid var(--sf-green);
  background: var(--sf-green-soft);
}

.sf-merit-box .sf-box-title {
  color: var(--sf-green);
}

.sf-demerit-box {
  border-left: 4px solid #2c3e50;
  background: #f1f4f8;
}

.sf-demerit-box .sf-box-title {
  color: #2c3e50;
}

.sf-merit-box ul,
.sf-demerit-box ul {
  margin: 0 !important;
  padding-left: 20px !important;
}

.sf-merit-box li,
.sf-demerit-box li {
  margin-bottom: 8px !important;
}

/* =========================================================
   10. LIST BOX
========================================================= */

.sf-list-box {
  margin: 30px 0;
  padding: 24px 26px;

  border: 1px solid #e3e6e3;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.035);
}

.sf-list-box__title {
  margin: 0 0 15px !important;
  padding: 0 0 11px !important;

  border-bottom: 1px solid #e8e5dc;
  color: var(--sf-green-dark) !important;

  font-size: 17px !important;
  font-weight: 800 !important;
  line-height: 1.6 !important;
}

.sf-list-box__title::before {
  display: none !important;
}

.sf-check-list,
.sf-simple-list {
  margin: 0 !important;
  padding: 0 !important;

  list-style: none !important;
}

.sf-list-box .sf-check-list li,
.sf-simple-list li {
  position: relative;

  margin: 0 0 9px !important;
  padding-left: 24px;
}

.sf-list-box .sf-check-list li:last-child,
.sf-simple-list li:last-child {
  margin-bottom: 0 !important;
}

.sf-list-box .sf-check-list li::before,
.sf-simple-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.72em;

  width: 7px;
  height: 7px;

  border-radius: 50%;
  background: var(--sf-gold);
}

/* =========================================================
   11. NUMBER CARD
   01 / 02 / 03 ... 共通
   PC・タブレット・スマホで横幅が潰れない最終版
========================================================= */

.sf-article .sf-number-card {
  display: flex !important;

  align-items: flex-start !important;
  gap: 24px !important;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  margin: 28px 0 !important;
  padding: 28px 30px !important;

  border: 1px solid var(--sf-border) !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.035) !important;

  writing-mode: horizontal-tb !important;
}

/* =========================================================
   番号
========================================================= */

.sf-article .sf-number-card > .sf-number {
  position: static !important;
  display: flex !important;

  flex: 0 0 56px !important;
  align-items: center !important;
  justify-content: center !important;

  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  height: 56px !important;
  min-height: 56px !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 1px solid var(--sf-gold) !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: #b68e24 !important;

  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;

  writing-mode: horizontal-tb !important;
}

/* =========================================================
   右側本文
========================================================= */

.sf-article .sf-number-card > .sf-number-content {
  display: block !important;

  flex: 1 1 0 !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  writing-mode: horizontal-tb !important;

  word-break: normal !important;

  overflow-wrap: anywhere;
}

/* =========================================================
   タイトル
========================================================= */

.sf-article .sf-number-card > .sf-number-content > h3,
.sf-article .sf-number-card h3 {
  position: static !important;
  display: block !important;

  width: 100% !important;
  max-width: none !important;

  margin: 2px 0 14px !important;
  padding: 0 !important;

  border: 0 !important;
  background: none !important;
  color: #163b36 !important;

  font-size: 19px !important;
  font-weight: 800 !important;
  line-height: 1.55 !important;
  letter-spacing: 0.01em !important;
  text-align: left !important;
  white-space: normal !important;
  word-break: keep-all !important;

  overflow-wrap: break-word !important;

  writing-mode: horizontal-tb !important;
}

/* =========================================================
   共通H3装飾を完全解除
========================================================= */

.sf-article .sf-number-card h3::before,
.sf-article .sf-number-card h3::after {
  display: none !important;
  content: none !important;
}

/* =========================================================
   本文
========================================================= */

.sf-article .sf-number-card > .sf-number-content > p,
.sf-article .sf-number-card .sf-number-content p {
  display: block !important;

  width: 100% !important;
  max-width: none !important;

  margin: 0 0 12px !important;
  padding: 0 !important;

  color: #444 !important;

  font-size: 15px !important;
  line-height: 1.9 !important;
  text-align: left !important;
  white-space: normal !important;
  word-break: normal !important;

  overflow-wrap: break-word !important;

  writing-mode: horizontal-tb !important;
}

.sf-article .sf-number-card .sf-number-content p:last-child {
  margin-bottom: 0 !important;
}

/* =========================================================
   注釈
========================================================= */

.sf-article .sf-number-card .sf-number-content .sf-note {
  margin-top: 12px !important;
  padding-top: 10px !important;

  border-top: 1px solid #eee8dc !important;
  color: #777 !important;

  font-size: 13px !important;
  line-height: 1.8 !important;
}

/* =========================================================
   TABLET
========================================================= */

/* =========================================================
   SMARTPHONE
========================================================= */

/* =========================================================
   VERY SMALL
========================================================= */

/* =========================================================
   12. FEATURE CARDS 01-06
   Magazine Style / Final
========================================================= */

.sf-feature-cards {
  display: flex;

  flex-direction: column;
  gap: 24px;

  margin: 36px 0 44px;
}

/* =========================================================
   CARD
========================================================= */

.sf-feature-card {
  position: relative;
  display: grid;

  grid-template-columns: 82px minmax(0, 1fr);
  gap: 28px;
  align-items: center;

  width: 100%;

  padding: 32px 36px;

  border: 1px solid rgba(32, 68, 55, 0.1);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(32, 68, 55, 0.045);

  overflow: hidden;
}

/* =========================================================
   NUMBER
========================================================= */

.sf-feature-card__number {
  position: relative;
  display: flex;

  align-items: center;
  justify-content: center;

  width: 64px;
  height: 64px;

  color: #b48b1f;

  font-family: Georgia, "Times New Roman", serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.03em;
}

/* =========================================================
   gold vertical line
========================================================= */

.sf-feature-card__number::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -18px;

  width: 1px;
  height: 72px;

  background: linear-gradient(
    180deg,
    rgba(212, 175, 55, 0.15),
    rgba(212, 175, 55, 0.85),
    rgba(212, 175, 55, 0.15)
  );

  transform: translateY(-50%);
}

/* =========================================================
   CONTENT
========================================================= */

.sf-feature-card__content {
  min-width: 0;

  padding-left: 6px;
}

/* =========================================================
   TITLE
========================================================= */

.sf-feature-card .sf-feature-card__title {
  position: relative;

  margin: 0 0 16px !important;
  padding: 0 0 14px !important;

  color: #173c35 !important;

  font-size: 21px !important;
  font-weight: 900 !important;
  line-height: 1.55 !important;
  letter-spacing: 0.02em !important;
}

/* =========================================================
   remove article h3 decoration
========================================================= */

.sf-feature-card .sf-feature-card__title::before {
  display: none !important;
  content: none !important;
}

/* =========================================================
   title underline
========================================================= */

.sf-feature-card .sf-feature-card__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;

  width: 100%;
  height: 1px;

  background: linear-gradient(
    90deg,
    #d4af37 0%,
    rgba(212, 175, 55, 0.45) 65%,
    rgba(212, 175, 55, 0) 100%
  );
}

/* =========================================================
   TEXT
========================================================= */

.sf-feature-card__text {
  margin: 0 !important;

  color: #565f5c;

  font-size: 15px;
  line-height: 1.95;
  letter-spacing: 0.015em;
}

/* =========================================================
   注釈
========================================================= */

.sf-feature-card__note {
  margin: 14px 0 0 !important;
  padding-top: 12px;

  border-top: 1px solid #eee8dc;
  color: #777;

  font-size: 13px;
  line-height: 1.8;
}

/* =========================================================
   HOVER
========================================================= */

/* =========================================================
   TABLET
========================================================= */

/* =========================================================
   MOBILE
========================================================= */

/* =========================================================
   13. QUOTE / HIGHLIGHT / MESSAGE
========================================================= */

.sf-quote {
  margin: 40px 0;
  padding: 20px 12px;

  background: none;
  color: #2f5f57;

  text-align: center;
  font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.08em;
}

.sf-highlight {
  display: inline;

  background: linear-gradient(transparent 60%, #d7efe9 60%);
  color: inherit;

  font-weight: 700;
}

p.sf-highlight {
  display: block;

  margin: 32px 0;
  padding: 0 4px;

  background: none;
  color: #244b44;

  font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.9;
  text-align: center;
}

.sf-highlight-navy {
  background: linear-gradient(transparent 60%, #e3e8f0 60%);
}

.sf-message-box {
  padding: 26px 28px;

  border-top: 1px solid #d8c684;
  border-bottom: 1px solid #d8c684;
  background: #fffdf7;
  color: #44504c;
}

.sf-message-box p {
  margin-bottom: 12px;
}

.sf-message-box p:last-child {
  margin-bottom: 0;
}

/* =========================================================
   14. CONVERSATION BOX
========================================================= */

.sf-conversation-box {
  padding: 24px 26px;

  border: 1px solid #dfe8e5;
  border-radius: 14px;
  background: #f8fbfa;
}

.sf-conversation-label {
  display: inline-block;

  margin-bottom: 12px;
  padding: 4px 10px;

  border-radius: 999px;
  background: var(--sf-green);
  color: #fff;

  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* =========================================================
   15. CAUTION BOX
========================================================= */

.sf-caution-box {
  padding: 24px 26px;

  border: 1px solid #ead8a5;
  border-left: 5px solid var(--sf-gold);
  border-radius: 10px;
  background: #fffaf0;
}

.sf-caution-title {
  color: #9a7415;
}

/* =========================================================
   16. FORMULA / EXAMPLE / NOTE / CALCULATION
========================================================= */

.sf-formula-box {
  padding: 26px 28px;

  border: 1px solid #d8e6e2;
  border-radius: 12px;
  background: #f5faf8;

  text-align: center;
}

.sf-formula-label {
  margin: 0 0 10px !important;

  color: #60726d;

  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.sf-formula {
  margin: 0 !important;

  color: var(--sf-green-dark);

  font-size: 21px;
  font-weight: 900;
  line-height: 1.7;
}

.sf-example-box,
.sf-note-box {
  padding: 22px 24px;

  border: 1px solid #e8e3d5;
  border-radius: 10px;
  background: #fffdf8;
}

.sf-example-title {
  margin: 0 0 8px !important;

  color: #9a761d;

  font-weight: 800;
}

.sf-note,
.sf-note-box {
  color: #5b625f;

  font-size: 14px;
  line-height: 1.8;
}

.sf-calculation-box {
  padding: 24px 26px;

  border: 1px solid #dce7e3;
  border-radius: 12px;
  background: #f8fbfa;

  text-align: center;
}

.sf-calculation-result {
  margin-top: 8px !important;

  color: var(--sf-green);

  font-size: 22px;
  font-weight: 900;
}

/* =========================================================
   17. STEPS
========================================================= */

.sf-steps {
  margin: 36px 0;
}

.sf-step {
  position: relative;
  display: grid;

  grid-template-columns: 70px minmax(0, 1fr);
  gap: 20px;

  padding-bottom: 34px;
}

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

.sf-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 66px;
  bottom: 5px;
  left: 34px;

  width: 1px;

  background: linear-gradient(#d1b459, #dbe7e3);
}

.sf-step__number {
  position: relative;
  z-index: 2;

  width: 68px;
  height: 68px;
  min-width: 68px;
  min-height: 68px;

  border: 1px solid #d2b45a;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 5px 15px rgba(17, 64, 57, 0.06);
}

.sf-step__label,
.sf-step__digit {
  position: absolute;
  left: 50%;

  transform: translateX(-50%);

  white-space: nowrap;
}

.sf-step__label {
  top: 14px;

  color: #b18b23;

  font-family: Georgia, "Times New Roman", serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.sf-step__digit {
  top: 29px;

  color: var(--sf-green-dark);

  font-family: Georgia, "Times New Roman", serif;
  font-size: 25px;
  line-height: 1;
}

.sf-step__content {
  min-width: 0;

  padding-top: 4px;
}

.sf-step .sf-step__title {
  margin: 0 0 12px !important;
  padding: 0 0 0 14px !important;

  border-left: 3px solid var(--sf-gold);
  color: #213b36 !important;

  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 1.5 !important;
}

.sf-step .sf-step__title::before {
  display: none !important;
}

.sf-step__content p {
  margin-bottom: 12px !important;
}

.sf-step__content p:last-child {
  margin-bottom: 0 !important;
}

.sf-step--last .sf-step__content {
  padding: 20px 22px;

  border: 1px solid var(--sf-green-line);
  border-radius: 14px;
  background: #f3f8f6;
}

/* =========================================================
   18. FLOW
========================================================= */

.sf-flow {
  position: relative;

  margin: 32px 0;
}

.sf-flow-item {
  position: relative;
  display: grid;

  grid-template-columns: 52px minmax(0, 1fr);
  gap: 16px;
  align-items: start;

  padding: 0 0 22px;
}

.sf-flow-item:last-child {
  padding-bottom: 0;
}

.sf-flow-item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 25px;
  top: 45px;
  bottom: 1px;

  width: 1px;

  background: #d9e4e0;
}

.sf-flow-num {
  position: relative;
  z-index: 2;
  display: flex;

  align-items: center;
  justify-content: center;

  width: 50px;
  height: 50px;

  border-radius: 50%;
  background: var(--sf-green);
  color: #fff;

  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
}

.sf-flow-content {
  padding: 4px 0 0;

  color: #5a615f;

  line-height: 1.75;
}

.sf-flow-title {
  margin-bottom: 4px;

  color: #223f39;

  font-size: 16px;
  font-weight: 800;
}

/* =========================================================
   19. TABLES
========================================================= */

.sf-table-wrap {
  width: 100%;

  margin: 30px 0;

  overflow-x: auto;

  -webkit-overflow-scrolling: touch;
}

.sf-table,
.sf-skill-table {
  width: 100%;
  min-width: 560px;

  margin: 0;

  border-collapse: collapse;
  border-spacing: 0;
  background: #fff;

  font-size: 14px;
  line-height: 1.7;
}

.sf-table th,
.sf-table td,
.sf-skill-table th,
.sf-skill-table td {
  padding: 14px 15px;

  border: 1px solid #e1e5e2;

  text-align: left;
  vertical-align: middle;
}

.sf-table thead th,
.sf-skill-table thead th {
  background: var(--sf-green-dark);
  color: #fff;

  font-weight: 700;
  white-space: nowrap;
}

.sf-table tbody tr:nth-child(even),
.sf-skill-table tbody tr:nth-child(even) {
  background: #fafbf9;
}

.sf-service {
  color: var(--sf-green-dark);

  font-weight: 800;
}

.sf-table-3 th,
.sf-table-3 td {
  width: 33.333%;
}

/* =========================================================
   20. CONCLUSION / CHOICE
========================================================= */

.sf-conclusion {
  margin: 30px 0;
  padding: 28px 28px 24px;

  border: 1px solid #d9e6e2;
  border-radius: 14px;
  background: #f6faf8;
}

.sf-conclusion-title {
  margin: 0 0 18px;

  color: var(--sf-green-dark);

  font-size: 18px;
  font-weight: 900;
  line-height: 1.6;
}

.sf-choice {
  display: grid;

  grid-template-columns: 90px minmax(0, 1fr);
  gap: 16px;
  align-items: start;

  padding: 15px 0;

  border-top: 1px solid #e3ebe8;
}

.sf-choice:first-of-type {
  border-top: 0;
}

.sf-choice-label {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height: 34px;

  padding: 5px 10px;

  border-radius: 999px;
  background: var(--sf-green);
  color: #fff;

  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.sf-choice-name {
  color: #294a43;

  font-weight: 800;
}

/* =========================================================
   21. FINAL BOX
========================================================= */

.sf-final-box {
  margin: 34px 0;
  padding: 28px;

  border: 1px solid #ded8c8;
  border-radius: 14px;
  background: #fffdf8;
}

.sf-final-title {
  margin: 0 0 18px;

  color: var(--sf-green-dark);

  font-size: 18px;
  font-weight: 900;
}

.sf-final-item {
  position: relative;

  margin: 0 0 12px;
  padding-left: 25px;

  line-height: 1.8;
}

.sf-final-item:last-child {
  margin-bottom: 0;
}

.sf-final-item::before {
  content: "→";
  position: absolute;
  left: 0;

  color: var(--sf-gold);

  font-weight: 800;
}

/* =========================================================
   22. FAQ
   Both div+h3 and details+summary structures are supported.
========================================================= */

.sf-faq-section {
  margin-top: 50px;
}

.sf-faq-item {
  margin: 0 0 16px;

  border: 1px solid #e0e5e2;
  border-radius: 12px;
  background: #fff;

  overflow: hidden;
}

.sf-faq-item .sf-faq-question,
.sf-faq-item > summary {
  position: relative;
  display: block;

  margin: 0 !important;
  padding: 18px 48px 18px 20px !important;

  border: 0 !important;
  background: #f7faf9 !important;
  color: #213d37 !important;

  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.7 !important;

  cursor: pointer;
}

.sf-faq-item .sf-faq-question::before {
  content: "Q";
  display: inline-block !important;
  position: static !important;

  width: auto !important;
  height: auto !important;

  margin-right: 9px;

  background: none !important;
  color: var(--sf-gold);

  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;

  transform: none !important;
}

.sf-faq-item > summary::-webkit-details-marker {
  display: none;
}

.sf-faq-item > summary::before {
  content: "Q";

  margin-right: 9px;

  color: var(--sf-gold);

  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
}

.sf-faq-item > summary::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;

  color: var(--sf-green);

  font-size: 20px;

  transform: translateY(-50%);
}

.sf-faq-item[open] > summary::after {
  content: "−";
}

.sf-faq-answer {
  padding: 20px 22px;

  border-top: 1px solid #e7ebe9;
}

.sf-faq-answer p:last-child {
  margin-bottom: 0;
}

/* =========================================================
   23. DISCLAIMER
========================================================= */

.sf-article-disclaimer {
  margin: 38px 0 10px;
  padding: 18px 20px;

  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  color: #777;

  font-size: 12px;
  line-height: 1.8;
}

/* =========================================================
   24. CTA
========================================================= */

/* =========================================================
   ---------------------------------------------------------
   BASE CTA
---------------------------------------------------------
========================================================= */

.sf-cta {
  margin: 70px 0;
  padding: 35px 24px;

  border-radius: 16px;
  background: var(--sf-ivory);

  text-align: center;
}

.sf-cta-sub {
  margin: 0 0 8px !important;

  color: #a38735;

  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.sf-cta-title {
  margin: 0 0 12px;

  color: var(--sf-green-dark);

  font-size: 20px;
  font-weight: 900;
  line-height: 1.6;
  letter-spacing: 0.04em;
}

.sf-cta-lead,
.sf-cta-text {
  color: #58615e;
}

/* =========================================================
   ---------------------------------------------------------
   BASE BUTTON
---------------------------------------------------------
========================================================= */

.sf-cta-btn,
.sf-btn {
  display: inline-block;

  margin-top: 15px;
  padding: 12px 24px;

  border: 1px solid var(--sf-gold);
  border-radius: 6px;
  background: var(--sf-gold);
  color: var(--sf-green-dark) !important;

  font-weight: 700;
  line-height: 1.5;
  text-decoration: none !important;

  transition: transform 0.25s ease,
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}

.sf-cta-btn:hover,
.sf-btn:hover {
  background: #e3c45d;

  transform: translateY(-2px);
}

/* =========================================================
   NEXT ARTICLE CTA
   Elegant Gold Accent
========================================================= */

.sf-cta--next {
  position: relative;

  margin: 70px 0;
  padding: 38px 34px 34px;

  border: 1px solid #e7e1d5;
  border-radius: 16px;
  background: #fbfaf6;

  text-align: center;

  box-shadow: 0 8px 24px rgba(32, 68, 55, 0.035);
}

/* =========================================================
   NEXT ARTICLE label
========================================================= */

.sf-cta--next .sf-cta-sub {
  margin: 0 0 12px !important;

  color: #b38b2f;

  letter-spacing: 0.22em;
}

/* =========================================================
   Title
========================================================= */

.sf-cta--next .sf-cta-title {
  margin: 0 0 14px;

  color: #204437;

  font-size: 21px;
  line-height: 1.6;
  letter-spacing: 0.03em;
}

/* =========================================================
   Lead
========================================================= */

.sf-cta--next .sf-cta-lead {
  margin: 0 0 16px !important;

  color: #4f5956;

  font-size: 15px;
  font-weight: 600;
  line-height: 1.9;
}

/* =========================================================
   Text
========================================================= */

.sf-cta--next .sf-cta-text {
  margin: 0 0 18px !important;

  color: #6a6862;

  font-size: 14px;
  line-height: 1.95;
}

/* =========================================================
   ---------------------------------------------------------
   NEXT ARTICLE LINK
---------------------------------------------------------
========================================================= */

.sf-next-btn {
  display: inline-flex;

  align-items: center;
  justify-content: center;
  gap: 16px;

  margin-top: 14px;
  padding: 13px 8px 11px;

  border: 0;
  border-bottom: 1px solid rgba(179, 139, 47, 0.7);
  background: transparent;
  color: #204437 !important;

  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.02em;
  text-decoration: none !important;

  transition: color 0.25s ease,
    border-color 0.25s ease;
}

.sf-next-btn__text {
  color: inherit;
}

.sf-next-btn__arrow {
  display: inline-block;

  color: #b38b2f;

  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-weight: 400;

  transition: color 0.25s ease,
    transform 0.25s ease;
}

/* =========================================================
   Hover
========================================================= */

/* =========================================================
   BRAND CTA / START FROM 39
   Deep Green Editorial Style
========================================================= */

.sf-cta--brand {
  position: relative;
  overflow: hidden;

  margin: 70px 0;
  padding: 54px 40px;

  border: 0;
  border-radius: 18px;
  background: linear-gradient(145deg, #244b40 0%, #183b32 100%);

  text-align: center;

  box-shadow: 0 16px 36px rgba(32, 68, 55, 0.14);
}

/* =========================================================
   subtle gold line
========================================================= */

.sf-cta--brand::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;

  width: 58px;
  height: 2px;

  background: #c7a45b;

  transform: translateX(-50%);
}

/* =========================================================
   START FROM 39 label
========================================================= */

.sf-cta--brand .sf-cta-sub {
  margin: 0 0 14px !important;

  color: #d6b76f;

  letter-spacing: 0.26em;
}

/* =========================================================
   Main title
========================================================= */

.sf-cta--brand .sf-cta-title {
  margin: 0 0 18px;

  color: #fffdf7;

  font-size: 23px;
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: 0.035em;
}

/* =========================================================
   Lead
========================================================= */

.sf-cta--brand .sf-cta-lead {
  margin: 0 0 20px !important;

  color: #f0eadf;

  font-size: 16px;
  font-weight: 700;
  line-height: 1.8;
}

/* =========================================================
   Body text
========================================================= */

.sf-cta--brand .sf-cta-text {
  margin: 0 0 14px !important;

  color: rgba(255, 253, 247, 0.78);

  font-size: 15px;
  line-height: 2;
}

/* =========================================================
   Gold accent
========================================================= */

.sf-cta--brand .sf-cta-accent {
  color: #dfc27e;

  font-weight: 800;
}

/* =========================================================
   ---------------------------------------------------------
   BRAND BUTTON
---------------------------------------------------------
========================================================= */

.sf-cta--brand .sf-cta-btn {
  display: inline-block;

  margin-top: 22px;
  padding: 13px 30px;

  border: 1px solid rgba(223, 194, 126, 0.75);
  border-radius: 5px;
  background: transparent;
  color: #fffdf7 !important;

  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.03em;
  text-decoration: none !important;

  box-shadow: none;

  transition: background 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease;
}

/* =========================================================
   Elegant hover
========================================================= */

.sf-cta--brand .sf-cta-btn:hover {
  border-color: #fffdf7;
  background: #fffdf7;
  color: #204437 !important;

  transform: translateY(-2px);
}

/* =========================================================
   25. RECOMMEND BOX
   Editorial Conversion CTA
========================================================= */

.sf-recommend-box {
  position: relative;
  overflow: hidden;

  margin: 70px 0;
  padding: 42px 40px 40px;

  border: 1px solid #e2dccf;
  border-radius: 16px;
  background: linear-gradient(135deg, #fbfaf6 0%, #f5f2e9 100%);

  text-align: left;

  box-shadow: 0 12px 30px rgba(32, 68, 55, 0.055);
}

/* =========================================================
   Gold accent line
========================================================= */

.sf-recommend-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;

  width: 4px;
  height: 100%;

  background: linear-gradient(
    180deg,
    #c5a253 0%,
    #dfc783 52%,
    rgba(197, 162, 83, 0.18) 100%
  );
}

/* =========================================================
   ---------------------------------------------------------
   RECOMMEND LABEL
---------------------------------------------------------
========================================================= */

.sf-recommend-label {
  margin: 0 0 12px !important;

  color: #a78232;

  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.24em;
}

/* =========================================================
   ---------------------------------------------------------
   TITLE
---------------------------------------------------------
========================================================= */

.sf-recommend-title {
  margin: 0 0 14px;

  color: #204437;

  font-size: 22px;
  font-weight: 900;
  line-height: 1.6;
  letter-spacing: 0.025em;
}

/* =========================================================
   ---------------------------------------------------------
   LEAD
---------------------------------------------------------
========================================================= */

.sf-recommend-lead {
  margin: 0 0 14px !important;

  color: #46534f;

  font-size: 15px;
  font-weight: 700;
  line-height: 1.9;
}

/* =========================================================
   ---------------------------------------------------------
   TEXT
---------------------------------------------------------
========================================================= */

.sf-recommend-text {
  margin: 0 !important;

  color: #696762;

  font-size: 14px;
  line-height: 1.95;
}

/* =========================================================
   RECOMMEND BUTTON
========================================================= */

.sf-recommend-btn {
  display: inline-flex;

  align-items: center;
  justify-content: center;
  gap: 18px;

  margin-top: 24px;
  padding: 13px 22px 13px 24px;

  border: 1px solid #204437;
  border-radius: 5px;
  background: #204437;
  color: #fffdf7 !important;

  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.02em;
  text-decoration: none !important;

  box-shadow: 0 6px 16px rgba(32, 68, 55, 0.11);

  transition: background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

/* =========================================================
   Arrow
========================================================= */

.sf-recommend-btn__arrow {
  color: #d8bd78;

  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-weight: 400;

  transition: color 0.3s ease,
    transform 0.3s ease;
}

/* =========================================================
   Hover
========================================================= */

/* =========================================================
   26. GENERIC ARTICLE BOX
========================================================= */

.sf-box {
  margin: 25px 0;
  padding: 18px;

  border-left: 3px solid #c8a75a;
  background: #fafafa;
}

/* =========================================================
   31. RELATED ARTICLE GUIDE
   記事内の公式情報・関連記事カード
========================================================= */

/* =========================================================
   Restored editorial CTA cards used by articles and policy pages
========================================================= */

.sf-related-guide {
  box-sizing: border-box;

  width: 100%;

  display: flex;

  align-items: center;
  justify-content: space-between;
  gap: 30px;

  margin: 28px 0;
  padding: 24px 28px;

  color: #333;

  text-decoration: none !important;

  background: #fbfaf7;
  border: 1px solid #e8e1d5;
  border-left: 3px solid #b9985d;
  border-radius: 2px;
  box-shadow: 0 7px 20px rgba(28, 58, 51, 0.035);

  transition: transform 0.28s ease,
    box-shadow 0.28s ease,
    background-color 0.28s ease,
    border-color 0.28s ease;
}

.sf-related-guide__content {
  display: flex;

  flex: 1;

  min-width: 0;

  flex-direction: column;
  align-items: flex-start;
}

.sf-related-guide__content p,
.sf-related-guide > p {
  margin: 0 !important;
}

.sf-related-guide__label {
  display: block;

  margin: 0 0 9px;

  color: #a67e39;

  font-size: 10px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.sf-related-guide__title {
  display: block;

  margin: 0;

  color: #173f37;

  font: 600 18px/1.55 var(--sf-serif);
}

.sf-related-guide__desc {
  display: block;

  margin: 5px 0 0;

  color: #777;

  font-size: 13px;
  line-height: 1.7;
  font-weight: 400;
}

.sf-related-guide__arrow {
  flex: 0 0 42px;

  display: flex;

  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;

  color: #97712f;
  border: 1px solid #d2b77f;
  border-radius: 50%;

  transition: transform 0.28s ease,
    color 0.28s ease,
    background-color 0.28s ease;
}

.sf-related-guide:hover {
  color: #333;
  background: #f4f0e7;
  box-shadow: 0 16px 32px rgba(28, 58, 51, 0.12);

  transform: translateY(-5px);
}

.sf-related-guide:hover .sf-related-guide__arrow {
  color: #fff;
  background: #204437;
  border-color: #204437;

  transform: translate(3px, -2px);
}

.sf-related-guide:empty {
  display: none;
}

/* =========================================================
   32. JIBUN COMPANY
   4 ARTICLE SERIES / ROADMAP
========================================================= */

.sf-jc-series,
.sf-jc-series * {
  box-sizing: border-box;
}

.sf-jc-series {
  margin: 72px 0 54px;
  padding: 0;

  overflow: hidden;

  color: #173e36;
  background: #fff;
  border: 1px solid #dfd6c6;
}

.sf-jc-series p {
  margin: 0 !important;
}

.sf-jc-series__header {
  padding: 42px 42px 36px;

  text-align: center;

  background: linear-gradient(135deg, #f8f5ed, #efebe1);
  border-bottom: 1px solid #dfd6c6;
}

.sf-jc-series__label {
  display: block;

  margin-bottom: 13px;

  color: #aa8139;

  font: 600 10px/1.4 var(--sf-sans);
  letter-spacing: 0.25em;
}

.sf-jc-series__heading {
  margin-bottom: 10px;

  font: 500 28px/1.55 var(--sf-serif);
  letter-spacing: 0.06em;
}

.sf-jc-series__header > p {
  color: #6f746f;

  font-size: 12px;
  line-height: 1.8;
}

.sf-jc-series__list {
  padding: 9px 34px 25px;
}

.sf-jc-series__row {
  display: grid;

  grid-template-columns: 58px minmax(0, 1fr) 36px;
  gap: 18px;
  align-items: center;

  min-height: 116px;

  position: relative;

  padding: 23px 12px;

  border-bottom: 1px solid #e7e0d5;

  transition: background-color 0.25s ease,
    transform 0.25s ease;
}

.sf-jc-series__row:last-child {
  border-bottom: 0;
}

.sf-jc-series__number {
  color: #b28a43;

  font: italic 22px/1 var(--sf-serif);
}

.sf-jc-series__tag {
  display: block;

  margin-bottom: 5px;

  color: #a98548;

  font: 600 9px/1.4 var(--sf-sans);
  letter-spacing: 0.18em;
}

.sf-jc-series__title {
  color: #153c34;

  font: 600 17px/1.65 var(--sf-serif);
}

.sf-jc-series__desc {
  margin-top: 3px;

  color: #777f7b;

  font-size: 11px;
  line-height: 1.7;
}

.sf-jc-series__arrow,
.sf-jc-series__current-dot {
  display: grid;

  place-items: center;

  width: 34px;
  height: 34px;

  color: #99712f;
  border: 1px solid #d3b87f;
  border-radius: 50%;

  font-style: normal;

  transition: transform 0.25s ease,
    color 0.25s ease,
    background-color 0.25s ease;
}

.sf-jc-series__current-dot {
  color: #fff;
  background: #1b7567;
  border-color: #1b7567;

  font-size: 8px;
}

.sf-jc-series__link {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: block;

  text-decoration: none !important;
}

.sf-jc-series__row:not(.is-current):hover {
  background: #f8f5ed;

  transform: translateY(-3px);
}

.sf-jc-series__row:not(.is-current):hover .sf-jc-series__arrow {
  color: #fff;
  background: #1b7567;
  border-color: #1b7567;

  transform: translateX(4px);
}

.sf-jc-series__row.is-current {
  margin-inline: -34px;
  padding-inline: 46px;

  color: #fff;
  background: #1b675b;
  border-bottom: 0;
}

.sf-jc-series__row.is-current .sf-jc-series__number,
.sf-jc-series__row.is-current .sf-jc-series__tag {
  color: #e0bd74;
}

.sf-jc-series__row.is-current .sf-jc-series__title {
  color: #fff;
}

.sf-jc-series__row.is-current .sf-jc-series__desc {
  color: rgba(255, 255, 255, 0.73);
}

.sf-jc-roadmap {
  margin: 0;
  padding: 38px 36px 43px;

  color: #173e36;
  background: #f6f2e9;
  border-top: 1px solid #dfd6c6;
}

.sf-jc-roadmap__head {
  text-align: center;
}

.sf-jc-roadmap__head > span {
  display: block;

  color: #aa8139;

  font: 600 9px/1.4 var(--sf-sans);
  letter-spacing: 0.22em;
}

.sf-jc-roadmap__head > strong {
  display: block;

  margin-top: 9px;

  font: 600 18px/1.6 var(--sf-serif);
}

.sf-jc-roadmap__steps {
  display: grid;

  grid-template-columns: repeat(4, 1fr);

  position: relative;

  margin-top: 31px;
}

.sf-jc-roadmap__steps::before {
  content: "";
  position: absolute;
  top: 38px;
  left: 12%;
  right: 12%;

  height: 1px;

  background: #d5c7ac;
}

.sf-jc-roadmap__step {
  position: relative;
  z-index: 1;

  text-align: center;
}

.sf-jc-roadmap__number {
  color: #ad8742;

  font: 600 10px/1 var(--sf-sans);
}

.sf-jc-roadmap__dot {
  width: 12px;
  height: 12px;

  margin: 20px auto 16px;

  background: #f6f2e9;
  border: 2px solid #c9a55f;
  border-radius: 50%;
}

.sf-jc-roadmap__step.is-active .sf-jc-roadmap__dot {
  background: #1b7567;
  border-color: #1b7567;
  box-shadow: 0 0 0 5px rgba(27, 117, 103, 0.12);
}

.sf-jc-roadmap__step strong,
.sf-jc-roadmap__step small {
  display: block;
}

.sf-jc-roadmap__step strong {
  font: 600 12px/1.6 var(--sf-serif);
}

.sf-jc-roadmap__step small {
  margin-top: 3px;

  color: #9b7a40;

  font-size: 8px;
  letter-spacing: 0.1em;
}

.sf-jc-roadmap__message {
  display: none !important;
}

/* =========================================================
   1.2.2 — original single-row series layout; tolerate wpautop wrappers
========================================================= */

.sf-jc-series {
  width: 100%;

  margin: 60px 0 25px;
  padding: 38px 36px 30px;

  overflow: hidden;

  background: #f7f6f2;
  border: 0;
  border-top: 3px solid #0f6f63;
}

.sf-jc-series__header {
  margin: 0 0 28px !important;
  padding: 0 !important;

  text-align: left;

  background: transparent;
  border: 0;
}

.sf-jc-series__label {
  margin: 0 0 8px !important;

  color: #c8a75a;
}

.sf-jc-series__heading {
  margin: 0 0 8px !important;

  color: #222;

  font-size: 24px;
  font-weight: 700;
}

.sf-jc-series__header p {
  margin: 0 !important;

  color: #777;

  font-size: 13px;
  line-height: 1.8;
}

.sf-jc-series__list {
  display: block !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  border-top: 1px solid #d9d5cc;
}

.sf-jc-series__row {
  position: relative !important;
  display: flex !important;

  flex-direction: row !important;
  align-items: center !important;

  width: 100% !important;
  min-width: 0 !important;
  min-height: 96px !important;
  height: auto !important;

  gap: 18px !important;

  margin: 0 !important;
  padding: 20px 18px !important;

  background: rgba(255, 255, 255, 0.55);
  border: 0 !important;
  border-bottom: 1px solid #d9d5cc !important;

  overflow: hidden !important;

  writing-mode: horizontal-tb !important;
}

/* =========================================================
   1.2.4 — a calmer rhythm between all four series articles
========================================================= */

.sf-jc-series__row,
.sf-jc-series__row.is-current {
  min-height: 112px !important;

  padding-top: 26px !important;
  padding-bottom: 26px !important;
}

.sf-jc-series__row > p,
.sf-jc-series__body > p {
  display: contents !important;

  margin: 0 !important;
  padding: 0 !important;
}

.sf-jc-series__number {
  display: block !important;

  flex: 0 0 42px !important;

  width: 42px !important;
  min-width: 42px !important;

  margin: 0 !important;

  color: #c8a75a;

  font-size: 19px;

  writing-mode: horizontal-tb !important;
}

.sf-jc-series__body {
  display: block !important;

  flex: 1 1 auto !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  writing-mode: horizontal-tb !important;
}

.sf-jc-series__tag {
  display: block !important;

  width: 100% !important;

  margin: 0 0 6px !important;

  color: #0f6f63;

  font-size: 8px;

  writing-mode: horizontal-tb !important;
}

.sf-jc-series__title {
  display: block !important;

  width: 100% !important;
  min-width: 0 !important;

  margin: 0 0 5px !important;

  color: #252525;

  font-size: 15px;
  font-weight: 600;
  line-height: 1.65;

  writing-mode: horizontal-tb !important;

  white-space: normal !important;
  word-break: normal !important;

  overflow-wrap: break-word !important;
}

.sf-jc-series__desc {
  display: block !important;

  width: 100% !important;

  margin: 0 !important;

  color: #888;

  font-size: 11px;
  line-height: 1.65;

  writing-mode: horizontal-tb !important;

  white-space: normal !important;
  word-break: normal !important;
}

.sf-jc-series__arrow,
.sf-jc-series__current-dot {
  display: block !important;

  flex: 0 0 24px !important;

  width: 24px !important;
  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  text-align: center;

  border: 0;
  border-radius: 0;
  background: transparent;

  writing-mode: horizontal-tb !important;
}

.sf-jc-series__arrow {
  color: #0f6f63;

  font-size: 19px;
}

.sf-jc-series__current-dot {
  color: #d9c29c;

  font-size: 7px;
}

.sf-jc-series__link {
  position: absolute !important;
  z-index: 10;
  inset: 0 !important;
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
}

.sf-jc-series__row.is-current {
  margin: 0 !important;
  padding: 20px 18px !important;

  background: #0f6f63 !important;
  border-bottom-color: #0f6f63 !important;
}

.sf-jc-series__row.is-current::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;

  width: 4px;

  background: #c8a75a;
}

.sf-jc-series__row.is-current .sf-jc-series__number,
.sf-jc-series__row.is-current .sf-jc-series__tag {
  color: #d9c29c;
}

.sf-jc-series__row.is-current .sf-jc-series__title {
  color: #fff;
}

.sf-jc-series__row.is-current .sf-jc-series__desc {
  color: rgba(255, 255, 255, 0.68);
}

.sf-jc-series__row:not(.is-current):hover {
  background: #fff;
  box-shadow: inset 3px 0 0 rgba(15, 111, 99, 0.25);

  transform: none;
}

.sf-jc-series__row:not(.is-current):hover .sf-jc-series__arrow {
  color: #0f6f63;
  background: transparent;
  border: 0;

  transform: translateX(4px);
}

/* =========================================================
   Final cascade guard: keep identical spacing on current and linked rows.
========================================================= */

/* =========================================================
   1.2.5 — tactile linked rows
========================================================= */

.sf-jc-series__row:not(.is-current) {
  z-index: 1;

  transition: transform 0.26s ease,
    box-shadow 0.26s ease,
    background-color 0.26s ease,
    border-color 0.26s ease !important;
}

.sf-jc-series__row:not(.is-current):hover,
.sf-jc-series__row:not(.is-current):focus-within {
  z-index: 3;

  background: #fff !important;
  border-bottom-color: #cdbb95 !important;
  box-shadow: 0 14px 28px rgba(20, 65, 56, 0.13),
    inset 4px 0 0 #168071 !important;

  transform: translateY(-5px) !important;
}

.sf-jc-series__row:not(.is-current):hover .sf-jc-series__title,
.sf-jc-series__row:not(.is-current):focus-within .sf-jc-series__title {
  color: #075e55;
}

.sf-jc-series__row:not(.is-current):hover .sf-jc-series__arrow,
.sf-jc-series__row:not(.is-current):focus-within .sf-jc-series__arrow {
  transform: translateX(5px) !important;
}

.sf-jc-series__row:not(.is-current):active {
  box-shadow: 0 6px 14px rgba(20, 65, 56, 0.1) !important;

  transform: translateY(-1px) !important;
}

/* =========================================================
   32-B. JIBUN COMPANY COMPACT WORKSHEET
========================================================= */

.sf-company-mini-work,
.sf-company-mini-work * {
  box-sizing: border-box;
}

.sf-company-mini-work {
  width: 100%;

  margin: 60px 0;
  padding: 42px 38px;

  background: #f7f6f2;
  border-top: 3px solid #0f6f63;
}

.sf-company-mini-work__head {
  width: 100%;

  margin: 0 0 32px !important;
  padding: 0 !important;

  text-align: center;
}

.sf-company-mini-work__head > p {
  margin: 0 !important;
  padding: 0 !important;

  color: #777;

  font-size: 13px;
  line-height: 1.9;
}

.sf-company-mini-work__label {
  display: block;

  margin: 0 0 10px !important;
  padding: 0 !important;

  color: #c8a75a;

  font: 600 10px/1.4 Georgia,
    "Times New Roman",
    serif;
  letter-spacing: 0.2em;
}

.sf-company-mini-work__title {
  width: 100%;

  margin: 0 0 14px !important;
  padding: 0 !important;

  color: #222;
  background: transparent;
  border: 0;
  box-shadow: none;

  font-size: 25px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.02em;
}

.sf-mini-work-list {
  display: block !important;

  width: 100%;

  margin: 0 !important;
  padding: 0 !important;

  border-top: 1px solid #ddd9cf;
}

.sf-mini-work-item {
  display: flex !important;

  align-items: flex-start !important;

  width: 100% !important;
  min-width: 0 !important;

  gap: 20px;

  margin: 0 !important;
  padding: 20px 6px !important;

  border: 0;
  border-bottom: 1px solid #ddd9cf;
}

.sf-mini-work-item > p {
  display: contents !important;

  margin: 0 !important;
  padding: 0 !important;
}

.sf-mini-work-number {
  display: block !important;

  flex: 0 0 42px;

  width: 42px;
  min-width: 42px;

  margin: 0 !important;
  padding: 0 !important;

  color: #c8a75a;

  font: 400 18px/1.5 Georgia,
    "Times New Roman",
    serif;
}

.sf-mini-work-content {
  display: block !important;

  flex: 1 1 auto !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  float: none !important;
}

.sf-mini-work-content strong {
  display: block !important;

  width: 100% !important;

  margin: 0 0 5px !important;
  padding: 0 !important;

  color: #b18a3d;

  font-size: 16px;
  font-weight: 600;
  line-height: 1.65;
  letter-spacing: 0.01em;
  white-space: normal !important;
  word-break: normal !important;

  overflow-wrap: break-word !important;
}

.sf-mini-work-content p {
  display: block !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #777;

  font-size: 12px;
  line-height: 1.7;
  white-space: normal !important;
  word-break: normal !important;

  overflow-wrap: break-word !important;
}

/* =========================================================
   33. RELATED STORIES
   CATEGORY MORE LINK
========================================================= */

.sf-related-more {
  display: flex;

  align-items: center;
  justify-content: space-between;

  margin-top: 22px;
  padding: 16px 0 2px;

  border-top: 1px solid rgba(180, 150, 95, 0.32);
  color: #b5965d;

  text-decoration: none;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.06em;

  transition: color 0.25s ease,
    opacity 0.25s ease;
}

.sf-related-more span {
  display: block;
}

.sf-related-more i {
  display: block;

  margin-left: 16px;

  font-family: Georgia, serif;
  font-size: 17px;
  font-style: normal;
  line-height: 1;

  transition: transform 0.25s ease;
}

.sf-related-more:hover {
  color: #8f7443;
}

.sf-related-more:hover i {
  transform: translateX(4px);
}

/* =========================================================
   34. LEGACY ARTICLE COMPATIBILITY
   旧記事で使用中の装飾ブロック
========================================================= */

.sf-profile-box {
  margin: 48px 0 28px;
  padding: 44px 38px;

  text-align: center;

  background: var(--sf-surface-warm);
  border: 1px solid var(--sf-line);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(23, 63, 56, 0.05);
}

.sf-profile-brand {
  margin: 0 0 8px !important;

  color: var(--sf-green);

  font: 700 11px/1.4 var(--sf-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.sf-profile-title {
  margin: 0 0 24px !important;

  color: var(--sf-ink);

  font: 600 19px/1.75 var(--sf-serif);
}

.sf-profile-lead {
  max-width: 620px;

  margin: 0 auto 23px !important;

  color: var(--sf-muted);

  font-size: 15px;
  line-height: 2;
}

.sf-profile-message {
  position: relative;

  margin: 0 auto 30px !important;
  padding-top: 23px;

  color: #555;

  font-size: 15px;
  line-height: 2;
}

.sf-profile-message::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;

  width: 34px;
  height: 1px;

  background: var(--sf-gold);

  transform: translateX(-50%);
}

.sf-profile-button {
  display: inline-flex;

  align-items: center;
  justify-content: center;
  gap: 16px;

  min-width: 280px;
  min-height: 48px;

  padding: 14px 28px;

  color: #fff !important;
  background: var(--sf-green-dark);
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(23, 63, 56, 0.14);

  font-size: 14px;
  font-weight: 700;
  text-decoration: none !important;
}

.sf-company-vision {
  margin: 42px 0;
  padding: 36px 30px;

  text-align: center;

  background: var(--sf-surface-warm);
  border-top: 2px solid var(--sf-green);
}

.sf-company-vision__label {
  display: block;

  margin-bottom: 8px;

  color: var(--sf-gold);

  font: 700 9px/1.4 var(--sf-sans);
  letter-spacing: 0.2em;
}

.sf-company-vision__title {
  margin-bottom: 14px;

  color: var(--sf-green-dark);

  font: 600 22px/1.65 var(--sf-serif);
}

.sf-company-vision-grid {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;

  margin: 26px 0;
}

.sf-company-vision-grid > div {
  padding: 18px;

  text-align: left;

  background: #fff;
  border: 1px solid var(--sf-line);
}

.sf-company-vision-grid small {
  display: block;

  margin-bottom: 5px;

  color: var(--sf-gold);

  font-size: 9px;
  letter-spacing: 0.12em;
}

.sf-company-vision-grid strong {
  display: block;

  color: var(--sf-ink);

  font-size: 13px;
  line-height: 1.65;
}

.sf-company-vision-message {
  margin-top: 26px;
  padding-top: 23px;

  border-top: 1px solid var(--sf-line);
}

.sf-company-vision-message > strong {
  display: block;

  margin-bottom: 7px;

  color: var(--sf-green);

  font-size: 14px;
}

.sf-article-lead,
.sf-introduction,
.sf-step-intro {
  margin: 26px 0;
  padding: 22px 25px;

  color: #46534f;
  background: var(--sf-ivory);
  border-left: 3px solid var(--sf-green);

  line-height: 1.95;
}

.sf-summary-box,
.sf-condition-box,
.sf-specialist-box {
  margin: 34px 0;
  padding: 28px;

  background: var(--sf-surface-warm);
  border: 1px solid var(--sf-line);
  border-top: 3px solid var(--sf-green);
}

.sf-summary-box h2,
.sf-specialist-title {
  margin: 0 0 18px !important;
  padding: 0 0 12px !important;

  color: var(--sf-green-dark) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--sf-gold) !important;

  font-size: 20px !important;
}

.sf-calculation-total {
  margin-top: 18px !important;
  padding: 18px 20px;

  background: #edf4f1;
  border-left: 3px solid var(--sf-green);
  color: var(--sf-green-dark);
}

.sf-point {
  margin: 28px 0;
  padding: 22px 24px;

  background: var(--sf-ivory);
  border-left: 3px solid var(--sf-gold);
  color: var(--sf-ink);
}

.sf-summary {
  margin: 34px 0;
  padding: 28px;

  background: #fff;
  border: 1px solid var(--sf-line);
  border-top: 3px solid var(--sf-green);
}

.sf-summary-item {
  display: grid;

  grid-template-columns: minmax(100px, 0.34fr) 1fr;
  gap: 18px;

  padding: 14px 0;

  border-bottom: 1px solid var(--sf-line);
}

.sf-summary-item:last-child {
  border-bottom: 0;
}

.sf-summary-label {
  color: var(--sf-gold);

  font-weight: 700;
}

.sf-summary-value {
  color: var(--sf-ink);
}

.sf-table-2,
.sf-table-4 {
  width: 100%;

  border-collapse: collapse;
}

.sf-table-2 th,
.sf-table-2 td,
.sf-table-4 th,
.sf-table-4 td {
  padding: 13px;

  border: 1px solid var(--sf-line);
}

.sf-table-2 th,
.sf-table-4 th {
  color: var(--sf-green-dark);
  background: var(--sf-ivory);
}

.sf-related-title {
  margin: 0 0 5px !important;

  color: var(--sf-green-dark);

  font: 600 25px/1.6 var(--sf-serif);
}

.sf-related-sub {
  margin: 0 0 27px !important;

  color: var(--sf-gold);

  font: 700 9px/1.4 var(--sf-sans);
  letter-spacing: 0.18em;
}

.sf-related-grid {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.sf-related-card {
  position: relative;

  padding: 25px;

  background: #fff;
  border: 1px solid var(--sf-line);
  box-shadow: 0 8px 20px rgba(23, 63, 56, 0.05);

  transition: transform var(--sf-motion),
    box-shadow var(--sf-motion);
}

.sf-related-num {
  display: block;

  margin-bottom: 12px;

  color: var(--sf-gold);

  font: italic 18px/1 var(--sf-serif);
}

.sf-related-text {
  color: var(--sf-ink);

  line-height: 1.75;
}

.sf-cta-accent {
  color: var(--sf-gold);

  font: 700 10px/1.4 var(--sf-sans);
  letter-spacing: 0.16em;
}

.sf-cta-copy {
  color: var(--sf-ink);

  line-height: 1.85;
}

.sf-cta-note {
  display: block;

  margin-top: 10px;

  color: var(--sf-muted);

  font-size: 12px;
}

/* =========================================================
   35. RESPONSIVE & INTERACTION
   Desktop → tablet → mobile → small mobile
========================================================= */

@media (min-width: 768px) {
  .sf-jc-series__row,
  .sf-jc-series__row.is-current {
    min-height: 112px !important;

    padding: 26px 18px !important;
  }
}

@media screen and (min-width: 769px) {
  /* =========================================================
     記事本文エリアのみ
  ========================================================= */

  body.single-post .post-content,
  body.single-post .entry-content,
  body.single-post .sf-article,
  body.single-post .sf-money-page {
    width: 100% !important;
    max-width: 870px !important;

    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (hover: hover) {
  .sf-feature-card {
    transition: transform 0.25s ease,
      box-shadow 0.25s ease,
      border-color 0.25s ease;
  }

  .sf-feature-card:hover {
    transform: translateY(-2px);

    border-color: rgba(212, 175, 55, 0.3);
    box-shadow: 0 12px 30px rgba(32, 68, 55, 0.07);
  }

  .sf-next-btn:hover {
    color: #8f6d28 !important;
    border-color: #b38b2f;
  }

  .sf-next-btn:hover .sf-next-btn__arrow {
    color: #9d7728;

    transform: translateX(4px);
  }

  .sf-recommend-btn:hover {
    border-color: #315d50;
    background: #315d50;
    color: #ffffff !important;

    transform: translateY(-2px);

    box-shadow: 0 9px 20px rgba(32, 68, 55, 0.16);
  }

  .sf-recommend-btn:hover .sf-recommend-btn__arrow {
    color: #f0d99b;

    transform: translateX(4px);
  }

  .sf-point-box,
  .sf-check-box,
  .sf-alert-box,
  .sf-number-card {
    transition: transform 0.25s ease,
      box-shadow 0.25s ease,
      border-color 0.25s ease;
  }

  .sf-point-box:hover,
  .sf-check-box:hover,
  .sf-alert-box:hover,
  .sf-number-card:hover {
    transform: translateY(-2px);
  }

  .sf-step__number {
    transition: transform 0.25s ease,
      box-shadow 0.25s ease,
      border-color 0.25s ease;
  }

  .sf-step:hover .sf-step__number {
    transform: translateY(-2px);

    border-color: #b99a2f;
    box-shadow: 0 7px 18px rgba(17, 64, 57, 0.1);
  }
}

@media screen and (max-width: 768px) {
  .sf-article .sf-number-card {
    gap: 18px !important;

    padding: 24px 22px !important;
  }

  .sf-article .sf-number-card > .sf-number {
    flex-basis: 50px !important;

    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    height: 50px !important;
    min-height: 50px !important;

    font-size: 14px !important;
  }

  .sf-article .sf-number-card h3 {
    margin: 0 0 10px !important;

    font-size: 18px !important;
    line-height: 1.5 !important;
  }

  .sf-article .sf-number-card .sf-number-content p {
    font-size: 15px !important;
    line-height: 1.85 !important;
  }

  .sf-feature-card {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 22px;

    padding: 28px 26px;
  }

  .sf-feature-card__number {
    width: 54px;
    height: 54px;

    font-size: 26px;
  }

  .sf-feature-card__number::after {
    right: -15px;

    height: 64px;
  }

  .sf-feature-card .sf-feature-card__title {
    font-size: 19px !important;
  }

.sf-article {
    width: 100%;

  padding: 0;

  font-size: 18px;

  line-height: 1.95;
  
  max-width: none;
}

  .sf-article__lead,
  .sf-lead {
    font-size: 17px;
  }

  .sf-article h1 {
    font-size: 26px;
  }

  .sf-article h2:not(.sf-article__summary-title) {
    margin: 45px 0 22px;
    padding: 14px 16px;

    font-size: 22px;
  }

  .sf-article
    h3:not(.sf-list-box__title):not(.sf-step__title):not(.sf-faq-question):not(
      .sf-number-card__title
    ) {
    margin: 34px 0 16px;

    font-size: 20px;
  }

.sf-toc {
    padding: 22px 20px;
  
  background: #fff;

  border: 1px solid #d9d4c6;

  border-top: 3px solid #a58c50;

  border-radius: 3px;

  box-shadow: none;
}

  .sf-article__summary {
    padding: 21px 20px;
  }

  .sf-point-box,
  .sf-check-box,
  .sf-alert-box,
  .sf-recommend-box,
  .sf-merit-box,
  .sf-demerit-box,
  .sf-notice-box,
  .sf-empathy-box {
    padding: 20px;
  }

  .sf-quote {
    margin: 34px 0;

    font-size: 20px;
  }

  p.sf-highlight {
    font-size: 18px;
  }

  .sf-step {
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 17px;

    padding-bottom: 28px;
  }

  .sf-step__number {
    width: 58px;
    height: 58px;
    min-width: 58px;
    min-height: 58px;
  }

  .sf-step__label {
    top: 12px;

    font-size: 7px;
  }

  .sf-step__digit {
    top: 26px;

    font-size: 22px;
  }

  .sf-step:not(:last-child)::after {
    top: 56px;
    bottom: 3px;
    left: 29px;
  }

  .sf-step .sf-step__title {
    font-size: 19px !important;
  }

  .sf-step--last .sf-step__content {
    padding: 17px 18px;
  }

  .sf-choice {
    grid-template-columns: 78px minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  .sf-related-guide {
    gap: 15px;

    margin: 22px 0;
    padding: 19px 17px;
  }

  .sf-related-guide__label {
    margin-bottom: 7px;

    font-size: 9px;
  }

  .sf-related-guide__title {
    font-size: 15px;
  }

  .sf-related-guide__desc {
    font-size: 12px;
    line-height: 1.65;
  }

  .sf-related-guide__arrow {
    flex-basis: 36px;

    width: 36px;
    height: 36px;

    font-size: 14px;
  }

  .sf-jc-series {
    margin: 48px 0 38px;
  }

  .sf-jc-series__header {
    padding: 31px 20px 27px;
  }

  .sf-jc-series__heading {
    font-size: 22px;
  }

  .sf-jc-series__list {
    padding: 5px 16px 16px;
  }

  .sf-jc-series__row {
    grid-template-columns: 35px minmax(0, 1fr) 28px;
    gap: 10px;

    min-height: 104px;

    padding: 19px 4px;
  }

  .sf-jc-series__number {
    font-size: 17px;
  }

  .sf-jc-series__tag {
    font-size: 7px;
  }

  .sf-jc-series__title {
    font-size: 14px;
    line-height: 1.65;
  }

  .sf-jc-series__desc {
    font-size: 9px;
  }

  .sf-jc-series__arrow,
  .sf-jc-series__current-dot {
    width: 28px;
    height: 28px;
  }

  .sf-jc-series__row.is-current {
    margin-inline: -16px;
    padding-inline: 20px;
  }

  .sf-jc-roadmap {
    padding: 30px 14px 34px;

    overflow: hidden;
  }

  .sf-jc-roadmap__head > strong {
    font-size: 15px;
  }

  .sf-jc-roadmap__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;

    margin-top: 25px;
  }

  .sf-jc-roadmap__steps::before {
    display: none;
  }

  .sf-jc-roadmap__step {
    padding: 17px 8px;

    background: rgba(255, 255, 255, 0.58);
    border: 1px solid #dfd6c6;
    border-radius: 4px;
  }

  .sf-jc-roadmap__dot {
    margin: 10px auto;
  }

  .sf-jc-roadmap__step strong {
    font-size: 11px;
  }

  .sf-jc-roadmap__step small {
    font-size: 8px;
  }

  .sf-jc-series {
    margin: 42px 0 22px;
    padding: 27px 16px 20px;
  }

  .sf-jc-series__header {
    margin-bottom: 20px !important;
  }

  .sf-jc-series__heading {
    font-size: 20px;
  }

  .sf-jc-series__header p {
    font-size: 11px;
  }

  .sf-jc-series__row,
  .sf-jc-series__row.is-current {
    min-height: 88px !important;

    gap: 10px !important;

    padding: 16px 10px !important;
  }

  .sf-jc-series__number {
    flex-basis: 30px !important;

    width: 30px !important;
    min-width: 30px !important;

    font-size: 16px;
  }

  .sf-jc-series__title {
    font-size: 13px;
    line-height: 1.55;
  }

  .sf-jc-series__desc {
    font-size: 9px;
  }

  .sf-jc-series__arrow,
  .sf-jc-series__current-dot {
    flex-basis: 18px !important;

    width: 18px !important;
  }

  .sf-jc-series__row,
  .sf-jc-series__row.is-current {
    min-height: 96px !important;

    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  .sf-company-mini-work {
    margin: 44px 0;
    padding: 31px 18px;
  }

  .sf-company-mini-work__head {
    margin-bottom: 24px !important;
  }

  .sf-company-mini-work__title {
    font-size: 20px;
    line-height: 1.6;
  }

  .sf-company-mini-work__head > p {
    font-size: 11px;
  }

  .sf-mini-work-item {
    gap: 12px;

    padding: 18px 2px !important;
  }

  .sf-mini-work-number {
    flex-basis: 31px;

    width: 31px;
    min-width: 31px;

    font-size: 15px;
  }

  .sf-mini-work-content strong {
    font-size: 14px;
  }

  .sf-mini-work-content p {
    font-size: 10px;
  }

  .sf-profile-box {
    margin: 36px 0 22px;
    padding: 32px 20px;
  }

  .sf-profile-title {
    font-size: 17px;
  }

  .sf-profile-lead,
  .sf-profile-message {
    font-size: 14px;
    line-height: 1.9;
  }

  .sf-profile-button {
    width: 100%;
    min-width: 0;
  }

  .sf-pc-only {
    display: none;
  }

  .sf-company-vision {
    margin: 34px 0;
    padding: 29px 18px;
  }

  .sf-company-vision__title {
    font-size: 19px;
  }

  .sf-company-vision-grid {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .sf-company-vision-grid > div {
    padding: 16px;
  }

  .sf-article-lead,
  .sf-introduction,
  .sf-step-intro {
    padding: 19px 17px;
  }

  .sf-summary-box,
  .sf-condition-box,
  .sf-specialist-box,
  .sf-summary {
    padding: 22px 18px;
  }

  .sf-summary-item {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .sf-related-grid {
    grid-template-columns: 1fr;
  }

  .sf-related-card {
    padding: 22px 18px;
  }

  .sf-table-2,
  .sf-table-4 {
    display: block;
    overflow-x: auto;

    -webkit-overflow-scrolling: touch;
  }
}

@media screen and (max-width: 600px) {
  .sf-article .sf-number-card {
    gap: 14px !important;

    margin: 22px 0 !important;
    padding: 21px 18px !important;

    border-radius: 12px !important;
  }

  .sf-article .sf-number-card > .sf-number {
    flex-basis: 44px !important;

    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;

    font-size: 13px !important;
  }

  .sf-article .sf-number-card h3 {
    font-size: 17px !important;
    line-height: 1.5 !important;
  }

  .sf-article .sf-number-card .sf-number-content p {
    font-size: 14px !important;
    line-height: 1.85 !important;
  }

  .sf-article .sf-number-card .sf-number-content .sf-note {
    font-size: 12px !important;
  }

  .sf-feature-cards {
    gap: 18px;

    margin: 28px 0 36px;
  }

  .sf-feature-card {
    display: block;

    padding: 24px 20px 24px 24px;

    border-radius: 14px;
  }

  .sf-feature-card__number {
    justify-content: flex-start;

    width: auto;
    height: auto;

    margin-bottom: 14px;

    font-size: 24px;
  }

  .sf-feature-card__number::after {
    display: none;
  }

  .sf-feature-card__content {
    padding-left: 0;
  }

  .sf-feature-card .sf-feature-card__title {
    margin-bottom: 12px !important;
    padding-bottom: 12px !important;

    font-size: 18px !important;
  }

  .sf-feature-card__text {
    font-size: 14px;
    line-height: 1.9;
  }

  .sf-feature-card__note {
    font-size: 12px;
    line-height: 1.75;
  }

  .sf-cta {
    margin: 55px 0;
    padding: 30px 20px;
  }

  /* =========================================================
     NEXT ARTICLE
  ========================================================= */

  .sf-cta--next {
    padding: 32px 22px 30px;

    border-radius: 14px;
  }

  .sf-cta--next .sf-cta-title {
    font-size: 19px;
  }

  .sf-cta--next .sf-cta-lead {
    font-size: 14px;
  }

  .sf-cta--next .sf-cta-text {
    font-size: 14px;
  }

  .sf-next-btn {
    gap: 12px;

    margin-top: 12px;

    font-size: 13px;
  }

  .sf-next-btn__arrow {
    font-size: 17px;
  }

  /* =========================================================
     BRAND CTA
  ========================================================= */

  .sf-cta--brand {
    padding: 42px 22px;

    border-radius: 14px;
  }

  .sf-cta--brand .sf-cta-title {
    font-size: 20px;
  }

  .sf-cta--brand .sf-cta-lead {
    font-size: 15px;
  }

  .sf-cta--brand .sf-cta-text {
    font-size: 14px;
    line-height: 1.95;
  }

  .sf-cta--brand .sf-cta-btn {
    width: 100%;

    padding: 14px 18px;
  }

  .sf-recommend-box {
    margin: 55px 0;
    padding: 34px 22px 32px 25px;

    border-radius: 14px;
  }

  .sf-recommend-box::before {
    width: 3px;
  }

  .sf-recommend-label {
    margin-bottom: 10px !important;

    font-size: 10px;
  }

  .sf-recommend-title {
    font-size: 19px;
    line-height: 1.65;
  }

  .sf-recommend-lead {
    font-size: 14px;
  }

  .sf-recommend-text {
    font-size: 14px;
    line-height: 1.9;
  }

  .sf-recommend-btn {
    width: 100%;

    gap: 12px;

    margin-top: 22px;
    padding: 14px 16px;

    font-size: 13px;
  }

  .sf-recommend-btn__arrow {
    font-size: 17px;
  }

  .sf-table,
  .sf-skill-table {
    font-size: 13px;
  }

  .sf-table th,
  .sf-table td,
  .sf-skill-table th,
  .sf-skill-table td {
    padding: 11px 12px;
  }

  .sf-conclusion,
  .sf-final-box {
    padding: 22px 20px;
  }

  .sf-choice {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .sf-choice-label {
    justify-self: start;
  }

  .sf-cta {
    margin: 55px 0;
    padding: 30px 20px;
  }

  .sf-recommend-box {
    padding: 26px 20px;
  }
}

@media screen and (max-width: 480px) {.sf-article {
  padding: 0;
  
  font-size: 18px;

  line-height: 1.95;

  max-width: none;
}

  .sf-step {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 13px;

    padding-bottom: 25px;
  }

  .sf-step__number {
    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;
  }

  .sf-step__label {
    top: 10px;

    font-size: 6px;
  }

  .sf-step__digit {
    top: 23px;

    font-size: 19px;
  }

  .sf-step:not(:last-child)::after {
    top: 48px;
    left: 25px;
  }

  .sf-step .sf-step__title {
    font-size: 17px !important;
  }

  .sf-formula {
    font-size: 18px;
  }

  .sf-quote {
    font-size: 18px;
  }
}

@media screen and (max-width: 420px) {
  .sf-article .sf-number-card {
    gap: 12px !important;

    padding: 18px 15px !important;
  }

  .sf-article .sf-number-card > .sf-number {
    flex-basis: 40px !important;

    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
  }

  .sf-article .sf-number-card h3 {
    font-size: 16px !important;
  }
}

@media (max-width: 390px) {
  .sf-jc-series__header {
    padding-inline: 16px;
  }

  .sf-jc-series__row {
    grid-template-columns: 31px minmax(0, 1fr) 26px;
    gap: 8px;
  }

  .sf-jc-series__title {
    font-size: 13px;
  }

  .sf-jc-series__desc {
    line-height: 1.55;
  }
}

/* =========================================================
   共通：記事末尾の関連記事と公式資料
========================================================= */

/* =========================================================
   両セクションを持つ記事に自動適用。記事ごとのCSSは不要。
========================================================= */

.sf-article > section[aria-labelledby="related-title"] {
  margin: 68px 0 56px;
  padding: clamp(27px, 4vw, 43px);

  border: 1px solid #2f6256;
  border-radius: 8px;
  background: linear-gradient(145deg, #204b42 0%, #14382f 100%);
  box-shadow: 0 18px 38px rgba(15, 47, 39, 0.12);
}

.sf-article > section[aria-labelledby="related-title"] > h2 {
  margin: 0 0 22px;
  padding: 0 0 21px;

  border: 0;
  border-bottom: 1px solid rgba(217, 194, 156, 0.52);
  border-radius: 0;
  background: none;
  color: #fff;

  font: 500 clamp(24px, 3vw, 32px)/1.45 var(--sf-serif, serif);
  letter-spacing: 0.065em;
}

.sf-article > section[aria-labelledby="related-title"] > h2::before {
  content: "RELATED STORIES";
  display: block;

  margin-bottom: 9px;

  color: #d9c29c;

  font: 700 10px/1.4 var(--sf-sans, sans-serif);
  letter-spacing: 0.22em;
}

.sf-article > section[aria-labelledby="related-title"] > h2::after {
  content: none;
}

/* =========================================================
   flexで一列に固定し、スクリーンショットに見られる右側の空白をなくす
========================================================= */

.sf-article > section[aria-labelledby="related-title"] .sf-related-grid {
  display: flex !important;

  flex-direction: column !important;
  gap: 0 !important;

  width: 100%;

  counter-reset: sf-related;
}

.sf-article > section[aria-labelledby="related-title"] .sf-related-grid > a {
  display: grid !important;

  grid-template-columns: 44px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 16px;

  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  min-height: 80px;

  margin: 0 !important;
  padding: 16px 12px !important;

  border: 0;
  border-bottom: 1px solid rgba(235, 243, 239, 0.18);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #f6f8f5;

  font-weight: 500;
  line-height: 1.55;
  text-decoration: none;

  counter-increment: sf-related;

  transition: background-color 180ms ease,
    padding-left 180ms ease;
}

.sf-article > section[aria-labelledby="related-title"] .sf-related-grid > a:last-child {
  border-bottom: 0;
}

.sf-article > section[aria-labelledby="related-title"] .sf-related-grid > a::before {
  content: counter(sf-related, decimal-leading-zero);

  color: #d9c29c;

  font: italic 18px/1 var(--sf-serif, serif);
}

.sf-article > section[aria-labelledby="related-title"] .sf-related-grid > a::after {
  content: "↗";

  color: #d9c29c;

  font: 500 20px/1 var(--sf-sans, sans-serif);
}

.sf-article > section[aria-labelledby="related-title"] .sf-related-grid > a:hover,
.sf-article > section[aria-labelledby="related-title"] .sf-related-grid > a:focus-visible {
  transform: none;

  padding-left: 20px !important;

  border-color: rgba(235, 243, 239, 0.18);
  background: rgba(255, 255, 255, 0.075);
  box-shadow: none;
  color: #fff;

  outline-offset: -3px;
}

@media (max-width: 700px) {
  .sf-article > section[aria-labelledby="related-title"] {
    margin: 44px 0;
    padding: 25px 21px;
  }

  .sf-article > section[aria-labelledby="related-title"] .sf-related-grid > a {
    grid-template-columns: 30px minmax(0, 1fr) 18px;
    gap: 10px;

    min-height: 70px;

    padding: 13px 3px !important;

    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sf-article > section[aria-labelledby="related-title"] .sf-related-grid > a {
    transition: none;
  }
}

/* =========================================================
   公式情報：読み物カードと区別する資料一覧
========================================================= */

.sf-article > section.sf-article__sources {
  margin: 0 0 52px;
  padding: 25px 0 0;

  border-top: 2px solid #6f8f85;
  background: none;
}

.sf-article > section.sf-article__sources > h2 {
  margin: 0 0 22px;
  padding: 0;

  border: 0;
  border-radius: 0;
  background: none;
  color: #345c53;

  font: 700 18px/1.5 var(--sf-sans, sans-serif);
  letter-spacing: 0.03em;
}

.sf-article > section.sf-article__sources > h2::after {
  content: none;
}

.sf-article > section.sf-article__sources > ul {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 30px;

  margin: 0 0 16px;
  padding: 0;

  list-style: none;
  counter-reset: sf-source;
}

.sf-article > section.sf-article__sources > ul > li {
  display: flex;

  align-items: baseline;
  gap: 12px;

  min-width: 0;

  margin: 0;
  padding: 12px 0;

  border-bottom: 1px solid #e1e8e4;

  counter-increment: sf-source;

  line-height: 1.65;
}

.sf-article > section.sf-article__sources > ul > li::before {
  content: counter(sf-source, decimal-leading-zero);

  flex: 0 0 auto;

  color: #a28753;

  font: 700 11px/1.7 var(--sf-sans, sans-serif);
}

.sf-article > section.sf-article__sources > ul > li > a {
  color: #315b52;

  overflow-wrap: anywhere;

  text-decoration: underline;
  text-decoration-color: #bccfc8;
  text-underline-offset: 4px;
}

.sf-article > section.sf-article__sources > ul > li > a:hover,
.sf-article > section.sf-article__sources > ul > li > a:focus-visible {
  color: #173d35;

  text-decoration-color: currentColor;
}

.sf-article > section.sf-article__sources > p {
  color: #65736e;

  font-size: 13px;
  line-height: 1.8;
}

@media (max-width: 700px) {
  .sf-article > section.sf-article__sources > ul {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   C案：操作状態・スマホ・既存番号の扱い
   数字が本文に含まれる見出しへ、自動番号は追加しません。
========================================================= */
.sf-article :is(a, button, summary):focus-visible {
  outline: 3px solid #a58c50;
  outline-offset: 4px;
}
.sf-article :is(a, button, summary):active {
  opacity: .8;
}
.sf-article :is(.sf-point-box, .sf-check-box, .sf-notice-box) .sf-box-title::before,
.sf-article :is(.sf-point-box, .sf-check-box, .sf-notice-box) .sf-box-title::after {
  content: none;
}
.sf-article :is(.sf-point-box, .sf-check-box, .sf-notice-box) .sf-box-title strong {
  color: inherit;
}
@media (max-width: 767px) {
  .sf-article {
    padding: 0;
    font-size: 17px;
    line-height: 1.9;
  }
  .sf-article h2:not([class$="title"]):not([class$="__title"]) {
    font-size: 22px;
  }
  .sf-article h3:not([class$="title"]):not([class$="__title"]) {
    font-size: 20px;
  }
}