/* Reading and consultation components for the purchase-intent columns. */
.seo-article-image { margin: 2.5rem 0; }
.seo-article-image img { display: block; width: 100%; height: auto; max-height: 28rem; object-fit: cover; aspect-ratio: 16 / 10; }
.seo-article-image figcaption, .seo-byline, .seo-editorial-note { color: var(--sub-muted); font-size: .8rem; line-height: 1.9; }
.seo-byline time { display: inline; margin: 0; }
.seo-toc { padding: 1.5rem 1.75rem; border: 1px solid rgba(21,58,49,.2); background: #fff; }
.seo-toc > p { margin: 0 0 1rem; font-weight: 700; }
.seo-toc ol { margin: 0; padding-left: 1.5rem; }
.seo-toc li { padding: .3rem 0; line-height: 1.8; }
.seo-toc a, .seo-related a, .seo-article section p a { color: var(--sub-forest); text-decoration: underline; text-underline-offset: .25em; }
.seo-article section[id] { scroll-margin-top: 7rem; }
.seo-table-scroll { margin: 1.75rem 0; overflow-x: auto; border: 1px solid rgba(21,58,49,.2); }
.seo-table { width: 100%; min-width: 35rem; border-collapse: collapse; font-size: .86rem; line-height: 1.8; background: #fff; }
.seo-table caption { padding: .8rem 1rem; text-align: left; color: var(--sub-muted); background: #fff; font-size: .8rem; }
.seo-table th, .seo-table td { padding: 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(21,58,49,.15); }
.seo-table thead { background: var(--sub-forest); color: #fff; }
.seo-table tbody th { font-weight: 500; }
.seo-consultation { margin-top: 3rem; padding: clamp(1.4rem, 4vw, 2.2rem); background: #e4ece7; border-top: 3px solid var(--sub-forest); }
.seo-consultation h2 { margin: 0 0 1rem; font: 400 clamp(1.3rem, 3vw, 1.8rem)/1.6 "Noto Serif JP", serif; }
.seo-consultation > p:not(.sub-kicker) { color: #394640; line-height: 1.9; }
.seo-action-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.seo-quote-button { background: var(--sub-forest); color: #fff; }
.seo-quote-button:hover { background: #12392f; }
.seo-text-link { display: inline-block; margin-top: 1.25rem; color: var(--sub-forest); text-decoration: underline; text-underline-offset: .3em; line-height: 1.8; }
.seo-questions details { border-bottom: 1px solid rgba(21,58,49,.2); }
.seo-questions summary { cursor: pointer; padding: 1.2rem 0; line-height: 1.8; font-weight: 500; }
.seo-questions details p { margin: 0 0 1.4rem; }
.seo-editorial-note { margin: 3rem 0 0; }
.seo-article a:focus-visible, .seo-article summary:focus-visible, .seo-table-scroll:focus-visible { outline: 2px solid var(--sub-forest); outline-offset: 4px; }
@media (max-width: 600px) {
  .seo-toc { padding: 1.25rem; }
  .seo-action-row { flex-direction: column; }
  .seo-action-row .btn { width: 100%; white-space: normal; text-align: center; }
  .seo-consultation { padding: 1.3rem; }
  .seo-table { font-size: .82rem; }
}


/* Compact article headings, thumbnail recommendations, and image CTA banners. */
.seo-article .article-page-body { max-width: 56rem; padding-top: clamp(2rem, 5vw, 3.5rem); }
.seo-article .article-page-header { padding-bottom: 2rem; }
.seo-article .article-page-header .sub-kicker { margin-bottom: .9rem; font-size: .72rem; line-height: 1.65; letter-spacing: .08em; }
.seo-article .article-page-header h1 { max-width: none; font-family: "Noto Sans JP", sans-serif; font-size: clamp(1.6rem, 2.7vw, 2.15rem); font-weight: 600; line-height: 1.55; letter-spacing: .015em; text-wrap: wrap; overflow-wrap: anywhere; }
.seo-title-main { display: block; }
.seo-title-detail { display: block; margin-top: .6rem; font-size: clamp(1rem, 1.5vw, 1.2rem); font-weight: 400; line-height: 1.75; color: #46514c; }
.seo-title-separator { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.seo-article .seo-byline { margin: 1rem 0 0; font-size: .75rem; }
.seo-article .article-lead { margin-top: 1.35rem; font-size: 1rem; line-height: 1.95; }
.seo-article-image { margin-block: 1.75rem 2.5rem; }
.seo-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.seo-article .seo-related a.seo-related-card { display: flex; min-width: 0; flex-direction: column; color: var(--sub-ink); text-decoration: none; border: 1px solid rgba(21,58,49,.17); background: #fff; transition: box-shadow .2s ease, border-color .2s ease; }
.seo-related-card:hover { border-color: var(--sub-forest); box-shadow: 0 .5rem 1.5rem rgba(10,33,27,.09); }
.seo-related-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #edeae3; }
.seo-related-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.seo-related-media--product { background: #fff; }
.seo-related-media--product img { object-fit: contain; padding: .5rem; }
.seo-related-copy { display: flex; flex: 1; flex-direction: column; padding: 1rem; }
.seo-related-category { margin-bottom: .55rem; font-size: .68rem; font-weight: 600; color: var(--sub-forest); }
.seo-related-title { font-size: .88rem; font-weight: 600; line-height: 1.75; }
.seo-related-more { display: flex; justify-content: space-between; margin-top: auto; padding-top: 1rem; font-size: .72rem; color: var(--sub-forest); }
.seo-article .seo-related-index { margin-top: 1.5rem; font-size: .85rem; }
.seo-consultation-banner { position: relative; isolation: isolate; overflow: hidden; margin-top: 3rem; padding: 0; border: 1px solid rgba(21,58,49,.17); background: #f4efe4; }
.seo-banner-image { position: absolute; inset: 0; z-index: -2; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 68% center; }
.seo-consultation-banner::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(249,247,240,.98) 0%, rgba(249,247,240,.96) 36%, rgba(249,247,240,.85) 55%, rgba(249,247,240,.12) 85%); }
.seo-banner-content { position: relative; width: 72%; padding: 2rem; }
.seo-banner-label { margin: 0 0 .8rem; color: var(--sub-forest); font-size: .75rem; font-weight: 600; letter-spacing: .06em; }
.seo-consultation-banner h2 { margin: 0 0 .8rem; font: 600 clamp(1.2rem, 2vw, 1.5rem)/1.65 "Noto Sans JP", sans-serif; }
.seo-banner-lead { max-width: 27rem; margin: 0; color: #394640; font-size: .88rem; line-height: 1.9; }
.seo-consultation-banner .seo-action-row { margin-top: 1.2rem; gap: .6rem; }
.seo-consultation-banner .btn { min-height: 2.9rem; padding: .75rem 1rem; font-size: .8rem; letter-spacing: .015em; }
.seo-consultation-banner .seo-text-link { margin-top: 1rem; font-size: .74rem; }
.seo-banner-caption { position: absolute; right: .6rem; bottom: .5rem; padding: .1rem .35rem; background: rgba(255,255,255,.8); color: #46514c; font-size: .6rem; }
@media (max-width: 760px) {
  .seo-related-grid { gap: .7rem; }
  .seo-related-copy { padding: .8rem; }
  .seo-banner-content { width: 85%; padding: 1.5rem; }
}
@media (max-width: 600px) {
  .seo-article .article-page-body { padding-top: 1.5rem; }
  .seo-article .article-page-header h1 { font-size: 1.5rem; line-height: 1.6; }
  .seo-title-detail { font-size: 1rem; margin-top: .5rem; }
  .seo-article .article-lead { font-size: .95rem; }
  .seo-related-grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .seo-related-media { aspect-ratio: 16 / 9; }
  .seo-related-copy { padding: 1rem; }
  .seo-related-title { font-size: 1rem; }
  .seo-consultation-banner { padding: 0; }
  .seo-consultation-banner::before { background: linear-gradient(90deg, rgba(249,247,240,.97), rgba(249,247,240,.88) 65%, rgba(249,247,240,.65)); }
  .seo-banner-image { object-position: 76% center; }
  .seo-banner-content { width: 100%; padding: 1.4rem; }
  .seo-consultation-banner h2 { font-size: 1.25rem; }
  .seo-consultation-banner .seo-action-row { flex-direction: column; }
  .seo-consultation-banner .btn { width: 100%; min-height: 3rem; font-size: .88rem; }
  .seo-banner-caption { bottom: .3rem; font-size: .55rem; }
}
@media (prefers-reduced-motion: reduce) {
  .seo-related-card { transition: none; }
}

/* Readable gothic headings and whole-card navigation for the journal. */
.seo-article .article-page-header .sub-kicker { font-family: "Noto Sans JP", sans-serif; }
.columns-page .column-card { border-color: rgba(21,58,49,.2); border-radius: .65rem; overflow: hidden; color: var(--sub-ink); text-decoration: none; box-shadow: 0 .15rem .65rem rgba(10,33,27,.04); cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.columns-page .column-card:hover { transform: translateY(-4px); border-color: var(--sub-forest); box-shadow: 0 .7rem 1.5rem rgba(10,33,27,.12); }
.columns-page .column-card:focus-visible { outline: 3px solid var(--sub-forest); outline-offset: 5px; border-color: var(--sub-forest); }
.columns-page .column-card-body { padding: 1.2rem 1.35rem 1.4rem; }
.columns-page .column-card-meta { margin-bottom: .75rem; }
.columns-page .column-card h2 { font: 600 clamp(1.1rem, 1.7vw, 1.25rem)/1.65 "Noto Sans JP", sans-serif; letter-spacing: .015em; text-wrap: pretty; overflow-wrap: anywhere; }
.columns-page .column-card-image img { display: block; object-fit: cover; }
.seo-article .article-page-body section:not(.seo-consultation) h2 { font: 600 clamp(1.3rem, 2.1vw, 1.7rem)/1.65 "Noto Sans JP", sans-serif; letter-spacing: .015em; text-wrap: wrap; }
.seo-article .article-page-body section:not(.seo-consultation) h3 { font: 600 1.1rem/1.7 "Noto Sans JP", sans-serif; }
.seo-article .article-page-header h1, .seo-related-title, .seo-article .seo-questions summary { font-family: "Noto Sans JP", sans-serif; }
/* Override the shared heading font only within article content and cards. */
.columns-page .column-card h2,
.seo-article .article-page-header h1,
.seo-article .article-page-body section:not(.seo-consultation) h2,
.seo-article .article-page-body section:not(.seo-consultation) h3 {
 font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif !important;
}
.seo-article .article-page-header h1, .seo-title-main { text-wrap: balance; }
@media (prefers-reduced-motion: reduce) {
 .columns-page .column-card, .columns-page .column-card-image img { transition: none; }
 .columns-page .column-card:hover, .columns-page .column-card:hover .column-card-image img { transform: none; }
}