/* ============================== 
基本トークン 
============================== */ 
:root { --w-spec-bg: #ffffff; 
--w-spec-bg-alt: #F6F6F6; 
--w-spec-bg-hover: #DDE6F4; 
--w-spec-border: #ccc; 
--w-spec-border-strong: #c0cadf; 
--w-spec-sticky-bg: #333; 
--w-spec-sticky-bg-hover: #28486f; 
--w-spec-sticky-text: #ffffff; 
--w-spec-text-main: #1b2333; 
--w-spec-text-sub: #7c869a; 
--w-spec-head-bg: #f1f4fb; 
--w-spec-head-text: #1b2333; 
--w-spec-head-sub: #4c5b80; 
--w-spec-badge-bg: #2b6fd4; 
--w-spec-badge-text: #ffffff; 
--w-spec-scroll-shadow: rgba(7, 18, 46, 0.12); 
--w-spec-font-base: clamp(0.82rem, 0.78rem + 0.18vw, 0.95rem); 
--w-spec-font-small: clamp(0.68rem, 0.64rem + 0.16vw, 0.8rem); 
--w-spec-font-xsmall: clamp(0.6rem, 0.58rem + 0.12vw, 0.72rem); 
--w-spec-font-heading: clamp(0.9rem, 0.85rem + 0.22vw, 1.05rem); 
--w-spec-font-model: clamp(0.95rem, 0.9rem + 0.25vw, 1.15rem); 
} 
/*（1）最小値（スマホ）0.85rem ～ 1.0rem（2）最大値（PC〜4K）最小値 + 0.2rem ～ + 0.35rem（3）間の推奨値（計算式）(最小値 - 0.05rem) + 0.2～0.35vw clamp(0.95rem, 0.9rem + 0.25vw, 1.15rem); */ 

/* ============================== テーブル本体（標準スクロール非表示）============================== */ 

.w-spec-table-wrap { 
position: relative; 
margin-block: 1rem; /*background: var(--w-spec-bg);*/ 
/*box-shadow: 0 10px 30px rgba(10, 24, 64, 0.05);*/ 
overflow-x: auto !important; 
overflow-y: visible; 
-webkit-overflow-scrolling: touch; 
scrollbar-width: none; 
cursor: grab; 
} 
.w-spec-table-wrap::-webkit-scrollbar { display: none; } 
.w-spec-table-wrap:active { cursor: grabbing; } 

/* フェード */ 
/* ---- 既存の wrap 疑似要素フェードを無効化（安全策） ---- */
.w-spec-table-wrap::before,
.w-spec-table-wrap::after {
  display: none !important;
}

/* ---- 右フェード用要素（container の直下に置く想定） ---- */
.w-spec-fade-right {
  position: absolute;
  top: 0;
  right: 0;
  width: 36px;                     /* 見た目厚み（お好みで調整） */
  height: 100%; /* 初期値OK、JSが正しく高さを上書きする */
  pointer-events: none;            /* クリックを妨げない */
  z-index: 15;                     /* thead a の z-index:60 を考慮しつつ低めに */
  background: linear-gradient(to left, var(--w-spec-bg), rgba(255,255,255,0));
  opacity: 0;
  transition: opacity .22s ease;
}

/* コンテナにスクロール必要ありフラグがあるときだけ見せる（補助） */
.w-spec-table-container.is-scrollable .w-spec-fade-right {
  opacity: 1; /* JS がさらに右端チェックをして最終表示制御します */
}

/* さらに右端到達時は JS で opacity = 0 にします（視覚的に消す） */

/* 念のため thead 内リンクの stacking を確保（既に設定済みなら不要）*/
.w-spec-table thead th a {
  position: relative;
  z-index: 40;      /* フェードより上に置く（pointer-events:none のため必須ではないが安全） */
  pointer-events: auto;
}
/* コンテナは相対位置にしてフェードの基準とする */
.w-spec-table-container {
  position: relative;
	margin-bottom: 1rem;
}

/* ============================== テーブル ============================== */ 

.w-spec-table { width: min(100%, 920px); 
border-collapse: separate; 
border-spacing: 0; 
/*table-layout: fixed; classで変更*/ 
font-size: var(--w-spec-font-base); 
color: var(--w-spec-text-main); 
} 
.w-spec-table th, .w-spec-table td { 
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--w-spec-border); 
	vertical-align: middle; 
	/*min-width: 200px!important; 20251120*/ 
} 
.w-spec-table th { font-weight: normal; } 
.w-spec-table thead { background: var(--w-spec-head-bg); } 
.w-spec-table thead th { 
	position: sticky; 
	top: 0; 
	z-index: 5; 
	text-align: center; 
	border-bottom: 1px solid var(--w-spec-border-strong); 
	font-size: var(--w-spec-font-heading); 
	color: var(--w-spec-head-text); 
} 

/* 左上セル */ 
.w-spec-table thead th:first-child { 
	background: var(--w-spec-sticky-bg); 
	color: var(--w-spec-sticky-text); 
	text-align: left; 
	z-index: 30 !important; 
	position: sticky; 
	left: 0; } 
.w-spec-sticky-left { min-width: clamp(150px, 22vw, 190px); } 
/* 画像ヘッダー */ 
.w-spec-table thead th a { 
	display: flex; 
	flex-direction: column; 
	align-items: center; 
	gap: 0.35rem; 
	text-decoration: none; color: inherit; 
	position: relative;   /* stacking context を明確化 */
	z-index: 40;          /* wrap の pseudo 要素（z-index:20）より上に */
	pointer-events: auto; /* 念のため */
} 
.w-spec-table thead th img { 
	object-fit: contain; 
	border-radius: 0.5rem; 
	background: #ffffff; 
	box-shadow: 0 4px 12px rgba(15, 30, 65, 0.08); 
	max-width: clamp(65px, 8vw, 110px); } 
/* 製品型番（thead 内の div） */ 
.w-spec-table thead th a > div { 
font-family: Oswald, sans-serif; 
	font-size: var(--w-spec-font-model);
	font-weight: 600; 
	color: var(--w-spec-head-sub); 
	letter-spacing: 0.02em; 
	line-height: 1.1; } 
/* sticky 左列 */ 
.w-spec-table tbody th:first-child { 
	position: sticky; 
	left: 0; 
	z-index: 6; 
	background: var(--w-spec-sticky-bg); 
	color: var(--w-spec-sticky-text); 
	white-space: nowrap; 
} 
/* ボーダー */ .w-spec-table tbody td { text-align: center; } 
.w-spec-table thead th:not(:first-child), 
.w-spec-table tbody td { border-left: 1px solid var(--w-spec-border); } /* ゼブラ */ 
.w-spec-table tbody tr:nth-child(odd) td { 
	background: var(--w-spec-bg); } 
.w-spec-table tbody tr:nth-child(even) td { 
	background: var(--w-spec-bg-alt); } /* 行ホバー */ 
.w-spec-table tbody tr:hover td { 
	
	background: var(--w-spec-bg-hover); } 
.w-spec-table tbody tr:hover th:first-child { 
	background: var(--w-spec-sticky-bg-hover); } 
/* 見ている列ラベル */ 
.w-spec-table thead th.w-col-current::before { 
	content: "閲覧中"; 
	position: absolute; 
	top: 10%; left: 20%; 
	transform: translateX(-50%); 
	padding: 0.1rem 0.45rem; 
	border-radius: 999px; 
	background: var(--w-spec-badge-bg); 
	color: var(--w-spec-badge-text); 
	font-size: var(--w-spec-font-xsmall); z-index: 41; } 
/* ============================== 
tbody 内の <span>（補足）
============================== */ 
.w-spec-table tbody span { 
	display: inline-block; 
	margin-left: 0.15rem; 
	font-size: var(--w-spec-font-small); 
	color: var(--w-spec-text-sub); 
	font-weight: 400; } 
/* ul / li */ 
.w-spec-table tbody td ul { 
	display: inline-block; 
	text-align: left; margin: 0; 
	padding: 0 0 0 1.2em; 
	/* 左の字下げでビュレットの余白を確保 */ 
	text-align: left; 
	/* UL内テキストは左寄せ */ 
	list-style: disc; 
	/* ビュレットを表示（空欄はNG） */ 
	max-width: 100%; 
	/* 親幅を超えない */ 
	/* 任意：視覚的安定のための最小幅（短文で細くなりすぎるのを防ぐ） */ min-width: 12ch; /* “文字幅”基準で最小幅を確保 */ } 
.w-spec-table tbody td li { 
	line-height: 1.4; 
	margin: 0.1rem 0; 
	font-size: var(--w-spec-font-base); 
	/* 折り返し挙動の安定化（日本語・英数字混在対策） */ 
	white-space: normal; 
	word-break: break-word; /* 長い英数語でのはみ出しを防ぐ */ } .w-spec-table tbody td li span { 
		font-size: var(--w-spec-font-xsmall); 
		color: var(--w-spec-text-sub); } 
.w-spec-table td ul li span { 
	display:block; 
	white-space: nowrap; 
	/* 例：（ライナー付き）を改行させない */ 
} 
/* ============================== 
カスタムスクロールバー（上下）
============================== */ 

/* 矢印を入れるため、全体を入れるコンテナ*/ 
.w-spec-container{
	margin:0; 
	padding:0 10px
} 

.w-spec-scroll-wrap { 
	width: 100%; 
	max-width: 100%; 
	margin: 0 auto; 
	position: relative; 
	height: 10px; 
} 

.w-scroll-arrow-left, 
.w-scroll-arrow-right { 
	position: absolute; 
	top: 50%; 
	transform: translateY(-50%); 
	font-size: 22px; 
	color: #8893a8; 
	pointer-events: none; 
} 
.w-scroll-arrow-left { left: 0px; } 
.w-scroll-arrow-right { right: 0px; } 
.w-spec-scroll { 
	flex: 1; height: 10px; 
	overflow-x: auto; 
	overflow-y: hidden; 
	cursor: grab; } 
.w-spec-scroll-inner { height: 100%; min-height: 10px; } 
.w-spec-scroll::-webkit-scrollbar { height: 10px; } 
.w-spec-scroll::-webkit-scrollbar-thumb { 
	background: rgba(140, 155, 185, 0.6); 
	border-radius: 999px; } 
/* Firefox用のみ */ 
@-moz-document url-prefix() { 
		.w-spec-scroll { scrollbar-width: thin; scrollbar-color: rgba(140, 155, 185, 0.6) transparent; 
	} 
} 



/*スクロールバーのarrow*/ 
.w-spec-scroll-arrow { 
	position: relative; 
	margin-top: 0px 
		/*display: flex; justify-content: center; margin-block: 10px*/ } .w-scroll-arrowL,
.w-scroll-arrowR{
	position: absolute;
	top:5px;} 
.w-scroll-arrowL{left:-20px;} 
.w-scroll-arrowR{right:-20px;} 
.w-spec-scroll-arrow span { 
	line-height: 0; 
	color: var(--w-spec-text-sub); 
} 
/*//////////////////////////////////*/ 
/*/セル幅調整/////////////////////////*/ /*//////////////////////////////////*/ 
/* 左列は固定幅 */ 
.w-spec-table th:first-child, 
.w-spec-table td:first-child { 
	width: 160px !important; 
	width: clamp(140px, 18vw, 200px); 
	min-width: 120px; max-width: 220px; 
font-size: 0.8rem} 

/* 列数が3以下ならテーブル全体を親DIV幅いっぱいに */ 
.w-spec-table.w-spec-col2, 
.w-spec-table.w-spec-col3 { 
	width: 100%; 
	/* 親DIVにフィット */ 
	table-layout: fixed; 
} /* 列数が4以上のTable幅 */ 

.w-spec-table.w-spec-col4-more, 
.w-spec-table.w-spec-col4-more { 
	table-layout: fixed; width: 100%; } 

/* 列数が4以上のセル幅 */ .w-spec-table.w-spec-col4-more th:not(:first-child), .w-spec-table.w-spec-col4-more td:not(:first-child) { width: 250px; min-width: 230px; } 

@media (min-width: 1200px) {} 
@media (min-width: 992px) and (max-width: 1199.98px) {} 
@media (min-width: 768px) and (max-width: 991.98px) { 
	.w-spec-table.w-spec-col4-more th:not(:first-child), 
	.w-spec-table.w-spec-col4-more td:not(:first-child) { 
		width: 200px; min-width: 180px; 
	}

}
@media (max-width: 767.98px) { 
	.w-spec-table th:first-child, 
.w-spec-table td:first-child { 
	width: 120px !important; 
	width: clamp(100px, 16vw, 160px); 
	min-width: 80px; 
	max-width: 180px; 
font-size: 0.8rem;
	} 
	.w-spec-table.w-spec-col4-more th:not(:first-child), 
	.w-spec-table.w-spec-col4-more td:not(:first-child) { 
			width: 140px; min-width: 130px; } 
} 
@media (max-width: 480px) { 
	.w-spec-table th:first-child, 
.w-spec-table td:first-child { 
	width: 120px !important; 
	width: clamp(100px, 16vw, 160px); 
	min-width: 80px; 
	max-width: 180px; 
font-size: 0.8rem;
	} 
.w-spec-table.w-spec-col4-more th:not(:first-child), 
.w-spec-table.w-spec-col4-more td:not(:first-child) { 
	width: 130px; min-width: 120px; } 
}