/* =========================================================
   家族・相続と終活の全記事一覧ページ
========================================================= */

/* =========================================================
   START FROM 39 — FAMILY / END-OF-LIFE ARTICLE ARCHIVES
   Scope: 家族・相続の全記事一覧 / 終活の全記事一覧
   Layout: PC / TABLET / MOBILE

   FILE MAP
   01  Page variables / base styles / typography
   02  HERO: heading, description, count, and image
   03  INTRO: lead text and topic cards
   04  ARTICLE ARCHIVE: article rows and empty state
   05  CATEGORY CTA: image, description, and button
   06  ENDING: closing message and brand mark
   07  TABLET: layout changes at 900px and below
   08  MOBILE: layout changes at 640px and below
   09  ACCESSIBILITY: reduced-motion preference

   IMPORTANT
   - 家族・相続は .sf-family-list、終活は .sf-planning-list で指定します。
   - 共通クラス名には既存HTMLとの互換性のため money-list を含みます。
   - HTMLのクラス名、画像パス、デザイン値は変更していません。
========================================================= */

/* =========================================================
   家族・相続と終活のページ全体に共通する基本色・幅・文字設定
========================================================= */

.sf-family-list,
.sf-planning-list {
  --sf-archive-ink: #173f38;
  --sf-archive-accent: #c47745;
  --sf-archive-line: #dfd5c7;
  --sf-archive-paper: #faf7f0;

  width: 100%;
  max-width: none;

  margin: 0;

  overflow: hidden;

  color: var(--sf-archive-ink);
  background: var(--sf-archive-paper);

  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  line-height: 1.8;
}

.sf-planning-list {
  --sf-archive-ink: #31564d;
  --sf-archive-accent: #789483;
  --sf-archive-line: #d5dfd7;
  --sf-archive-paper: #f8f8f1;
}

.sf-family-list *,
.sf-family-list *::before,
.sf-family-list *::after,
.sf-planning-list *,
.sf-planning-list *::before,
.sf-planning-list *::after {
  box-sizing: border-box;
}

.sf-family-list a,
.sf-planning-list a {
  color: inherit;

  text-decoration: none;
}

.sf-family-list h1,
.sf-family-list h2,
.sf-family-list h3,
.sf-planning-list h1,
.sf-planning-list h2,
.sf-planning-list h3 {
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-weight: 500;
}

/* =========================================================
   HERO全体を左右2列にし、コピーと写真を配置
========================================================= */

/* =========================================================
   02. HERO — ページタイトル・説明・記事数・メイン画像
========================================================= */

.sf-family-list .sf-money-list-hero,
.sf-planning-list .sf-money-list-hero {
  display: grid;

  grid-template-columns: 48% 52%;

  min-height: 500px;

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

.sf-planning-list .sf-money-list-hero {
  background: #edf2e9;
}

.sf-family-list .sf-money-list-hero-copy,
.sf-planning-list .sf-money-list-hero-copy {
  display: flex;

  flex-direction: column;
  align-items: flex-start;
  justify-content: center;

  padding: 60px clamp(32px, 7vw, 105px);

  background: transparent;
}

.sf-family-list .sf-money-list-kicker,
.sf-planning-list .sf-money-list-kicker,
.sf-family-list .sf-money-list-label,
.sf-planning-list .sf-money-list-label {
  margin: 0;

  color: var(--sf-archive-accent);

  font: 600 11px/1.5 Georgia, serif;
  letter-spacing: .2em;
}

.sf-family-list .sf-money-list-hero h1,
.sf-planning-list .sf-money-list-hero h1 {
  margin: 22px 0 16px;

  color: var(--sf-archive-ink);

  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.5;
  letter-spacing: .04em;
}

.sf-family-list .sf-money-list-lead,
.sf-planning-list .sf-money-list-lead {
  margin: 0;

  color: #65736a;

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

.sf-family-list .sf-money-list-sign,
.sf-planning-list .sf-money-list-sign {
  margin: 22px 0 0;

  color: #7b8178;

  font: 11px/1.6 Georgia, serif;
  letter-spacing: .08em;
}

.sf-family-list .sf-money-list-count,
.sf-planning-list .sf-money-list-count {
  display: flex;

  align-items: baseline;
  gap: 12px;

  margin-top: 25px;
}

.sf-family-list .sf-money-list-count strong,
.sf-planning-list .sf-money-list-count strong {
  color: var(--sf-archive-ink);

  font: 40px/1 Georgia,serif;
}

.sf-family-list .sf-money-list-count span,
.sf-planning-list .sf-money-list-count span {
  color: var(--sf-archive-accent);

  font: 10px Georgia,serif;
  letter-spacing: .16em;
}

.sf-family-list .sf-money-list-hero-image,
.sf-planning-list .sf-money-list-hero-image {
  min-height: 500px;

  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.sf-family-list .sf-money-list-hero-image {
  background-image: url("../../images/home/latest-family.jpg");
}

.sf-planning-list .sf-money-list-hero-image {
  background-image: url("../../images/home/latest-planning.jpg");
}

/* =========================================================
   導入エリアを見出し・説明文・テーマ一覧で構成
========================================================= */

/* =========================================================
   03. INTRO + TOPIC STRIP — 導入文とテーマカード
========================================================= */

.sf-family-list .sf-money-list-intro,
.sf-planning-list .sf-money-list-intro {
  max-width: 1400px;

  margin: 0 auto;
  padding: 86px 35px 72px;
}

.sf-family-list .sf-money-list-intro-grid,
.sf-planning-list .sf-money-list-intro-grid {
  display: grid;

  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: end;
}

.sf-family-list .sf-money-list-intro-grid h2,
.sf-planning-list .sf-money-list-intro-grid h2 {
  margin: 13px 0 0;

  font-size: clamp(29px,3.2vw,42px);
  line-height: 1.6;
}

.sf-family-list .sf-money-list-intro-copy,
.sf-planning-list .sf-money-list-intro-copy {
  color: #68766d;

  font-size: 13px;
}

.sf-family-list .sf-money-list-intro-copy p,
.sf-planning-list .sf-money-list-intro-copy p {
  margin: 0 0 5px;
}

.sf-family-list .sf-money-list-topics,
.sf-planning-list .sf-money-list-topics {
  display: grid;

  grid-template-columns: repeat(5,minmax(0,1fr));

  margin-top: 42px;

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

.sf-family-list .sf-money-list-topic,
.sf-planning-list .sf-money-list-topic {
  display: flex;

  min-height: 160px;

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

  padding: 20px 12px;

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

  text-align: center;

  background: #fffdfa;

  transition: transform .22s ease,
    filter .22s ease;
}

.sf-family-list .sf-money-list-topic:last-child,
.sf-planning-list .sf-money-list-topic:last-child {
  border-right: 0;
}

.sf-family-list .sf-money-list-topic:nth-child(2) {
  background: #f3eadf;
}

.sf-family-list .sf-money-list-topic:nth-child(3) {
  background: #e9f0eb;
}

.sf-family-list .sf-money-list-topic:nth-child(4) {
  background: #f3e8e3;
}

.sf-family-list .sf-money-list-topic:nth-child(5) {
  background: #f5f1e8;
}

.sf-planning-list .sf-money-list-topic:nth-child(2) {
  background: #edf1e9;
}

.sf-planning-list .sf-money-list-topic:nth-child(3) {
  background: #f4efe3;
}

.sf-planning-list .sf-money-list-topic:nth-child(4) {
  background: #e7efeb;
}

.sf-planning-list .sf-money-list-topic:nth-child(5) {
  background: #f2ece3;
}

.sf-family-list .sf-money-list-topic:hover,
.sf-planning-list .sf-money-list-topic:hover {
  transform: translateY(-5px);

  filter: brightness(1.02);
}

.sf-family-list .sf-money-list-topic strong,
.sf-planning-list .sf-money-list-topic strong {
  font: 500 16px/1.5 "Yu Mincho",serif;
}

.sf-family-list .sf-topic-number,
.sf-planning-list .sf-topic-number {
  color: var(--sf-archive-accent);

  font: 9px Georgia,serif;
  letter-spacing: .22em;
}

.sf-family-list .sf-topic-caption,
.sf-planning-list .sf-topic-caption {
  color: #7a847c;

  font-size: 10px;
  line-height: 1.5;
}

/* =========================================================
   記事番号・記事情報・矢印を一行に並べ、行全体をリンクとして見せる
========================================================= */

/* =========================================================
   04. ARTICLE ARCHIVE — 全記事を1列のリストで表示
========================================================= */

.sf-family-list .sf-money-list-archive,
.sf-planning-list .sf-money-list-archive {
  width: calc(100% - 32px);
  max-width: 1320px;

  margin: 0 auto 78px;
  padding: 48px clamp(24px,4vw,52px) 32px;

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

.sf-family-list .sf-money-list-archive-inner,
.sf-planning-list .sf-money-list-archive-inner {
  width: 100%;
  max-width: none;

  margin: 0;
}

.sf-family-list .sf-money-list-archive-head,
.sf-planning-list .sf-money-list-archive-head {
  display: flex;

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

  padding-bottom: 27px;

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

.sf-family-list .sf-money-list-archive-head h2,
.sf-planning-list .sf-money-list-archive-head h2 {
  margin: 9px 0 0;

  font-size: clamp(28px,3vw,40px);
  line-height: 1.45;
}

.sf-family-list .sf-money-list-archive-head > p,
.sf-planning-list .sf-money-list-archive-head > p {
  margin: 0 0 4px;

  color: #738077;

  font-size: 11px;
}

.sf-family-list .sf-money-list-rows,
.sf-planning-list .sf-money-list-rows {
  display: grid;

  grid-template-columns: 1fr;
}

.sf-family-list .sf-money-list-row,
.sf-planning-list .sf-money-list-row {
  margin: 0;

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

.sf-family-list .sf-money-list-row-link,
.sf-planning-list .sf-money-list-row-link {
  display: grid;

  grid-template-columns: 123px minmax(0,1fr) 55px;
  gap: 30px;
  align-items: center;

  min-height: 166px;

  padding: 24px 7px;

  transition: background .2s ease,
    transform .2s ease;
}

.sf-family-list .sf-money-list-row-link:hover,
.sf-family-list .sf-money-list-row-link:focus-visible,
.sf-planning-list .sf-money-list-row-link:hover,
.sf-planning-list .sf-money-list-row-link:focus-visible {
  background: #f8f4ec;

  transform: translateY(-2px);
}

.sf-family-list .sf-money-list-row-no,
.sf-planning-list .sf-money-list-row-no {
  display: flex;

  align-items: center;
  align-self: stretch;

  padding-right: 29px;

  border-right: 1px solid var(--sf-archive-line);
  color: #76958d;

  font: 36px/1 Georgia,serif;
}

.sf-family-list .sf-money-list-row-main,
.sf-planning-list .sf-money-list-row-main {
  min-width: 0;
}

.sf-family-list .sf-money-list-row-meta,
.sf-planning-list .sf-money-list-row-meta {
  display: flex;

  flex-wrap: wrap;
  gap: 6px 16px;

  margin-bottom: 8px;

  color: var(--sf-archive-accent);

  font: 9px/1.5 Georgia,serif;
  letter-spacing: .12em;
}

.sf-family-list .sf-money-list-row-meta time,
.sf-planning-list .sf-money-list-row-meta time {
  color: #899189;
}

.sf-family-list .sf-money-list-row-main h3,
.sf-planning-list .sf-money-list-row-main h3 {
  margin: 0;

  color: var(--sf-archive-ink);

  font-size: clamp(16px,1.45vw,20px);
  line-height: 1.7;
}

.sf-family-list .sf-money-list-row-main p,
.sf-planning-list .sf-money-list-row-main p {
  margin: 8px 0 0;

  color: #718078;

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

.sf-family-list .sf-money-list-row-arrow,
.sf-planning-list .sf-money-list-row-arrow {
  display: flex;

  flex-direction: column;
  align-items: center;
  gap: 13px;

  color: #b9864e;
}

.sf-family-list .sf-money-list-row-arrow span,
.sf-planning-list .sf-money-list-row-arrow span {
  font: 8px Georgia,serif;
  letter-spacing: .15em;
}

.sf-family-list .sf-money-list-row-arrow b,
.sf-planning-list .sf-money-list-row-arrow b {
  font: 25px/1 Georgia,serif;
  font-weight: 400;
}

.sf-family-list .sf-money-list-empty,
.sf-planning-list .sf-money-list-empty {
  padding: 35px;

  text-align: center;

  color: #68766d;
}

/* =========================================================
   カテゴリー一覧へ戻るための案内ブロック
========================================================= */

/* =========================================================
   05. CATEGORY CTA — カテゴリーページへ案内する画像・説明・ボタン
========================================================= */

.sf-family-list .sf-money-list-category,
.sf-planning-list .sf-money-list-category {
  max-width: 1300px;

  margin: 0 auto 78px;
  padding: 0 20px;
}

.sf-family-list .sf-money-list-category-inner,
.sf-planning-list .sf-money-list-category-inner {
  display: grid;

  grid-template-columns: 276px minmax(0,1fr) 225px;
  align-items: center;
  gap: 45px;

  padding: 26px;

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

.sf-family-list .sf-money-list-category-image,
.sf-planning-list .sf-money-list-category-image {
  min-height: 170px;

  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.sf-family-list .sf-money-list-category-image {
  background-image: url("../../images/home/latest-family.jpg");
}

.sf-planning-list .sf-money-list-category-image {
  background-image: url("../../images/home/latest-planning.jpg");
}

.sf-family-list .sf-money-list-category-copy h2,
.sf-planning-list .sf-money-list-category-copy h2 {
  margin: 11px 0 12px;

  font-size: clamp(22px,2.2vw,30px);
  line-height: 1.55;
}

.sf-family-list .sf-money-list-category-copy > p:last-child,
.sf-planning-list .sf-money-list-category-copy > p:last-child {
  margin: 0;

  color: #718078;

  font-size: 11px;
}

.sf-family-list .sf-money-list-category-button,
.sf-planning-list .sf-money-list-category-button {
  display: flex;

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

  min-height: 72px;

  padding: 18px 20px;

  border: 1px solid #c99758;
  background: #fffdfa;

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

  transition: background .2s ease,
    color .2s ease;
}

.sf-family-list .sf-money-list-category-button:hover,
.sf-planning-list .sf-money-list-category-button:hover {
  color: #fff;
  background: #244a40;
}

.sf-family-list .sf-money-list-category-button span,
.sf-planning-list .sf-money-list-category-button span {
  color: #b9864e;

  font-size: 22px;
}

/* =========================================================
   ブランドメッセージでページを締めくくる
========================================================= */

/* =========================================================
   06. ENDING — ページ末尾のメッセージとブランド表示
========================================================= */

.sf-family-list .sf-money-list-ending,
.sf-planning-list .sf-money-list-ending {
  position: relative;

  width: 100%;

  padding: 95px 24px 100px;

  overflow: hidden;

  color: #fffaf0;

  text-align: center;

  background: #173f38;
}

.sf-planning-list .sf-money-list-ending {
  background: #31564d;
}

.sf-family-list .sf-money-list-ending::after,
.sf-planning-list .sf-money-list-ending::after {
  content: "39";
  position: absolute;
  left: 50%;
  bottom: -.52em;

  transform: translateX(-50%);

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

  font: 700 clamp(230px,32vw,440px)/1 Georgia,serif;

  pointer-events: none;
}

.sf-family-list .sf-money-list-ending-inner,
.sf-planning-list .sf-money-list-ending-inner {
  position: relative;
  z-index: 1;

  max-width: 900px;

  margin: 0 auto;
}

.sf-family-list .sf-money-list-ending-en,
.sf-planning-list .sf-money-list-ending-en {
  margin: 0 0 22px;

  color: #d7bd91;

  font: 600 10px Georgia,serif;
  letter-spacing: .22em;
}

.sf-family-list .sf-money-list-ending h2,
.sf-planning-list .sf-money-list-ending h2 {
  margin: 0;

  color: #fffaf0;

  font-size: clamp(28px,3.8vw,46px);
  line-height: 1.7;
}

.sf-family-list .sf-money-list-ending-copy,
.sf-planning-list .sf-money-list-ending-copy {
  margin: 24px 0 0;

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

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

.sf-family-list .sf-money-list-ending-message,
.sf-planning-list .sf-money-list-ending-message {
  margin: 27px 0 0;

  color: #e0c28b;

  font-size: 12px;
}

.sf-family-list .sf-money-list-ending-brand,
.sf-planning-list .sf-money-list-ending-brand {
  display: inline-block;

  margin-top: 26px;

  color: rgba(255,250,240,.75);

  font: 11px Georgia,serif;
  letter-spacing: .08em;
}

/* =========================================================
   07. TABLET — 画面幅900px以下のレイアウト
========================================================= */

@media (max-width: 900px) {
  .sf-family-list .sf-money-list-hero,
  .sf-planning-list .sf-money-list-hero {
    grid-template-columns: 1fr;
  }

  .sf-family-list .sf-money-list-hero-image,
  .sf-planning-list .sf-money-list-hero-image {
    grid-row: 1;

    min-height: 360px;
  }

  .sf-family-list .sf-money-list-hero-copy,
  .sf-planning-list .sf-money-list-hero-copy {
    padding: 48px 7vw 55px;
  }

  .sf-family-list .sf-money-list-category-inner,
  .sf-planning-list .sf-money-list-category-inner {
    grid-template-columns: 220px minmax(0,1fr);
    gap: 25px;
  }

  .sf-family-list .sf-money-list-category-button,
  .sf-planning-list .sf-money-list-category-button {
    grid-column: 2;
  }
}

/* =========================================================
   08. MOBILE — 画面幅640px以下のレイアウト
========================================================= */

@media (max-width: 640px) {
  .sf-family-list .sf-money-list-hero-image,
  .sf-planning-list .sf-money-list-hero-image {
    min-height: 250px;
  }

  .sf-family-list .sf-money-list-hero-copy,
  .sf-planning-list .sf-money-list-hero-copy {
    padding: 39px 22px 45px;
  }

  .sf-family-list .sf-money-list-hero h1,
  .sf-planning-list .sf-money-list-hero h1 {
    font-size: 32px;
  }

  .sf-family-list .sf-money-list-intro,
  .sf-planning-list .sf-money-list-intro {
    padding: 65px 18px 58px;
  }

  .sf-family-list .sf-money-list-intro-grid,
  .sf-planning-list .sf-money-list-intro-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .sf-family-list .sf-money-list-intro-grid h2,
  .sf-planning-list .sf-money-list-intro-grid h2 {
    font-size: 27px;
  }

  .sf-family-list .sf-money-list-topics,
  .sf-planning-list .sf-money-list-topics {
    grid-template-columns: repeat(2,minmax(0,1fr));

    margin-top: 27px;
  }

  .sf-family-list .sf-money-list-topic,
  .sf-planning-list .sf-money-list-topic {
    min-height: 130px;

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

  .sf-family-list .sf-money-list-topic:nth-child(2n),
  .sf-planning-list .sf-money-list-topic:nth-child(2n) {
    border-right: 0;
  }

  .sf-family-list .sf-money-list-topic:last-child,
  .sf-planning-list .sf-money-list-topic:last-child {
    grid-column: 1/-1;
  }

  .sf-family-list .sf-money-list-archive,
  .sf-planning-list .sf-money-list-archive {
    width: calc(100% - 24px);

    margin-bottom: 55px;
    padding: 28px 17px 18px;
  }

  .sf-family-list .sf-money-list-archive-head,
  .sf-planning-list .sf-money-list-archive-head {
    display: block;

    padding-bottom: 18px;
  }

  .sf-family-list .sf-money-list-archive-head h2,
  .sf-planning-list .sf-money-list-archive-head h2 {
    font-size: 27px;
  }

  .sf-family-list .sf-money-list-archive-head>p,
  .sf-planning-list .sf-money-list-archive-head>p {
    margin-top: 9px;
  }

  .sf-family-list .sf-money-list-row-link,
  .sf-planning-list .sf-money-list-row-link {
    grid-template-columns: 48px minmax(0,1fr) 35px;
    gap: 12px;

    min-height: 132px;

    padding: 19px 0;
  }

  .sf-family-list .sf-money-list-row-no,
  .sf-planning-list .sf-money-list-row-no {
    padding-right: 11px;

    font-size: 24px;
  }

  .sf-family-list .sf-money-list-row-main h3,
  .sf-planning-list .sf-money-list-row-main h3 {
    font-size: 15px;
  }

  .sf-family-list .sf-money-list-row-main p,
  .sf-planning-list .sf-money-list-row-main p {
    display: none;
  }

  .sf-family-list .sf-money-list-row-meta,
  .sf-planning-list .sf-money-list-row-meta {
    gap: 4px 8px;

    font-size: 8px;
  }

  .sf-family-list .sf-money-list-row-arrow span,
  .sf-planning-list .sf-money-list-row-arrow span {
    font-size: 7px;
  }

  .sf-family-list .sf-money-list-category,
  .sf-planning-list .sf-money-list-category {
    margin-bottom: 55px;
    padding: 0 12px;
  }

  .sf-family-list .sf-money-list-category-inner,
  .sf-planning-list .sf-money-list-category-inner {
    grid-template-columns: 1fr;
    gap: 20px;

    padding: 17px;
  }

  .sf-family-list .sf-money-list-category-image,
  .sf-planning-list .sf-money-list-category-image {
    min-height: 190px;
  }

  .sf-family-list .sf-money-list-category-copy h2,
  .sf-planning-list .sf-money-list-category-copy h2 {
    font-size: 23px;
  }

  .sf-family-list .sf-money-list-category-button,
  .sf-planning-list .sf-money-list-category-button {
    grid-column: auto;

    min-height: 60px;
  }

  .sf-family-list .sf-money-list-ending,
  .sf-planning-list .sf-money-list-ending {
    padding: 68px 20px 75px;
  }

  .sf-family-list .sf-money-list-ending h2,
  .sf-planning-list .sf-money-list-ending h2 {
    font-size: 26px;
  }
}

/* =========================================================
   09. ACCESSIBILITY — 動きを抑える設定を優先
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .sf-family-list *,
  .sf-planning-list *,
  .sf-family-list *::before,
  .sf-planning-list *::before {
    transition: none !important;
  }
}