body{text-align:center;margin:0px;}
#main{overflow:hidden;position:relative;}
.unselectable{-webkit-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none;}
.select img{width:20%;}
#toggle{width:5vw;position:absolute;right:0px;top:53.8vw;}
#join{font-size:12px;}
#join img{height:14px;margin-bottom:-3px;}
#license{font-size:3.5vw;padding:0px 5%;position:relative;top:50%;transform:translateY(-50%);}

#maintable{border-spacing:0px;height:100%;}
#maintable td{padding:0px;}
#p1{width:100%;height:37.77vw;} /* 37.77 = 272 / 720 * 100 */
.tab{width:21.8vw;position:absolute;top:30.28vw;z-index:1;}
.tabd{display:none;height:calc(100vh - 61.37vw);min-height:94.86vw;background:#907E4E;overflow-y:auto;}
.infotable{color:#361300;font-size:4vw;table-layout:fixed;width:100%;}
.forzen{position:absolute;background:#907E4E;z-index:1;}
#materials hr{border:1px solid #361300;margin:0px;}
.infotable .item{width:14vw;}
#materials td:first-child[rowspan]{height:26vw;}
.source, .recommend{max-height:26vw;overflow-y:auto;font-size:3vw;}
.recommend table{border-collapse:collapse;}
#equips hr{border:1px solid #361300;margin:0 0 1vw;}
#equipFilter{height:18vw;background:#DBC2A3;line-height:9vw;text-align:-webkit-center;}
.filterLine{overflow-x:auto;white-space:nowrap;}
#equips .filter{font-size:4vw;margin:1vw;}
#equipTable{height:calc(100vh - 79.52vw);min-height:76.86vw;overflow-y:auto;}
.infotable .recommend .item{width:10vw;}
.gold{width:3vw;height:3vw;}
#p2{background:#907E4E;height:22.22vw;} /* 22.22 = 160 / 720 * 100 */
#p3{background:url(bgp3.png);background-size:100%;width:100%;height:calc(100vh - 86.23vw);min-height:70vw;color:#361300;font-weight:bold;font-size:4vw;}
#p3>div{height:100%;display:inline-block;}
#result{width:58vw;overflow-y:auto;float:left;}
#state{width:37.5vw;vertical-align:top;overflow-y:auto;float:right;}
#state hr{width:90%;border:1px solid #7B6637;}
#gold{width:4vw;height:4vw;}
#selector{height:calc(100vh - 85.38vw);min-height:71vw;width:61vw;position:absolute;top:64.92vw;right:0px;background:#907E4E;display:none;}
#sb{height:100%;width:2.5vw;background:url(border.png);background-size:100%;display:inline-block;}
#filter{margin:1vw 0;}
.filter{border:.7vw outset #e6d8ab;border-radius:1.7vw;background:#e6d8ab;color:#361300;font-weight:bold;font-size:3vw;padding:0px;box-shadow:0px 0px 0px .5vw;margin:.8vw .4vw;}
.filter:empty{display:none;}
.f1{border-style:inset;}
.f2{border-style:inset;color:green;}
.f3{border-style:inset;color:blue;}
.f4{border-style:inset;color:purple;}
.f5{border-style:inset;color:gold}
.d1{min-width:5.6vw;}
.d2{min-width:8.8vw;}
#sc{height:100%;width:58.5vw;display:inline-block;}
#sci{display:flex;flex-direction:column;height:100%;}
#sl{overflow-y:auto;}
#sl .item{width:18vw;position:relative;}
.sortv{position:absolute;top:1vw;left:2vw;color:white;font-weight:bold;-webkit-text-stroke:#361300 0.3vw;font-size:5vw;}
#p4{background:url(bgp4.png);background-size:100%;width:100%;height:18.33vw;position:relative;} /* 18.33 = 132 / 720 * 100 */
.hr{background:url(hr.png);background-size:100%;width:100%;height:2.64vw;position:relative;} /* 2.64 = 19 / 720 * 100 */

img.bg{position:relative;left:0px;top:0px;width:100%;}

/* info */
.info{border:2vw solid transparent;border-image-source:url(infobg.png);border-image-slice:35 25;border-image-width:7vw 5vw;border-image-outset:1vw;border-image-repeat:repeat;background:#FFF4D4;display:inline-block;min-width:20vw;position:absolute;display:none;z-index:10;}
.name{color:#A36840;font-size:4vw;}
.detail{color:#B75317;font-size:3vw;}

/* item */
.item{width:20vw;display:inline-block;} /* 20.32 = 20 * 127 / 125 */
.r1{box-shadow:0px 0px 8vw goldenrod;}
.r2{box-shadow:0px 0px 8vw green;}
.r3{box-shadow:0px 0px 8vw blue;}
.r4{box-shadow:0px 0px 8vw purple;}
.r5{box-shadow:0px 0px 8vw gold;}