@charset "utf-8";
html,body{background-color:#99cc33;-webkit-text-size-adjust:100%;}
article,section,p,span,div,ul,dl,li,dt,dd{margin:0; padding:0;}
header{background-color:#ff9900;}
a{color:#000000;}
#graph_menu a,#eco a,#life_link a,#menu a,.topics a,.news a,.link_out a{display:block;}
/*＝グラフエリア＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#graph{position:relative;}
#graph #graph_date+p img{width:100%;}
#graph #graph_date+p{width:100%; position:absolute; top:0; z-index:0; text-align:center;}
/*グラフエリア－上部BOX*/
#graph_head{width:100%; display:flex; top:1.5vw; position:relative; z-index:2;}
#weather{width:25%}
/*グラフエリア－上部BOX－左：天気*/
#weather{text-align:center;}
#weather img{width:90%;}
/*グラフエリア－上部BOX－中央BOX*/
#E-data{display:inline-flex; flex-wrap:wrap; align-items:flex-end;}
/*グラフエリア－上部BOX－中央BOX－上段*/
#E-data h2{width:100%; height:5vw; margin:0 auto; font-size:4vw;}
#E-data h2 img{margin-left:0.2em; width:auto; height:5vw; vertical-align:-20%;}
/*グラフエリア－上部BOX－中央BOX－下段*/
#E-bill{height:8vw; font-size:6vw; line-height:8vw; position:relative; top:2vw;}
#E-bill span{font-size:4vw;}
#yosan{font-size:4vw; line-height:4vw;}
#yosan span{margin-left:0.5em; font-size:2vw; line-height:2vw;}
#tori{margin-left:0.2em; line-height:8vw; position:relative; top:2.8vw;}
#tori img{margin:0; width:8vw; vertical-align:bottom;}
/*グラフエリア－上部BOX－右：グラフメニュー－アイコン*/
#graph_menu{width:52%; position:static;}
#graph_menu p{width:10vw; height:10vw; padding:1vw; line-height:4vw; font-size:2.5vw; color:#99cc33; font-weight:bold; text-align:center; position:relative; top:4vw;}
#graph_menu img{width:7vw; margin:0;}
/*グラフエリア－上部BOX－右：グラフメニュー－ナビ*/
#graph_menu p a{color:#99cc33;}
#graph_menu ul{width:45vw; list-style:none; position:absolute; top:15.5vw; left:33vw; font-size:0.9em; z-index:3;}
#graph_menu li{height:2em; line-height:2em; border-bottom:2px dotted #ffffff; text-align:center; background-color:#e9e9e9;}
/*グラフデータ*/
#graph_date{width:70%; height:45vw; margin:auto; top:9vw; position:relative; z-index:1;}
#graph_date #DateMove{font-size:0.8em; text-align:center;}
#graph_date #DateMove img{height:1.5em; margin:0 0.5em; vertical-align:middle;}
#graph_date #DateMove span{width:5em; height:1.5em; line-height:1.5em; background-color:#999966; border-radius:1em; display:inline-block;}
#graph_date #DateMove a span{background-color:#99cc33; color:#ffffff;}

/*＝メイン＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#main{position:relative; top:13vw;}
/*メイングループ化用DIV－「料金予測/省エネランキング」と「ニュース/お知らせ」*/
#main div{width:95%; margin:auto; display:flex; flex-wrap:wrap; text-align:center;}
/*メイン－料金予測と省エネランキング－BOX内枠*/
#main div section{margin:2% 1%; padding:1% 2%; color:#ffffff; border:0.3em solid #ffffff; border-radius:1em; flex-grow:1;}
#main div section a{color:#ffffff;}
/*メイン－料金予測と省エネランキング－BOX内－小見出し*/
#main div section h2{margin:0.5% 0; font-size:1em;}
#main div section h2 img{margin:0 0.5%; height:1.5em; vertical-align:-30%;}
/*メイン－料金予測と省エネランキング－BOX内－数値部分*/
.mainS{margin:0.2% auto; padding:0; min-height:1em; line-height:1em; text-align:center; font-size:1.5em;}
.mainS .subS{font-size:0.6em;}
/*メイン－ニュ－ステロップ*/
#telop{width:100%; height:2em; background-color:rgba(255, 255, 255,0.3); line-height:2em; color:#000000;}
/*メイン－省エネガイダンス*/
#eco{position:relative;}
/*メイン－省エネガイダンス－ワンポイント見出し部分*/
#eco h2{width:12em; height:2.5em; margin:2% 3%; color:#ff9900; font-size:1.2em; text-align:center; line-height:1em;}
#eco h2 span{width:100%; position:relative; top:-1.8em; z-index:1;}
#eco h2 img{width:100%; height:2.5em; position:relative; z-index:0;}
/*メイン－省エネガイダンス－ワンポイント文章部分*/
#eco .main{width:82%; margin:auto; padding:1.5em 5% 1%; color:#ffffff; border:0.3em solid #ffffff; border-radius:1em; position:relative; top:-2em;}
/*メイン－省エネガイダンス－省エネガイダンスへのリンク*/
#eco P.sub{width:90%; height:4em; margin:0 auto; position:relative; top:-1em; text-align:center;}
#eco .sub a{width:100%; position:relative; top:-3.2em; z-index:1; font-size:1.2em;}
#eco .sub a span{position:relative; left:10%; font-size:0.9em;}
#eco .sub img{width:100%; height:4em; position:relative; z-index:0;}
/*メイン－ニュース・お知らせ切替え部分*/
div.news,div.topics{margin:0 auto; padding:0; text-align:center; border:0.3em solid #e9e9e9; border-radius:1em 1em 0 0; background-color:#e9e9e9; display:flex;}
div.news a,div.topics a{color:#ffffff;}
/*メイン－ニュース・お知らせ切替え部分－ニュース*/
.news h2{margin:0 1% 0 0; padding:2% 0; border-radius:1em 0 0 0; background-color:#ffffff; font-size:1em; flex-grow:1;}
.news p{margin:0; padding:2% 0; border-radius:0 1em 0 0; background-color:#999966; color:#ffffff; font-size:1em; flex-grow:1;}
/*メイン－ニュース・お知らせ切替え部分－お知らせ*/
.topics h2{margin:0; padding:2% 0; border-radius:0 1em 0 0; background-color:#ffffff; font-size:1em; flex-grow:1;}
.topics p{margin:0 1% 0 0; padding:2% 0; border-radius:1em 0 0 0; background-color:#999966; color:#ffffff; font-size:1em; flex-grow:1;}
/*メイン－リスト部分（ニュースとお知らせまとめて指定してます）*/
ul.news,ul.topics{width:95%; margin:0 auto; text-align:left; border-width:0 0.3em 0.3em; border-style:solid; border-color:#e9e9e9; border-radius:0 0 1em 1em; background-color:#e9e9e9;
position:relative; top:-0.3em; list-style-type:none;}
.news li,.topics li{ margin:0.2em auto; padding:1% 2%; background-color:#ffffff;}
.news li:nth-last-child(2),.topics li:nth-last-child(2){ margin:0 auto; padding-bottom:0; min-height:1em+0.5%; line-height:1em+0.5%;}
li.more{margin:0 auto; padding-top:0; height:1em; line-height:1em; border-radius: 0 0 1em 1em; text-align:right;}
li.more img{height:1em; vertical-align:bottom;} 
/*メイン－くらしの便利帳*/
#life_link{position:relative;}
#life_link h2{width:12em; height:2.5em; margin:2% 3%; color:#ff9900; font-size:1.2em; text-align:center; line-height:1em;}
#life_link h2 span{width:100%; position:relative; top:-1.8em; z-index:1;}
#life_link h2 img{width:100%; height:2.5em; position:relative; z-index:0;}
/*メイン－くらしの便利帳－リンクメニュー部分*/
#life_link ul a{color:#ffffff;}
#life_link ul{width:95%; margin:auto; list-style:none; display:flex; flex-wrap:wrap; justify-content:center;}
#life_link li{width:25%; height:6em; line-height:2em; margin:1%; position:relative; padding-bottom:0; border:0.3em solid #ffffff; font-size:0.9em; color:#ffffff; border-radius:1em; flex-grow:1; text-align:center; flex-grow:1;}
#life_link li img{width:3em;}
/*メイン－くらしの便利帳－リンク部分*/
#life_link li ul a{color:#000000;}
#life_link li ul{width:68vw; list-style:none; position:relative; top:-30%;z-index:3; font-size:1em;}
#life_link li ul li{width:90%; height:2.5em; margin:0; padding:1% 5%; line-height:2.5em; border-width:0 0 2px 0; border-style:dotted; text-align:left; border-radius:0; background-color:#e9e9e9;}
#life_link li ul li:nth-last-child(1){border-width:0;}
#life_link li:nth-child(3n+1) ul{left:-10%;}
#life_link li:nth-child(2) ul,#life_link li:nth-child(5) ul,#life_link li:nth-child(8) ul{left:-40%;}
#life_link li:nth-child(3) ul,#life_link li:nth-child(6) ul,#life_link li:nth-child(9) ul{left:-130%;}
/*メニュー*/
#menu ul{width:98%; height:3em; margin:2% auto; list-style:none; display:flex; flex-wrap:wrap; justify-content:center; font-size:0.9em;}
#menu li{height:3em; line-height:3em; margin:1%; background-color:#ffffff; border-radius:0.5em; flex-grow:1; text-align:center; font-size:0.9em;}
#menu li img{height:1.5em; vertical-align:middle;}
/*＝タッチイベント用＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*表示/非表示切替用クラス“.touch_none”の指定*/
#E-data.touch_none{display:none;}/*電気料金と電力量の切替*/
#graph_menu ul.touch_none{display:none;}/*グラフメニュー表示*/
#graph_date p.touch_none{display:none;}/*グラフ日付遷移バー表示*/
#main div.touch_none{display:none;}/*ニュースとお知らせの切替*/
#life_link li ul.touch_none{display:none;}/*くらしの便利帳リンクリストの表示*/
/*リンクロールオーバー用クラス“.touch_on”の指定*/
#graph_menu p.touch_on a{color:#ffcc33;}
#graph_menu li.touch_on{background-color:#c9c9c9;}
#graph_date #DateMove a span.touch_on{background-color:#ff9900;}
#main div .touch_on{background-color:#c9c9c9;}
#life_link .touch_on{background-color:#c9c9c9;}
#main .touch_on{background-color:#c9c9c9;}