/* =========================================================
   終活カテゴリー：HERO・4テーマ・実践ガイド・新着・全記事への入口・締め
========================================================= */

/* =========================================================
   Start From 39 — 終活 category page
========================================================= */

.sf39-eol {
  --eol-ink: #173c38;
  --eol-body: #46534d;
  --eol-sage: #e9eee7;
  --eol-sage-deep: #728c7d;
  --eol-paper: #fbfaf6;
  --eol-line: #c9d1c8;
  --eol-copper: #b86c3c;

  color: var(--eol-body);
  background: var(--eol-paper);

  font-family: inherit;

  overflow: hidden;
}

.sf39-eol *,
.sf39-eol *::before,
.sf39-eol *::after {
  box-sizing: border-box;
}

.sf39-eol img {
  display: block;

  width: 100%;
  height: auto;
}

.sf39-eol a {
  color: inherit;

  text-decoration: none;
}

.sf39-eol p,
.sf39-eol h1,
.sf39-eol h2 {
  margin-top: 0;
}

.sf39-eol h1,
.sf39-eol h2,
.sf39-eol strong {
  color: var(--eol-ink);
}

.sf39-eol-hero__inner,
.sf39-eol-theme-grid,
.sf39-eol-steps,
.sf39-eol-latest,
.sf39-eol-question,
.sf39-eol-section-heading,
.sf39-eol-closing,
.sf39-eol-archive {
  width: min(1180px, calc(100% - 64px));

  margin-inline: auto;
}

.sf39-eol-eyebrow {
  margin: 0 0 14px;

  color: #77877c;

  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  line-height: 1.5;
}

.sf39-eol-hero {
  padding: 24px 0 34px;

  background: linear-gradient(90deg, #f9f8f2 0%, #f9f8f2 43%, #f2f0e8 100%);
}

.sf39-eol-hero__inner {
  display: grid;

  grid-template-columns: .88fr 1.12fr;
  align-items: center;
  gap: clamp(30px, 6vw, 78px);
}

.sf39-eol-hero__copy {
  padding: 26px 0 30px;
}

.sf39-eol-hero__copy .sf39-eol-eyebrow span {
  padding-inline: 6px;

  color: #b2a88f;
}

.sf39-eol-kicker {
  margin: 0 0 12px;

  color: #7b8274;

  font-family: Georgia, serif;
  font-size: 15px;
  font-style: italic;
  letter-spacing: .03em;
}

.sf39-eol-hero h1 {
  margin: 0 0 20px;

  font-family: "Noto Serif JP", "Yu Mincho", serif;
  font-size: clamp(34px, 4vw, 57px);
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1.55;
}

.sf39-eol-hero__lead {
  max-width: 470px;

  margin: 0 0 26px;

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

.sf39-eol-text-link {
  display: inline-flex;

  align-items: center;
  gap: 12px;

  padding-bottom: 7px;

  border-bottom: 1px solid #9eaa9f;
  color: var(--eol-ink) !important;

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

.sf39-eol-text-link span {
  color: var(--eol-copper);

  font-size: 16px;
}

.sf39-eol-hero__visual {
  height: clamp(300px, 36vw, 475px);

  overflow: hidden;
}

.sf39-eol-hero__visual img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center 42%;
}

.sf39-eol-intro {
  padding: 68px 24px 62px;

  text-align: center;
}

.sf39-eol-intro__inner {
  max-width: 680px;

  margin-inline: auto;
}

.sf39-eol-intro h2,
.sf39-eol-section-heading h2,
.sf39-eol-question h2,
.sf39-eol-steps h2,
.sf39-eol-archive h2,
.sf39-eol-closing h2 {
  font-family: "Noto Serif JP", "Yu Mincho", serif;
  font-weight: 500;
  letter-spacing: .045em;
}

.sf39-eol-intro h2 {
  margin-bottom: 17px;

  font-size: clamp(25px, 3vw, 36px);
  line-height: 1.65;
}

.sf39-eol-intro__inner > p:last-child {
  margin-bottom: 0;

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

.sf39-eol-themes {
  padding: 48px 0 62px;

  background: #f1f3ed;
}

.sf39-eol-section-heading {
  margin-bottom: 26px;
}

.sf39-eol-section-heading h2 {
  margin-bottom: 8px;

  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.5;
}

.sf39-eol-section-heading > p:last-child {
  margin-bottom: 0;

  font-size: 13px;
}

.sf39-eol-theme-grid {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 17px;
}

.sf39-eol-theme {
  display: flex;

  min-width: 0;

  flex-direction: column;

  background: rgba(255,255,255,.72);

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

.sf39-eol-theme:hover {
  transform: translateY(-4px);

  box-shadow: 0 12px 28px rgba(37,63,52,.1);
}

.sf39-eol-theme > img {
  aspect-ratio: 1.48 / 1;

  object-fit: cover;
}

.sf39-eol-theme__body {
  display: flex;

  flex: 1;
  flex-direction: column;

  padding: 17px 17px 19px;
}

.sf39-eol-theme__title {
  margin-bottom: 8px;

  color: var(--eol-ink);

  font-family: "Noto Serif JP", "Yu Mincho", serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .04em;
}

.sf39-eol-theme__desc {
  color: #5b645e;

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

.sf39-eol-question {
  display: grid;

  grid-template-columns: .45fr 1.55fr;
  align-items: center;
  gap: 34px;

  padding: 54px 0;
}

.sf39-eol-question__label {
  display: flex;

  min-height: 125px;

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

  border-right: 1px solid #aeb9ae;
  color: #8a9586;
}

.sf39-eol-question__label span {
  color: #66776c;

  font-family: Georgia, serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
}

.sf39-eol-question__label strong {
  margin-top: 5px;

  color: #9aa596;

  font-family: Georgia, serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 1;
}

.sf39-eol-question__copy {
  max-width: 730px;
}

.sf39-eol-question h2 {
  margin-bottom: 14px;

  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.65;
}

.sf39-eol-question__copy > p:last-child {
  max-width: 720px;

  margin-bottom: 0;

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

.sf39-eol-steps {
  display: grid;

  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;

  padding: 0 0 64px;
}

.sf39-eol-steps__visual {
  height: 100%;
  min-height: 340px;
}

.sf39-eol-steps__visual img {
  height: 100%;
  min-height: 340px;

  object-fit: cover;
}

.sf39-eol-steps__content {
  padding: 14px 0;
}

.sf39-eol-steps h2 {
  margin-bottom: 11px;

  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.5;
}

.sf39-eol-steps__lead {
  margin-bottom: 18px;

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

.sf39-eol-step-list {
  margin: 0;
  padding: 0;

  list-style: none;
}

.sf39-eol-step-list li {
  display: grid;

  grid-template-columns: 42px 1fr;
  gap: 13px;
  align-items: center;

  padding: 14px 0;

  border-top: 1px solid var(--eol-line);
}

.sf39-eol-step-list li:last-child {
  border-bottom: 1px solid var(--eol-line);
}

.sf39-eol-step-list__number {
  display: grid;

  width: 34px;
  height: 34px;

  place-items: center;

  border-radius: 50%;
  background: var(--eol-copper);
  color: white;

  font-family: Georgia, serif;
  font-size: 14px;
}

.sf39-eol-step-list strong,
.sf39-eol-step-list small {
  display: block;
}

.sf39-eol-step-list strong {
  margin-bottom: 4px;

  font-family: "Noto Serif JP", "Yu Mincho", serif;
  font-size: 15px;
  font-weight: 600;
}

.sf39-eol-step-list small {
  color: #69716b;

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

.sf39-eol-latest {
  padding: 7px 0 52px;
}

.sf39-eol-section-heading--line {
  display: flex;

  align-items: center;
  gap: 18px;

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

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

.sf39-eol-section-heading--line .sf39-eol-eyebrow {
  margin: 0;
}

.sf39-eol-section-heading--line h2 {
  margin: 0;

  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
}

.sf39-eol-latest-card {
  display: grid;

  grid-template-columns: 1fr 1fr;

  border: 1px solid #e4e5df;
  background: #fff;
}

.sf39-eol-latest-card__image {
  min-height: 230px;

  overflow: hidden;
}

.sf39-eol-latest-card__image img {
  width: 100%;
  height: 100%;
  min-height: 230px;

  object-fit: cover;
}

.sf39-eol-latest-card__body {
  display: flex;

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

  padding: clamp(22px, 4vw, 48px);
}

.sf39-eol-latest-card__body time {
  margin-bottom: 11px;

  color: #899188;

  font-size: 11px;
  letter-spacing: .1em;
}

.sf39-eol-latest-card__body > strong {
  margin-bottom: 11px;

  font-family: "Noto Serif JP", "Yu Mincho", serif;
  font-size: clamp(18px, 2vw, 25px);
  line-height: 1.65;
}

.sf39-eol-latest-card__excerpt {
  color: #647068;

  font-size: 13.5px;
  line-height: 1.85;
}

.sf39-eol-latest-card__link {
  align-self: flex-end;

  margin-top: 15px;
  padding-bottom: 4px;

  border-bottom: 1px solid #bd9b76;
  color: var(--eol-ink);

  font-size: 13px;
}

.sf39-eol-latest-card__link span {
  margin-left: 10px;

  color: var(--eol-copper);
}

.sf39-eol-empty {
  padding: 28px;

  background: #f4f4ef;

  text-align: center;
}

.sf39-eol-archive {
  margin-bottom: 0;
  padding: 36px 24px 34px;

  border-top: 1px solid #d6ddd4;
  border-bottom: 1px solid #d6ddd4;
  background: #f0f2ec;

  text-align: center;
}

.sf39-eol-archive .sf39-eol-eyebrow {
  margin-bottom: 8px;
}

.sf39-eol-archive h2 {
  margin: 0 0 8px;

  font-size: clamp(25px, 3vw, 36px);
}

.sf39-eol-archive > p:not(.sf39-eol-eyebrow) {
  margin: 0 auto 17px;

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

.sf39-eol-button {
  display: inline-flex;

  min-height: 50px;

  align-items: center;
  justify-content: center;
  gap: 14px;

  padding: 0 28px;

  border: 1px solid transparent;
  border-radius: 999px;

  font-size: 13.5px;
  letter-spacing: .04em;

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

.sf39-eol-button:hover {
  transform: translateY(-2px);
}

.sf39-eol-button--outline {
  border-color: #85988a;
  color: var(--eol-ink) !important;
}

.sf39-eol-button--outline:hover {
  background: #e0e7df;
}

.sf39-eol-closing {
  position: relative;
  display: grid;

  grid-template-columns: .95fr 1.05fr;

  width: 100%;
  min-height: 360px;

  margin-top: 36px;

  background: #dce6dc;
}

.sf39-eol-closing__image {
  width: 100%;
  height: 100%;
  min-height: 360px;

  object-fit: cover;
  object-position: center 48%;
}

.sf39-eol-closing__veil {
  position: absolute;
  inset: 0 0 0 42%;

  background: linear-gradient(90deg, rgba(233,239,229,0), rgba(233,239,229,.95) 19%, #e9efe5 100%);
}

.sf39-eol-closing__content {
  position: relative;
  z-index: 1;

  grid-column: 2;
  grid-row: 1;

  display: flex;

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

  padding: 50px 38px;

  text-align: center;
}

.sf39-eol-closing .sf39-eol-eyebrow {
  color: #8c7548;
}

.sf39-eol-closing h2 {
  margin: 0 0 16px;

  font-size: clamp(27px, 3.5vw, 43px);
  line-height: 1.65;
}

.sf39-eol-closing__content > p:not(.sf39-eol-eyebrow) {
  margin: 0 0 22px;

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

.sf39-eol-button--light {
  border-color: #829688;
  background: #6f8f85;
  color: #fff !important;
}

.sf39-eol-button--light:hover {
  background: #58786e;
}

@media (max-width: 800px) {
  .sf39-eol-hero__inner,
  .sf39-eol-theme-grid,
  .sf39-eol-steps,
  .sf39-eol-latest,
  .sf39-eol-question,
  .sf39-eol-section-heading {
    width: min(100% - 36px, 620px);
  }

  .sf39-eol-hero {
    padding-top: 12px;
  }

  .sf39-eol-hero__inner {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .sf39-eol-hero__copy {
    padding: 25px 0 0;
  }

  .sf39-eol-hero h1 {
    font-size: clamp(34px, 8vw, 49px);
  }

  .sf39-eol-hero__visual {
    height: clamp(250px, 65vw, 430px);
  }

  .sf39-eol-theme-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .sf39-eol-theme__body {
    padding: 13px 12px 15px;
  }

  .sf39-eol-theme__title {
    font-size: 15px;
  }

  .sf39-eol-theme__desc {
    font-size: 12.5px;
  }

  .sf39-eol-question {
    grid-template-columns: 80px 1fr;
    gap: 18px;

    padding-block: 40px;
  }

  .sf39-eol-question__label {
    min-height: 120px;
  }

  .sf39-eol-question__label strong {
    font-size: 32px;
  }

  .sf39-eol-steps {
    grid-template-columns: 1fr;
    gap: 22px;

    padding-bottom: 44px;
  }

  .sf39-eol-steps__visual,
  .sf39-eol-steps__visual img {
    min-height: 0;
    height: auto;
    aspect-ratio: 1.35 / 1;
  }

  .sf39-eol-latest-card {
    grid-template-columns: 1fr;
  }

  .sf39-eol-latest-card__image,
  .sf39-eol-latest-card__image img {
    min-height: 0;
    height: auto;
    aspect-ratio: 1.55 / 1;
  }

  .sf39-eol-closing {
    grid-template-columns: 1fr;

    width: 100%;

    margin-top: 24px;
  }

  .sf39-eol-closing__image {
    min-height: 0;
    height: auto;
    aspect-ratio: 1.5 / 1;
  }

  .sf39-eol-closing__veil {
    inset: 35% 0 0;

    background: linear-gradient(180deg, rgba(233,239,229,0), #e9efe5 35%);
  }

  .sf39-eol-closing__content {
    grid-column: 1;
    grid-row: 2;

    padding: 34px 22px 42px;
  }
}

@media (max-width: 480px) {
  .sf39-eol-hero__inner,
  .sf39-eol-theme-grid,
  .sf39-eol-steps,
  .sf39-eol-latest,
  .sf39-eol-question,
  .sf39-eol-section-heading {
    width: calc(100% - 30px);
  }

  .sf39-eol-hero__lead br {
    display: none;
  }

  .sf39-eol-intro {
    padding: 49px 18px;
  }

  .sf39-eol-themes {
    padding: 38px 0 44px;
  }

  .sf39-eol-theme-grid {
    gap: 9px;
  }

  .sf39-eol-theme > img {
    aspect-ratio: 1.35 / 1;
  }

  .sf39-eol-question {
    grid-template-columns: 55px 1fr;
    gap: 13px;
  }

  .sf39-eol-question__label {
    min-height: 110px;
  }

  .sf39-eol-question__label span {
    font-size: 9px;
    letter-spacing: .08em;
  }

  .sf39-eol-question__label strong {
    font-size: 26px;
  }

  .sf39-eol-question h2 {
    font-size: 21px;
  }

  .sf39-eol-question h2 br {
    display: none;
  }

  .sf39-eol-steps h2 {
    font-size: 25px;
  }

  .sf39-eol-section-heading--line {
    gap: 12px;
  }

  .sf39-eol-section-heading--line .sf39-eol-eyebrow {
    font-size: 9px;
  }

  .sf39-eol-archive {
    padding-inline: 18px;
  }
}

/* =========================================================
   承認デザイン：FOUR CHAPTERSの右に伸びる横線
========================================================= */

.sf39-eol-themes .sf39-eol-section-heading > .sf39-eol-eyebrow {
  display: flex;

  align-items: center;
  gap: 22px;

  max-width: 470px;

  white-space: nowrap;
}

.sf39-eol-themes .sf39-eol-section-heading > .sf39-eol-eyebrow::after {
  content: "";

  flex: 1;

  min-width: 36px;
  height: 1px;

  background: #a8b5a8;
}

/* =========================================================
   承認デザイン：全記事一覧への入口と左右の植物線画
========================================================= */

.sf39-eol-archive {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  padding: 40px 190px 36px;

  border: 1px solid #b9c6b7;
  background: #f1f3ed;
}

.sf39-eol-archive::before,
.sf39-eol-archive::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;

  width: 245px;
  height: 265px;

  background: url("../../images/end-of-life-planning/sf39-eol-botanical.svg") center / contain no-repeat;

  pointer-events: none;
}

.sf39-eol-archive::before {
  left: -14px;

  transform: translateY(-50%);
}

.sf39-eol-archive::after {
  right: -14px;

  transform: translateY(-50%) scaleX(-1);
}

.sf39-eol-archive .sf39-eol-eyebrow {
  margin-bottom: 14px;

  color: #7c8b7b;
}

.sf39-eol-archive .sf39-eol-eyebrow::after {
  content: "";
  display: block;

  width: 54px;
  height: 1px;

  margin: 16px auto 0;

  background: #9cac97;
}

.sf39-eol-archive h2 {
  margin-bottom: 10px;

  font-size: clamp(24px, 2.55vw, 36px);
  line-height: 1.5;
}

.sf39-eol-archive > p:not(.sf39-eol-eyebrow) {
  max-width: 690px;

  margin-bottom: 20px;

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

.sf39-eol-archive .sf39-eol-button--outline {
  min-height: 54px;

  padding-inline: 38px;

  border: 1.5px solid #365951;
  background: rgba(251, 250, 246, .55);

  font-size: 15px;
}

.sf39-eol-archive .sf39-eol-button--outline:hover {
  background: #e2e9df;
}

@media (max-width: 1000px) {
  .sf39-eol-archive {
    padding-inline: 145px;
  }

  .sf39-eol-archive::before,
  .sf39-eol-archive::after {
    width: 190px;
    height: 240px;
  }
}

@media (max-width: 800px) {
  .sf39-eol-archive {
    padding: 35px 100px 32px;
  }

  .sf39-eol-archive::before,
  .sf39-eol-archive::after {
    width: 145px;

    opacity: .65;
  }
}

@media (max-width: 480px) {
  .sf39-eol-themes .sf39-eol-section-heading > .sf39-eol-eyebrow {
    gap: 16px;
  }

  .sf39-eol-archive {
    padding: 32px 24px 34px;
  }

  .sf39-eol-archive::before,
  .sf39-eol-archive::after {
    top: auto;
    bottom: -25px;

    width: 105px;
    height: 160px;

    opacity: .2;

    transform: none;
  }

  .sf39-eol-archive::after {
    transform: scaleX(-1);
  }

  .sf39-eol-archive h2 {
    font-size: 24px;
    letter-spacing: .02em;
  }

  .sf39-eol-archive > p:not(.sf39-eol-eyebrow) {
    font-size: 15px;
  }
}

/* =========================================================
   6ページ共通の余白基準：PC / スマホ
   セクション間は次のセクション側だけに設定し、二重の余白を防ぐ。
========================================================= */

body .sf39-eol {
  --sf39-section-space: 64px;
  --sf39-heading-space: 28px;
  --sf39-card-space: 24px;
  --sf39-feature-space: 56px;
  --sf39-closing-space: 64px;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  display: flow-root;
}

/* 通常のセクション：外側の余白と内側の上下余白を整理 */

body .sf39-eol > :is(.sf39-eol-intro, .sf39-eol-themes, .sf39-eol-question, .sf39-eol-steps, .sf39-eol-latest, .sf39-eol-archive, .sf39-eol-closing) {
  margin-block: 0 !important;
  padding-block: 0 !important;
}

body .sf39-eol > * + :is(.sf39-eol-intro, .sf39-eol-themes, .sf39-eol-question, .sf39-eol-steps, .sf39-eol-latest, .sf39-eol-archive, .sf39-eol-closing) {
  margin-top: var(--sf39-section-space) !important;
}

/* 見出しからカード・本文まで */

body .sf39-eol .sf39-eol-section-heading {
  margin-bottom: var(--sf39-heading-space) !important;
}

/* カード同士：写真やカードの寸法は既存の指定を使用 */

body .sf39-eol .sf39-eol-theme-grid,
body .sf39-eol .sf39-eol-latest-list,
body .sf39-eol .sf39-eol-steps {
  gap: var(--sf39-card-space) !important;
}

/* 背景色が変わる特集：内側の上下余白 */

body .sf39-eol .sf39-eol-intro,
body .sf39-eol .sf39-eol-themes,
body .sf39-eol .sf39-eol-question,
body .sf39-eol .sf39-eol-archive {
  padding-block: var(--sf39-feature-space) !important;
}

/* 最後の締め：内側の上下余白 */

body .sf39-eol .sf39-eol-closing__content {
  padding-block: var(--sf39-closing-space) !important;
}

body .sf39-eol .sf39-eol-intro__inner {
  padding-block: 0 !important;
}

/* フッターとの接続：締めの外側に白い余白を残さない */

body:has(.sf39-eol) :is(.sf-footer, .sf-site-footer) {
  margin-top: 0 !important;
}

body:has(.sf39-eol) :is(.sf-site, #content, .site-content) {
  padding-bottom: 0 !important;
}

@media (max-width: 767px) {
  body .sf39-eol {
    --sf39-section-space: 40px;
    --sf39-heading-space: 22px;
    --sf39-card-space: 18px;
    --sf39-feature-space: 36px;
    --sf39-closing-space: 40px;
  }

}

/* =========================================================
   終活：HERO直後の余白だけを軽く整える
========================================================= */

body .sf39-eol > .sf39-eol-intro {
  margin-top: 36px !important;
  padding-block: 40px !important;
}

@media (max-width: 767px) {
  body .sf39-eol > .sf39-eol-intro {
    margin-top: 28px !important;
    padding-block: 28px !important;
  }
}