@charset "utf-8";
/* ============================================================
   bizon SCS評価制度 記事 専用スタイル
   https://www.ntt.com/etc/designs/nttcom/hq/jp/bizon/scs-2026/css/style.css
   ------------------------------------------------------------
   設計方針（bizon 記事共通）：
   - 見出し(title-c2 等)・パンくず・ヘッダー/フッターは bizon 共通CSS に従う。
   - 記事固有コンポーネントのみを集約。クラス接頭辞：scs- で名前空間を分離。
   - 配色：navy #001F4E / red #CC0033 / gray #3C4043（共通トーン）。
   - セミナーCTA（.biz-seminar-cta / .scssem-card）は記事HTML内の
     <style> に置いたまま（本ファイルには含めない）。
   ------------------------------------------------------------
   0. 記事タイトル（h1）の調整
   1. 制度の基本情報ストリップ（scs-facts）
   2. 比較表（scs-tbl）
   3. ロードマップ・タイムライン（scs-tl）
   4. 判定フロー図（scs-figure）… インラインSVG
   5. 注意喚起カード（scs-notice）
   6. 運営体制カード（scs-org）
   7. 準備ステップ（scs-steps）
   8. FAQアコーディオン（scs-faq）
   ============================================================ */

/* ============================================================
   0. 記事タイトル（h1）の調整
   ------------------------------------------------------------
   ・scs-sub ：副題。共通CSSがh1に固定値で指定した line-height を
     <small> が引き継ぐため、small 側で行間を上書きする。
   ============================================================ */

h1 small.scs-sub,
small.scs-sub,
.scs-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;
}

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

/* 強調 */
.scs-em { color: #CC0033 !important; font-weight: 700 !important; }
.scs-ok { color: #1E7A3C !important; font-weight: 700 !important; }

/* 出典・注記（本文中の <small> 代替） */
.scs-note {
	font-size: 13px !important;
	color: #555 !important;
	line-height: 1.7 !important;
	margin: 8px 0 1.4em !important;
}
.scs-note a { color: #0a59b0 !important; text-decoration: underline !important; }

/* ============================================================
   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; }

#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. 制度の基本情報ストリップ（scs-facts）
   ------------------------------------------------------------
   冒頭で「所管／運営／区分／開始時期／位置づけ」を一望させる。
   ============================================================ */
.scs-facts {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 10px !important;
	margin: 1.2em 0 1.6em !important;
	padding: 0 !important;
	list-style: none !important;
	font-family: "Meiryo", "メイリオ", sans-serif;
}
.article-contents .scs-facts li,
.scs-facts li {
	flex: 1 1 calc(33.333% - 7px) !important;
	min-width: 180px !important;
	margin: 0 !important;
	padding: 12px 14px 11px !important;
	list-style: none !important;
	text-indent: 0 !important;
	background: #F5F7FA !important;
	border: 1px solid #e1e6ef !important;
	border-radius: 10px !important;
	line-height: 1.5 !important;
}
.article-contents .scs-facts li::before,
.article-contents .scs-facts li::after { content: none !important; }
.scs-facts-k {
	display: block !important;
	font-size: 11.5px !important;
	font-weight: 700 !important;
	color: #5A6573 !important;
	letter-spacing: .04em !important;
	margin: 0 0 4px !important;
}
.scs-facts-v {
	display: block !important;
	font-size: 14.5px !important;
	font-weight: 700 !important;
	color: #001F4E !important;
}
.scs-facts-v small {
	display: block !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	color: #555 !important;
	margin-top: 2px !important;
	line-height: 1.5 !important;
}
.scs-facts li.scs-facts-hl { background: #fff5f5 !important; border-color: #f3c8d3 !important; }
.scs-facts li.scs-facts-hl .scs-facts-v { color: #CC0033 !important; }

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

.scs-td { display: block !important; text-align: left !important; }
/* セル内の主値（<b>）と補足（<span>）を分離：補足は点線で区切り、小さめ・グレー */
.scs-td > b { font-weight: bold !important; color: #333 !important; }
.scs-td span {
	display: block !important;
	margin-top: 5px !important;
	padding-top: 4px !important;
	border-top: 1px dotted #c9d2e0 !important;
	font-size: 11.5px !important;
	font-weight: normal !important;
	line-height: 1.55 !important;
	color: #6b7280 !important;
}
.scs-td-c { display: block !important; text-align: center !important; }
.scs-td-rec { color: #c8102e !important; font-weight: bold !important; }
.scs-tbl tbody tr.scs-rec { background-color: #fff8e1 !important; }

/* 5列（★1〜★5）の概要表：colgroupで列幅を固定し、★の5列を均等に */
.scs-tbl-levels { table-layout: fixed !important; }
.scs-tbl-levels col.scs-col-level { width: 17% !important; }
.scs-tbl-levels col.scs-col-star { width: 16.6% !important; }

/* 2列（★3／★4）の比較表 */
.scs-tbl-34 th:first-child,
.scs-tbl-34 td:first-child { width: 22% !important; }
.scs-tbl-34 thead th:not(:first-child) { width: 39% !important; }

/* 7分類の評価基準表 */
.scs-tbl-criteria th:first-child,
.scs-tbl-criteria td:first-child { width: 17% !important; }
.scs-tbl-criteria th:last-child,
.scs-tbl-criteria td:last-child { width: 14% !important; text-align: center !important; }

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

/* ============================================================
   3. ロードマップ・タイムライン（scs-tl）
   ------------------------------------------------------------
   実施済み（navy・実線）と予定（破線・薄色）を区別する。
   ============================================================ */
.scs-tl-wrap {
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 1.2em 0 8px !important;
	background: #fff !important;
	font-family: "Meiryo", "メイリオ", sans-serif;
}
.scs-tl-title {
	font-size: 18px !important;
	font-weight: bold !important;
	text-align: center !important;
	margin: 0 0 6px !important;
	color: #001F4E !important;
}
.scs-tl-asof {
	font-size: 12px !important;
	color: #777 !important;
	text-align: center !important;
	margin: 0 0 18px !important;
}
.scs-tl-legend {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	gap: 14px !important;
	margin: 0 0 14px !important;
	padding: 0 !important;
	list-style: none !important;
	font-size: 12px !important;
	color: #555 !important;
}
.article-contents .scs-tl-legend li,
.scs-tl-legend li { list-style: none !important; margin: 0 !important; padding: 0 !important; text-indent: 0 !important; display: flex !important; align-items: center !important; gap: 6px !important; }
.article-contents .scs-tl-legend li::before,
.article-contents .scs-tl-legend li::after { content: none !important; }
.scs-tl-legend i {
	display: inline-block !important;
	width: 10px !important;
	height: 10px !important;
	border-radius: 50% !important;
}
.scs-tl-legend .scs-tl-lg-done { background: #001F4E !important; }
.scs-tl-legend .scs-tl-lg-plan { background: #fff !important; border: 2px dashed #9aa6b8 !important; }

.scs-tl-list { list-style: none !important; padding: 0 !important; margin: 0 !important; position: relative !important; }
.scs-tl-list::before {
	content: "" !important;
	position: absolute !important;
	left: 141px !important;
	top: 8px !important;
	bottom: 8px !important;
	width: 2px !important;
	background: linear-gradient(to bottom, #001F4E 0, #001F4E 55%, #c9d2e0 55%, #c9d2e0 100%) !important;
}
.article-contents .scs-tl-list li,
.scs-tl-list li {
	list-style: none !important;
	list-style-type: none !important;
	margin: 0 !important;
	padding: 0 !important;
	position: relative !important;
	text-indent: 0 !important;
}
.article-contents .scs-tl-list li::before,
.article-contents .scs-tl-list li::after { content: none !important; display: none !important; }
.scs-tl-row {
	display: flex !important;
	align-items: flex-start !important;
	gap: 0 !important;
	border-bottom: 1px solid #eef1f5 !important;
	padding: 10px 0 !important;
}
.scs-tl-list li:last-child .scs-tl-row { border-bottom: none !important; }
.scs-tl-date {
	min-width: 128px !important;
	font-size: 14px !important;
	font-weight: bold !important;
	color: #001F4E !important;
	flex-shrink: 0 !important;
	padding-top: 2px !important;
	line-height: 1.5 !important;
}
.scs-tl-date small { display: block !important; font-size: 11px !important; font-weight: 400 !important; color: #777 !important; }
.scs-tl-dot {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	min-width: 28px !important;
	flex-shrink: 0 !important;
	padding-top: 6px !important;
}
.scs-tl-dot i {
	display: block !important;
	width: 12px !important;
	height: 12px !important;
	border-radius: 50% !important;
	background: #001F4E !important;
	border: 2px solid #fff !important;
	box-shadow: 0 0 0 1.5px #001F4E !important;
}
.scs-tl-body { flex: 1 !important; padding-left: 6px !important; }
.scs-tl-main {
	font-size: 15px !important;
	font-weight: bold !important;
	color: #333 !important;
	display: block !important;
	line-height: 1.55 !important;
}
.scs-tl-sub {
	font-size: 13px !important;
	color: #666 !important;
	display: block !important;
	margin-top: 2px !important;
	line-height: 1.6 !important;
}
.scs-tl-sub a { color: #0a59b0 !important; text-decoration: underline !important; }

/* 予定 */
.scs-tl-list li.scs-tl-plan .scs-tl-date { color: #5A6573 !important; }
.scs-tl-list li.scs-tl-plan .scs-tl-main { color: #444 !important; font-weight: 600 !important; }
.scs-tl-list li.scs-tl-plan .scs-tl-dot i {
	background: #fff !important;
	border: 2px dashed #9aa6b8 !important;
	box-shadow: none !important;
	width: 12px !important;
	height: 12px !important;
}
.scs-tl-badge {
	display: inline-block !important;
	font-size: 10.5px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	padding: 3px 7px !important;
	border-radius: 999px !important;
	vertical-align: 2px !important;
	margin-left: 6px !important;
	letter-spacing: .04em !important;
}
.scs-tl-badge-plan { background: #eef2f8 !important; color: #33456b !important; }

/* ============================================================
   4. 判定フロー図（scs-figure）… インラインSVG
   ============================================================ */
.scs-figure { margin: 1.4em 0 0.6em !important; }
.scs-figure svg { width: 100% !important; height: auto !important; display: block !important; }
.scs-figcap {
	font-size: 13px !important;
	color: #555 !important;
	line-height: 1.7 !important;
	margin: 6px 0 1.4em !important;
}
.scs-figcap a { color: #0a59b0 !important; text-decoration: underline !important; }

/* ============================================================
   5. 注意喚起カード（scs-notice）
   ============================================================ */
.scs-notice {
	margin: 1.4em 0 1.8em !important;
	background: #fff !important;
	border: 1px solid #f3c8d3 !important;
	border-radius: 10px !important;
	padding: 16px 20px !important;
	font-family: "Meiryo", "メイリオ", sans-serif;
	box-shadow: 0 2px 8px rgba(204,0,51,.05) !important;
}
.scs-notice-label {
	display: inline-block !important;
	background: #fcf0f3 !important;
	color: #CC0033 !important;
	font-weight: 800 !important;
	font-size: 11px !important;
	letter-spacing: .05em !important;
	padding: 4px 13px !important;
	border-radius: 999px !important;
	border: 1px solid #f3c8d3 !important;
	margin: 0 0 10px !important;
}
.scs-notice-text { font-size: 14px !important; line-height: 1.9 !important; color: #333 !important; margin: 0 !important; }
.scs-notice-text strong { color: #CC0033 !important; }
.article-contents .scs-notice ul,
.scs-notice ul { margin: 8px 0 0 !important; padding: 0 0 0 1.2em !important; list-style: disc !important; background: none !important; }
.article-contents .scs-notice li,
.scs-notice li { font-size: 14px !important; line-height: 1.8 !important; margin: 0 !important; padding: 0 !important; text-indent: 0 !important; list-style: disc !important; background: none !important; }
.article-contents .scs-notice li::before,
.article-contents .scs-notice li::after { content: none !important; }
.scs-notice-src { font-size: 12px !important; color: #777 !important; margin: 8px 0 0 !important; line-height: 1.6 !important; }
.scs-notice-src a { color: #0a59b0 !important; text-decoration: underline !important; }

/* ============================================================
   6. 運営体制カード（scs-org）
   ------------------------------------------------------------
   役割ごとに帯色を分ける。
   ============================================================ */
.scs-org {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 14px !important;
	margin: 1.2em 0 1.4em !important;
	font-family: "Meiryo", "メイリオ", sans-serif;
}
.scs-org-card {
	flex: 1 1 calc(50% - 7px) !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;
}
.scs-org-card.scs-org-wide { flex-basis: 100% !important; }
.scs-org-head {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 9px 14px !important;
	background: #001F4E !important;
}
.scs-org-ico {
	flex: 0 0 28px !important;
	width: 28px !important;
	height: 28px !important;
	border-radius: 7px !important;
	background: rgba(255,255,255,.16) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}
.scs-org-ico svg { width: 16px !important; height: 16px !important; display: block !important; }
.scs-org-role {
	color: #fff !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: .04em !important;
}
.scs-o-gov  .scs-org-head { background: #3C4043 !important; }
.scs-o-ipa  .scs-org-head { background: #CC0033 !important; }
.scs-o-cmt  .scs-org-head { background: #001F4E !important; }
.scs-o-eval .scs-org-head { background: #1f5f78 !important; }
.scs-o-exp  .scs-org-head { background: #2f6b4f !important; }
.scs-o-tr   .scs-org-head { background: #6a4a86 !important; }
.scs-org-body { padding: 12px 15px 14px !important; }
.scs-org-name {
	font-size: 16px !important;
	font-weight: 700 !important;
	color: #001F4E !important;
	line-height: 1.5 !important;
	margin: 0 0 6px !important;
}
.scs-org-desc {
	font-size: 13.5px !important;
	line-height: 1.8 !important;
	color: #333 !important;
	margin: 0 !important;
}
.scs-org-desc b { color: #CC0033 !important; }
.scs-org-note { font-size: 12.5px !important; color: #555 !important; line-height: 1.7 !important; margin: 4px 0 1.4em !important; }
.scs-org-note a { color: #0a59b0 !important; text-decoration: underline !important; }

/* ============================================================
   7. 準備ステップ（scs-steps）
   ------------------------------------------------------------
   番号丸＋見出し＋本文＋矢印で構成。
   ============================================================ */
.scs-steps { margin: 1.2em 0 1.2em !important; font-family: "Meiryo", "メイリオ", sans-serif; }
.scs-step {
	background: #fff !important;
	border: 1px solid #dce3f0 !important;
	border-radius: 14px !important;
	padding: 16px 20px 15px !important;
	box-shadow: 0 2px 10px rgba(0,31,78,.05) !important;
}
.scs-step-head { display: flex !important; align-items: center !important; gap: 11px !important; margin: 0 0 8px !important; }
.scs-step-num {
	flex: 0 0 30px !important;
	width: 30px !important;
	height: 30px !important;
	border-radius: 50% !important;
	background: #001F4E !important;
	color: #fff !important;
	font-size: 14px !important;
	font-weight: 800 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}
.scs-step-ttl { font-size: 16px !important; font-weight: 700 !important; color: #001F4E !important; line-height: 1.5 !important; }
.scs-step-txt { font-size: 13.5px !important; line-height: 1.85 !important; color: #333 !important; margin: 0 !important; }
.scs-step-txt a { color: #0a59b0 !important; text-decoration: underline !important; }
.scs-step-arrow { text-align: center !important; padding: 8px 0 !important; line-height: 0 !important; }
.scs-step-arrow::before {
	content: "" !important;
	display: inline-block !important;
	width: 13px !important;
	height: 13px !important;
	border-right: 2.5px solid #b6c2d6 !important;
	border-bottom: 2.5px solid #b6c2d6 !important;
	transform: rotate(45deg) !important;
}

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

/* ============================================================
   スマートフォン
   ============================================================ */
@media screen and (max-width: 767px) {
	.scs-facts li { flex: 1 1 calc(50% - 5px) !important; min-width: 0 !important; }
	.scs-facts li.scs-facts-hl { flex-basis: 100% !important; }

	.scs-tbl { font-size: 13px !important; }
	.scs-tbl th,
	.scs-tbl td { padding: 8px 9px !important; }
	.scs-tbl thead th { font-size: 12px !important; }
	.scs-tbl tbody th { white-space: normal !important; }
	.scs-tbl-title { font-size: 16px !important; }

	.scs-tl-wrap { padding: 0 !important; }
	.scs-tl-list::before { left: 99px !important; }
	.scs-tl-date { min-width: 86px !important; font-size: 12.5px !important; }
	.scs-tl-main { font-size: 14px !important; }
	.scs-tl-sub { font-size: 12.5px !important; }

	.scs-org { gap: 12px !important; }
	.scs-org-card { flex: 1 1 100% !important; min-width: 0 !important; }
	.scs-org-name { font-size: 15px !important; }

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

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

/* ---------- 左下固定ポップアップ：オンデマンドセミナー導線（.scs-sempop） ---------- */
.scs-sempop {
	position: fixed !important;
	left: 16px !important;
	bottom: 16px !important;
	z-index: 9000 !important;
	width: 300px !important;
	max-width: calc(100vw - 32px) !important;
	box-sizing: border-box !important;
	background: #fff !important;
	border: 2px solid #CC0033 !important;
	border-radius: 10px !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important;
	font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif !important;
	overflow: visible !important;
	opacity: 0 !important;
	transform: translateY(24px) !important;
	visibility: hidden !important;
	transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s !important;
}
.scs-sempop.is-on {
	opacity: 1 !important;
	transform: translateY(0) !important;
	visibility: visible !important;
	transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s !important;
}
.scs-sempop-close {
	position: absolute !important;
	top: -12px !important;
	left: -12px !important;
	width: 28px !important;
	height: 28px !important;
	border-radius: 50% !important;
	border: 2px solid #fff !important;
	background: #1a1a1a !important;
	color: #fff !important;
	font-size: 16px !important;
	line-height: 1 !important;
	font-weight: bold !important;
	cursor: pointer !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
	z-index: 1 !important;
}
.scs-sempop-close:hover { background: #CC0033 !important; }
.scs-sempop-head {
	background: #CC0033 !important;
	color: #fff !important;
	font-size: 13px !important;
	font-weight: bold !important;
	letter-spacing: 0.5px !important;
	text-align: center !important;
	padding: 8px 28px !important;
	line-height: 1.4 !important;
	border-radius: 7px 7px 0 0 !important;
}
.scs-sempop-link,
.scs-sempop-link:hover,
.scs-sempop-link:visited,
.scs-sempop-link:focus {
	display: block !important;
	padding: 10px 12px 12px !important;
	text-decoration: none !important;
	color: inherit !important;
}
.scs-sempop-body {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
}
.scs-sempop-thumb {
	position: relative !important;
	flex: 0 0 116px !important;
	width: 116px !important;
	border-radius: 6px !important;
	overflow: hidden !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}
.scs-sempop-thumb img {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	margin: 0 !important;
}
.scs-sempop-dur {
	position: absolute !important;
	right: 4px !important;
	bottom: 4px !important;
	background: rgba(0, 0, 0, 0.75) !important;
	color: #fff !important;
	font-size: 10px !important;
	line-height: 1 !important;
	padding: 3px 5px !important;
	border-radius: 3px !important;
}
.scs-sempop-text { flex: 1 1 auto !important; min-width: 0 !important; }
.scs-sempop-tag {
	display: block !important;
	font-size: 11px !important;
	font-weight: bold !important;
	color: #CC0033 !important;
	line-height: 1.4 !important;
	margin: 0 0 4px !important;
}
.scs-sempop-title {
	display: block !important;
	font-size: 13px !important;
	font-weight: bold !important;
	color: #1a1a1a !important;
	line-height: 1.45 !important;
}
.scs-sempop-btn {
	display: block !important;
	margin: 10px 0 0 !important;
	background: #CC0033 !important;
	color: #fff !important;
	font-size: 13px !important;
	font-weight: bold !important;
	text-align: center !important;
	line-height: 1 !important;
	padding: 11px 12px !important;
	border-radius: 30px !important;
	box-shadow: 0 3px 8px rgba(204, 0, 51, 0.3) !important;
	transition: background 0.25s ease !important;
}
.scs-sempop-link:hover .scs-sempop-btn { background: #a3002a !important; }
@media (max-width: 767px) {
	.scs-sempop {
		left: 10px !important;
		bottom: 10px !important;
		width: calc(100vw - 20px) !important;
		max-width: 360px !important;
	}
	.scs-sempop-head { font-size: 12px !important; padding: 7px 28px !important; }
	.scs-sempop-link { padding: 8px 10px 10px !important; }
	.scs-sempop-thumb { flex-basis: 96px !important; width: 96px !important; }
	.scs-sempop-title { font-size: 12px !important; }
	.scs-sempop-btn { font-size: 12px !important; padding: 10px !important; }
}
/* タイトル内の蛍光ペン風ハイライト */
.scs-sempop-hl {
	background: linear-gradient(transparent 58%, #fff27a 58%) !important;
	color: inherit !important;
	font-style: normal !important;
	font-weight: inherit !important;
	padding: 0 1px !important;
}
/* 追加要素（サブタイトル・こんな方に）はコンパクト表示では非表示 */
.scs-sempop-sub,
.scs-sempop-points { display: none !important; }

/* 縦長レイアウト：PC幅かつ画面の高さに余裕がある場合のみ */
@media (min-width: 1024px) and (min-height: 800px) {
	.scs-sempop { width: 308px !important; }
	.scs-sempop-link { padding: 12px 14px 14px !important; }
	.scs-sempop-body {
		display: block !important;
	}
	.scs-sempop-thumb {
		width: 100% !important;
		flex: none !important;
		margin: 0 0 10px !important;
	}
	.scs-sempop-tag { font-size: 11.5px !important; }
	.scs-sempop-title { font-size: 15px !important; line-height: 1.45 !important; }
	.scs-sempop-sub {
		display: block !important;
		font-size: 12px !important;
		line-height: 1.55 !important;
		color: #555 !important;
		margin: 4px 0 0 !important;
	}
	.scs-sempop-points {
		display: block !important;
		margin: 10px 0 0 !important;
		padding: 8px 10px !important;
		background: #f7f8fa !important;
		border-radius: 6px !important;
	}
	.scs-sempop-points-label {
		display: block !important;
		font-size: 11px !important;
		font-weight: bold !important;
		color: #CC0033 !important;
		line-height: 1.4 !important;
		margin: 0 0 4px !important;
	}
	.scs-sempop-points ul {
		list-style: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	.scs-sempop-points li {
		position: relative !important;
		font-size: 12px !important;
		line-height: 1.5 !important;
		color: #333 !important;
		padding: 0 0 0 14px !important;
		margin: 0 0 3px !important;
	}
	.scs-sempop-points li::before {
		content: "" !important;
		position: absolute !important;
		left: 2px !important;
		top: 7px !important;
		width: 5px !important;
		height: 5px !important;
		border-radius: 50% !important;
		background: #CC0033 !important;
	}
	.scs-sempop-btn { font-size: 14px !important; padding: 12px !important; margin-top: 12px !important; }
}
@media print { .scs-sempop { display: none !important; } }

/* ---------- 更新のお知らせ（記事冒頭・.scs-update） ---------- */
.scs-update {
	margin: 0 0 28px !important;
	padding: 12px 16px !important;
	border: 1px solid #e0e0e0 !important;
	background: #f7f8fa !important;
	border-radius: 6px !important;
}
.scs-update-label {
	font-size: 12px !important;
	font-weight: bold !important;
	color: #CC0033 !important;
	line-height: 1.5 !important;
	margin: 0 0 4px !important;
}
.scs-update-text {
	font-size: 14px !important;
	line-height: 1.8 !important;
	color: #333 !important;
	margin: 0 !important;
}
.scs-update-text a { color: #0a59b0 !important; text-decoration: underline !important; }