@charset "utf-8";
/* ============================================================
   bizon 社用iPhoneのSiri AI 記事 専用スタイル
   https://www.ntt.com/etc/designs/nttcom/hq/jp/bizon/siri-ai-business/css/style.css
   ------------------------------------------------------------
   設計方針：
   - 見出し(title-c2 等)・パンくず・ヘッダー/フッターは bizon 共通CSS に従う。
   - 記事固有コンポーネント（表・図・参考記事カード）のみを集約。
   - 01節の機能名は h3.title-c3（①〜⑥の番号付き・共通CSS）を使い、本CSSでは指定しない。
   - クラス接頭辞：sa- で名前空間を分離。
   - 配色：navy #001F4E / red #CC0033 / gray #3C4043（共通トーン）。
     図版1・2と対応範囲表は、図版用に red #B42F33 / maroon #7E4144 を使う。
   ------------------------------------------------------------
   0. 共通パーツの微調整（記事内CTA・注記）
   1. 表（sa-tbl）… 機能表／対応範囲表（図版1と同じ配色）／MDM制御項目と端末の条件の表／導入前の確認表
   2. 図版（sa-figure）… インラインSVGのPC用・SP用の出し分け
   2-2. オンラインショップ誘導バナー（sa-shop-banner）… まとめ末尾のリンク付きSVG
   3. 参考記事カード（sa-refbox）… 01節「アプリ内でのアクション」で使用
   ============================================================ */

.sa-scope { font-family: "Meiryo", "メイリオ", sans-serif; color: #222; }
.sa-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; }

/* 表の作成注記・本文中の出典注記（行間・字送りを共通化）
   - 注記は、言及している本文・表・図に近づけ、次の本文とは広めにあける
   - 注記が続くときは、注記どうしの間をあけない */
.sa-tbl-note,
.sa-note {
	font-size: 13px !important;
	color: #555 !important;
	line-height: 1.7 !important;
	margin: 8px 0 24px !important;
}
/* 本文の段落に付く注記：共通CSSの段落下余白と相殺して、上の段落に寄せる */
.article-contents p:not(.sa-note):not(.sa-tbl-note) + p.sa-note { margin-top: -10px !important; }
/* 注記が続く場合 */
.sa-tbl-note + .sa-note,
.sa-tbl-note + .sa-tbl-note,
.sa-note + .sa-note,
.sa-note + .sa-tbl-note { margin-top: 0 !important; }
.sa-tbl-note:has(+ .sa-note),
.sa-tbl-note:has(+ .sa-tbl-note),
.sa-note:has(+ .sa-note),
.sa-note:has(+ .sa-tbl-note) { margin-bottom: 0 !important; }
.sa-tbl-note a,
.sa-note a { color: #0a59b0 !important; text-decoration: underline !important; }

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

/* セル内テキスト */
.sa-td { display: block !important; text-align: left !important; }
.sa-td span,
.sa-td-c span { display: block !important; font-size: 12px !important; color: #666 !important; line-height: 1.5 !important; white-space: normal !important; }
.sa-td-c { display: block !important; text-align: center !important; }

/* 列幅：機能表（4列） */
.sa-tbl-feat th:nth-child(1), .sa-tbl-feat td:nth-child(1) { width: 22% !important; }
.sa-tbl-feat th:nth-child(2), .sa-tbl-feat td:nth-child(2) { width: 32% !important; }
.sa-tbl-feat th:nth-child(3), .sa-tbl-feat td:nth-child(3) { width: 20% !important; }
.sa-tbl-feat th:nth-child(4), .sa-tbl-feat td:nth-child(4) { width: 26% !important; }

/* 列幅：対応範囲表（3列） */
.sa-tbl-dev th:nth-child(1), .sa-tbl-dev td:nth-child(1) { width: 24% !important; }
.sa-tbl-dev th:nth-child(2), .sa-tbl-dev td:nth-child(2) { width: 40% !important; }
.sa-tbl-dev th:nth-child(3), .sa-tbl-dev td:nth-child(3) { width: 36% !important; }

/* 対応範囲表の行色：図版1と同じ配色。見出しセル＝ピラミッドの段の色、データセル＝カードの地色 */
.sa-tbl-dev tr.sa-row-top th  { background: #B42F33 !important; color: #fff !important; }
.sa-tbl-dev tr.sa-row-top td  { background: #FCF3F3 !important; }
.sa-tbl-dev tr.sa-row-siri th { background: #001F4E !important; color: #fff !important; }
.sa-tbl-dev tr.sa-row-siri td { background: #EEF2F9 !important; }
.sa-tbl-dev tr.sa-row-ios th  { background: #3C4043 !important; color: #fff !important; }
.sa-tbl-dev tr.sa-row-ios td  { background: #F7F8FA !important; }

/* 列幅：MDM制御項目表（3列。端末の条件は宣言型構成の2行を結合）※列幅は見出し行で指定 */
.sa-tbl-mdm thead th:nth-child(1) { width: 26% !important; }
.sa-tbl-mdm thead th:nth-child(2) { width: 46% !important; }
.sa-tbl-mdm thead th:nth-child(3) { width: 28% !important; }
.sa-th-sub { display: block !important; font-size: 12px !important; font-weight: normal !important; color: #536171 !important; line-height: 1.5 !important; }

/* セル内の項目リスト（ぶら下げインデント）
   共通CSSの .article-contents ul li 系が描く行頭記号（::before の丸・::marker）と
   二重にならないよう、.article-contents を前置して詳細度を上げ、大きさ・背景も打ち消す */
.article-contents .sa-td-list,
.sa-td-list { margin: 0 !important; padding: 0 !important; list-style: none !important; background: none !important; }
.article-contents .sa-td-list li,
.sa-td-list li {
	position: relative !important;
	margin: 0 !important;
	padding: 0 0 0 1em !important;
	font-size: inherit !important;
	line-height: 1.6 !important;
	text-indent: 0 !important;
	list-style: none !important;
	background: none !important;
}
.article-contents .sa-td-list li::marker,
.sa-td-list li::marker { content: none !important; }
.article-contents .sa-td-list li::before,
.sa-td-list 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;
	border-radius: 0 !important;
	transform: none !important;
}
.article-contents .sa-td-list li::after,
.sa-td-list li::after { content: none !important; }
.article-contents .sa-td-list li + li,
.sa-td-list li + li { margin-top: 2px !important; }

/* 列幅：導入前の確認表（3列） */
.sa-tbl-sum th:nth-child(1), .sa-tbl-sum td:nth-child(1) { width: 26% !important; }
.sa-tbl-sum th:nth-child(2), .sa-tbl-sum td:nth-child(2) { width: 37% !important; }
.sa-tbl-sum th:nth-child(3), .sa-tbl-sum td:nth-child(3) { width: 37% !important; }

/* ============================================================
   2. 図版（sa-figure）
   ============================================================ */
.sa-figure { margin: 1.6em 0 0.6em !important; }
.sa-figure svg { width: 100% !important; height: auto !important; margin: 0 auto !important; }
/* PC用（viewBox幅760）とSP用（viewBox幅390）を出し分ける。PC用は本文カラムの幅いっぱいに広げる */
.sa-figure svg.sa-fig-pc { display: block !important; max-width: none !important; }
.sa-figure svg.sa-fig-sp { display: none !important; max-width: 390px !important; }
@media screen and (max-width: 767px) {
	.sa-figure svg.sa-fig-pc { display: none !important; }
	.sa-figure svg.sa-fig-sp { display: block !important; }
}

/* ============================================================
   2-2. オンラインショップ誘導バナー（sa-shop-banner）
   ------------------------------------------------------------
   まとめ末尾に置くリンク付きバナー。SVG内に<style>は持たせず、ホバー・出し分けは本CSSで行う。
   ============================================================ */
.sa-shop-banner { margin: 1.8em 0 1.4em !important; }
.sa-shop-banner-link {
	display: block !important;
	width: 100% !important;
	text-decoration: none !important;
	border-radius: 12px !important;
	-webkit-tap-highlight-color: transparent !important;
}
.sa-shop-banner-link svg { width: 100% !important; height: auto !important; }
.sa-shop-banner-link svg.sa-bn-pc { display: block !important; }
.sa-shop-banner-link svg.sa-bn-sp { display: none !important; }
.sa-shop-banner-link .sa-bn-card,
.sa-shop-banner-link .sa-bn-cta { transition: fill .15s ease, stroke .15s ease !important; }
.sa-shop-banner-link:hover .sa-bn-card { fill: #ffffff !important; stroke: #C5D2E6 !important; }
.sa-shop-banner-link:hover .sa-bn-cta { fill: #962529 !important; }
.sa-shop-banner-link:focus-visible { outline: 2px solid #001F4E !important; outline-offset: 2px !important; }
@media screen and (max-width: 767px) {
	.sa-shop-banner-link svg.sa-bn-pc { display: none !important; }
	.sa-shop-banner-link svg.sa-bn-sp { display: block !important; }
}
@media (prefers-reduced-motion: reduce) {
	.sa-shop-banner-link .sa-bn-card,
	.sa-shop-banner-link .sa-bn-cta { transition: none !important; }
}

/* ============================================================
   3. 参考記事カード（sa-refbox）
   ------------------------------------------------------------
   左に正方形サムネイル（2行分の高さ）、右にラベル・タイトル・要約。
   01節でAIブラウザの業務利用ルールの記事に使用。L-70（社用スマホのAI利用ルール）公開後も同じ形で追加できる。
   ============================================================ */
.sa-refbox { margin: 1.6em 0 !important; }
.sa-refbox-link {
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	padding: 12px 14px !important;
	border: 1px solid #e1e6ef !important;
	border-radius: 8px !important;
	background: #f7f9fc !important;
	text-decoration: none !important;
	color: inherit !important;
	transition: background .15s ease !important;
}
.sa-refbox-link:hover { background: #fff !important; }
.sa-refbox-thumb {
	flex: 0 0 64px !important;
	width: 64px !important;
	height: 64px !important;
	border-radius: 6px !important;
	overflow: hidden !important;
	background: #eef2f8 !important;
	display: block !important;
}
.sa-refbox-thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
.sa-refbox-body { display: block !important; min-width: 0 !important; }
.sa-refbox-lbl {
	display: inline-block !important;
	font-size: 11px !important;
	font-weight: bold !important;
	color: #001F4E !important;
	letter-spacing: .06em !important;
	line-height: 1.4 !important;
	margin: 0 0 4px !important;
	padding: 1px 8px !important;
	border: 1px solid #001F4E !important;
	border-radius: 10px !important;
}
.sa-refbox-ttl {
	display: block !important;
	font-size: 15px !important;
	font-weight: bold !important;
	line-height: 1.55 !important;
	color: #0a59b0 !important;
	text-decoration: underline !important;
	text-underline-offset: 2px !important;
	margin: 0 0 4px !important;
}
.sa-refbox-link:hover .sa-refbox-ttl { text-decoration: none !important; }
.sa-refbox-txt { display: block !important; font-size: 13px !important; color: #444 !important; line-height: 1.6 !important; }

/* ============================================================
   スマートフォン
   ============================================================ */
@media screen and (max-width: 767px) {
	.sa-tbl { font-size: 13px !important; }
	.sa-tbl th,
	.sa-tbl td { padding: 8px 9px !important; }
	.sa-tbl thead th { font-size: 12px !important; }
	.sa-tbl-title { font-size: 16px !important; }
	/* 4列の表はスマホで横スクロール（table-t1-frame）に任せ、列幅の最小値を確保 */
	.sa-tbl-feat { min-width: 640px !important; }
	/* MDM表：設定の種類の列が1文字だけ折り返さないよう、スマホでは1列目を広げる */
	.sa-tbl-mdm thead th:nth-child(1) { width: 28% !important; }
	.sa-tbl-mdm thead th:nth-child(2) { width: 44% !important; }

	.sa-refbox-link { gap: 12px !important; padding: 10px 12px !important; align-items: flex-start !important; }
	.sa-refbox-thumb { flex-basis: 56px !important; width: 56px !important; height: 56px !important; }
	.sa-refbox-ttl { font-size: 14px !important; }
	.sa-refbox-txt { font-size: 12.5px !important; }
}