@charset "utf-8";
/* ============================================================
   bizon Claude（クロード）記事 専用スタイル
   https://www.ntt.com/etc/designs/nttcom/hq/jp/bizon/claude/css/style.css
   ------------------------------------------------------------
   設計方針（ai-compare / Copilot / Gemini 記事にならう）：
   - 見出し(title-c2 等)・パンくず・ヘッダー/フッターは bizon 共通CSS に従う。
   - 記事固有コンポーネント（比較表・FAQ・参考リンク）のみを集約。
   - 記事誘導カードは bizon 共通クラス banner-column を使用（余白のみ本CSSで調整）。
   - クラス接頭辞：cl- で名前空間を分離。
   - 配色：navy #001F4E / red #CC0033 / gray #3C4043（共通トーン）。
   ------------------------------------------------------------
   1. 比較表（cl-tbl）        … モデル早見表／評価項目比較／料金プラン／API料金
   2. FAQアコーディオン（cl-faq）
   3. 参考リンクボックス（cl-ref-box）
   ============================================================ */

/* ============================================================
   0. 記事タイトル（h1）の調整
   ------------------------------------------------------------
   ・cl-nobr：「(クロード)とは？」が途中で折り返さないようにする
   ・小見出し（<small>）の行間：
     共通CSSがh1に固定値（px/em）で指定した line-height を
     <small> がそのまま引き継ぐため、文字サイズを落としても
     行間だけが大きいまま残る。small 側に行間を指定して打ち消す。
     セレクタは #ict-sect を含めて詳細度を確保している。
   ============================================================ */
.cl-nobr { white-space: nowrap; }

/* 副題（$title 内の <small class="cl-sub">）
   要素そのものに付けたクラスで指定するため、
   祖先の構造やクラス名に依存せず確実に効く。 */
h1 small.cl-sub,
small.cl-sub,
.cl-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;
}

.cl-scope { font-family: "Meiryo", "メイリオ", sans-serif; color: #222; }
.cl-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）のままだとテキスト側の上下余白が
   広がり、画像側との高さバランスが崩れる。NotebookLM記事と
   同じ指定に揃える。セレクタも同記事に合わせて詳細度を確保。
   ============================================================ */
#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. 比較表（cl-tbl）
   ============================================================ */
.cl-tbl-wrap { margin: 0 0 8px; font-family: "Meiryo", "メイリオ", sans-serif; }
.cl-tbl-wrap .table-t1-frame { margin-bottom: 0 !important; }
.cl-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;
}
.cl-tbl {
	width: 100% !important;
	border-collapse: collapse !important;
	font-size: 14px !important;
	line-height: 1.6 !important;
	margin-bottom: 0 !important;
}
.cl-tbl th,
.cl-tbl td {
	padding: 10px 12px !important;
	border: 1px solid #e0e0e0 !important;
	vertical-align: middle !important;
	text-align: left !important;
}
.cl-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;
}
.cl-tbl tbody th {
	background: #fff5f5 !important;
	font-weight: bold !important;
	color: #333 !important;
	text-align: left !important;
}
.cl-tbl thead th span,
.cl-tbl tbody th span { font-weight: normal !important; font-size: 12px !important; }
.cl-tbl tbody td { color: #444 !important; }
.cl-tbl tbody td:first-of-type { font-weight: normal !important; }

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

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

/* 提供可否マーク */
.cl-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;
}
.cl-tbl td.cl-mark-cell { padding: 0 !important; min-width: 70px !important; }
.cl-tbl thead th.cl-col-mark { min-width: 70px !important; }
.cl-mark-sub {
	font-size: 11px !important;
	font-weight: normal !important;
	line-height: 1.3 !important;
	margin-top: 3px !important;
	color: #555 !important;
}
/* 主要AI比較表：評価項目列を広めに取り、3サービスの列幅を均等にする */
.cl-tbl-ai th:first-child,
.cl-tbl-ai td:first-child { width: 19% !important; }
.cl-tbl-ai thead th:not(:first-child) { width: 27% !important; }

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

/* ============================================================
   2. FAQアコーディオン（cl-faq）
   回答全文は常にHTML内に存在（JSで生成しない＝AIO/JSON-LD整合）。
   ============================================================ */
.cl-faq { margin: 1.4em 0 !important; font-family: "Meiryo", "メイリオ", sans-serif; color: #333 !important; }
.cl-faq-item {
	border: 1px solid #e1e6ef !important;
	border-radius: 10px !important;
	background: #fff !important;
	overflow: hidden !important;
	margin: 0 0 14px !important;
}
.cl-faq-head {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	background: #eaf0f8 !important;
	padding: 12px 15px !important;
}
.cl-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;
}
.cl-faq-q { flex: 1 1 auto !important; color: #001F4E !important; font-weight: 700 !important; font-size: 15px !important; line-height: 1.55 !important; }
.cl-faq-body { padding: 14px 16px 0 !important; }
.cl-faq-peek { position: relative !important; overflow: hidden !important; max-height: 56px; transition: max-height .35s ease !important; }
.cl-faq-atext { font-size: 14.5px !important; color: #333 !important; line-height: 1.95 !important; margin: 0 !important; }
.cl-faq-atext b { color: #001F4E !important; }
.cl-faq-atext a { color: #0a59b0 !important; text-decoration: underline !important; }
.cl-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;
}
.cl-faq-item.cl-open .cl-faq-fade { opacity: 0 !important; }
.cl-faq-more { text-align: right !important; padding: 6px 16px 13px !important; }
.cl-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;
}
.cl-faq-more-btn::after { content: "▼" !important; font-size: 9px !important; margin-left: 6px !important; }
.cl-faq-item.cl-open .cl-faq-more-btn::after { content: "▲" !important; }
.cl-faq-more-btn:hover { text-decoration: underline !important; }

/* ============================================================
   3. 参考リンクボックス（cl-ref-box）
   ------------------------------------------------------------
   箇条書きの「•」が二重に出ないよう、リスト系の指定は
   .article-contents を前置して詳細度を上げている。
   共通CSSの .article-contents ul li 系（詳細度 0-1-2）より
   .article-contents .cl-ref-box li（同 0-2-1）が優先されるため、
   ネイティブのマーカーも共通CSSの ::before も打ち消され、
   本ファイルの ::before だけが描画される。
   ============================================================ */
.cl-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;
}
.cl-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 .cl-ref-box ul,
.cl-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 .cl-ref-box li,
.cl-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 .cl-ref-box li::marker,
.cl-ref-box li::marker { content: none !important; }
.article-contents .cl-ref-box li + li,
.cl-ref-box li + li { margin-top: .3em !important; }
.article-contents .cl-ref-box li::before,
.cl-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 .cl-ref-box li::after,
.cl-ref-box li::after { content: none !important; }
.cl-ref-box a { color: #0a59b0 !important; text-decoration: underline !important; }

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

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

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

	h1 small.cl-sub,
	small.cl-sub,
	.cl-sub { line-height: 1.55 !important; }

	#ict-sect .article-common h1 small,
	#ict-sect h1 small,
	.article-title small { line-height: 1.55 !important; }
}