<head>
<style type="text/css">
table {width: 100%;
	border: 2px #2b2b2b solid;
}
/* 表内折り返しなし */

td.soubi,th.soubi { 
	white-space: nowrap;
	text-align: center;
}
td.soubi1,th.soubi1 { 
	width: 3%;
	white-space: nowrap;
	text-align: center;
}
td.soubi2,th.soubi2 { 
	width: 15%;
	white-space: nowrap;
	text-align: center;
}
td.soubi3,th.soubi3 { 
	width: 5%;
	white-space: nowrap;
	text-align: center;
}

/* テキスト大きさ */

@media (max-width: 2000px) {
	.table-scroll {
	overflow-x: scroll;
}
}

/* 装備イメージ大きさ */
img.soubi1 {
	width: 7.0rem;
}

/* 装備一覧行列固定 */
/* sticky table */

.sticky_table {
	display: block;
	position: relative;
	overflow: scroll;
	width: calc(100%);
	height: calc(150vh);
	border-collapse: collapse;
	font-size: 0;
}

/* sticky table セル*/
.sticky_table th,
.sticky_table td {
	display: inline-block;
	height: 1.2rem;
	background: #fff;
	font-size: 0.7rem;
	white-space: nowrap;
}

/* sticky table 行*/
.sticky_table thead,
.sticky_table tbody {
	display: block;
	width: -webkit-max-content;
	width: -moz-max-content;
	width: max-content;
}

.sticky_table tbody th {
	position: -webkit-sticky;
	position: sticky;
	z-index: 1;
}

.sticky_table thead {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 4;
}

/* sticky table 列*/
.sticky_table th.no,
.sticky_table td.no {
	display: inline-block;
	width: 1.5rem;
	line-height: 1.2rem;
	background: #fff;
	left: 0rem;
	z-index: 1;
}
.sticky_table th.img,
.sticky_table td.img {
	display: inline-block;
	width: 7.0rem;
	line-height: 1.2rem;
	background: #fff;
	left: 0rem;
	z-index: 1;
}

.sticky_table th.img2,
.sticky_table td.img2 {
	display: inline-block;
	width: 8.5rem;
	line-height: 1.2rem;
	background: #fff;
	z-index: 2;
}

.sticky_table th.level,
.sticky_table td.level {
	display: inline-block;
	width: 0.7rem;
	line-height: 1.2rem;
	background: #fff;
	left: 0rem;
	z-index: 1;
}

.sticky_table th.level2,
.sticky_table td.level2 {
	display: inline-block;
	width: 0.8rem;
	line-height: 1.2rem;
	background: #fff;
	left: 0rem;
	z-index: 1;
}

.sticky_table th.name,
.sticky_table td.name {
	display: inline-block;
	width: 9.0rem;
	line-height: 1.2rem;
	background: #fff;
	left: 0rem;
	z-index: 2;
}

.sticky_table th.type,
.sticky_table td.type {
	display: inline-block;
	width: 4.0rem;
	line-height: 1.2rem;
	background: #fff;
}

.sticky_table th.endurance,
.sticky_table td.endurance {
	display: inline-block;
	width: 1.3rem;
	line-height: 1.2rem;
	background: #fff;
}

.sticky_table th.heating-power,
.sticky_table td.heating-power {
	display: inline-block;
	width: 1.3rem;
	line-height: 1.2rem;
	background: #fff;
}

.sticky_table th.torpedo,
.sticky_table td.torpedo {
	display: inline-block;
	width: 1.3rem;
	line-height: 1.2rem;
	background: #fff;
}

.sticky_table th.defense,
.sticky_table td.defense {
	display: inline-block;
	width: 1.3rem;
	line-height: 1.2rem;
	background: #fff;
}

.sticky_table th.anti-aircraft,
.sticky_table td.anti-aircraft {
	display: inline-block;
	width: 1.3rem;
	line-height: 1.2rem;
	background: #fff;
}

.sticky_table th.hit,
.sticky_table td.hit {
	display: inline-block;
	width: 1.3rem;
	line-height: 1.2rem;
	background: #fff;
}

.sticky_table th.avoidance,
.sticky_table td.avoidance {
	display: inline-block;
	width: 1.3rem;
	line-height: 1.2rem;
	background: #fff;
}

.sticky_table th.luck,
.sticky_table td.luck {
	display: inline-block;
	width: 1.3rem;
	line-height: 1.2rem;
	background: #fff;
}

.sticky_table th.speed,
.sticky_table td.speed {
	display: inline-block;
	width: 1.3rem;
	line-height: 1.2rem;
	background: #fff;
}

.sticky_table th.bombing,
.sticky_table td.bombing {
	display: inline-block;
	width: 1.3rem;
	line-height: 1.2rem;
	background: #fff;
}


.sticky_table th.through,
.sticky_table td.through {
	display: inline-block;
	width: 1.3rem;
	line-height: 1.2rem;
	background: #fff;
}

.sticky_table th.recovery,
.sticky_table td.recovery {
	display: inline-block;
	width: 1.3rem;
	line-height: 1.2rem;
	background: #fff;
}

.sticky_table th.remodeling-before,
.sticky_table td.remodeling-before {
	display: inline-block;
	width: 9.0rem;
	line-height: 1.2rem;
	background: #fff;
	left: 2.0rem;
}

.sticky_table th.remodeling-after,
.sticky_table td.remodeling-after {
	display: inline-block;
	width: 9.0rem;
	line-height: 1.2rem;
	background: #fff;
	left: 2.0rem;
}

.sticky_table th.detail,
.sticky_table td.detail {
	display: inline-block;
	width: 9.0rem;
	line-height: 1.2rem;
	background: #fff;
	left: 2.0rem;
}
/* sticky table 列固定場所*/

.sticky_table thead th.blank-no{
	position: -webkit-sticky;
	position: sticky;
	width: 1.5rem;
	line-height: 1.2rem;
	top: 0;
	left: 0;
	z-index: 3;
}

.sticky_table thead th.blank-img{
	position: -webkit-sticky;
	position: sticky;
	width: 7.0rem;
	line-height: 1.2rem;
	top: 0;
	left: 0;
	z-index: 3;
}

.sticky_table thead th.blank-name{
	position: -webkit-sticky;
	position: sticky;
	width: 9.0rem;
	line-height: 1.2rem;
	top: 0;
	left: 0rem;
	z-index: 4;
}

.sticky_table thead th.blank-level{
	position: -webkit-sticky;
	position: sticky;
	width: 0.7rem;
	line-height: 1.2rem;
	top: 0;
	left: 0rem;
	z-index: 4;
}

.sticky_table thead th.blank-level2{
	position: -webkit-sticky;
	position: sticky;
	width: 0.8rem;
	line-height: 1.2rem;
	top: 0;
	left: 0rem;
	z-index: 4;
}

/* sticky table 列ここまで*/

/* 装備一覧デザイン */
/* design */

body {
	font-family: 'Noto Sans', sans-serif;
	padding: .3rem;
}

/* ボックス周り影 */
.sticky_table {
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.sticky_table:hover {
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}


.sticky_table table {
	border: 1px solid #CFD8DC;
}

/* 装備一覧デザイン セル*/
.sticky_table th {
	font-weight: bold;
}

.sticky_table td {
	font-weight: normal;
	text-align: center;
}

/* 装備一覧デザイン tbody th*/
.sticky_table tbody th.img {
	text-align: center;
}

.sticky_table tbody th.img2 {
	text-align: left;
}

.sticky_table tbody th.name {
	text-align: center;
}

.sticky_table tbody th.level {
	text-align: center;
}

.sticky_table tbody th.level2 {
	text-align: center;
}
.sticky_table thead th {
	background: #000000;
	color: #E0E0E0;
	text-align: center;
}

/* 装備一覧デザイン thead th*/
.sticky_table thead th.no {
	background: #000000;
	color: #E0E0E0;
	font-weight: bold;
	text-align: center;
}

.sticky_table thead th.img {
	background: #000000;
	color: #E0E0E0;
	font-weight: bold;
	text-align: center;
}

.sticky_table thead th.img2 {
	background: #000000;
	color: #E0E0E0;
	font-weight: bold;
	text-align: center;
}

.sticky_table thead th.name {
	background: #000000;
	color: #E0E0E0;
	font-weight: bold;
	text-align: center;
}

.sticky_table thead th.level {
	background: #000000;
	color: #E0E0E0;
	font-weight: bold;
	text-align: center;
}

.sticky_table thead th.level2 {
	background: #000000;
	color: #E0E0E0;
	font-weight: bold;
	text-align: center;
}

.sticky_table thead th.type {
	background: #000000;
	color: #E0E0E0;
	font-weight: bold;
	text-align: center;
}

.sticky_table thead th.endurance {
	background: #000000;
	color: #E0E0E0;
	font-weight: bold;
	text-align: center;
}

.sticky_table thead th.heating-power {
	background: #000000;
	color: #E0E0E0;
	font-weight: bold;
	text-align: center;
}

.sticky_table thead th.torpedo {
	background: #000000;
	color: #E0E0E0;
	font-weight: bold;
	text-align: center;
}

.sticky_table thead th.defense {
	background: #000000;
	color: #E0E0E0;
	font-weight: bold;
	text-align: center;
}

.sticky_table thead th.anti-aircraft {
	background: #000000;
	color: #E0E0E0;
	font-weight: bold;
	text-align: center;
}

.sticky_table thead th.hit {
	background: #000000;
	color: #E0E0E0;
	font-weight: bold;
	text-align: center;
}

.sticky_table thead th.avoidance {
	background: #000000;
	color: #E0E0E0;
	font-weight: bold;
	text-align: center;
}

.sticky_table thead th.luck {
	background: #000000;
	color: #E0E0E0;
	font-weight: bold;
	text-align: center;
}

.sticky_table thead th.speed {
	background: #000000;
	color: #E0E0E0;
	font-weight: bold;
	text-align: center;
}

.sticky_table thead th.bombing {
	background: #000000;
	color: #E0E0E0;
	text-align: center;
}

.sticky_table thead th.through {
	background: #000000;
	color: #E0E0E0;
	font-weight: bold;
	text-align: center;
}

.sticky_table thead th.recovery {
	background: #000000;
	color: #E0E0E0;
	font-weight: bold;
	text-align: center;
}

.sticky_table thead th.remodeling-before {
	background: #000000;
	color: #E0E0E0;
	font-weight: bold;
	text-align: center;
}

.sticky_table thead th.remodeling-after {
	background: #000000;
	color: #E0E0E0;
	font-weight: bold;
	text-align: center;
}

.sticky_table thead th.detail {
	background: #000000;
	color: #E0E0E0;
	font-weight: bold;
	text-align: center;
}

.sticky_table tbody tr:nth-child(even) th {
	background: #222222;
	color: #FFFFFF;
}
.sticky_table tbody tr:nth-child(even) td {
	background: #f0f0f0;
}
.sticky_table tbody tr:nth-child(odd) th {
	background: #222222;
	color: #FFFFFF;
}
.sticky_table tbody tr:nth-child(odd) td {
	background: #FAFAFA;
}

</style>
</head>


