@charset "utf-8";
/* ==================================================== */
/* layout.css */
/* ==================================================== */
/* ----------------------------------------------------- */
/* residentialcustomers */
/* ----------------------------------------------------- */
#contact #enContainer #contents {
  font-size: 110%;
  padding-bottom: 30px;
}
#contact #contents ul, #contact #contents ol, #contact #contents li, #contact #contents dl, #contact #contents dl dt, #contact #contents dl dd, #contact #contents p {
  margin: 0;
  line-height: 1.5;
}
#contact #contents p {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 20px;
  margin-left: 0;
}
#contact #contents p.accent, #contact #contents span.accent {
  font-size: 110%;
  color: #cc0000;
  font-weight: bold;
}
#contact #contents span.tBold {
  font-weight: bold;
}
#contact #contents .mb0 {
  margin-bottom: 0px !important;
}
#contact #contents .mb5 {
  margin-bottom: 5px !important;
}
#contact #contents .mb10 {
  margin-bottom: 10px !important;
}
#contact #contents .mb20 {
  margin-bottom: 20px !important;
}
#contact #contents .mb40 {
  margin-bottom: 40px !important;
}
#contact #contents .mb50 {
  margin-bottom: 50px !important;
}
#contact #contents .mb60 {
  margin-bottom: 60px !important;
}
#contact #contents .mt0 {
  margin-top: 0px !important;
}
#contact #contents .mt10 {
  margin-top: 10px !important;
}
#contact #contents .mt20 {
  margin-top: 20px !important;
}
#contact #contents .mt30 {
  margin-top: 30px !important;
}
#contact #contents .mt40 {
  margin-top: 40px !important;
}
#contact #contents p.attention {
  font-size: 85%;
}
#contact #contents a.txtLink {
  font-weight: bold;
  text-decoration: underline;
}
#contact #contents a.txtLink:hover {
  text-decoration: none;
}
#contact #contents a.middleLink {
  background-image: url(/en/residential-customers/img/common/icon_arrow_link01.png);
  background-position: 0 center;
  background-repeat: no-repeat;
  padding-left: 1.5em;
  font-size: 105%;
  font-weight: bold;
}
#contact #contents p.txtRight {
  text-align: right;
  margin-bottom: 5px;
  margin-right: 5px;
}
#contact #contents p.toTop01 {
  margin: 80px 0 0 0;
}
@media screen and (min-width: 769px) {
  #contact div.pagetop {
    width: 143px;
    margin: 80px auto 0;
    font-size: 12px;
    clear: both;
  }
  #contact div.pagetop a {
    color: #333;
    text-decoration: none;
  }
}
.switchBtn {
  width: 90%;
  margin: 20px auto;
  text-align: right;
}
.switchBtn span {
  margin-left: 20px;
}
.switchBtn a {
  text-decoration: none;
  color: #393939;
}
#contact #contents .listIndent10 li, #contact #contents .listIndent10 dd {
  text-indent: -0.7em;
  padding-left: 1em;
}
/* ----------------------------------------------------- */
/* topVisual */
/* ----------------------------------------------------- */
#contact #topVisual.ctTop {
  background-color: #eee;
}
#contact #topVisual.ctTop::after {
  content: '';
  display: block;
  clear: both;
}
#contact #topVisual.ctTop .ttlTxt {
  float: left;
  position: static !important;
  width: 45% !important;
  padding: 10px 15px;
  box-sizing: border-box;
}
#contact #topVisual.ctTop .ttlTxt h1 {
  color: #1070ba;
}
#contact #topVisual.ctTop img {
  float: right;
  width: 55%;
}
#contact #topVisual.ctTop .ttlTxt h1 {
  font-size: 120%;
}
#contact #topVisual.ctTop .ttlTxt p {
  margin-top: 5px;
  font-size: 90%;
}
@media screen and (min-width: 769px) {
  #contact #topVisual {
    margin-bottom: 30px;
  }
  #contact #topVisual.ctTop {
    position: relative;
    max-width: 950px;
    margin: auto;
  }
  #contact #topVisual.ctTop .ttlTxt {
    float: none;
    position: absolute !important;
    top: 40px;
    left: 30px;
    width: 200px !important;
  }
  #contact #topVisual.ctTop .ttlTxt h1 {
    font-size: 200%;
    font-weight: normal;
    line-height: 1.2;
  }
  #contact #topVisual.ctTop .ttlTxt p {
    margin-top: 15px;
    font-size: 110%;
    line-height: 1.5;
  }
  #contact #topVisual.ctTop img {
    width: 100%;
  }
}
/* ----------------------------------------------------- */
/* rc side */
/* ----------------------------------------------------- */
#contact #side {
  margin: 0 0 10px;
}
#contact #side dl {
  border: #d9d9d9 solid 1px;
  background-color: #FFFFFF;
}
#contact #side dl dt {
  padding: 14px 0;
  width: 100%;
  background-color: #1070ba;
  border-bottom: #d9d9d9 solid 1px;
}
#contact #side dl dt p {
  color: #FFFFFF;
  font-weight: bold;
  border-left: #fff solid 3px;
  padding-left: 8px;
  margin-left: 14px;
  font-size: 120%;
  line-height: 1.6;
}
#contact #side dl dd {
  padding: 0 0;
  width: 100%;
  background-color: #ffffff;
}
#contact #side dl dd a {
  display: block;
  padding: 0 14px;
  text-decoration: none;
}
#contact #side dl dd a:hover {
  background-color: #e6f1f9;
}
#contact #side dl dd a span {
  display: block;
  border-bottom: #d9d9d9 dotted 1px;
  padding: 1em 0 1em 14px;
  color: #000;
  font-size: 120%;
  background-image: url(/en/residential-customers/img/common/icon_arrow_link02.png);
  background-position: 0 center;
  background-repeat: no-repeat;
  line-height: 1;
}
#contact #side dl dd.second a span {
  padding: 1em 0 1em 28px;
  background-position: 14px center;
  font-size: 100%;
}
#contact #side dl dd.endMenu a span {
  border: none;
}
#contact #side ul.sideBannerBox {
  margin-top: 20px;
  width: 100%;
}
#contact #side ul.sideBannerBox li {
  margin-bottom: 10px;
}
/**/
#contact.smStarting #side dl dd.smStarting, #contact.smMoving #side dl dd.smMoving, #contact.smStopping #side dl dd.smStopping, #contact.smPayment.smcTop #side dl dd.smPayment.smcTop, #contact.smPayment.smcHow #side dl dd.smPayment.smcHow, #contact.smPayment.smcBill01 #side dl dd.smPayment.smcBill01, #contact.smPayment.smcBill02 #side dl dd.smPayment.smcBill01, #contact.smPayment.smcRates #side dl dd.smPayment.smcRates, #contact.smPayment.smcDue #side dl dd.smPayment.smcDue, #contact.smProducts #side dl dd.smProducts, #contact.smInspection #side dl dd.smInspection, #contact.smSafety.smcTop #side dl dd.smSafety.smcTop, #contact.smSafety.smcEarthquake #side dl dd.smSafety.smcEarthquake, #contact.smSafety.smcGasmeter #side dl dd.smSafety.smcGasmeter, #contact.smSafety.smcNotice #side dl dd.smSafety.smcNotice, #contact.smSafety.smcCarbon #side dl dd.smSafety.smcCarbon, #contact.smInquiry #side dl dd.smInquiry, #contact.smContact.smcTop #side dl dd.smContact.smcTop, #contact.smContact.smcEmergency #side dl dd.smContact.smcEmergency {
  background-color: #f3faff;
}
#contact.smStarting #side dl dd.smStarting a span, #contact.smMoving #side dl dd.smMoving a span, #contact.smStopping #side dl dd.smStopping a span, #contact.smPayment.smcTop #side dl dd.smPayment.smcTop a span, #contact.smPayment.smcHow #side dl dd.smPayment.smcHow a span, #contact.smPayment.smcBill01 #side dl dd.smPayment.smcBill01 a span, #contact.smPayment.smcBill02 #side dl dd.smPayment.smcBill01 a span, #contact.smPayment.smcRates #side dl dd.smPayment.smcRates a span, #contact.smPayment.smcDue #side dl dd.smPayment.smcDue a span, #contact.smProducts #side dl dd.smProducts a span, #contact.smInspection #side dl dd.smInspection a span, #contact.smSafety.smcTop #side dl dd.smSafety.smcTop a span, #contact.smSafety.smcEarthquake #side dl dd.smSafety.smcEarthquake a span, #contact.smSafety.smcGasmeter #side dl dd.smSafety.smcGasmeter a span, #contact.smSafety.smcNotice #side dl dd.smSafety.smcNotice a span, #contact.smSafety.smcCarbon #side dl dd.smSafety.smcCarbon a span, #contact.smInquiry #side dl dd.smInquiry a span, #contact.smContact.smcTop #side dl dd.smContact.smcTop a span, #contact.smContact.smcEmergency #side dl dd.smContact.smcEmergency a span {
  color: #1070ba;
  font-weight: bold;
}
/*親のみ*/
#contact.smPayment #side dl dd.smPayment.smcTop a span, #contact.smSafety #side dl dd.smSafety.smcTop a span, #contact.smContact #side dl dd.smContact.smcTop a span {
  color: #1070ba;
  font-weight: bold;
}
#contact #side dl dd.second {
  display: none;
}
#contact.smPayment #side dl dd.second.smPayment, #contact.smSafety #side dl dd.second.smSafety, #contact.smContact #side dl dd.second.smContact {
  display: block;
}
#contact #side p.sideRCtop {
  margin-top: 10px;
  padding: 0 0;
  width: 100%;
  border: #d9d9d9 solid 1px;
  background-color: #FFFFFF;
}
#contact #side p.sideRCtop a {
  display: block;
  padding: 0 14px;
  text-decoration: none;
}
#contact #side p.sideRCtop a:hover {
  background-color: #e6f1f9;
}
#contact #side p.sideRCtop a span {
  display: block;
  padding: 1em 0 1em 14px;
  color: #000;
  font-size: 120%;
  background-image: url(/en/residential-customers/img/common/icon_arrow_link02.png);
  background-position: 0 center;
  background-repeat: no-repeat;
  line-height: 1;
}
/* ----------------------------------------------------- */
/* rc contents */
/* ----------------------------------------------------- */
/* h1 */
#contact #contents h1 {
  font-size: 250%;
  color: #1070ba;
  font-weight: normal;
  line-height: 1;
  margin: 0 0 30px 0;
  /*border-bottom:#1070ba solid 2px;*/
  background-position: 0 0;
  background-repeat: no-repeat;
  padding-top: 0.3em;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
}
#contact #contents .contTopH1 {
  margin-bottom: 20px;
}
#contact #contents .contTopH1 h1 {
  margin: 0 0 2px 0;
}
#contact #contents .contTopH1 p {
  font-size: 140%;
  padding-bottom: 2px;
  margin-bottom: 0px;
  color: #555555;
  border-bottom: #eef3f7 solid 8px;
}
#contact #contents h1.howto {
  /*background-image:url(/en/residential-customers/img/payment/icon_h1_howtopay.png);*/
}
#contact #contents h1.rates {
  /*background-image:url(/en/residential-customers/img/payment/icon_h1_rates.png);*/
}
#contact #contents h1.bill {
  /*background-image:url(/en/residential-customers/img/payment/icon_h1_bill.png);*/
}
#contact #contents h1.faq {
  /*background-image:url(/en/residential-customers/img/inquiry/icon_h1_faq.png);*/
}
#contact #contents h1.bar {
  /*
	background-image:url(/en/residential-customers/img/common/icon_h1_bar.png);
	padding-top:0.3em;
	padding-right:0;
	padding-bottom:0.7em;
	padding-left:20px;
	*/
}
/* h2 */
#contact #contents h2 {
  font-size: 180%;
  color: #1070ba;
  font-weight: normal;
  line-height: 1;
  margin: 0 0 15px 0;
  border: none;
  border-bottom: #2376b5 solid 1px;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0.3em;
  padding-left: 0;
}
#contact #contents h2.bar {
  /*
	background-image:url(/en/residential-customers/img/common/icon_h1_bar.png);
	background-position:0 0;
	background-repeat:no-repeat;

	padding-top:0.3em;
	padding-right:0;
	padding-bottom:0.7em;
	padding-left:20px;
	*/
}
#contact #contents h2.bar.line2Ttl {
  /*
	padding-top:-0em;
	padding-bottom:0.1em;
	*/
}
#contact #contents h2.icon {
  background-image: url(/en/residential-customers/img/inquiry/icon_h2_faq.png);
  background-position: 0 0;
  background-repeat: no-repeat;
  padding-top: 0.3em;
  padding-right: 0;
  padding-bottom: 0.5em;
  padding-left: 40px;
}
#contact #contents h2.icon.inqFaq {
  background-image: url(/en/residential-customers/img/inquiry/icon_h2_faq.png);
  border-bottom: #70b85d solid 1px;
  color: #70b85d;
}
#contact #contents h2.icon.inqFaq2 {
  background-image: url(/en/residential-customers/img/inquiry/icon_h2_faq2.png);
}
#contact #contents h2.icon.inqInq {
  background-image: url(/en/residential-customers/img/inquiry/icon_h2_inq.png);
}
#contact #contents h2.icon.contHome {
  background-image: url(/en/residential-customers/img/contact/icon_h2_home.png);
}
#contact #contents h2.icon.warning {
  background-image: url(/en/residential-customers/img/common/icon_attention.png);
}
#contact #contents h2.noneLine {
  border: none;
}
#contact #contents h2.contTopTtl {
  font-size: 250%;
  color: #1070ba;
  font-weight: normal;
  line-height: 1;
  margin: 0 0 30px 0;
  border: none;
  background-position: 0 0;
  background-repeat: no-repeat;
  padding-top: 0.3em;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
}
#contact #contents h2 span.payTtlIcon {
  background-color: #E0902B;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  padding: 0.2em 1em;
  color: #FFFFFF;
  font-size: 50%;
  margin-left: 2em;
}
/* h3 */
#contact #contents h3 {
  font-size: 145%;
  color: #000000;
  font-weight: normal;
  line-height: 1;
  margin: 0 0 15px 0;
  border: none;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
}
#contact #contents h3.bottomLine {
  font-size: 145%;
  color: #000000;
  font-weight: normal;
  line-height: 1;
  margin: 0 0 15px 0;
  border: none;
  border-bottom: #2376b5 solid 1px;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0.5em;
  padding-left: 0;
}
#contact #contents h3.contTopTtl {
  font-size: 180%;
  color: #1070ba;
  font-weight: normal;
  line-height: 1;
  margin: 0 0 15px 0;
  border: none;
  border-bottom: #2376b5 solid 1px;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0.3em;
  padding-left: 0;
}
#contact #contents h3.productsTop {
  background-color: #e9eef4;
  padding-top: 10px;
  padding-left: 14px;
  padding-bottom: 8px;
  padding-right: 14px;
  color: #1070ba;
}
#contact #contents h3.productsTop.line1Ttl {
  padding-top: 17px;
}
#contact #contents h3.productsTop.line2Ttl {
  padding-top: 6px;
}
/* h4 */
#contact #contents h4.norTtl {
  font-size: 110%;
  color: #1070ba;
  font-weight: bold;
  border: none;
  margin: 0;
  padding: 0;
}
/* ----------------------------------------------------- */
/* btnList01 */
/* ----------------------------------------------------- */
#contact #contents ul.btnList01 {
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#contact #contents ul.btnList01.topLine {
  border-top: #888888 dashed 1px;
  padding-top: 30px;
  margin-top: 50px;
}
#contact #contents ul.btnList01 li {
  width: 100%;
  margin-bottom: 10px;
}
@media screen and (min-width: 769px) {
  #contact #contents ul.btnList01 li {
    width: 330px;
  }
  #contact #contents ul.btnList01 li::nth-child(odd) {
    width: 30%;
  }
}
#contact #contents ul.btnList01 li.listEnd {
  margin-right: 0px;
}
#contact #contents ul.btnList01 li a:not(.nonbtnList01) {
  display: block;
  border: #eef3f7 solid 4px;
  padding: 18px 25px;
  background-color: #ffffff;
  background-image: url(/en/residential-customers/img/common/icon_arrow_right_link01.png);
  background-position: 300px center;
  background-repeat: no-repeat;
  color: #333333;
  text-decoration: none;
  font-size: 110%;
  width: 330px;
  margin: auto;
}
@media screen and (min-width: 769px) {
  #contact #contents ul.btnList01 li a:not(.nonbtnList01) {
    width: auto;
  }
}
#contact #contents ul.btnList01 li.blank a:not(.nonbtnList01) {
  background-image: url(/en/assets/images/shared/icon_window.png);
}
#contact #contents ul.btnList01 li a.bgnone {
  display: inline;
  border: none;
  padding: 0;
  background: none;
  color: #3B67BD;
  text-decoration: underline;
  font-size: 100%;
}
#contact #contents ul.btnList01 li a.arrowRg {
  background-image: url(/en/residential-customers/img/common/icon_arrow_right_link02.png);
  color: #70b85d;
  width: 330px;
  margin: auto;
}
@media screen and (min-width: 769px) {
  #contact #contents ul.btnList01 li a.arrowRg {
    width: auto;
  }
}
#contact #contents ul.btnList01 li a:hover:not(.nonbtnList01) {
  border: #1070ba solid 4px;
  background-color: #f3faff;
  cursor: pointer;
}
#contact #contents ul.btnList01 li a.bgnone:hover {
  border: none;
  background: none;
  color: #2595FF;
}
#contact #contents ul.btnList01 li a.arrowRg:hover {
  border: #70b85d solid 4px;
  background-color: #f2ffee;
  cursor: pointer;
}
#contact #contents ul.btnList01 li a span.ttlImg {
  display: block;
}
#contact #contents ul.btnList01 li a span.ttlTxt {
  display: block;
  font-size: 150%;
  color: #1070ba;
  font-weight: normal;
  line-height: 1;
  margin-top: 5px;
  margin-bottom: 5px;
}
#contact #contents ul.btnList01 li a.arrowRg span.ttlTxt {
  color: #70b85d;
}
#contact #contents ul.btnList01 li a span.txt {
  display: block;
  margin-top: 5px;
}
#contact #contents ul.btnList01.contactTopFaq li {
  float: none;
}
#contact #contents ul.btnList01.safetyMenu li a span.linedoub {
  padding-top: 0.4em;
}
#contact #contents ul.btnList01.safetyMenu li a span.lineSin {
  padding-top: 1em;
}
/* ----------------------------------------------------- */
/* btnSet */
/* ----------------------------------------------------- */
#contact #contents ul.btnSet {
  overflow: hidden;
  margin-bottom: 30px;
}
#contact #contents ul.btnSet.sLine li.emerg {
  width: 100%;
}
#contact #contents ul.btnSet.sLine li.emerg img {
  width: 100%;
}
/* ----------------------------------------------------- */
/* btn */
/* ----------------------------------------------------- */
#contact #contents p.btnZoom {
  text-align: center;
}
#contact #contents p.btnZoom a {
  display: block;
  margin: 0 auto;
  width: 300px;
  background-color: #e17e14;
  background-image: url(/en/residential-customers/img/common/icon_zoom01.png);
  background-position: 110px center;
  background-repeat: no-repeat;
  color: #FFFFFF;
  font-size: 150%;
  text-decoration: none;
  padding: 10px 0 10px 30px;
}
#contact #contents p.btnZoom a:hover {
  background-color: #ffac08;
}
#contact .pointPopup-close {}
#contact .pointPopup-close a {
  display: block;
  width: 40px;
  margin: 0 auto;
  background-color: #e17e14;
  background-image: url(/en/residential-customers/img/common/icon_close20.png);
  background-position: 10px center;
  background-repeat: no-repeat;
  color: #FFFFFF;
  font-size: 120%;
  text-decoration: none;
  padding: 10px 10px 10px 30px;
}
#contact .pointPopup-close a:hover {
  background-color: #ffac08;
}
#contact a:hover img.imgOver {
  opacity: 0.6;
}
/* ----------------------------------------------------- */
/* emergency */
/* ----------------------------------------------------- */
#contact #contents table.emergencyTable {
  width: 100%;
  border-top: #d9d9d9 solid 1px;
  border-left: #d9d9d9 solid 1px;
}
#contact #contents table.emergencyTable th {
  border-bottom: #d9d9d9 solid 1px;
  border-right: #d9d9d9 solid 1px;
  background-color: #f4faff;
  color: #5c98c6;
  padding: 30px;
}
#contact #contents table.emergencyTable th.emer {
  width: 65%;
}
#contact #contents table.emergencyTable th.num {
  width: 35%;
}
#contact #contents table.emergencyTable td {
  width: 24%;
  border-bottom: #d9d9d9 solid 1px;
  padding: 20px 0px 20px 20px;
}
#contact #contents table.emergencyTable td.city {
  width: 17%;
  background-color: #f5f5f5;
  vertical-align: middle;
  padding: 20px 15px;
}
#contact #contents table.emergencyTable td.number {
  border-left: #d9d9d9 solid 1px;
  border-right: #d9d9d9 solid 1px;
  text-align: center;
  padding: 10px 0;
  vertical-align: middle;
}
/* ----------------------------------------------------- */
/* float clear */
/* ----------------------------------------------------- */
/* for IE6,7 */
/* ----------------------------------------------------- */
#contents ul.bnrList01, #contents .contentsList, #contents div.contentsList div.wrap, #contents dl.update-list dt.ttl, #contents div.picArticle, #contents div.picList ul, #contents div.noteWrap02, #enContainer #side div.effortsList dd.featureContents div, #contents div.linkList05, #contents dl.cLType08 dd.wrap, #contents dl.linkList02 dd ul, #contents h2.inImg01, #contents div.linkList06 ul, #contents div.plType06, #contents ul.linkList07, #contents ul.linkList09, div.downloadPlugin, #contents div.cLType13 div.wrap, #contents div.cLType13 div.wrap div {
  /zoom: 1;
}
/* modern borwser */
/* ----------------------------------------------------- */
#contents ul.bnrList01:after, #contents .contentsList:after, #contents div.contentsList div.wrap:after, #contents dl.update-list dt.ttl:after, #contents div.picArticle:after, #contents div.picList ul:after, #contents div.noteWrap02:after, #enContainer #side div.effortsList dd.featureContents div:after, #contents div.linkList05:after, #contents dl.cLType08 dd.wrap:after, #contents dl.linkList02 dd ul:after, #contents h2.inImg01:after, #contents div.linkList06 ul:after, #contents div.plType06:after, #contents ul.linkList07:after, #contents ul.linkList09:after, .opera #contents dl.catNav ul:after, div.downloadPlugin:after, #contents div.cLType13 div.wrap:after, #contents div.cLType13 div.wrap div:after {
  content: '';
  display: block;
  clear: both;
  height: 0;
}