@charset "utf-8";
/* ============================================================
   bizon「AIを悪用したサイバー攻撃」記事 専用スタイル
   https://www.ntt.com/etc/designs/nttcom/hq/jp/bizon/ai-cyberattack/css/style.css
   ------------------------------------------------------------
   設計方針（既存記事の共通コンポーネントにならう）：
   - 見出し(title-c2 等)・パンくず・ヘッダー/フッターは bizon 共通CSS に従う。
   - 記事固有コンポーネント（比較表・FAQ・参考リンク・時間差図）のみを集約。
   - 記事誘導カードは bizon 共通クラス banner-column を使用（余白のみ本CSSで調整）。
   - クラス接頭辞：ac- で名前空間を分離。
   - 配色：navy #001F4E / red #CC0033 / gray #3C4043（共通トーン）。
   ------------------------------------------------------------
   0-1. 共通パーツの微調整
   0-2. 記事誘導カードの余白調整
   1.   比較表（ac-tbl）
   2.   FAQアコーディオン（ac-faq）
   0.   記事タイトル（h1）の調整
   3.   参考リンクボックス（ac-ref-box）
   4.   要点ボックス（ac-point）
   5.   図解共通ラッパー（ac-figwrap）
   6.   図解⑦ 攻撃と防御の時間差（ac-gap）
   7.   図解① 全貌マップ（ac-route）
   8.   図解② AI時代のサイバー攻撃に備える4つの対策（ac-l）
   9.   図解⑥ 自社点検チェックリスト（ac-check）
   10.  図解④ 脅威手口×ソリューション対応マトリクス（ac-matrix）
   11.  図解⑤ 年表タイムライン（ac-tl）
   12.  スマートフォン最適化
   ============================================================ */

/* ============================================================
   0. 記事タイトル（h1）の調整
   ------------------------------------------------------------
   共通CSSがh1に固定値で指定した line-height を <small> がそのまま
   引き継ぐため、文字サイズを落としても行間だけが大きいまま残る。
   small 側に行間を指定して打ち消す。
   ============================================================ */
h1 small.ac-sub,
small.ac-sub,
.ac-sub {
	line-height: 1.55 !important;
	display: inline-block;
	margin-top: 2px;
}

/* 保険：クラスが付かない環境でも効くようにする */
#ict-sect .article-common h1 small,
#ict-sect h1 small,
.article-title small {
	line-height: 1.55 !important;
}

.ac-scope { font-family: "Meiryo", "メイリオ", sans-serif; color: #222; }

/* 番号付き手順リスト（番号と本文のインデントを揃える） */
.article-wrap ul.ac-numlist { list-style: none !important; padding-left: 0 !important; }
.article-wrap ul.ac-numlist li {
	list-style: none !important;
	display: flex;
	align-items: flex-start;
	gap: 0;
	padding-left: 0 !important;
	margin-bottom: 6px;
}
.article-wrap ul.ac-numlist li::before,
.article-wrap ul.ac-numlist li::marker { content: none !important; display: none !important; }
.ac-num { flex: 0 0 1.8em; font-weight: bold; color: #333; }
.ac-num-body { flex: 1 1 auto; min-width: 0; }

/* 丸数字で始まる項目はブラウザ標準の「・」を消す */
.article-wrap ul.ac-nolist { list-style: none !important; padding-left: 0 !important; }
.article-wrap ul.ac-nolist li { list-style: none !important; padding-left: 0 !important; }
.article-wrap ul.ac-nolist li::before,
.article-wrap ul.ac-nolist li::marker { content: none !important; display: none !important; }
.ac-scope * { box-sizing: border-box; }

/* ============================================================
   0-1. 共通パーツの微調整（記事内CTA・ボタン）
   ============================================================ */
.related-useful-materials .contents-area figure img { width: 100%; }
.related-useful-materials .contents-area .description .title { margin-bottom: 0; }
.article-contents .button-area .rounded-button:hover { color: #fff; }


/* ============================================================
   0-2. 記事誘導カード（共通クラス banner-column）の余白調整
   ------------------------------------------------------------
   共通CSSの既定padding（col2）のままだとテキスト側の上下余白が
   広がり、画像側との高さバランスが崩れる。他記事と
   同じ指定に揃える。セレクタも同記事に合わせて詳細度を確保。
   ============================================================ */
#ict-sect .article-common .article-contents .banner-column .col2.banner-column-text {
	padding: 10px 20px;
}
#ict-sect .article-common .article-contents .banner-column .col2.banner-column-image {
	padding: 0;
}


/* ============================================================
   1. 比較表（ac-tbl）
   ============================================================ */
.ac-tbl-wrap { margin: 0 0 8px; font-family: "Meiryo", "メイリオ", sans-serif; }
.ac-tbl-wrap .table-t1-frame { margin-bottom: 0 !important; }
.ac-tbl-title {
	font-size: 18px !important;
	font-weight: bold !important;
	text-align: center !important;
	margin: 0 0 18px !important;
	color: #333 !important;
	line-height: 1.5 !important;
}
.ac-tbl {
	width: 100% !important;
	border-collapse: collapse !important;
	font-size: 14px !important;
	line-height: 1.6 !important;
	margin-bottom: 0 !important;
}
.ac-tbl th,
.ac-tbl td {
	padding: 10px 12px !important;
	border: 1px solid #e0e0e0 !important;
	vertical-align: middle !important;
	text-align: left !important;
}
.ac-tbl thead th {
	background: #333 !important;
	color: #fff !important;
	font-weight: bold !important;
	font-size: 13px !important;
	text-align: center !important;
	letter-spacing: 0.02em !important;
}
.ac-tbl tbody th {
	background: #fff5f5 !important;
	font-weight: bold !important;
	color: #333 !important;
	text-align: left !important;
}
.ac-tbl thead th span,
.ac-tbl tbody th span { font-weight: normal !important; font-size: 12px !important; }
.ac-tbl tbody td { color: #444 !important; }
.ac-tbl tbody td:first-of-type { font-weight: normal !important; }

/* セル内テキスト（左寄せ／中央寄せ） */
.ac-td { display: block !important; text-align: left !important; }
.ac-td span { font-size: 12px !important; color: #666 !important; }
.ac-td-c { display: block !important; text-align: center !important; }

/* 推奨行・推奨セル */
.ac-tbl tbody tr.ac-rec { background-color: #fff8e1 !important; }
.ac-td-rec { color: #c8102e !important; font-weight: bold !important; }

/* 提供可否マーク */
.ac-mark {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	min-height: 48px !important;
	text-align: center !important;
	font-weight: bold !important;
}
.ac-tbl td.ac-mark-cell { padding: 0 !important; min-width: 70px !important; }
.ac-tbl thead th.ac-col-mark { min-width: 70px !important; }
.ac-mark-sub {
	font-size: 11px !important;
	font-weight: normal !important;
	line-height: 1.3 !important;
	margin-top: 3px !important;
	color: #555 !important;
}
/* 主要AI比較表：評価項目列を広めに取り、3サービスの列幅を均等にする */
.ac-tbl-ai th:first-child,
.ac-tbl-ai td:first-child { width: 19% !important; }
.ac-tbl-ai thead th:not(:first-child) { width: 27% !important; }

/* 対策の比較表（is-compare）：「強化する運用」列に視線を集め、要点＋補足の2段で読ませる */
.ac-tbl.is-compare thead th { background: #555 !important; font-size: 12.5px !important; }
.ac-tbl.is-compare thead th.is-key { background: #001f4e !important; }
.ac-tbl.is-compare tbody th { background: #fff !important; font-size: 13px !important; color: #333 !important; }
.ac-tbl.is-compare tbody td { vertical-align: top !important; padding: 10px 12px !important; }
.ac-tbl.is-compare tbody td:nth-child(3) { background: #f4f7fb !important; }
.ac-tbl.is-compare .ac-cmp-key { display: block; font-size: 13.5px; color: #222; line-height: 1.5; margin-bottom: 3px; }
.ac-tbl.is-compare .ac-cmp-sub { display: block; font-size: 12px; color: #555; line-height: 1.55; }
.ac-tbl.is-compare .ac-cmp-ai {
	display: block;
	margin-top: 6px;
	padding-top: 5px;
	border-top: 1px dashed #c9d3e2;
	font-size: 11px;
	color: #333;
	line-height: 1.5;
}
.ac-tbl.is-compare .ac-cmp-ai span {
	display: inline-block;
	font-size: 9px;
	font-weight: bold;
	color: #cc0033;
	border: 1px solid #cc0033;
	border-radius: 2px;
	padding: 0 4px;
	margin-right: 5px;
	line-height: 1.5;
	vertical-align: middle;
}
.ac-tbl.is-compare .ac-cmp-why {
	display: block;
	margin-top: 6px;
	padding-top: 5px;
	border-top: 1px dashed #ddd;
	font-size: 11.5px;
	color: #555;
	line-height: 1.55;
}
.ac-tbl.is-compare .ac-cmp-why span {
	display: inline-block;
	font-size: 9px;
	font-weight: bold;
	color: #666;
	border: 1px solid #999;
	border-radius: 2px;
	padding: 0 4px;
	margin-right: 5px;
	line-height: 1.5;
	vertical-align: middle;
}

@media screen and (max-width: 767px) {
	/* 観点ごとの縦カードに切り替える（横スクロールさせない） */
	.ac-tbl-wrap .table-t1-frame { overflow: visible !important; }
	.ac-tbl.is-compare colgroup, .ac-tbl.is-compare thead { display: none; }
	.ac-tbl.is-compare, .ac-tbl.is-compare tbody, .ac-tbl.is-compare tr, .ac-tbl.is-compare th, .ac-tbl.is-compare td { display: block; width: 100% !important; box-sizing: border-box; }
	.ac-tbl.is-compare tr { border: 1px solid #ddd; border-radius: 6px; margin-bottom: 12px; overflow: hidden; }
	.ac-tbl.is-compare tbody th { background: #f2f2f2 !important; border: 0 !important; padding: 8px 12px !important; }
	.ac-tbl.is-compare tbody td { border: 0 !important; border-top: 1px solid #eee !important; }
	.ac-tbl.is-compare tbody td::before {
		content: attr(data-label);
		display: block;
		font-size: 10px;
		font-weight: bold;
		color: #888;
		margin-bottom: 3px;
	}
	.ac-tbl.is-compare tbody td:nth-child(3)::before { color: #001f4e; }
}

.ac-tbl-note {
	font-size: 13px !important;
	color: #555 !important;
	line-height: 1.7 !important;
	margin: 8px 0 1.4em !important;
}


/* ============================================================
   2. FAQアコーディオン（ac-faq）
   回答全文は常にHTML内に存在（JSで生成しない＝構造化データと整合）。
   ============================================================ */
.ac-faq { margin: 1.4em 0 !important; font-family: "Meiryo", "メイリオ", sans-serif; color: #333 !important; }
.ac-faq-item {
	border: 1px solid #e1e6ef !important;
	border-radius: 10px !important;
	background: #fff !important;
	overflow: hidden !important;
	margin: 0 0 14px !important;
}
.ac-faq-head {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	background: #eaf0f8 !important;
	padding: 12px 15px !important;
}
.ac-faq-badge {
	flex: 0 0 28px !important;
	width: 28px !important;
	height: 28px !important;
	border-radius: 50% !important;
	background: #001F4E !important;
	color: #fff !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}
.ac-faq-q { flex: 1 1 auto !important; color: #001F4E !important; font-weight: 700 !important; font-size: 15px !important; line-height: 1.55 !important; }
.ac-faq-body { padding: 14px 16px 0 !important; }
.ac-faq-peek { position: relative !important; overflow: hidden !important; max-height: 56px; transition: max-height .35s ease !important; }
.ac-faq-atext { font-size: 14.5px !important; color: #333 !important; line-height: 1.95 !important; margin: 0 !important; }
.ac-faq-atext b { color: #001F4E !important; }
.ac-faq-atext a { color: #0a59b0 !important; text-decoration: underline !important; }
.ac-faq-fade {
	position: absolute !important;
	left: 0 !important; right: 0 !important; bottom: 0 !important;
	height: 34px !important;
	background: linear-gradient(rgba(255,255,255,0), #fff) !important;
	transition: opacity .25s !important;
	pointer-events: none !important;
}
.ac-faq-item.ac-open .ac-faq-fade { opacity: 0 !important; }
.ac-faq-more { text-align: right !important; padding: 6px 16px 13px !important; }
.ac-faq-more-btn {
	background: none !important;
	border: none !important;
	color: #586a8f !important;
	font-size: 13.5px !important;
	cursor: pointer !important;
	font-family: inherit !important;
	padding: 4px 2px !important;
}
.ac-faq-more-btn::after { content: "▼" !important; font-size: 9px !important; margin-left: 6px !important; }
.ac-faq-item.ac-open .ac-faq-more-btn::after { content: "▲" !important; }
.ac-faq-more-btn:hover { text-decoration: underline !important; }


/* ============================================================
   3. 参考リンクボックス（ac-ref-box）
   ------------------------------------------------------------
   箇条書きの「•」が二重に出ないよう、リスト系の指定は
   .article-contents を前置して詳細度を上げている。
   共通CSSの .article-contents ul li 系（詳細度 0-1-2）より
   .article-contents .ac-ref-box li（同 0-2-1）が優先されるため、
   ネイティブのマーカーも共通CSSの ::before も打ち消され、
   本ファイルの ::before だけが描画される。
   ============================================================ */
.ac-ref-box {
	background: #f7f8fa !important;
	border: 1px solid #e4e7ee !important;
	border-radius: 8px !important;
	padding: 14px 22px !important;
	margin: 1.4em 0 !important;
	font-family: "Meiryo", "メイリオ", sans-serif;
}
.ac-ref-box p {
	margin: 0 0 .35em !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	color: #1a2b4a !important;
	line-height: 1.6 !important;
}
.article-contents .ac-ref-box ul,
.ac-ref-box ul {
	margin: 0 !important;
	padding-left: 0 !important;
	list-style: none !important;
	list-style-type: none !important;
	list-style-image: none !important;
	background: none !important;
}
.article-contents .ac-ref-box li,
.ac-ref-box li {
	position: relative !important;
	font-size: 14px !important;
	line-height: 1.7 !important;
	margin: 0 !important;
	padding: 0 0 0 1.1em !important;
	text-indent: 0 !important;
	list-style: none !important;
	list-style-type: none !important;
	list-style-image: none !important;
	background: none !important;
}
.article-contents .ac-ref-box li::marker,
.ac-ref-box li::marker { content: none !important; }
.article-contents .ac-ref-box li + li,
.ac-ref-box li + li { margin-top: .3em !important; }
.article-contents .ac-ref-box li::before,
.ac-ref-box li::before {
	content: "•" !important;
	position: absolute !important;
	left: 0 !important;
	top: 0 !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	background: none !important;
	border: none !important;
	color: #1a2b4a !important;
}
.article-contents .ac-ref-box li::after,
.ac-ref-box li::after { content: none !important; }
.ac-ref-box a { color: #0a59b0 !important; text-decoration: underline !important; }


/* ============================================================
   4. 本記事固有パーツ
   ------------------------------------------------------------
   4-1. ac-gap  … 「攻撃29分 対 分析1〜2時間」の時間差を示すブロック。
                  図版差し替え前でもテキストのみで意味が通る構造にする。
   4-2. ac-point… 章の結論を1〜2文で置く要点ボックス。
   ============================================================ */
.ac-gap {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 28px 0;
}
.ac-gap-col {
	flex: 1 1 260px;
	border: 1px solid #E3E6EA;
	border-radius: 6px;
	padding: 18px 20px;
	background: #fff;
}
.ac-gap-col.is-attack { border-top: 4px solid #CC0033; }
.ac-gap-col.is-defense { border-top: 4px solid #001F4E; }
.ac-gap-label {
	font-size: 1.3rem;
	font-weight: 700;
	letter-spacing: .04em;
	margin-bottom: 8px;
}
.ac-gap-col.is-attack .ac-gap-label { color: #CC0033; }
.ac-gap-col.is-defense .ac-gap-label { color: #001F4E; }
.ac-gap-num {
	font-size: 2.6rem;
	font-weight: 700;
	line-height: 1.2;
	color: #3C4043;
}
.ac-gap-num small { font-size: 1.4rem; font-weight: 400; margin-left: 4px; }
.ac-gap-desc { font-size: 1.3rem; line-height: 1.7; margin-top: 8px; color: #3C4043; }

.ac-point {
	background: #F5F5F5;
	padding: 16px 20px;
	margin: 24px 0;
	border-radius: 4px;
}
.ac-point p { margin: 0; font-weight: 700; line-height: 1.8; }

@media screen and (max-width: 767px) {
	.ac-gap { gap: 10px; }
	.ac-gap-num { font-size: 2.2rem; }
}

/* ============================================================
   5. 図解共通ラッパー（ac-figwrap）
   ------------------------------------------------------------
   既存記事の図解にならい、
   枠 → 見出し → 補足 → 図版本体 → 出典注記 の順で構成する。
   画像は使わず、HTML/CSS で組むことで拡大縮小と読み上げに対応する。
   ============================================================ */
.ac-figwrap {
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	padding: 24px 20px 20px;
	margin: 28px 0 8px;
	background: #fff;
}
/* 枠なし版（横幅を使い切りたい図解用） */
.ac-figwrap.is-plain {
	border: 0;
	border-radius: 0;
	padding: 0;
	background: transparent;
}
.ac-fig-title {
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	margin: 0 0 6px !important;
	color: #333;
}
.ac-fig-sub {
	font-size: 13px;
	color: #777;
	text-align: center;
	margin: 0 0 20px !important;
	line-height: 1.7;
}
/* 長い補足文は左寄せ（センタリングだと行の揃いが崩れて読みにくいため）・行間は詰める */
.ac-fig-sub.is-left { text-align: left; line-height: 1.55; }
/* 注記：claude / ai-work-effect 記事と同じ指定に揃える
   （共通CSSの p の行間に負けないよう !important を付ける） */
.ac-fig-notes,
.ac-tbl-wrap .ac-tbl-note,
.ac-tbl-note {
	font-size: 13px !important;
	color: #555 !important;
	line-height: 1.7 !important;
	margin: 8px 0 1.4em !important;
	text-align: left !important;
}
.ac-fig-notes a,
.ac-tbl-note a {
	color: #0a59b0 !important;
	text-decoration: underline !important;
}

/* ============================================================
   6. 図解⑦：攻撃と防御の時間差（ac-gap）
   ------------------------------------------------------------
   共通の目盛（0〜120分）で攻撃側と防御側を並べ、
   「29分で広がる／1〜2時間かけて気づく」の逆転を1枚で示す。
   バーの幅は個別クラス（ac-gap-w*）で指定し、インラインstyleを使わない。
   ============================================================ */
.ac-gap-scale {
	display: flex;
	justify-content: space-between;
	font-size: 11px;
	color: #999;
	border-bottom: 1px solid #e6e6e6;
	padding: 0 0 4px 132px;
	margin-bottom: 12px;
}
.ac-gap-side {
	font-size: 13px;
	font-weight: bold;
	margin: 16px 0 8px;
	padding-left: 10px;
}
.ac-gap-side.is-attack { border-left: 4px solid #cc0033; color: #cc0033; }
.ac-gap-side.is-defense { border-left: 4px solid #001f4e; color: #001f4e; }
.ac-gap-row {
	display: flex;
	align-items: center;
	margin: 0 0 8px;
	gap: 8px;
}
.ac-gap-label {
	min-width: 124px;
	font-size: 13px;
	color: #444;
	text-align: right;
	flex-shrink: 0;
	line-height: 1.5;
}
.ac-gap-track {
	flex: 1;
	background: #f0f0f0;
	border-radius: 4px;
	height: 26px;
}
.ac-gap-fill {
	height: 100%;
	border-radius: 4px;
	min-width: 4px;
}
.ac-gap-val {
	min-width: 76px;
	font-size: 13px;
	font-weight: bold;
	color: #555;
	white-space: nowrap;
	flex-shrink: 0;
}

/* バー幅（目盛 0〜120分を 100% とする） */
.ac-gap-w120 { width: 100%; background: #001f4e; }
.ac-gap-w48  { width: 40%;  background: #9aa8bd; }
.ac-gap-w29  { width: 24%;  background: #cc0033; }
.ac-gap-w10  { width: 8%;   background: #4a72a8; }
.ac-gap-w027 { width: 2%;   background: #e57a94; }

.ac-gap-callout {
	background: #f5f5f5;
	padding: 14px 18px;
	margin-top: 18px;
	font-size: 14px;
	line-height: 1.9;
	border-radius: 4px;
}
.ac-gap-callout strong { color: #cc0033; }

/* ============================================================
   7. 図解①：全貌マップ（ac-route）
   ------------------------------------------------------------
   ①＝攻撃者から企業へ向かう経路。4つの手口を並列に置き、
   　　複数の工程を自動化する自律型攻撃は横長のバーで表す（工程順は示さない）。
   下段＝企業が使うAIを中央に置き、外から狙われる経路（左）と
   　　　社外のAIへ情報が出ていく経路（右）を対置する。
   番号は付けない（直上の3類型①②③との混同を避ける）。
   ============================================================ */
.ac-route {
	border-radius: 8px;
	padding: 18px 18px 20px;
	margin-bottom: 14px;
}
.ac-route.is-attack {
	background: linear-gradient(90deg, #fffafa 0%, #fff3f6 55%, #fdebef 100%);
	border: 1px solid #f3d3dc;
}
.ac-route.is-target {
	background: linear-gradient(90deg, #f7f9fc 0%, #eef3fa 50%, #e7eef8 100%);
	border: 1px solid #d3ddec;
}
.ac-route.is-leak {
	background: linear-gradient(90deg, #f5f7f8 0%, #edf1f3 50%, #e6ecef 100%);
	border: 1px solid #d0d8de;
}
.ac-route-head {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}
.ac-route-badge {
	font-size: 11px;
	font-weight: bold;
	color: #fff;
	border-radius: 3px;
	padding: 3px 9px;
	letter-spacing: .02em;
	flex-shrink: 0;
}
.ac-route.is-attack .ac-route-badge { background: #cc0033; }
.ac-route.is-target .ac-route-badge { background: #001f4e; }
.ac-route.is-leak .ac-route-badge { background: #4a5b6b; }
.ac-route-title { font-size: 15px; font-weight: bold; color: #333; }

/* 端点（攻撃者・企業・社外のAI） */
.ac-route-end {
	flex: 0 0 60px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	font-size: 12px;
	font-weight: bold;
	color: #333;
	text-align: center;
	line-height: 1.4;
}
.ac-end-ico { width: 38px; height: 38px; }
.ac-route-end.is-wide { flex-basis: 150px; }
.ac-route-note {
	margin: 14px 0 0 !important;
	padding: 10px 0 0 !important;
	border-top: 1px solid #d8dde3;
	font-size: 13px !important;
	line-height: 1.6 !important;
	color: #555 !important;
	text-align: center;
}
.ac-route.is-attack .ac-end-ico { color: #cc0033; }
.ac-route.is-target .ac-end-ico { color: #001f4e; }
.ac-route.is-leak .ac-end-ico { color: #4a5b6b; }
.ac-route.is-leak .ac-threat-ico { color: #4a5b6b; }

/* 上段：経路 */
.ac-route-body { display: flex; align-items: center; gap: 8px; }
.ac-route-body > .ac-arrow { flex: 0 0 22px; }
.ac-route-main {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.ac-threats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}
.ac-threats .ac-threat {
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr);
	column-gap: 12px;
	text-align: left;
	align-items: start;
}
.ac-threats .ac-threat-ico { grid-row: 1 / 3; margin: 2px 0 0; }
.ac-threats .ac-threat-name,
.ac-threats .ac-threat-desc { grid-column: 2; }
.ac-threat {
	background: #fff;
	border: 1px solid #e1e4e8;
	border-radius: 6px;
	padding: 12px 12px 12px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
	min-width: 0;
}
.ac-threat-ico {
	width: 30px;
	height: 30px;
	display: block;
	margin: 0 auto 6px;
	color: #cc0033;
}
.ac-target-flow .ac-threat { text-align: center; }
.ac-route.is-target .ac-threat-ico { color: #001f4e; }
.ac-threat-name {
	font-size: 13.5px;
	font-weight: bold;
	line-height: 1.5 !important;
	margin: 0 0 4px !important;
	color: #333;
}
.ac-threat-desc {
	font-size: 12px;
	line-height: 1.6 !important;
	margin: 0 !important;
	color: #555;
}
.ac-threat-phase { display: none; }

/* 全工程にまたがるバー */
.ac-threat.is-span {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	text-align: left;
}
.ac-threat.is-span .ac-threat-ico { margin: 0; flex-shrink: 0; }
.ac-threat.is-span .ac-threat-name,
.ac-threat.is-span .ac-threat-desc { margin: 0 !important; }
.ac-span-tag {
	font-size: 11px;
	font-weight: bold;
	color: #a9002c;
	background: #fdebef;
	border-radius: 999px;
	padding: 2px 10px;
	white-space: nowrap;
	flex-shrink: 0;
}

/* 下段：企業が使うAIを中心にした経路 */
.ac-target-flow { display: flex; align-items: center; gap: 6px; }
.ac-target-flow .ac-threat { flex: 1 1 0; }
.ac-actions {
	flex: 1 1 0;
	min-width: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}
.ac-actions .ac-threat { text-align: left; }
.ac-ai-core {
	flex: 0 0 150px;
	background: #001f4e;
	color: #fff;
	border-radius: 10px;
	padding: 14px 10px;
	text-align: center;
	box-shadow: 0 6px 16px rgba(0, 31, 78, .15);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}
.ac-core-ico { width: 34px; height: 34px; color: #fff; }
.ac-ai-core-label {
	display: block;
	font-size: 14px;
	font-weight: bold;
	line-height: 1.5;
	letter-spacing: .02em;
}
.ac-ai-core-sub { display: block; font-size: 11px; opacity: .85; line-height: 1.5; }
#ict-sect .article-common .article-contents .ac-ai-core a,
#ict-sect .article-common .article-contents .ac-ai-core a:link,
#ict-sect .article-common .article-contents .ac-ai-core a:visited,
#ict-sect .article-common .article-contents .ac-ai-core a:hover,
.ac-ai-core a {
	color: #fff !important;
	text-decoration: underline !important;
	text-decoration-color: rgba(255, 255, 255, .55) !important;
	text-underline-offset: 2px;
}
.ac-arrow {
	flex: 0 0 22px;
	height: 2px;
	background: #8fa0bb;
	position: relative;
}
.ac-arrow::after {
	content: "";
	position: absolute;
	right: -2px;
	top: -4px;
	border: 5px solid transparent;
	border-left: 7px solid #8fa0bb;
}

/* ============================================================
   8. 図解②：AI時代のサイバー攻撃に備える4つの対策（ac-l）
   ------------------------------------------------------------
   左列＝AIによる攻撃の変化、右列＝企業が見直す対策。
   1行＝1対応で、左から右へ矢印でつなぐ対応表型。
   専門用語（ガバナンス等）は右列の小タグに回し、平易な語を主にする。
   ③だけ「AIで対応」タグと紺の枠で強調する。
   ============================================================ */
.ac-l-head {
	display: grid;
	grid-template-columns: 1fr 26px 1.35fr;
	gap: 8px;
	font-size: 13px;
	font-weight: bold;
	margin-bottom: 10px;
}
.ac-l-head span {
	display: block;
	text-align: center;
	color: #fff;
	border-radius: 4px;
	padding: 7px 10px;
	letter-spacing: .03em;
}
.ac-l-head span:nth-child(1) { background: #cc0033; }
.ac-l-head span:nth-child(2) { background: none; padding: 0; }
.ac-l-head span:nth-child(3) { background: #001f4e; }
.ac-l-row {
	display: grid;
	grid-template-columns: 1fr 26px 1.35fr;
	gap: 8px;
	align-items: stretch;
	margin-bottom: 10px;
}
.ac-l-left {
	background: #fdf2f5;
	border: 1px solid #f3d3dc;
	padding: 12px 14px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	gap: 12px;
}
.ac-l-aico {
	width: 42px;
	height: 42px;
	color: #cc0033;
	flex-shrink: 0;
}
.ac-l-lhead {
	font-size: 14px;
	font-weight: bold;
	color: #8c1d18;
	line-height: 1.5 !important;
	margin: 0 0 3px !important;
}
.ac-l-lsub {
	font-size: 12px;
	color: #7a4a52;
	line-height: 1.6 !important;
	margin: 0 !important;
}
.ac-l-arrow {
	display: block;
	height: 5px;
	background: #b8b8b8;
	position: relative;
	align-self: center;
	border-radius: 3px 0 0 3px;
}
.ac-l-arrow::after {
	content: "";
	position: absolute;
	right: -3px;
	top: -6px;
	border: 8.5px solid transparent;
	border-left: 10px solid #b8b8b8;
}
.ac-l-right {
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 6px;
	padding: 12px 14px;
	display: flex;
	align-items: center;
	gap: 12px;
}
.ac-l-row.is-ai .ac-l-right {
	border-color: #001f4e;
	box-shadow: inset 0 0 0 1px #001f4e;
	background: #f4f7fb;
}
.ac-l-ico {
	width: 42px;
	height: 42px;
	color: #001f4e;
	flex-shrink: 0;
}
.ac-l-text { min-width: 0; }
.ac-l-name {
	font-size: 14px;
	font-weight: bold;
	color: #333;
	line-height: 1.5 !important;
	margin: 0 0 3px !important;
}
.ac-l-no {
	color: #001f4e;
	margin-right: 4px;
}
.ac-l-term {
	display: inline-block;
	font-size: 11px;
	font-weight: normal;
	color: #666;
	background: #f2f2f2;
	border-radius: 2px;
	padding: 0 6px;
	margin-left: 6px;
	line-height: 1.7;
	vertical-align: middle;
	white-space: nowrap;
}
.ac-l-aitag {
	display: inline-block;
	font-size: 10px;
	font-weight: bold;
	color: #fff;
	background: #001f4e;
	border-radius: 2px;
	padding: 0 6px;
	margin-left: 6px;
	line-height: 1.8;
	vertical-align: middle;
	white-space: nowrap;
}
.ac-l-do {
	font-size: 12.5px;
	color: #444;
	line-height: 1.6 !important;
	margin: 0 !important;
	padding-left: 1em;
	text-indent: -1em;
}
.ac-l-do::before { content: "・"; }
.ac-l-means {
	font-size: 12px;
	color: #555;
	line-height: 1.6 !important;
	margin: 6px 0 0 !important;
}
.ac-l-means span,
.ac-l-svc span {
	display: inline-block;
	font-size: 10px;
	font-weight: bold;
	color: #001f4e;
	border: 1px solid #001f4e;
	border-radius: 2px;
	padding: 0 5px;
	margin-right: 6px;
	line-height: 1.6;
	vertical-align: middle;
	white-space: nowrap;
}
.ac-l-svc {
	font-size: 10.5px;
	line-height: 1.5 !important;
	margin: 3px 0 0 !important;
	padding-top: 4px;
	border-top: 1px dashed #dde3ea;
	/* 字間を詰める：Windowsでは字幅の狭い Meiryo UI を優先し、
	   Macでは palt（プロポーショナル詰め）と字間で同等の効果を出す */
	font-family: "Meiryo UI", "Yu Gothic UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
	font-feature-settings: "palt" 1;
	letter-spacing: -0.02em;
}
.ac-l-svc span { margin-right: 4px; }
.ac-l-svc span { color: #cc0033; border-color: #cc0033; font-size: 9px; }
.ac-l-svc a { color: #0a59b0 !important; text-decoration: underline !important; }

/* ============================================================
   9. 図解⑥：自社点検チェックリスト（ac-check）
   ------------------------------------------------------------
   customer-harassment-policy の kh-checklist にならう。
   クリックで達成状況をトグルし、進捗バーと状況メッセージを更新する
   （JS：acCheckToggle）。タグは元になった公的資料を示す。
   ============================================================ */
.ac-checklist-wrap {
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	padding: 24px 20px 20px;
	margin: 28px 0 8px;
	background: #fafafa;
}
.ac-check-title {
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	margin: 0 0 8px !important;
	color: #cc0033;
}
.ac-check-section {
	font-size: 15px;
	font-weight: bold;
	color: #333;
	margin: 16px 0 4px;
	padding-left: 10px;
	border-left: 3px solid #cc0033;
	display: block;
}
.article-wrap .ac-check-list {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
.article-wrap .ac-check-list li {
	list-style: none !important;
	font-size: 15px;
	color: #333;
	padding: 7px 0;
	border-bottom: 1px solid #e8e8e8;
	position: relative;
	line-height: 1.5;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
	margin: 0 !important;
}
.article-wrap .ac-check-list li::before,
.article-wrap .ac-check-list li::marker { display: none !important; content: none !important; }
.article-wrap .ac-check-list li:last-child { border-bottom: none; }
.article-wrap .ac-check-list li:hover { background: rgba(204, 0, 51, 0.02); }
.article-wrap .ac-check-list li:active { background: rgba(204, 0, 51, 0.05); }
.ac-check-inner { display: flex; align-items: flex-start; gap: 8px; }
.ac-check-box {
	display: inline-block;
	min-width: 20px;
	width: 20px;
	height: 20px;
	border: 1.5px solid #999;
	border-radius: 50%;
	box-sizing: border-box;
	transition: all .2s ease;
	background: #fff;
	margin-top: 2px;
	flex-shrink: 0;
	position: relative;
}
.ac-check-list li.checked .ac-check-box { background: #cc0033; border-color: #cc0033; }
.ac-check-list li.checked .ac-check-box::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 2px;
	width: 6px;
	height: 10px;
	border: 2px solid #fff;
	border-top: none;
	border-left: none;
	transform: rotate(45deg);
}
.ac-check-text { flex: 1; }
.ac-check-main { display: block; }
.ac-check-sub { display: block; font-size: 13px; color: #777; margin-top: 2px; }
.ac-check-tag {
	display: inline-block;
	font-size: 11px;
	font-weight: bold;
	border-radius: 3px;
	padding: 1px 7px;
	margin-left: 8px;
	vertical-align: middle;
	white-space: nowrap;
	line-height: 1.6;
}
.ac-check-tag.fsa { background: #e8eef7; color: #1f3864; }
.ac-check-tag.sme { background: #fef6e4; color: #9a6700; }
.ac-progress-wrap {
	margin-top: 16px;
	padding: 14px 18px;
	border-radius: 6px;
	background: #fff;
	border: 1.5px solid #cc0033;
}
.ac-progress-row {
	display: flex;
	justify-content: space-between;
	font-size: 15px;
	font-weight: bold;
	color: #cc0033;
	margin-bottom: 8px;
}
.ac-bar-bg { background: #f0d0d5; border-radius: 99px; height: 10px; overflow: hidden; }
.ac-bar-fill { height: 100%; border-radius: 99px; background: #cc0033; width: 0%; transition: width .4s ease; }
.ac-status { font-size: 14px; color: #555; margin-top: 8px; min-height: 18px; }

/* ============================================================
   10. 図解④：脅威手口×ソリューション対応マトリクス（ac-matrix）
   ============================================================ */
.ac-matrix { width: 100%; border-collapse: collapse; font-size: 13px; background: #fff; }
.ac-matrix th,
.ac-matrix td { border: 1px solid #e0e0e0; padding: 10px 8px; line-height: 1.6; }
.ac-matrix thead th {
	background: #001f4e;
	color: #fff;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
	font-size: 12px;
}
#ict-sect .article-common .article-contents .ac-matrix thead th a,
.ac-matrix thead th a {
	color: #fff !important;
	text-decoration: underline !important;
	text-decoration-color: rgba(255, 255, 255, .55) !important;
	text-underline-offset: 2px;
}
.ac-matrix tbody th { background: #f7f8fa; text-align: left; font-weight: normal; vertical-align: middle; }
.ac-matrix td { text-align: center; }
.ac-matrix .ac-mk { color: #cc0033; font-weight: bold; font-size: 16px; }
.ac-matrix .ac-mk-sub { color: #9aa8bd; font-size: 15px; }
.ac-tbl-note .ac-mk { color: #cc0033; font-weight: bold; }
.ac-tbl-note .ac-mk-sub { color: #9aa8bd; }

/* ============================================================
   11. 図解⑤：年表タイムライン（ac-tl）
   ------------------------------------------------------------
   copilot 記事の cp-timeline にならう構成：
   - 縦線は ac-tl 側の ::before で1本だけ引く（行ごとに分割しない）。
   - 日付欄は固定幅にし、年と月日を <br> で折り返す。
     可変幅にするとドットの位置が行ごとにずれるため。
   - ドットは absolute で縦線上に固定する。
   ============================================================ */
.ac-tl { position: relative; padding: 14px 0; }
.ac-tl::before {
	content: "";
	position: absolute;
	left: 106px;
	top: 22px;
	bottom: 22px;
	width: 3px;
	background: linear-gradient(to bottom, #dde5ef, #9aa8bd, #cc0033);
}
.ac-tl-item {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	margin-bottom: 22px;
	position: relative;
}
.ac-tl-item:last-child { margin-bottom: 0; }
.ac-tl-date {
	flex-shrink: 0;
	width: 94px;
	text-align: right;
	font-size: 13px;
	font-weight: bold;
	color: #1f3864;
	line-height: 1.5;
	padding-top: 4px;
}
.ac-tl-dot {
	position: absolute;
	left: 100px;
	top: 7px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #9aa8bd;
	border: 3px solid #fff;
	box-shadow: 0 0 0 2px #9aa8bd;
	z-index: 1;
}
.ac-tl-item.is-key .ac-tl-dot {
	background: #cc0033;
	box-shadow: 0 0 0 2px #cc0033;
	width: 18px;
	height: 18px;
	left: 98px;
	top: 5px;
}
.ac-tl-content {
	margin-left: 42px;
	background: #fff;
	border: 1px solid #e5e9f0;
	border-radius: 8px;
	padding: 12px 16px;
	flex: 1;
}
.ac-tl-item.is-key .ac-tl-content { border-color: #cc0033; background: #fdf2f5; }
.ac-tl-main { font-size: 14px; font-weight: bold; color: #1f3864; line-height: 1.6; margin-bottom: 4px; }
.ac-tl-item.is-key .ac-tl-main { color: #cc0033; }
.ac-tl-sub { font-size: 13px; color: #555; line-height: 1.7; }

/* ============================================================
   13. ホワイトペーパー導線（ac-wp）
   ------------------------------------------------------------
   financial-management 記事の記事内導線にならう。
   枠全体をリンクにし、左に見出し・右に資料画像・下に赤いボタン。
   ============================================================ */
.article-contents a.ac-wp,
.ac-wp {
	display: block;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	background: #fff;
	text-decoration: none !important;
	color: #333 !important;
	margin: 28px 0;
	overflow: hidden;
	transition: box-shadow .3s ease, transform .3s ease;
}
.ac-wp:hover { box-shadow: 0 6px 16px rgba(0, 0, 0, .12); transform: translateY(-2px); }
.ac-wp-body {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	padding: 16px 16px 8px;
}
.ac-wp-text { flex: 1 1 300px; text-align: center; padding: 4px 8px; }
.ac-wp-img { flex: 0 0 350px; text-align: center; padding: 4px 8px; }
.ac-wp-img img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.ac-wp-tag { color: #cc0033 !important; font-size: 17px !important; font-weight: bold; margin: 0 0 6px !important; line-height: 1.4 !important; letter-spacing: .5px; }
.ac-wp-lead { font-size: 18px !important; color: #333 !important; margin: 0 0 4px !important; line-height: 1.4 !important; }
.ac-wp-title { font-size: 32px !important; font-weight: 900; color: #1a1a1a !important; margin: 0 0 6px !important; line-height: 1.3 !important; letter-spacing: 1px; }
.ac-wp-desc { font-size: 15px !important; color: #555 !important; margin: 0 !important; line-height: 1.5 !important; }
.ac-wp-desc span { background: linear-gradient(transparent 40%, rgba(255, 245, 0, .55) 40%); padding: 0 2px; }
.ac-wp-btnarea { text-align: center; padding: 4px 16px 20px; }
.ac-wp-btn {
	display: inline-block;
	background: #cc0033;
	color: #fff !important;
	padding: 12px 40px;
	border-radius: 30px;
	font-weight: bold;
	font-size: 14px;
	transition: all .2s ease-in-out;
}
.ac-wp:hover .ac-wp-btn { background: #990024; transform: scale(1.04); }

/* ============================================================
   12. スマートフォン最適化
   ============================================================ */
@media screen and (max-width: 767px) {
	.ac-figwrap { padding: 18px 12px 14px; }
	.ac-fig-title { font-size: 16px; }

	.ac-gap-scale { padding-left: 0; }
	.ac-gap-row { flex-wrap: wrap; gap: 4px; }
	.ac-gap-label { min-width: 100%; text-align: left; font-weight: bold; }
	.ac-gap-track { flex: 1 1 auto; height: 22px; }
	.ac-gap-val { min-width: 70px; }

	.ac-route { padding: 14px 12px 16px; }
	.ac-route-body { flex-direction: column; gap: 10px; }
	.ac-route-end { flex-direction: row; justify-content: flex-start; gap: 8px; }
	.ac-route-end br { display: none; }
	.ac-route-body > .ac-arrow { flex: 0 0 18px; width: 2px; height: 18px; align-self: center; }
	.ac-threats { grid-template-columns: 1fr; }
	.ac-actions { grid-template-columns: 1fr; flex: none; }
	.ac-ai-core { flex: none; flex-direction: row; justify-content: center; gap: 10px; }
	.ac-route-end.is-wide { flex-basis: auto; }
	.ac-route-end.is-wide br { display: inline; }
	.ac-route-note { text-align: left; }
	.ac-threat.is-span { flex-wrap: wrap; }
	.ac-target-flow { flex-direction: column; align-items: stretch; }
	.ac-wp-title { font-size: 22px !important; }
	.ac-wp-img { flex: 1 1 100%; }
	.ac-target-flow .ac-threat { flex: none; }
	.ac-ai-core { flex: none; }
	.ac-arrow {
		flex: 0 0 22px;
		width: 2px;
		height: 22px;
		align-self: center;
	}
	.ac-arrow::after {
		right: auto;
		top: auto;
		left: -4px;
		bottom: -2px;
		border: 5px solid transparent;
		border-top: 7px solid #8fa0bb;
	}

	.ac-l-head { display: none; }
	.ac-l-row { grid-template-columns: 1fr; gap: 4px; margin-bottom: 14px; }
	.ac-l-left { padding: 12px; }
	.ac-l-aico, .ac-l-ico { width: 34px; height: 34px; }
	.ac-l-arrow { width: 5px; height: 18px; justify-self: center; border-radius: 3px 3px 0 0; }
	.ac-l-arrow::after { right: auto; top: auto; left: -6px; bottom: -4px; border: 8.5px solid transparent; border-top: 10px solid #b8b8b8; }
	.ac-l-right { align-items: flex-start; }

	.ac-tl::before { left: 7px; }
	.ac-tl-item { gap: 0; padding-left: 28px; margin-bottom: 16px; }
	.ac-tl-dot { left: 1px; top: 6px; }
	.ac-tl-item.is-key .ac-tl-dot { left: -1px; top: 4px; }
	.ac-tl-date {
		width: auto;
		text-align: left;
		padding-top: 0;
		margin-bottom: 4px;
	}
	.ac-tl-date br { display: none; }
	.ac-tl-item { flex-wrap: wrap; }
	.ac-tl-content { margin-left: 0; flex: 1 1 100%; padding: 10px 12px; }

	.ac-matrix { font-size: 12px; }
	.ac-matrix th, .ac-matrix td { padding: 8px 4px; }
}