@font-face {
font-family:'mplus';/*M+ FONTS LICENSE*/
src:url('mplus-1m-regular.woff2') format("woff2");
font-weight:normal;
font-style:normal;
}
@font-face {
font-family:'mplus';
src:url('mplus-1m-bold.woff2') format("woff2");
font-weight:bold;
font-style:normal;
}
body{
font-family:'mplus','BIZ UDGothic',sans-serif;
font-size:16px;
line-height:18px;
color:#111;
background-color:#F6F9FD;
min-width:880px;
margin-bottom:16em;
white-space:nowrap;
}
h1{
font-size:26px;
}
h2{
font-size:18px;
margin:0;
}
p{
margin:4px 0;
}
a{
color:#51A3E3;
text-decoration: none;
}
hr{
border:none;
border-bottom:3px solid #888;
line-height: 5px;
}
/*概要*/
div#overview{
margin:1em 0;
}
div#overview span{
vertical-align:middle;
}
div#overview span.season{
font-size:20px;
font-weight:bold;
}
div#overview img.icon{
vertical-align:middle;
margin:-4px 4px -4px 8px;
background-color:#6773A8;
border:solid #444 2px;
border-radius:4px;
}
div#overview span.boss{
margin-right:12px;
font-size:24px;
font-weight:bold;
}
div#overview span.date{
margin-left:24px;
font-size:18px;
}
div#aggregated dl{
display:flex;
margin:8px 0 8px 16px;
flex-wrap:wrap;
align-items:center;
width:860px;
}
div#aggregated dt{
width:86px;
font-weight:bold;
margin:2px 0;
position:relative;
}
div#aggregated dt::after{
content:':';
position:absolute;
font-weight:bold;
left:72px;
}
div#aggregated dd{
width:calc(100% - 86px);
margin:2px 0;
}
.range{
font-size:14px;
margin-left:4px;
color:#444;
}
/*装甲*/
span.armor{
display:inline-block;
width:70px;
padding:3px 0;
font-size:16px;
text-align:center;
color:#FFF;
border-radius:4px;
}
span.armor.he{
background-color:#BD8801;
}
span.armor.li{
background-color:#A80108;
}
span.armor.sp{
background-color:#246F9B;
}
span.armor.el{
background-color:#9946A8;
}
/*難易度*/
span.diff{
display:inline-block;
width:72px;
padding:1px 0;
font-size:16px;
text-align:center;
border:solid #303045 1px;
border-radius:4px;
box-sizing:border-box;
}
.diff.lun{
background-color:#FFB0F1;
}
.diff.tor{
background-color:#C1D0ED;
}
.diff.ins{
background-color:#D6D3FA;
}
.diff.ext{
background-color:#FBDCFA;
}
.diff.har{
background-color:#FBCFDC;
}
.diff.ver{
background-color:#D5FAFC;
}
.diff.had{
background-color:#F0FEC6;
}
.diff.nor{
background-color:#FCFECF;
}
.cleartime{
font-size:14px;
margin-left:1px;
color:#444;
}
.cleartime span.diff{
display:inline-block;
width:22px;
height:16px;
padding:0;
margin:0 2px;
font-size:12px;
text-align:center;
border:none;
border-radius:3px;
box-sizing:border-box;
}
/*難易度・部隊数*/
table#diffcount ,table#unitcount{
border-collapse:collapse;
border:solid #333 2px;
font-weight:normal;
background-color:#FEFEFE;
}
table#diffcount th, table#diffcount td, table#unitcount th, table#unitcount td{
padding:2px 1px;
vertical-align:middle;
border-right:solid #999 1px;
border-bottom:dotted black 1px;
}
table#diffcount th{
}
table#unitcount th{
background-color:#FFFCD4;
}
table#diffcount td:nth-child(odd), table#unitcount td:nth-child(odd){
min-width:62px;
font-size:16px;
font-weight:bold;
text-align:right;
border-right:none;
}
table#diffcount td:nth-child(even), table#unitcount td:nth-child(even){
min-width:50px;
border-left:none;
padding:0;
font-size:14px;
color:#444;
}
/*星*/
.star, .weap{
display:inline-block;
width:22px;
height:21px;
font-weight:bold;
font-size:15px;
text-align:center;
vertical-align:bottom;
background-size:contain;
background-repeat:no-repeat;
padding-top:4px;
margin:0 -2px -3px -2px;
}
.star{
background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="836.38" height="799.7" viewBox="0 -0.5 21.96 20.99"><path fill="%23F9ED59" fill-rule="evenodd" stroke="black" stroke-width=".99" d="M18.03 12.2a1.9 1.9 0 0 0-.54 1.67l.67 3.92a1.9 1.9 0 0 1-2.75 1.99l-3.55-1.85a2 2 0 0 0-1.77 0l-3.54 1.85q-.45.22-.89.22a1.9 1.9 0 0 1-1.87-2.21l.68-3.92a1.9 1.9 0 0 0-.55-1.67L1.05 9.43c-1.12-1.1-.5-3 1.06-3.22l3.96-.57A1.9 1.9 0 0 0 7.5 4.61l1.77-3.56A1.9 1.9 0 0 1 10.97 0c.69 0 1.36.35 1.71 1.05l1.77 3.56c.28.56.82.94 1.44 1.03l3.96.57a1.88 1.88 0 0 1 1.05 3.22z"/></svg>');
}
.weap{
background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="836.38" height="799.7" viewBox="0 -0.5 21.96 20.99"><path fill="%236FF5FF" fill-rule="evenodd" stroke="black" stroke-width=".99" d="M18.03 12.2a1.9 1.9 0 0 0-.54 1.67l.67 3.92a1.9 1.9 0 0 1-2.75 1.99l-3.55-1.85a2 2 0 0 0-1.77 0l-3.54 1.85q-.45.22-.89.22a1.9 1.9 0 0 1-1.87-2.21l.68-3.92a1.9 1.9 0 0 0-.55-1.67L1.05 9.43c-1.12-1.1-.5-3 1.06-3.22l3.96-.57A1.9 1.9 0 0 0 7.5 4.61l1.77-3.56A1.9 1.9 0 0 1 10.97 0c.69 0 1.36.35 1.71 1.05l1.77 3.56c.28.56.82.94 1.44 1.03l3.96.57a1.88 1.88 0 0 1 1.05 3.22z"/></svg>');
}
/*テーブル*/
table#main{
border-collapse:collapse;
border:solid #333 2px;
background-color:#FEFEFE;
}
table#main th, table#main td{
padding:2px 1px;
vertical-align:middle;
border-right:solid #999 1px;
border-bottom:dotted black 1px;
}
table#main thead th,table#main tfoot th{
background-color:#FFD4F0;
line-height:1;
}
table#main thead tr:nth-child(2) th,table#main tfoot tr:nth-child(1) th{
padding:0 2px;
}
table#main th span.denominator{
font-size:14px;
font-weight:normal;
}
table#main tbody tr:nth-child(even){
background:#EEE;
}
table small{
font-size:10px;
display:contents;
}
/*役割*/
table#main td.role{
min-width:16px;
padding:0 0 0 3px;
border-right:none;
}
table#main td.role div{
border-radius:6px 0 0 6px;
font-size:14px;
text-align:center;
color:#FFF;
width:16px;
height:20px;
}
table#main td.role div.st{
background-color:#B23332;
}
table#main td.role div.sp{
background-color:#176EBC;
}
/*アイコン*/
table#main td.icon{
padding:0;
width:37px;
height:24px;
border-right:none;
}
table#main td.icon div{
width:33px;
height:22px;
background-position:center;
background-repeat:no-repeat;
border-width:1px 2px;
border-style:solid;
border-radius:4px;
}
table#main td.icon div.pi{
border-color:#BD8801;
}
table#main td.icon div.ex{
border-color:#A80108;
}
table#main td.icon div.my{
border-color:#246F9B;
}
table#main td.icon div.so{
border-color:#9946A8;
}
/*名前*/
table#main td.name{
min-width:142px;
padding-left:3px;
font-weight:bold;
}
table#main td.name span.cos{
font-size:14px;
display:inline-block;
line-height:1;
transform:translateY(-1px);
margin-left:1px;
}

/*使用率*/
table#main td.use{
min-width:62px;
font-weight:bold;
text-align:right;
border-right:none;
}
table#main td.use2{
min-width:58px;
font-size:15px;
font-weight:bold;
text-align:right;
border-right:none;
}
table#main td.usecount{
min-width:50px;
border-left:none;
padding:0;
font-size:14px;
color:#444;
}
/*育成割合*/
table#main td.usedetail{
padding:0 2px 0 1px;
text-align:right;
font-size:15px;
}
table#main td.usedetail2{
min-width:40px;
padding:0 2px 0 1px;
text-align:right;
font-size:13px;
}
/*パーセンテージ*/
.p100{color:oklch(100% 0.4 0);}
.p95{color:oklch(96% 0.39 10);}
.p90{color:oklch(92% 0.38 20);}
.p85{color:oklch(88% 0.37 30);}
.p80{color:oklch(84% 0.36 40);}
.p75{color:oklch(80% 0.35 50);}
.p70{color:oklch(76% 0.34 60);}
.p65{color:oklch(72% 0.33 70);}
.p60{color:oklch(68% 0.32 80);}
.p55{color:oklch(64% 0.31 90);}
.p50{color:oklch(60% 0.3 100);}
.p45{color:oklch(56% 0.29 110);}
.p40{color:oklch(52% 0.28 120);}
.p35{color:oklch(48% 0.27 130);}
.p30{color:oklch(44% 0.26 140);}
.p25{color:oklch(40% 0.25 150);}
.p20{color:oklch(36% 0.24 160);}
.p15{color:oklch(32% 0.23 170);}
.p10{color:oklch(28% 0.22 180);}
.p5{color:oklch(24% 0.21 190);}
.p0{color:oklch(20% 0.2 200);}
.copyright{
 font-size:12px;
 color:#888;
 white-space:wrap
}
/*メニュー*/
div#menu {
position:relative;
}
div#menu div.menu, div#menu label.menu-icon, div#menu label.menu-bar{
background:#FCFAF9;
}
div#menu label.menu-icon, div#menu label.menu-bar{
display:inline-block;
position:fixed;
top:0px;
cursor:pointer;
transition:top 0.2s ease;
}
div#menu label.menu-icon {
width:56px;
height:36px;
left:0px;
padding-top:16px;
text-align:center;
border-radius:0 0 8px 0;
box-shadow:0 0 4px 2px rgba(0,0,0,0.5);
z-index:1;
font-size:36px;
color:#444;
user-select:none;
}
div#menu label.menu-bar {
width:100%;
height:16px;
left:56px;
box-shadow:0 4px 4px -3.2px rgba(0,0,0,0.5);
z-index:2;
}
div#menu label.menu-bar span{
display:block;
width:50%;
height:4px;
margin:6px 0 0 calc(25% - 56px);
background:#BBB;
border-radius: 2px;
}
div#menu div.menu{
position:fixed;
left:0;
top:-272px;
width:100%;
height:272px;
padding-left:8px;
transition:top 0.2s ease;
z-index:3;
}
#menu-toggle:checked ~ div.menu {
top:0;
}
#menu-toggle:checked ~ label.menu-icon, #menu-toggle:checked ~ label.menu-bar {
top:272px;
}
div#query dl{
display:flex;
margin:8px 0 8px 16px;
flex-wrap:wrap;
align-items:center;
width:860px;
}
div#query dt{
width:96px;
font-weight:bold;
margin:8px 0;
position:relative;
}
div#query dt::after{
content:':';
position:absolute;
font-weight:bold;
left:82px;
}
div#query dd{
width:calc(100% - 96px);
margin:2px 0;
}
select{
font-size:16px;
padding:2px;
background-color:#FEFEFE;
border-radius:4px;
}
option{
font-size:15px;
}
option.eraid{
background-color:#FEF3EC;
}
input{
width:4.5em;
font-size:16px;
padding:2px;
}
button{
font-size:16px;
padding:2px;
margin:0 6px;
}
button.queryrun{
font-size:18px;
font-weight:bold;
width:180px;
margin:6px 0 0 102px;
}