/* =========================================================
   全カテゴリーに共通するカード・色・ホバー動作
========================================================= */

/* =========================================================
   Shared category warmth and unified interaction.
========================================================= */

:where(.sf-life-hub,.sf-money-hub,.sf-work-hub) {
  --category-warm: #b8735c;
  --category-warm-soft: #f3dfd3;
}

:where(.sf-life-path-num,.sf-money-path-num,.sf-work-path-num,.sf-life-category-num,.sf-money-category-num,.sf-work-category-num) {
  color: var(--category-warm) !important;
}

:where(.sf-life-tag,.sf-money-tag,.sf-work-tag) {
  display: inline-flex;

  align-items: center;

  width: max-content;
  min-height: 24px;

  padding: 3px 10px;

  color: #8e503e !important;
  background: var(--category-warm-soft) !important;
  border: 1px solid #e7c9ba;
  border-radius: 999px;
}

:where(.sf-life-path-card,.sf-money-path-card,.sf-work-path-card,.sf-life-feature-card,.sf-money-feature-card,.sf-work-feature-card,.sf-life-article-card,.sf-money-article-card,.sf-work-article-card) {
  border-color: #ded3c3 !important;
  box-shadow: 0 10px 28px rgba(38,60,53,.045);
}

:where(.sf-life-path-card,.sf-money-path-card,.sf-work-path-card):nth-child(even),
:where(.sf-life-article-card,.sf-money-article-card,.sf-work-article-card):nth-child(even) {
  background: #fffaf6;
}

:where(.sf-life-path-card,.sf-money-path-card,.sf-work-path-card,.sf-life-feature-card,.sf-money-feature-card,.sf-work-feature-card,.sf-life-article-card,.sf-money-article-card,.sf-work-article-card) a,
:where(.sf-life-path-link,.sf-money-path-link,.sf-work-path-link) {
  color: #9a5843 !important;
}

:where(.sf-life-wide-link,.sf-money-wide-link,.sf-work-wide-link)>a {
  position: relative;
  display: flex;

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

  min-height: 66px;

  color: #173f38 !important;
  background: #fffaf2 !important;
  border: 1px solid #d2ad68 !important;
  box-shadow: 6px 6px 0 rgba(224,195,140,.28);

  font-weight: 600;
  letter-spacing: .035em;

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

:where(.sf-life-wide-link,.sf-money-wide-link,.sf-work-wide-link)>a::before {
  content: "";
  position: absolute;
  inset: 6px;

  border: 1px solid rgba(178,138,50,.28);

  pointer-events: none;
}

:where(.sf-life-wide-link,.sf-money-wide-link,.sf-work-wide-link)>a:hover {
  color: #fffaf2 !important;
  background: #173f38 !important;
  border-color: #d9b66f !important;
  box-shadow: 3px 3px 0 rgba(224,195,140,.38);

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

/* =========================================================
   Family & inheritance and end-of-life landing pages.
========================================================= */

.sf-category-hub {
  --hub-deep: #274f47;
  --hub-mid: #6f8f85;
  --hub-warm: #b8735c;
  --hub-warm-soft: #f3dfd3;
  --hub-gold: #d9b66f;
  --hub-ivory: #f8f5ee;
  --hub-ink: #28332f;

  color: var(--hub-ink);
  background: var(--hub-ivory);
}

.sf-category-hub--family {
  --hub-deep: #355d54;
  --hub-mid: #8b9f96;
  --hub-warm: #b66f5c;
  --hub-warm-soft: #f2ded5;
}

.sf-category-hub--planning {
  --hub-deep: #384f49;
  --hub-mid: #87958f;
  --hub-warm: #a96c5b;
  --hub-warm-soft: #eee0d8;
}

.sf-category-hub__hero {
  position: relative;
  overflow: hidden;

  color: #fff;
  background: linear-gradient(118deg,var(--hub-deep) 0%,var(--hub-deep) 50%,var(--hub-mid) 100%);
}

.sf-category-hub__hero::before {
  content: "39";
  position: absolute;
  right: 5vw;
  bottom: -80px;

  color: rgba(255,255,255,.045);

  font: 400 300px/1 Georgia,serif;
}

.sf-category-hub__hero::after {
  content: "";
  position: absolute;
  top: 0;
  right: 17%;

  width: 1px;
  height: 100%;

  background: linear-gradient(transparent,rgba(224,195,140,.52),transparent);

  transform: rotate(20deg);
}

.sf-category-hub__hero-inner {
  position: relative;
  z-index: 1;

  padding-block: 92px 96px;
}

.sf-category-hub__eyebrow {
  margin: 0 0 24px;

  color: var(--hub-gold);

  font: 700 11px/1.4 var(--sf-sans);
  letter-spacing: .24em;
}

.sf-category-hub__hero h1 {
  max-width: 820px;

  margin: 0 0 25px;

  color: #fff;

  font: 500 clamp(34px,4vw,58px)/1.55 var(--sf-serif);
  letter-spacing: .055em;
}

.sf-category-hub__lead {
  max-width: 720px;

  margin: 0;

  color: rgba(255,255,255,.82);

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

.sf-category-hub__note {
  margin: 30px 0 0;

  color: var(--hub-gold);

  font: 500 11px/1.5 var(--sf-serif);
  letter-spacing: .08em;
}

.sf-category-hub__topics,
.sf-category-hub__latest {
  padding-block: 92px 100px;
}

.sf-category-hub__heading {
  margin-bottom: 42px;

  text-align: center;
}

.sf-category-hub__heading>p,
.sf-category-hub__latest-head>div>p {
  margin: 0 0 10px;

  color: var(--hub-warm);

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

.sf-category-hub__heading h2,
.sf-category-hub__latest-head h2 {
  margin: 0 0 10px;

  color: var(--hub-deep);

  font: 500 clamp(27px,3vw,40px)/1.55 var(--sf-serif);
}

.sf-category-hub__heading>span,
.sf-category-hub__latest-head>span {
  color: #717873;

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

.sf-category-hub__topic-grid {
  display: grid;

  grid-template-columns: repeat(3,1fr);
  gap: 20px;
}

.sf-category-hub__topic-card {
  position: relative;

  min-height: 300px;

  padding: 34px 31px 31px;

  background: #fffefa;
  border: 1px solid #ded3c3;
  box-shadow: 0 12px 30px rgba(38,60,53,.055);

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

.sf-category-hub__topic-card:nth-child(2) {
  background: #fff8f3;
}

.sf-category-hub__topic-card:hover {
  transform: translateY(-7px);

  border-color: #c9a979;
  box-shadow: 0 22px 40px rgba(38,60,53,.13);
}

.sf-category-hub__topic-card b {
  display: block;

  margin-bottom: 19px;

  color: var(--hub-warm);

  font: italic 36px/1 Georgia,serif;
}

.sf-category-hub__topic-card small {
  display: block;

  color: #a27939;

  font-size: 9px;
  letter-spacing: .18em;
}

.sf-category-hub__topic-card h3 {
  margin: 12px 0 13px;

  color: var(--hub-deep);

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

.sf-category-hub__topic-card p {
  margin: 0 0 38px;

  color: #68716d;

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

.sf-category-hub__topic-card span {
  position: absolute;
  left: 31px;
  bottom: 27px;

  color: #96533f;

  font-size: 10px;
  letter-spacing: .08em;
}

.sf-category-hub__latest {
  background: #f0ebe2;
}

.sf-category-hub__latest-head {
  display: flex;

  justify-content: space-between;
  align-items: end;
  gap: 40px;

  margin-bottom: 42px;
}

.sf-category-hub__latest-head>span {
  max-width: 430px;

  text-align: right;
}

.sf-category-hub .sf-card {
  background: #fffefa;
  border-color: #ded3c3;
  box-shadow: 0 10px 26px rgba(38,60,53,.045);
}

.sf-category-hub .sf-card:nth-child(even) {
  background: #fff9f5;
}

.sf-category-hub .sf-card__media {
  background: #e8ded1;
}

.sf-category-hub .sf-card__meta span {
  display: inline-flex;

  align-items: center;

  min-height: 23px;

  padding: 3px 9px;

  color: #8e503e;
  background: var(--hub-warm-soft);
  border: 1px solid #e2c8bb;
  border-radius: 999px;

  font-weight: 600;
}

.sf-category-hub .sf-card__title {
  color: var(--hub-deep);
}

.sf-category-hub .sf-text-link {
  color: #985642;
}

.sf-category-hub__empty {
  text-align: center;

  color: #717873;
}

.sf-category-hub__ending {
  position: relative;
  overflow: hidden;

  padding-block: 100px 108px;

  color: #fff;

  text-align: center;

  background: var(--hub-deep);
  border-top: 3px solid var(--hub-gold);
}

.sf-category-hub__ending::before {
  content: "39";
  position: absolute;
  inset: -45px 0 auto;

  color: rgba(255,255,255,.035);

  font: 400 270px/1 Georgia,serif;
}

.sf-category-hub__ending .sf-container {
  position: relative;
  z-index: 1;
}

.sf-category-hub__ending p {
  margin: 0 0 22px;

  color: var(--hub-gold);

  font-size: 10px;
  letter-spacing: .23em;
}

.sf-category-hub__ending h2 {
  margin: 0;

  color: #fff;

  font: 500 clamp(29px,3.5vw,46px)/1.7 var(--sf-serif);
}

.sf-category-hub__ending span {
  display: block;

  max-width: 650px;

  margin: 25px auto 0;

  color: rgba(255,255,255,.76);

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

.sf-category-hub__ending a {
  position: relative;
  display: inline-flex;

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

  min-width: 310px;
  min-height: 62px;

  margin-top: 36px;
  padding: 15px 48px 15px 25px;

  color: var(--hub-deep);
  background: #fffaf2;
  border: 1px solid var(--hub-gold);
  box-shadow: 6px 6px 0 rgba(217,182,111,.25);

  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;

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

.sf-category-hub__ending a::after {
  content: "→";
  position: absolute;
  right: 24px;

  color: #a97725;

  font-size: 16px;

  transition: transform .25s ease;
}

.sf-category-hub__ending a:hover {
  color: #fffaf2;
  background: #183f39;
  box-shadow: 3px 3px 0 rgba(217,182,111,.38);

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

.sf-category-hub__ending a:hover::after {
  transform: translateX(4px);
}

@media (max-width:900px) {
  .sf-category-hub__topic-grid {
    gap: 13px;
  }

  .sf-category-hub__topic-card {
    padding-inline: 23px;
  }

  .sf-category-hub__topic-card span {
    left: 23px;
  }
}

@media (max-width:767px) {
  .sf-category-hub__hero-inner {
    padding: 58px 22px 63px;
  }

  .sf-category-hub__hero::before {
    right: -8px;
    bottom: -20px;

    font-size: 120px;
  }

  .sf-category-hub__hero h1 {
    font-size: 29px;
    line-height: 1.65;
  }

  .sf-category-hub__lead {
    font-size: 13px;
    line-height: 2;
  }

  .sf-category-hub__topics,
  .sf-category-hub__latest {
    padding-block: 65px 72px;
  }

  .sf-category-hub__topics>.sf-container,
  .sf-category-hub__latest>.sf-container {
    width: calc(100% - 40px);
  }

  .sf-category-hub__topic-grid,
  .sf-category-hub .sf-card-grid {
    grid-template-columns: 1fr;
  }

  .sf-category-hub__topic-card {
    min-height: 245px;

    padding: 27px 23px;
  }

  .sf-category-hub__topic-card span {
    left: 23px;
    bottom: 23px;
  }

  .sf-category-hub__latest-head {
    display: block;

    margin-bottom: 31px;
  }

  .sf-category-hub__latest-head>span {
    display: block;

    margin-top: 10px;

    text-align: left;
  }

  .sf-category-hub__ending {
    padding: 80px 22px 88px;
  }

  .sf-category-hub__ending h2 {
    font-size: 27px;
  }

  .sf-category-hub__ending span {
    font-size: 12px;
  }

  .sf-category-hub__ending a {
    width: 100%;
    min-width: 0;
    max-width: 340px;

    padding-inline: 20px 46px;
  }

  :where(.sf-life-intro,.sf-money-intro,.sf-work-intro,.sf-life-featured,.sf-money-featured,.sf-work-featured,.sf-life-category-section,.sf-money-category-section,.sf-work-category-section) {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
}

/* =========================================================
   v1.5.9: the complete article card is a clear, generous link target.
========================================================= */

:where(.sf-life-article-card,.sf-money-article-card,.sf-work-article-card) {
  position: relative;

  cursor: pointer;

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

:where(.sf-life-article-card,.sf-money-article-card,.sf-work-article-card):hover {
  transform: translateY(-6px);

  border-color: #c8a777 !important;
  box-shadow: 0 20px 38px rgba(38,60,53,.12);
}

:where(.sf-life-article-card,.sf-money-article-card,.sf-work-article-card):focus-visible {
  outline: 2px solid var(--sf-gold);
  outline-offset: 4px;
}

/* =========================================================
   More breathing room for the final ALL ARTICLES band.
========================================================= */

:where(.sf-life-wide-link,.sf-money-wide-link,.sf-work-wide-link) {
  gap: 54px !important;

  min-height: 190px !important;

  padding: 44px 7vw !important;
}

:where(.sf-life-wide-link,.sf-money-wide-link,.sf-work-wide-link)>div {
  max-width: 720px;
}

:where(.sf-life-wide-link,.sf-money-wide-link,.sf-work-wide-link) h3 {
  margin-block: 12px 10px !important;
}

:where(.sf-life-wide-link,.sf-money-wide-link,.sf-work-wide-link)>a {
  flex: 0 0 auto;

  min-width: 245px;

  padding: 17px 22px !important;

  text-align: center;
}

@media (max-width:767px) {
  :where(.sf-life-wide-link,.sf-money-wide-link,.sf-work-wide-link) {
    display: block !important;

    min-height: 0 !important;

    padding: 34px 24px 38px !important;
  }

  :where(.sf-life-wide-link,.sf-money-wide-link,.sf-work-wide-link)>a {
    width: 100%;
    min-width: 0;

    margin-top: 27px !important;
    padding: 16px 18px !important;
  }
}

/* =========================================================
   v1.6.0: keep the closing invitation centered as one composed unit.
========================================================= */

:where(.sf-life-hub,.sf-money-hub,.sf-work-hub) > :where(.sf-life-wide-link,.sf-money-wide-link,.sf-work-wide-link) {
  display: grid !important;

  grid-template-columns: minmax(0,650px) 290px;
  justify-content: center !important;
  align-items: center !important;
  column-gap: 64px !important;

  width: 100%;
  max-width: none;
  min-height: 180px !important;

  margin-inline: auto !important;
  padding: 38px max(28px,calc((100vw - 1120px)/2)) !important;
}

:where(.sf-life-wide-link,.sf-money-wide-link,.sf-work-wide-link)>div {
  width: 100%;
  max-width: 650px;
}

:where(.sf-life-wide-link,.sf-money-wide-link,.sf-work-wide-link)>a {
  width: 290px;
  min-width: 0;
}

@media (max-width:767px) {
  :where(.sf-life-hub,.sf-money-hub,.sf-work-hub) > :where(.sf-life-wide-link,.sf-money-wide-link,.sf-work-wide-link) {
    display: block !important;

    padding: 34px 24px 38px !important;
  }

  :where(.sf-life-wide-link,.sf-money-wide-link,.sf-work-wide-link)>a {
    width: 100%;
  }
}

/* =========================================================
   v1.8.2: give the Life and Money ALL ARTICLES bands more room.
========================================================= */

@media (min-width:1180px) {
  :where(.sf-life-hub,.sf-money-hub) > :where(.sf-life-wide-link,.sf-money-wide-link) {
    grid-template-columns: minmax(0,720px) 330px !important;
    column-gap: 60px !important;

    padding-left: max(30px,calc((100vw - 1160px)/2)) !important;
    padding-right: max(30px,calc((100vw - 1160px)/2)) !important;
  }

  :where(.sf-life-wide-link,.sf-money-wide-link)>div {
    max-width: 720px;
  }

  :where(.sf-life-wide-link,.sf-money-wide-link)>a {
    width: 330px;
  }
}

/* =========================================================
   v1.8.3: match the ALL ARTICLES label spacing to the Work page.
========================================================= */

:where(.sf-life-wide-link,.sf-money-wide-link) :where(.sf-life-tag,.sf-money-tag) {
  min-width: 116px;
  min-height: 34px;

  padding: 7px 16px !important;

  justify-content: center;
}

/* =========================================================
   Editorial artwork for cards without a featured image.
========================================================= */

.sf-category-hub .sf-card__placeholder {
  position: relative;
  isolation: isolate;
  display: flex;

  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;

  height: 100%;

  padding: 30px;

  color: var(--hub-deep);
  background: linear-gradient(145deg,#eadfd1,#f6eee4);

  font-family: var(--sf-sans);
  text-align: center;

  overflow: hidden;
}

.sf-category-hub .sf-card__placeholder::before {
  content: "";
  position: absolute;
  z-index: -1;

  width: 150px;
  height: 150px;

  border: 1px solid rgba(166,123,68,.35);
  border-radius: 50%;
}

.sf-category-hub .sf-card__placeholder::after {
  content: "";
  position: absolute;
  z-index: -1;

  width: 116px;
  height: 116px;

  border: 1px solid rgba(53,93,84,.18);
  border-radius: 50%;
}

.sf-category-hub .sf-card__placeholder small {
  color: #9b654f;

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

.sf-category-hub .sf-card__placeholder strong {
  color: var(--hub-deep);

  font: 500 22px/1.5 var(--sf-serif);
  letter-spacing: .08em;
}

.sf-category-hub .sf-card__placeholder i {
  color: #8b744c;

  font: 500 8px/1.4 var(--sf-sans);
  font-style: normal;
  letter-spacing: .2em;
}

@media (min-width:768px) and (max-width:1179px) {
  :where(.sf-life-hub,.sf-money-hub) > :where(.sf-life-wide-link,.sf-money-wide-link) {
    grid-template-columns: minmax(0,1fr) 280px !important;
    column-gap: 32px !important;

    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  :where(.sf-life-wide-link,.sf-money-wide-link)>a {
    width: 280px;
  }
}