@charset "utf-8";
/* ------------------------------------------------------------
   
	filename : emergencies.css
	
	update : 2018/01

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


/*-----------------------*/
/* Emergencies TOP
/*-----------------------*/
#contents.emergencies_top {
    background-image:none;
}

.emergencies_top ul {
    padding-top:20px;
}
.emergencies_top ul li {
    float:left;
    margin-right:13px;
    margin-bottom:13px;
}
.emergencies_top ul li:nth-child(3n) {
    margin-right:0;
}
.emergencies_top ul li a:hover img {
    opacity:0.8;
}

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



/*-----------------------*/
/* Smell Gas?
/*-----------------------*/
.smell_title {
    background-image:url("/en/emergencies/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("/en/emergencies/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("/en/emergencies/image/earthquake_h1_bg.png");
}

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


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



/*-----------------------*/
/* No Gas
/*-----------------------*/
.nogas_title {
    background-image:url("/en/emergencies/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("/en/emergencies/image/alarm_h1_bg.png");
}


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



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

.movie_reset {
    text-align:center;
}

.attention {
    background:url("/en/emergencies/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("/en/emergencies/image/icon_close.png") no-repeat center center;
    z-index:2;
}
.modal_close:hover {
    cursor:pointer;
}
.meters {
    display:none;
    overflow-y:scroll;
    position:relative;
    width:800px;
    height:80%;
    background:#ffffff;
    padding:15px;
    border:1px solid #b2b2b2;
}
.meters .text {
    float:left;
    width:420px;
}
.meters .image {
    float:right;
    width:350px;
    text-align:center;
}



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



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


/*-----------------------*/
/* Emergencies TOP
/*-----------------------*/
#contents.emergencies_top {
    background-image:none;
}

.emergencies_top ul {
    padding-top:20px;
}
.emergencies_top ul li {
    width:48%;
    margin-left:1%;
    margin-right:1%;
    margin-bottom:2%;
}
.emergencies_top ul li:nth-child(3n) {
    margin-right:1%;
}
.emergencies_top ul li:nth-child(even) {
}
.emergencies_top ul li img {
    max-width:100%;
    height:auto;
}

/*-----------------------*/
/* /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:90%;
    height:80%;
    padding:10px;
}
.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%;
}

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





}
/* - 767px end */

/* EOF */