/* =========================================================
   比較記事・収益記事で使うカード・表・ボタンなどの共通部品
========================================================= */

/* =========================================================
   StartFrom39
   REVENUE ARTICLE SYSTEM
   収益記事 共通CSS / Premium Editorial Version

   対応：
   転職 / スキル / 資格 / スクール / サービス比較
========================================================= */

/* =========================================================
   01. ROOT
========================================================= */

.sf-money-page {
  --sf-green: #78988F;
  --sf-green-main: #6F8F85;
  --sf-green-mid: #5F7F76;
  --sf-green-deep: #3F5F57;
  --sf-green-dark: #314E47;
  --sf-green-soft: #EEF3F1;
  --sf-gold: #D4B074;
  --sf-gold-dark: #B99559;
  --sf-gold-soft: #F3EAD9;
  --sf-ivory: #F7F6F2;
  --sf-ivory-light: #FBFAF7;
  --sf-white: #FFFFFF;
  --sf-text: #333333;
  --sf-sub: #73736F;
  --sf-light: #989791;
  --sf-line: #E7E4DD;
  --sf-line-dark: #D8D3C9;

  max-width: 820px;
  width: 100%;

  margin: 0 auto;

  color: var(--sf-text);

  font-family: "Noto Sans JP",
    -apple-system,
    BlinkMacSystemFont,
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    sans-serif;
  font-size: 16px;
  line-height: 2;
  letter-spacing: .02em;
}

/* =========================================================
   02. BASE
========================================================= */

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

.sf-money-page p {
  margin: 0 0 1.7em;
}

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

.sf-money-page strong {
  color: var(--sf-green-deep);

  font-weight: 700;
}

.sf-money-page a {
  text-decoration: none;
}

.sf-money-page img {
  max-width: 100%;
  height: auto;
}

/* =========================================================
   03. H2
   雑誌の章扉のようなデザイン
========================================================= */

.sf-money-page h2 {
  position: relative;

  margin: 78px 0 31px;
  padding: 0 0 17px 22px;

  background: none;
  color: var(--sf-green-deep);

  font-size: 25px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: .025em;

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

.sf-money-page h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: .18em;

  width: 5px;
  height: calc(100% - 1.05em);
  min-height: 29px;

  background: linear-gradient(
    to bottom,
    var(--sf-green-main),
    var(--sf-green-deep)
  );
  border-radius: 10px;
}

.sf-money-page h2::after {
  content: "";
  position: absolute;
  left: 22px;
  bottom: -1px;

  width: 64px;
  height: 2px;

  background: var(--sf-gold);
}

/* =========================================================
   04. H3
========================================================= */

.sf-money-page h3 {
  position: relative;

  margin: 48px 0 22px;
  padding: 0 0 11px 18px;

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

  font-size: 20px;
  font-weight: 700;
  line-height: 1.65;

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

.sf-money-page h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45em;

  width: 7px;
  height: 7px;

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

/* =========================================================
   05. LEAD
========================================================= */

.sf-money-page .sf-lead {
  position: relative;

  margin: 24px 0 52px;
  padding: 34px 36px 34px 39px;

  background: linear-gradient(
      135deg,
      #FBFAF7 0%,
      #F7F6F2 100%
    );
  border: 1px solid #EEEAE2;
  border-radius: 4px 16px 16px 4px;
}

.sf-money-page .sf-lead::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;

  width: 4px;

  background: linear-gradient(
    to bottom,
    var(--sf-green-main),
    var(--sf-gold)
  );
}

.sf-money-page .sf-lead p {
  margin-bottom: 1.45em;
}

/* =========================================================
   06. CONCLUSION
========================================================= */

.sf-money-page .sf-conclusion {
  position: relative;

  margin: 35px 0 50px;

  background: var(--sf-white);
  border: 1px solid var(--sf-line);
  border-radius: 15px;

  overflow: hidden;

  box-shadow: 0 12px 35px rgba(49,78,71,.055);
}

.sf-money-page .sf-conclusion::before {
  content: "";
  display: block;

  width: 100%;
  height: 3px;

  background: linear-gradient(
    90deg,
    var(--sf-green-main),
    var(--sf-gold)
  );
}

.sf-money-page .sf-conclusion-title {
  padding: 19px 24px 18px;

  background: var(--sf-green-deep);
  color: var(--sf-white);

  font-size: 17px;
  font-weight: 700;
  letter-spacing: .06em;
  text-align: center;
}

/* =========================================================
   07. CHOICE
========================================================= */

.sf-money-page .sf-choice {
  display: grid;

  grid-template-columns: 190px 1fr;
  gap: 25px;
  align-items: center;

  padding: 25px 27px;

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

.sf-money-page .sf-choice:last-child {
  border-bottom: none;
}

.sf-money-page .sf-choice:hover {
  background: var(--sf-ivory-light);
}

.sf-money-page .sf-choice-label {
  display: flex;

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

  min-height: 39px;

  padding: 8px 13px;

  background: var(--sf-green-soft);
  color: var(--sf-green-deep);
  border: 1px solid #DCE7E3;
  border-radius: 999px;

  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

.sf-money-page .sf-choice-name {
  display: inline-block;

  margin-bottom: 2px;

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

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

/* =========================================================
   08. TABLE WRAPPER
========================================================= */

.sf-money-page .sf-table-wrap {
  position: relative;

  width: 100%;

  margin: 32px 0 48px;

  overflow-x: auto;

  border-radius: 12px;

  -webkit-overflow-scrolling: touch;

  box-shadow: 0 8px 28px rgba(49,78,71,.04);
}

/* =========================================================
   09. TABLE
========================================================= */

.sf-money-page .sf-table {
  width: 100%;
  min-width: 720px;

  table-layout: fixed;

  border-collapse: separate;
  border-spacing: 0;
  background: var(--sf-white);
  border: 1px solid var(--sf-line);
  border-radius: 12px;

  overflow: hidden;
}

.sf-money-page .sf-table th {
  padding: 16px 14px;

  background: var(--sf-green-main);
  color: #FFFFFF;

  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .025em;
  text-align: center;

  border-right: 1px solid rgba(255,255,255,.23);
}

.sf-money-page .sf-table th:first-child {
  background: var(--sf-green-deep);
}

.sf-money-page .sf-table th:last-child {
  border-right: none;
}

.sf-money-page .sf-table td {
  padding: 18px 16px;

  background: #FFFFFF;
  color: var(--sf-text);

  font-size: 14px;
  line-height: 1.7;
  text-align: center;
  vertical-align: middle;

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

.sf-money-page .sf-table tbody tr:nth-child(even) td {
  background: #FBFAF7;
}

.sf-money-page .sf-table tbody tr:hover td {
  background: #F5F8F7;
}

.sf-money-page .sf-table td:last-child {
  border-right: none;
}

.sf-money-page .sf-table tr:last-child td {
  border-bottom: none;
}

.sf-money-page .sf-table .sf-service {
  color: var(--sf-green-deep);

  font-weight: 700;
}

/* =========================================================
   10. TABLE COLUMN SIZES
========================================================= */

/* =========================================================
   2列
========================================================= */

.sf-money-page .sf-table.sf-table-2 th:nth-child(1),
.sf-money-page .sf-table.sf-table-2 td:nth-child(1) {
  width: 55%;
}

.sf-money-page .sf-table.sf-table-2 th:nth-child(2),
.sf-money-page .sf-table.sf-table-2 td:nth-child(2) {
  width: 45%;
}

/* =========================================================
   3列
========================================================= */

.sf-money-page .sf-table.sf-table-3 th:nth-child(1),
.sf-money-page .sf-table.sf-table-3 td:nth-child(1) {
  width: 28%;
}

.sf-money-page .sf-table.sf-table-3 th:nth-child(2),
.sf-money-page .sf-table.sf-table-3 td:nth-child(2) {
  width: 34%;
}

.sf-money-page .sf-table.sf-table-3 th:nth-child(3),
.sf-money-page .sf-table.sf-table-3 td:nth-child(3) {
  width: 38%;
}

/* =========================================================
   4列
========================================================= */

.sf-money-page .sf-table.sf-table-4 th:nth-child(1),
.sf-money-page .sf-table.sf-table-4 td:nth-child(1) {
  width: 26%;
}

.sf-money-page .sf-table.sf-table-4 th:nth-child(2),
.sf-money-page .sf-table.sf-table-4 td:nth-child(2) {
  width: 30%;
}

.sf-money-page .sf-table.sf-table-4 th:nth-child(3),
.sf-money-page .sf-table.sf-table-4 td:nth-child(3) {
  width: 18%;
}

.sf-money-page .sf-table.sf-table-4 th:nth-child(4),
.sf-money-page .sf-table.sf-table-4 td:nth-child(4) {
  width: 26%;
}

/* =========================================================
   11. POINT
========================================================= */

.sf-money-page .sf-point {
  position: relative;

  margin: 29px 0 38px;
  padding: 26px 29px 26px 32px;

  background: var(--sf-green-soft);
  border: none;
  border-radius: 11px;
}

.sf-money-page .sf-point::before {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 0;

  width: 3px;

  background: var(--sf-green-main);
  border-radius: 10px;
}

.sf-money-page .sf-point-title {
  display: block;

  margin-bottom: 13px;

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

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

/* =========================================================
   12. CHECK BOX
========================================================= */

.sf-money-page .sf-check-box {
  margin: 30px 0 38px;
  padding: 27px 30px;

  background: var(--white, #FFFFFF);
  border: 1px solid var(--sf-line);
  border-radius: 12px;
}

.sf-money-page .sf-check-box-title {
  display: flex;

  align-items: center;
  gap: 9px;

  margin-bottom: 17px;

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

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

.sf-money-page .sf-check-box-title::before {
  content: "";

  width: 18px;
  height: 2px;

  background: var(--sf-gold);
}

.sf-money-page .sf-check-list {
  margin: 0;
  padding: 0;

  list-style: none;
}

.sf-money-page .sf-check-list li {
  position: relative;

  margin: 10px 0;
  padding-left: 30px;

  line-height: 1.75;
}

.sf-money-page .sf-check-list li::before {
  content: "✓";
  position: absolute;
  top: 0;
  left: 2px;

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

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

/* =========================================================
   13. MESSAGE
========================================================= */

.sf-money-page .sf-message-box {
  position: relative;

  margin: 30px 0 38px;
  padding: 27px 30px;

  background: #FBF7EF;
  border: 1px solid #EEE3D0;
  border-radius: 11px;
}

.sf-money-page .sf-message-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 26px;

  width: 44px;
  height: 3px;

  background: var(--sf-gold);
}

/* =========================================================
   14. NOTE
========================================================= */

.sf-money-page .sf-note {
  margin: 24px 0 38px;
  padding: 17px 20px;

  background: #FAFAF8;
  color: var(--sf-sub);
  border-left: 3px solid var(--sf-gold);

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

/* =========================================================
   15. SERVICE CARD
========================================================= */

.sf-money-page .sf-card {
  position: relative;

  margin: 38px 0 58px;
  padding: 38px 35px 34px;

  background: linear-gradient(
      180deg,
      #FFFFFF 0%,
      #FDFCF9 100%
    );
  border: 1px solid var(--sf-line);
  border-radius: 16px;
  box-shadow: 0 16px 42px rgba(49,78,71,.06);

  transition: transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;
}

.sf-money-page .sf-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 35px;

  width: 70px;
  height: 3px;

  background: linear-gradient(
    90deg,
    var(--sf-green-main),
    var(--sf-gold)
  );
}

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

  border-color: #DADFD9;
  box-shadow: 0 20px 48px rgba(49,78,71,.085);
}

/* =========================================================
   16. BADGE
========================================================= */

.sf-money-page .sf-badge {
  display: inline-block;

  margin-bottom: 15px;
  padding: 6px 13px;

  background: var(--sf-gold-soft);
  color: #715D37;
  border: 1px solid #EAD9B9;
  border-radius: 999px;

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

/* =========================================================
   17. CARD NAME / CATCH
========================================================= */

.sf-money-page .sf-card-name {
  margin-bottom: 5px;

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

  font-size: 27px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .015em;
}

.sf-money-page .sf-card-catch {
  margin-bottom: 26px;

  color: var(--sf-sub);

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

/* =========================================================
   18. SUMMARY
========================================================= */

.sf-money-page .sf-summary {
  display: grid;

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

  margin: 24px 0 31px;

  overflow: hidden;

  background: #FBFAF7;
  border-top: 1px solid var(--sf-line);
  border-bottom: 1px solid var(--sf-line);
}

.sf-money-page .sf-summary-item {
  padding: 15px 11px;

  text-align: center;

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

.sf-money-page .sf-summary-item:last-child {
  border-right: none;
}

.sf-money-page .sf-summary-label {
  display: block;

  margin-bottom: 4px;

  color: var(--sf-light);

  font-size: 11px;
}

.sf-money-page .sf-summary-value {
  display: block;

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

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

/* =========================================================
   19. CTA
========================================================= */

.sf-money-page .sf-cta {
  position: relative;

  margin: 33px 0 4px;
  padding: 27px 25px 25px;

  background: linear-gradient(
      135deg,
      #F7F6F2 0%,
      #F2F4F1 100%
    );
  border: 1px solid #E5E6E0;
  border-radius: 13px;

  text-align: center;
}

.sf-money-page .sf-cta-copy {
  margin-bottom: 16px;

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

  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
}

/* =========================================================
   20. BUTTON
========================================================= */

.sf-money-page .sf-btn {
  position: relative;
  display: inline-flex;

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

  width: 100%;
  max-width: 520px;
  min-height: 60px;

  padding: 15px 50px 15px 24px;

  background: linear-gradient(
      135deg,
      #6F8F85 0%,
      #5F7F76 100%
    );
  color: #FFFFFF !important;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 7px;
  box-shadow: 0 8px 20px rgba(63,95,87,.16);

  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .025em;
  text-align: center;

  transition: transform .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

.sf-money-page .sf-btn::after {
  content: "→";
  position: absolute;
  right: 22px;
  top: 50%;

  transform: translateY(-50%);

  font-size: 18px;
  font-weight: 400;

  transition: right .18s ease;
}

.sf-money-page .sf-btn:hover {
  background: linear-gradient(
      135deg,
      #5F7F76 0%,
      #4D6E65 100%
    );
  color: #FFFFFF !important;

  transform: translateY(-2px);

  box-shadow: 0 12px 26px rgba(63,95,87,.22);
}

.sf-money-page .sf-btn:hover::after {
  right: 18px;
}

.sf-money-page .sf-cta-note {
  margin: 12px 0 0;

  color: var(--sf-light);

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

/* =========================================================
   21. FLOW
========================================================= */

.sf-money-page .sf-flow {
  margin: 35px 0 49px;
}

.sf-money-page .sf-flow-item {
  position: relative;
  display: flex;

  align-items: flex-start;
  gap: 20px;

  padding: 0 0 31px;
}

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

.sf-money-page .sf-flow-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 44px;
  left: 21px;

  width: 1px;
  height: calc(100% - 22px);

  background: linear-gradient(
    to bottom,
    var(--sf-green-main),
    var(--sf-line)
  );
}

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

  align-items: center;
  justify-content: center;
  flex: 0 0 43px;

  width: 43px;
  height: 43px;

  background: var(--sf-white);
  color: var(--sf-green-deep);
  border: 1px solid var(--sf-green-main);
  border-radius: 50%;

  font-size: 12px;
  font-weight: 700;

  box-shadow: 0 3px 10px rgba(49,78,71,.06);
}

.sf-money-page .sf-flow-content {
  flex: 1;

  padding-top: 2px;

  color: var(--sf-sub);

  line-height: 1.75;
}

.sf-money-page .sf-flow-title {
  margin-bottom: 5px;

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

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

/* =========================================================
   22. FINAL CTA
========================================================= */

.sf-money-page .sf-final-box {
  position: relative;

  margin: 65px 0 40px;
  padding: 39px 34px 34px;

  background: linear-gradient(
      145deg,
      #EDF3F1 0%,
      #F6F3EC 100%
    );
  border: 1px solid #DDE5E1;
  border-radius: 17px;

  overflow: hidden;
}

.sf-money-page .sf-final-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 4px;

  background: linear-gradient(
    90deg,
    var(--sf-green-main),
    var(--sf-gold)
  );
}

.sf-money-page .sf-final-title {
  position: relative;

  margin-bottom: 29px;
  padding-bottom: 16px;

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

  font-size: 21px;
  font-weight: 700;
  letter-spacing: .03em;
  text-align: center;
}

.sf-money-page .sf-final-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;

  width: 44px;
  height: 2px;

  background: var(--sf-gold);

  transform: translateX(-50%);
}

.sf-money-page .sf-final-item {
  margin-bottom: 18px;
  padding: 24px 24px 22px;

  background: rgba(255,255,255,.92);
  border: 1px solid rgba(220,220,214,.9);
  border-radius: 12px;

  text-align: center;

  box-shadow: 0 5px 18px rgba(49,78,71,.035);
}

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

.sf-money-page .sf-final-item > strong {
  display: block;

  margin-bottom: 5px;

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

  font-size: 15px;
}

.sf-money-page .sf-final-item .sf-cta {
  margin: 18px 0 0;
  padding: 0;

  background: none;
  border: none;
}

/* =========================================================
   23. DISCLOSURE
========================================================= */

.sf-money-page .sf-disclosure {
  margin: 36px 0 20px;
  padding: 17px 20px;

  background: #FAFAF8;
  color: #88857F;
  border-top: 1px solid var(--sf-line);
  border-bottom: 1px solid var(--sf-line);

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

/* =========================================================
   24. OPTIONAL RANK
========================================================= */

.sf-money-page .sf-rank {
  position: absolute;
  top: -13px;
  right: 21px;

  min-width: 52px;

  padding: 6px 12px;

  background: var(--sf-gold);
  color: #4E412A;
  border-radius: 999px;

  font-size: 11px;
  font-weight: 700;
  text-align: center;

  box-shadow: 0 4px 10px rgba(185,149,89,.15);
}

/* =========================================================
   25. HIGHLIGHT
========================================================= */

.sf-money-page .sf-highlight {
  padding: 0 2px;

  background: linear-gradient(
      transparent 62%,
      rgba(212,176,116,.34) 62%
    );
  color: inherit;
}

/* =========================================================
   26. SMALL SCREEN
========================================================= */

@media screen and (max-width:767px) {
  .sf-money-page {
    width: 100%;

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

  /* =========================================================
     H2
  ========================================================= */

  .sf-money-page h2 {
    margin: 57px 0 25px;
    padding: 0
      0
      14px
      17px;

    font-size: 20px;
    line-height: 1.55;
  }

  .sf-money-page h2::before {
    width: 4px;
  }

  .sf-money-page h2::after {
    left: 17px;

    width: 48px;
  }

  /* =========================================================
     H3
  ========================================================= */

  .sf-money-page h3 {
    margin: 39px 0 19px;
    padding-left: 16px;

    font-size: 18px;
  }

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

  .sf-money-page .sf-lead {
    margin: 18px 0 40px;
    padding: 24px 19px 24px 23px;

    border-radius: 3px 11px 11px 3px;
  }

  /* =========================================================
     Conclusion
  ========================================================= */

  .sf-money-page .sf-conclusion {
    margin: 28px 0 40px;

    border-radius: 12px;
  }

  .sf-money-page .sf-conclusion-title {
    padding: 16px 13px;

    font-size: 15px;
  }

  /* =========================================================
     Choice
  ========================================================= */

  .sf-money-page .sf-choice {
    display: block;

    padding: 20px 18px;
  }

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

    min-height: auto;

    margin-bottom: 12px;
    padding: 6px 11px;

    font-size: 12px;
  }

  .sf-money-page .sf-choice-name {
    font-size: 16px;
  }

  /* =========================================================
     Table
  ========================================================= */

  .sf-money-page .sf-table-wrap {
    margin: 27px 0 40px;

    border-radius: 9px;
  }

  .sf-money-page .sf-table {
    min-width: 700px;
  }

  .sf-money-page .sf-table th {
    padding: 12px 9px;

    font-size: 12px;
  }

  .sf-money-page .sf-table td {
    padding: 14px 10px;

    font-size: 12px;
  }

  /* =========================================================
     Point
  ========================================================= */

  .sf-money-page .sf-point {
    margin: 25px 0 32px;
    padding: 21px 18px 21px 22px;

    border-radius: 9px;
  }

  /* =========================================================
     Check
  ========================================================= */

  .sf-money-page .sf-check-box {
    margin: 25px 0 32px;
    padding: 22px 19px;

    border-radius: 10px;
  }

  /* =========================================================
     Message
  ========================================================= */

  .sf-money-page .sf-message-box {
    margin: 25px 0 32px;
    padding: 22px 19px;

    border-radius: 9px;
  }

  /* =========================================================
     Card
  ========================================================= */

  .sf-money-page .sf-card {
    margin: 32px 0 46px;
    padding: 31px 19px 25px;

    border-radius: 13px;
  }

  .sf-money-page .sf-card::before {
    left: 19px;

    width: 55px;
  }

  .sf-money-page .sf-card-name {
    font-size: 22px;
  }

  .sf-money-page .sf-card-catch {
    margin-bottom: 21px;

    font-size: 13px;
  }

  /* =========================================================
     Summary
  ========================================================= */

  .sf-money-page .sf-summary {
    grid-template-columns: 1fr;

    margin: 21px 0 27px;
  }

  .sf-money-page .sf-summary-item {
    padding: 12px 11px;

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

  .sf-money-page .sf-summary-item:last-child {
    border-bottom: none;
  }

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

  .sf-money-page .sf-cta {
    margin-top: 27px;
    padding: 22px 15px 20px;
  }

  .sf-money-page .sf-cta-copy {
    font-size: 14px;
  }

  .sf-money-page .sf-btn {
    min-height: 56px;

    padding: 13px
      43px
      13px
      16px;

    font-size: 14px;
  }

  .sf-money-page .sf-btn::after {
    right: 17px;
  }

  /* =========================================================
     Flow
  ========================================================= */

  .sf-money-page .sf-flow {
    margin: 29px 0 40px;
  }

  .sf-money-page .sf-flow-item {
    gap: 14px;

    padding-bottom: 27px;
  }

  .sf-money-page .sf-flow-num {
    flex-basis: 38px;

    width: 38px;
    height: 38px;

    font-size: 11px;
  }

  .sf-money-page .sf-flow-item:not(:last-child)::after {
    top: 39px;
    left: 18px;
  }

  .sf-money-page .sf-flow-title {
    font-size: 15px;
  }

  /* =========================================================
     Final
  ========================================================= */

  .sf-money-page .sf-final-box {
    margin: 51px 0 31px;
    padding: 29px 15px 20px;

    border-radius: 13px;
  }

  .sf-money-page .sf-final-title {
    margin-bottom: 22px;

    font-size: 18px;
  }

  .sf-money-page .sf-final-item {
    padding: 20px 14px 18px;

    border-radius: 10px;
  }

  /* =========================================================
     Disclosure
  ========================================================= */

  .sf-money-page .sf-disclosure {
    margin-top: 30px;
    padding: 15px 14px;

    font-size: 10px;
  }
}