@charset "UTF-8";
/* ============================================================
   Column（アスベスト実務コラム）
   style.css のトークン（ネイビー #09142C / オレンジ #F04E23 /
   シアン #00BEE7）を引き継ぎ、長文を「読み切れる」ことを最優先にする。
   ・本文は白カード＋760px前後の行長、字間は詰めて行間を広く
   ・PCは右に追従目次、SPは本文先頭に開閉式の目次
   ・表は横スクロール、フローや年表は1カラムに畳む
   ============================================================ */

:root {
  /* 文字色はすべて WCAG AA（4.5:1）以上。ブランドのオレンジ #F04E23 は白地で 3.6:1 と
     足りないため、文字・白文字を載せる塗りには濃いオレンジ（5.2:1）を使う */
  --col-body: #1b2533; /* 15.4:1 */
  --col-sub: #46566a; /* 7.5:1 */
  --col-line: #cfd9e1;
  --col-soft: #eef3f7;
  --col-orange-soft: #fff1eb;
  --col-cyan-soft: #e3f4fa;
  --col-orange-text: #c7390f; /* 白地 5.2:1 */
  --col-cyan-text: #006a8c; /* 白地 6.1:1 */
  --col-radius: 18px;
}

/* ---------- 下層ヒーロー（記事用に低めに） ---------- */
.col_mv {
  padding: 150px 0 40px;
}
.col_mv h2,
.col_mv h1 {
  font-size: 52px;
}
/* 一覧ページはページ見出しが h1（見た目は下層ヒーローの h2 と同じ） */
.col_mv h1 {
  position: relative;
  font-family: var(--ff-en);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.1;
  color: var(--c-navy);
  white-space: nowrap;
}
.col_mv .ghost {
  font-size: 120px;
}
.col_mv .breadcrumb {
  flex-wrap: wrap;
  row-gap: 0;
}
.col_mv .breadcrumb .current {
  max-width: 32em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- レイアウト ---------- */
/* style.css の html,body{overflow-x:hidden} は body をスクロールコンテナにしてしまい、
   サイドの目次の position:sticky が効かなくなる。clip ははみ出しを切るだけで
   スクロールコンテナを作らないので、記事ページではこちらに差し替える */
html,
body {
  overflow-x: clip;
}
.col_article {
  padding: 10px 0 100px;
}
.col_layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  gap: 48px;
  align-items: start;
}
.col_main {
  min-width: 0;
  background: #fff;
  border-radius: var(--col-radius);
  padding: 56px 64px 64px;
  border: 1px solid #dbe3ea;
  box-shadow: 0 12px 40px rgba(9, 20, 44, 0.1);
}
.col_side {
  position: sticky;
  top: 110px;
}

/* ---------- 記事ヘッダー ---------- */
.col_head {
  margin-bottom: 32px;
}
.col_meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--col-sub);
  margin-bottom: 16px;
}
.col_cat {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--c-navy);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.8;
}
.col_meta time,
.col_meta .read {
  white-space: nowrap;
}
.col_title {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--c-navy);
  margin-bottom: 20px;
}
.col_lead {
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.04em;
  color: var(--col-body);
}

/* ---------- アイキャッチ・図版（画像差し替え前はプレースホルダ） ---------- */
.col_fig {
  margin: 0 0 36px;
}
.col_fig img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--col-soft);
}
.col_fig figcaption {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--col-sub);
  letter-spacing: 0.04em;
}
/* 画像未配置時: data-ph に入れた画像IDを中央に表示 */
.col_ph {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(120deg, #e8f4fb 0%, #f4f8fb 50%, #fdf0ea 100%);
  border: 1.5px dashed #bcd0dc;
  color: var(--col-sub);
  text-align: center;
  font-size: 13px;
  line-height: 1.7;
  padding: 20px;
}
.col_ph::before {
  content: attr(data-ph);
  display: block;
  font-family: var(--ff-en);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.12em;
  color: var(--col-orange-text);
  margin-bottom: 4px;
}
.col_ph.is_wide {
  aspect-ratio: 21 / 9;
}

/* ---------- この記事のポイント ---------- */
.col_summary {
  position: relative;
  margin: 0 0 36px;
  padding: 28px 30px 24px;
  border-radius: 14px;
  background: #fff;
  border: 2px solid var(--c-navy);
}
.col_summary_ttl {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
  color: var(--c-navy);
}
.col_summary_ttl::before {
  content: "Point";
  font-family: var(--ff-en);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: #fff;
  background: var(--col-orange-text);
  border-radius: 6px;
  padding: 1px 9px;
}
.col_summary ul li {
  position: relative;
  padding-left: 30px;
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: var(--col-body);
  margin-bottom: 8px;
}
.col_summary ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--c-orange)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3l2.6 2.5L12 5.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 14px no-repeat;
}
.col_summary strong {
  color: var(--c-navy);
  background: linear-gradient(transparent 58%, #ffc4ad 58%);
}

/* ---------- 目次 ---------- */
.col_toc {
  border-radius: 14px;
  border: 1px solid var(--col-line);
  background: #fff;
}
.col_toc summary,
.col_toc .col_toc_ttl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  font-family: var(--ff-en);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--col-orange-text);
  cursor: pointer;
  list-style: none;
}
.col_toc summary::-webkit-details-marker {
  display: none;
}
.col_toc summary::after {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--c-navy);
  border-bottom: 2px solid var(--c-navy);
  transform: rotate(45deg) translateY(-3px);
  transition: transform 0.25s ease;
}
.col_toc[open] summary::after {
  transform: rotate(-135deg) translateY(-2px);
}
.col_toc summary span,
.col_toc .col_toc_ttl span {
  font-family: var(--ff-base);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--col-sub);
  margin-left: 10px;
  font-weight: 400;
}
.col_toc ol {
  counter-reset: toc;
  padding: 0 22px 18px;
}
.col_toc li {
  counter-increment: toc;
  border-top: 1px solid var(--col-line);
}
.col_toc a {
  display: grid;
  grid-template-columns: 30px 1fr;
  padding: 10px 0;
  font-size: 13.5px;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--c-navy);
  transition: color 0.2s ease;
}
.col_toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--ff-en);
  font-weight: 700;
  font-size: 12px;
  color: var(--col-orange-text);
  padding-top: 2px;
}
.col_toc a:hover {
  color: var(--col-orange-text);
}
.col_toc a.is_current {
  color: var(--col-orange-text);
  font-weight: 700;
}
/* 本文内の目次（SP用）とサイドの目次（PC用） */
.col_toc_inline {
  margin: 0 0 44px;
  display: none;
}
.col_side .col_toc {
  max-height: calc(100vh - 330px); /* 下の小CTAまで画面内に収める */
  overflow-y: auto;
}
.col_side_cta {
  margin-top: 18px;
  border-radius: 14px;
  padding: 22px 22px 20px;
  background: var(--c-navy);
  color: #fff;
}
.col_side_cta p {
  color: #fff;
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: 0.04em;
}
.col_side_cta .en {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--c-orange);
  margin-bottom: 6px;
}
.col_side_cta a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--col-orange-text);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.col_side_cta a svg {
  width: 12px;
  height: 12px;
  fill: #fff;
}

/* ---------- 本文 ---------- */
.col_body {
  font-size: 16px;
  line-height: 2.05;
  letter-spacing: 0.04em;
  color: var(--col-body);
}
.col_body > * + * {
  margin-top: 1.2em;
}
.col_body h2 {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: baseline;
  margin-top: 72px;
  padding-bottom: 16px;
  border-bottom: 3px solid var(--c-navy);
  font-size: 25px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--c-navy);
  scroll-margin-top: 110px;
}
.col_body h2:first-child {
  margin-top: 0;
}
.col_body h2 .num {
  font-family: var(--ff-en);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: var(--col-orange-text);
  letter-spacing: 0.02em;
}
.col_body h3 {
  margin-top: 48px;
  padding: 10px 16px;
  border-left: 5px solid var(--c-orange);
  border-radius: 0 8px 8px 0;
  background: var(--col-soft);
  font-size: 19px;
  line-height: 1.6;
  color: var(--c-navy);
  scroll-margin-top: 110px;
}
.col_body h4 {
  margin-top: 32px;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--c-navy);
}
.col_body h4::before {
  content: "■";
  color: var(--c-cyan);
  margin-right: 6px;
  font-size: 0.8em;
}
.col_body h2 + *,
.col_body h3 + *,
.col_body h4 + * {
  margin-top: 20px;
}
.col_body strong {
  color: var(--c-navy);
  font-weight: 700;
}
.col_body .mk {
  font-weight: 700;
  color: var(--c-navy);
  background: linear-gradient(transparent 58%, #ffc4ad 58%);
}
.col_body a:not([class]) {
  color: var(--col-orange-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  word-break: break-all;
}
.col_body ul:not([class]) li,
.col_body ol:not([class]) li {
  position: relative;
  padding-left: 1.5em;
  margin-top: 6px;
}
.col_body ul:not([class]) li::before {
  content: "";
  position: absolute;
  left: 0.35em;
  top: 0.85em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-orange);
}
.col_body ol:not([class]) {
  counter-reset: ol;
}
.col_body ol:not([class]) li {
  counter-increment: ol;
}
.col_body ol:not([class]) li::before {
  content: counter(ol) ".";
  position: absolute;
  left: 0;
  font-family: var(--ff-en);
  font-weight: 700;
  color: var(--col-orange-text);
}
.col_body small,
.col_body .note {
  display: block;
  font-size: 13px;
  line-height: 1.8;
  color: var(--col-sub);
}

/* ---------- 章の結論（各 h2 の直後に1つ） ----------
   読者が見出しと結論だけを拾い読みしても要点が分かるようにする */
.col_answer {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
  padding: 16px 20px;
  border-radius: 10px;
  background: #fff;
  border: 2px solid var(--c-navy);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.85;
  color: var(--c-navy);
}
.col_answer > b {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 6px;
  background: var(--c-navy);
  color: #fff;
  font-size: 13px;
  letter-spacing: 0.08em;
  line-height: 1.8;
  white-space: nowrap;
}
.col_body h2 + .col_answer {
  margin-top: 24px;
}

/* ---------- ボックス（ポイント・注意・法令根拠） ---------- */
.col_box {
  position: relative;
  padding: 22px 26px 22px;
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.95;
}
.col_box > * + * {
  margin-top: 0.6em;
}
.col_box_ttl {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--c-navy);
}
.col_box_ttl::before {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-family: var(--ff-en);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}
.col_box.is_point {
  background: var(--col-cyan-soft);
  border: 1px solid #9fd6e8;
  border-left: 5px solid var(--col-cyan-text);
}
.col_box.is_point .col_box_ttl::before {
  content: "i";
  background: var(--col-cyan-text);
}
.col_box.is_caution {
  background: var(--col-orange-soft);
  border: 1px solid #f5b49d;
  border-left: 5px solid var(--col-orange-text);
}
.col_box.is_caution .col_box_ttl::before {
  content: "!";
  background: var(--col-orange-text);
}
.col_box.is_law {
  background: #fff;
  border: 1px solid var(--col-line);
  border-left: 4px solid var(--c-navy);
  border-radius: 4px 12px 12px 4px;
}
.col_box.is_law .col_box_ttl::before {
  content: "§";
  background: var(--c-navy);
}
.col_box ul li {
  position: relative;
  padding-left: 1.2em;
}
.col_box ul li::before {
  content: "・";
  position: absolute;
  left: 0;
}

/* ---------- 表（横スクロール対応） ---------- */
.col_tbl_wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
  border: 1px solid var(--col-line);
}
.col_tbl {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 14.5px;
  line-height: 1.8;
  letter-spacing: 0.03em;
}
.col_tbl caption {
  caption-side: top;
  text-align: left;
  padding: 14px 18px 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--col-sub);
}
.col_tbl th,
.col_tbl td {
  padding: 13px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--col-line);
}
.col_tbl thead th {
  background: var(--c-navy);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.col_tbl tbody tr:nth-child(even) td {
  background: #f8fafc;
}
.col_tbl tbody th {
  background: #e6edf3;
  color: var(--c-navy);
  font-weight: 700;
  white-space: nowrap;
}
.col_tbl tbody tr:last-child th,
.col_tbl tbody tr:last-child td {
  border-bottom: none;
}
.col_tbl td + td,
.col_tbl th + td,
.col_tbl th + th {
  border-left: 1px solid var(--col-line);
}
.col_tbl thead th + th {
  border-left-color: rgba(255, 255, 255, 0.18);
}
.col_tbl .hl {
  color: var(--col-orange-text);
  font-weight: 700;
}
.col_tbl_hint {
  display: none;
  font-size: 12px;
  color: var(--col-sub);
  margin-top: 6px !important;
  text-align: right;
}

/* ---------- 数値カード（対象工事の基準など） ---------- */
.col_stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.col_stat {
  padding: 20px 18px 18px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--col-line);
  border-top: 4px solid var(--c-orange);
  line-height: 1.6;
}
.col_stat .lbl {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--col-sub);
}
.col_stat .val {
  display: block;
  margin: 6px 0 4px;
  font-family: var(--ff-en);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--c-navy);
}
.col_stat .val small {
  display: inline;
  font-family: var(--ff-base);
  font-size: 14px;
  color: var(--c-navy);
  margin-left: 2px;
}
.col_stat .desc {
  display: block;
  font-size: 13px;
  color: var(--col-body);
}

/* ---------- ステップ（流れ） ---------- */
.col_steps {
  counter-reset: step;
}
.col_steps > li {
  counter-increment: step;
  position: relative;
  padding: 0 0 26px 64px;
}
.col_steps > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c-navy);
  color: #fff;
  font-family: var(--ff-en);
  font-size: 15px;
  font-weight: 700;
}
.col_steps > li::after {
  content: "";
  position: absolute;
  left: 21px;
  top: 50px;
  bottom: 4px;
  width: 2px;
  background: repeating-linear-gradient(
    to bottom,
    #c9d6de 0 5px,
    transparent 5px 10px
  );
}
.col_steps > li:last-child {
  padding-bottom: 0;
}
.col_steps > li:last-child::after {
  display: none;
}
.col_steps .ttl {
  display: block;
  padding-top: 7px;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--c-navy);
}
.col_steps .who {
  display: inline-block;
  margin-left: 8px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--col-cyan-soft);
  color: var(--col-cyan-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  vertical-align: 2px;
}
.col_steps p {
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.9;
}

/* ---------- 年表（法改正） ---------- */
.col_timeline > li {
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: 0 26px;
  position: relative;
  padding-bottom: 30px;
}
.col_timeline > li::before {
  content: "";
  position: absolute;
  left: 133px;
  top: 12px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--c-orange);
  z-index: 1;
}
.col_timeline > li::after {
  content: "";
  position: absolute;
  left: 138px;
  top: 20px;
  bottom: -10px;
  width: 2px;
  background: var(--col-line);
}
.col_timeline > li:last-child::after {
  display: none;
}
.col_timeline .when {
  font-family: var(--ff-en);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.5;
  color: var(--c-navy);
  text-align: right;
  padding-top: 4px;
}
.col_timeline .when small {
  display: block;
  font-family: var(--ff-base);
  font-size: 12px;
  font-weight: 400;
  color: var(--col-sub);
}
.col_timeline .what {
  padding: 0 0 0 20px;
}
.col_timeline .what .ttl {
  display: block;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--c-navy);
}
.col_timeline .what p {
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.9;
}
.col_timeline .law {
  display: inline-block;
  margin-top: 6px;
  padding: 0 10px;
  border-radius: 6px;
  background: var(--col-soft);
  border: 1px solid var(--col-line);
  font-size: 12px;
  color: var(--col-sub);
}
.col_timeline li.is_now .when {
  color: var(--col-orange-text);
}
.col_timeline li.is_now::before {
  background: var(--c-orange);
}

/* ---------- カード並び（区分・分類） ---------- */
.col_cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}
.col_card {
  padding: 22px 22px 20px;
  border-radius: 14px;
  border: 1px solid var(--col-line);
  background: #fff;
  font-size: 14.5px;
  line-height: 1.85;
}
.col_card .tag {
  display: inline-block;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: var(--c-navy);
  color: #fff;
}
.col_card .tag.is_orange {
  background: var(--col-orange-text);
}
.col_card .tag.is_cyan {
  background: var(--col-cyan-text);
}
.col_card .ttl {
  display: block;
  margin: 10px 0 6px;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--c-navy);
}
.col_card p {
  color: var(--col-body);
}

/* ---------- チェックリスト ---------- */
.col_check {
  padding: 20px 24px;
  border-radius: 12px;
  border: 1px solid var(--col-line);
  background: #fff;
}
.col_check li {
  position: relative;
  padding: 8px 0 8px 34px;
  border-bottom: 1px dashed var(--col-line);
  font-size: 15px;
  line-height: 1.85;
}
.col_check li:last-child {
  border-bottom: none;
}
.col_check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  border: 2px solid var(--c-navy);
  background: #fff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.3l3 2.8L12.5 5' fill='none' stroke='%23f04e23' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 14px no-repeat;
}

/* ---------- 判定フロー（Yes/No） ---------- */
.col_judge {
  display: grid;
  gap: 10px;
}
.col_judge .q {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
  padding: 16px 20px;
  border-radius: 12px;
  background: var(--col-soft);
  border: 1px solid var(--col-line);
  font-size: 15px;
  line-height: 1.8;
}
.col_judge .q > b {
  font-family: var(--ff-en);
  font-size: 13px;
  color: #fff;
  background: var(--c-navy);
  border-radius: 6px;
  padding: 1px 9px;
  line-height: 1.8;
}
.col_judge .q .ans {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  color: var(--col-sub);
}
.col_judge .q .ans em {
  font-style: normal;
  font-weight: 700;
  color: var(--col-orange-text);
}

/* ---------- FAQ ---------- */
.col_faq {
  margin-top: 72px;
}
.col_faq details {
  border-bottom: 1px solid var(--col-line);
}
.col_faq details:first-of-type {
  border-top: 1px solid var(--col-line);
}
.col_faq summary {
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr 20px;
  gap: 10px;
  align-items: start;
  padding: 18px 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--c-navy);
  cursor: pointer;
  list-style: none;
}
.col_faq summary::-webkit-details-marker {
  display: none;
}
.col_faq summary::before {
  content: "Q";
  font-family: var(--ff-en);
  font-size: 20px;
  line-height: 1.3;
  color: var(--col-orange-text);
}
.col_faq summary::after {
  content: "+";
  font-family: var(--ff-en);
  font-size: 22px;
  line-height: 1.2;
  color: var(--c-navy);
  text-align: center;
  transition: transform 0.25s ease;
}
.col_faq details[open] summary::after {
  transform: rotate(45deg);
}
.col_faq .a {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  padding: 0 30px 22px 0;
  font-size: 15px;
  line-height: 1.95;
}
.col_faq .a::before {
  content: "A";
  font-family: var(--ff-en);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.4;
  color: var(--col-cyan-text);
}

/* ---------- 記事末CTA（Astro） ---------- */
.col_cta {
  position: relative;
  overflow: hidden;
  margin-top: 64px;
  padding: 40px 44px;
  border-radius: 18px;
  background: var(--c-navy);
  color: #fff;
}
.col_cta::after {
  content: "";
  position: absolute;
  right: -80px;
  top: -80px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 78, 35, 0.45), transparent 70%);
  pointer-events: none;
}
.col_cta::before {
  content: "";
  position: absolute;
  left: -60px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 190, 231, 0.25), transparent 70%);
  pointer-events: none;
}
.col_cta > * {
  position: relative;
  z-index: 1;
}
.col_cta .en {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--c-orange);
}
.col_cta h2,
.col_cta .ttl {
  margin: 6px 0 12px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.6;
  color: #fff;
}
.col_cta p {
  font-size: 14.5px;
  line-height: 1.95;
  color: rgba(255, 255, 255, 0.86);
}
.col_cta ul {
  margin-top: 14px;
  display: grid;
  gap: 6px;
}
.col_cta ul li {
  position: relative;
  padding-left: 22px;
  font-size: 14.5px;
  line-height: 1.8;
  color: #fff;
}
.col_cta ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--c-orange);
}
.col_cta_btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.col_cta_btns a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.col_cta_btns a:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}
.col_cta_btns a svg {
  width: 13px;
  height: 13px;
}
.col_cta_btns .is_primary {
  background: var(--col-orange-text);
  color: #fff;
}
.col_cta_btns .is_primary svg {
  fill: #fff;
}
.col_cta_btns .is_ghost {
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  color: #fff;
}
.col_cta_btns .is_ghost svg {
  fill: #fff;
}

/* ---------- 出典・注記 ---------- */
.col_sources {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--col-line);
}
.col_sources_ttl {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--c-navy);
  margin-bottom: 8px;
}
.col_sources li {
  position: relative;
  padding-left: 1.2em;
  font-size: 13px;
  line-height: 1.85;
  color: var(--col-sub);
}
.col_sources li::before {
  content: "・";
  position: absolute;
  left: 0;
}
.col_sources a {
  color: var(--col-sub);
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
}
.col_disclaimer {
  margin-top: 18px;
  padding: 14px 18px;
  border-radius: 10px;
  background: var(--col-soft);
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--col-sub);
}
.col_author {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--col-sub);
}
.col_author img {
  width: auto;
  height: 30px;
}
.col_author b {
  display: block;
  color: var(--c-navy);
  font-size: 14px;
}

/* ---------- 関連記事 ---------- */
.col_related {
  padding: 0 0 100px;
}
.col_related_head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 26px;
}
.col_related_head h2 {
  font-family: var(--ff-en);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
}
.col_related_head span {
  font-size: 13px;
  font-weight: 700;
  color: var(--col-orange-text);
  letter-spacing: 0.08em;
}

/* 記事カード（一覧・関連記事で共通） */
.col_list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}
.col_item a {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #dbe3ea;
  box-shadow: 0 8px 30px rgba(9, 20, 44, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.col_item a:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(9, 20, 44, 0.12);
}
.col_item .thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--col-soft);
}
.col_item .thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.col_item a:hover .thumb img {
  transform: scale(1.04);
}
.col_item .thumb .col_ph {
  height: 100%;
  border-radius: 0;
  border: none;
  font-size: 12.5px;
  padding: 10px;
}
.col_item .body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px 22px 22px;
}
.col_item .meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--col-sub);
  letter-spacing: 0.04em;
}
.col_item .meta .col_cat {
  font-size: 12px;
  padding: 1px 10px;
}
.col_item .ttl {
  margin-top: 10px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--c-navy);
}
.col_item .excerpt {
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.85;
  letter-spacing: 0.03em;
  color: var(--col-body);
}
.col_item .more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
  font-family: var(--ff-en);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--col-orange-text);
}
.col_item .more svg {
  width: 12px;
  height: 12px;
  fill: var(--col-orange-text);
}

/* ---------- 一覧ページ ---------- */
.col_index {
  padding: 10px 0 100px;
}
.col_index_lead {
  max-width: 760px;
  margin-bottom: 44px;
  font-size: 15px;
  line-height: 2;
  letter-spacing: 0.05em;
  color: var(--col-body);
}
/* 一覧の先頭記事（まとめ記事）を大きく */
.col_list .col_item.is_feature {
  grid-column: 1 / -1;
}
.col_list .col_item.is_feature a {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
}
.col_list .col_item.is_feature .thumb {
  aspect-ratio: auto;
  min-height: 100%;
}
.col_list .col_item.is_feature .body {
  padding: 36px 40px;
  justify-content: center;
}
.col_list .col_item.is_feature .ttl {
  font-size: 22px;
}
.col_list .col_item.is_feature .excerpt {
  font-size: 14.5px;
}

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width: 1100px) {
  /* 幅の上限は親に持たせる（子に margin:auto を付けると grid の伸長が効かず、
     表の min-width に引っ張られてはみ出す） */
  .col_layout {
    grid-template-columns: minmax(0, 1fr);
    max-width: 880px;
  }
  .col_side {
    display: none;
  }
  .col_toc_inline {
    display: block;
  }
}

@media (max-width: 820px) {
  .col_mv {
    padding: 110px 0 26px;
  }
  .col_mv h2,
  .col_mv h1 {
    font-size: 40px;
  }
  .col_mv .ghost {
    font-size: 76px;
    bottom: -8px;
  }
  .col_mv .breadcrumb .current {
    max-width: 14em;
  }
  .col_article {
    padding: 0 0 60px;
  }
  /* 記事カードは画面端近くまで広げて行長を確保 */
  .col_article > .inner {
    width: min(100% - 24px, 1200px);
  }
  .col_main {
    padding: 30px 20px 40px;
    border-radius: 14px;
  }
  .col_title {
    font-size: 22px;
    line-height: 1.65;
    margin-bottom: 16px;
  }
  .col_lead {
    font-size: 15.5px;
    line-height: 1.95;
  }
  .col_summary {
    padding: 22px 18px 16px;
  }
  .col_summary ul li {
    font-size: 15px;
  }
  .col_body {
    font-size: 16px;
    line-height: 1.95;
    letter-spacing: 0.03em;
  }
  .col_answer {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 14px 16px;
    font-size: 15.5px;
  }
  .col_answer > b {
    justify-self: start;
  }
  .col_body h2 {
    margin-top: 56px;
    gap: 12px;
    font-size: 19.5px;
    padding-bottom: 12px;
  }
  .col_body h2 .num {
    font-size: 24px;
  }
  .col_body h3 {
    margin-top: 40px;
    font-size: 17px;
    padding-left: 12px;
  }
  .col_body h4 {
    font-size: 15.5px;
  }
  .col_box {
    padding: 18px 16px 18px 18px;
    font-size: 15px;
  }
  .col_tbl {
    font-size: 14px;
  }
  .col_tbl th,
  .col_tbl td {
    padding: 11px 12px;
  }
  .col_tbl_hint {
    display: block;
  }
  .col_tbl tbody th {
    white-space: normal;
    min-width: 6em;
  }
  /* 2列の表はスクロールさせず画面幅に収める */
  .col_tbl:not(:has(tr > :nth-child(3))) {
    min-width: 0;
  }
  .col_tbl:not(:has(tr > :nth-child(3))) tbody th {
    width: 34%;
  }
  .col_tbl_wrap:not(:has(tr > :nth-child(3))) + .col_tbl_hint {
    display: none;
  }
  .col_stat .val {
    font-size: 26px;
  }
  .col_steps > li {
    padding-left: 54px;
  }
  .col_steps > li::before {
    width: 38px;
    height: 38px;
    font-size: 13px;
  }
  .col_steps > li::after {
    left: 18px;
    top: 44px;
  }
  .col_steps .ttl {
    padding-top: 5px;
    font-size: 15.5px;
  }
  .col_steps .who {
    margin-left: 0;
    margin-top: 2px;
    display: table;
  }
  .col_steps p {
    font-size: 15px;
  }
  /* 年表: 左に縦線、日付は見出しの上へ */
  .col_timeline > li {
    grid-template-columns: 1fr;
    padding: 0 0 26px 28px;
  }
  .col_timeline > li::before {
    left: 0;
    top: 6px;
  }
  .col_timeline > li::after {
    left: 5px;
    top: 16px;
  }
  .col_timeline .when {
    text-align: left;
    padding-top: 0;
  }
  .col_timeline .when small {
    display: inline;
    margin-left: 8px;
  }
  .col_timeline .what {
    padding: 4px 0 0;
  }
  .col_timeline .what p {
    font-size: 15px;
  }
  .col_card {
    padding: 18px;
  }
  .col_check {
    padding: 12px 16px;
  }
  .col_check li {
    font-size: 15px;
  }
  .col_judge .q {
    padding: 14px 16px;
    font-size: 15px;
  }
  .col_faq {
    margin-top: 56px;
  }
  .col_faq summary {
    grid-template-columns: 26px 1fr 18px;
    font-size: 15.5px;
  }
  .col_faq .a {
    grid-template-columns: 26px 1fr;
    padding-right: 0;
    font-size: 15px;
  }
  .col_cta {
    margin-top: 52px;
    padding: 30px 22px;
  }
  .col_cta h2,
  .col_cta .ttl {
    font-size: 19px;
  }
  .col_cta_btns a {
    width: 100%;
    justify-content: center;
  }
  .col_related,
  .col_index {
    padding-bottom: 60px;
  }
  .col_related_head h2 {
    font-size: 26px;
  }
  .col_list {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  .col_list .col_item.is_feature a {
    display: flex;
  }
  .col_list .col_item.is_feature .thumb {
    aspect-ratio: 16 / 9;
    min-height: 0;
  }
  .col_list .col_item.is_feature .body {
    padding: 20px 22px 22px;
  }
  .col_list .col_item.is_feature .ttl {
    font-size: 17px;
  }
}

@media (min-width: 821px) and (max-width: 1100px) {
  .col_list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 380px) {
  .col_main {
    padding: 26px 16px 34px;
  }
  .col_title {
    font-size: 20.5px;
  }
  .col_body h2 {
    font-size: 18px;
  }
  .col_stats {
    grid-template-columns: 1fr 1fr;
  }
}

@media print {
  .header,
  .sp_nav_btn,
  .sp_nav,
  .bg_motion,
  .loading_wrap,
  .col_side,
  .col_toc_inline,
  .col_cta,
  .col_related,
  .footer_contact,
  .footer {
    display: none !important;
  }
  .page_body {
    opacity: 1 !important;
  }
  .col_main {
    box-shadow: none;
    padding: 0;
  }
}