@charset 'utf-8';

.dispF {
	display: flex;
}

.h-100 {
	height: 100%;
}

.smaller {
	font-size: smaller;
}

.u-taR {
	text-align: right;
}

.u-taL {
	text-align: left;
}

.u-taC {
	text-align: center;
}

.u-dispB {
	display: block !important;
}

.u-dispIB {
	display: inline-block !important;
}

.u-dispI {
	display: inline !important;
}

.u-dispN {
	display: none !important;
}

.loading {
	transition: all 1s;
	opacity: 0;
}

.loadComplete {
	opacity: 1;
}

#denkiyoho-data-wrapper {
	min-height: 100vh;
}

.space-between {
	justify-content: space-between;
}

.align-center {
	align-items: center;
}

.per,
.unit {
	font-size: 65%;
}

.usage-rate::after {
	font-size: 65%;
	content: '%';
}

.unit-kw::after {
	content: '万kW';
}

.text-blue {
	font-weight: bold;
	color: #005bad;
}

.btn_update {
	font-size: 16px;
	margin: 0 15px;
}

.modify {
	font-size: 18px;
	padding-left: 10px;
	display: inline-block;
}

.reference-title {
	line-height: 1.3;
	display: flex;
}

.reference-title::before {
	font-size: 14px;
	font-weight: bold;
	margin-right: 1em;
	padding: 1em;
	content: '参考';
	background-color: #efefef;
}

#yesterday a {
	margin-bottom: 15px;
	padding: 5px 35px 5px 20px;
	text-align: center;
	text-decoration: none;
}

#yesterday a.link_popup:after {
	margin-top: -6px;
	-webkit-transform: rotate(0);
	transform: rotate(0);
	border: 0;
}

.usage_rate-value {
	font-size: 30px;
	font-weight: bold;
	line-height: 1.2;
	margin-left: 0;
}

.info_box {
	box-sizing: border-box;
	margin-bottom: 15px;
	padding: 1.3em 3em 1.3em 2em;
	border: solid 2px #e4e3e3;
}

.info_box.style2 {
	padding-right: 1em;
	padding-bottom: .5em;
	padding-left: 1em;
}

.info_box .ttl_bdr_b {
	font-size: 16px;
	margin-bottom: 10px;
	padding: 5px;
	text-align: center;
	border-bottom-color: #ccc;
}

.block-bottom {
	padding-top: 1em;
	border-top: dashed 1px #ccc;
}

.wide-area-box {
	font-weight: bold;
	max-width: 180px;
	border: solid 3px #ddd;
}

[class*='pure-u-']:nth-of-type(odd)>.wide-area-box {
	margin-right: 10px;
}

[class*='pure-u-']:nth-of-type(even)>.wide-area-box {
	margin-left: 10px;
}

.wide-area-box .usage-rate {
	font-size: 40px;
	line-height: 1.3;
	padding-top: 4px;
}

.wide-area-box .timespan {
	font-size: 14px;
	background-color: #ddd;
}

.wide-area-box .status {
	margin-bottom: 5px;
}

.status-box {
	font-size: 12px;
	line-height: 1;
	display: inline-block;
	width: 6em;
	padding: .5em;
	text-align: center;
	color: #fff;
	background-color: #efefef;
}

.status-box.status0 {
	background-color: #0bb953;
}

.status-box.status1 {
	color: #333;
	background-color: #fe0;
}

.status-box.status2 {
	background-color: #f52b2b;
}

#current .info_box {
	padding-right: 10px;
	padding-left: 10px;
}

label {
	cursor: pointer;
}

#color-legend-wrapper {
	width: 0;
	height: 0;
}

.color-legend-wrapper {
	position: absolute;
	z-index: -1;
	box-sizing: border-box !important;
	width: auto;
	padding: unset;
	transition: all .25s;
	pointer-events: none;
	opacity: 0;
}

:checked+.color-legend-wrapper {
	z-index: 1000;
	pointer-events: all;
	opacity: 1;
}

.color-legend-frame {
	font-size: 96%;
	position: fixed;
	right: 0;
	bottom: 10px;
	width: auto;
	height: auto;
	padding: 10px 15px 25px;
	border-radius: 3px 0 0 3px;
	background-color: rgba(255, 255, 255, .8);
	box-shadow: 0 0 1px 1px rgba(65, 65, 65, .2), 0 0 10px rgba(165, 165, 165, .3);
}

.color-legend-wrapper .btn_close {
	font-family: Arial;
	font-size: 26px;
	font-weight: bold;
	line-height: 1;
	position: absolute;
	right: 6px;
	bottom: 0;
	display: inline-block;
	color: #999;
	border-radius: 100%;
}

.color-legend {
	display: flex;
	flex-direction: column-reverse;
	flex-wrap: wrap;
}

.color-legend>* {
	line-height: 1;
	border-bottom: solid 1px #fff;
}

.color-legend .status-box {
	box-sizing: border-box;
	padding: .25em;
}

.color-legend .status-box::after {
	font-size: 86%;
	content: '%';
}

.color-legend li:nth-last-of-type(1) .status-box {
	padding-right: .25em;
	padding-left: .25em;
}

#current .current-usage {
	margin: 20px 0;
	padding: 15px 0;
	border-top: dashed 1px #ccc;
	border-bottom: dashed 1px #ccc;
}

.link-list .link_box_block {
	margin-bottom: 20px;
}

.dayispast th {
	color: #666;
	background-color: #e3e3e3;
}

.dayispast td {
	color: #666;
	background-color: #e3e3e3;
}

@media screen and (min-width:768px) {
	[class*='pure-u-']:nth-of-type(odd)>.info_box {
		margin-right: 12px;
	}

	[class*='pure-u-']:nth-of-type(even)>.info_box {
		margin-left: 12px;
	}

	.u-md-taR {
		text-align: right;
	}

	.u-md-taL {
		text-align: left;
	}

	.u-md-taC {
		text-align: center;
	}

	.u-md-dispB {
		display: block !important;
	}

	.u-md-dispIB {
		display: inline-block !important;
	}

	.u-md-dispI {
		display: inline !important;
	}

	.u-md-dispN {
		display: none !important;
	}

	#current .pure-u-md-1-3 {
		box-sizing: border-box;
		padding: 0 20px;
	}

	.dashed-style {
		margin: 0;
		border-top: none;
		border-right: dashed 1px #ccc;
		border-bottom: none;
		border-left: dashed 1px #ccc;
	}

	#current .current-usage dd.usage_power {
		margin-bottom: 10px;
	}

	.link-list .link_box_block {
		width: 49%;
	}

	.color-legend-frame {
		bottom: 100px;
	}

	.compartment {
		padding: 0 .5em;
	}

	.info_box.style2 .dashed-style {
		padding-left: 1.5em;
		border-right: none;
	}

	.info_box.style2 .compartment:nth-of-type(2) dd {
		margin-bottom: .5em;
	}
}

@media screen and (max-height:22em) {
	.color-legend {
		flex-direction: row;
		flex-wrap: nowrap;
	}

	.color-legend-label br {
		display: none;
	}

	.color-legend .status-box {
		width: auto;
	}
}

#weekly_forecast_table {
	table-layout: fixed;
}

#weekly_forecast_table th.col-time {
	width: 12em;
}

@media screen and (max-width: 767px) {
	#yesterday_wrap .clm2 .info_box {
		float: none;
		width: 100%;
		padding: 15px 4%;
	}

	#yesterday_wrap .clm2 .info-link-box {
		float: none;
		width: 100%;
		margin-top: 15px;
		padding: 15px 4%;
	}
}

.information {
	margin-bottom: 30px;
	padding: 2em;
	border: solid 2px #aaa;
}

.frame-important {
	border-color: #e70014;
}

.information .ttl {
	font-size: 110%;
	font-weight: bold;
	margin-bottom: 1em;
	text-align: center;
	color: #545454;
}

/* capability-margin-message */
.title-box {
	margin-bottom: 25px;
}

.title-box .ttl_bdr_l {
	margin-bottom: 0;
}

#capability-margin-message {
	font-size: 16px;
	margin: 15px;
}

.v-hide{
	visibility:hidden;
}
.no-per::after{
	display:none;
}

@media screen and (min-width:768px) {
	.title-box {
		display: flex;
		align-items: center;
		margin-bottom: 35px;
	}

	#capability-margin-message {
		font-size: 18px;
		margin: 0 0 0 30px;
	}
}


.two_days_later{
	--border:solid 2px #2c8bd7;	
}

.two_days_later th{
	border-left:var(--border);
	border-top:var(--border);
	border-bottom:var(--border);
}

.two_days_later:nth-of-type(1) td{
	border-top:var(--border);
}

.two_days_later:nth-of-type(2) td{
	border-bottom:var(--border);
}

.two_days_later td:nth-last-of-type(1){
	border-right:var(--border);
}