@charset "utf-8";











#contents h1{font-size:20px;}

@media all and (min-width:768px){
  #contents h1{font-size:30px;}
}




/* main - welcome */
#welcome{text-align:center;}
#welcome .img{width:120px; margin:0 auto 50px auto;;}
#welcome .img img{}
#welcome h1{font-weight:300; font-size:25px; line-height:1.1; margin-bottom:30px; letter-spacing:1px;}
#welcome button{max-width:150px;  margin-bottom:20px;}
#welcome button img{width:20px; margin-left:10px;}
#welcome p{font-size:13px; line-height:1.2; color:#999; font-weight:200;}

@media all and (min-width:768px){
  #welcome .img{width:200px;}
  #main #contents{display:flex; align-items:center; justify-content:center; height:100%;}
  #welcome h1{font-size:35px;}
  #welcome button{max-width:100%;}
  #welcome p{font-size:15px;}
}


/* agent */






















/* basic */

#page h1{margin-bottom:20px;}

#page .snb{margin-bottom:40px; background:#fff; z-index:11;}
#page .snb ul{display:flex; border-bottom:1px solid #eee; }
#page .snb ul li{position:relative; margin-right:7px;}
#page .snb ul li:after{position:absolute; bottom:-1px; left:0; width:100%; height:1px; background:#111; content:""; opacity:0; transition:0.2s;}
#page .snb ul li a{display:block; padding:5px 0; color:#999;}
#page .snb ul li:hover:after{opacity:0.2;}
#page .snb ul li.on:after{opacity:1;}
#page .snb ul li.on a{color:#111;}

#page #controls{margin-bottom:50px; display:flex; }
#page #controls button{display:flex; align-items:center;   color:#999; border:1px solid #eee; padding:5px 15px; border-radius:3px; margin:0 3px 0 0; transition:0.2s;}
#page #controls button i{margin-right:5px;}
#page #controls button.on{color:#111; border-color:#111;}

#page .note{margin-bottom:50px; color:#666;}

@media all and (min-width:768px){
  #page h1{margin-bottom:40px;}
  #page .snb{ position:sticky; top:0;}
  #page .snb ul li{margin-right:25px;}
  #page .snb ul li a{padding:10px 0;}

}



#page #chart>.in{height:500px; margin-bottom:50px;}

#page #table{margin-bottom:100px;}
#page #table>.in{border:1px solid #eee; border-radius:10px; overflow:hidden;}
#page #table th{padding:5px 10px; border:1px solid #eee; border-top:0;}
#page #table td{padding:5px 10px; border:1px solid #eee;}
#page #table table{text-align:center; }
#page #table table thead{}
#page #table table thead tr{}
#page #table table thead tr th{}
#page #table table tbody{}
#page #table table tbody tr{}
#page #table table tbody tr:hover{background:#f9f9f9;}
#page #table table tbody tr:nth-child(odd){}
#page #table table tbody tr:nth-child(even){}

#page #table table th:first-child,
#page #table table td:first-child{border-left:0;}
#page #table table th:last-child,
#page #table table td:last-child{border-right:0;}
#page #table table tbody tr:last-child td{border-bottom:0;}

@media all and (max-width:767px){
  #page #table{overflow-x:auto; padding-left:15px; padding-right:15px; margin-left:-15px; margin-right:-15px; width:auto;}
  #page #table>.in{min-width:600px;}
  #page #table table{}
}


@media all and (min-width:768px){
  #page #table{}
  #page #table th{padding:8px 10px;}
  #page #table td{padding:8px 10px;}
}


#page #mark{margin-bottom:100px;}

#page .source{}
#page .source h2{font-size:14px; margin-bottom:20px; font-weight:400;}
#page .source ul{}
#page .source ul li{}
#page .source ul li + li{margin-top:2px;}
#page .source ul li a{display:inline-block; font-size:11px; color:#999; letter-spacing:0; padding:2px 5px; background:#f9f9f9; border-radius:3px; transition:0.1s;}
#page .source ul li a:hover{color:#333;}

#page .source + .source{margin-top:30px;}

@media all and (min-width:768px){
  #page .source + .source{margin-top:50px;}
  #page .source ul li + li{margin-top:4px;}
  #page .source ul li a{font-size:12px; padding:4px 15px;}
}


#section{opacity: 0; transition: opacity 0.3s ease;}
#section.on{opacity:1;}
#section.fade-out{opacity:0.1; pointer-events:none;}
#section.fade-in{opacity:1; pointer-events:auto;}
#section article{max-width:1000px;}
#section article + article{margin-top:50px;}
#section article h2{font-size:15px; font-weight:700; margin-bottom:10px;}
#section article canvas{}
#section #yearSlider{margin:60px 0;}
#section article .noUi-target{border:0; box-shadow:none; background:var(--c7); cursor:pointer;}
#section article .noUi-connect{background:var(--c3);}
#section article .noUi-handle{box-shadow:none; border:0; background:var(--c1); cursor:grab; width:28px; height:28px; right:-14px; border-radius:50%; }
#section article .noUi-handle:before,
#section article .noUi-handle:after{display:none;}

body.on #section{display:block;}

@media all and (min-width:768px){
  #section article + article{margin-top:100px;}
  #section article h2{margin-bottom:30px; font-size:20px;}
}














.tableArea{}

.tableArea{}
.tableArea + .tableArea{margin-top:100px;}
.tableArea table{text-align:center; border-radius:30px;  border-collapse: separate;
  border-spacing: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--c7);}
.tableArea table.center{text-align:center;}
.tableArea table tr{}
.tableArea table tr th{padding:10px 5px; border:0;}
.tableArea table tr td{padding:10px 5px; border:1px solid var(--c7); transition:0.2s;}
.tableArea table tr:hover td{background:var(--c7);}
.tableArea table thead{background:var(--c1);}
.tableArea table thead tr{}
.tableArea table thead tr th{color:#fff;}
.tableArea table tbody{}
.tableArea table tbody tr{}
.tableArea table tbody tr th{}
.tableArea table tbody tr td{}




@media all and (min-width:768px){
  .tableArea table tr th{padding:12px 10px; font-size:16px;}
  .tableArea table tr td{padding:12px 10px; font-size:15px;}
}

















/*  */