@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Kosugi&family=Noto+Sans+JP:wght@500&family=Roboto:wght@700&family=Sansita+Swashed&family=Homemade+Apple&display=swap');

body{
  font-family: 'Noto Sans JP', sans-serif;
  font-size:16px;
  color:#3e3a39;
}

a:hover img{
  opacity:0.8;
}

img{
  max-width:100%;
}

header{
  padding:30px 20px 20px 20px;
  font-size:25px;
  background:#006ebe;
  color:#FFF;
}
.el_humburger{
  font-size:9px;
  color:#FFF;
  top:20px;
  z-index:1;
}

.el_humburger span.el_humburger_bar{
  background:#FFF;
}

.navi{
  padding-top:10px;
  background:rgba(0,47,123,0.8);
  top:10px;
}


.js_humburgerOpen .navi{
  width:260px;
}

.navi_inner{
  padding:0px 10px 10px 10px;
}

.nav_title{
  border-bottom:1px solid #FFF;
  border-left:2px solid #FFF;
  border-radius:3px;
  padding:10px;
  background:rgba(255,255,255,0.2);
}

.navi_item{
  margin:0;
}

.navi_item a{
  font-family: 'Noto Sans JP', sans-serif;
  color:#FFF;
  display:block;
  width:100%;
  border-bottom:1px solid #FFF;
  padding:20px 10px;
}

ul.breadcramb{
  background:#001655;
  color:#FFF;
  display:flex;
  list-style:none;
  padding:0;
  margin:0;
  padding:10px;
}

ul.breadcramb li{
  position:relative;
  padding-right:25px;
}

ul.breadcramb li a{
  color:#FFF;
}

ul.breadcramb li:after{
  content:"▲";
  transform:rotate(90deg);
  position:absolute;
  margin-left:5px;
}
ul.breadcramb li:last-child:after{
  display:none;
}

ul.breadcramb li:last-child a{
  color:#001655;
  background:#FFF;
  display:inline-block;
  padding:3px 10px;
  line-height:1;
  border-radius:10px;
}

article{
  background: rgb(0,56,113);
  background: linear-gradient(180deg, rgba(0,56,113,1) 0%, rgba(0,99,199,1) 100%);{
}

.modename{
  color:#FFF;
  padding:10px;
}

ul.statuslist{
  color:#001655;
  display:flex;
  list-style:none;
  padding:0;
  margin:0;
  padding:0px 10px 0px 10px;
}

ul.statuslist li{
  border:1px solid #001655;
  padding:2px 3px;
  margin-right:10px;
}

.bottomtab{
  flex-wrap: nowrap;
  border-bottom:0;
}

.bottomtab li{
  width:100%;
  padding:2px;
}

.bottomtab .nav-link{
  width:100%;
  background:#3379bf;
  color:#79aadc;
  border-radius:0;
  padding:10px;
}

.bottomtab .nav-link.active{
  border:none;
  background:#79aadc;
  color:#002a55;
}

ul.energy_list{
  list-style:none;
  background:#3385d6;
  padding:0;
  margin:0;
  margin:5px 0px;
}

ul.energy_list li{
  padding:10px 10px;
  color:#FFF;
  position:relative;
  border-bottom:1px solid #FFF;
}

ul.energy_list li:last-child{
  border-bottom:0;
}

ul.energy_list li span.value{
  position:absolute;
  right:10px;
  top: 50%;
  -webkit-transform: translateY(-50%); /* Safari用 */
  transform: translateY(-50%);
}

ul.energy_list li div.icon{
  background:#FFF;
  border-radius:20px;
  padding:1px 4px;
  position:relative;
  display:inline-block;
  margin-right:5px;
}


ul.energy_list li:nth-child(1) div.icon{
  color:#f9735d;
}

ul.energy_list li:nth-child(2) div.icon{
  color:#91d894;
}

ul.energy_list li:nth-child(3) div.icon{
  color:#34a693;
}

ul.energy_list li:nth-child(4) div.icon{
  color:#ffb300;
}

ul.energy_list li:nth-child(5) div.icon{
  color:#7e68e0;
}

.updated_at{
  color:#79aadc;
  text-align:right;
  padding:10px 10px;
  font-size:12px;
}

.footer {
    display: block;
    height: 30px;
    background: #000;
}