@charset "UTF-8";
/* CSS Document */
/* -----------------------------------------------
	@title   Common CSS
	@detail  共通CSS
	@since   2015/12/22
	@remarks
		id属性 => 位置指定
		class => 要素の属性指定
----------------------------------------------- */

/* Global
----------------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}ol,ul,li {list-style:none;}

body{
	-webkit-tap-highlight-color: rgba(255,255,255, 0.0);
	-moz-user-select: none;
	-ms-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	background-color:#3c3c3d;
}

/* 本体ブラウザでのドラッグ操作禁止 */
* {
	-webkit-user-drag: none;
}

body, 
input, 
textarea {
	font-family: 'ＭＳ Ｐゴシック', 'MS PGothic' ,sans-serif;
}
a {
  outline:0;
}
/*::-moz-selection {
  background: rgba(255,255,255, 0.0) !important;
} */

div {
	position: relative;
}
sup {
/*  vertical-align: top;
  font-size: 70%;*/
  font-size: 50% !important;
  line-height:1 !important;
  vertical-align: 0.7em !important;
}

.disable {
  color: rgba(0,0,0,0.6);
}


/* Frame Work
----------------------------------------------- */
#logo{
	position:absolute;
	top: 50%;
	left: 50%;
	margin-top: -264px;
	margin-left: -400px;
	width:800px;
	height:528px;
	background:url(../img/logo.png) no-repeat left top;
}

.wrap {
	position: absolute;
	top: 50%;
	margin-top: -240px;
	left: 50%;
	margin-left: -400px;

	width: 800px;
	height: 480px;
	color: #000000;
	background-color: #3c3c3d;
}

#page {
	position: relative;
	color: #000000;
	width: 800px;
	height: 480px;
	background-color: #d7d8da !important;
	overflow: hidden;
}

/* ヘッダ */
#header {
  height: 59px;
}

/*左肩アイコン*/
#h_icon {
  width:26px;
  height: 28px;
}
/*ホーム*/
#h_icon.h_icon-0 {
  background: url(../img/icon_home.svg) no-repeat !important;
  left: 33px;
  top: 10px;
}
/*電気の流れ*/
#h_icon.h_icon-1 {
  background: url(../img/icon_elec.svg) no-repeat !important;
  left: 33px;
  top: 10px;
}
/*スマートメーター*/
#h_icon.h_icon-2 {
  background: url(../img/icon_sm.svg) no-repeat !important;
  left: 33px;
  top: 10px;
}
/*機器コントロール*/
#h_icon.h_icon-3 {
  background: url(../img/icon_control.svg) no-repeat !important;
  left: 33px;
  top: 10px;
}
/*空気環境*/
#h_icon.h_icon-4 {
  background: url(../img/icon_air.svg) no-repeat !important;
  left: 33px;
  top: 10px;
}
/*グラフ*/
#h_icon.h_icon-5 {
  background: url(../img/icon_graph.svg) no-repeat !important;
  left: 33px;
  top: 10px;
}
/*お知らせ*/
#h_icon.h_icon-6 {
  background: url(../img/icon_info.svg) no-repeat !important;
  left: 33px;
  top: 10px;
}
/*設定*/
#h_icon.h_icon-7 {
  background: url(../img/icon_setting.svg) no-repeat !important;
  left: 33px;
  top: 10px;
}
/*戸締り*/
#h_icon.h_icon-8 {
  background: url(../img/icon_lock.svg) no-repeat !important;
  left: 33px;
  top: 10px;
}

/*タイトル*/
#h_title {
  position: absolute;
  top: 12px;
  left: 67px;
  height:20px;
  line-height:20px;
  font-size: 20px;
}

/*日時*/
#h_datetime {
  position: absolute;
  right: 13px;
  top: 15px;
  height:20px;
  width:240px;
  line-height:20px;
  font-size: 20px;
  text-align: right;
}

/*フッター表示順*/
a.fmhit {
	z-index: 200;
}
#fmenu {
	z-index: 150;
}

/*メニュー表示時のアクティブ領域*/
#hitLayer {
	position: absolute;
	width: 800px;
	height: 480px;
	top: 0px;
	left: 0px;
}
/*メニュー表示時の非アクティブ領域*/
#unhitObject {
	position: absolute;
	bottom: 150px;
	z-index: 900;
}

#fmenu:after{
  content: "."; 
  display: block; 
  height: 0; 
  font-size:0;	
  clear: both; 
  visibility:hidden;
}

#fmbtn_wrapper {
	width:774px;
	height:76px;
	left:15px;
	top:15px;
	overflow:hidden;
}

/*引き出しメニュー内のボタン*/
#fmenu .fmbtn {
	float:left;
	width:82px;
	height:76px;
	margin-right:2px;
}
#fmenu .fmhit {
	display:block;
	position:absolute;
	width:82px;
	height:76px;
	top:0px;
	left:0px;
	text-decoration: none;
}

/*引き出しメニューボタンの画像*/
#fmbtn_00,
#fmbtn_01,
#fmbtn_02,
#fmbtn_03,
#fmbtn_04,
#fmbtn_05,
#fmbtn_06,
#fmbtn_07,
#fmbtn_08 {
	background-repeat: no-repeat;
}

/*ホーム*/
#fmbtn_00{
	background-image: url(../img/fmbtn_00.png);
}

/*電気の流れ*/
#fmbtn_01{
	background-image: url(../img/fmbtn_01.png);
}

/*スマートメーター*/
#fmbtn_02{
	background-image: url(../img/fmbtn_02.png);
}

/*コントロール*/
#fmbtn_03{
	background-image: url(../img/fmbtn_03.png);
}

/*空気環境*/
#fmbtn_04{
	background-image: url(../img/fmbtn_04.png);
}
/*グラフ*/
#fmbtn_05{
	background-image: url(../img/fmbtn_05.png);
}
/*お知らせ*/
#fmbtn_06{
	background-image: url(../img/fmbtn_06.png);
}
/*設定*/
#fmbtn_07{
	background-image: url(../img/fmbtn_07.png);
}
/*戸締り*/
#fmbtn_08{
	background-image: url(../img/fmbtn_08.png);
}

/* ボタン9個の場合 */
#fmbtn_wrapper {
	width:774px;
	left:15px;
/*background:rgba(255,0,0,0.8);*/
}
#fmenu .fmbtn {
	margin-right:4px;
}
/* ボタン8個の場合 */
#fmbtn_wrapper.btn_cnt8 {
	width:784px;
	left:16px;
}
#fmbtn_wrapper.btn_cnt8 .fmbtn {
	margin-right:14px;
}
/* ボタン7個の場合 */
#fmbtn_wrapper.btn_cnt7 {
	width:805px;
	left:14px;
}
#fmbtn_wrapper.btn_cnt7 .fmbtn {
	margin-right:31px;
}
/* ボタン6個の場合 */
#fmbtn_wrapper.btn_cnt6 {
	width:690px;
	left:71px;
}
#fmbtn_wrapper.btn_cnt6 .fmbtn {
	margin-right:31px;
}
/* ボタン5個の場合 */
#fmbtn_wrapper.btn_cnt5 {
	width:575px;
	left:129px;
}
#fmbtn_wrapper.btn_cnt5 .fmbtn {
	margin-right:31px;
}
/* ボタン4個の場合 */
#fmbtn_wrapper.btn_cnt4 {
	width:460px;
	left:186px;
}
#fmbtn_wrapper.btn_cnt4 .fmbtn {
	margin-right:31px;
}
/* ボタン3個の場合 */
#fmbtn_wrapper.btn_cnt3 {
	width:345px;
	left:244px;
}
#fmbtn_wrapper.btn_cnt3 .fmbtn {
	margin-right:31px;
}
/* ボタン2個の場合 */
#fmbtn_wrapper.btn_cnt2 {
	width:230px;
	left:301px;
}
#fmbtn_wrapper.btn_cnt2 .fmbtn {
	margin-right:31px;
}


/*引き出しメニュー背景*/
#fmenu {
	position: absolute;
	left: 0;
	top: 430px;
	width: 800px;
	height: 95px;
	background-color: rgba(102,102,102,0.9);
}

/*フッター*/
#footer {
	position: absolute;
	left: 0px;
	bottom: 0px;
	width: 800px;
	height: 52px;
	background-color: #FFFFFF;
	border: 1px solid #b3b3b3;
	z-index: 1000;
}
/*フッターボタン*/
#footer .footer_button {
	position: absolute;
}
#footer .footer_button a {
	text-decoration: none;
	line-height: 24px;
	font-size: 16px;
	font-weight: 400;
	color: #1A1A1A;
	padding-left: 4px;
	width: 86px;
	height: 39px;
	padding-top: 8px;
	left: -7px;
}
#footer #footer_back {
	top: 4px;
	left: 7px;
	background-image: url(../img/b_back_86x32.png);
	width: 86px;
	height: 32px;
}
#footer #footer_back a{
	position: absolute;
	width: 101px;
	height: 48px;
	padding-top: 0px;
	padding-left: 0px;
	left: -7px;
	top: -4px;
	display: block;
}
#footer_back_txt{
	top: 8px;
	text-align: center;
}
#footer #footer_menu {
	position: absolute;
	background-image: url(../img/b_menu_110x46.png);
	top: 0px;
	left: 346px;
	width: 110px;
	height: 45px;
}
#footer #footer_menu a {
	position: absolute;
	text-align:center;
	height: 100%;
	width: 100%;
	top: 0px;
	left: 0px;
	padding-top: 0px;
	padding-left: 0px;
	z-index: 10;
}
#footer_menu_txt{
	z-index: 0;
	display: block;
	font-size: 18px;
	font-weight: 400;
	line-height: 33px;
	color:rgba(0,0,0,0.9);
	text-align: center;
	top: 6px;
}
#footer_info {
	width: 24px;
	height: 24px;
}
#footer_info.footer_info {
	position: absolute;
	background: url(../img/footer_info.svg) no-repeat;
	left: 477px;
	top: 14px;
}
#footer .footer_info.no_info {
	visibility: hidden;
}
#footer .footer_server_msg {
	position: absolute;
	width: 84px;
	height: 49px;
	right: 8px;
	top: 3px;
	background: url(../img/b_footer_84x49.png) no-repeat;
}
#footer .server_msg_cnt {
	position: absolute;
	line-height: 24px;
	font-size: 16px;
	font-weight: 400;
	top: 11px;
	right: 11px;
	color: rgba(0,0,0,0.9);
}
#footer_server_msg_area{
	position: absolute;
	width: 84px;
	height: 49px;
	left:0px;
	top: 0px;
}

#footer #footer_mode {
	position: absolute;
	top: 8px;
	left: 100px;
    background-color:#333333;
    border: 1px #000 solid;
	width:98px;
	height:36px;
	display: block;
	text-align: center;
}
#footer_mode_txt{
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	color: #E8CD7D;
	top: 11px;
}
#footer #pvlimit_label {
	position: absolute;
	top: 3px;
	left: 225px;
	width: 112px;
	height: 49px;
	text-align: center;
	background: url(../img/b_bar_112x49.png) no-repeat;
}
#footer #pvlimit_label.updatedSchedule {
	background: url(../img/b_112x49.png) no-repeat;
}
#footer #pvlimit_label_text {
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: #1A1A1A;
	top: 11px;
	width: 80px;
	height: 24px;
	left: 14px;
}
#pvlimit_area{
	top: 0px;
	left: 0px !important;
	width: 112px !important;
	height: 49px !important;
	padding:  0px !important;
}
#setting_value, .setting_value {
	visibility: hidden !important;
	display: none !important;
}
.hidden {
	visibility: hidden;
}
.selected {
    cursor: default;
}
#pic_info {
  position: absolute;
  width:42px;
  height:42px;
  left:500px;
  top:-4px;
}
#pic_info.cable_1  { background: url(../img/pic_cable.png) no-repeat;}
#pic_info.cable_0  { background: url(../img/pic_cable_cut.png) no-repeat;}
#pic_info.wifi_0     { background: url(../img/pic_wifi_0.png) no-repeat;}
#pic_info.wifi_1     { background: url(../img/pic_wifi_1.png) no-repeat;}
#pic_info.wifi_2     { background: url(../img/pic_wifi_2.png) no-repeat;}
#pic_info.wifi_3     { background: url(../img/pic_wifi_3.png) no-repeat;}
#pic_info.wifi_4     { background: url(../img/pic_wifi_4.png) no-repeat;}


/******************************************************
 * 多デバイス用調整
 ******************************************************/
body.tv #logo, 
body.hc #logo, 
body.sp #logo, 
body.nf #logo, 
body.aiseg #logo {
		display:none !important;
}

/* Viera用画面フィット */
body.tv .wrap {
	top: 0 !important;
	margin:0 !important;
	margin-left:-400px !important;
	padding: 0 !important;
}

body.pc sup {
  font-size: 70% !important;
  vertical-align: 0.3em !important;
}

/* スマホ用画面フィット設定 */
body.sp * {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}

/* スマホ table 表示対応 
   - transform を適用すると rowspan が使えないので外す
   - backface-visibility: visible にしないと背景色が欠ける */
body.sp table,
body.sp table * {
	-webkit-transform: none !important;
	transform: none !important;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
}

/* スマホ/住コン表示時のデフォルトの行間、自動改行指定 */
body.sp,
body.hc {
	line-height: 1.1;    /* デフォルトの行間設定 */
	white-space: nowrap; /* デフォルトの改行設定(改行しない) */
}

/* ポップアップ詳細メッセージは自動改行ON */
body.sp #popup_detail,
body.hc #popup_detail {
	white-space: normal;
}

/* スマホの自動フォントサイズ調整OFF */
body.sp {
	-webkit-text-size-adjust: 100%;
}

/* Media Query
   画面フィット処理完了までBodyを非表示
----------------------------------------------- */
@media only screen and (orientation:portrait) {
	body {
		visibility: hidden;
	}
}
@media only screen and (max-height: 479px), only screen and (max-width: 799px) {
	body {
		visibility: hidden;
	}
}

/* Media Query
   PCで画面がウィンドウをはみ出す場合にスクロールを有効化
----------------------------------------------- */
@media only screen and (max-height: 527px) {
	#logo,.wrap{
		top: 0%;
		margin-top: 0px;
	}
}

@media only screen and (max-width: 799px) {
	#logo,.wrap{
		left: 0%;
		margin-left: 0px;
	}
}

/* スワイプ操作時のエフェクト画像
----------------------------------------------- */
.swipe_ctrl {
	position: fixed;
	height: 100px;
	width: 92px;
	left: 44.5%;
	z-index: 1000;
	opacity: 0.6;
}
#swipe_ctrl_up {
	background: url(../img/swipe_ctrl_arrow.png) no-repeat;
	background-size: contain;
	transform: scale(1, -1);
	bottom: 31%;
}

#swipe_ctrl_down {
	background: url(../img/swipe_ctrl_arrow.png) no-repeat;
	background-size: contain;
	top: 20%;
}