<head>
<style type="text/css">
/* 装備イメージ大きさ */
img.soubi1 {
	width: 7.0rem;
}

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

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

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

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

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

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

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

/* himehyo table 列*/

.himehyo_table th.no,
.himehyo_table td.no {
	display: inline-block;
	width: 1.3rem;
	line-height: 3.0rem;
	background: #fff;
	left: 0rem;
	z-index: 2;
}

.himehyo_table th.img,
.himehyo_table td.img {
	display: inline-block;
	width: 3.0rem;
	line-height: 3.0rem;
	background: #fff;
	left: 0rem;
	z-index: 2;
}

.himehyo_table th.name,
.himehyo_table td.name {
	display: inline-block;
	width: 10.0rem;
	line-height: 3.0rem;
	background: #fff;
	z-index: 1;
}

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

.himehyo_table th.type,
.himehyo_table td.type {
	display: inline-block;
	width: 2.0rem;
	line-height: 3.0rem;
	background: #fff;
}

.himehyo_table th.durable,
.himehyo_table td.durable {
	display: inline-block;
	width: 2.0rem;
	line-height: 3.0rem;
	background: #fff;
}

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


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

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

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

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


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

.himehyo_table th.armor,
.himehyo_table td.armor {
	display: inline-block;
	width: 1.3rem;
	line-height: 3.0rem;
	background: #fff;
}

.himehyo_table th.range,
.himehyo_table td.range {
	display: inline-block;
	width: 1.3rem;
	line-height: 3.0rem;
	background: #fff;
}


/* himehyo table 列固定場所*/


.himehyo_table thead th.blank-no{
	position: -webkit-sticky;
	position: sticky;
	width: 1.3rem;
	line-height: 3.0rem;
	top: 0;
	left: 0;
	z-index: 4;
}

.himehyo_table thead th.blank-img{
	position: -webkit-sticky;
	position: sticky;
	width: 3.0rem;
	line-height: 3.0rem;
	top: 0;
	left: 0;
	z-index: 5;
}

.himehyo_table thead th.blank-name{
	position: -webkit-sticky;
	position: sticky;
	width: 10.0rem;
	line-height: 3.0rem;
	top: 0;
	left: 0rem;
	z-index: 4;
}

.himehyo_table thead th.blank-level{
	position: -webkit-sticky;
	position: sticky;
	width: 1.0rem;
	line-height: 3.0rem;
	top: 0;
	left: 0rem;
	z-index: 4;
}

/* himehyo table 列ここまで*/

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

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

/* ボックス周り影 */
.himehyo_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);
}
.himehyo_table:hover {
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}


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


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

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

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

.himehyo_table tbody th.img {
	text-align: center;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

</style>
</head>


