@charset "UTF-8";

/***************
  main
****************/
/*--全体--*/
body {
	text-align: left;
	background-color: #454545;
	margin-right: none;
	margin-left : 300px;
}
h2 {
	font-size: 36px;
	color: #fff;
}
input {
	color: #fff;
	background-color: #949494;
	
/*キャラ情報*/
}
#job,#attribute,#wepon {
	color: #fff;
	background-color: #949494;
}
.charatext {
	font-size: 24px;
	color: #fff;
	background-color: #3D3D3D;
}
input,#job,#attribute,#wepon {
	font-size: 24px;
}
#age,#sex {
	width: 48px;
}
#name,#yomi {
	width: 400px;
}
#country {
	width: 350px;
}
.status th,.status td {
	border: 2px solid;
	text-align: center;
	width: 3em;
}
.text {
    display: inline-block;
    width: 100%;
    padding: 0.5em;
    border: 1px solid #999;
    box-sizing: border-box;
    background: #f2f2f2;
    margin: 0.5em 0;	
}
#section label{
	background-color: #7F7F7F;
}

.frame1,.frame2 {
	white-space: nowrap;
	border-left: 2px solid;
	border:2px solid;
	font-size: 24px;
	color:#fff;
	background-color: #7f7f7f;

}
.frame1 #db,#mdb {
	height: 35px;
	width: 6em;

}
.frame2 tr th,.frame2 tr td{
	height: 35px;
	width: 4em;
	border:2px solid;
	text-align: center;
	white-space: nowrap;
	border-left: 2px solid;
	font-size: 24px;
	color:#fff;
}
#skill input{
	width:4em;
	text-align: center;
}
.skill {
	border:2px solid;
	font-size: 24px;
	color:#fff;
	background-color: #7F7F7F;
}
.skill td {
	border: none;
}
#skillp {
	text-align: right;
}
#skillp2 {
	text-align: left;
}

.hide {
    display: none;
}
/*test用*/
#test{
	color:aliceblue;
}


/*魔法リスト用*/
.mselect ul {
	display: flex;
}


.filter li {
	cursor: pointer;
	list-style: none;
	border:2px solid;
	font-size: 18px;
	color:#000;
	background-color: #fff;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-right: 10px;
	padding-left: 10px;
}

.filter li.mfilter {
  color: red;
}

.category tr {
  display: none;
}

.category tr.activ {
  display: table-row;
}
#mselect{
	width: 1550px;
}
#nosc {
	width: 1550px;
	max-height: 200em;
	margin-bottom: 150px;
		
}
#mlist .activ{
	white-space: nowrap;
	border-left: 2px solid;
	border:2px solid;
	font-size: 24px;
	color:#fff;

}
#mlist tr th{
	width:auto;
	text-align: center;
	border:2px solid;
	height: 1em;
}
#mlist tr td{
	width:auto;
	text-align: center;
	border:2px solid;
	height: 1em;
	color:#454545;
}
.hover:hover{
	background-color: aliceblue;
}
/*属性で色変更*/
tr[data-attr='無'] {
  background: #BBB;
}
tr[data-attr='火'] {
  background: #FFB5B6;
}
tr[data-attr='水'] {
  background: #C6FAFF;
}
tr[data-attr='風'] {
  background: #87FF82;
}
tr[data-attr='土'] {
  background: #FFC28D;
}
tr[data-attr='光'] {
  background: #FFFE8D;
}
tr[data-attr='闇'] {
  background: #FFCAF1;
}
tr[data-attr='火水'] {
  background: linear-gradient(to right,#FFB5B6,#C6FAFF);
}
tr[data-attr='風土'] {
  background: linear-gradient(to right,#87FF82,#FFC28D);
}
tr[data-attr='光闇'] {
  background: linear-gradient(to right,#FFFE8D,#FFCAF1);
}
/*魔法リスト選択*/
.mli table{
  width: 100%;
  border-collapse: collapse;
}
.row ,.activ{
  cursor: pointer;
}

.row.selected {
  background-color: cornflowerblue;
}
.tbscroll {
	overflow-y: auto;
	height: 800px;
	width: 1555px;
	-webkit-overflow-scrolling: touch;
}
.activ th {
	position: sticky;
	top: 0;
	left: 0;
	border-top: none;
	background-color: #5B5B5B;
}
/***************
  footer
****************/
#footer-fix {
  width:1550px;
  position:fixed;
  bottom:0;
  text-align:center;
  background:#eee;
  padding:1px 0 0 0;
  font-size:14px;
}
#footer-fix  #footer-fix-menu {
  text-align :center;
  padding :0;
  display :table;
  width :100%;
}
#footer-fix  #footer-fix-menu li {
  display :table-cell;
  width :25%;
  background :#eee;
  padding :0;
  margin :0;
  height :60px;
  position :relative;
  vertical-align :middle;
  border: 1px solid #ffffff;
  font-size:13px;
}
#footer-fix  #footer-fix-menu li:hover {
  opacity :0.9;
}
#footer-fix  #footer-fix-menu li a {
  display :block;
  position :absolute;
  top :0;
  left :0;
  width :100%;
  height :100%;
}