@charset "utf-8";
/* ============================================================
   bizon 生成AI業務別効果 記事 専用スタイル
   https://www.ntt.com/etc/designs/nttcom/hq/jp/bizon/ai-work-effect/css/style.css
   ------------------------------------------------------------
   設計方針（datacenter-energy-saving / ai-compare 記事にならう）：
   - 見出し(title-c2 等)・パンくず・ヘッダー/フッターは bizon 共通CSSに従う。
   - 記事固有コンポーネントのみを集約。クラス接頭辞：aw-
   - 記事誘導カードは共通クラス banner-column を使用（余白のみ調整）。
   - 配色：navy #001F4E / red #CC0033 / gray #3C4043（共通トーン）。
   - HTML側にstyle属性を書かない方針のため、可変値（棒の長さ）は
     .aw-w1〜.aw-w13 のユーティリティクラスで定義する。
   ------------------------------------------------------------
   1. h1内サブタイトル（aw-sub）
   2. ランキング表（aw-rank）★本記事の主役
   3. 通常表（aw-tbl）… 表②・図①
   4. 図版（aw-figure）… インラインSVG
   5. 注記（aw-note / aw-tbl-note）
   6. スマートフォン
   ============================================================ */

.aw-scope { font-family: "Meiryo", "メイリオ", sans-serif; color: #222; }
.aw-scope * { box-sizing: border-box; }

/* ============================================================
   0. 共通パーツの微調整（記事内CTA）
   ------------------------------------------------------------
   本記事は記事誘導カード（banner-column）を使わず、回遊は
   aw-linkbox、送客は related_useful_materials（CTA×2）で行う。
   banner-column を復活させる場合は、下部のコメント内の指定を戻すこと。
   ============================================================ */
.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; }

/* banner-column を使う場合の余白調整（現在は未使用）
#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. h1内サブタイトル（aw-sub）
   ------------------------------------------------------------
   改行は $title 内の <br class="no-sp"> で行う（既存記事と同じ作法）。
   本CSSが未配置でも、共通CSSだけで正しく改行される状態を保つこと。
   <br class="no-sp"> はSPで消えるため、SP側のみ display:block で
   改行を補う（下部のメディアクエリ）。共通CSSの h1 small 指定に
   負けないよう、セレクタは #ict-sect から書き下ろす。
   ============================================================ */

/* ============================================================
   2. ランキング表（aw-rank）
   ------------------------------------------------------------
   セマンティックには通常の <table>（AI検索・読み上げ対応）。
   見た目は順位バッジ＋横棒でランキングとして読ませる。
   棒の長さは「0〜100％をそのまま」の絶対比率。誇張しない。
   ============================================================ */
.aw-rank-wrap { margin: 0 0 8px !important; font-family: "Meiryo", "メイリオ", sans-serif; }
.aw-rank-wrap .table-t1-frame { margin-bottom: 0 !important; }
.aw-rank-title {
	font-size: 18px !important;
	font-weight: bold !important;
	text-align: center !important;
	margin: 0 0 6px !important;
	color: #333 !important;
	line-height: 1.5 !important;
}
.aw-rank-sub {
	font-size: 13px !important;
	text-align: center !important;
	color: #666 !important;
	margin: 0 0 18px !important;
	line-height: 1.6 !important;
}

.aw-rank {
	width: 100% !important;
	border-collapse: collapse !important;
	font-size: 14px !important;
	line-height: 1.6 !important;
	margin-bottom: 0 !important;
	background: #fff !important;
}
.aw-rank th,
.aw-rank td {
	border: 1px solid #e6eaf2 !important;
	padding: 9px 12px !important;
	vertical-align: middle !important;
	text-align: left !important;
}
.aw-rank thead th {
	background: #001F4E !important;
	color: #fff !important;
	font-weight: bold !important;
	font-size: 13px !important;
	text-align: center !important;
	letter-spacing: 0.02em !important;
	padding: 10px 12px !important;
}
.aw-rank tbody th { background: #fff !important; text-align: center !important; }
.aw-rank th:nth-child(1), .aw-rank td:nth-child(1) { width: 62px !important; }
.aw-rank th:nth-child(2), .aw-rank td:nth-child(2) { width: 31% !important; }

/* --- 順位バッジ ---
   1〜3位は金・銀・銅。白抜き文字が読めるよう、いずれも十分に濃い階調に落とす
   （白文字とのコントラスト比 4.5:1 以上）。4位以下は輪郭スタイルにして、
   「メダル圏」との差が一目で分かるようにする。 */
.aw-badge {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 30px !important;
	height: 30px !important;
	border-radius: 50% !important;
	background: #eef1f6 !important;
	color: #5A6573 !important;
	box-shadow: inset 0 0 0 1px #d3dae5 !important;
	font-size: 14px !important;
	font-weight: bold !important;
	line-height: 1 !important;
	font-family: Arial, "Meiryo", sans-serif !important;
}
.aw-badge-1,
.aw-badge-2,
.aw-badge-3 {
	color: #fff !important;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3) !important;
}
/* 金 */
.aw-badge-1 {
	background: #8A6A00 !important;
	background: linear-gradient(140deg, #B08A12 0%, #7E6100 75%) !important;
	width: 34px !important;
	height: 34px !important;
	font-size: 16px !important;
}
/* 銀 */
.aw-badge-2 {
	background: #626A76 !important;
	background: linear-gradient(140deg, #8A939F 0%, #5E6672 75%) !important;
	width: 32px !important;
	height: 32px !important;
}
/* 銅 */
.aw-badge-3 {
	background: #7F4A1D !important;
	background: linear-gradient(140deg, #A9662F 0%, #7A4519 75%) !important;
	width: 32px !important;
	height: 32px !important;
}

/* --- 業務名 --- */
.aw-rank-name { color: #333 !important; }
.aw-rank tr.aw-rank-top .aw-rank-name { font-weight: bold !important; color: #001F4E !important; }
.aw-rank tr.aw-rank-top td,
.aw-rank tr.aw-rank-top th { background: #fff7f8 !important; }

/* --- 棒＋数値 --- */
.aw-rank-data { white-space: nowrap !important; }
.aw-rank-track {
	display: inline-block !important;
	width: calc(100% - 66px) !important;
	height: 20px !important;
	background: #eef1f6 !important;
	border-radius: 3px !important;
	vertical-align: middle !important;
	overflow: hidden !important;
}
.aw-rank-fill {
	display: block !important;
	height: 100% !important;
	background: #4a6da8 !important;
	border-radius: 3px !important;
}
.aw-rank tr.aw-rank-top .aw-rank-fill { background: #CC0033 !important; }
.aw-rank tr.aw-rank-last .aw-rank-fill { background: #9aa8bf !important; }
.aw-rank-val {
	display: inline-block !important;
	width: 60px !important;
	margin-left: 6px !important;
	text-align: right !important;
	font-size: 14px !important;
	font-weight: bold !important;
	color: #001F4E !important;
	vertical-align: middle !important;
	font-family: Arial, "Meiryo", sans-serif !important;
}
.aw-rank tr.aw-rank-top .aw-rank-val { color: #CC0033 !important; font-size: 15px !important; }

/* --- 棒の長さ（＝実数値の％。加工・誇張はしない） --- */
.aw-w1  { width: 72.3% !important; }
.aw-w2  { width: 42.7% !important; }
.aw-w3  { width: 39.8% !important; }
.aw-w4  { width: 39.1% !important; }
.aw-w5  { width: 37.5% !important; }
.aw-w6  { width: 36.6% !important; }
.aw-w7  { width: 33.8% !important; }
.aw-w8  { width: 29.7% !important; }
.aw-w9  { width: 28.8% !important; }
.aw-w10 { width: 26.3% !important; }
.aw-w11 { width: 25.9% !important; }
.aw-w12 { width: 23.5% !important; }
.aw-w13 { width: 20.1% !important; }

/* ============================================================
   3. 通常表（aw-tbl）… 表②（帝国データバンク）・図①（日米対比）
   ------------------------------------------------------------
   ランキング（aw-rank）と誤読されないよう、意図的に別デザインにする。
   ============================================================ */
.aw-tbl-wrap { margin: 0 0 8px !important; font-family: "Meiryo", "メイリオ", sans-serif; }
.aw-tbl-wrap .table-t1-frame { margin-bottom: 0 !important; }
.aw-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;
}
.aw-tbl {
	width: 100% !important;
	border-collapse: collapse !important;
	font-size: 14px !important;
	line-height: 1.6 !important;
	margin-bottom: 0 !important;
}
.aw-tbl th,
.aw-tbl td {
	padding: 10px 12px !important;
	border: 1px solid #e0e0e0 !important;
	vertical-align: middle !important;
	text-align: left !important;
}
.aw-tbl thead th {
	background: #3C4043 !important;
	color: #fff !important;
	font-weight: bold !important;
	font-size: 13px !important;
	text-align: center !important;
	letter-spacing: 0.02em !important;
}
.aw-tbl tbody th {
	font-weight: bold !important;
	color: #333 !important;
	text-align: left !important;
}
.aw-tbl tbody td { color: #444 !important; text-align: right !important; font-family: Arial, "Meiryo", sans-serif !important; }

/* 縞は「行単位」で揃える。列ごとに色を変えない（見出し列も同じ行の色に従う） */
.aw-tbl tbody tr:nth-child(odd) th,
.aw-tbl tbody tr:nth-child(odd) td { background-color: #ffffff !important; }
.aw-tbl tbody tr:nth-child(even) th,
.aw-tbl tbody tr:nth-child(even) td { background-color: #f5f6f8 !important; }

/* 図①：日本列だけ、同じ行リズムのまま青系にして「注目列」であることを示す
   （優劣の含意を持たせないため赤は使わない） */
.aw-tbl-cmp thead th:nth-child(2) { background: #001F4E !important; }
.aw-tbl-cmp td.aw-jp { color: #001F4E !important; font-weight: bold !important; }
.aw-tbl-cmp tbody tr:nth-child(odd) td.aw-jp { background-color: #eaf1fa !important; }
.aw-tbl-cmp tbody tr:nth-child(even) td.aw-jp { background-color: #e1ebf7 !important; }

/* ============================================================
   4. 図版（aw-figure）… インラインSVG
   ============================================================ */
.aw-figure { margin: 1.6em 0 0.4em !important; }
.aw-figure svg { width: 100% !important; height: auto !important; display: block !important; }

/* ============================================================
   4-2. 本文中の注記番号（aw-sup）
   ------------------------------------------------------------
   複数の出典を1つの注記ブロックにまとめる場合に、本文側で
   ※1／※2 と対応づける。単一出典の場合は使わない。
   ============================================================ */
.aw-sup {
	font-size: 0.7em !important;
	vertical-align: super !important;
	line-height: 0 !important;
	color: #0a59b0 !important;
	font-weight: normal !important;
	margin: 0 1px !important;
}

/* ============================================================
   4-3. 記事リンクエリア（aw-linkbox）
   ------------------------------------------------------------
   本文の流れを止めて関連記事へ送る枠。本文中のインラインリンクより
   クリックされやすく、回遊の主導線として使う。
   ============================================================ */
.aw-linkbox {
	background: #f5f7fa !important;
	border-radius: 4px !important;
	padding: 18px 22px !important;
	margin: 1.6em 0 !important;
	font-family: "Meiryo", "メイリオ", sans-serif;
}
.aw-linkbox-lead {
	font-size: 14.5px !important;
	font-weight: bold !important;
	color: #333 !important;
	line-height: 1.7 !important;
	margin: 0 0 10px !important;
}
.article-contents .aw-linkbox-list,
.aw-linkbox-list {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	background: none !important;
}
.article-contents .aw-linkbox-list li,
.aw-linkbox-list li {
	position: relative !important;
	list-style: none !important;
	padding: 0 0 0 18px !important;
	margin: 0 0 6px !important;
	background: none !important;
	text-indent: 0 !important;
	font-size: 14.5px !important;
	line-height: 1.8 !important;
}
.article-contents .aw-linkbox-list li:last-child,
.aw-linkbox-list li:last-child { margin-bottom: 0 !important; }
.article-contents .aw-linkbox-list li::after { content: none !important; }
.article-contents .aw-linkbox-list li::before,
.aw-linkbox-list li::before {
	content: "" !important;
	position: absolute !important;
	left: 3px !important;
	top: 11px !important;
	width: 6px !important;
	height: 6px !important;
	border-radius: 50% !important;
	background: #3C4043 !important;
}
.aw-linkbox-list a {
	color: #0a59b0 !important;
	text-decoration: underline !important;
}
.aw-linkbox-list a:hover { text-decoration: none !important; }

/* ============================================================
   5. 表の作成注記・本文中の出典注記（行間・字送りを共通化）
   ============================================================ */
.aw-tbl-note,
.aw-note {
	font-size: 13px !important;
	color: #555 !important;
	line-height: 1.7 !important;
	margin: 8px 0 1.4em !important;
}
.aw-tbl-note a,
.aw-note a {
	color: #0a59b0 !important;
	text-decoration: underline !important;
}

/* ============================================================
   6. スマートフォン
   ============================================================ */
@media screen and (max-width: 767px) {
	/* SPでは <br class="no-sp"> が効かないため、ここで改行させる */
	#ict-sect .article-common h1 .aw-sub,
	#ict-sect .article-common h1 small.aw-sub {
		display: block !important;
		line-height: 1.6 !important;
		margin-top: 8px !important;
	}

	.aw-rank { font-size: 13px !important; }
	.aw-rank th, .aw-rank td { padding: 7px 6px !important; }
	.aw-rank thead th { font-size: 12px !important; }
	.aw-rank th:nth-child(1), .aw-rank td:nth-child(1) { width: 46px !important; }
	.aw-rank thead th:nth-child(1) { white-space: nowrap !important; padding-left: 3px !important; padding-right: 3px !important; }
	.aw-rank th:nth-child(2), .aw-rank td:nth-child(2) { width: 40% !important; }
	.aw-badge { width: 26px !important; height: 26px !important; font-size: 13px !important; }
	.aw-badge-1 { width: 29px !important; height: 29px !important; font-size: 14px !important; }
	.aw-badge-2, .aw-badge-3 { width: 27px !important; height: 27px !important; }
	.aw-rank-track { width: calc(100% - 54px) !important; height: 16px !important; }
	.aw-rank-val { width: 50px !important; font-size: 12.5px !important; margin-left: 4px !important; }
	.aw-rank tr.aw-rank-top .aw-rank-val { font-size: 13px !important; }
	.aw-rank-title { font-size: 16px !important; }

	.aw-tbl { font-size: 13px !important; }
	.aw-tbl th, .aw-tbl td { padding: 8px 9px !important; }
	.aw-tbl thead th { font-size: 12px !important; }
	.aw-tbl-title { font-size: 16px !important; }

	.aw-linkbox { padding: 15px 16px !important; }
	.aw-linkbox-lead { font-size: 13.5px !important; }
	.article-contents .aw-linkbox-list li,
	.aw-linkbox-list li { font-size: 13.5px !important; }
}