@charset "utf-8";

body{ width:95%; }
a{ cursor:pointer; transition:0.1s; }
h2{ margin:0 5px; padding: 0; }
h3{ width:98%; border-bottom:1px solid #000; line-height:15px; font-size:14px; margin:0; margin-bottom:3px; }
h4{ font-size:14px; margin:0; }
h5{ display:inline-block; font-size:10px; font-weight:bold; margin:0; }
h5:first-of-type{ margin-right:5px; }
h5:last-of-type{ margin-left:5px; }
h6{ display:inline-block; margin:0; padding:0; }
i{ font-style:normal; }
table{
  border-collapse: collapse;
  border-spacing: 0;
  text-align:center;
  margin-right:5px;
  font-size:12px;
  border:1px solid #000;
}
th, td{ padding:1px; }
th:not(th:last-of-type){ border-right:1px solid #fff; }
th{ border-top:1px solid #000; }
input[type=checkbox]{ display:none; }
select{ display:inline-block; margin:0; }


.link{
  position:fixed;
  left:10px;
  width:50px;
  text-decoration:none;
  font-weight:bold;
  font-size:12px;
  color:#000;
  z-index:999;
}
.link:hover{
  opacity:0.7;
}


/* ページトップ */
#scrollTop {
  position:fixed;
  vertical-align:middle;
  background-color:rgba(0,0,0,0.8);
  color:#fff;
  padding:10px; opacity: 0;
  width:30px;
  height:30px;
  bottom:20px;
  right:20px;
  text-align: center;
  line-height:30px;
  font-size:18px;
  font-weight:bold;
  transition:0.3s;
  cursor:pointer;
  z-index: 3;
}
#scrollTop:hover{ background-color:rgba(0,0,0,0.4); }


/* 検索フォーム */
.search{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #f2f2f2;
  padding: 10px;
  margin: 0;
  z-index:2;
  
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.search ol, .search li{
  list-style: none;
  margin: 9px 3px 3px;
  padding: 0;
}
.search ol:nth-of-type(2){
  width:75px;
  text-align:right;
  padding:3px 8px 3px 0;
  font-weight:bold;
  font-size:13px;
}
.search ol span{ display:none; }
.search ol:last-of-type{ padding: 0; }
.search input[type=tel]{ width:30px; text-align:center; }
.search hr{ margin:0 10px; }

.height{ margin:80px 10px 5px; font-size:13px; color:blue; }
.radio_area ol{ padding:0 5px; }
#ver{ display:none; }
.radio_area label{
  background:#fff;
  border:1px solid #000;
  color:#000;
  cursor:pointer;
  transition:0.3s;
}
.radio_area label:hover{
  background:#ccc;
}
#ver:checked ~ label{
  color:#fff;
  background:#000;
}



/* 魔物の強化 */
dl{
  display:flex;
  flex-direction: column;
  justify-content: flex-start;
  margin:80px 20px;
  font-size:14px;
}
dl table{ margin:10px 5px 5px; }
dl td{ border-right:1px solid #000; }
dl label{ margin-top:20px; }
dl b{ margin:0 5px; }

.treasure_point{ width:750px; }
.treasure_point tr th:not(tr:last-of-type th){ border-bottom:1px solid #fff; }

.drop label{ font-weight:bold; margin:5px; cursor:pointer; transition:0.3s; }
.drop label:hover, .drop input[type=checkbox]:checked+.drop label{ color:#4b7ef1; }
.drop input[type=checkbox]{ display:none; }
.drop div{ display:none; }
.drop table{ margin-bottom:10px; }
.drop table tr{ cursor:pointer; transition:0.3s; }
.drop table tr:hover{ background:#bfdeff; }
.drop table td:first-of-type{ width:10px; }
.drop table td:nth-of-type(2){ width:190px; }
.drop table td:last-of-type{ width:130px; }

.tattoo td:first-of-type, .drop td:first-of-type{ width:5%; }
.tattoo td:nth-of-type(2){ width:12%; }
.tattoo td:last-of-type{ width:83%; text-align:left; padding-left:5px; }



/* リスト版 */
.contents{
  width:450px;
  min-height:108px;
  font-size:12px;
  margin:5px 10px;
  padding:5px 8px;
  border:1px solid #000;
  float:left;
  position:relative;
}
.contents:last-of-type{
  margin-bottom:100px;
}
.contents div{
  margin:1px;
}
.contents div:first-of-type{
  margin-bottom:3px;
}
.contents b{
  margin-right:2px;
}
.first{
  display:flex;
  align-items: center;
}
.ver20, .ver25{
  display:inline-block;
  background:#555;
  color:#fff;
  font-weight:bold;
  font-size:11px;
  width:25px;
  width:30px;
  margin:0 2px;
  border-radius:5px;
  text-align:center;
}
.ver25{
  background:#000;
}
.first p:first-of-type{
  width:28px;
  height:27px;
  line-height:29px;
  background-color:#000;
  color:#fff;
  font-weight:bold;
  font-size:16px;
  text-align:center;
  margin:0;
  margin-top:-2px;
  border-radius:0;
}
.link_btn{
  display:inline-block;
  height:30px;
  text-align:center;
  font-size:10px;
  font-weight:bold;
  padding:3px 5px;
  text-decoration:none;
  
  position:absolute;
  bottom:7px;
}
.explain_btn{
  background-color:#000;
  color:#fff;
  right:7px;
}
.editpage_btn{
  background-color:#aaa; 
  color:#000;
  right:52px;
}
.clip_btn{
  background-color:#eee; 
  color:blue;
  right:100px;
}
.link_btn:hover{
  background-color:#ddd; 
  color:#000;
}
.editpage_btn p{
  transform: scale(0.9, 1);
  margin:0 -4px;
}

.new_btn{
  display:inline-block;
  background-color:#000; 
  color:#fff;
  text-align:center;
  font-size:10px;
  font-weight:bold;
  text-decoration:none;
  padding:7px;
  background-color:#aaa; 
  color:#000;
}
.fix_list_link{
  background-color:#000; 
  color:#fff;
}


/* 詳細ボックス */
.box{
  display:none;
  position:fixed;
  bottom:10%;
  right:10px;
  max-width:60%;
  background:#fff;
  font-size:13px;
  border:1px solid #000;
  box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.8);
  z-index:20;
}
.box th{
  padding:1px 2px;
  background-color:#ccc;
  white-space:nowrap;
}
.box td{
  padding:0px 5px;
}


/* PRIVATE */
.private_box{
  display:flex;
  flex-direction: column;
  list-style:none;
  position:relative;
  width:340px;
  height:55px;
  margin:10px;
  padding:4px 10px 10px;
  font-size:14px;
  border:1px solid #000;
  border-radius:5px;
  float:left;
}
.private_box li{
  margin:0;
  width:78%;
}


/* 詳細版 */
.contents-all{
  display:flex;
  flex-direction: column;
  width:510px;
  margin:10px 15px;
  font-size:13px;
  float:left;
}
.contents-all div:first-of-type{
  margin-bottom:3px;
}
.arms, .arms_make{
  text-align:center;
  margin:3px 0;
  float:left;
}
.arms:nth-of-type(2){
  margin:3px 5px;
}
.arms th, .arms_make th, dl th{
  background-color:#000;
  color:#fff;
  width:50px;
}
.arms tr:nth-of-type(odd), dl tr:nth-of-type(odd){
  background-color:#dcdcdc;
}
.arms th:not(th:last-of-type){
  border-right:1px solid #fff;
}
.arms td:not(td:last-of-type){
  border-right:1px solid #000;
}
.ability_label{
  display:block;
  background-color:#777;
  color:#fff;
  font-weight:bold;
  padding-left:7px;
  margin:8px 3px 5px 0;
}
.core{
  margin:10px 0;
}
.core p{
  display:inline-block;
  float:left;
  white-space:nowrap;
  margin: 0;
}
.loot td:first-of-type{
  width:80px;
  padding-left:3px;
  background-color:#ccc;
  text-align:left;
}
.loot td:last-of-type{
  width:350px;
  padding-left:3px;
  text-align:left;
}
.comment{
  display:block;
  border-top:1px solid #000;
  border-bottom:1px solid #000;
  margin-bottom:3px;
  font-size:14px;
  font-weight:bold;
}
.mobile{
  display:none;
}


/* 騎獣 */
.ride_tbl{
  font-size:12px;
  margin:10px 0;
}
.ride_tbl th{
  background:#000;
  color:#fff;
  padding:4px 6px;
  line-height:13px;
}
.ride_tbl td{
  padding:0 4px;
}
.ride_tbl tr:nth-of-type(odd){
  background-color:#dcdcdc;
}
.ride_tbl p{
  transform: scale(0.85, 1);
  margin:0 -6px;
}


/* データ作成 */
.editpage{ margin:60px auto; font-size:14px; display:flex; flex-wrap:wrap; }
.editpage .preview{ order: 2; }
.editpage .edit{ order: 1; }

.editdata, .edit table{ margin:10px; }
.editdata input, .editdata select{ margin:3px; }
.editdata input[type="number"]{ text-align:center; }
.editdata input:nth-of-type(1){ width:300px; }
.editdata input:nth-of-type(3){ width:100px; }
.editdata input:nth-of-type(4){ width:100px; }
.editdata input:nth-of-type(5){ width:100px; }
.editdata input:nth-of-type(6){ width:340px; }
.editdata input:nth-of-type(7){ width:326px; }
.editdata input:nth-of-type(10){ width:210px; }
.editdata input[type=tel], .arms_make input[type=tel]{ width:30px; text-align:center; }
.editdata input[type=checkbox]{ display:none; }

.private_btn{
  background:#ddd; color:#000; font-weight:bold; height:25px; padding:1px 15px; margin:10px 10px 0;
  border-radius:20px; border:none; cursor:pointer; transition:0.3s;
}
.private_btn:hover, #private_btn:checked + .private_btn{ background:#ccc; color:#000; }

.version{ display:inline-block; position:relative; }
.version label{
  display:inline-block; font-weight:bold; font-size:11px; padding:0 3px; margin:5px 0; text-align:center;
  width:36px; border:2px solid #000; border-radius:11px; cursor:pointer;
}
.version input[type="checkbox"]:checked + label{ background:#000; color:#fff; }
.version label span:after{ content:'2.0'; padding:0 0 0 13px; }
.version input[type="checkbox"]:checked ~ label span:after{ content:'2.5'; padding:0 13px 0 0; }
#swImg{
  position:absolute; width:13px; height:13px; top:9px; left:4px;
  background:#000; border-radius:7px; transition:0.2s;
}
.version input[type="checkbox"]:checked ~ #swImg{ background:#fff; transform:translateX(25px); }

.preview{ padding-left:20px; border-left:1px solid #ccc; }

.arms_make th p{ transform: scale(0.9, 1); margin:0 -5px; padding:0 -3px; }
.arms_make td{ border:1px solid #000; }

.edit table{ margin-top:20px; }
.edit table th{ background-color:#000; color:#fff; }

.loot_tbl td:first-of-type input{ width:50px; }
.loot_tbl td:last-of-type input{ width:350px; }

.ability table{ width:100%; }
.ability table th{ background-color:#000; color:#fff; }
.ability table th:not(.ability table tr:first-of-type th){ border-top:1px solid #fff; }
.ability table tr:last-of-type th{ border-bottom:1px solid #000; }
.ability table td{ text-align:center; padding:2px 3px; border:1px solid #000; }
.ability table th:first-of-type, .ability table td:first-of-type{ min-width:30px; }
.ability table td:last-of-type{ text-align:left; }
.ability table tr:nth-of-type(odd){ background-color:#dcdcdc; }

#ability{ width:458px; height:400px; }
#comment{ width:458px; height:150px; }


.save a, .save input, .clipboard{
  position:fixed; top:-20px; display:inline-block; width:80px;
  font-size:11px; font-weight:bold; padding-top:20px; line-height:15px; white-space: normal;
  border-radius:5px; border:none; outline:none; cursor:pointer; transition:0.3s;
}
.save a{ left:20px; background:#eaeaea; color:#000; }
.save input:last-of-type, .clipboard{ height:69px; right:20px; background:#000; color:#fff; }
.save input:nth-of-type(2){ height:69px; left:250px; background:#5a5a5a; color:#fff; }
.save input:first-of-type { height:69px; left:150px; background:#ccc; color:#000; }
.save a, .save input{ display:block; text-decoration:none; }
.save p{ text-align:center; margin-bottom:8px; }
.save a:hover, .save input:hover, .clipboard:hover{ top:-10px; }


.private{ display:none; margin-top:0px !important; border:none; }
.private tr:first-of-type input{ width:300px; }
.private tr:nth-of-type(2) input{ width:143px; }
.private td{ text-align:left; }
.private input{ margin:2px 0; }
.private p{ margin:3px 0 0; font-weight:bold; text-align:left; }
.private img{ width:25px; margin-bottom:-8px; cursor:pointer; }
.private img:hover{ opacity:0.7; }

.notice{
  display:none;
  position:fixed; top:50px; left:30%;
  background:rgba(0,0,0,0.8); color:#fff;
  font-size:13px; text-align:center;
  padding:10px 15px; border-radius:10px;
}



/* モバイル版 */
@media screen and (max-width: 850px) {
  dl{ margin:100px 10px 20px; }
}
@media screen and (max-width: 500px) {
  body{ width:auto; }
  .contents-all{ margin:10px 3px; zoom:0.89; }
  .search{ flex-direction: column; }
  .search ol, .search li{ width:280px; border:none; margin:3px auto; }
  .search ol:nth-of-type(2){ display:none; }
  .search ol span{ display:inline-block; margin-left:10px; }
  .search hr{ display:none; }
  .height{ margin:200px 10px 0; }
  .contents{ width:99%; margin:0; margin-left:-7px; border:none; border-bottom:1px solid #000; }

  .edit table{ margin-left:5px; }
  .editdata, .arms_make{ margin:10px 5px; }
  .preview{ padding-left:5px; border-left:none; }
  dl{ margin:240px 5px 20px; }

}