@charset "UTF-8";
/*ブルースカイランドリー20230726*/
/*graph部分に適用するスタイル*/

/*このCSSファイルにおける、メディアクエリの分け方
※各画面サイズ共通クラス

※PC*******1081~　tablet横、PC　
※タブレット******415~1080　タブレット縦　スマホ横　及びiPad miniなど 
※スマホ縦　iphone6,7,8及び　pluse*********~414
*/

/*PC*/
@media screen and (min-width : 1025px ) {
}
/*タブレット*/
@media screen and ( min-width : 415px ) and (max-width : 1024px ){
}
/*スマホサイズ*/
@media screen and (max-width : 414px ){
}

.grfwend p, .grfweek p, .grfdow p {
	margin-top:2em;
	font-size:2em;
}

.grfwend,.grfweek,.grfdow {
	//border:solid 1px red;
	position:relative;
	height:290px;
}
.graph_sheet {
	position:absolute;
	z-index:40;
	top:2rem;
	width:100%;
	height:10rem;
	//background-color:rgba(50,150,150,0.3);
	border:solid 1px skyblue;
	}
.cong_hi, .cong_mid, .cong_low {
	position:absolute;
	z-index:30;
	width:100%;
	color:skyblue;
	font-size:1.2rem;
	padding-left:1rem;
	text-align:left;
}
.cong_hi {
	top:2rem;
	height:2rem;
	padding-top:0.3rem;
	background-color:rgba(50,70,155,0.1);
	}
.cong_mid {
	top:4rem;
	height:4rem;
	padding-top:1.2rem;
	//background-color:rgba(255,255,255,0.04);
}
.cong_low {
	top:8rem;
	height:4rem;
	padding-top:1.2rem;
	background-color:rgba(255,255,255,0.04);
	color:white;
	}

.grfwend .container,.grfweek .container {
	position:absolute;
	z-index:50;	
	display:grid;
	grid-template-rows: 10rem 50px;
	grid-template-columns: repeat(auto-fit,5%);
	grid-auto-flow: column;
	justify-content:center;
	grid-column-gap: 6px;
    align-items: end;
	width:100%;
	//margin:0;
	background-color:rgba(255,255,255,0.01);
	//border:solid 1px lightgray;
}

.grfwend .container dt,.grfweek .container dt { /*グラフのbar設定*/
	position:relative;
	justify-self: center;
	width:80%;
	//border:solid 1px #57b;
}
.grfwend .container dt { /*グラフのbarの色（土日）*/
	background-color:#ffbc20;/*黄色*/
}
.grfweek .container dt { /*グラフのbarの色（月〜金）*/
	//background-color:#aa78dd;
	background-color:#44cc99;/*ミントグリーン*/
}
	

.grfwend .container dd,.grfweek .container dd {
	display:inline-block;
	justify-self:center;
	//width:100%;
	height:40px;
	//writing-mode:vertical-rl;
	line-height:top;
	vertical-align:50px;
	/*background-color:lightblue;*/
	//border:solid 1px white;
}
/*PC*/
@media screen and (min-width : 1025px ) {
	.grfwend .container dd,.grfweek .container dd {
		font-size:1.8em;
	}
}
/*タブレット*/
@media screen and ( min-width : 415px ) and (max-width : 1024px ){
	.grfwend .container dd,.grfweek .container dd {
		font-size:1.7em;
	}
}
/*スマホサイズ*/
@media screen and (max-width : 414px ){
	.grfwend .container dd,.grfweek .container dd {
	font-size:1.5em;
}
}

.grfdow .container {
	display:grid;
	grid-template-rows: 10rem 50px;
	grid-template-columns: repeat(auto-fit,8%);
	grid-auto-flow: column;
	justify-content:center;
	width:100%;
    align-items: end;
	background-color:#18c;
	//border:solid 1px lightgray;
}
.grfdow .container dt{ /*グラフのbar設定*/
	justify-self: center;
	width:80%;
	background-color:#44cc99;
	//border:solid 1px white;
	
}

.grfdow .container dd{
	display:inline-block;
	justify-self:center;
	//width:50%;
	height:40px;
	font-size:2.0em;
	//writing-mode:vertical-rl;
	//line-height:top;
	//vertical-align:50px;
	/*background-color:lightblue;*/
	//border:solid 1px white;
}