@charset "UTF-8";
/* =============================================================
   COLUMN ARTICLE（/column/ 配下の記事ページ専用）
   - すべて .column-article 配下にスコープする
   - main.css のグローバル指定（img / a）を本文内で打ち消す
   - ライト固定（サイト本体にダークモードが無いため）
   ============================================================= */

.column-article,
.column-list{
  /* ---- 配色：サイトの --blue を基準に、記事用の派生色を定義 ---- */
  --ca-blue:      #4169B5;   /* サイト共通のブランド青 */
  --ca-blue-dk:   #33549A;   /* 本文中リンク・ボタンhover用の濃い青 */
  --ca-blue-wash: #EEF2FF;   /* 強調マーカー・タグの下地 */
  --ca-red:       #C04E36;   /* 朱：番号・注意・アクセント（彩度を落として青と調和） */
  --ca-red-wash:  #FBEFEC;

  --ca-text:   #16202F;
  --ca-text-2: #4A5A6E;
  --ca-text-3: #7A8899;
  --ca-panel:  #F5F7FA;
  --ca-panel-2:#E7EDF4;
  --ca-rule:   #D6DEE9;
  --ca-rule-2: #E9EEF4;
  --ca-ink:    #1B2432;

  /* ---- 寸法 ---- */
  --ca-measure: 43rem;   /* 本文幅 */
  --ca-rail:    14rem;   /* 目次カラム幅 */
  --ca-hd:      80px;    /* 固定ヘッダーの高さ（見出しジャンプの逃げに使う） */

  background:#fff;
  color:var(--ca-text);
  font-size:16px;
  line-height:1.95;
  font-feature-settings:"palt" 1;
  overflow-wrap:break-word;
  word-break:normal;
  line-break:strict;
  padding-top:var(--ca-hd);
}
@media (max-width:1024px){ .column-article, .column-list{ --ca-hd:64px } }
@media (max-width:480px){  .column-article, .column-list{ --ca-hd:52px } }

/* main.css の img{width:100%} / a{color:inherit} を本文内だけ元に戻す */
.column-article .ca-body img{ display:block; width:auto; max-width:100%; height:auto; margin:1.6rem 0 }
.column-article .ca-body a{
  color:var(--ca-blue-dk);
  text-decoration:underline;
  text-underline-offset:.22em;
  text-decoration-thickness:1px;
}
.column-article .ca-body a:hover{ color:var(--ca-red) }

/* ボタンは本文リンクの配色を継がない（青地に青文字になるのを防ぐ） */
.column-article .ca-body a.ca-btn,
.column-article .ca-body a.ca-btn:hover,
.column-article .ca-body a.ca-btn:visited{
  color:#fff;
  text-decoration:none;
}
.column-article :focus-visible{ outline:2px solid var(--ca-blue); outline-offset:3px; border-radius:2px }

/* -------------------------------------------------------------
   読了プログレスバー
   ------------------------------------------------------------- */
.ca-progress{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:120;
  background:linear-gradient(90deg,var(--ca-red),var(--ca-blue));
  transform:scaleX(0); transform-origin:0 50%;
}

/* -------------------------------------------------------------
   レイアウト
   ------------------------------------------------------------- */
.ca-shell{
  max-width:64.5rem; margin:0 auto; padding:0 1.1rem;
  display:grid; grid-template-columns:minmax(0,1fr) var(--ca-rail);
  gap:0 3rem; align-items:start;
}
@media (max-width:1040px){ .ca-shell{ grid-template-columns:1fr; gap:0 } }

.ca-main{ max-width:var(--ca-measure); padding:1.6rem 0 3rem; min-width:0 }
@media (max-width:1040px){ .ca-main{ max-width:none } }

/* -------------------------------------------------------------
   記事ヘッダー
   ------------------------------------------------------------- */
.ca-crumbs{
  display:flex; flex-wrap:wrap; gap:.4rem;
  font-size:.75rem; color:var(--ca-text-3); margin:0 0 1.4rem;
}
.ca-crumbs a{ color:var(--ca-text-3); text-decoration:none }
.ca-crumbs a:hover{ color:var(--ca-blue-dk); text-decoration:underline }

.ca-kicker{
  display:inline-block; margin-bottom:1rem; padding:.2rem .55rem;
  font-size:.72rem; font-weight:700; letter-spacing:.1em;
  color:var(--ca-red); border:1px solid currentColor; border-radius:2px;
  text-decoration:none;
}
.ca-kicker:hover{ background:var(--ca-red-wash) }

.column-article h1.ca-title{
  font-weight:700; font-size:clamp(1.55rem,5vw,2.3rem); line-height:1.55;
  letter-spacing:.01em; margin:0 0 1.1rem; color:var(--ca-text);
  /* 日本語を文節単位で折り返し、「方法」が「方／法」と割れるのを防ぐ。
     text-wrap:balance を併用すると balance が優先され効かないので使わない */
  word-break:auto-phrase;
  overflow-wrap:normal;
}
.ca-byline{
  display:flex; flex-wrap:wrap; gap:.3rem 1.2rem; align-items:center;
  font-size:.76rem; color:var(--ca-text-3);
  padding-bottom:1.6rem; margin-bottom:1.8rem;
  border-bottom:1px solid var(--ca-rule);
}
.ca-byline b{ color:var(--ca-text-2); font-weight:700 }
.ca-lede{ font-size:1rem; line-height:2.05; color:var(--ca-text-2); margin:0 0 2rem }

/* -------------------------------------------------------------
   本文タイポグラフィ
   ------------------------------------------------------------- */
.ca-body h2{
  font-weight:700; font-size:clamp(1.2rem,4vw,1.5rem); line-height:1.6;
  margin:3.4rem 0 1.2rem; padding-top:1.3rem;
  border-top:2px solid var(--ca-ink);
  scroll-margin-top:calc(var(--ca-hd) + 12px);
  color:var(--ca-text);
  word-break:auto-phrase;
  overflow-wrap:normal;
}
.ca-body h3{
  font-weight:700; font-size:1.02rem; line-height:1.7;
  margin:2.4rem 0 .8rem; padding-left:.7rem;
  border-left:3px solid var(--ca-blue);
  scroll-margin-top:calc(var(--ca-hd) + 12px);
}
.ca-body p{ margin:0 0 1.4rem }
.ca-body strong{
  font-weight:700;
  background:linear-gradient(transparent 62%,var(--ca-blue-wash) 62%);
  padding:0 .08em;
}
.ca-body > ul:not([class]),
.ca-body > ol:not([class]){ margin:0 0 1.4rem; padding-left:1.4rem }
.ca-body > ul:not([class]) li,
.ca-body > ol:not([class]) li{ margin-bottom:.4rem }
.ca-mark{ color:var(--ca-red); font-weight:700 }

/* -------------------------------------------------------------
   この記事の結論
   ------------------------------------------------------------- */
.ca-summary{
  background:var(--ca-panel); border:1px solid var(--ca-rule); border-radius:4px;
  padding:1.4rem 1.5rem; margin:0 0 2.4rem;
}
.ca-summary-hd{
  display:flex; align-items:center; gap:.6rem;
  margin:0 0 1rem; padding-bottom:.8rem; border-bottom:1px solid var(--ca-rule);
}
.ca-summary-hd .ca-t{ font-size:.95rem; font-weight:700; letter-spacing:.04em }
.ca-summary-hd .ca-n{ margin-left:auto; font-size:.72rem; color:var(--ca-text-3) }
.ca-summary ul{ margin:0; padding:0; list-style:none; display:grid; gap:.85rem }
.ca-summary li{
  display:grid; grid-template-columns:1.35rem minmax(0,1fr); gap:.55rem;
  align-items:start; font-size:.93rem; line-height:1.85;
}
.ca-summary li .ca-i{
  font-size:.72rem; font-weight:700; color:var(--ca-red); line-height:1.95;
}
@media (max-width:520px){
  .ca-summary{ padding:1.2rem 1.1rem }
  .ca-summary li{ font-size:.9rem; line-height:1.8 }
}

/* -------------------------------------------------------------
   目次（PC＝右カラム固定／スマホ＝結論直下のアコーディオン）
   ------------------------------------------------------------- */
.ca-rail{ position:sticky; top:calc(var(--ca-hd) + 16px); padding:2.4rem 0 }
.ca-rail-box{ border:0 }
.ca-toc-sum{ display:none }
.ca-rail-t{
  display:block; margin:0 0 .9rem;
  font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ca-text-3);
}
.ca-toc{ list-style:none; margin:0; padding:0; border-left:1px solid var(--ca-rule) }
.ca-toc li{ position:relative }
.ca-toc a{
  display:block; margin-left:-1px; padding:.4rem 0 .4rem 1rem;
  font-size:.82rem; line-height:1.65; color:var(--ca-text-2);
  text-decoration:none; border-left:2px solid transparent;
}
.ca-toc a::before{
  content:""; position:absolute; left:0; top:1.1em; width:7px; height:1px;
  background:var(--ca-rule);
}
.ca-toc a:hover{ color:var(--ca-text) }
.ca-toc a.is-active{ color:var(--ca-text); font-weight:700; border-left-color:var(--ca-red) }
.ca-toc a.is-active::before{ background:var(--ca-red); width:11px }

@media (max-width:1040px){
  /* JS が .ca-summary の直後へ移動する */
  .ca-rail{ position:static; padding:0; margin:0 0 2rem }
  .ca-rail-box{ border:1px solid var(--ca-rule); border-radius:4px; padding:.2rem 1rem }
  .ca-toc-sum{
    display:flex; align-items:center; gap:.5rem; list-style:none; cursor:pointer;
    padding:.85rem 0; font-size:.9rem; font-weight:700;
  }
  .ca-toc-sum::-webkit-details-marker{ display:none }
  .ca-toc-sum::after{
    content:""; margin-left:auto; width:8px; height:8px;
    border-right:1.5px solid var(--ca-text-3); border-bottom:1.5px solid var(--ca-text-3);
    transform:rotate(45deg); transition:transform .2s ease;
  }
  .ca-rail details[open] .ca-toc-sum::after{ transform:rotate(-135deg) }
  .ca-rail-t{ display:none }
  .ca-toc{ border-left:0; padding:0 0 .9rem; border-top:1px solid var(--ca-rule-2) }
  .ca-toc a{ padding:.6rem 0 .6rem .9rem; font-size:.87rem }
  .ca-toc a::before{ top:1.35em }
}

/* -------------------------------------------------------------
   数値ブロック
   ------------------------------------------------------------- */
.ca-stats{
  display:grid; grid-template-columns:repeat(3,1fr); margin:2.2rem 0;
  border:1px solid var(--ca-rule); border-radius:4px; overflow:hidden; background:#fff;
}
.ca-stat{ padding:1.2rem 1.1rem; border-right:1px solid var(--ca-rule); min-width:0 }
.ca-stat:last-child{ border-right:0 }
.ca-stat .ca-v{
  display:flex; align-items:baseline; gap:.12rem;
  font-size:1.9rem; font-weight:700; line-height:1.2; letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}
.ca-stat .ca-v u{ font-size:.85rem; font-weight:700; text-decoration:none; color:var(--ca-text-2) }
.ca-stat .ca-k{ font-size:.78rem; line-height:1.65; color:var(--ca-text-2); margin-top:.4rem }
.ca-stat .ca-src{ font-size:.66rem; line-height:1.6; color:var(--ca-text-3); margin-top:.4rem }
@media (max-width:640px){
  .ca-stats{ grid-template-columns:1fr }
  .ca-stat{
    display:grid; grid-template-columns:5.5rem minmax(0,1fr); gap:.9rem; align-items:center;
    padding:1rem; border-right:0; border-bottom:1px solid var(--ca-rule);
  }
  .ca-stat:last-child{ border-bottom:0 }
  .ca-stat .ca-v{ font-size:1.65rem }
  .ca-stat .ca-k{ margin-top:0 }
  .ca-stat .ca-src{ grid-column:2 }
}

/* -------------------------------------------------------------
   表
   ------------------------------------------------------------- */
.ca-tw{
  overflow-x:auto; margin:1.8rem 0; -webkit-overflow-scrolling:touch;
  border:1px solid var(--ca-rule); border-radius:4px;
}
.ca-tw table{ border-collapse:collapse; width:100%; min-width:32rem; font-size:.86rem }
.ca-tw th,
.ca-tw td{
  padding:.75rem .9rem; text-align:left; vertical-align:top; line-height:1.7;
  border-bottom:1px solid var(--ca-rule-2);
}
.ca-tw thead th{
  background:var(--ca-panel); font-size:.72rem; font-weight:700; letter-spacing:.08em;
  color:var(--ca-text-2); white-space:nowrap;
}
.ca-tw tbody tr:last-child td{ border-bottom:0 }
.ca-tw td.ca-c{ white-space:nowrap; font-variant-numeric:tabular-nums }
.ca-tag{
  display:inline-block; padding:.12rem .45rem; border-radius:2px;
  font-size:.7rem; font-weight:700;
  background:var(--ca-blue-wash); color:var(--ca-blue-dk);
}
.ca-tag.ca-hi{ background:var(--ca-red-wash); color:var(--ca-red) }
.ca-cap{ font-size:.72rem; line-height:1.7; color:var(--ca-text-3); margin:-1.2rem 0 1.8rem }
.ca-scroll-hint{ display:none }
@media (max-width:640px){
  .ca-scroll-hint{ display:block; font-size:.72rem; color:var(--ca-text-3); margin:1.6rem 0 -1.2rem }
}

/* -------------------------------------------------------------
   STEP（順序があるものだけに使う）
   ------------------------------------------------------------- */
.ca-steps{ list-style:none; margin:1.8rem 0; padding:0 }
.ca-steps li{
  display:grid; grid-template-columns:2.6rem minmax(0,1fr); gap:1rem;
  padding:1.2rem 0; border-bottom:1px solid var(--ca-rule-2);
}
.ca-steps li:first-child{ border-top:1px solid var(--ca-rule-2) }
.ca-steps .ca-st{
  padding-top:.5rem; font-size:.64rem; font-weight:700; letter-spacing:.1em;
  color:var(--ca-text-3);
}
.ca-steps .ca-st b{
  display:block; font-size:1.2rem; color:var(--ca-red); letter-spacing:0;
  font-variant-numeric:tabular-nums;
}
.ca-body .ca-steps h3{ margin:0 0 .35rem; padding:0; border:0; font-size:1rem }
.ca-body .ca-steps p{ margin:0; font-size:.9rem; line-height:1.85; color:var(--ca-text-2) }
@media (max-width:520px){
  .ca-steps li{ grid-template-columns:1fr; gap:.5rem }
  .ca-steps .ca-st{ display:flex; align-items:baseline; gap:.4rem; padding:0 }
  .ca-steps .ca-st b{ display:inline }
}

/* -------------------------------------------------------------
   注意ボックス／チェックリスト
   ------------------------------------------------------------- */
.ca-note{
  margin:1.4rem 0; padding:1.05rem 1.2rem; background:var(--ca-panel);
  border-left:3px solid var(--ca-red); border-radius:0 3px 3px 0;
}
.ca-note .ca-lb{
  display:block; margin-bottom:.4rem;
  font-size:.72rem; font-weight:700; letter-spacing:.06em; color:var(--ca-red);
}
.ca-body .ca-note p{ margin:0; font-size:.91rem; line-height:1.9 }

.ca-check{ list-style:none; margin:1.6rem 0; padding:0 }
.ca-check li{
  display:grid; grid-template-columns:1.35rem minmax(0,1fr); gap:.7rem; align-items:start;
  padding:.65rem .1rem; border-bottom:1px dashed var(--ca-rule);
  font-size:.92rem; line-height:1.85;
}
/* 印はレ点。SVGはCSS内にデータURIで持つ（画像ファイルを増やさないため）。
   線の色 %234169B5 は --ca-blue と同じ値。変数はデータURI内では使えないので直接書く */
.ca-check li::before{
  content:""; width:15px; height:15px; margin-top:.4em; border-radius:2px;
  border:1.5px solid var(--ca-blue);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cpath d='M2.9 7.9 L6.1 11.1 L12.1 4.4' fill='none' stroke='%234169B5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 13px 13px no-repeat;
}

/* -------------------------------------------------------------
   項目＋説明のリスト（用語解説・入力シート・評価項目など）
   チェックリストと違い、項目名と説明が別の列に分かれる
   ------------------------------------------------------------- */
.ca-deflist{ margin:1.6rem 0; padding:0; border-top:1px solid var(--ca-rule) }
.ca-deflist > div{
  display:grid; grid-template-columns:9.5rem minmax(0,1fr); gap:0 1.2rem;
  padding:.85rem .2rem; border-bottom:1px solid var(--ca-rule-2);
}
.ca-deflist dt{
  font-size:.9rem; font-weight:700; line-height:1.7; color:var(--ca-text);
}
.ca-deflist dd{
  margin:0; font-size:.9rem; line-height:1.85; color:var(--ca-text-2);
}
.ca-deflist dt .ca-i{
  display:inline-block; min-width:1.4rem;
  font-size:.72rem; font-weight:700; color:var(--ca-red);
}
@media (max-width:600px){
  .ca-deflist > div{ grid-template-columns:1fr; gap:.2rem; padding:.8rem .2rem }
  .ca-deflist dt{ font-size:.88rem }
  .ca-deflist dd{ font-size:.86rem }
}

/* -------------------------------------------------------------
   動画の埋め込み（YouTube）
   ------------------------------------------------------------- */
.ca-embed{ margin:2rem 0 }
/* aspect-ratio で16:9を作る。padding-bottom を使う書き方は、
   ボタン要素の既定スタイルと噛み合って余白が出ることがある */
.ca-embed-frame{
  position:relative; display:block; width:100%; aspect-ratio:16/9;
  border-radius:4px; overflow:hidden; background:var(--ca-ink); line-height:0;
}
.ca-embed-frame iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}
/* 再生前は高解像度のサムネイルを出す。
   YouTubeの既定サムネイルは480×360で、拡大するとぼやけるため。
   セレクタを .ca-body から書き起こしているのは、本文中の画像に付けている
   余白（margin:1.6rem 0）を打ち消すため。効いたままだと上下に黒帯が出る */
.column-article .ca-body .ca-embed-frame img,
.ca-embed-frame img{
  display:block; width:100%; height:100%; max-width:none; margin:0;
  object-fit:cover; object-position:center;
  transition:transform .3s ease, filter .3s ease;
}
.ca-embed-play{
  position:absolute; inset:0; width:100%; height:100%;
  padding:0; border:0; background:none; cursor:pointer; display:block;
}
.ca-embed-play:hover img{ transform:scale(1.02); filter:brightness(1.05) }

.ca-embed-btn{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:72px; height:50px; border-radius:10px;
  background:rgba(20,26,36,.78); display:grid; place-items:center;
  transition:background .2s ease, transform .2s ease;
}
.ca-embed-play:hover .ca-embed-btn{
  background:var(--ca-red); transform:translate(-50%,-50%) scale(1.06);
}
.ca-embed-btn::before{
  content:""; width:0; height:0; margin-left:3px;
  border-style:solid; border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent #fff;
}
.ca-embed-cap{
  margin:.6rem 0 0; font-size:.78rem; line-height:1.7; color:var(--ca-text-3);
}
@media (max-width:520px){
  .ca-embed-btn{ width:58px; height:40px }
}

/* -------------------------------------------------------------
   ボタン
   ------------------------------------------------------------- */
.ca-btn{
  display:inline-flex; align-items:center; gap:.5rem; white-space:nowrap;
  padding:.9rem 1.5rem; border-radius:3px;
  background:var(--ca-blue); color:#fff; text-decoration:none;
  font-weight:700; font-size:.94rem;
  transition:background .18s ease, transform .18s ease;
}
.ca-btn:hover{ background:var(--ca-blue-dk); transform:translateY(-1px); color:#fff }
.ca-btn .ca-ar{ transition:transform .18s ease }
.ca-btn:hover .ca-ar{ transform:translateX(3px) }

/* -------------------------------------------------------------
   記事中CTA
   ------------------------------------------------------------- */
.ca-cta-inline{
  position:relative; overflow:hidden; margin:2.6rem 0;
  padding:1.6rem 1.7rem; border-radius:4px;
  background:var(--ca-ink); color:#E6EDF6;
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1.4rem; align-items:center;
}
.ca-cta-inline::before{
  content:""; position:absolute; top:0; left:0; right:0; height:9px; opacity:.5;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.3) 0 1px,transparent 1px 16px);
}
.ca-cta-inline .ca-lb{
  display:block; margin-bottom:.5rem;
  font-size:.7rem; font-weight:700; letter-spacing:.12em; color:#9DB0C8;
}
.ca-cta-inline .ca-h{
  display:block; margin-bottom:.45rem;
  font-size:1.1rem; font-weight:700; line-height:1.65; color:#fff;
}
.ca-body .ca-cta-inline p{ margin:0; font-size:.84rem; line-height:1.8; color:#B3C2D4 }
@media (max-width:680px){
  .ca-cta-inline{ grid-template-columns:1fr; padding:1.4rem 1.2rem; gap:1.1rem }
  .ca-cta-inline .ca-btn{ width:100%; justify-content:center }
}

/* -------------------------------------------------------------
   FAQ
   ------------------------------------------------------------- */
.ca-faq{ margin:1.4rem 0 0; border-top:1px solid var(--ca-rule) }
.ca-faq details{ border-bottom:1px solid var(--ca-rule-2) }
.ca-faq summary{
  position:relative; cursor:pointer; list-style:none;
  padding:1.05rem 2.2rem 1.05rem 1.8rem;
  font-size:.95rem; font-weight:700; line-height:1.75;
}
.ca-faq summary::-webkit-details-marker{ display:none }
.ca-faq summary::before{
  content:"Q"; position:absolute; left:0; top:1.05rem;
  font-size:.9rem; font-weight:700; color:var(--ca-red);
}
.ca-faq summary::after{
  content:""; position:absolute; right:.5rem; top:1.6rem; width:8px; height:8px;
  border-right:1.5px solid var(--ca-text-3); border-bottom:1.5px solid var(--ca-text-3);
  transform:rotate(45deg); transition:transform .2s ease;
}
.ca-faq details[open] summary::after{ transform:rotate(-135deg) }
.ca-faq .ca-a{
  padding:0 .5rem 1.3rem 1.8rem;
  font-size:.9rem; line-height:1.95; color:var(--ca-text-2);
}
.ca-body .ca-faq .ca-a p{ margin:0 0 .8rem }
.ca-body .ca-faq .ca-a p:last-child{ margin:0 }

/* -------------------------------------------------------------
   著者情報（記事末）
   ------------------------------------------------------------- */
.ca-author{
  display:grid; grid-template-columns:80px minmax(0,1fr); gap:1.2rem;
  margin:3rem 0 0; padding:1.5rem;
  background:var(--ca-panel); border:1px solid var(--ca-rule); border-radius:4px;
}
.ca-author-img{
  width:80px; height:80px; border-radius:50%; object-fit:cover;
  border:2px solid #fff; box-shadow:0 1px 4px rgba(22,32,47,.14);
}
.ca-author-label{
  display:block; margin-bottom:.5rem;
  font-size:.7rem; font-weight:700; letter-spacing:.14em; color:var(--ca-text-3);
}
.ca-author-name{
  margin:0 0 .6rem; font-size:1.02rem; font-weight:700; line-height:1.5;
}
.ca-author-name span{
  display:block; margin-top:.2rem;
  font-size:.78rem; font-weight:500; color:var(--ca-text-2);
}
.ca-author-desc{
  margin:0 0 .8rem; font-size:.86rem; line-height:1.9; color:var(--ca-text-2);
}
.ca-author-link{
  font-size:.84rem; font-weight:700; color:var(--ca-blue-dk);
  text-decoration:underline; text-underline-offset:.2em;
}
@media (max-width:560px){
  .ca-author{ grid-template-columns:64px minmax(0,1fr); gap:1rem; padding:1.2rem }
  .ca-author-img{ width:64px; height:64px }
  .ca-author-desc{ font-size:.84rem }
}

/* -------------------------------------------------------------
   記事末CTA
   ------------------------------------------------------------- */
.ca-cta-end{ margin-top:3.5rem; background:var(--ca-panel); border-top:1px solid var(--ca-rule) }
.ca-cta-end-in{ max-width:64.5rem; margin:0 auto; padding:3.5rem 1.1rem }
.ca-cta-end-in > div{ max-width:38rem }
.ca-lbl{
  display:block; margin-bottom:.2rem;
  font-size:.7rem; font-weight:700; letter-spacing:.16em; color:var(--ca-text-3);
}
.ca-cta-end h2{
  margin:.6rem 0 .9rem; font-weight:700; font-size:clamp(1.35rem,4.5vw,1.9rem);
  line-height:1.55; text-wrap:balance; color:var(--ca-text);
}
.ca-cta-end p{ margin:0 0 1.6rem; font-size:.93rem; line-height:2; color:var(--ca-text-2) }
.ca-cta-actions{ display:flex; flex-wrap:wrap; gap:.7rem }
.ca-cta-meta{ margin-top:1rem; font-size:.74rem; color:var(--ca-text-3) }
@media (max-width:880px){ .ca-cta-end-in{ padding:2.6rem 1.1rem } }
@media (max-width:520px){
  .ca-cta-actions{ flex-direction:column; align-items:stretch }
  .ca-cta-actions .ca-btn{ justify-content:center }
}

/* -------------------------------------------------------------
   関連記事
   ------------------------------------------------------------- */
.ca-related{ max-width:64.5rem; margin:0 auto; padding:3rem 1.1rem }
.ca-rgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:1.2rem }
@media (max-width:820px){ .ca-rgrid{ grid-template-columns:1fr; gap:0 } }
.ca-rcard{
  display:block; padding-top:.9rem; color:inherit; text-decoration:none;
  border-top:2px solid var(--ca-ink);
}
@media (max-width:820px){
  .ca-rcard{ padding:1rem 0; border-top:1px solid var(--ca-rule) }
  .ca-rcard:first-child{ border-top:2px solid var(--ca-ink) }
}
.ca-rcard .ca-k{ font-size:.68rem; font-weight:700; letter-spacing:.1em; color:var(--ca-red) }
.column-article .ca-rcard h3{
  margin:.4rem 0 .35rem; padding:0; border:0;
  font-size:1rem; font-weight:700; line-height:1.7;
}
.ca-rcard p{ margin:0; font-size:.82rem; line-height:1.8; color:var(--ca-text-2) }
.ca-rcard:hover h3{ color:var(--ca-blue-dk) }

/* -------------------------------------------------------------
   スマホ追従CTA（PCでは出さない）
   ------------------------------------------------------------- */
.ca-dock{
  position:fixed; left:0; right:0; bottom:0; z-index:110; display:none;
  padding:.55rem .8rem calc(.55rem + env(safe-area-inset-bottom));
  background:#fff; border-top:1px solid var(--ca-rule);
  transform:translateY(115%); transition:transform .28s ease;
}
.ca-dock.is-on{ transform:translateY(0) }
.ca-dock-btn{
  display:block; width:100%; padding:.75rem 1rem; border-radius:4px;
  background:var(--ca-blue); color:#fff; text-decoration:none; text-align:center;
}
.ca-dock-btn .ca-t{ display:block; line-height:1.4 }
.ca-dock-btn .ca-t b{ display:block; font-size:.92rem; font-weight:700 }
.ca-dock-btn .ca-t small{ display:block; margin-top:.15rem; font-size:.68rem; opacity:.78 }
@media (max-width:760px){
  .ca-dock{ display:block }
  .column-article{ padding-bottom:4.4rem }
}

/* =============================================================
   COLUMN LIST（/column/ 一覧・カテゴリ一覧）
   ============================================================= */
.cl-head{ border-bottom:1px solid var(--ca-rule); background:var(--ca-panel) }
.cl-head-in{ max-width:64.5rem; margin:0 auto; padding:2.6rem 1.1rem 2.4rem }
.cl-lbl{
  display:block; margin-bottom:.5rem;
  font-size:.7rem; font-weight:700; letter-spacing:.18em; color:var(--ca-red);
}
.column-list h1.cl-title{
  margin:0 0 .8rem; font-weight:700; font-size:clamp(1.5rem,4.5vw,2.1rem);
  line-height:1.5; letter-spacing:.01em; color:var(--ca-text);
}
.cl-lede{ margin:0; max-width:38rem; font-size:.93rem; line-height:1.95; color:var(--ca-text-2) }

.cl-shell{ max-width:64.5rem; margin:0 auto; padding:2rem 1.1rem 3rem }

/* 視覚的に隠すが読み上げには残すラベル */
.column-list .screen-reader-text{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* --- 検索窓・件数 --- */
.cl-tools{
  display:flex; align-items:center; gap:1rem; margin-bottom:1.2rem;
}
.cl-search{
  position:relative; flex:1; min-width:0; max-width:22rem;
  display:flex; align-items:center;
}
.cl-search input[type="search"]{
  width:100%; padding:.6rem 2.6rem .6rem .85rem;
  font-family:inherit; font-size:.88rem; line-height:1.6; color:var(--ca-text);
  background:#fff; border:1px solid var(--ca-rule); border-radius:3px;
  -webkit-appearance:none; appearance:none;
}
.cl-search input[type="search"]::placeholder{ color:var(--ca-text-3) }
.cl-search input[type="search"]:focus{
  outline:none; border-color:var(--ca-blue);
  box-shadow:0 0 0 3px var(--ca-blue-wash);
}
.cl-search button{
  position:absolute; right:.25rem; top:50%; transform:translateY(-50%);
  width:2rem; height:2rem; display:grid; place-items:center;
  background:none; border:0; cursor:pointer; color:var(--ca-text-3);
  border-radius:3px;
}
.cl-search button:hover{ color:var(--ca-blue-dk) }
.cl-search svg{ width:16px; height:16px; display:block }

/* 検索中のキーワード表示 */
.cl-query{
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem;
  margin-bottom:1.2rem; font-size:.86rem; color:var(--ca-text-2);
}
.cl-query b{ font-weight:700; color:var(--ca-text) }
.cl-clear{
  font-size:.8rem; color:var(--ca-blue-dk); text-decoration:underline;
  text-underline-offset:.2em;
}

/* --- カテゴリ絞り込み --- */
.cl-filter{
  display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2rem;
  padding-bottom:1.6rem; border-bottom:1px solid var(--ca-rule);
}
.cl-chip{
  display:inline-block; padding:.4rem .9rem; border-radius:99px;
  font-size:.82rem; font-weight:500; text-decoration:none;
  color:var(--ca-text-2); border:1px solid var(--ca-rule); background:#fff;
  transition:border-color .18s ease, color .18s ease;
}
.cl-chip:hover{ border-color:var(--ca-blue); color:var(--ca-blue-dk) }
.cl-chip.is-on{
  background:var(--ca-blue); border-color:var(--ca-blue); color:#fff; font-weight:700;
}
.cl-count{ margin-left:auto; flex:none; font-size:.76rem; color:var(--ca-text-3) }
@media (max-width:640px){
  .cl-tools{ flex-wrap:wrap; gap:.6rem }
  .cl-search{ max-width:none; flex:1 1 100% }
  .cl-count{ margin-left:0 }
}

/* --- 記事リスト --- */
.cl-list{ list-style:none; margin:0; padding:0 }
.cl-list li{ border-bottom:1px solid var(--ca-rule-2) }
.cl-list li:first-child{ border-top:1px solid var(--ca-rule-2) }

.cl-item{
  display:grid; grid-template-columns:7.5rem minmax(0,1fr); gap:0 1.6rem;
  padding:1.5rem .6rem 1.5rem .9rem;
  color:inherit; text-decoration:none; position:relative;
  transition:background .18s ease;
}
.cl-item::before{
  content:""; position:absolute; left:0; top:1.5rem; bottom:1.5rem; width:2px;
  background:var(--ca-red); transform:scaleY(0); transform-origin:50% 0;
  transition:transform .2s ease;
}
.cl-item:hover{ background:var(--ca-panel) }
.cl-item:hover::before{ transform:scaleY(1) }

.cl-meta{ display:flex; flex-direction:column; gap:.45rem; padding-top:.25rem }
.cl-date{ font-size:.76rem; color:var(--ca-text-3); font-variant-numeric:tabular-nums }
.cl-cat{
  display:inline-block; width:fit-content; padding:.1rem .45rem; border-radius:2px;
  font-size:.68rem; font-weight:700; letter-spacing:.04em;
  background:var(--ca-blue-wash); color:var(--ca-blue-dk);
}
.column-list .cl-t{
  margin:0 0 .45rem; font-weight:700; font-size:1.05rem; line-height:1.7;
  color:var(--ca-text); text-wrap:balance;
}
.cl-item:hover .cl-t{ color:var(--ca-blue-dk) }
.cl-x{ margin:0; font-size:.85rem; line-height:1.85; color:var(--ca-text-2) }

@media (max-width:640px){
  .cl-item{ grid-template-columns:1fr; gap:.5rem; padding:1.3rem .5rem 1.3rem .8rem }
  .cl-meta{ flex-direction:row; align-items:center; gap:.7rem; padding:0 }
  .column-list .cl-t{ font-size:1rem }
  .cl-x{ font-size:.82rem }
}

/* --- 該当なし --- */
.cl-empty{
  padding:3rem 1rem; text-align:center; font-size:.92rem; color:var(--ca-text-2);
  border:1px dashed var(--ca-rule); border-radius:4px;
}

/* --- ページ送り --- */
.cl-pager{ display:flex; justify-content:center; gap:.4rem; margin-top:2.4rem; flex-wrap:wrap }
.cl-pager .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:2.3rem; height:2.3rem; padding:0 .6rem; border-radius:3px;
  font-size:.85rem; font-weight:700; text-decoration:none;
  color:var(--ca-text-2); border:1px solid var(--ca-rule); background:#fff;
  font-variant-numeric:tabular-nums;
}
.cl-pager .page-numbers:hover{ border-color:var(--ca-blue); color:var(--ca-blue-dk) }
.cl-pager .page-numbers.current{
  background:var(--ca-blue); border-color:var(--ca-blue); color:#fff;
}
.cl-pager .page-numbers.dots{ border-color:transparent; background:none }

@media (prefers-reduced-motion:reduce){
  .column-article *,
  .column-list *{ animation:none !important; transition:none !important }
}