@charset "utf-8";


body{ width:85%; }
table{ border-collapse: collapse; border-spacing: 0; }
button{ cursor:pointer; }
dd, dl{ margin:5px 8px; }
ul{ display:flex; list-style:none; margin:0; padding:0; font-size:12px; text-align:left; }
ol{ margin:0 3px; padding:0; font-weight:bold; white-space:nowrap; }


/* 文字 */
h2{
  display:inline-block;
  font-size:14px;
  margin-bottom:0;
}
h3{
  font-size:14px;
  font-weight:normal;
  width:80%;
}
h4{
  display:inline-block;
  font-size:12px;
  font-weight:normal;
  text-decoration:under-line;
  color:blue;
  margin:3px;
}
h5{
  margin:0 -18px;
  padding:0;
  font-weight:normal;
  font-size:13px;
  letter-spacing:-1;
  transform: scale(0.8, 1);
}
h6{
  display:inline-block;
  position:relative;
  font-weight:bold;
  margin:0 5px;
}
h6 p{
  display:inline-block;
  margin:0;
  cursor:pointer;
  transition:0.3s;
}
h6 p:first-of-type:hover{ opacity:0.5; }
h6 p:last-of-type{
  display:none;
  width:300px;
  position:absolute;
  top:-70%;
  left:30px;
  padding:5px 10px;
  background:rgba(255,255,255,0.8);
  border-radius:5px;
  color:#000;
  font-size:13px;
  font-weight:normal;
  line-height:14px;
}
h6:hover p{ display:block; }
h7{
  background:#999;
  color:#fff;
  font-weight:bold;
  font-size:10px;
  margin:0 3px 0 3px;
  padding:0 3px;
  border-radius:3px;
}
h8{
  color:blue;
  cursor: pointer;
  transition: 0.3s;
}
h8:hover {
  opacity:0.6;
}
h9{
  display:block;
  font-weight:bold;
  margin-bottom:-7px;
}


.ver20, .ver25{
  display:inline-block;
  background:#555;
  color:#fff;
  font-weight:bold;
  font-size:11px;
  width:30px;
  margin:0 3px;
  border-radius:5px;
  text-align:center;
}
.ver25{
  background:#000;
}
.sign{
  margin:3px 3px -3px 0;
}


/* サイドメニュー */
nav{
  position:fixed;
  top:0;
  left:0;
  width:80px;
  height:98%;
  padding:13px 13px;
  text-align:center;
}
nav a{
  display:inline-block;
  font-size:14px;
}
nav div{
  margin:10px 0px;
}

.btn_ex{
  font-size:12px;
  transition:0.3s;
  cursor:pointer;
}
.btn_ex:hover{
  background-color:rgba(0,0,0,0.3);
}
.mobile{
  display:none;
}




/* データ表示 */
.contents, .contents2{
  margin:25px -120px 0px 110px;
}
.tbl div{
  margin:5px 8px;
}
.contents table{
  font-size:12px;
  text-align:center;
}
.tbl tr:nth-of-type(even){
  background-color:#fff;
}
.tbl tr:nth-of-type(odd){
  background-color:#ddd; 
}
.tbl th{
  background-color:#111;
  color:#fff;
  padding:5px 3px;
}
.contents td{
  color:#111;
  padding:5px 3px;
  cursor:pointer;
  transition:0.3s;
}
.num td:last-of-type{
  text-align:left;
  padding-left:5px;
}
.num{
  transition:0.3s;
}
.num:hover{
  background-color:#bfdeff !important;
}
.type1 th, .type1 td {
  border-right:1px solid #aaa;
}
table{
  border:1px solid #000;
}
th:last-of-type, td:last-of-type{
  border-right:1px solid #000;
}
.fairy_tbl{
  margin:3px 0 !important;
}
.fairy_tbl td{
  border-top:none !important;
  border-bottom:none !important;
  text-align:center;
}


/* 詳細ボックス */
.box{
  display:none;
  position:fixed;
  bottom:10%;
  right:10px;
  background:#fff;
}
.box table{
  font-size:13px;
  text-align:center;
  border:1px solid #000;
  box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.8);
  z-index:20;
}
.box tr:nth-of-type(2) td, .style_magi_box tr:nth-of-type(2) td{
  width:115px;
  line-height:15px;
}
.box td p{
  margin:0 -9px;
  padding:0;
  letter-spacing:-0.5;
  transform: scale(0.9, 1);
}
.box th, .style_magi_box th{
  width:40px;
  font-size:12px;
  padding:1px 2px;
  background-color:#ccc;
  white-space:nowrap;
}
.box td, .style_magi_box td{
  width:110px;
  padding:4px 5px 3px 5px;
}
.box tr:first-of-type th:first-of-type, .style_magi_box tr:first-of-type th:first-of-type{
  background-color:#fff;
}
.box tr:first-of-type td:first-of-type, .style_box tr:first-of-type td:first-of-type,
.style_magi_box tr:first-of-type td:first-of-type{
  text-align:left;
  background-color:#000;
  color:#fff;
  font-weight:bold;
}
.box tr:last-of-type td, .box tr:nth-last-child(2) td:first-of-type{
  text-align:left;
}
.box table{
  width:100%;
}
.box ul{
  justify-content: space-between;
  align-items: center;
}
.box ol, .box li{
  margin:0;
  padding:0;
}
.box ol, .style_box ol, .style_magi_box ol{
  font-size:15px;
}
.box li{
  font-size:10px;
  font-weight:bold;
}
.close_box{
  position:absolute;
  top:-40px;
  right:45%;
  width:50px;
  height:50px;
  line-height:50px;
  font-weight:bold;
  text-align:center;
  color:#000;
  background:#fff;
  font-size:30px;
  box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.8);
  border-radius:50%;
  z-index:21;
  cursor:pointer;
  transition:0.3s;
}
.close_box:hover{
  opacity:0.8;
}
.bt li:before, .mg li:before, .jk li:before, .st li:before{
  background:#fff;
  color:#000;
  margin:0;
  padding:1px 3px;
  margin-right:3px;
  border-radius:3px;
}
.bt li:before{ content:"前提"; }
.mg li:before{ content:"マギスフィア"; }
.jk li:before{ content:"ペット"; }
.ch{
  background-color:#999;
  font-size:14px;
  font-weight:bold;
  text-align:left;
}


/* 詳細ボックス内のtable */
.kouka{
  width:450px !important;
  text-align:left;
}
.kouka table{
  width:auto;
  margin:5px;
  font-size:12px;
  box-shadow:none;
}
.kouka th{
  background-color:#000 !important;
  color:#fff;
  border:1px solid #000;
  padding:3px 5px;
  max-width:30%;
  text-align:center !important;
}
.kouka td{
  padding:3px 5px;
  border:1px solid #000;
  text-align:center !important;
}
.kouka tr:nth-of-type(even) td{ background-color:#fff; }
.kouka tr:nth-of-type(odd) td{ background-color:#ddd; }
.kouka td:last-of-type{ text-align:left; }
.kouka td{ white-space:nowrap; }
.kouka h6{
  white-space:normal; text-align:left; font-size:13px; font-weight:normal;
  min-width:500px; margin:0;
}


/* 特殊神聖魔法 */
.priest:hover{
  color:#007BFF;
  cursor:pointer;
  transition:0.3s;
}
.priest_str{
  display:none;
  color:#000;
  font-size:13px;
  margin:0 0 3px !important;
}
.priest_str ol{
  font-weight:bold;
  min-width:34px;
}


/* 占瞳 */
.mistic_title{
  padding:3px;
  cursor:pointer;
  transition:0.3s;
}
.mistic_title:hover{
  color:#999;
}
.mistic_tr{
  display:none;
}


/* 呪歌 */
.up, .down, .heart{
  display:inline-block;
  width:15px;
  height:15px;
  margin:1px 1px -3px 2px;
  padding:0;
  background-size:15px 15px;
}
.up{
  background-image:url('./pic/up.png');
}
.down{
  background-image:url('./pic/down.png');
}
.heart{
  background-image:url('./pic/heart.png');
}
.kanri_tbl{
  position:fixed;
  bottom:20px;
  left:130px;
  height:80px;
  background-color:#ccc;
  padding:10px 15px 5px 15px;
}
.kanri_tbl table{
  border:none;
}
.kanri_tbl td{
  text-align:center;
  border:none;
  font-weight:bold;
}
.kanri_tbl input{
  font-size:24px;
  margin:5px;
}
input[type=tel], input[type=number]{
  width:40px;
  text-align:center;
}
.reset{
  font-size:16px;
  height:34px;
  margin-left:5px;
}


/* 中小リスト */
.medium_list{
  width:140px;
}
.contents2 input[type=checkbox], .contents2 input[type=radio]{
  display:none;
}
.contents2 table{
  width:350px;
  font-size:12px;
  margin:10px;
}
.contents2 th, .contents2 td{
  padding:1px 5px;
  border:1px solid #333;
}
.contents2 dt{
  display:flex;
}
.contents2 dt p{
  width:20px;
  text-align:center;
  border:2px solid #000;
  border-radius:5px;
  padding:5px;
  margin:0 15px;
  font-family:'游ゴシック Medium';
  font-weight:bold;
  line-height:18px;
  position:relative;
}
.contents2 dt p:after{
  content:"⇔";
  font-size:24px;
  position:absolute;
  top:39%;
  left:35px;
}
.contents2 dt p:last-of-type:after{
  content:"";
}
.contents2 dt p span{
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}
.medium .red:hover, input:checked + .red{
  color:#ff0808;
  border-bottom:1px solid #ff0808;
}
.vagrants{
  display:inline-block;
  background:#666;
  color:#fff;
  font-weight:bold;
  border-radius:50%;
  width:18px; height:18px;
  margin-left:1px;
  text-align:center;
}
.bd{
  width:18px; margin:0 0 -4px 2px;
}



/*魔動天使*/
.angel_title {
  display:block;
  max-width:700px;
  width: 100%;
  background: #000;
  color: #fff;
  margin: 15px 0 5px !important;
  padding: 3px 5px;
  font-size: 12px;
  font-weight:bold;
  text-align:center;
  cursor: pointer;
  transition: 0.3s;
}
.angel_title:hover {
  opacity:0.6;
}
.angel_title2 {
  background:#777;
  color:#fff;
  font-weight:bold;
  text-align:center;
}
.angel_tbl{
  width:200px !important;
}
.angel_tbl th{
  width:80px;
  background:#ccc;
  color:#000;
}
.angel_tbl td{
  background:#fff;
  text-align:center;
  font-weight:bold;
}


/* 種族特徴 */
.species_summary th:first-of-type{ max-width:120px; padding:5px 0; }
.species_summary td:nth-of-type(-n+3){ text-align:center; }
.species_summary td:nth-of-type(2), .species_summary td:nth-of-type(3){ max-width:80px; }
.species_summary td:nth-of-type(4){ max-width:150px; }
.species_summary td:last-of-type{ max-width:400px; }
.medium_str dd table{ width:auto; }
.medium_str dd th{ background:#000; color:#fff; padding:5px; }
.medium_str dd th, .medium_str dd td{ text-align:center; }
.medium_str dd tr:nth-of-type(3){ background:#ddd; }
.medium_str dd td:first-of-type{ min-width:80px; }


/* 説明文 */
.explain_str{
  position:fixed;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  width:100%;
  max-width:750px;
  max-height:80%;
  padding:15px;
  background-color:rgba(10,10,10,0.9);
  color:#fff;
  font-size:13px;
  display:none;
}
.explain_str p{
  margin:3px;
  text-align:center;
  font-size:16px;
}
.explain_str b{
  font-size:14px;
}
.explain_str img{
  display:block;
  margin:0 auto 5px;
}


/* 流派 */
.style{
  display:inline-block;
  font-size:12px;
  min-width: 70px;
  text-align: center;
  padding: 3px 10px;
  height: 18px;
  color: #333;
  font-weight: bolder;
  transition: 0.3s;
  cursor: pointer;
}
.style_list{
  display:block;
  margin:10px;
}
.style_list option{
  background:#fff;
}
.style_list:hover{
  background:#eee;
}

.style_item, .style_item2, .style_box{
  width:97% !important;
  max-width:1000px;
}
.style_item th{
  background:#000;
  color:#fff;
  line-height:14px;
  padding:1px 0;
}
.style_item td{
  text-align:center;
}
.style_item td:first-of-type{
  text-align:left;
  width:200px;
}

.style_item2, .style_item2 tr:first-of-type td{
  border:none;
}
.style_item2 tr:first-of-type ul{
  display:flex;
  justify-content: space-between;
  align-items: center;
  font-size:16px;
  font-weight:bold;
}
.style_item2 tr:first-of-type li{
  font-size:14px;
}
.style_item2 th{
  background:#ddd;
  min-width:50px;
}

.style_box th{
  width:40px;
  background:#ccc;
  font-size:12px;
  padding:1px 2px;
  background-color:#ccc;
  white-space:nowrap;
}
.style_box td, .style_magi_box td{
  text-align:center;
}
.style_magi_box{
  width:auto !important;
}
.style_magi_box th{
  width:15px;
}
.style_title ul{
  display:flex;
  flex-wrap:wrap;
  justify-content: space-between;
  align-items: center;
}
.style_title ol{
  white-space: normal;
}
.style_box tr:first-of-type p:first-of-type,
.style_magi_box tr:first-of-type p:first-of-type{
  font-size:15px;
}
.style_box tr:first-of-type p:first-of-type,
.style_magi_box tr:first-of-type p:first-of-type{
  text-align:right;
}
.style_box tr:nth-of-type(2) td{
  width:28%;
}
.style_box i{
  display:block;
  border-top:1px solid #999;
  margin:0 -5px;
}
.medium_str_first th{
  font-size:12px;
  background:#eee;
}
.medium_str_first td{
  font-size:12px;
  text-align:left;
}
.medium_str p{
  margin:3px;
}
ruby rt{
  font-weight:normal;
  font-size:8px;
  letter-spacing:-1px;
}




/* モバイル版 */
@media screen and (max-width: 500px) {
  body{ width:100%; }
  select{ display:block; }
  #close{ margin-top:-42px; margin-left:20px; }
  h2{ text-align:center; margin-top:20px; }

  .explain_str{ margin:0 !important; overflow-y: scroll; }

  .contents,.contents2{ margin:auto; width:95%; }
  .contents table th:last-of-type, .contents table td:last-of-type{ display:none; }
  .kouka td{ white-space:normal; }
  .kouka h6{ min-width:200px; }

  .medium_list{ width:90px; margin-left:0; }
  .style_list{ margin:20px auto; }

  .mobile{ display:block; float:left; margin-top:-5px; }
}