/*メーカーシリーズ一覧ページ用*/
.pagewrap{padding: 0 3px;
  --tableColor01: #111;
  --tableColor02: #ccc;
  --tableColor03: #eee;
}

table{width:1800px; margin: 0 auto 20vh; height: 100vh; border-collapse: collapse; position: relative; border-left: 1px solid var(--tableColor01); border-top: 1px solid var(--tableColor01); background: var(--colorwt);}
/* TD */
.data{border-right: 1px solid var(--tableColor01); border-bottom: 1px solid var(--tableColor01); margin: 0 auto; text-align: center; padding:0.5rem; background: var(--colorwt);}
.data small{display: block; font-size: 90%;}
/* シリーズタイトル */
.series_title{position: sticky; top:4rem; z-index: 20; border-right: 1px solid var(--tableColor01); vertical-align:top; width: 230px; padding:0.5rem; background: var(--colorwt);}
.series_title::before{content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; border-bottom: 1px solid var(--tableColor01); pointer-events: none;}
.series_title figure img{margin-bottom: 0.3rem;}
.series_title .btn{color: var(--colorwt);}
.st_txxl{font-size: 160%; font-weight: 300;}
.st_txs{font-size: 78%;}
.series_head{color:var(--colorwt); width: 100%; height: 80px; border-radius: 10px 0 10px 0; font-weight: normal;}

/* 升 */
.mass{ position: sticky; top:4rem; left:0; z-index: 30; vertical-align:top; width: 1vw; background: var(--colorwt); background-image: linear-gradient(to left top, transparent calc(50% - 0.5px), #111 50%, #111 calc(50% + 0.5px), transparent calc(50% + 1px));}
.mass::before{content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0;  border-right: 1px solid var(--tableColor01); border-bottom: 1px solid var(--tableColor01); pointer-events: none;}
/* 機能タイトル */
.st-tbl .title{position: sticky; left:0; z-index: 10; white-space: nowrap;border-bottom: 1px solid var(--tableColor01); padding:0.5rem; background: var(--colorwt); text-align: center;}
.st-tbl .title::before {content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0;  border-right: 1px solid var(--tableColor01);  pointer-events: none;}
.st-tbl:nth-child(odd) td{background: var(--tableColor03); }   

/* 一覧タイトル */
.head{position: sticky; z-index: 50; top:0; left: 0; width: 1800px; height: 4rem; margin: 0 auto; background: var(--tableColor01); color: var(--colorwt); vertical-align: middle; line-height: 1; padding-top:1rem; }
.head p{position: sticky; z-index: 60; top:0; left: 10px;}
.head p small{font-size: 60%;}

/*選択行の背景色*/
table tr.st-tbl:has(td:where(.data, .title):hover) td:where(.data, .title){background-color: var(--tableColor02);} 

/*選択列の背景色*/
table:has(td:where(.data, .series_title):nth-last-child(1):hover) td:where(.data, .series_title):nth-last-child(1) {background-color: var(--tableColor02);}
table:has(td:where(.data, .series_title):nth-last-child(2):hover) td:where(.data, .series_title):nth-last-child(2) {background-color: var(--tableColor02);}
table:has(td:where(.data, .series_title):nth-last-child(3):hover) td:where(.data, .series_title):nth-last-child(3) {background-color: var(--tableColor02);}
table:has(td:where(.data, .series_title):nth-last-child(4):hover) td:where(.data, .series_title):nth-last-child(4) {background-color: var(--tableColor02);}
table:has(td:where(.data, .series_title):nth-last-child(5):hover) td:where(.data, .series_title):nth-last-child(5) {background-color: var(--tableColor02);}
table:has(td:where(.data, .series_title):nth-last-child(6):hover) td:where(.data, .series_title):nth-last-child(6) {background-color: var(--tableColor02);}
table:has(td:where(.data, .series_title):nth-last-child(7):hover) td:where(.data, .series_title):nth-last-child(7) {background-color: var(--tableColor02);}

/*選択行列の交差セル背景色*/
table:has(.data:hover) .data:hover {background-color: #fffa00;}

@media screen and (max-width: 750px) {
  table{width: 100%!important;margin: 0 auto 0vh!important;}
  .head{width: 247vw!important;}
  .st_txxl{font-size: 100%;}
  .series_head{height: auto; width: 100px;}
  .st-tbl .title,.data{padding: 0.1rem 0.3rem; font-size: 80%;}
  .btn{font-size: 80%;}
  .series_head>p{font-size: 70%; padding: 5px;}
}