@charset "UTF-8";
/* CSS Document */

#page {
    background: url(../img/bg_kk.jpg) no-repeat !important;
}

#g_title {
    position: absolute;
    left: 0;
    width: 100%;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}

/* 天気 */
#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/100.svg) center no-repeat;
				background-size: 30px 30px;}
#weather.w124 {background:url(../img/100.svg) center no-repeat;
				background-size: 30px 30px;}
#weather.w130 {background:url(../img/100.svg) center no-repeat;
				background-size: 30px 30px;}
#weather.w131 {background:url(../img/100.svg) center no-repeat;
				background-size: 30px 30px;}
#weather.w500 {background:url(../img/100.svg) center no-repeat;
				background-size: 30px 30px;}
#weather.w600 {background:url(../img/100.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/200.svg) center no-repeat;
				background-size: 30px 30px;}
#weather.w231 {background:url(../img/200.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/300.svg) center no-repeat;
				background-size: 30px 30px;}
#weather.w306 {background:url(../img/300.svg) center no-repeat;
				background-size: 30px 30px;}
#weather.w328 {background:url(../img/300.svg) center no-repeat;
				background-size: 30px 30px;}
#weather.w329 {background:url(../img/300.svg) center no-repeat;
				background-size: 30px 30px;}
#weather.w350 {background:url(../img/300.svg) center no-repeat;
				background-size: 30px 30px;}
#weather.w308 {background:url(../img/300.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/400.svg) center no-repeat;
				background-size: 30px 30px;}
#weather.w425 {background:url(../img/400.svg) center no-repeat;
				background-size: 30px 30px;}
#weather.w426 {background:url(../img/400.svg) center no-repeat;
				background-size: 30px 30px;}
#weather.w427 {background:url(../img/400.svg) center no-repeat;
				background-size: 30px 30px;}
#weather.w450 {background:url(../img/400.svg) center no-repeat;
				background-size: 30px 30px;}
#weather.w340 {background:url(../img/400.svg) center no-repeat;
				background-size: 30px 30px;}
#weather.w406 {background:url(../img/400.svg) center no-repeat;
				background-size: 30px 30px;}
#weather.w407 {background:url(../img/400.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;}

/* Button */
.scene_button {
	position:absolute;
	width: 112px;
	height: 147px;
	background:url(../img/b_mh_112x147.png) no-repeat;
}
.scene_button_content {
	width: 100%;
	height: 100%;
	top: 2px;
	overflow:hidden;
}
.unset_scene > .scene_button_content {
	display: none;
}
.unset_scene {
	position:absolute;
	width: 112px;
	height: 147px;
	background:url(../img/s_9_03.png) no-repeat; 
	background-position: 2px 1px;
}
.scene_time {
	position:absolute;
	box-sizing: border-box;
	left: 3px;
	top: 0;
	right: 0;
	height: 22px;
	background:url(../img/b_ic_mh_scene.png) no-repeat;
	visibility:hidden;
}
.scene_time.repeat {
	top: -23px;
	height: 45px;
}
.scene_time.calendar {
	top: -46px;
	height: 68px;
}

.scene_button.withtime .scene_time {
	visibility:visible;
}

.scene_time_text {
	position: absolute;
    left: 3px;
    top: 0;
    height: 22px;
    padding-left: 40px;
    font-size: 16px;
    line-height: 22px;
    text-align: left;
    color: #fff;
	visibility:hidden;
}

.scene_button.withtime .scene_time_text {
	visibility:visible;
}

#scene_button1 {
	left:308px;
	top:24px;
}
#scene_button2 {
	left:428px;
	top:24px;
}
#scene_button3 {
	left:548px;
	top:24px;
}
#scene_button4 {
	left:668px;
	top:24px;
}
#scene_button5 {
	left:308px;
	top:182px;
}
#scene_button6 {
	left:428px;
	top:182px;
}
#scene_button7 {
	left:548px;
	top:182px;
}
#scene_button8 {
	left:668px;
	top:182px;
}
#scene_info > .scene_button .button_text {
	position:absolute;
	top:-2px;
	height:36px;
	width: 100%;
	font-size: 15px !important;
	line-height:36px;
	padding-top:100px;
	background-size: auto 57px;
	background-position:center 38px;
	background-repeat:no-repeat;
}
.scene_button.s_1 .button_text {
	background-image:url(../img/s_31_1.svg);
}
.scene_button.s_2 .button_text {
	background-image:url(../img/s_31_2.svg);
}
.scene_button.s_3 .button_text {
	background-image:url(../img/s_31_3.svg);
}
.scene_button.s_4 .button_text {
	background-image:url(../img/s_31_4.svg);
}
.scene_button.s_5 .button_text {
	background-image:url(../img/s_31_5.svg);
}
.scene_button.s_6 .button_text {
	background-image:url(../img/s_31_6.svg);
}
.scene_button.s_7 .button_text {
	background-image:url(../img/s_31_7.svg);
}
.scene_button.s_8 .button_text {
	background-image:url(../img/s_31_8.svg);
}
.scene_button.s_9 .button_text {
	background-image:url(../img/s_31_9.svg);
}
.scene_button.s10 .button_text {
	background-image:url(../img/s_31_10.svg);
}
.scene_button.s11 .button_text {
	background-image:url(../img/s_31_11.svg);
}
.scene_button.s12 .button_text {
	background-image:url(../img/s_31_12.svg);
}
.scene_button.s13 .button_text {
	background-image:url(../img/s_31_13.svg);
}
.scene_button.s14 .button_text {
	background-image:url(../img/s_31_14.svg);
}
.scene_button.s15 .button_text {
	background-image:url(../img/s_31_15.svg);
}

/* テキスト */
/* 左パネル */
#left_panel {
	position: absolute;
	top: 26px;
	left: 20px;
	width: 276px;
	height: 300px;
	background:url(../img/s_9_01.png) no-repeat; 
}

/* 最高気温/最低気温 */
#place {
	position:absolute;
	left: 0px;
	top: 151px;
	width: 276px;
	height: 56px;
    text-align: center;
    font-size: 0;
}
#place_wrapper1,
#place_wrapper2 {
	display: none;
	min-width: 116px;
}
#place_wrapper2 {
	margin-left: 2px;
}
#place_txt1, 
#place_txt2, 
#place_val_wrapper1, 
#place_val_wrapper2 {
	line-height: 28px;
	height: 28px;
}
#place_txt1, 
#place_txt2 {
	font-size:18px;
	text-align: center;
}
#place_val_wrapper1{
	color:#D97126;
}
#place_val_wrapper2 {
	color:#4E6DB3 ;
}
#place_val1, 
#place_val2 {
	font-size: 26px;
}
#place_val_unit1,
#place_val_unit2 {
	content:"℃";
	font-size: 18px;
}

/* 今月の電気代/売電代 */
#denki {
	position:absolute;
	left:36px;
	top:225px;
	width:216px;
	visibility:hidden;
}
#denki.on {
	visibility:visible;
}
#kai_wrapper,
#uri_wrapper {
	height: 33px;
	line-height: 33px;
    font-size: 0;
}
#kai_txt, 
#uri_txt, 
#kai_val, 
#uri_val,
.denki_unit {
    display: inline-block;
	position: relative;
}
#kai_txt, 
#uri_txt, 
#kai_val, 
#uri_val {
	width:100px;
	text-align: right;
}
#kai_txt, 
#uri_txt {
    top: 4px;
	height:16px;
	line-height: 16px;
	font-size:16px;
}
#kai_val,
#uri_val {
	font-size:21px;
	height:21px;
	line-height: 21px;
    top: 6px;
}
#kai_val {
	color: #D97126;
}
#uri_val {
	color: #476585;
}
.denki_unit {
    top: 4px;
	margin-left: 4px;
	height:12px;
	line-height: 12px;
	font-size:12px;
}

/* 配達 */
#haitatu {
	position:absolute;
	left: 35px;
	top: 23px;
	width: 58px;
	height: 82px;
	background:url(../img/s_9_02.png) no-repeat;
	visibility:hidden;
}
#haitatu.off {
	background-position:0px 82px;
}
#haitatu.on {
	background-position:0px 0px;
}
#haitatu.exsist {
	visibility:visible;
}

/* 開通知 */
#lock {
	position:absolute;
	left:113px;
	top:26px;
	width:104px;
	height:51px;
	background:url(../img/b_mh_104x51.png) no-repeat;
}
#lock > .button_text {
	width:100%;
	height:100%;
	background:url(../img/b_ic_mh_104x51.png) no-repeat;
}
#lock.lv_0 {display:none;}
#lock.lv_1 > .button_text {background-position:0px 0px;}
#lock.lv_2 > .button_text {background-position:0px -51px;}
#lock.lv_3 > .button_text {background-position:0px -102px;}