@charset "UTF-8";

/*================================================================

  column.css  ―  コラム記事 本文スタイル

  【読み込み条件】
    header-sub.php でコラム記事（is_singular('column')）のときだけ読み込む。
    全ルールが .column_design 配下に限定されているため、
    お知らせ・事例紹介など他の詳細ページには影響しない。

  【適用範囲】
    single-column.php の .column_single_cont 配下のみ。
    お知らせ（single.php）・事例紹介（single-business.php）には影響しません。
    ※ このファイルには .news_ / .business_ 系のセレクタを書かないこと。

  【経緯】
    見出しデザインは A・B・C の3案を ?design= パラメータで比較検討し、
    2026-09-01 に A案で確定。不採用案と確認用パラメータの仕組みは削除済み。
      H2 … 薄い青の背景 ＋ 左に濃紺のライン
      H3 … 短い左ライン ＋ 下線
      H4 … 菱形マーカー ＋ 太字（サイト共通の菱形モチーフに合わせる）

  【前提メモ】
    ・PC は viewport が width=1200 固定のため 1vw = 12px。
      clamp() の最小値が実効値になるので、最小値＝PCでの見え方になるよう指定している。
    ・SP（767px以下）は html { font-size: 2.564vw } のため 1rem ≒ 10px。
    ・main.css の  dl,ol,ul { margin:0!important; padding:0!important }  が効くため、
      リストのインデントは li の padding-left ＋ ::before マーカーで作っている。

================================================================*/

main .column_design {
  /* ---- ブランドカラー（配下すべてで参照する） ---- */
  --col-navy: #1d385d;
  --col-blue: #255496;
  --col-lightblue: #597cac;
  --col-bg: #eef3f8;
  --col-bg-soft: #f7f9fb;
  --col-line: #d5dee9;
  --col-line-strong: #c9d2de;
  --col-gray: #9e9e9e;
  --col-accent: #d92333;
}

/*----------------------------------------------------------------
  記事タイトル（H1）
  既存の .f_24 は PC（viewport 1200固定）だと clamp の最小値 16px に張り付き、
  本文と同サイズ＝H2より小さくなってしまうため、ここで上書きする。
----------------------------------------------------------------*/
main .column_design > h1 {
  font-size: clamp(26px, 2.1666vw, 32px);
  line-height: 1.5;
  color: var(--col-navy);
}

/*----------------------------------------------------------------
  本文まわりの基本タイポグラフィ
----------------------------------------------------------------*/
main .column_design .column_single_body {
  font-size: clamp(16px, 1.0416vw, 20px);
  line-height: 1.9;
  letter-spacing: 1px;
  word-break: break-word;
}

main .column_design .column_single_body > *:first-child {
  margin-top: 0;
}

main .column_design .column_single_body > *:last-child {
  margin-bottom: 0;
}

main .column_design .column_single_body p {
  margin-bottom: 1.6em;
  line-height: 1.9;
}

/* 投稿画面で style="display:flex" / "display:grid" を直書きしたブロック
   （CTAボタンエリア等）は gap で余白を作っているため、
   p の margin が二重に効いてレイアウトが崩れる。ここでは無効化する。 */
main .column_design .column_single_body [style*="flex"] > p,
main .column_design .column_single_body [style*="grid"] > p {
  margin-bottom: 0;
}

/* :not(.column_toc_link) … 自動目次のリンクは sub.css の指定を優先する */
main .column_design .column_single_body a:not(.column_toc_link) {
  color: var(--col-blue);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: opacity 0.3s;
}

@media (hover: hover) {
  main .column_design .column_single_body a:not(.column_toc_link):hover {
    opacity: 0.6;
  }
}

main .column_design .column_single_body strong,
main .column_design .column_single_body b {
  font-weight: 700;
}

main .column_design .column_single_body em {
  font-style: normal;
  background: linear-gradient(transparent 60%, #ffe9a8 60%);
}

main .column_design .column_single_body img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 2.4em auto;
}

main .column_design .column_single_body figure {
  margin: 2.4em 0;
}

main .column_design .column_single_body figure img {
  margin: 0 auto;
}

main .column_design .column_single_body figcaption {
  margin-top: 0.8em;
  font-size: 0.85em;
  line-height: 1.7;
  color: #666666;
  text-align: center;
}

main .column_design .column_single_body hr {
  margin: 3em 0;
  border: 0;
  border-top: 1px solid var(--col-line);
}

/*----------------------------------------------------------------
  H2 / H3 / H4  サイズと余白
  見出し前は大きく、見出し後は詰める＝話題の切り替わりを余白でも見せる
----------------------------------------------------------------*/
main .column_design .column_single_body h2 {
  font-size: clamp(22px, 1.8332vw, 28px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 1px;
  margin: 2.2em 0 1.1em;
  scroll-margin-top: 120px;
}

main .column_design .column_single_body h3 {
  font-size: clamp(19px, 1.5832vw, 24px);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 1px;
  margin: 2.2em 0 0.9em;
  scroll-margin-top: 120px;
}

main .column_design .column_single_body h4 {
  font-size: clamp(17px, 1.4166vw, 21px);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 1px;
  margin: 2em 0 0.7em;
  scroll-margin-top: 120px;
}

main .column_design .column_single_body h5,
main .column_design .column_single_body h6 {
  font-size: clamp(16px, 1.3332vw, 20px);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 1px;
  color: var(--col-navy);
  margin: 1.8em 0 0.6em;
}

/* 見出しが連続した場合は間隔を詰める */
main .column_design .column_single_body h2 + h3,
main .column_design .column_single_body h3 + h4 {
  margin-top: 1.2em;
}

/*================================================================

  見出しの装飾
    H2：薄い青の背景 ＋ 左に濃紺のライン
    H3：短い左ライン ＋ 下線
    H4：菱形マーカー ＋ 太字（サイト共通の菱形モチーフに合わせる）

================================================================*/
main .column_design .column_single_body h2 {
  color: var(--col-navy);
  background-color: var(--col-bg);
  border-left: 6px solid var(--col-navy);
  padding: 0.7em 0.9em;
}

main .column_design .column_single_body h3 {
  position: relative;
  color: var(--col-navy);
  padding: 0 0 0.5em 0.75em;
  border-bottom: 2px solid var(--col-line);
}

main .column_design .column_single_body h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 4px;
  height: 1.1em;
  background-color: var(--col-blue);
  border-radius: 2px;
}

main .column_design .column_single_body h4 {
  position: relative;
  color: var(--col-navy);
  padding-left: 1.2em;
}

main .column_design .column_single_body h4::before {
  content: "";
  position: absolute;
  left: 0.05em;
  top: 0.62em;
  width: 0.55em;
  height: 0.55em;
  background-color: var(--col-lightblue);
  transform: rotate(45deg);
}

/*----------------------------------------------------------------
  リスト
  main.css の ul,ol { padding:0 !important } を避けるため
  インデントは li 側の padding-left で作る
  :not(.column_toc_*) … 自動目次のリストは sub.css の指定を優先する
----------------------------------------------------------------*/
main .column_design .column_single_body ul:not(.column_toc_list),
main .column_design .column_single_body ol {
  margin-bottom: 1.6em !important;
  list-style: none;
}

main .column_design .column_single_body ul li:not(.column_toc_item),
main .column_design .column_single_body ol li {
  position: relative;
  padding-left: 1.6em;
  line-height: 1.9;
}

main .column_design .column_single_body ul li:not(.column_toc_item):not(:last-child),
main .column_design .column_single_body ol li:not(:last-child) {
  margin-bottom: 0.5em;
}

main .column_design .column_single_body ul > li:not(.column_toc_item)::before {
  content: "";
  position: absolute;
  left: 0.35em;
  top: 0.75em;
  width: 0.5em;
  height: 0.5em;
  background-color: var(--col-lightblue);
  border-radius: 50%;
}

main .column_design .column_single_body ol {
  counter-reset: column_ol;
}

main .column_design .column_single_body ol > li {
  counter-increment: column_ol;
}

main .column_design .column_single_body ol > li::before {
  content: counter(column_ol) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--col-blue);
}

/* 入れ子 */
main .column_design .column_single_body li > ul,
main .column_design .column_single_body li > ol {
  margin-top: 0.5em;
  margin-bottom: 0 !important;
}

/*----------------------------------------------------------------
  引用
----------------------------------------------------------------*/
main .column_design .column_single_body blockquote {
  position: relative;
  margin: 2.4em 0;
  padding: 1.6em 1.8em;
  background-color: var(--col-bg-soft);
  border-left: 4px solid var(--col-line-strong);
  color: #4a4a4a;
  font-size: 0.95em;
}

main .column_design .column_single_body blockquote p:last-child {
  margin-bottom: 0;
}

main .column_design .column_single_body blockquote cite {
  display: block;
  margin-top: 0.8em;
  font-size: 0.9em;
  font-style: normal;
  color: #777777;
}

/*----------------------------------------------------------------
  テーブル
----------------------------------------------------------------*/
main .column_design .column_single_body table {
  width: 100%;
  margin: 2.4em 0;
  border-collapse: collapse;
  font-size: 0.95em;
}

main .column_design .column_single_body table th,
main .column_design .column_single_body table td {
  padding: 0.9em 1em;
  border: 1px solid var(--col-line);
  line-height: 1.7;
  text-align: left;
  vertical-align: top;
}

main .column_design .column_single_body table th {
  background-color: var(--col-bg);
  color: var(--col-navy);
  font-weight: 700;
  white-space: nowrap;
}

/*----------------------------------------------------------------
  目次（.column_toc）
  ※ 目次は functions.php → yawata_column_auto_toc() が自動生成し、
     見た目は css/sub.css（常時読み込み）で定義している。
     このファイルには目次のスタイルは書かない。上の本文用の
     リスト／リンク装飾を :not(.column_toc_*) で除外しているだけ。
----------------------------------------------------------------*/

/*================================================================

  SP（767px以下）
  ※ 1rem ≒ 10px（html { font-size: 2.564vw }）

================================================================*/
@media screen and (max-width: 767px) {
  main .column_design > h1 {
    font-size: 2.2rem;
    line-height: 1.5;
  }

  main .column_design .column_single_body {
    font-size: 1.6rem;
    line-height: 1.85;
    letter-spacing: 0.5px;
  }

  main .column_design .column_single_body p {
    margin-bottom: 1.5em;
  }

  main .column_design .column_single_body h2 {
    font-size: 2rem;
    margin: 1.9em 0 1em;
    padding: 0.6em 0.7em;
    border-left-width: 4px;
    scroll-margin-top: 90px;
  }

  main .column_design .column_single_body h3 {
    font-size: 1.8rem;
    margin: 1.9em 0 0.8em;
    padding: 0 0 0.45em 0.6em;
    scroll-margin-top: 90px;
  }

  main .column_design .column_single_body h3::before {
    width: 3px;
  }

  main .column_design .column_single_body h4 {
    font-size: 1.65rem;
    margin: 1.7em 0 0.6em;
    scroll-margin-top: 90px;
  }

  main .column_design .column_single_body h5,
  main .column_design .column_single_body h6 {
    font-size: 1.6rem;
  }

  main .column_design .column_single_body img,
  main .column_design .column_single_body figure {
    margin: 2em auto;
  }

  main .column_design .column_single_body ul li:not(.column_toc_item),
  main .column_design .column_single_body ol li {
    padding-left: 1.5em;
  }

  main .column_design .column_single_body blockquote {
    margin: 2em 0;
    padding: 1.4em 1.5em;
  }

  /* テーブルは横スクロールで逃がす */
  main .column_design .column_single_body table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    margin: 2em 0;
  }

  main .column_design .column_single_body table th,
  main .column_design .column_single_body table td {
    padding: 0.8em 0.9em;
  }

}