/*
 * column-fix.css — readability overrides for the column pages (researchfc theme)
 *
 * Load AFTER main.css. Every rule is scoped to
 *   .single-column-page  (main element of single column articles)
 *   .column-page         (main element of the /column/ archive)
 * so the top page and the corporate pages are not affected.
 *
 * Specificity strategy: rules use `.single-column-page .single-column__content …`
 * (0,2,x) or higher. That ties or beats the main.css rules they replace, and this
 * file is linked after main.css, so ties resolve in our favour (including the
 * main.css @media (max-width: 860px) block, whose selectors are no stronger).
 * No !important is used.
 */

/* Site header (≤860px, 56px): see header-fix.css, loaded on every page. */

/* ==========================================================================
   1. Article: hero — compact, left-aligned.
      Visual order (CSS order only; DOM stays label, h1, time, breadcrumb):
      breadcrumb → [category label + updated date] → title.
   ========================================================================== */

/* 18/16px (spec said 24/22px) keeps a 2-line-title hero ≤150px at 1024px:
   18 + 15 breadcrumb + 8 + 20 label row + 8 + 2×31.5 title + 16 ≈ 148px. */
.single-column-page .single-column__hero {
  padding: 18px 32px 16px;
  text-align: left;
}

.single-column-page .single-column__hero .company-hero__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  column-gap: 10px;
  row-gap: 8px;
  width: min(100%, 840px);
  margin: 0 auto;
  text-align: left;
}

.single-column-page .single-column__hero .company-breadcrumb {
  order: 1;
  display: flex;
  flex: 0 0 100%;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.25;
}

.single-column-page .single-column__hero .company-breadcrumb > * {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* The trailing "› <article title>" repeats the h1: drop the last separator
   (aria-hidden) and keep the title for screen readers only, so the visible
   trail is "TOP › コラム". */
.single-column-page .single-column__hero .company-breadcrumb > :nth-last-child(2)[aria-hidden="true"] {
  display: none;
}

.single-column-page .single-column__hero .company-breadcrumb > :last-child:not(a) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.single-column-page .single-column__hero .company-breadcrumb a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.single-column-page .single-column__hero .company-breadcrumb a:focus-visible {
  outline: 2px solid #fff100;
  outline-offset: 2px;
  border-radius: 2px;
}

.single-column-page .single-column__hero .section-label--yellow {
  order: 2;
  display: flex;
  width: max-content;
  max-width: 100%;
  min-width: 0;
  height: auto;
  min-height: 20px;
  margin: 0;
  padding: 0 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
}

/* Updated date: plain text next to the label. */
.single-column-page .single-column__updated {
  order: 2;
  width: max-content;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #fff;
  background: transparent;
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  opacity: 0.85;
}

.single-column-page .single-column__title {
  order: 3;
  flex: 0 0 100%;
  width: auto;
  max-width: none;
  margin: 0;
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.01em;
  text-align: left;
}

/* ==========================================================================
   2. Article: body section, featured image, reading card
   ========================================================================== */

.single-column-page .single-column__body {
  padding-top: 48px;
}

.single-column-page .single-column__thumbnail {
  max-width: 840px;
  margin: 0 auto 32px;
}

/* White reading card restored (main.css L5266 removed it).
   840px − 2×56px padding − 2×1px border = 726px text column → 726 / 17 ≈ 42.7 chars. */
.single-column-page .single-column__content {
  max-width: 840px;
  margin: 0 auto;
  padding: 48px 56px;
  border: 1px solid #dce7f4;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(13, 56, 107, 0.07);
  color: #1a2541;
}

.single-column-page .single-column__content > :first-child {
  margin-top: 0;
}

.single-column-page .single-column__content > :last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   3. Article: body text, emphasis, links
   ========================================================================== */

.single-column-page .single-column__content p,
.single-column-page .single-column__content li {
  color: #1a2541;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.01em;
}

.single-column-page .single-column__content p {
  margin: 1.4em 0;
}

.single-column-page .single-column__content strong {
  font-weight: 700;
  background: linear-gradient(transparent 62%, rgba(255, 241, 0, 0.6) 62%);
}

/* List items in these articles are wrapped in <strong> wholesale; keep them
   bold but drop the marker so bullet lists do not turn into yellow blocks. */
.single-column-page .single-column__content li > strong:only-child,
.single-column-page .single-column__content .wp-block-quote.is-style-verdict li > strong {
  background: none;
}

.single-column-page .single-column__content a {
  color: #0637bd;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.single-column-page .single-column__content a:hover {
  color: #042a8f;
  text-decoration-thickness: 2px;
}

.single-column-page .single-column__content a:focus-visible {
  outline: 2px solid #0758e6;
  outline-offset: 2px;
  border-radius: 2px;
}

/* ==========================================================================
   4. Article: headings (plain rules, no accent bars)
   ========================================================================== */

.single-column-page .single-column__content :is(h2, h3, h4) {
  scroll-margin-top: calc(var(--header-height, 80px) + 20px);
}

.single-column-page .single-column__content h2 {
  position: static;
  margin: 56px 0 20px;
  padding: 0 0 10px;
  border: 0;
  border-bottom: 2px solid #06143c;
  color: #06143c;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.01em;
}

.single-column-page .single-column__content h2::before,
.single-column-page .single-column__content h2::after,
.single-column-page .single-column__content h3::before,
.single-column-page .single-column__content h4::before {
  content: none;
}

.single-column-page .single-column__content h3 {
  position: static;
  margin: 36px 0 12px;
  padding: 0 0 6px;
  border: 0;
  border-bottom: 1px solid #dce7f4;
  color: #06143c;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

.single-column-page .single-column__content h4 {
  position: static;
  margin: 32px 0 12px;
  padding: 0;
  border: 0;
  color: #06143c;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}

.single-column-page .single-column__content h5 {
  font-weight: 700;
}

/* ==========================================================================
   5. Article: quotes — verdict box (block style "verdict") and plain quote
   ========================================================================== */

/* The lead quote gets is-style-verdict: chosen in the editor (結論ボックス)
   or added by researchfc_column_mark_verdict() for the first quote before
   the first h2. */
.single-column-page .single-column__content .wp-block-quote.is-style-verdict {
  margin: 24px 0;
  padding: 20px 22px;
  border: 0;
  border-radius: 6px;
  background: #f5f7fb;
}

.single-column-page .single-column__content .wp-block-quote::before {
  content: none;
}

.single-column-page .single-column__content .wp-block-quote.is-style-verdict > p:first-child {
  margin: 0 0 8px;
  color: #06143c;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
}

.single-column-page .single-column__content .wp-block-quote.is-style-verdict :is(ul, ol) {
  margin: 0;
  padding-left: 1.3em;
}

.single-column-page .single-column__content .wp-block-quote.is-style-verdict li {
  margin: 0.35em 0;
  line-height: 1.75;
}

.single-column-page .single-column__content .wp-block-quote.is-style-verdict > :last-child {
  margin-bottom: 0;
}

/* Any other quote: a conventional quotation with a thin rule. */
.single-column-page .single-column__content .wp-block-quote:not(.is-style-verdict) {
  margin: 24px 0;
  padding: 0 0 0 18px;
  border-left: 3px solid #d5e1f2;
  color: #3b4a68;
  font-size: 16px;
}

/* inherit: section 3 sets p/li to 17px #1a2541, which would override the quote. */
.single-column-page .single-column__content .wp-block-quote:not(.is-style-verdict) :is(p, li) {
  color: inherit;
  font-size: inherit;
}

.single-column-page .single-column__content .wp-block-quote:not(.is-style-verdict) p {
  margin: 0.5em 0;
}

.single-column-page .single-column__content .wp-block-quote:not(.is-style-verdict) cite {
  display: block;
  margin-top: 6px;
  color: #4d6388;
  font-size: 13px;
  font-style: normal;
}

/* ==========================================================================
   6. Article: lists
   ========================================================================== */

.single-column-page .single-column__content :is(ul, ol).wp-block-list {
  margin: 1.2em 0;
  padding-left: 1.5em;
}

.single-column-page .single-column__content .wp-block-list > li {
  margin: 0.45em 0;
  line-height: 1.8;
}

.single-column-page .single-column__content .wp-block-list > li::marker {
  color: #0758e6;
}

/* ==========================================================================
   7. Article: tables (core table block)
   ========================================================================== */

.single-column-page .single-column__content .wp-block-table {
  margin: 24px 0;
  overflow-x: auto;
}

.single-column-page .single-column__content .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  color: #1a2541;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
}

.single-column-page .single-column__content .wp-block-table thead {
  border-bottom: 0;
}

.single-column-page .single-column__content .wp-block-table :is(th, td) {
  padding: 12px 14px;
  border: 1px solid #d5e1f2;
  vertical-align: top;
}

.single-column-page .single-column__content .wp-block-table th {
  color: #06143c;
  background: #eaf2ff;
  font-weight: 700;
}

/* Table title row (a single header cell spanning the table). */
.single-column-page .single-column__content .wp-block-table th[colspan] {
  background: #dfe9fb;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}

/* Fixed-layout tables: core gives a 50/50 split. Column widths of a fixed
   table come from its FIRST row, which here is the colspan title row, so a
   width on body cells would be ignored. Switch to auto layout and size the
   label column to 32%. (Core's word-break: break-word on these cells stays.) */
.single-column-page .single-column__content .wp-block-table table.has-fixed-layout {
  table-layout: auto;
}

.single-column-page .single-column__content .wp-block-table table.has-fixed-layout :is(th, td):first-child:not([colspan]) {
  width: 32%;
}

/* ==========================================================================
   8. Article: images
   ========================================================================== */

.single-column-page .single-column__content figure.wp-block-image {
  max-width: 100%;
  margin: 28px auto;
}

.single-column-page .single-column__content figure.wp-block-image img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border: 1px solid #dce7f4;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(13, 56, 107, 0.08);
}

.single-column-page .single-column__content figure.wp-block-image figcaption {
  margin: 10px 0 0;
  color: #4d6388;
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}

/* ==========================================================================
   9. Article: details / code (WHOIS dump)
   ========================================================================== */

.single-column-page .single-column__content details.wp-block-details {
  margin: 20px 0;
  padding: 0 16px;
  border: 1px solid #dce7f4;
  border-radius: 10px;
  background: #fff;
}

.single-column-page .single-column__content details.wp-block-details > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  color: #06143c;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  list-style: none;
  cursor: pointer;
}

.single-column-page .single-column__content details.wp-block-details > summary::-webkit-details-marker {
  display: none;
}

.single-column-page .single-column__content details.wp-block-details > summary::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-left: 2px;
  border-right: 2px solid #0758e6;
  border-bottom: 2px solid #0758e6;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}

.single-column-page .single-column__content details.wp-block-details[open] > summary::before {
  transform: rotate(45deg);
}

.single-column-page .single-column__content details.wp-block-details > summary:focus-visible {
  outline: 2px solid #0758e6;
  outline-offset: 2px;
  border-radius: 4px;
}

.single-column-page .single-column__content pre.wp-block-code {
  margin: 0 0 14px;
  padding: 14px;
  overflow: auto;
  border: 1px solid #e3eaf5;
  border-radius: 8px;
  color: #33415c;
  background: #f6f8fb;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  white-space: pre-wrap;
}

.single-column-page .single-column__content pre.wp-block-code code {
  font-family: inherit;
  font-size: inherit;
  white-space: inherit;
}

/* ==========================================================================
   10. Article: table of contents (built by researchfc_column_build_toc())
   ========================================================================== */

.single-column-page .single-column__content .single-column__toc {
  margin: 28px 0 36px;
  padding: 18px 22px;
  border: 0;
  border-radius: 6px;
  background: #f5f7fb;
}

.single-column-page .single-column__content .single-column__toc-title {
  margin: 0 0 8px;
  color: #06143c;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
}

.single-column-page .single-column__content .single-column__toc-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc-h2;
}

.single-column-page .single-column__content .single-column__toc li {
  margin: 0;
  padding: 0;
  color: #1a2541;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0;
  list-style: none;
}

.single-column-page .single-column__content .single-column__toc-list > li {
  counter-increment: toc-h2;
}

.single-column-page .single-column__content .single-column__toc-list > li + li {
  margin-top: 4px;
}

.single-column-page .single-column__content .single-column__toc a {
  display: flex;
  gap: 0.5em;
  padding: 2px 0;
  color: inherit;
  text-decoration: none;
}

.single-column-page .single-column__content .single-column__toc a::before {
  flex: 0 0 auto;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.single-column-page .single-column__content .single-column__toc-list > li > a::before {
  content: counter(toc-h2) ".";
}

.single-column-page .single-column__content .single-column__toc ol ol {
  margin: 2px 0 4px;
  padding: 0 0 0 1.6em;
  list-style: none;
  counter-reset: toc-h3;
}

.single-column-page .single-column__content .single-column__toc ol ol > li {
  color: #4d6388;
  font-size: 14px;
  font-weight: 400;
  counter-increment: toc-h3;
}

.single-column-page .single-column__content .single-column__toc ol ol a::before {
  content: counter(toc-h2) "-" counter(toc-h3);
}

.single-column-page .single-column__content .single-column__toc a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.single-column-page .single-column__content .single-column__toc a:focus-visible {
  outline: 2px solid #0758e6;
  outline-offset: 2px;
  border-radius: 2px;
}

/* ==========================================================================
   11. Article: ≤860px
   ========================================================================== */

@media (max-width: 860px) {
  .single-column-page .single-column__hero {
    padding: 14px 18px 16px;
  }

  .single-column-page .single-column__hero .section-label--yellow {
    font-size: 11px;
  }

  .single-column-page .single-column__title {
    font-size: 20px;
    line-height: 1.4;
  }

  /* No reading card on phones: the text uses the full body width
     (375 − 2×18px = 339px). The body section turns white so the tinted
     verdict box and TOC (#f5f7fb) stay visible; on the #f3f9ff page
     background they would be indistinguishable. */
  .single-column-page .single-column__body {
    padding-top: 24px;
    background: #fff;
  }

  .single-column-page .single-column__thumbnail {
    margin-bottom: 24px;
  }

  .single-column-page .single-column__content {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .single-column-page .single-column__content p,
  .single-column-page .single-column__content li {
    font-size: 16px;
    line-height: 1.85;
  }

  .single-column-page .single-column__content h2 {
    margin: 44px 0 16px;
    font-size: 21px;
  }

  .single-column-page .single-column__content h3 {
    font-size: 18px;
  }

  .single-column-page .single-column__content .wp-block-quote.is-style-verdict {
    padding: 16px;
  }

  .single-column-page .single-column__content .wp-block-list > li,
  .single-column-page .single-column__content .wp-block-quote.is-style-verdict li {
    line-height: 1.75;
  }

  .single-column-page .single-column__content .wp-block-table table {
    font-size: 14px;
  }

  .single-column-page .single-column__content .wp-block-table th[colspan] {
    font-size: 15px;
  }

  .single-column-page .single-column__content .wp-block-table :is(th, td) {
    padding: 10px 10px;
  }

  /* Phones list only the H2 items. */
  .single-column-page .single-column__content .single-column__toc {
    padding: 16px;
  }

  .single-column-page .single-column__content .single-column__toc ol ol {
    display: none;
  }
}

/* ==========================================================================
   12. Archive (/column/)
   ========================================================================== */

.column-page .column-archive__lead {
  font-weight: 400;
}

.column-page .column-archive-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.column-page .column-archive-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(15, 58, 108, 0.16);
}

.column-page .column-archive-card:focus-within {
  outline: 3px solid #0758e6;
  outline-offset: 3px;
}

.column-page .column-archive-card .column-card__link:focus-visible {
  outline: none;
}

.column-page .column-archive-card h3 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
}

/* margin-right keeps the excerpt clear of the absolutely positioned arrow
   (same 48px gutter main.css L4906 gives the title). */
.column-page .column-archive-card p {
  margin-right: 48px;
  color: #4d6388;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.8;
}

.column-page .column-archive-card .column-card__tag,
.column-page .column-archive-card .column-card__date,
.column-page .column-archive-card .column-card__arrow {
  font-weight: 700;
}

@media (max-width: 860px) {
  .column-page .column-archive-card h3 {
    font-size: 18px;
    line-height: 1.5;
  }

  .column-page .column-archive-card p {
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .column-page .column-archive-card {
    transition: none;
  }

  .column-page .column-archive-card:hover {
    transform: none;
  }

  .single-column-page .single-column__content details.wp-block-details > summary::before {
    transition: none;
  }
}