/* コラム（/column/）専用。長文記事に必要なぶんだけを足す。
   ⚠️ 既存の静的ページ（規約・プラポリ等）と同じ .sdoc / .card / .crumb / .svc-grid を土台に使い、
      ここでは「長文の本文」「目次」「CTA」だけを定義する。static.css には入れない＝
      この1本を読むのはコラムのページだけなので、他の静的ページのキャッシュを揺らさない。
   ⚠️ 色は theme.css の変数を使う（ダーク／ライトの切替がそのまま効く）。
      直値を置いているのは .col__draft だけ＝下書きバッジは公開ページに出ないため。 */

/* ---- 本文 ---------------------------------------------------------------- */

.col__body{font-size:14.5px;line-height:1.95;color:var(--ink);}

.col__body h2{
  font-size:19px;line-height:1.55;color:var(--ink);
  margin:44px 0 16px;padding:0 0 10px;
  border-bottom:2px solid var(--teal);
}
.col__body h2:first-child{margin-top:0;}

.col__body h3{
  font-size:16px;line-height:1.6;color:var(--ink);
  margin:32px 0 12px;padding-left:11px;
  border-left:4px solid var(--teal);
}

.col__body p{margin:0 0 18px;}
.col__body p:last-child{margin-bottom:0;}

.col__body a{color:var(--teal-d);}
.col__body strong{color:var(--teal-d);}

.col__body ul,.col__body ol{margin:0 0 18px;padding-left:1.5em;}
.col__body li{margin:0 0 9px;}
.col__body li:last-child{margin-bottom:0;}

/* 長い表は画面幅で折らずに、表だけ横スクロールさせる（ページ本体は横に動かさない）。 */
.col__body .scroll{overflow-x:auto;margin:0 0 18px;}
.col__body table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:420px;}
.col__body th,.col__body td{border:1px solid var(--line);padding:10px 13px;text-align:left;vertical-align:top;}
.col__body th{background:var(--field-bg);font-weight:700;color:var(--ink);}

.col__body blockquote{
  margin:0 0 18px;padding:14px 18px;
  background:var(--field-bg);border-left:4px solid var(--line);
  font-size:13.5px;color:var(--muted);
}

/* 例文ブロック（メールの件名・本文など、改行をそのまま見せたいもの）。
   ⚠️ pre は既定で折り返さないため、そのまま置くと長い行の分だけページが横にずれる。
      pre-wrap で必ず折り返す＝表（.scroll）と違い、この中身は横スクロールさせない。 */
.col__body pre{
  margin:0 0 18px;padding:16px 18px;
  background:var(--field-bg);border:1px solid var(--line);border-radius:10px;
  font-family:inherit;font-size:13.5px;line-height:1.85;color:var(--ink);
  white-space:pre-wrap;overflow-wrap:break-word;
}

/* ---- 画像（アイキャッチ・図解） ------------------------------------------------ */
/* 幅は本文いっぱい・高さは width/height 属性の比率に従う（読み込み中に本文がずれない）。
   枠線を付けるのは、白地の画像がライトテーマのカードと溶けて境目が見えなくなるため。 */

.col__eyecatch{margin:0 0 22px;}
.col__figure{margin:0 0 34px;}
.col__figure a{display:block;}
.col__eyecatch img,.col__figure img{
  display:block;width:100%;height:auto;
  border:1px solid var(--line);border-radius:10px;
}

.col__draft{
  display:inline-block;margin:0 0 16px;padding:5px 12px;border-radius:7px;
  background:#fff4d6;border:1px solid #e8c766;color:#6b5200;
  font-size:12.5px;font-weight:700;
}

/* ---- 目次 ---------------------------------------------------------------- */

.col__toc{
  background:var(--field-bg);border:1px solid var(--line);border-radius:12px;
  padding:18px 22px;margin:0 0 34px;
}
.col__toc-h{margin:0 0 10px;font-size:14px;font-weight:800;color:var(--ink);}
/* ⚠️ 番号は h2 だけに付ける（= <ol> に入るのは h2 のみ）。h3 を同じ <ol> に並べると
      h3まで数に入り「2の次が7」になる。h3 は入れ子の <ul>（番号なし）に置く。 */
.col__toc-main{margin:0;padding-left:1.3em;}
.col__toc-sub{margin:6px 0 0;padding-left:1.1em;list-style:circle;}
.col__toc li{font-size:13.5px;line-height:1.75;margin:0 0 6px;}
.col__toc li:last-child{margin-bottom:0;}
.col__toc-sub li{font-size:13px;margin:0 0 4px;}
.col__toc-main > li{margin-bottom:10px;}
.col__toc-main > li:last-child{margin-bottom:0;}
.col__toc a{color:var(--teal-d);text-decoration:none;}
.col__toc a:hover{text-decoration:underline;}

/* ---- 一覧：付箋型 ---------------------------------------------------------- */
/* ⚠️ グリッドにしない。記事にサムネイル画像がないため、横に並べても目印になるものが
      無く、タイトルだけが散って読みにくくなる。幅いっぱいの帯を縦に積み、左端の
      色帯（付箋のつまみ）で1件の切れ目を示す形にしている。 */

.col__list{display:flex;flex-direction:column;gap:12px;margin:8px 0 0;}

.col__note{
  position:relative;display:block;text-decoration:none;
  background:var(--card);border:1px solid var(--line);
  border-radius:4px 11px 11px 4px;          /* 左辺だけ角を立てて付箋の見え方にする */
  padding:17px 22px 17px 27px;              /* 左は色帯のぶん広く取る */
  box-shadow:var(--shadow);
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
/* 付箋のつまみ。上下は -1px で枠線の内側に収める（縁が二重に見えないように） */
.col__note::before{
  content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:7px;
  background:var(--teal);border-radius:4px 0 0 4px;
}
.col__note:hover{
  border-color:var(--teal);
  box-shadow:0 4px 14px rgba(20,40,60,.12);
  transform:translateY(-1px);
}

.col__note-h{display:block;font-size:15.5px;font-weight:800;line-height:1.6;color:var(--ink);}
.col__note-m{display:block;margin:6px 0 0;font-size:12px;color:var(--muted);}
.col__note-d{display:block;margin:9px 0 0;font-size:12.5px;line-height:1.8;color:var(--muted);}

/* ---- 一覧：ページ送り -------------------------------------------------------- */
/* 数字は総ページ数ぶんすべて並べる。1ページ10本・全100本の計画なので最大10個で収まる。
   ⚠️ 現在ページだけは <a> ではなく <span>（自分自身へのリンクを作らない）。 */

.col__pager{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;
  margin:28px 0 0;
}

.col__pager-n,.col__pager-arw{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:38px;padding:0 12px;
  border:1px solid var(--line);border-radius:8px;
  background:var(--card);color:var(--ink);
  font-size:13.5px;font-weight:700;text-decoration:none;
  transition:border-color .15s,background .15s,color .15s;
}
.col__pager-n:hover,.col__pager-arw:hover{border-color:var(--teal);color:var(--teal-d);}

.col__pager-n.is-current{
  background:var(--teal);border-color:var(--teal);color:#fff;
}

/* 件数の表示。ページ送りの下に小さく添えるだけ＝主導線を邪魔しない。 */
.col__pager-c{margin:12px 0 0;text-align:center;font-size:12px;color:var(--muted);}

/* ---- 関連記事のカード（記事下・こちらはグリッドのまま） ------------------------ */

.col__card{display:flex;flex-direction:column;gap:4px;text-decoration:none;transition:border-color .15s,box-shadow .15s;}
.col__card:hover{border-color:var(--teal);box-shadow:0 0 0 2px rgba(23,176,201,.14);}
.col__card .svc__name{line-height:1.55;}
.col__rel{margin-top:40px;}

/* ---- 記事下：編集方針への導線 ------------------------------------------------ */
/* 記事の最後に右寄せで1行。CTAより目立たせないよう、文字色は muted のまま。 */

.col__policy{margin:26px 0 0;text-align:right;font-size:12.5px;}
.col__policy a{color:var(--muted);text-decoration:none;}
.col__policy a:hover{color:var(--teal-d);text-decoration:underline;}

/* ---- 記事下のCTA ---------------------------------------------------------- */

.col__cta{
  margin:32px 0 0;padding:26px 24px;text-align:center;
  background:var(--field-bg);border:1px solid var(--line);border-radius:14px;
}
.col__cta-h{margin:0 0 8px;font-size:17px;font-weight:800;color:var(--ink);}
.col__cta-t{margin:0;font-size:13.5px;color:var(--muted);line-height:1.85;}
.col__cta .backhome{margin-top:18px;}
/* 狭い画面では文の切れ目（「！」の後・「〜なら」とブランド名の間）で折り返す（末尾の1〜2文字だけが次の行へ落ちるのを防ぐ） */
.col__cta-t span,.col__cta .backhome span{display:inline-block;}

@media (max-width:600px){
  .col__body{font-size:14px;}
  .col__body h2{font-size:17.5px;margin-top:36px;}
  .col__body h3{font-size:15.5px;}
  .col__toc{padding:16px 18px;}
  /* 320px幅で見出しとボタンの末尾1文字（「成」「ら」）だけが次の行へ落ちるので、横の余白だけ詰める。 */
  .col__cta{padding:24px 18px;}
  .col__cta .backhome{padding:11px 16px;}
  .col__note{padding:15px 16px 15px 21px;}
  .col__note-h{font-size:15px;}
  /* 指で押せる大きさは保ったまま、狭い画面では余白だけ詰める。 */
  .col__pager{gap:6px;}
  .col__pager-n,.col__pager-arw{min-width:36px;height:36px;padding:0 9px;font-size:13px;}
}

/* ---- 追従CTA（.colfab） ------------------------------------------------------ */
/* PCは右下隅に正方形で置き、スマホは画面最下部の帯にする。
   ⚠️ 色は app.css の主導線ボタン（.btn--next / .acct__submit）と同じ組み合わせを使う
      ＝黄色 var(--accent) に濃茶の文字 #3a3300。この文字色だけ直値なのは、
      アクセント上の文字色にトークンが無く、app.css 側も同じ直値で揃えているため。
      var(--accent) はダークでも同じ黄色なので、明暗どちらでも読める。
   ⚠️ z-index は認証モーダル（1000）より下、通常のページ要素より上に置く。
      モーダルを開いたときにボタンが覆いかぶさらないようにするため。 */

.colfab{
  position:fixed;right:20px;bottom:20px;z-index:40;
  width:120px;height:120px;                 /* 正方形 */
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  padding:10px;box-sizing:border-box;
  background:var(--accent);color:#3a3300;
  border-radius:16px;text-decoration:none;
  box-shadow:0 6px 20px rgba(20,40,60,.22);
  transition:transform .15s,box-shadow .15s,filter .15s;
}
.colfab:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(20,40,60,.28);filter:brightness(1.04);}
.colfab:active{transform:translateY(0);}
.colfab:focus-visible{outline:3px solid var(--teal-d);outline-offset:3px;}

.colfab__ico{display:flex;}
.colfab__ico svg{width:26px;height:26px;display:block;}

/* 文言は2行に割る。折り返し任せにすると幅によって切れる場所が変わるため、
   span 2つを縦に積んで「履歴書の作成を／はじめる」で固定する。 */
.colfab__t{
  display:flex;flex-direction:column;align-items:center;gap:1px;
  font-size:12.5px;font-weight:800;line-height:1.45;letter-spacing:.01em;
  text-align:center;white-space:nowrap;
}

/* 追従ボタンがフッターの上に重なると、フッターのリンクが押せなくなる。
   コラムのページだけフッターの下余白を広げて、ボタンの分の逃げを作る
   （このCSSを読むのはコラムのページだけなので他ページのフッターは変わらない）。 */
.sfoot{padding-bottom:152px;}

@media (max-width:600px){
  /* スマホは画面最下部に貼り付く帯。指の届く位置に横幅いっぱいで出す。 */
  .colfab{
    right:0;left:0;bottom:0;width:auto;height:auto;
    flex-direction:row;gap:9px;
    padding:15px 16px calc(15px + env(safe-area-inset-bottom));
    border-radius:0;
    box-shadow:0 -3px 14px rgba(20,40,60,.20);
  }
  .colfab:hover{transform:none;box-shadow:0 -3px 14px rgba(20,40,60,.20);}
  .colfab__ico svg{width:22px;height:22px;}
  /* 帯では1行に戻す（縦積みを解除して横に並べる）。 */
  .colfab__t{flex-direction:row;gap:0;font-size:15px;}

  .sfoot{padding-bottom:calc(80px + env(safe-area-inset-bottom));}
}

/* 印刷には追従ボタンを出さない（紙の上では押せず、本文に重なるだけのため）。 */
@media print{ .colfab{display:none;} }