@charset "utf-8";
/* ============================================================
   bizon ChatGPT記事 専用スタイル
   https://www.ntt.com/etc/designs/nttcom/hq/jp/bizon/chat-gpt/css/style.css
   ------------------------------------------------------------
   設計方針（生成AI関連記事の共通設計にならう）：
   - 見出し(title-c2 等)・パンくず・ヘッダー/フッターは bizon 共通CSS に従う。
   - 記事固有コンポーネント（比較表・FAQ・参考リンク）のみを集約。
   - 記事誘導カードは bizon 共通クラス banner-column を使用（余白のみ本CSSで調整）。
   - クラス接頭辞：cg- で名前空間を分離（他記事のクラスと衝突させない）。
   - 配色：navy #001F4E / red #CC0033 / gray #3C4043（共通トーン）。
   ------------------------------------------------------------
   1. 比較表（cg-tbl）        … Chat/Work/Codex、GPT-6モデル、プラン別モデル、料金プラン
   2. FAQアコーディオン（cg-faq）
   3. 参考リンクボックス（cg-ref-box）
   4. 画面キャプチャーと番号の説明（cg-figure・cg-fig-list）
   5. プロンプトの例（cg-prompt）
   6. 料金プラン早見表のスマホ表示（cg-tbl-plan）
   ============================================================ */

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

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

/* 利用モードのアイコン（Chat・Work・Codexの違い の1列目）
   配色はStudio UIカラーパレット（紺・ティール・緑）。th内spanの共通指定より詳細度を上げている */
.cg-mode { display: flex !important; align-items: center !important; gap: 8px !important; }
.cg-tbl tbody th .cg-mode-ico {
	flex: 0 0 26px !important;
	width: 26px !important;
	height: 26px !important;
	border-radius: 7px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}
.cg-mode-ico svg { width: 15px; height: 15px; display: block; }
.cg-tbl tbody th .cg-ico-chat  { background: #224484 !important; }
.cg-tbl tbody th .cg-ico-work  { background: #056A95 !important; }
.cg-tbl tbody th .cg-ico-codex { background: #0F5223 !important; }
.cg-tbl tbody th .cg-mode-name { font-size: 14px !important; font-weight: bold !important; white-space: nowrap !important; }

/* 列幅の目安（3列表） */
.cg-tbl-3 th:first-child,
.cg-tbl-3 td:first-child { width: 22% !important; }
.cg-tbl-3 thead th:not(:first-child) { width: 39% !important; }

.cg-tbl-note {
	font-size: 13px !important;
	color: #555 !important;
	line-height: 1.7 !important;
	margin: 8px 0 1.4em !important;
}
.cg-tbl-note a { color: #0a59b0 !important; text-decoration: underline !important; }

/* ============================================================
   2. FAQアコーディオン（cg-faq）
   回答全文は常にHTML内に存在（JSで生成しない＝JSON-LDと内容を一致させる）。
   閉じているときは max-height でクランプし、開くと実高さまで展開する。
   JSが無効な環境では、HTML側の <noscript> 指定で全文を表示する。
   ============================================================ */
.cg-faq { margin: 1.4em 0 !important; font-family: "Meiryo", "メイリオ", sans-serif; color: #333 !important; }
.cg-faq-item {
	border: 1px solid #e1e6ef !important;
	border-radius: 10px !important;
	background: #fff !important;
	overflow: hidden !important;
	margin: 0 0 14px !important;
}
.cg-faq-head {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	background: #eaf0f8 !important;
	padding: 12px 15px !important;
}
.cg-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;
}
.cg-faq-q { flex: 1 1 auto !important; color: #001F4E !important; font-weight: 700 !important; font-size: 15px !important; line-height: 1.55 !important; }
.cg-faq-body { padding: 14px 16px 0 !important; }
.cg-faq-peek { position: relative !important; overflow: hidden !important; max-height: 56px; transition: max-height .35s ease !important; }
.cg-faq-atext { font-size: 14.5px !important; color: #333 !important; line-height: 1.95 !important; margin: 0 !important; }
.cg-faq-atext b { color: #001F4E !important; }
.cg-faq-atext a { color: #0a59b0 !important; text-decoration: underline !important; }
.cg-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;
}
.cg-faq-item.cg-open .cg-faq-fade { opacity: 0 !important; }
.cg-faq-more { text-align: right !important; padding: 6px 16px 13px !important; }
.cg-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;
}
.cg-faq-more-btn::after { content: "▼" !important; font-size: 9px !important; margin-left: 6px !important; }
.cg-faq-item.cg-open .cg-faq-more-btn::after { content: "▲" !important; }
.cg-faq-more-btn:hover { text-decoration: underline !important; }
.cg-faq-more-btn:focus-visible { outline: 2px solid #001F4E !important; outline-offset: 2px !important; }

/* ============================================================
   3. 参考リンクボックス（cg-ref-box）
   ------------------------------------------------------------
   箇条書きの「•」が二重に出ないよう、リスト系の指定は
   .article-contents を前置して詳細度を上げている。
   ============================================================ */
.cg-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;
}
.cg-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 .cg-ref-box ul,
.cg-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 .cg-ref-box li,
.cg-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 .cg-ref-box li::marker,
.cg-ref-box li::marker { content: none !important; }
.article-contents .cg-ref-box li + li,
.cg-ref-box li + li { margin-top: .3em !important; }
.article-contents .cg-ref-box li::before,
.cg-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 .cg-ref-box li::after,
.cg-ref-box li::after { content: none !important; }
.cg-ref-box a { color: #0a59b0 !important; text-decoration: underline !important; }

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

	.cg-faq-q { font-size: 14px !important; }
	.cg-faq-atext { font-size: 14px !important; }

	.cg-ref-box { padding: 13px 16px !important; }
}

/* ============================================================
   4. 画面キャプチャー（cg-figure）と番号の説明（cg-fig-list）
   ------------------------------------------------------------
   画像の番号（赤い丸数字）と、下のリスト（ol）の番号をそろえる。
   番号はCSSカウンターで赤い丸数字にする。本CSSが読み込まれない
   場合も、olの標準の「1. 2. 3.」で番号が対応する。
   共通CSSの箇条書き記号が重ならないよう、リスト系は
   .article-contents を前置して詳細度を上げている。
   ============================================================ */
.cg-figure {
	margin: 1.2em 0 .4em !important;
	padding: 0 !important;
}
.cg-figure img {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	border: 1px solid #e4e7ee !important;
	border-radius: 8px !important;
}
.cg-figure figcaption {
	margin: 8px 0 0 !important;
	font-size: 12.5px !important;
	color: #666 !important;
	line-height: 1.6 !important;
	text-align: left !important;
}
.article-contents .cg-fig-list,
.cg-fig-list {
	margin: .9em 0 1.4em !important;
	padding: 0 !important;
	list-style: none !important;
	background: none !important;
	counter-reset: cgfig !important;
}
.article-contents .cg-fig-list li,
.cg-fig-list li {
	position: relative !important;
	margin: 0 !important;
	padding: 0 0 0 2.1em !important;
	font-size: 14.5px !important;
	line-height: 1.8 !important;
	text-indent: 0 !important;
	list-style: none !important;
	background: none !important;
	counter-increment: cgfig !important;
}
.article-contents .cg-fig-list li::marker,
.cg-fig-list li::marker { content: none !important; }
.article-contents .cg-fig-list li::before,
.cg-fig-list li::before {
	content: counter(cgfig) !important;
	position: absolute !important;
	left: 0 !important;
	top: .22em !important;
	display: block !important;
	width: 1.55em !important;
	height: 1.55em !important;
	margin: 0 !important;
	border-radius: 50% !important;
	background: #CC0033 !important;
	color: #fff !important;
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 12.5px !important;
	font-weight: 700 !important;
	line-height: 1.55em !important;
	text-align: center !important;
}
.article-contents .cg-fig-list li + li,
.cg-fig-list li + li { margin-top: .45em !important; }
.cg-fig-list b { color: #001F4E !important; }

/* ============================================================
   5. プロンプトの例（cg-prompt）
   ------------------------------------------------------------
   役割・背景・目的・出力形式をラベルで示す入力例。
   ============================================================ */
.cg-prompt {
	background: #f7f8fa !important;
	border: 1px solid #e4e7ee !important;
	border-radius: 6px !important;
	padding: 14px 20px 16px !important;
	margin: 1.2em 0 1.4em !important;
}
.article-contents .cg-prompt p.cg-prompt-label,
.cg-prompt p.cg-prompt-label {
	margin: 0 0 .6em !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	color: #001F4E !important;
	line-height: 1.6 !important;
}
.article-contents .cg-prompt ul,
.cg-prompt ul {
	margin: 0 !important;
	padding-left: 0 !important;
	list-style: none !important;
	background: none !important;
}
.article-contents .cg-prompt li,
.cg-prompt li {
	position: relative !important;
	margin: 0 !important;
	padding: 0 0 0 6.2em !important;
	font-size: 14.5px !important;
	line-height: 1.75 !important;
	text-indent: 0 !important;
	list-style: none !important;
	background: none !important;
}
.article-contents .cg-prompt li::marker,
.cg-prompt li::marker { content: none !important; }
.article-contents .cg-prompt li::before,
.cg-prompt li::before,
.article-contents .cg-prompt li::after,
.cg-prompt li::after { content: none !important; display: none !important; }
.article-contents .cg-prompt li + li,
.cg-prompt li + li { margin-top: .45em !important; }
.cg-prompt .cg-prompt-tag {
	position: absolute !important;
	left: 0 !important;
	top: .2em !important;
	width: 5.4em !important;
	padding: .1em 0 !important;
	border-radius: 3px !important;
	background: #CC0033 !important;
	color: #fff !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	line-height: 1.5 !important;
	text-align: center !important;
}
@media screen and (max-width: 767px) {
	.cg-prompt { padding: 12px 14px 14px !important; }
	.article-contents .cg-prompt li,
	.cg-prompt li { padding-left: 0 !important; font-size: 14px !important; }
	.cg-prompt .cg-prompt-tag {
		position: static !important;
		display: inline-block !important;
		width: auto !important;
		padding: .05em .6em !important;
		margin-right: .5em !important;
	}
}

/* ============================================================
   6. 料金プラン早見表のスマホ表示（cg-tbl-plan）
   ------------------------------------------------------------
   4列の表はスマホでは列が細くなりすぎるため、プランごとの
   カードに縦積みする。PCは通常の表のまま。
   ============================================================ */
@media screen and (max-width: 767px) {
	.article-contents .cg-tbl-plan,
	.cg-tbl-plan,
	.cg-tbl-plan tbody,
	.cg-tbl-plan tr,
	.cg-tbl-plan th,
	.cg-tbl-plan td {
		display: block !important;
		width: auto !important;
	}
	.cg-tbl-plan { border: none !important; }
	.cg-tbl-plan thead { display: none !important; }
	.cg-tbl-plan tbody tr {
		margin: 0 0 12px !important;
		border: 1px solid #e0e0e0 !important;
		border-radius: 6px !important;
		overflow: hidden !important;
	}
	.cg-tbl-plan tbody tr:last-child { margin-bottom: 0 !important; }
	.cg-tbl-plan tbody th {
		padding: 9px 14px !important;
		border: none !important;
		border-bottom: 1px solid #e0e0e0 !important;
		font-size: 15px !important;
		white-space: normal !important;
	}
	.cg-tbl-plan tbody td {
		padding: 9px 14px !important;
		border: none !important;
		font-size: 14px !important;
	}
	.cg-tbl-plan tbody td + td { border-top: 1px dashed #e0e0e0 !important; }
	.cg-tbl-plan tbody td::before {
		display: block !important;
		margin-bottom: 3px !important;
		font-size: 12px !important;
		font-weight: bold !important;
		color: #001F4E !important;
	}
	.cg-tbl-plan tbody td:nth-of-type(1)::before { content: "料金"; }
	.cg-tbl-plan tbody td:nth-of-type(2)::before { content: "主な対象"; }
	.cg-tbl-plan tbody td:nth-of-type(3)::before { content: "押さえておきたい点"; }
}