@charset "utf-8";
@media only screen and (max-width:850px){
	#header .today { right:0;}
}

/*==========================================================================
  GENERAL
============================================================================*/
#general { overflow: hidden;}


/* TITLE */
#general h2.cate_tit {
	position:relative;
	margin: 0 0 2%; padding:2px 15px 0 50px;
	font-size: 156.3%;
	letter-spacing: 3px;
	color: #fff;
}
#general h2.cate_tit::before {
	display: block; clear: both; content:"";
	position: absolute; top: 0; left: 0;
	width:35px; height:35px;
}
#general .cate_water h2.cate_tit::before { background: url("../img/icon_water_w.svg") no-repeat left center;}
#general .cate_sun h2.cate_tit::before { background: url("../img/icon_sun_w.svg") no-repeat left center;}


/* ENERGY and STATUS */
#general .energy_staus { position: relative; float:left; padding:2% 0 0; width:49%; overflow: hidden;}
#general .energy_staus+.energy_staus { margin-left:2%;}
#general .energy_staus::before {
	display: block; clear: both; content:"";
	position: absolute; top:5%; right: 0;
	width:315px; height:250px;
	z-index: 9999;
}
#general .cate_water .energy_staus::before,
#general .energy_staus.cate_water::before { background: url("../img/illust_water.svg") no-repeat;}
#general .cate_sun .energy_staus::before,
#general .energy_staus.cate_sun::before { background: url("../img/illust_sun.svg") no-repeat;}

#general .energy { overflow: hidden;}
#general .energy dl { position: relative; padding: 2% 0; color: #fff; overflow: hidden;}
#general .energy dt {  float: left; font-size: 112.5%; width: 110px;}
#general .energy dd { float: left;}
#general .energy dd+dd { margin-top: 7px;}
#general .energy dd p { line-height: 25px;}
#general .energy dd p::after { display: block; clear: both; content:"";}
#general .energy dd p+p { margin-top:5px;}
#general .energy dd b {
	position: relative; top:0;
	margin-right: 10px;
	padding: 2px 10px;
	font-size:87.5%;
	font-weight: 400;
	border-radius: 5px;
	border: 1px solid #fff;
}
#general .energy dd span { 
	font-size:180%;
	font-family: Oswald, "sans-serif";
	text-align: right;
}
#general .energy dd small { font-size: 125%; margin-left:5px;}
#general .energy dd p b,
#general .energy dd p span,
#general .energy dd p small { float: left; }
#general .energy dd p b { line-height: 20px;}
/* #general .energy dd p span { display: block; width:130px; text-align: right;} */
#general .energy dd p span { display: block; width:140px; text-align: right;}

#general .energy dd p span span {display: block; text-align:right;width:auto;float:right;}
#general .energy dd p span span span {display: block; width: 18px; text-align: center;float:left; font-size:60%;}
#general .energy dd p span span span.dot {width: 10px;}

#general .energy dd p small { position: relative; top: 3px;}
#general .energy dl:nth-child(1) {float: none;}
#general .energy dl:nth-child(1) dt { display: none; position:absolute; bottom:50%; right:0; width: 90px;}
#general .energy dl:nth-child(1) dd span { font-size:100px; line-height:70px; letter-spacing:-5px;}
#general .energy dl:nth-child(1) dd small { font-size:46px; position: relative; margin-left:10px;}
#general .energy dl:nth-child(1) dd small span { 
	position: absolute; top:-35px; left: -10px;
	width: 75px;
	font-family: 'Noto Sans JP', "Yu Gothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	font-size:16px; font-weight: 600; letter-spacing:0;
}
#general .energy dl:nth-child(2) { clear: both; border-top: 1px solid #fff;}
@media only screen and (max-width:1450px){
	#general .energy_staus::before { width:40%; }
}
@media only screen and (max-width:1300px){
/*	#general .energy dl:nth-child(1) dd span { font-size:490%;} */
	#general .energy dl:nth-child(1) dd span { font-size:270%;}
	#general .energy_staus::before { top:0; }
}
@media only screen and (max-width:1050px){
	#general .energy_staus::before {top:0; }
	#general .energy_staus { float:none; padding:3% 0 0; width:100%; overflow: hidden;}
	#general .energy_staus+.energy_staus { margin:6% 0 0;}
}
@media only screen and (max-width:500px){
/*	#general .energy dl:nth-child(1) dd span { font-size:350%;} */
	#general .energy dl:nth-child(1) dd span { font-size:250%;}
	#general .energy dl:nth-child(1) dd small {}
	#general .energy_staus::before { top:2%; }
	#general .energy dl:nth-child(1) dd small {font-size: 30px;}
}


/* GRAPH */
#general .graph { margin-top:4%; padding: 2%; color:#fff; background: rgba(255,255,255,0.15);}
#general .graph h3 { position: relative; padding-left: 35px; font-size: 112.5%;}
#general .graph h3::before{
	display: block; clear: both; content:"";
	position: absolute; top: 0; left: 0; bottom: 0;
	margin: auto; width: 25px; height: 25px;
}
#general .cate_water .graph h3::before{background: url("../img/icon_water_w.svg") no-repeat center center;}
#general .cate_sun .graph h3::before{background: url("../img/icon_sun_w.svg") no-repeat center center;}
#general .graph canvas { width: 100%; height: 252px;}


/* RESULT */
#result {
	clear: both;
	padding:2% 5% 2% 100px;
	color: #648BC1;
	font-size: 187.5%;
	background: #fff url("../img/illust_light.svg") no-repeat left center;
	background-size: auto 85px;
	box-sizing: border-box;
}
#result span { 
	position: relative; top:5px;
	padding:0 5px;
	font-size:150%; font-family: Oswald, "sans-serif";
}
#result small { font-size:14px; font-family: Oswald, "sans-serif"; letter-spacing: 0px;}
@media only screen and (max-width:1370px){
	#result small { display: block;}
}
@media only screen and (max-width:1120px){
	#result {
		font-size: 150%;
	}
}