/* ============================================
   楽たすクラウドファクタリング 記事スタイル
   MJSトンマナ準拠 / CTA部分のみ楽たすトンマナ
   親テンプレ: SITEPUBLIS (.l-block-box-02 > div, max-width:1008px, padding:60px 24px)
   実コンテンツ幅: 960px
   ============================================ */

/* --- Variables --- */
:root {
  /* MJS本体 */
  --fa-primary: #0080cc;
  --fa-navy: #00154d;
  --fa-text: #333;
  --fa-text-light: #666;
  --fa-border: #dedede;
  --fa-bg-light: #f8f8f8;
  --fa-table-header: #0080cc;
  --fa-table-label: #f2f9ff;
  --fa-link: #0080cc;

  /* 楽たす（CTAのみ） */
  --fa-green: #55C10C;
  --fa-cta-blue: #01ABF6;
  --fa-cta-orange: #f64f01;

  /* Typography */
  --fa-font: "Noto Sans JP", sans-serif;

  /* Spacing */
  --fa-sp-xs: 8px;
  --fa-sp-sm: 16px;
  --fa-sp-md: 24px;
  --fa-sp-lg: 32px;
  --fa-sp-xl: 40px;
  --fa-sp-xxl: 60px;
}

/* =====================
   Base & Reset
   ===================== */
.fa-article {
  max-width: 960px;
  margin: 0 auto;
  font-family: var(--fa-font);
  font-size: 16px;
  color: var(--fa-text);
  line-height: 2;
  word-break: break-word;
  overflow-wrap: break-word;
}

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

/* MJS親テンプレのデフォルトスタイルを上書き（フォント・色のみ） */
.fa-article h1,
.fa-article h2,
.fa-article h3,
.fa-article h4 {
  font-family: var(--fa-font);
  color: var(--fa-text);
}

.fa-article p {
  margin: 0 0 var(--fa-sp-xl);
}

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

.fa-article img {
  max-width: 100%;
  height: auto;
  display: block;
}

.fa-article a {
  color: var(--fa-link);
  text-decoration: underline;
}

.fa-article a:hover {
  text-decoration: none;
}

.fa-article ul,
.fa-article ol {
  margin: 0 0 var(--fa-sp-xl);
  padding: 0 0 0 1.5em;
}

.fa-article ul:last-child,
.fa-article ol:last-child {
  margin-bottom: 0;
}

/* =====================
   Page Title & H1
   ===================== */
.fa-page-title {
  padding-top: 60px;
  margin-bottom: var(--fa-sp-xl);
}

.fa-h1 {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--fa-text);
}

/* =====================
   Eyecatch
   ===================== */
.fa-eyecatch {
  margin: 0 0 var(--fa-sp-xl);
}

.fa-eyecatch img {
  width: 100%;
  border-radius: 4px;
}

/* =====================
   Headings
   ===================== */

/* H2: 左バー（太6px MJSブルー） */
.fa-heading-h2 {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 40px 0 16px;
  padding: 24px 0 16px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.5;
}

.fa-heading-h2::before {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 6px;
  height: 1.2em;
  margin-top: 0.15em;
  background: var(--fa-primary);
}

/* H3: 下線フル幅（2px MJSブルー） */
.fa-heading-h3 {
  margin: 40px 0 48px;
  padding: 16px 0 12px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.6;
  border-bottom: 2px solid var(--fa-primary);
}

/* H4: 淡背景 + 左ボーダー（4px MJSブルー） */
.fa-heading-h4 {
  margin: var(--fa-sp-lg) 0 var(--fa-sp-sm);
  padding: 12px 16px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  background: var(--fa-bg-light);
  border-left: 4px solid var(--fa-primary);
}

/* =====================
   Point Boxes (装飾ブロック)
   ===================== */

/* 共通ベース */
.fa-point {
  margin: var(--fa-sp-xl) 0;
  padding: 20px 24px 20px 60px;
  border-radius: 6px;
  border: 1.5px solid;
  font-size: 15px;
  line-height: 1.8;
  position: relative;
}

.fa-point::before {
  position: absolute;
  left: 16px;
  top: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 15px;
  line-height: 1;
}

.fa-point p {
  margin-bottom: 0;
}

.fa-article .fa-point ul {
  margin-bottom: 0;
  padding-left: 1.2em;
  list-style: disc;
}

.fa-point li {
  margin-bottom: 6px;
}

.fa-point li:last-child {
  margin-bottom: 0;
}

/* announce（注意喚起）— オレンジ/アンバー系 */
.fa-point--announce {
  background: #fff8f0;
  border-color: #e89b2d;
}

.fa-point--announce::before {
  content: "⚠";
  background: rgba(232, 155, 45, 0.15);
  color: #e89b2d;
}

/* good（チェック）— グリーン系 */
.fa-point--good {
  background: #f0f9f0;
  border-color: #4caf50;
}

.fa-point--good::before {
  content: "✔";
  background: rgba(76, 175, 80, 0.15);
  color: #4caf50;
}

/* info（情報）— ブルー系 */
.fa-point--info {
  background: #f0f6ff;
  border-color: var(--fa-primary);
}

.fa-point--info::before {
  content: "ℹ";
  background: rgba(0, 128, 204, 0.15);
  color: var(--fa-primary);
}

/* =====================
   Global TOC (記事全体の目次)
   ===================== */
.fa-global-toc {
  margin: var(--fa-sp-xl) 0;
  padding: 0;
  border: 1px solid #d5d5d5;
  border-radius: 8px;
  overflow: hidden;
}

.fa-global-toc__title {
  padding: 14px 24px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: var(--fa-primary);
  text-align: center;
}

.fa-article .fa-global-toc__list {
  margin: 0;
  padding: 20px 28px 20px 48px;
  list-style: none;
  counter-reset: toc-counter;
}

.fa-global-toc__list li {
  position: relative;
  padding: 8px 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  border-bottom: 1px solid #efefef;
  counter-increment: toc-counter;
  padding-left: 8px;
}

.fa-global-toc__list li:last-child {
  border-bottom: none;
}

.fa-global-toc__list li::before {
  content: counter(toc-counter) ".";
  position: absolute;
  left: -28px;
  top: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--fa-primary);
  line-height: 1.6;
}

.fa-global-toc__list a {
  color: var(--fa-text);
  text-decoration: none;
}

.fa-global-toc__list a:hover {
  color: var(--fa-primary);
  text-decoration: underline;
}

/* =====================
   TOC Box (目次)
   ===================== */
.fa-article .fa-toc {
  margin: var(--fa-sp-xl) 0;
  padding: 24px 28px;
  border: 1px solid #d5d5d5;
  border-radius: 4px;
  list-style: none;
}

.fa-toc li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 14px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.75;
}

.fa-toc li:last-child {
  margin-bottom: 0;
}

.fa-toc li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fa-primary);
}

.fa-toc a {
  color: #187fef;
}

/* =====================
   Compare Table
   ===================== */
.fa-table-wrap {
  margin: var(--fa-sp-xl) 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.fa-table {
  width: 100%;
  min-width: 580px;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #d5d5d5;
  border-radius: 4px;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.7;
}

.fa-table thead th {
  background: var(--fa-table-header);
  color: #fff;
  font-weight: 700;
  padding: 14px 16px;
  text-align: center;
}

.fa-table thead th + th {
  border-left: 1px solid #fff;
}

.fa-table tbody tr {
  border-top: 1px solid #d5d5d5;
}

.fa-table tbody th,
.fa-table tbody td {
  padding: 14px 16px;
  text-align: center;
  vertical-align: middle;
  border-top: 1px solid #d5d5d5;
}

.fa-table tbody th {
  background: var(--fa-table-label);
  font-weight: 700;
  white-space: nowrap;
}

.fa-table tbody td + td,
.fa-table tbody th + td {
  border-left: 1px solid #d5d5d5;
}

/* =====================
   Quote (引用ブロック)
   ===================== */
.fa-quote {
  margin: var(--fa-sp-xl) 0;
  padding: 24px 24px 24px 40px;
  background: #f6f6f6;
  border-left: 4px solid var(--fa-primary);
}

.fa-quote p {
  font-size: 15px;
  line-height: 1.9;
  margin-bottom: var(--fa-sp-xs);
}

.fa-quote cite {
  display: block;
  margin-top: var(--fa-sp-xs);
  font-size: 13px;
  font-weight: 500;
  font-style: normal;
  color: var(--fa-primary);
}

.fa-quote cite a {
  color: var(--fa-primary);
}

/* =====================
   CapBlock (情報ボックス)
   ===================== */
.fa-capblock {
  margin: var(--fa-sp-xl) 0;
  border-radius: 6px;
  overflow: hidden;
  background: #f2f9ff;
}

.fa-capblock__title {
  padding: 12px 24px;
  background: var(--fa-primary);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}

.fa-capblock__body {
  padding: var(--fa-sp-md) 28px;
}

.fa-article .fa-capblock__body ul {
  list-style: none;
  margin-bottom: 0;
  padding-left: 0;
}

.fa-capblock__body li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.75;
}

.fa-capblock__body li:last-child {
  margin-bottom: 0;
}

.fa-capblock__body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fa-primary);
}

/* =====================
   Checklist
   ===================== */
.fa-checklist {
  margin: var(--fa-sp-xl) 0;
  border-radius: 6px;
  overflow: hidden;
  background: #f2f9ff;
}

.fa-checklist__title {
  padding: 12px 24px;
  background: var(--fa-primary);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}

.fa-checklist__body {
  padding: var(--fa-sp-md) 28px;
}

.fa-article .fa-checklist__body ul {
  list-style: none;
  margin-bottom: 0;
  padding-left: 0;
}

.fa-checklist__body li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 14px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.75;
}

.fa-checklist__body li:last-child {
  margin-bottom: 0;
}

.fa-checklist__body li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.25em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: var(--fa-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

/* =====================
   StepNavigation
   ===================== */
.fa-article .fa-steps {
  margin: var(--fa-sp-xl) 0;
  padding: 16px 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.fa-steps__item {
  display: flex;
  align-items: stretch;
  gap: 20px;
}

/* Number column: circle + vertical line */
.fa-steps__num {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80px;
  position: relative;
}

/* Vertical line: pseudo-element from circle bottom through gap to next step */
.fa-steps__item:not(:last-child) .fa-steps__num::after {
  content: "";
  position: absolute;
  top: 88px; /* 80px circle + 8px gap */
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  bottom: -24px; /* extends through the 24px gap to next step */
  background: var(--fa-primary);
}

/* Circle: STEP + number inside */
.fa-steps__circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--fa-primary);
  color: #fff;
  line-height: 1;
}

.fa-steps__circle .fa-steps__label {
  font-size: 18px;
  font-weight: 400;
  color: #fff;
  letter-spacing: 0;
}

.fa-steps__circle .fa-steps__number {
  font-size: 32px;
  font-weight: 400;
}

.fa-steps__content {
  flex: 1;
  min-width: 0;
  padding-top: 6px;
}

.fa-steps__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 8px;
  color: var(--fa-text);
}

.fa-steps__desc {
  font-size: 15px;
  line-height: 1.9;
  color: var(--fa-text);
}

/* =====================
   CTA Box (楽たすトンマナ)
   ===================== */
.fa-cta-box {
  margin: var(--fa-sp-xl) 0;
  border: 2px solid var(--fa-green);
  border-radius: 8px;
  overflow: hidden;
}

.fa-cta-box__title {
  padding: 12px 24px;
  background: var(--fa-green);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}

.fa-cta-box__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 32px;
}

.fa-cta-box__logo {
  max-width: 440px;
}

.fa-cta-box__logo img {
  width: 100%;
}

.fa-article .fa-cta-box__features {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 0;
  padding: 8px 24px;
}

.fa-cta-box__features li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.75;
  padding-bottom: 12px;
  border-bottom: 1px solid #ededed;
  width: 100%;
  justify-content: center;
}

.fa-cta-box__features li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.fa-cta-box__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
}

.fa-cta-box__features li strong {
  font-size: 24px;
  font-weight: 700;
  color: var(--fa-green);
}

.fa-cta-box__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px 48px;
  background: var(--fa-cta-orange);
  color: #fff !important;
  font-size: 18px;
  font-weight: 700;
  border-radius: 6px;
  text-decoration: none !important;
  transition: opacity 0.2s;
}

.fa-cta-box__btn:hover {
  opacity: 0.85;
  color: #fff !important;
  text-decoration: none !important;
}

.fa-cta-box__note {
  font-size: 11px;
  line-height: 1.7;
  color: #a2a2a2;
  text-align: center;
}

/* Inline CTA button (記事中) — CTAボックスと共通デザイン */
.fa-cta-inline {
  text-align: center;
  margin: var(--fa-sp-xl) 0;
}

.fa-cta-inline a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px 48px;
  background: var(--fa-cta-orange);
  color: #fff !important;
  font-size: 18px;
  font-weight: 700;
  border-radius: 6px;
  text-decoration: none !important;
  transition: opacity 0.2s;
}

.fa-cta-inline a:hover {
  opacity: 0.85;
  color: #fff !important;
  text-decoration: none !important;
}

/* =====================
   Section image
   ===================== */
.fa-section-image {
  margin: 16px 0 var(--fa-sp-xl);
}

.fa-section-image img {
  max-width: 600px;
  width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 0 auto;
}

/* =====================
   Responsive: Tablet
   ===================== */
@media (max-width: 1023px) {
  .fa-h1 {
    font-size: 32px;
  }

  .fa-heading-h2 {
    font-size: 26px;
  }

  .fa-heading-h3 {
    font-size: 21px;
  }

  .fa-heading-h4 {
    font-size: 17px;
  }
}

/* =====================
   Responsive: SP
   ===================== */
@media (max-width: 767px) {
  .fa-article {
    font-size: 15px;
    line-height: 1.9;
    padding: 0 16px;
  }

  .fa-h1 {
    font-size: 26px;
    line-height: 1.4;
  }

  .fa-heading-h2 {
    font-size: 22px;
    align-items: flex-start;
    gap: 12px;
    margin-top: 32px;
    padding: 16px 0 12px;
  }

  .fa-heading-h2::before {
    width: 5px;
    height: 1.5em;
    align-self: flex-start;
  }

  .fa-heading-h3 {
    font-size: 20px;
    margin: 32px 0 20px;
    padding: 12px 0 10px;
  }

  .fa-heading-h4 {
    font-size: 16px;
    padding: 10px 14px;
  }

  /* Table: SP時はコンテナ内に収める */
  .fa-table {
    font-size: 12px;
    min-width: 0;
  }

  .fa-table thead th,
  .fa-table tbody th,
  .fa-table tbody td {
    padding: 8px 10px;
    white-space: normal;
  }

  .fa-table tbody th {
    white-space: normal;
  }

  /* Steps */
  .fa-steps__item {
    gap: 14px;
  }

  .fa-steps__num {
    width: 60px;
  }

  .fa-steps__circle {
    width: 60px;
    height: 60px;
  }

  .fa-steps__circle .fa-steps__label {
    font-size: 14px;
  }

  .fa-steps__circle .fa-steps__number {
    font-size: 24px;
  }

  .fa-steps__item:not(:last-child) .fa-steps__num::after {
    top: 68px; /* 60px circle + 8px gap */
    bottom: -24px;
  }

  .fa-steps__title {
    font-size: 16px;
  }

  .fa-steps__desc {
    font-size: 14px;
  }

  /* CTA */
  .fa-cta-box__body {
    padding: 24px 16px;
  }

  .fa-cta-box__btn {
    padding: 14px 24px;
    font-size: 16px;
  }

  .fa-cta-inline a {
    padding: 14px 24px;
    font-size: 16px;
  }

  .fa-cta-box__logo {
    max-width: 280px;
  }

  .fa-article .fa-cta-box__features {
    padding: 4px 0;
  }

  .fa-cta-box__features li {
    font-size: 14px;
  }

  .fa-cta-box__features li strong {
    font-size: 18px;
  }

  /* TOC */
  .fa-article .fa-toc {
    padding: var(--fa-sp-sm) 20px;
  }

  .fa-toc li {
    font-size: 14px;
  }

  /* CapBlock */
  .fa-capblock__body,
  .fa-checklist__body {
    padding: var(--fa-sp-sm) 20px;
  }

  /* Quote */
  .fa-quote {
    padding: var(--fa-sp-sm);
  }
}