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

/* ======================================
Common
=======================================*/
html { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif" }

html, body { width: 100%; height: 100%; }
body { background-color: #323c5a; }

img.dummyGraph { display: block; width: 100%; height: auto; }

#weather-next,
#contents-next {
    display : none;
}


/* ======================================

Header

=======================================*/
header {
    width: 100%;
    height: 95px;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0 auto;
}

header div {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url(../img/header_bg.png);
    background-position: center;
    background-repeat: no-repeat;
}

header.no-logo div {
    background-image: url(../img/header_bg2.png);
}

header div img {
    position: absolute;
    top: 20px;
    left: 80px;
}


/* ======================================

Weather エリア

=======================================*/
#weather {
    width: 400px;
    height: calc(100% - 95px);
    background-color: #515973;

    float: left;
    border-right: 1px solid #515973;
}

#weather h4 {
    width: 100%; height: 117px;
    margin: 0;
    padding-top: 35px;
    text-align: center;
    font-size: 24px;
    color: #FFF;
    border-bottom: 1px solid #515973;
    background-position: center;
    background-repeat: no-repeat;
}
#weather.recent h4 {background-image: url(../img/weather_head_a.gif);}
#weather.weekly h4 {background-image: url(../img/weather_head_b.gif);}

/* 天気予報 */
#weather.recent article {
    width: 100%;
    height: calc((100% - 153px) / 2 );
    min-height: 320px;
}

#weather.recent article h3 {
    width: 400px; height: 50px;
    margin: 0;
    padding-top: 20px;
    text-align: center;
    font-size: 28px;
    color: #FFF;
    border-bottom: 1px solid #515973;
    background-image: url(../img/weather_date_bg.gif);
    background-position: center;
    background-repeat: no-repeat;
}
#weather.recent article h3:before { margin-right: 10px; }
#weather.recent article:nth-of-type(2) h3:before { margin-right: 10px; }

#weather.recent article .forecast {
    position: relative;
    height: calc( 100% - 158px );
    background-color: #262f4a;
    background-position: center left;
    background-repeat: no-repeat;
}

#weather.recent article .forecast p {
    position: absolute;
    top: 50%; left: 160px;
    margin: -80px 0 0;
    padding: 25px 0 0;
    width: 240px; height: 55px;
    font-size: 28px;
    text-align: center;
    font-weight: bold;
    color: #FFF;
}

#weather.recent article .forecast div {
    position: absolute;
    top: 50%; left: 160px;
    margin: 0 0 0;
    width: 240px; height: 80px;
}
#weather.recent article .forecast div span {
    width: 120px; height: 65px;
    padding: 15px 0 0;
    float: left;
    font-size: 40px;
    text-align: center;
    font-weight: bold;
    color: #F47B50;
}
#weather.recent article .forecast div span:last-child { color: #54BCE8; }
#weather.recent article .forecast div span:after {
    content: "℃";
    font-size: 18px;
    margin-left: 5px;
}

#weather.recent article ul {
    width: 340px; height: 85px;
    margin: 0;
    padding: 1px 0 0 60px;
    background-image: url(../img/weather_rainy-percent_bg.gif);
    background-position: center;
    background-repeat: no-repeat;
    list-style: none;
}

#weather.recent article ul li {
    width: 84px; height: 45px;
    margin-left: 1px;
    padding-top: 40px;
    float: left;
    text-align: center;
    font-size: 26px;
    font-weight: bold;
    color: #ADB1BD;
}

/* 週間 */
#weather.weekly article {
    width: 100%;
    height: calc((100% - 160px) / 7 );
    min-height: 78px;
    border-bottom: 1px solid #515973;
    background-color: #263049;
    position: relative;
}
#weather.weekly article:nth-of-type(2n) { background-color: #2e3750!important; }

#weather.weekly article h3 {
    position: absolute;
    top: 50%; left: 0;
    width: 100px; height: 50px;
    margin: -28px 0 0;
    text-align: center;
    font-size: 21px;
    line-height: 1.4em;
    color: #FFF;
}
#weather.weekly article h3 span:before {
    content: "\A";
    white-space: pre;
}

#weather.weekly article .forecast {
    position: relative;
    width: 108px; height: 100%;
    margin-left: 100px;
    background-position: center;
    background-size: 78px 78px;
    background-repeat: no-repeat;
}

#weather.weekly article .forecast div {
    position: absolute;
    top: 50%; left: 108px;
    margin: -15px 0 0;
    width: 192px; height: 36px;
}
#weather.weekly article .forecast div span {
    width: 96px; height: 36px;
    padding: 0;
    float: left;
    font-size: 28px;
    text-align: center;
    font-weight: bold;
    color: #F47B50;
}
#weather.weekly article .forecast div span:last-child { color: #54BCE8; }
#weather.weekly article .forecast div span:after {
    content: "℃";
    font-size: 15px;
    margin-left: 5px;
}



/* ======================================

Contents エリア

=======================================*/
#contents {
    position: relative;
    width: calc(100% - 401px - 170px);
    height: calc(100% - 95px);
    padding: 0 85px 0;
    background-color: #323c5a;
    background-image: url(../img/shadow.gif);
    background-position: top left;
    background-repeat: repeat-x;

    float: left;
}


/* 棒グラフ、積上げ棒グラフ */
#contents h1 {
    width: calc( 100% - 460px );
    margin: 35px 0 30px; padding: 0 0 10px;
    font-size: 32px;
    color: #FFF;
    border-bottom: 1px solid #FFF;
    white-space: nowrap;
}
#contents h2 {
    width: calc( 100% - 460px - 175px );
    min-height: 60px;
    padding: 0px 0px 0px 175px;
    font-size: 24px;
    line-height: 60px;
    font-weight: normal;
    color: #FFF;
    background-position: top left;
    background-repeat: no-repeat;
    background-color: #262f4a;
    white-space: nowrap;
}
#contents.day h2 { background-image: url(../img/parts_title_hour.gif); }
#contents.week h2 { background-image: url(../img/parts_title_week.gif); }
#contents.month h2 { background-image: url(../img/parts_title_month.gif); }
#contents.year h2 { background-image: url(../img/parts_title_year.gif); }


#indicator {
    position: absolute;
    top: -70px; right: 85px;
    width: 439px; height: 248px;
    background-position: center;
    background-repeat: no-repeat;
}
#contents.day #indicator { background-image: url(../img/parts_actual_hour_bg.png); }
#contents.week #indicator { background-image: url(../img/parts_actual_week_bg.png); }
#contents.month #indicator { background-image: url(../img/parts_actual_month_bg.png); }
#contents.year #indicator { background-image: url(../img/parts_actual_year_bg.png); }

#indicator .moment {
    position: relative;
    width: 248px; height: 248px;
    background-image: url(../img/parts_moment_bg.png);
    background-position: center;
    background-repeat: no-repeat;
    float: left;
}

#indicator .moment p {
    position: absolute;
    width: 100%;
    top:67px;
    margin: 0;
    font-size: 22px;
    color: #FFF;
    text-align: center;
}

#indicator .moment h3 {
    position: absolute;
    width: 100%;
    top:120px;
    margin: 0;
    font-size: 48px;
    font-weight: bold;
    color: #FFF;
    text-align: center;
}

#indicator .moment > p.unit {
    position: absolute;
    width: 100%;
    top:200px;
    margin: 0;
    font-size: 36px;
    color: #FFF;
    text-align: center;
}

#indicator .moment h3.minus { color:#FF0000; }

#indicator .moment h3 span {
    position: absolute;
    top: 24px;
    width: 23px;height: 23px;
    background-image: url(../img/parts_actual_man.png);
    background-position: center;
    background-repeat: no-repeat;
    font: 0/0 a;
    text-shadow: none;
    color: transparent;
}

#indicator .actual {
    position: relative;
    width: 191px; height: 248px;
    float: left;
}

#indicator .actual > p {
    position: absolute;
    right: 63px;
    width: 130px;
    margin: 0;
    font-size: 43px;
    color: #FFF;
    text-align: right;
    -moz-text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    -webkit-text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    -ms-text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}
#indicator .actual > p.current { top:63px; }
#indicator .actual > p.total { top:137px; }
#indicator .actual > p.currunit {
    top:90px;
    left: 133px;
    margin: 0;
    font-size:13pt;
    color: #FFF;
    width: 60px;
    text-align: left;
}
#indicator .actual > p.totalunit {
    position: absolute;
    top:143px;
    left: 133px;
    margin: 0;
    font-size:13pt;
    color: #FFF;
    width: 60px;
    text-align: left;
}

#indicator .actual > p span {
    position: absolute;
    right: -25px;
    width: 23px; height: 23px;
    background-image: url(../img/parts_actual_man.png);
    background-position: center;
    background-repeat: no-repeat;
    font: 0/0 a;
    text-shadow: none;
    color: transparent;
}

#indicator .actual > p.current span { top:5px; }
#indicator .actual > p.total span { top:24px; }
#indicator .actual > p.minus { color:#FF0000; }

/*　デマンドグラフ */
#contents.demand h1 {
    width: calc( 100% - 300px );
    margin: 35px 0 30px; padding: 0 0 10px;
    color: #FFF;
    border-bottom: 1px solid #FFF;
    white-space: nowrap;
}
#contents.demand h2 {
    width: calc( 100% - 300px - 80px );
    padding: 0px 0px 0px 80px;
    background-image: url(../img/parts_demand_icon_1.gif);
}
#contents.demand.caution h2 { background-image: url(../img/parts_demand_icon_2.gif); }
#contents.demand.warning h2 { background-image: url(../img/parts_demand_icon_3.gif); }
#contents.demand.over h2 { background-image: url(../img/parts_demand_icon_4.gif); }

#contents.demand #indicator {
    position: absolute;
    top: -70px; right: 85px;
    width: 248px; height: calc(100% + 70px);
    background-image: url(../img/parts_demand_legend.gif);
    background-position: center bottom 5%;
    background-repeat: no-repeat;
}

#contents.demand #indicator .moment {
    position: relative;
    width: 248px; height: 248px;
    background-image: url(../img/parts_demand_moment.png);
    background-position: center;
    background-repeat: no-repeat;
    float: left;
}
#contents.demand.caution #indicator .moment { background-image: url(../img/parts_demand_moment_alert1.png); }
#contents.demand.warning #indicator .moment { background-image: url(../img/parts_demand_moment_alert2.png); }
#contents.demand.over #indicator .moment { background-image: url(../img/parts_demand_moment_alert2.png); }


#contents.demand #indicator .moment h3 {
    position: absolute;
    width: 140px;
    top:60px;
    right: 70px;
    margin: 0;
    font-size: 70px;
    font-weight: bold;
    color: #FFF;
    text-align: center;
}

#contents.demand #indicator .moment p {
    position: absolute;
    width: 80px;
    top: 168px; left: 91px;
    margin: 0;
    font-size: 30px;
    color: #FFF;
    text-align: right;
    -moz-text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    -webkit-text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    -ms-text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

#contents.demand #indicator .moment h3 > span {
    position: absolute;
    top: 64px;
    right: -10px;
    width: 25px; height: 25px;
    background-image: url(../img/parts_actual_man.png);
    background-position: center;
    background-repeat: no-repeat;
    font: 0/0 a;
    text-shadow: none;
    color: transparent;
}

#contents.demand #indicator .moment p > span {
    position: absolute;
    top: -4px;
    right: -22px;
    width: 20px; height: 20px;
    background-image: url(../img/parts_actual_man.png);
    background-position: center;
    background-repeat: no-repeat;
    font: 0/0 a;
    text-shadow: none;
    color: transparent;
}

#contents.demand #indicator .alert {
    position: relative;
    width: 248px; height: 248px;
    margin-top: 15px;
    background-image: url(../img/parts_demand_setting-value.png);
    background-position: center;
    background-repeat: no-repeat;
    float: left;
}

#contents.demand #indicator .alert p {
    position: absolute;
    width: 80px;
    top: 60px; left: 64px;
    margin: 0;
    font-size: 48px;
    color: #FFF;
    text-align: right;
    -moz-text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    -webkit-text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    -ms-text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

#contents.demand #indicator .alert p > span {
    position: absolute;
    top: 10px;
    left: 120px;
    width: 25px; height: 25px;
    background-image: url(../img/parts_actual_man.png);
    background-position: center;
    background-repeat: no-repeat;
    font: 0/0 a;
    text-shadow: none;
    color: transparent;
}

#contents.demand #indicator .alert p:last-child { top: 136px; left: 64px; }
#contents.demand #indicator .alert p:last-child > span {
    position: absolute;
    top: 20px;
    left: 120px;
    width: 25px; height: 25px;
    background-image: url(../img/parts_actual_man.png);
    background-position: center;
    background-repeat: no-repeat;
    font: 0/0 a;
    text-shadow: none;
    color: transparent;
}




/* -------------------------

Highcharts エリア

------------------------- */
#graphArea {
    width: 100%;
    height: calc( 100% - 230px );
    margin-top: 50px;
}

#contents.demand #graphArea {
    width: calc( 100% - 300px );
    height: calc( 100% - 230px );
}


/* ======================================

任意画面

=======================================*/

#contents.imageBoard {
    width: calc(100% - 401px - 70px);
    height: calc(100% - 165px);
    padding: 35px;
}

#contents.imageBoard article {
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}

#contents.imageBoard article.cover { background-size: cover; }
#contents.imageBoard article.contain { background-size: contain; }

/* ======================================

ログイン画面

=======================================*/
#loginWp { width:562px; margin:0px auto; padding-top: 200px; }

#loginWp > img { margin:0; }
#loginWp > h3 {
    font-size: 48px;
    font-weight: bold;
    color: #FFF;
    text-align: center;
    margin:30px 0 50px 0;
}
#loginWp #loginPanel,
#loginWp #confirmPanel {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background:#848a9c;
    text-align:center;
}

#loginWp #loginPanel #inputBox,
#loginWp #confirmPanel #inputBox {
    background:#6f768b;

    -webkit-border-radius: 10px 10px 0 0 ;
    -moz-border-radius: 10px 10px 0 0 ;
    border-radius: 10px 10px 0 0 ;
    /*
    -webkit-border-top-left-radius:10px;
    -webkit-border-top-right-radius:10px;
    -moz-border-radius-topleft:10px;
    -moz-border-radius-topright:10px;
    */
    box-shadow: 0px 5px 5px #4D546D;

    padding:50px 0 35px;
}

#loginWp #loginPanel #inputBox #userNameBox,
#loginWp #loginPanel #inputBox #passwordBox {
    width:301px;
    height:44px;
    padding:0 0 0 45px;
    margin:0 auto 15px;
}

#loginWp #loginPanel #inputBox #userNameBox { background:url(../img/login_icon_man.gif) no-repeat left top; }
#loginWp #loginPanel #inputBox #passwordBox { background:url(../img/login_icon_key.gif) no-repeat left top; }

#loginWp #loginPanel #inputBox #userNameBox input[type="text"],
#loginWp #loginPanel #inputBox #passwordBox input[type="password"] {
    width:290px;
    height:34px;
    margin:0;
    padding:5px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    box-shadow: none;
    border:none;
}

#loginWp #loginPanel input[type="submit"] {
    width:300px;
    height:45px;
    margin:15px 0;
    background:url(../img/btn_bg_blue.gif);
    border:none;
    color:#FFF;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#loginWp #confirmPanel button,
#loginWp #confirmPanel input[type="button"] {
    width:150px;
    height:45px;
    margin:15px 0;
    background:url(../img/btn_bg_blue.gif);
    border:none;
    color:#FFF;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#loginWp > p {
    text-align:center;
    font-size:0.7em;
    color:#989dac;
    margin-top:50px;
}

#loginWp #inputBox > .errorBox {
    background: none repeat scroll 0 0 #444c67;
    border-radius: 10px;
    box-shadow: 0 1px 1px #444;
    padding:10px;
    text-align:center;
    color:#FFFFFF;
    margin:0px auto;
    width:70%;
    font-size:14px;
    line-height: 1;
}

#loginWp #inputBox > .alertBox {
    background: none repeat scroll 0 0 #444c67;
    border-radius: 10px;
    box-shadow: 0 1px 1px #444;
    padding:30px 10px;
    text-align:center;
    color:#FFFFFF;
    margin:0px auto;
    width:70%;
    font-size:16px;
}

#loginWp #inputBox > .errorBox p {
    margin: 0;
    padding: 0;
    border: 0;
    font-weight: normal;
    font-style: normal;
    font-size: 100%;
    line-height: 1;
    font-family: inherit;
}