/* =========================================================
   カテゴリーから全記事一覧への入口
========================================================= */

/* =========================================================
   Start From 39 | 家族・相続／終活 全記事ページ
   Responsive archive design based on the supplied reference.
========================================================= */

.sf-archive26 {
  --archive-ink: #244a40;
  --archive-accent: #b97664;
  --archive-paper: #faf8f2;
  --archive-soft: #f3f0e8;
  --archive-line: #ded9cd;

  width: 100%;
  max-width: none;

  margin: 0;

  overflow: hidden;

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

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

.sf-archive26--planning {
  --archive-ink: #31564d;
  --archive-accent: #b8955c;
  --archive-paper: #faf9f4;
  --archive-soft: #eff1e9;
  --archive-line: #d9ded3;
}

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

.sf-archive26 a {
  color: inherit;

  text-decoration: none;
}

.sf-archive26 h1,
.sf-archive26 h2,
.sf-archive26 h3 {
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-weight: 500;
}

.sf-archive26__eyebrow {
  margin: 0;

  color: var(--archive-accent);

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

/* =========================================================
   Hero
========================================================= */

.sf-archive26__hero {
  display: grid;

  grid-template-columns: 46% 54%;

  min-height: 440px;

  color: #fffdf8;
  background: #17483f;
}

.sf-archive26--planning .sf-archive26__hero {
  background: #536f61;
}

.sf-archive26__hero-copy {
  display: flex;

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

  padding: 54px clamp(32px, 6vw, 88px);
}

.sf-archive26__hero-copy .sf-archive26__eyebrow {
  color: #d7b982;
}

.sf-archive26__hero h1 {
  margin: 22px 0 16px;

  color: #fffdf8;

  font-size: clamp(33px, 3.6vw, 49px);
  line-height: 1.55;
}

.sf-archive26__hero-copy > p:not(.sf-archive26__eyebrow) {
  max-width: 470px;

  margin: 0;

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

  font-size: 13px;
}

.sf-archive26__count {
  display: flex;

  align-items: baseline;
  gap: 11px;

  margin-top: 22px;

  color: #d7b982;

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

.sf-archive26__count strong {
  color: #fffdf8;

  font: 38px/1 Georgia, serif;
  letter-spacing: 0;
}

.sf-archive26__hero-image {
  min-width: 0;
  min-height: 440px;

  background: url("../../images/home/latest-family.jpg") center / cover no-repeat;
}

.sf-archive26--planning .sf-archive26__hero-image {
  background-image: url("../../images/home/latest-planning.jpg");
}

/* =========================================================
   Intro and five theme links: match work-career-all.css
========================================================= */