@charset "UTF-8";
#header {
    z-index: 1;
}

/* 天気予報情報 */
#weather {
	position:absolute;
	right:13px;
	top:39px;
	width:117.7px;
	line-height:30px;
}

.temprature_wrapper {
  float:left;
	position:relative;
	top:1px;
}

.hour_wrapper {
  float:right;
	position:relative;
	top:1px;
}

.val_temprature {
	font-size:18px;
	font-weight:400;
}

.val_hour {
	font-size:18px;
	font-weight:400;
}

.temprature_unit {
	margin-left:2px;
	font-size:14px;
	font-weight:400;
}

.hour_unit {
	margin-left:2px;
	font-size:14px;
	font-weight:400;
}

/* 晴れ */
#weather.w100 {background:url(../img/100.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w123 {background:url(../img/123.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w124 {background:url(../img/124.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w130 {background:url(../img/130.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w131 {background:url(../img/131.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w500 {background:url(../img/500.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w600 {background:url(../img/600.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w101 {background:url(../img/101.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w102 {background:url(../img/102.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w104 {background:url(../img/104.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w110 {background:url(../img/110.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w112 {background:url(../img/112.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w115 {background:url(../img/115.svg) center no-repeat;
  background-size: 30px 30px;}
/* 曇り */
#weather.w200 {background:url(../img/200.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w209 {background:url(../img/209.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w231 {background:url(../img/231.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w201 {background:url(../img/201.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w202 {background:url(../img/202.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w204 {background:url(../img/204.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w210 {background:url(../img/210.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w212 {background:url(../img/212.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w215 {background:url(../img/215.svg) center no-repeat;
background-size: 30px 30px;}
/* 雨 */
#weather.w300 {background:url(../img/300.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w304 {background:url(../img/304.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w306 {background:url(../img/306.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w328 {background:url(../img/306.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w329 {background:url(../img/329.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w350 {background:url(../img/350.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w308 {background:url(../img/306.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w301 {background:url(../img/301.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w302 {background:url(../img/302.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w303 {background:url(../img/303.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w311 {background:url(../img/311.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w313 {background:url(../img/313.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w314 {background:url(../img/314.svg) center no-repeat;
  background-size: 30px 30px;}
/* 雪 */
#weather.w400 {background:url(../img/400.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w405 {background:url(../img/405.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w425 {background:url(../img/425.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w426 {background:url(../img/426.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w427 {background:url(../img/427.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w450 {background:url(../img/450.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w340 {background:url(../img/340.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w406 {background:url(../img/406.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w407 {background:url(../img/407.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w401 {background:url(../img/401.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w402 {background:url(../img/402.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w403 {background:url(../img/403.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w411 {background:url(../img/411.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w413 {background:url(../img/413.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w414 {background:url(../img/414.svg) center no-repeat;
  background-size: 30px 30px;}
/* みぞれ */
#weather.w430 {background:url(../img/430.svg) center no-repeat;
  background-size: 30px 30px;}
/* 猛暑 */
#weather.w550 {background:url(../img/550.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w552 {background:url(../img/552.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w553 {background:url(../img/553.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w558 {background:url(../img/558.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w562 {background:url(../img/562.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w563 {background:url(../img/563.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w568 {background:url(../img/568.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w572 {background:url(../img/572.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w573 {background:url(../img/573.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w582 {background:url(../img/582.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w583 {background:url(../img/583.svg) center no-repeat;
  background-size: 30px 30px;}
/* 雷 */
#weather.w800 {background:url(../img/800.svg) center no-repeat;
  background-size: 30px 30px;}
/* 大雨 */
#weather.w850 {background:url(../img/850.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w851 {background:url(../img/851.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w852 {background:url(../img/852.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w853 {background:url(../img/853.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w854 {background:url(../img/854.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w855 {background:url(../img/855.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w859 {background:url(../img/859.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w861 {background:url(../img/861.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w862 {background:url(../img/862.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w863 {background:url(../img/863.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w864 {background:url(../img/864.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w865 {background:url(../img/865.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w869 {background:url(../img/869.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w871 {background:url(../img/871.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w872 {background:url(../img/872.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w873 {background:url(../img/873.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w874 {background:url(../img/874.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w881 {background:url(../img/881.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w882 {background:url(../img/882.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w883 {background:url(../img/883.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w884 {background:url(../img/884.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w950 {background:url(../img/950.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w951 {background:url(../img/951.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w952 {background:url(../img/952.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w953 {background:url(../img/953.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w954 {background:url(../img/954.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w958 {background:url(../img/958.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w961 {background:url(../img/961.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w962 {background:url(../img/962.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w963 {background:url(../img/963.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w964 {background:url(../img/964.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w968 {background:url(../img/968.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w971 {background:url(../img/971.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w972 {background:url(../img/972.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w973 {background:url(../img/973.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w974 {background:url(../img/974.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w981 {background:url(../img/981.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w982 {background:url(../img/982.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w983 {background:url(../img/983.svg) center no-repeat;
  background-size: 30px 30px;}
#weather.w984 {background:url(../img/984.svg) center no-repeat;
  background-size: 30px 30px;}


/* メインコンテンツ */
#main {
  position: absolute;
  top: 77px;
  width: 100%;
}
#valarea_wrapper {
  width: 638px;
  margin-left: auto;
  margin-right: auto;
}
#status {
  width: 269px;
  font-size: 18px;
  text-align: center;
  line-height: 33px;
}
#card_area {
  font-size: 0;/* inline-block で要素を並べたときにできる余計な隙間をなくす為 */
  margin-top: 3px;
}
#card_area::after {
  content: "";
  display: block;
  clear: both;
}
#card_valinfo {
  display: inline-block;
  vertical-align: middle;
}
#card_valinfo .valimg {
  width: 269px;
  height: 64px;
  padding-right: 40px;
  padding-left: 38px;
  font-weight: bold;
  background-color: #fff;
  border-radius: 8px;
  box-sizing: border-box;
}
#card_valinfo .valimg #s_b_val {
  float: right;
}
#card_valinfo .valimg .val5 {
  font-size: 32px;
  line-height: 64px;
}
#card_valinfo .valimg .unit {
  font-size: 18px;
  line-height: 27px;
}
.arrow {
  margin: 0 30px;
  display: inline-block;
  width: 40px;
  height: 23px;
  vertical-align: middle;
  position: relative;
}
#card_house {
  width: 269px;
  height: 64px;
  background-color: #fff;
  border-radius: 8px;
  float: right;
}
#valarea_data {
  display: table;
  width: 638px;
  height: 174px;
  margin-top: 15px;
  background-color: #fff;
  border-radius: 8px;
}
#valarea_data_container {
  display: table-cell;
  vertical-align: middle;
}
#valarea_sale,
#valarea_buy {
  width: 100%;
  font-size: 0;/* inline-block で要素を並べたときにできる余計な隙間をなくす為 */
  text-align: center;
}
.valbox {
  height: 72px;
  width: 250px;
  display: inline-block;
  vertical-align: middle;
}
.valtxt {
	line-height: 33px;
	font-size: 18px;
	text-align: center;
	font-weight: bold;
}
.valstr {
  width: 100%;
  text-align: center;
  font-weight: bold;
  position: relative;
  top: -9px;
}
.valstr .val {
  font-size: 32px;
  line-height: 48px;
}
.valstr .unit {
  font-size: 18px;
  line-height: 27px;
}
#valarea_buy + #valarea_sale {
  margin-top: 9px;
}
#valarea_sale .valtxt {
  color: #476585;
}
#valarea_buy .valtxt {
  color: #D97126;
}

/* 未登録時表示 */
#regist_no_wrapper,
#session_timeout_wrapper,
#init_wrapper {
  position: absolute;
  left: 0;
  top: 77px;
  width: 100%;
  text-align: center;
}
/*
#session_timeout_wrapper{
  left: 180px;
}
*/
.alert_txt {
	font-size: 20px;
	line-height: 22px;
	font-weight: bold;
}
#sm_btn_toregist {
  position: absolute;
  left: 0;
  right: 0;
  top: 69px;
  margin-left: auto;
  margin-right: auto;
}


/* 下部ボタン */

#bottom_btn_wrapper {
  position: absolute;
  left: 0;
  top: 280px;
  width: 100%;
  margin-top: 20px;
}
#bottom_btn1 {
  margin-left: auto;
  margin-right: auto;
}

/* 「売電量グラフ/売買電量グラフ」下部ボタン切り替え 
    class="hide" */
#bottom_btn1.hide {
  display:none;
}
#bottom_btn1_1.hide {
  display:none;
}

/* 電波到達確認ボタン */
#btn_radio_check {
  position: absolute;
  left: 0;
  right: 0;
  top: 69px;
  margin-left: auto;
  margin-right: auto;
}

/* 最終取得時刻 */

#last_update_wrapper {
  position: absolute;
  right: 13px;
  top: 73px;
  line-height: 27px;
  font-size: 18px;
}
#last_update {
  margin-right: 5px;
}

/* 買電中、初期表示 
   class=なし */
#page #valarea_wrapper {
  display: block;
}
#page #regist_no_wrapper {
  display: none;
}
#page #init_wrapper {
  display: none;
}
#page #session_timeout_wrapper {
  display: none;
}
#page #bottom_btn_wrapper {
  display: block;
}
#page #last_update_wrapper {
  display: block;
}
#page #valimg_buy {
  display: block;
}
#page #valimg_sale {
  display: none;
}

/* 売電中 
   class="sale" */
#page.sale #valimg_buy {
  display: none;
}
#page.sale #valimg_sale {
  display: block;
}

/* スマートメーターが登録されていない場合 
   class=regist_no */
#page.regist_no #valarea_wrapper {
  display: none;
}
#page.regist_no #regist_no_wrapper {
  display: block;
}
#page.regist_no #bottom_btn_wrapper {
  display: none;
}
#page.regist_no #last_update_wrapper {
  display: none;
}
#page.regist_no #session_timeout_wrapper {
  display: none;
}
/* スマートメーターを登録時、プロパティマップにEPC:0xEB(定時積算電力量計測値（逆方向計測値）)がない場合 
   class="only_buy" */

#page.only_buy #valimg_buy {
  display: block;
}
#page.only_buy #valimg_sale {
  display: none;
}
#page.only_buy #valarea_sale {
  display: none;
}
#page.only_buy #sell_arrow {
  display: none;
}
#page.only_buy #index_inst_sell {
  display: none;
}

/* スマートメーターが初期通信中の時の表示 
   class="init" */

#page.init #valarea_wrapper {
  display: none;
}
#page.init #init_wrapper {
  display: block;
}
#page.init #bottom_btn_wrapper {
  display: none;
}
#page.init #last_update_wrapper {
  display: none;
}

/* スマートメーターセッション切れの時の表示 
   class="session_timeout" */
#page.session_timeout #valarea_wrapper {
  display: none;
}
#page.session_timeout #session_timeout_wrapper {
  display: block;
}
#page.session_timeout #last_update_wrapper {
  display: none;
}

.arrow span{
  display: inline-block;
  width: 40px;
  height: 23px;
  position: absolute;
  top: 0;
  left: 0;
}
/* 売電矢印 */
/* 背景のプリロード */
#sell_arrow {
  background:
    url(../img/to_left_arrow_1.png),
    url(../img/to_left_arrow_2.png),
    url(../img/to_left_arrow_3.png);
  background-repeat:  no-repeat;
  visibility: visible;
}
#sell_arrow.f_0 {
  background: url(../img/to_left_arrow_1.png) no-repeat;
}
#sell_arrow.f_1 {
  background: url(../img/to_left_arrow_2.png) no-repeat;
}
#sell_arrow.f_2 {
  background: url(../img/to_left_arrow_3.png) no-repeat;
}

/* 買電矢印 */
/* 背景のプリロード */
#buy_arrow {
  background:
    url(../img/to_right_arrow_1.png),
    url(../img/to_right_arrow_2.png),
    url(../img/to_right_arrow_3.png);
  background-repeat:  no-repeat;
  visibility: visible;
}
#buy_arrow.f_0 {
  background: url(../img/to_right_arrow_1.png) no-repeat;
}
#buy_arrow.f_1 {
  background: url(../img/to_right_arrow_2.png) no-repeat;
}
#buy_arrow.f_2 {
  background: url(../img/to_right_arrow_3.png) no-repeat;
}


/* アイコン */
#s_b_icon {
  float: left;
  width: 33px;
  height: 100%;
  background: url(../img/electric_line.svg) no-repeat center;
}
#u_icon {
  width: 48px;
  height: 100%;
  margin: 0 auto;
  background: url(../img/icon_home.svg) no-repeat center;
}