@charset "utf-8";
/* ============================================================
   bizon データセンター省エネ記事 専用スタイル
   https://www.ntt.com/etc/designs/nttcom/hq/jp/bizon/datacenter-energy-saving/css/style.css
   ------------------------------------------------------------
   設計方針：
   - 見出し(title-c2 等)・パンくず・ヘッダー/フッターは bizon 共通CSS に従う。
   - 記事固有コンポーネント（比較表・用語カード）のみを集約。
   - 記事誘導カードは bizon 共通クラス banner-column を使用（余白のみ本CSSで調整）。
   - クラス接頭辞：dc- で名前空間を分離。
   - 配色：navy #001F4E / red #CC0033 / gray #3C4043（共通トーン）。
   ------------------------------------------------------------
   1. 比較表（dc-tbl）    … 自社の状況別 制度上の扱い
   2. 用語カード（dc-terms）
   3. 判定フロー図（dc-figure）… インラインSVGの表示調整
   ============================================================ */

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

/* ============================================================
   0. 共通パーツの微調整（記事内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; }

#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. 比較表（dc-tbl）
   ============================================================ */
.dc-tbl-wrap { margin: 0 0 8px; font-family: "Meiryo", "メイリオ", sans-serif; }
.dc-tbl-wrap .table-t1-frame { margin-bottom: 0 !important; }
.dc-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;
}
.dc-tbl {
	width: 100% !important;
	border-collapse: collapse !important;
	font-size: 14px !important;
	line-height: 1.6 !important;
	margin-bottom: 0 !important;
}
.dc-tbl th,
.dc-tbl td {
	padding: 10px 12px !important;
	border: 1px solid #e0e0e0 !important;
	vertical-align: middle !important;
	text-align: left !important;
}
.dc-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;
}
.dc-tbl tbody th {
	background: #fff5f5 !important;
	font-weight: bold !important;
	color: #333 !important;
	text-align: left !important;
	white-space: nowrap !important;
}
.dc-tbl thead th span,
.dc-tbl tbody th span { font-weight: normal !important; font-size: 12px !important; }
.dc-tbl tbody td { color: #444 !important; }

/* セル内テキスト */
.dc-td { display: block !important; text-align: left !important; }
.dc-td span { font-size: 12px !important; color: #666 !important; }
.dc-td-c { display: block !important; text-align: center !important; }

/* 列幅：状況／扱い／補足 */
.dc-tbl th:nth-child(1),
.dc-tbl td:nth-child(1) { width: 24% !important; }
.dc-tbl th:nth-child(2),
.dc-tbl td:nth-child(2) { width: 24% !important; }

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

/* ============================================================
   2. 用語カード（dc-terms）
   ------------------------------------------------------------
   ai-compare 記事の「型（キャラクター）」カードにならい、
   ヘッダー帯＋アイコン＋カテゴリラベル＋タグで構成する。
   ============================================================ */
.dc-terms {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 16px !important;
	margin: 1.4em 0 !important;
	font-family: "Meiryo", "メイリオ", sans-serif;
}
.dc-term {
	flex: 1 1 calc(50% - 8px) !important;
	min-width: 260px !important;
	border: 1px solid #e1e6ef !important;
	border-radius: 10px !important;
	overflow: hidden !important;
	background: #fff !important;
	display: flex !important;
	flex-direction: column !important;
}
.dc-term-head {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 10px 14px !important;
	background: #001F4E !important;
}
.dc-term-ico {
	flex: 0 0 30px !important;
	width: 30px !important;
	height: 30px !important;
	border-radius: 8px !important;
	background: rgba(255,255,255,.16) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}
.dc-term-ico svg { width: 17px !important; height: 17px !important; display: block !important; }
.dc-term-cat {
	color: #fff !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: .04em !important;
}
/* カテゴリ別の帯色 */
.dc-c-think .dc-term-head { background: #2f6b4f !important; }
.dc-c-frame .dc-term-head { background: #1f5f78 !important; }
.dc-c-index .dc-term-head { background: #001F4E !important; }
.dc-c-tech  .dc-term-head { background: #6a4a86 !important; }
.dc-c-law    .dc-term-head { background: #8c3a44 !important; }
.dc-c-policy .dc-term-head { background: #8a5a2b !important; }

.dc-term-body { padding: 14px 16px 16px !important; }
.dc-term-name {
	font-size: 17px !important;
	font-weight: 700 !important;
	color: #001F4E !important;
	line-height: 1.5 !important;
	margin: 0 0 4px !important;
}
.dc-term-name a {
	color: #001F4E !important;
	text-decoration: underline !important;
	text-underline-offset: 2px !important;
}
.dc-term-name a:hover { text-decoration: none !important; }
.dc-term-read {
	font-size: 12px !important;
	color: #777 !important;
	margin: 0 0 10px !important;
	line-height: 1.5 !important;
}
.dc-term-tags {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 0 10px !important;
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 6px !important;
	background: none !important;
}
.article-contents .dc-term-tags li,
.dc-term-tags li {
	list-style: none !important;
	padding: 3px 9px !important;
	margin: 0 !important;
	background: #eef2f8 !important;
	border-radius: 12px !important;
	font-size: 11.5px !important;
	color: #33456b !important;
	line-height: 1.5 !important;
	text-indent: 0 !important;
}
.article-contents .dc-term-tags li::before,
.article-contents .dc-term-tags li::after { content: none !important; }
.dc-term-desc {
	font-size: 14px !important;
	line-height: 1.85 !important;
	color: #333 !important;
	margin: 0 !important;
}
.dc-terms-note {
	font-size: 13px !important;
	color: #555 !important;
	line-height: 1.7 !important;
	margin: 4px 0 1.4em !important;
}
.dc-terms-note a { color: #0a59b0 !important; text-decoration: underline !important; }

/* ============================================================
   3. 判定フロー図（dc-figure）
   ============================================================ */
.dc-figure { margin: 1.6em 0 !important; }
.dc-figure svg { width: 100% !important; height: auto !important; display: block !important; }

/* ============================================================
   スマートフォン
   ============================================================ */
@media screen and (max-width: 767px) {
	.dc-tbl { font-size: 13px !important; }
	.dc-tbl th,
	.dc-tbl td { padding: 8px 9px !important; }
	.dc-tbl thead th { font-size: 12px !important; }
	.dc-tbl tbody th { white-space: normal !important; }
	.dc-tbl-title { font-size: 16px !important; }

	.dc-terms { gap: 12px !important; }
	.dc-term { flex: 1 1 100% !important; min-width: 0 !important; }
	.dc-term-name { font-size: 16px !important; }
	.dc-term-desc { font-size: 13.5px !important; }
}