@charset "utf-8";
/* ------------------------------------------------------------
   
	filename : emergencies.css
	
	update : 2019/02

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


/*-----------------------*/
/* Emergencies TOP
/*-----------------------*/

.category_top .add {
    width:100%;
    margin:0 auto;
}
.category_top .add img {
    width:100%;
    height:auto;
}

/*-----------------------*/
/* /Emergencies TOP
/*-----------------------*/



/*-----------------------*/
/* Smell Gas?
/*-----------------------*/
.smell_title {
    background-image:url("/network/en/image/smell_h1_bg.png");
}

.smell_flow {
    background:#ffffe1;
    padding:15px;
}
.smell_flow h4 {
    float:left;
    width:440px;
}
.smell_flow h4 span {
    font-size:2.0rem;
    color:#d40000;
}
.smell_flow .image {
    float:right;
    width:200px;
    text-align:center;
}

.attention_box {
    padding:15px 30px;
    border:1px solid #d40000;
}

#contents .attention_box h2 {
    line-height:1.4;
    font-size:2.5rem;
}
.call {}
.call .lamp {
    float:left;
    width:100px;
    margin-right:30px;
    padding-top:15px;
    text-align:center;
}
.call .cantact {
    float:left;
    width:460px;
}
.call .cantact a.navidial {
    font-size:2.8rem;
    color:#d40000;
}
.call .cantact a.normaldial {
    font-size:2.0rem;
    color:#d40000;
}
.call br.sp {display:none;}

.attention_box .box {
    padding:10px;
    border:1px solid #7f7f7f;
}
.attention_box .box a {
    font-size:1.8rem;
    color:#000;
}

.donotuse {}
.donotuse ul {
    float:left;
    width:350px;
}
.donotuse img{
    float:right;
    width:320px;
}

/*-----------------------*/
/* /Smell Gas?
/*-----------------------*/


/*-----------------------*/
/* Power Outage
/*-----------------------*/
.poweroutage_title {
    background-image:url("/network/en/image/poweroutage_h1_bg.png");
}

.breakerbox {
    border:1px solid #d40000;
}
#contents .breakerbox h4 {
    background:#d40000;
    font-family:arial,sans-serif;
    text-align:center;
    font-size:1.3rem;
    font-weight:normal;
    color:#fff;
}
#contents .breakerbox img {
    float:left;
    margin-left:120px;
    margin-right:20px;
    padding:15px 0;
}
#contents .breakerbox ol {
    float:left;
    width:340px;
    padding:15px 0;
}

ul.poweroutage_tab {
    border-right:1px solid #b2b2b2;
    border-bottom:1px solid #b2b2b2;
}
ul.poweroutage_tab li {
    float:left;
    width:25%;
    padding:10px 0;
    border-top:1px solid #b2b2b2;
    border-left:1px solid #b2b2b2;
    text-align:center;
    line-height:1.2;
    box-sizing:border-box;
}
ul.poweroutage_tab li span {
    display:block;
    min-height:3.5rem;
}


/*-----------------------*/
/* /Power Outage END
/*-----------------------*/



/*-----------------------*/
/* Earthquake
/*-----------------------*/
.earthquake_title {
    background-image:url("/network/en/image/earthquake_h1_bg.png");
}

.earthquake .text {
    float:left;
    width:370px;
}
.earthquake .image {
    float:right;
    width:290px;
    text-align:center;
}

.earthquake a:hover img {
    opacity: 0.7;
}

.earthquake a.winopen::after{
    content:url("/network/en/image/winopen_blue.png");
    padding-left:5px;
}


/*-----------------------*/
/* /Earthquake END
/*-----------------------*/



/*-----------------------*/
/* No Gas
/*-----------------------*/
.nogas_title {
    background-image:url("/network/en/image/nogas_h1_bg.png");
}

.nogas .text {
    float:left;
    width:320px;
}
.nogas .image {
    float:right;
    width:340px;
    text-align:center;
}
#contents .nogas .text h4 span {
    font-size:1.8rem;
    color:#d40000;
}


/*-----------------------*/
/* /No Gas END
/*-----------------------*/



/*-----------------------*/
/* Gas Alarm
/*-----------------------*/
.alarm_title {
    background-image:url("/network/en/image/alarm_h1_bg.png");
}


/*-----------------------*/
/* /Gas Alarm
/*-----------------------*/



/*-----------------------*/
/* Resetting Your Meter
/*-----------------------*/
.meter_title {
    background-image:url("/network/en/image/meter_h1_bg.png");
}

.movie_reset {
    text-align:center;
}

.attention {
    background:url("/network/en/image/icon_attention.png") no-repeat 0 center;
    padding-left:100px;
}

.meter .imege1 {
    width:220px;
    margin-left:auto;
    margin-right:auto;
}
.meter ul.images_list {
    
}
.meter ul.images_list li {
    float:left;
    width:220px;
    margin-right:10px;
}
.meter ul.images_list li:nth-child(3n) {
    margin-right:0;
}

/* modals */
#lean_overlay {
    display:none;
    position:fixed;
    z-index:100;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background:#000;
    z-index:1000;
}
.modal_close {
    display:block;
    position:absolute;
    top:10px;
    right:10px;
    width:30px;
    height:30px;
    background:url("/network/en/image/icon_close.png") no-repeat center center;
    z-index:2;
}
.modal_close:hover {
    cursor:pointer;
}
.meters {
    overflow-y:scroll;
    position:relative;
    width:800px;
    height:100%;
    background:#ffffff;
    padding:15px;
    border:1px solid #b2b2b2;
}
.meters .text {
    float:left;
    width:420px;
}
.meters .image {
    float:right;
    width:350px;
    text-align:center;
}
.meterWrapper {
    display:none;
}
/* Color Box */
#cboxLoadedContent {
    border:none !important;
}

.meters h2 {
    font-family:'arial black','Arial-BoldMT','Helvetica',sans-serif;
    font-size:2.0rem;
    font-weight:bold;
    color:#d40000;
    margin-bottom:1em;
}
.meters h3 {
    font-family:'arial black','Arial-BoldMT','Helvetica',sans-serif;
    font-size:1.6rem;
    font-weight:bold;
    color:#d40000;
}
.meters h4 {
    font-family:'arial black','Arial-BoldMT','Helvetica',sans-serif;
    font-size:1.7rem;
    font-weight:bold;
    margin-bottom:1em;
}
.meters .mb{margin-bottom: 5em;}
.meters .note {font-size:1.3rem; margin-bottom: 3em;}

/*-----------------------*/
/* /Resetting Your Meter END
/*-----------------------*/



/*-----------------------*/
/* Supply
/*-----------------------*/
#emergencies #contents .supply_title h1 {
    font-size:3.0rem;
}

.restoration_map {}
.restoration_map .left {
    float:left;
    width:492px;
}

.restoration_map .right {
    float:right;
    width:172px;
}

.pdf_list {}
.pdf_list li {
    float:left;
    width:50%;
    margin-bottom:30px;
}
.pdf_list li:nth-child(odd) {
    clear:both;
}
.pdf_list li span {
    display:inline-block;
    background:url("../common/image/icon_pdf.gif") no-repeat right center;
    padding-right:16px;
}
.pdf_list li a:hover img {
    opacity:0.7;
}

ul.step {
}
ul.step li span {
    display:inline-block;
    background:url("../common/image/icon_pdf.gif") no-repeat right center;
    padding-right:16px;
}
ul.step li a:hover img {
    opacity:0.7;
}

/*-----------------------*/
/* /Supply
/*-----------------------*/



/*==================================================
Responsive for SP 2017/01
==================================================*/
@media only screen and (max-width: 767px) {


/*-----------------------*/
/* Emergencies TOP
/*-----------------------*/

.category_top .add {
    width:98%;
    margin:0 auto;
}
.category_top .add img {
    display:none;
}
.category_top .add a {
    display:block;
    width:100%;
    height:0;
    background:url("/network/en/image/index_btn_supply_sp.png") no-repeat center top;
    background-size:contain;
    padding-top:48.58%;
}
.category_top .add a:hover {
    opacity:0.7;
}


/*-----------------------*/
/* /Emergencies TOP
/*-----------------------*/


/*-----------------------*/
/* Smell Gas?
/*-----------------------*/
.smell_title {
    background-size:auto 100%;
    padding-right:80px;
}
.smell_title .catch {
    padding-right:100px;
}

.smell_flow h4 {
    float:none;
    width:100%;
}
.smell_flow .image {
    float:none;
    width:100%;
    text-align:center;
}

.attention_box {
    padding:15px 15px;
}
.call {}
.call .lamp {
    float:none;
    width:100%;
    margin-right:0;
    padding-top:0;
}
.call .cantact {
    float:none;
    width:100%;
}
.call .cantact a.navidial {
}
.call .cantact a.normaldial {
}
.call br.sp {display:inline-block;}

.attention_box .box a {
}

.donotuse {}
.donotuse ul {
    float:none;
    width:100%;
}
.donotuse img {
    float:none;
    width:100%;
}

/*-----------------------*/
/* /Smell Gas?
/*-----------------------*/



/*-----------------------*/
/* Power Outage
/*-----------------------*/
.poweroutage_title {
    background-size:auto 100%;
    padding-right:100px;
}
#contents .breakerbox img {
    display:block;
    float:none;
    width:50%;
    margin-left:auto;
    margin-right:auto;
}
#contents .breakerbox ol {
    float:none;
    width:90%;
    margin-left:auto;
    margin-right:auto;
    padding:0 0 15px;
}

ul.poweroutage_tab li {
    width:50%;
}


/*-----------------------*/
/* /Power Outage END
/*-----------------------*/



/*-----------------------*/
/* Earthquake
/*-----------------------*/
.earthquake_title {
    background-size:auto 100%;
    padding-right:100px;
}

.earthquake .text {
    float:none;
    width:100%;
}
.earthquake .image {
    float:none;
    width:100%;
}

/*-----------------------*/
/* /Earthquake END
/*-----------------------*/



/*-----------------------*/
/* No Gas
/*-----------------------*/
.nogas_title {
    background-size:auto 100%;
    padding-right:100px;
}
.nogas_title .catch {
    padding-right:100px;
}

.nogas .text {
    float:none;
    width:100%;
}
.nogas .image {
    float:none;
    width:100%;
}

/*-----------------------*/
/* /No Gas END
/*-----------------------*/



/*-----------------------*/
/* Gas Alarm
/*-----------------------*/
.alarm_title {
    background-size:auto 100%;
    padding-right:100px;
}


/*-----------------------*/
/* /Gas Alarm
/*-----------------------*/



/*-----------------------*/
/* Resetting Your Meter
/*-----------------------*/
.meter_title {
    background-size:auto 40px;
    padding-right:100px;
}
.meter_title .catch {
    padding-right:145px;
}

.movie_reset {
    position:relative;
    width:100%;
    height:0;
    padding-top:75%;
}
.movie_reset img{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

.meter ul.images_list li {
    float:none;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:15px;
}
.meter ul.images_list li:nth-child(3n) {
    margin-right:auto;
}

/* modals */
.meters {
    width:100%;
    height:100%;
    padding:10px;
    box-sizing:border-box;
}
.modal_close {
    top:0;
}
#contents .meters h2 {
    padding-top:20px;
}
.meters .text {
    float:none;
    width:100%;
    margin-bottom:10px;
}
.meters .image {
    float:none;
    width:100%;
}
.meters h2 {
    margin-top:1em;
}

/*-----------------------*/
/* /Resetting Your Meter END
/*-----------------------*/



/*-----------------------*/
/* Supply
/*-----------------------*/
#emergencies #contents .supply_title h1 {
    font-size:3.0rem;
}

#contents .step {
    max-width:89px;
}

.restoration_map {}
.restoration_map .left {
    float:none;
    width:100%;
    margin-bottom:1em;
}

.restoration_map .right {
    float:none;
    width:100%;
    max-width:172px;
    margin-left:auto;
    margin-right:auto;
}


.pdf_list li {
    float:none;
    width:100%;
    margin-bottom:3em;
}
#contents .pdf_list li img {
    max-width:120px;
}


/*-----------------------*/
/* /Supply
/*-----------------------*/


/* image responsive */
img.noresize {
    width:auto;
}


}
/* - 767px end */

/* EOF */