html{font-size:16px;box-sizing:border-box;font-weight:500;}
body{margin:0px;padding:0px;font-size:1rem;color:#333;font-family:"Noto Sans JP", sans-serif,"メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic";}
h2{background:#333;color:#fff;font-size:2rem;line-height:1em;margin:0px;padding:16px 24px;font-weight:700;}
h3{margin:0;background:#666;color:#fff;padding:16px;font-size:1.25rem;font-weight:700;}
h4{margin:0px;padding:6px 5px;font-size:1rem;border:1px #CBD9E4 solid;color:#006699;}
table{margin:0px 0px 4px 0px;border-collapse:collapse;border-spacing:0px;color:#555;font-size:1rem;}
TH{margin:0px;padding:3px 8px;background:#333;border:3px #efefef solid;color:#fff;font-size:1rem;text-align:left;}
TD{margin:0px;padding:3px 8px;border:3px #efefef solid;background:#fffcf3;font-size:1rem;}
a{text-decoration:none;}
input{font-size:1rem;}
input[type="text"],input[type="password"],input[type="date"],textarea,select{font-size:1rem;width:100%;border:1px #aaa solid;padding:4px 0;}
textarea{height:400px;padding:8px;}
span{display:inline-block;}
.h100{height:100px;}
input[type="submit"],input[type="button"]{
    margin:8px 0 0 0;
    display: block;
    width:auto;
    padding:8px 24px;
    border: none;
    border-radius: 6px;
    background: #333;
    color: white;
    font-size:1rem;
    cursor: pointer;
    transition:background 0.2s;
    pointer-events: auto;
}
input[type="submit"]:hover,input[type="button"]:hover{
    background:#888;
}
footer{text-align:center;background:#666;color:#fff;padding:24px 0;line-height:2;}
footer a{color:#fff;}
.table{display:grid;align-items:center;font-size:1rem;gap:2px;grid-template-rows:auto;}
.tbmain{grid-template-columns:200px 1fr;}
.table > div{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    align-items:center;
    box-sizing:border-box;
    padding:16px;
    text-align:left;
    letter-spacing:0em;
    border:1px #333 solid;
    height:100%;
}
.gr{background:#efefef;}
.ye{background:#ffffcc;}
.ble{color:#ee6600;}
.graph{width:100%;height:300px;overflow:visible;display:grid;gap:8px;grid-template-rows:1fr;grid-template-columns:auto 1fr;}
.graph2{display:grid;gap:16px;overflow:visible;align-items:end;margin:8px;border:1px #aaa solid;background-image:linear-gradient(to bottom,#fff 0%, #fff 50%,#efefef 50%,#efefef 100%);background-size:100% 40%;height:calc(100% - 16px);}
.graphl{display:flex;flex-direction:column;justify-content:space-between;height:100%;}
.grab{box-sizing:border-box;width:100%;background:#0066ff;display:flex;align-items:end;padding:8px;color:#fff;justify-content:center;}
.mspc{margin:16px;}
.spc{padding:16px;}
.spct{padding:16px 16px 16px 0;}

.main{margin:32px auto;width:1000px;display:grid;font-size:1rem;gap:24px;grid-template-rows:auto;}
.maintk{grid-template-columns:1fr;}
.com{padding:0 24px;line-height:1.5;}
.menu{
    display:block;
    padding:8px;
    text-align:left;
    letter-spacing:0em;
    border:1px #333 solid;
    background:#efefef;
    color:#333;
}
.menu2{
    display:block;
    padding:8px;
    text-align:left;
    letter-spacing:0em;
    border:1px #333 solid;
    background:#888;
    color:#fff;
}
.menu:hover{background:#aaa;color:#fff;}
.tkbox{
    padding:32px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.5);
    border-radius:16px;
    background:#fff;
    display:grid;gap:16px;
}
.tkbox2{
    padding:16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.5);
    border-radius:16px;
    background:#ffffcc;
    font-size:1.5rem;
    display:block;
}
.tkbox2:hover{opacity:0.5;}
.tkbox3{
    padding:16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.5);
    border-radius:16px;
    background:#ffdddd;
}
.fr2{display:grid;gap:24px;grid-template-columns:1fr 1fr;}
.fr3{display:grid;gap:24px;grid-template-columns:1fr 1fr;}
.red{color:#ff0000;}
.tb7{grid-template-columns:200px 200px 200px 200px 100px 100px 150px;}
.tb6{grid-template-columns:300px 200px 300px 200px 200px 100px 150px 150px 150px;}
.th{background:#888;color:#fff;}
.a{color:#fff;padding:8px 0;display:flex;align-items:center;justify-content:center;border-radius:8px;}
.a:hover{opacity:0.8;}
.a8{background:#475569;}
.a7{background:#1D4ED8;}
.a6{background:#15803D;}
.a5{background:#C2410C;}
.a4{background:#6B21A8;}
.a3{background:#0F766E;}
.a2{background:#BE185D;}
.a1{background:#B45309;}
.areabox{margin:32px auto;width:1000px;display:grid;gap:8px;grid-template-columns:3fr 1fr 2fr 2fr 3fr 2fr;}
.areabox2{display:none;}
.wk1{display:grid;gap:8px;grid-template-columns:1fr 1fr 1fr;}
.wk12{display:grid;gap:8px;grid-template-columns:1fr 2fr;}
.wk2{display:grid;gap:8px;grid-template-columns:1fr 1fr;}
.wkn1{display:grid;gap:8px;grid-template-rows:1fr 1fr 1fr 1fr 1fr;}
.wkn2{display:grid;gap:8px;grid-template-rows:1fr 2fr 1fr 1fr;}
.wkn3{display:grid;gap:8px;grid-template-rows:1fr 2fr 1fr 1fr;}
.wkn4{display:grid;gap:8px;grid-template-rows:2fr 1fr 2fr 1fr;}
.wkn5{display:grid;gap:8px;grid-template-rows:1fr 1fr 1fr 1fr;}
.wkn6{display:grid;gap:8px;grid-template-rows:1fr 1fr 2fr;}
.ab{align-content:end;display:grid;gap:8px;}
.ab1{grid-template-rows:8fr 2fr 2fr;}
.ab2{grid-template-rows:7fr 2fr 3fr;}
.ab3{grid-template-rows:7fr 4fr 1fr;}
.ab4{padding-top:8px;grid-template-rows:7fr 2fr 1fr 2fr;}
.ab5{padding-bottom:8px;grid-template-rows:5fr 5fr 2fr;}
.ab6{padding-bottom:8px;grid-template-rows:6fr 4fr 2fr;}
.gotop{box-sizing:border-box;position:fixed;bottom:20px;right:20px;border-radius:50px;width:50px;height:50px;display:grid;place-items:center;background:#ee0000;padding-top:4px;animation:topgo;animation-timeline:scroll();}
@keyframes topgo{
  0% {
    opacity:0;
  }
  10% {
    opacity:1;
  }
}
@media screen and (max-width:1000px){
    body{max-width:100vw;padding:0 16px;}
    .areabox{margin:32px auto;width:100%;}
    .main{margin:32px auto;width:100%;}
    .tkbox{padding:16px;}
    .tbmain{grid-template-columns:100px 1fr;}
}
@media screen and (max-width:800px){
    h2{font-size:1.5rem;}
    h3{font-size:1.25rem;padding:8px 16px;}
    .fr2{gap:16px;}
    .tkbox2{font-size:1rem;padding:8px 16px;}
    .areabox{display:none;}
    .areabox2{margin:0px auto;width:100%;display:grid;gap:8px;grid-template-columns:1fr 1fr;}
    .graph{box-sizing:border-box;font-size:12px;grid-template-columns:1fr;padding:0;margin:0;}
    .graphl{display:none;}
    .graph2{box-sizing:border-box;gap:8px;padding:0;}
    .fr3{grid-template-columns:1fr;}
}
