/* PC表示用のスタイル */
.table-container {
width: 1200px;
max-width: 100%;
margin: 0 auto;
padding: 0 10px;
overflow-x: auto;
}

.product-table {
width: 1180px;
min-width: 1180px;
border-collapse: collapse;
border-left: none;
border-top: none;
font-size: 14px;
line-height: 1.2;
}

/* 列幅の設定 */
.product-table th:first-child,
.product-table td:first-child {
width: 120px;
min-width: 120px;
}

/* ネットワークの縦書きセルは最小幅 */
.network-vertical {
width: 35px !important;
min-width: 35px !important;
}

.product-table th:nth-child(2),
.product-table td:nth-child(2) {
width: 180px;
min-width: 180px;
}

.product-table th:nth-child(n+3),
.product-table td:nth-child(n+3) {
width: 140px;
min-width: 140px;
}

.product-table th {
background-color: #333;
color: #ffffff;
font-weight: bold;
text-align: center;
padding: 8px 4px;
border: 1px solid #ccc;
}

.product-table td {
padding: 8px 4px;
border: 1px solid #ccc;
text-align: center;
}

.row-header {
text-align: center;
border-left: 1px solid #ccc;
font-weight: bold;
}

.vertical-text {
writing-mode: vertical-rl;
text-orientation: upright;
}

/* 筐体 */
.housing-header {
background-color: #b3d9ff;
color: #2c5282;
}
.housing-cell {
background-color: #e8f2ff;
line-height:1.1;
}

/* スループット */
.throughput-header {
background-color: #b8e6c1;
color: #2f855a;
}
.throughput-cell {
background-color: #e8f5e8;
line-height:1.1;
}

/* ネットワーク */
.network-header {
background-color: #ffd4c4;
color: #c53030;
}
.network-cell {
background-color: #fff0eb;
line-height:1.1;
}

/* 重さ */
.weight-header {
background-color: #d6c7dd;
color: #553c9a;
}
.weight-cell {
background-color: #f4ecf7;
line-height:1.1;
}

/* 大きさ */
.size-header {
background-color: #fde4b8;
color: #b7791f;
}
.size-cell {
background-color: #fdf2e9;
line-height:1.1;
}

/* 電力 */
.power-header {
background-color: #f5b7b1;
color: #c53030;
}
.power-cell {
background-color: #fdeaea;
line-height:1.1;
}

/* Coming soonの列を白色に */
.coming-soon-cell {
background-color: #ffffff;
color: #999999;
}

.small-text {
font-size: 11px;
margin-top:0;
}

.product-table img {
max-width: 100%;
height: auto;
}

/* モバイル表示用のスタイル */
@media (max-width: 768px) {
.table-container {
width: 100%;
padding: 0 5px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}

.product-table {
font-size: 12px;
line-height: 1.1;
}

.product-table th,
.product-table td {
padding: 3px 2px;
white-space: nowrap;
}

/* モバイルでは画像サイズを調整 */
.product-table img {
max-width: 100px;
height: auto;
}

/* 縦書きテキストをモバイルでは横書きに */
.vertical-text {
writing-mode: horizontal-tb;
text-orientation: mixed;
}
}

/* タブレット表示用 */
@media (min-width: 769px) and (max-width: 1199px) {
.table-container {
width: 100%;
padding: 0 10px;
}

.product-table {
width: 100%;
min-width: 900px;
}
}