@charset "UTF-8";

/* Owner-approved family design, local candidate 020. Loaded after legacy CSS. */
:root {
  --color-ink: #171918;
  --color-ink-soft: #4c5450;
  --color-paper: #ffffff;
  --color-surface-blue: #f7f9f8;
  --color-line: #dce1de;
  --color-line-strong: #aab4ae;
  --color-gold: #438a73;
  --color-gold-dark: #2b6552;
  --font-body: "Hiragino Sans", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Meiryo, sans-serif;
  --font-display: var(--font-body);
  --radius-small: 0;
  --radius-medium: 0;
  --content-max: 1140px;
}

body.site-page { background: #fff; font-feature-settings: normal; }
body.site-page a { color: #2b6552; text-decoration-color: #438a73; }
body.site-page a:hover { color: #171918; }
body.site-page a:focus-visible,
body.site-page summary:focus-visible,
body.site-page [tabindex]:focus-visible { outline: 3px solid #438a73; outline-offset: 4px; }

.site-header { display: block; padding: 0; background: #fff; color: #171918; border-bottom: 1px solid #dce1de; }
.family-band { border-bottom: 1px solid #dce1de; background: #fff; }
.family-band__inner { display: flex; justify-content: space-between; gap: 12px; max-width: 1140px; margin: auto; padding: 0 24px; }
.family-band__item,
body.site-page a.family-band__item { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 5px 0; color: #171918; font-size: 12px; line-height: 1.4; text-decoration: none; white-space: nowrap; }
.family-band__item small { font-size: 10px; color: #657069; }
.family-band__item img { width: 15px; height: 15px; flex: 0 0 15px; }
.family-band__item--current { border-bottom: 3px solid #438a73; font-weight: 800; }
.family-band__item--current small { color: #2b6552; }
.family-band__item:hover { text-decoration: underline !important; text-underline-offset: 4px; }
.family-header-main { display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 1188px; min-height: 105px; margin: auto; padding: 20px 24px; }
.site-brand { display: flex; align-items: center; gap: 14px; min-width: 0; color: #171918 !important; white-space: normal; }
.site-brand__icon { width: 46px; height: 46px; flex: 0 0 46px; }
.site-brand__text { display: grid; gap: 5px; }
.site-brand__title { font-family: var(--font-body); font-size: 30px; font-weight: 900; letter-spacing: -.025em; line-height: 1.3; }
.site-brand__tagline { display: block; color: #4c5450; font-size: 12px; letter-spacing: .03em; line-height: 1.5; }
body.site-page ul#nav { gap: 16px; font-size: 12px; }
body.site-page ul#nav a,
body.site-page ul#nav a:link,
body.site-page ul#nav a:visited { min-height: 44px; color: #171918; font-weight: 700; }
body.site-page ul#nav a:hover,
body.site-page ul#nav a[aria-current="page"] { color: #2b6552; }
body.site-page ul#nav a[aria-current="page"] { box-shadow: none; border-bottom: 2px solid #438a73; }

body.site-page h1,
body.site-page h2,
body.site-page h3 { font-family: var(--font-body); font-weight: 900; letter-spacing: -.02em; }
body.site-page h1 { line-height: 1.5; font-size: clamp(32px, 3.8vw, 50px); }
body.site-page h2 { font-size: clamp(24px, 2.5vw, 32px); border-bottom: 0; }
body.site-page h2::before { display: none; }
body.site-page h3 { font-size: clamp(20px, 2.1vw, 25px); }
body.site-page .dateline { color: #4c5450; font-weight: 500; letter-spacing: .02em; }
body.site-page #content-pan { color: #657069; }
body.site-page #content-pan a { color: #4c5450; }

/* Article-local ledger styles load later; the home grid must win specifically. */
body.site-page.site-home #content-wrapper { grid-template-columns: minmax(0, 1fr); grid-template-areas: "header" "main" "aside"; }
body.site-home #content-inner { width: min(1140px, calc(100% - 48px)); margin: 0 auto; padding-top: 0; }
body.site-home .content-right { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 22px 44px; padding: 60px 0 48px; }
body.site-home .hero-heading { align-self: center; }
body.site-home .hero-heading h1 { max-width: 620px; font-size: clamp(40px, 4.2vw, 60px); font-weight: 900; line-height: 1.48; letter-spacing: -.04em; text-wrap: pretty; }
body.site-home .hero-heading .dateline { font-size: 14px; margin: 20px 0 0; }
.family-hero-art { margin: 0; align-self: center; }
.family-hero-art img { display: block; width: 100%; height: auto; }
body.site-home .hero-summary { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; padding: 28px 0 0; border-left: 0; border-top: 1px solid #dce1de; color: #4c5450; font-size: 14px; line-height: 1.9; }
body.site-home .hero-summary p { max-width: none; margin: 0; }
.hero-actions { gap: 16px; margin-top: 28px !important; }
.button-primary,
.button-secondary { min-height: 48px; border-radius: 0; font-size: 13px; }
body.site-page .button-primary { background: #171918; border-color: #171918; color: #fff !important; }
body.site-page .button-primary:hover { background: #2b6552; border-color: #2b6552; }
body.site-page .button-secondary { justify-content: flex-start; border: 0; padding-left: 0; padding-right: 0; background: none; text-decoration: underline !important; }
body.site-page .button-secondary:hover { background: none; }

.family-purpose { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; padding: 40px 0; border-top: 1px solid #aab4ae; border-bottom: 1px solid #dce1de; }
body.site-home .family-purpose { grid-row: 3; }
.family-purpose__item { min-width: 0; }
.family-purpose__item > img { display: block; width: 44px; height: 44px; margin-bottom: 20px; }
body.site-page .family-purpose h2 { margin: 0 0 10px; padding: 0; border: 0; font-size: 25px; }
body.site-page .family-purpose p { margin: 0 0 18px; color: #4c5450; font-size: 14px; }
body.site-page .family-purpose a { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: #171918; font-size: 14px; font-weight: 700; }
.family-purpose a img { width: 20px; height: 20px; }
body.site-home .status-notice { grid-row: 4; margin-top: 40px; }
body.site-home .home-compare-overview { grid-row: 5; }
body.site-home .content-full { grid-row: 6; }
body.site-home #sidebar { position: static; width: min(1140px, calc(100% - 48px)); max-height: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 auto 64px; }
body.site-home #sidebar::before { display: none; }

body.site-page .status-notice { border: 1px solid #dce1de; border-left: 3px solid #438a73; border-radius: 0; background: #f7f9f8; color: #4c5450; }
body.site-home .status-notice > p:first-child { white-space: normal; }
.home-compare-card,
.home-compare-card--investment { border: 0; border-top: 1px solid #aab4ae; border-radius: 0; padding: 26px 0; background: #fff; }
.home-compare-cards { gap: 44px; }
body.site-page .home-compare-overview__header h2 { display: block; text-align: left; }
body.site-page .home-compare-overview__header h2::after { display: none; }
body.site-page .home-compare-overview__header > p { color: #4c5450; text-align: left; }
body.site-page .intent-summary,
body.site-page .reader-guide,
body.site-page .comparison-decision,
body.site-page .article-supervisor { border: 1px solid #dce1de; border-radius: 0; background: #fff; box-shadow: none; }
body.site-page .comparison-decision__card { border-radius: 0; background: #fff; }
body.site-page .comparison-decision__boundary { border-radius: 0; background: #f7f9f8; }
body.site-page .article-supervisor__header { border-radius: 0; background: none; }
body.site-page .article-related h2 { margin: 0 0 14px; padding: 0; border: 0; font-size: clamp(22px, 2.2vw, 28px); }
body.site-page .intent-summary::before { background: #438a73; width: 3px; }
body.site-page .intent-summary__answer { font-family: var(--font-body); font-weight: 800; }
body.site-page .intent-summary__points li::before { border: 0; border-radius: 0; background: url("/images/design/icons/check.svg") center / 16px 16px no-repeat; content: ""; width: 16px; height: 16px; }
body.site-page .reader-guide__steps li { border-radius: 0; background: #f7f9f8; }
body.site-page .article-supervisor__scope { background: #f7f9f8; color: #4c5450; }
body.site-page .article-supervisor__link,
body.site-page .article-supervisor__link:link,
body.site-page .article-supervisor__link:visited,
body.site-page .article-supervisor__official,
body.site-page .article-supervisor__official:link,
body.site-page .article-supervisor__official:visited { min-height: 44px; border-radius: 0; }
body.site-page .article-faq summary::after { width: 20px; height: 20px; background: url("/images/design/icons/plus.svg") center / contain no-repeat; content: ""; }
body.site-page .article-faq details[open] summary::after { background-image: url("/images/design/icons/minus.svg"); content: ""; }
body.site-page blockquote { background: #f7f9f8; color: #4c5450; }
body.site-page .side-section { border-radius: 0; background: #fff; }
body.site-page table { color: #303833; }
body.site-page .table-scroll > table { display: table; max-width: none; overflow: visible; white-space: normal; margin: 0; }
body.site-page table.ledger-overview { min-width: 1000px; }
body.site-page .ledger-overview th,
body.site-page .ledger-overview td { min-width: 100px; }
body.site-page .ledger-overview th:nth-child(4),
body.site-page .ledger-overview td:nth-child(4) { min-width: 260px; }
body.site-page .ledger-overview th:nth-child(5),
body.site-page .ledger-overview td:nth-child(5) { min-width: 200px; }
body.site-page table.table1 th,
body.site-page table th { float: none; display: table-cell; }
body.site-page table tr:first-child th { background: #f1f4f2; color: #171918; border-top-color: #aab4ae; }
body.site-page table tr:first-child th a { color: #2b6552; text-decoration-color: #438a73; }
body.site-layout #footer { border-top: 1px solid #dce1de; background: #fff; color: #4c5450; }
body.site-page ul#footer-nav a,
body.site-page ul#footer-nav a:link,
body.site-page ul#footer-nav a:visited,
body.site-page p.copyright,
body.site-page p.copyright a { color: #4c5450; text-decoration-color: #aab4ae; }

/* Contact behavior and CSP remain unchanged; only the shared visual language. */
body.site-page .contact-intro,
body.site-page .secure-contact-form,
body.site-page .contact-recipient,
body.site-page .contact-consent,
body.site-page .contact-noscript,
body.site-page .contact-fallback { border-color: #dce1de; border-radius: 0; background: #fff; box-shadow: none; }
body.site-page .contact-intro__eyebrow { color: #2b6552; }
body.site-page .contact-recipient dt,
body.site-page .contact-required-note,
body.site-page .contact-field__help { color: #4c5450; }
body.site-page .contact-recipient dd,
body.site-page .contact-intro h2,
body.site-page .secure-contact-form legend,
body.site-page .contact-field label,
body.site-page .contact-consent label { color: #171918; }
body.site-page .contact-security-note { border-left-color: #438a73; border-radius: 0; background: #f7f9f8; color: #4c5450; }
body.site-page .contact-security-note h2 { color: #171918; }
body.site-page .contact-field input,
body.site-page .contact-field select,
body.site-page .contact-field textarea { border-radius: 0; color: #171918; }
body.site-page .contact-field input:focus,
body.site-page .contact-field select:focus,
body.site-page .contact-field textarea:focus { outline: 3px solid #438a73; border-color: #438a73; box-shadow: none; }
body.site-page .contact-consent { background: #f7f9f8; }
body.site-page .contact-consent input { accent-color: #2b6552; }
body.site-page .contact-submit { border-radius: 0; background: #171918; box-shadow: none; }
body.site-page .contact-submit:hover:not(:disabled) { background: #2b6552; box-shadow: none; transform: none; }
body.site-page .contact-submit:focus-visible { outline: 3px solid #438a73; }

@media (min-width: 1100px) {
  /* Later article inserts carry inline full-grid widths; keep all in the reader column. */
  body.site-page.site-layout:not(.site-home) .article-related {
    grid-column: 4 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 24px 0 !important;
  }
}

@media (max-width: 1100px) {
  .family-header-main { display: block; padding-bottom: 0; }
  .site-nav { margin-top: 12px; }
  body.site-page ul#nav { justify-content: flex-start; gap: 24px; }
}
@media (max-width: 1099px) {
  body.site-page.site-layout #content-wrapper { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .family-band__inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; padding: 0 18px; }
  .family-band__item,
  body.site-page a.family-band__item { min-height: 44px; flex-wrap: wrap; gap: 3px 6px; font-size: 11px; white-space: normal; }
  .family-band__item small { font-size: 9px; }
  .family-band__item--current { border-bottom-width: 2px; }
  .family-header-main { padding: 22px 18px 0; }
  .site-brand { gap: 10px; }
  .site-brand__icon { width: 36px; height: 36px; flex-basis: 36px; }
  .site-brand__title { font-size: clamp(20px, 5.7vw, 28px); letter-spacing: -.035em; }
  .site-brand__tagline { font-size: 11px; }
  .site-nav { overflow-x: auto; scrollbar-width: thin; }
  body.site-page ul#nav { width: max-content; gap: 22px; font-size: 12px; padding-bottom: 3px; }
  body.site-page ul#nav li { margin: 0; }
  body.site-layout #content-inner,
  body.site-home #content-inner { width: calc(100% - 36px); padding-top: 24px; }
  body.site-home #content-inner { padding-top: 0; }
  body.site-home .content-right { grid-template-columns: 1fr; gap: 22px; padding: 40px 0 32px; }
  body.site-home .hero-heading h1 { font-size: clamp(35px, 9.4vw, 46px); line-height: 1.5; letter-spacing: -.04em; }
  .family-hero-art { width: min(460px, 100%); justify-self: center; }
  body.site-home .hero-summary { grid-template-columns: 1fr; gap: 16px; padding-top: 24px; }
  .hero-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
  .button-primary { width: 100%; }
  .family-purpose { grid-template-columns: 1fr; gap: 24px; padding: 30px 0; }
  .family-purpose__item { display: grid; grid-template-columns: 40px 1fr; column-gap: 18px; padding-bottom: 20px; border-bottom: 1px solid #dce1de; }
  .family-purpose__item:last-child { border-bottom: 0; padding-bottom: 0; }
  .family-purpose__item > img { grid-row: 1 / 4; width: 36px; height: 36px; margin: 0; }
  body.site-page .family-purpose h2 { font-size: 23px; }
  body.site-page .family-purpose p { margin-bottom: 4px; }
  .home-compare-cards { grid-template-columns: 1fr; gap: 10px; }
  body.site-home .status-notice { margin-top: 30px; }
  body.site-home #sidebar { width: calc(100% - 36px); grid-template-columns: 1fr; }
  body.site-page h1 { font-size: 32px; }
  body.site-page .intent-summary { border-radius: 0; }
}
@media print {
  .family-band, .family-purpose, .family-hero-art { display: none; }
  .family-header-main { padding: 0; }
}
