/* Auto-generated RTL version of ../css/column.css (rtlcss) for /ar/ pages. Regenerate when the original changes. */
/* GeckoFlag: column (ja/column/*.html)
   Self-contained styles for the column section: section banner, breadcrumb,
   two-column layout (left navigation + article), article typography, tables, list pages.
   Loaded after common.css and shared-page.css. features.css / compare.css are NOT used here. */

  :root {
    --col-ink: #2F3A48;          /* body text (darker than the site default for long reading) */
    --col-tint: #EEF6F5;         /* light brand tint */
    --col-tint-strong: #DDEDEB;
    --col-marker: #FFF1B8;       /* highlighter */
    --col-warn: #C2410C;
    --col-warn-bg: #FFF1E8;
  }

  /* ---------- Section banner (same height as .policy-hero on other pages) ---------- */
  .col-banner { background: var(--gradient-brand); padding: 52px 0 60px; }
  .col-banner .wrap { max-width: 1300px; }
  .col-banner-title { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 2.2rem; line-height: 1.6; color: #fff; letter-spacing: -0.01em; margin: 0 0 10px; }
  .col-banner-title a { color: #fff; }
  .col-banner-sub { color: rgba(255,255,255,.92); font-size: 1rem; margin: 0; }

  /* ---------- Breadcrumb ---------- */
  .col-crumb-bar { background: var(--gf-panel); padding: 12px 0; }
  .col-crumb-bar .wrap { max-width: 1300px; }
  .col-crumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.82rem; font-weight: 600; color: var(--gf-text-muted); }
  .col-crumb a:hover { color: var(--gf-brand-dark); }
  .col-crumb .sep { opacity: 0.6; }
  .col-crumb .current { color: var(--gf-text); }

  /* ---------- Layout: left navigation + main ---------- */
  .col-layout {
    max-width: 1300px; margin: 0 auto; padding: 36px 24px 88px;
    display: grid; grid-template-columns: clamp(250px, 24vw, 300px) minmax(0, 1fr); gap: 40px; align-items: start;
    grid-template-areas: "side main";
  }
  .col-main { grid-area: main; min-width: 0; }
  /* The side column is as tall as the article. "新着記事" scrolls away with the page;
     only .col-side-follow (tags, archive, GeckoFlag banner) sticks while reading. No inner scrollbar. */
  .col-side { grid-area: side; align-self: stretch; display: flex; flex-direction: column; gap: 20px; }
  .col-side-follow { position: sticky; top: 116px; display: flex; flex-direction: column; gap: 20px; }
  /* Window too short to fit all three: only the GeckoFlag banner sticks */
  @media (max-height: 760px) {
    .col-side-follow { display: contents; }
    .col-side .col-promo { position: sticky; top: 116px; }
  }

  /* ---------- Left navigation widgets ---------- */
  .col-widget { background: var(--gf-surface); border-radius: 16px; box-shadow: var(--shadow-card); padding: 18px 18px 16px; }
  .col-widget-title {
    font-family: 'Sora', sans-serif; font-weight: 700; font-size: 0.95rem; color: var(--gf-text);
    margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--gf-border); position: relative;
  }
  .col-widget-title::after { content: ""; position: absolute; right: 0; bottom: -2px; width: 40px; height: 2px; background: var(--gf-brand); }
  .col-widget ul { list-style: none; margin: 0; padding: 0; }
  .col-widget li + li { margin-top: 10px; }
  .col-widget a { color: var(--col-ink); font-size: 0.88rem; line-height: 1.55; transition: color 0.15s ease; }
  .col-widget a:hover { color: var(--gf-brand); }
  .col-widget a[aria-current] { color: var(--gf-brand-dark); font-weight: 700; }
  .col-widget .count { color: var(--gf-text-muted); font-size: 0.8rem; margin-right: 2px; }
  .col-recent a { display: block; }
  .col-recent time { display: block; font-size: 0.76rem; font-weight: 600; color: var(--gf-text-muted); }
  .col-recent li { padding-bottom: 12px; border-bottom: 1px solid var(--gf-border); }
  .col-recent li + li { margin-top: 12px; }
  .col-recent li:last-child { padding-bottom: 2px; border-bottom: none; }
  .col-archive a::before { content: "›"; color: var(--gf-brand); font-weight: 700; margin-left: 8px; }
  .col-tags { display: flex; flex-wrap: wrap; gap: 8px; }
  .col-widget.col-promo { background: var(--col-tint); box-shadow: none; border: 1px solid var(--col-tint-strong); }
  .col-promo p { font-size: 0.84rem; line-height: 1.65; color: var(--col-ink); margin: 0 0 12px; }
  .col-promo .col-promo-name { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1rem; color: var(--gf-brand-dark); margin: 0 0 6px; }
  .col-widget a.col-promo-btn {
    display: block; text-align: center; padding: 9px 12px; border-radius: 999px;
    background: var(--gf-brand); color: #fff; font-weight: 700; font-size: 0.86rem;
  }
  .col-widget a.col-promo-btn:hover { background: var(--gf-brand-dark); color: #fff; }

  /* ---------- Tag chips ---------- */
  a.col-tag, span.col-tag {
    display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px;
    font-size: 0.78rem; font-weight: 700; line-height: 1.5;
    background: var(--col-tint); color: var(--gf-brand-dark); border: 1px solid var(--col-tint-strong);
    transition: background 0.15s ease, color 0.15s ease;
  }
  a.col-tag::before { content: "#"; opacity: 0.6; margin-left: 1px; }
  a.col-tag:hover, a.col-tag[aria-current] { background: var(--gf-brand); color: #fff; border-color: var(--gf-brand); }

  /* ---------- Article card ---------- */
  .col-article { background: var(--gf-surface); border-radius: 20px; box-shadow: var(--shadow-card); padding: 40px 48px 44px; }
  .col-header { margin: 0 0 30px; }
  .col-header .col-tags { margin: 0 0 14px; }
  .col-header h1 { font-size: 1.85rem; line-height: 1.5; margin: 0 0 14px; }
  .col-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 22px; font-size: 0.84rem; font-weight: 600; color: var(--gf-text-muted); }
  .col-eyecatch { width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--gf-border); }

  /* ---------- Article typography ---------- */
  .col-body { color: var(--col-ink); }
  .col-body p { color: var(--col-ink); font-size: 1rem; line-height: 1.95; margin: 0 0 1.35em; }
  .col-body p.col-lead { font-size: 1.06rem; }
  .col-body strong { color: var(--gf-text); font-weight: 700; }
  .col-body p > strong, .col-body li > strong { background: linear-gradient(transparent 62%, var(--col-marker) 62%); }
  .col-body strong.col-alert { color: #C62828; background: none; }  /* 赤字・太字の注意書き（マーカーなし） */
  .col-body a.inline-link { color: var(--gf-brand); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
  .col-body a.inline-link:hover { color: var(--gf-brand-dark); }

  .col-body h2, .col-body h3 { scroll-margin-top: 120px; }
  .col-body h2 {
    font-size: 1.42rem; line-height: 1.5; margin: 64px 0 24px; padding: 14px 20px 14px 18px;
    background: var(--col-tint); border-right: 6px solid var(--gf-brand); border-radius: 12px 0 0 12px;
  }
  .col-body h3 {
    font-size: 1.16rem; line-height: 1.55; margin: 42px 0 16px; padding: 0 16px 10px 0;
    border-bottom: 2px solid var(--gf-border); position: relative;
  }
  .col-body h3::before {
    content: ""; position: absolute; right: 0; top: 0.2em; width: 5px; height: 1.15em;
    border-radius: 3px; background: var(--gradient-brand);
  }
  .col-body h3.is-step { padding-right: 0; display: flex; align-items: flex-start; gap: 12px; }
  .col-body h3.is-step::before { content: none; }
  .col-step-num {
    flex: none; width: 1.9em; height: 1.9em; border-radius: 50%; margin-top: -0.12em;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--gf-brand); color: #fff; font-family: 'Sora', sans-serif; font-size: 0.95em;
  }

  /* ---------- Lists ---------- */
  .col-body ul { list-style: none; margin: 0 0 1.5em; padding: 0; }
  .col-body ul li { position: relative; padding-right: 1.5em; margin-bottom: 0.7em; line-height: 1.85; color: var(--col-ink); }
  .col-body ul li::before {
    content: ""; position: absolute; right: 0.3em; top: 0.72em; width: 0.5em; height: 0.5em;
    border-radius: 50%; background: var(--gf-brand);
  }
  .col-body ul li:last-child { margin-bottom: 0; }

  /* Schedule list (dates as a small timeline) */
  .col-body ul.col-schedule { background: var(--col-tint); border-radius: 14px; padding: 18px 20px; }

  /* Numbered steps (short procedures inside the text) */
  .col-body ol.col-steps { margin: 0 0 1.5em; padding: 18px 2.9em 18px 20px; background: var(--col-tint); border-radius: 14px; }
  .col-body ol.col-steps li { margin-bottom: 0.55em; padding-right: 0.2em; line-height: 1.85; color: var(--col-ink); }
  .col-body ol.col-steps li:last-child { margin-bottom: 0; }
  .col-body ol.col-steps li::marker { color: var(--gf-brand-dark); font-weight: 700; font-family: 'Sora', sans-serif; }

  /* Small label above a list ("向いているチーム" / "注意点") */
  .col-body p.col-subhead {
    display: inline-block; margin: 8px 0 12px; padding: 3px 14px; border-radius: 999px;
    background: var(--col-tint); border: 1px solid var(--col-tint-strong);
    color: var(--gf-brand-dark); font-size: 0.88rem; font-weight: 700; line-height: 1.7;
  }
  .col-body p.col-subhead.is-caution { background: var(--col-warn-bg); border-color: #FBD9C2; color: var(--col-warn); }
  .col-body p.col-subhead + ul { margin-bottom: 1.6em; }

  /* FAQ (question = h3 with a "Q" mark) */
  .col-body .col-faq h3 { padding-right: 2.1em; border-bottom: none; margin: 34px 0 8px; }
  .col-body .col-faq h3::before {
    content: "Q"; top: -0.1em; width: 1.6em; height: 1.6em; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--gf-brand); color: #fff; font-family: 'Sora', sans-serif; font-size: 0.9em;
  }
  .col-body .col-faq p { padding-right: 2.45em; }

  /* ---------- Key points ---------- */
  .col-points { border: 2px solid var(--gf-brand); border-radius: 16px; padding: 26px 24px 20px; margin: 34px 0 26px; position: relative; }
  .col-points-title {
    position: absolute; top: -0.95em; right: 18px; margin: 0 !important; padding: 2px 14px; border-radius: 999px;
    background: var(--gf-brand); color: #fff !important; font-size: 0.88rem !important; font-weight: 700; line-height: 1.7 !important;
  }
  .col-body .col-points ul { margin: 0; }
  .col-body .col-points li { font-weight: 600; }
  .col-body .col-points li::before {
    content: "✓"; background: none; color: var(--gf-brand); font-weight: 700; width: auto; height: auto; top: 0; right: 0;
  }

  /* ---------- Table of contents ---------- */
  .col-toc { background: var(--gf-bg); border: 1px solid var(--gf-border); border-radius: 16px; padding: 20px 24px; margin: 30px 0 0; }
  .col-toc-title { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1rem !important; color: var(--gf-text) !important; margin: 0 0 10px !important; line-height: 1.6 !important; }
  .col-toc ol { margin: 0; padding-right: 1.5em; }
  .col-toc li { margin-bottom: 7px; font-size: 0.93rem; line-height: 1.7; color: var(--gf-text-muted); }
  .col-toc li:last-child { margin-bottom: 0; }
  .col-toc a { color: var(--gf-brand-dark); font-weight: 600; }
  .col-toc a:hover { text-decoration: underline; text-underline-offset: 3px; }

  /* ---------- Boxes ---------- */
  .col-box { background: var(--gf-bg); border: 1px solid var(--gf-border); border-radius: 16px; padding: 22px 24px; margin: 30px 0; }
  .col-body .col-box h3 { margin: 0 0 14px; font-size: 1.08rem; }
  .col-box > :last-child { margin-bottom: 0 !important; }

  /* ---------- Tables ---------- */
  .col-table-wrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 24px 0 10px;
    border: 1px solid var(--gf-border); border-radius: 14px; background: var(--gf-surface);
  }
  .col-table { width: 100%; min-width: 540px; border-collapse: collapse; font-size: 0.94rem; line-height: 1.65; }
  .col-table.is-wide { min-width: 720px; }
  .col-table th, .col-table td { padding: 13px 14px; text-align: right; vertical-align: middle; border-top: 1px solid var(--gf-border); border-right: 1px solid var(--gf-border); }
  .col-table th:first-child, .col-table td:first-child { border-right: none; }
  .col-table thead th { background: var(--gf-brand-dark); color: #fff; font-weight: 700; border-top: none; border-right-color: rgba(255,255,255,.18); white-space: nowrap; }
  .col-table tbody th { background: var(--col-tint); color: var(--gf-text); font-weight: 700; width: 26%; min-width: 130px; }
  .col-table td { color: var(--col-ink); }
  .col-table tbody tr:nth-child(even) td { background: #FAFBFC; }
  .col-table td.is-num { white-space: nowrap; font-variant-numeric: tabular-nums; }
  .col-table td strong { color: var(--gf-text); font-size: 1.04em; }
  .col-table tbody tr.is-self th, .col-table tbody tr.is-self td { background: #FFF8DC; }
  /* Tables with many columns: let the header wrap, keep the first column narrow, and give each cell room */
  .col-table.is-compact thead th { white-space: normal; }
  .col-table.is-compact tbody th { width: 20%; min-width: 120px; }
  .col-table.is-compact td { min-width: 112px; }
  .col-badge {
    display: inline-block; padding: 2px 10px; border-radius: 999px; font-weight: 700; font-size: 0.86rem;
    background: var(--gf-panel); color: var(--gf-text);
  }
  .col-badge.is-high { background: var(--col-warn-bg); color: var(--col-warn); }
  /* At-a-glance marks inside comparison tables (○ / △ / 手動) and a small second line */
  .col-mark {
    display: inline-flex; align-items: center; justify-content: center; min-width: 1.75em; height: 1.75em;
    padding: 0 0.45em; margin-left: 0.45em; border-radius: 999px; font-size: 0.86em; font-weight: 700; line-height: 1; vertical-align: 0.05em;
  }
  .col-mark.is-ok { background: var(--col-tint-strong); color: var(--gf-brand-dark); }
  .col-mark.is-mid { background: var(--col-warn-bg); color: var(--col-warn); }
  .col-cell-sub { display: block; margin-top: 5px; font-size: 0.86em; line-height: 1.6; color: var(--gf-text-muted); }
  .col-body p.col-table-note { font-size: 0.82rem; line-height: 1.7; color: var(--gf-text-muted); margin: 0 0 1.6em; }
  .col-scroll-hint { display: none; }

  /* ---------- Notes / sources ---------- */
  .col-body p.col-note { font-size: 0.86rem; line-height: 1.8; color: var(--gf-text-muted); }
  .col-body p.col-note.is-follow { margin-top: -0.9em; }  /* 直前の段落に添える注釈 */
  .col-body ul.col-sources li { font-size: 0.88rem; }

  /* ---------- Article footer ---------- */
  .col-footer { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--gf-border); display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
  .col-back { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--gf-brand-dark); }
  .col-back svg { width: 16px; height: 16px; }

  /* ---------- Back-to-top button (article pages only) ---------- */
  .col-totop {
    position: fixed; left: 24px; bottom: 24px; z-index: 15; width: 48px; height: 48px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; padding: 0;
    background: var(--gf-brand); color: #fff; box-shadow: var(--shadow-raised);
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s, background 0.15s ease;
  }
  .col-totop.is-visible { opacity: 1; visibility: visible; transform: none; }
  .col-totop:hover { background: var(--gf-brand-dark); }
  .col-totop:focus-visible { outline: 3px solid var(--col-tint-strong); outline-offset: 2px; }
  .col-totop svg { width: 22px; height: 22px; }
  @media (max-width: 640px) { .col-totop { left: 16px; bottom: 16px; width: 44px; height: 44px; } }
  @media (prefers-reduced-motion: reduce) { .col-totop { transition: none; } }

  /* ---------- List pages (index / tag / archive) ---------- */
  .col-list-head { margin: 0 0 24px; }
  .col-list-head h1 { font-size: 1.6rem; line-height: 1.5; margin: 0 0 6px; }
  .col-list-head p { margin: 0; font-size: 0.92rem; }
  .col-cards { display: flex; flex-direction: column; gap: 20px; }
  .col-card {
    display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 22px; align-items: center;
    background: var(--gf-surface); border-radius: 18px; box-shadow: var(--shadow-card); padding: 18px;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
  }
  .col-card:hover { box-shadow: var(--shadow-raised); transform: translateY(-2px); }
  .col-card-thumb img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--gf-border); }
  .col-card time { font-size: 0.8rem; font-weight: 600; color: var(--gf-text-muted); }
  .col-card h2 { font-size: 1.12rem; line-height: 1.55; margin: 4px 0 8px; }
  .col-card h2 a:hover { color: var(--gf-brand-dark); }
  .col-card p { font-size: 0.88rem; line-height: 1.75; margin: 0 0 12px; color: var(--col-ink); }

  /* ---------- Series (連載) ---------- */
  /* Label above the h1: 連載「…」 + 第◯回 (build_column.py writes it when an article has 'series') */
  .col-series-label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 10px; font-size: 0.88rem; font-weight: 700; line-height: 1.6; }
  .col-series-label a { color: var(--gf-brand-dark); }
  .col-series-label a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .col-series-no { display: inline-block; padding: 1px 11px; border-radius: 999px; background: var(--gf-brand); color: #fff; font-size: 0.8rem; }
  /* Opening scene (a short story before the lead) */
  .col-scene { background: var(--col-tint); border-radius: 16px; padding: 22px 24px; margin: 0 0 28px; }
  .col-body .col-scene-quote { font-size: 1.22rem; font-weight: 700; line-height: 1.6; color: var(--gf-text); margin: 0 0 0.55em; }
  .col-scene > :last-child { margin-bottom: 0 !important; }
  /* "This is covered in part N" note inside the text */
  .col-body p.col-series-ref {
    display: flex; align-items: flex-start; gap: 10px; margin: -0.3em 0 1.6em; padding: 11px 16px;
    background: var(--gf-bg); border-right: 3px solid var(--gf-brand); border-radius: 10px 0 0 10px;
    font-size: 0.88rem; line-height: 1.75; color: var(--gf-text-muted);
  }
  .col-series-ref-label { flex: none; margin-top: 0.15em; padding: 0 10px; border-radius: 999px; background: var(--col-tint-strong); color: var(--gf-brand-dark); font-size: 0.76rem; font-weight: 700; line-height: 1.85; }
  /* "Sign" line under each limit (連載 第2回：「サイン」＝こうなったら要注意) */
  .col-body p.col-sign {
    display: flex; align-items: flex-start; gap: 10px; margin: 0 0 1.6em; padding: 11px 16px;
    background: var(--col-warn-bg); border-radius: 10px;
    font-size: 0.9rem; line-height: 1.75; color: var(--col-ink);
  }
  .col-sign-label { flex: none; margin-top: 0.15em; padding: 0 10px; border-radius: 999px; background: var(--col-warn); color: #fff; font-size: 0.76rem; font-weight: 700; line-height: 1.85; }
  /* Series box right under the eyecatch (この連載について。h2 にしないので目次には出ない) */
  .col-series-box { margin: 0 0 32px; }
  .col-body .col-series-box-title { margin: 0 0 4px; font-size: 1rem; font-weight: 700; line-height: 1.6; color: var(--gf-text); }
  .col-body .col-series-box > p:not(.col-series-box-title) { margin: 0 0 12px; font-size: 0.88rem; line-height: 1.75; color: var(--gf-text-muted); }
  .col-body .col-series-box ol.col-series-list { margin-bottom: 0; }
  /* List of all parts (inside .col-series-box) */
  .col-body ol.col-series-list { list-style: none; counter-reset: series; margin: 0 0 1.5em; padding: 0; border: 1px solid var(--gf-border); border-radius: 16px; overflow: hidden; }
  .col-body ol.col-series-list li { counter-increment: series; display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-top: 1px solid var(--gf-border); line-height: 1.6; }
  .col-body ol.col-series-list li:first-child { border-top: none; }
  .col-body ol.col-series-list li::before {
    content: "第" counter(series) "回"; flex: none; padding: 2px 10px; border-radius: 999px;
    background: var(--col-tint); color: var(--gf-brand-dark); font-size: 0.78rem; font-weight: 700;
  }
  /* 「第◯回」の表記は言語ごと（html の lang で切り替え） */
  .col-body ol.col-series-list li:lang(en)::before { content: "Part " counter(series); }
  .col-body ol.col-series-list li:lang(de)::before { content: "Teil " counter(series); }
  .col-body ol.col-series-list li:lang(es)::before,
  .col-body ol.col-series-list li:lang(pt)::before,
  .col-body ol.col-series-list li:lang(it)::before { content: "Parte " counter(series); }
  .col-body ol.col-series-list li:lang(fr)::before { content: "Partie " counter(series); }
  .col-body ol.col-series-list li:lang(id)::before { content: "Bagian " counter(series); }
  .col-body ol.col-series-list li:lang(vi)::before { content: "Phần " counter(series); }
  .col-body ol.col-series-list li:lang(tr)::before { content: "Bölüm " counter(series); }
  .col-body ol.col-series-list li:lang(ko)::before { content: "제" counter(series) "회"; }
  .col-body ol.col-series-list li:lang(th)::before { content: "ตอนที่ " counter(series); }
  .col-body ol.col-series-list li:lang(zh)::before { content: "第" counter(series) "篇"; }
  .col-series-title { flex: 1; min-width: 0; color: var(--col-ink); font-weight: 600; }
  .col-series-title a { color: var(--gf-brand); text-decoration: underline; text-underline-offset: 3px; }
  .col-series-title a:hover { color: var(--gf-brand-dark); }
  .col-series-state { flex: none; font-size: 0.76rem; font-weight: 700; color: var(--gf-text-muted); }
  .col-body ol.col-series-list li.is-current { background: var(--col-tint); }
  .col-body ol.col-series-list li.is-current::before { background: var(--gf-brand); color: #fff; }
  .col-body ol.col-series-list li.is-current .col-series-state { color: var(--gf-brand-dark); }

  /* ---------- Figures (screenshots inside the text) ---------- */
  .col-figure { margin: 30px 0 34px; }
  .col-figure img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--gf-border); }
  .col-figure figcaption { margin-top: 10px; font-size: 0.84rem; line-height: 1.7; color: var(--gf-text-muted); }
  .col-figure-note { display: block; margin-top: 2px; font-size: 0.78rem; }  /* 注釈（キャプションの下の小さい1行） */

  /* ---------- Responsive ---------- */
  @media (max-width: 780px) {
    .col-banner-title { font-size: 1.9rem; }
  }
  @media (max-width: 980px) {
    .col-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "side"; gap: 32px; padding: 24px 16px 64px; }
    .col-side-follow { position: static; display: flex; }
    .col-side .col-promo { position: static; }
    .col-article { padding: 30px 32px 34px; }
  }
  @media (max-width: 640px) {
    .col-article { padding: 22px 18px 26px; border-radius: 16px; }
    .col-header h1 { font-size: 1.36rem; }
    .col-body h2 { font-size: 1.18rem; margin: 48px -6px 20px; padding: 12px 14px 12px 14px; }
    .col-body h3 { font-size: 1.05rem; margin-top: 34px; }
    .col-body h2, .col-body h3 { scroll-margin-top: 104px; }
    .col-points { padding: 24px 16px 16px; }
    .col-toc, .col-box { padding: 18px 16px; }
    .col-scene { padding: 18px 16px; }
    .col-body .col-scene-quote { font-size: 1.1rem; }
    .col-body ol.col-series-list li { padding: 12px 14px; gap: 10px; }
    /* スマホでは「近日公開」などを題名の下に回し、題名の幅を広く取る */
    .col-body .col-series-box ol.col-series-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 2px; align-items: start; padding: 10px 14px; font-size: 0.92rem; line-height: 1.55; }
    .col-body .col-series-box ol.col-series-list li::before { grid-row: 1 / span 2; margin-top: 1px; }
    .col-body .col-series-box .col-series-state { grid-column: 2; }
    .col-table { font-size: 0.88rem; }
    .col-table th, .col-table td { padding: 11px 11px; }
    .col-scroll-hint { display: block; font-size: 0.76rem; font-weight: 600; color: var(--gf-text-muted); text-align: left; margin: 20px 0 -18px; }
    .col-card { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  }