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

/* お問い合わせ（停電・電気設備）ページ */

@media screen and (max-width: 767px) {
#content-body-wrapper h1{
padding-top: 20px !important;
}
}

#content-body-wrapper .section{
background: #f8f8f8 !important;
padding-bottom: 70px;
}

@media screen and (max-width: 767px){
#content-body-wrapper .section{
padding-bottom: 36px;
}
}

.section.all_wrapper{
padding-top: 80px;
}

@media screen and (max-width: 767px){
.section.all_wrapper{
padding-top: 30px !important;
}
}

#web .ft_122{
  font-size: 122%;
}

.dis_n{
display: none;
}

@media screen and (max-width: 767px){
.sp_dis_b{
display: block;
}
}

.sp_dis_b{
display: none;
}

@media screen and (max-width: 767px){
.sp_dis_b{
display: block;
}
}

.link_color{
color:#0a7bcc !important;
text-decoration:underline !important;
text-decoration-color:#0a7bcc !important;
}

.btn_blue a:hover{
text-decoration: underline;
}

#line #btn a{
transition: all 0.3s;
}

#line #btn a:hover{
display: inline-block;
transform: scale(1.05);
}

@media screen and (max-width: 767px) {
#content-body .section.pad-t60{
padding-top: 20px !important;
}
}

.line_area .inner{
margin: 0 auto 0;
}

.font_180{
font-size: 180% !important;
}

.mg{
margin: 0 0px 5px;
}

.mg.line{
margin: 0 10px 5px;
}

.text_left{
text-align: left;
}

span.marker{
background:linear-gradient(transparent 60%, #ffe79d 60%);
}

#line .btn_line_friend img{
width: 100%;
max-width: 430px;
}

#line .line_banner_box{
margin-left: 3%;
margin-right: 3%;
}

@media screen and (max-width: 767px) {
#line .line_banner_box{
margin-left: 0;
margin-right: 0;
}
}

#line .line_banner_box img{
width:100%;
}

#line #btn{
text-align: center;
margin: 0 3% 5%;
}

#line .line_howtoadd{
margin: 0 3% 0;
}

#line .ac{
width: 100%;
max-width: 980px;
margin: 0 auto;
}

#line .ac-parent{
position: relative;
height: 42px;
color: #777;
background: #fff;
border: #4CC764 solid 2px;
text-align: center;
line-height: 42px;
cursor: pointer;
font-size: 110%;
font-weight: bold;
margin-bottom: 8px;
}

@media screen and (max-width: 767px) {
#line .ac-parent{
font-size: 100%;
height: 30px;
line-height: 30px;
margin-bottom: 5px;
}
}

@media screen and (max-width: 767px) {
.ac-parent::before{
width: 15px;
}
}

@media screen and (max-width: 767px) {
.ac-parent::after{
height: 15px;
right: 15px;
}
}

#caution{
padding: 50px 0;
max-width: 980px;
margin: 0 auto;
}

@media screen and (max-width: 767px) {
#caution{
width: auto;
padding: 30px 0 20px;
}
}

#caution .art{
position: relative;
font-size: 122%;
padding: 15px;
padding-left: 47px;
margin: 0 0 5px;
font-weight: normal !important;
text-align: left;
color: #666;
background-color: #fadede;
}

@media screen and (max-width: 767px) {
#cantion .art{
position: relative;
padding: 15px 15px 15px 10px;
padding-left: 40px;
margin-bottom: 3px;
}
}

#caution .art::before{
  position: absolute;
  content: "!";
  display: inline-block;
  background-color: red;
  color: white;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  text-align: center;
  line-height: 1.3;
  margin-right: 0.8em;
  font-size: 20px;
  left: 19px;
  top: 17px;
}

@media screen and (max-width: 767px){
#caution .art::before{
left: 16px;
}
}

#caution .art a{
color: #3d90cc;
text-decoration: underline;
}

#caution small{
margin:0 3%;
}

#caution2 .caution2_contets{
text-align: left;
margin-top: 5%;
}

#web .ttl{
height: 43px;
color: #0c7bcc;
border-bottom: 1px solid #0c7bcc;
margin: 0 3% 5%;
}

#web .ttl p{
color: #0c7bcc;
text-align: left;
font-weight: bold;
}

.section.line_web{
padding-top: 70px;
}

@media screen and (max-width: 767px){
.section.line_web{
padding-top: 30px !important;
}
}

.section.line_web .ttl{
width: 60%;
min-width: 588px;
height: 43px;
text-align: center;
color: #0c7bcc;
border-bottom: 1px solid #0c7bcc;
margin: 0 auto 4%;
}

@media screen and (max-width: 767px){
.section.line_web .ttl{
height: auto;
max-width: 500px;
width: 98%;
min-width: auto;
text-align: left;
margin: 0 auto 5%;
}
}

.section.line_web .ttl p{
color: #0c7bcc;
text-align: left;
font-weight: bold;
}

#web #chat_area{
width: 100%;
padding: 0 0 0 !important;
}

@media screen and (max-width: 767px){
#web #chat_area{
padding: 15px 0 0;
}
}

#web .chat_btnarea{
width: 100% !important;
margin-bottom: 193px;
}

@media screen and (max-width: 767px){
#web .chat_btnarea{
margin-bottom: 155px;
}
}


@media screen and (max-width: 430px){
#web .chat_btnarea{
margin-bottom: 195px;
}
}

#web .chat_btnarea li{
width: 88%;
max-width: 430px;
height: 63px;
}

@media screen and (max-width: 767px){
#web .chat_btnarea li{
width: 100%;
}
}

#web .chat_btnarea li.mb86{
  margin-bottom: 86px;
}

@media screen and (max-width: 767px){
#web .chat_btnarea li.mb86{
margin-bottom: 75px;
}
}

#web .chat_btnarea li a{
height: 100%;
}

#web .btn_blue{
background: #0c7bcc;
box-shadow: 0 5px 0 #025b9b;
color: #fff;
border:none;
}

#web .chat_btnarea li a .img{
width: 48px;
}

@media screen and (max-width: 767px){
#web .chat_btnarea li a .img{
width: 36px;
}
}

@media screen and (max-width: 767px){
li a .img{
width: 36px !important;
}
}

#web .btn_blue.maintenance{
opacity: 0.4;
pointer-events: none;
}

#web .text-caution.maintenance{
text-align: center !important;
}

#matter{
margin: 5% auto 5%;
}

@media screen and (max-width: 767px){
#matter{
width: 100% !important;
}
}

@media screen and (max-width: 767px){
#matter .list{
margin: 10px 0;
}
}

#matter .matter_ttl{
position: absolute;
top: -10px;
left: -3px;
padding: 0 4px;
color:#666;
line-height: 1;
font-weight: bold;
text-aligh:left;
margin: 3%;
background: #fafafa;
border-bottom: none;
}

#matter ul{
margin: 15px 0 10px 10px;
line-height: 1.8 !important;
}

@media screen and (max-width: 767px){
#matter ul{
margin: 10px 0 10px 10px;
line-height: 1.8 !important;
}
}

#matter ul li{
margin-left: 2.5em;
width: 82%;
}

@media screen and (max-width: 767px){
#matter ul li{
width: 89%;
margin-left: 5%;
}
}

#matter ul li span.check{
position: relative;
}

#matter ul li span.check::before{
  position: absolute;
  content: '';
  display: inline-block;
  top: 2px;
  left: -18px;
  width: 15px;
  height: 15px;
  background-image: url(/pg/user/chat/images/check.png);
  background-size: contain;
  background-repeat: no-repeat;
}

#matter ul li span.note{
  position: relative;
  display: inline-block;
  font-size: 88%;
  line-height: 1.5 !important;
  padding-left: 1em;
  margin-bottom: 9px;
}

#matter ul li span.note::before{
  position: absolute;
  content: '※';
  display: inline-block;
  top: 0;
  left: 0;
}

#matter .matter2{
margin: 0 2em 8%;
}

@media screen and (max-width: 767px){
#matter .matter2{
margin: 0 1em 8%;
}
}

#matter .ml_40{
margin-left: 40%;
}

#matter .mb_8{
margin-bottom:8%;
text-align:left;
}

#matter .link-pdf{
color: #0c7bcc;
text-decoration: underline;
}

#caution2{
margin: 0 3% 4%;
}

@media screen and (max-width: 767px){
#caution2{
margin: 0 0 5%;
}
}

#caution2 .ac-parent{
height: auto !important;
}

#caution2 .ac-parent{
font-weight: normal;
}

#caution2 .ac-parent .caution2_ttl{
height: 50px;
background: #777;
border: none;
font-size: 100%;
font-weight: bold;
text-align: left;
padding: 0 3%;
}

#caution2 .ac-parent{
color: #fff !important;
}

#caution2 .ac-parent .caution2_contens_disb{
color: #777;
}

#caution2 .ac-parent::before{
background: #fff !important;
}

#caution2 .ac-parent::after{
background: #fff !important;
}

#caution2 .ac-parent .caution2_contens_disb{
background: #fff;
border: none;
font-size: 85%;
font-weight: normal;
line-height: 1.6;
text-align: left;
padding: 1% 3%;
background: rgb(250, 250, 250) !important;
}

@media screen and (max-width: 767px){
#caution2 .ac-parent .caution2_contens_disb{
font-size: 80%;
}
}

#caution2 .ac-child{
background: #fff;
margin-top: -5px;
}

#caution2 .ac-parent::before{
width: 22px !important;
top: 24% !important;
}

@media screen and (max-width: 767px){
#caution2 .ac-parent::before{
width: 15px !important;
}
}

#caution2 .ac-parent::after{
height: 22px !important;
top: 24% !important;
}

@media screen and (max-width: 767px){
#caution2 .ac-parent::after{
height: 15px !important;
}
}

#caution2 .pointer_dec{
color: #0c7bcc;
text-decoration: underline;
}

@media screen and (max-width: 767px){
#Contact_page-area{
margin-top: 50px;
}
}

@media screen and (max-width: 767px){
#Contact_page-area p.time{
font-size: 123%;
}
}

#tel{
margin-top:12%;
}

@media screen and (max-width: 767px){
#tel{
margin-top:12%;
}
}

#tel .ttl{
font-size: 148%;
text-align: center;
color: #666;
border: none;
margin: 0 auto;
}

@media screen and (max-width: 767px){
#tel .ttl{
height: auto;
}
}

#tel .btn_contact {
width: 430px;
height: 63px;
margin: 0 auto 14px;
background-color: #0a7bcc;
box-shadow: 0 5px 0 #025b9b;
border-radius: 8px;
text-decoration: none;
transition: .2s ease;
-webkit-transition: .2s ease;
}

@media screen and (max-width: 767px){
#tel .btn_contact{
width: auto;
max-width: 430px;
height: 63px;
padding: 0 2%;
margin-bottom: 13px;
}
}

#tel .btn_contact:hover{
  opacity: .7;
}

#tel .btn_contact a{
position: relative;
display: flex;
align-items: center;
flex-wrap: wrap;
margin-bottom: 10px;
padding: 14px 5%;
text-decoration: none;
}

@media screen and (max-width: 767px){
#tel .btn_contact a{
16px 10px 4px 15px;
margin-bottom: 20px;
}
}

#tel a::after{
content: "";
position: absolute;
top: 54%;
right: 20px;
width: 8px;
height: 8px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(45deg);
margin-top: -6px;
}

@media screen and (max-width: 767px){
#tel a::after{
margin-top: -4px;
}
}

#tel .btn_contact a p{
color: #fff;
margin-top: 4px;
}

@media screen and (max-width: 767px){
#tel .btn_contact a p{
margin-top: 6px;
}
}

#tel .btn_contact a p span.txt{
  font-size: 180%;
  margin-right: 5px;
  display: inline-block;
  border-bottom: 1px solid #fff;
  line-height: 1;
}

#tel .btn_contact a p span.txt_sub{
  font-size: 130%;
}

#tel .btn_contact p.ft-small{
text-align: center;
text-align: center;
font-size: 85.7% !important;
line-height: 1.5 !important;
}

/* �`���b�g�i��d�E�ݔ��j�y�[�W */

li a.arrow01::after{
border-top: 2px solid #fff !important;
border-right: 2px solid #fff !important;
}

@media screen and (max-width: 767px) {
#24h.pad-t40.pad-b25{
padding-top: 20px !important;
padding-bottom: 18px !important;
}
}

#webchat_cantion{
padding: 50px 0;
max-width: 980px;
margin: 0 auto;
padding-top: 0;
}

@media screen and (max-width: 767px) {
#webchat_cantion{
width: auto;
padding: 0px 0px 33px 0px;
}
}

#webchat_cantion .art{
padding: 15px;
padding-left: 15px;
font-weight: normal !important;
text-align: left;
color: #666;
background-color: #fadede;
}

@media screen and (max-width: 767px) {
#webchat_cantion .art{
position: relative;
padding: 15px 15px 15px 15px;
margin-bottom: 3px;
}
}

#webchat_cantion .art span::before{
  position: absolute;
  content: "!";
  display: inline-block;
  background-color: red;
  color: white;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  text-align: center;
  line-height: 1.3;
  margin-right: 0.8em;
  font-size: 20px;
  left: -29px;
}

#webchat_cantion .art span{
  position: relative;
  display: inline-block;
  margin-left: 33px;
}

#webchat_cantion .link_color{
color:#0a7bcc !important;
text-decoration:underline !important;
text-decoration-color:#0a7bcc !important;
}

@media screen and (max-width: 767px){
#web #chat_area{
padding-bottom: 0 !important;
}
}

#web .chat_btnarea .mb186{
margin-bottom: 86px;
}

#web .chat_btnarea .btn_blue:hover{
opacity: .7;
}

#web .chat_btnarea .chat_detail{
line-height: 1.8  !important;
margin-top: 10px;
}

#web .chat_btnarea .chat_detail li{
height: auto;
margin-left: 2em;
width: 90%;
}

@media screen and (max-width: 767px){
#web .chat_btnarea .chat_detail li{
line-height: 1.4;
}
}

#web .chat_btnarea .chat_detail li span.check{
position: relative;
}

#web .chat_btnarea .chat_detail li span.check::before{
position: absolute;
content: '';
display: inline-block;
top: 2px;
left: -18px;
width: 15px;/*画像の幅*/
height: 15px;/*画像の高さ*/
background-image: url(/pg/user/chat/images/check.png);
background-size: contain;
background-repeat: no-repeat;
}

#web .chat_btnarea .chat_detail li span.note{
font-size: 100%;
padding-left: 1em;
margin-bottom: 9px;
}

#web .chat_btnarea .chat_detail li span.note{
  position: relative;
  display: inline-block;
  font-size: 88%;
  line-height: 1.5 !important;
}

#web .chat_btnarea .chat_detail li span.note::before{
  position: absolute;
  content: '※';
  display: inline-block;
  top: 0;
  left: 0;
}

#web .facility{
border: solid 2px gray;
background-color: #fff;
padding: 2%;
width: 45%;
margin: 0 auto;
}

@media screen and (max-width: 767px){
#web .facility{
width: 100%;
max-width: 383px;
}
}

#web .facility.yoru{
  width: 85%;
}

@media screen and (max-width: 767px){
#web .facility.yoru{
  width: 100%;
}
}

#web .facility p img{
  width: 100%;
}

#web .facility p span{
color: #0c7bcc;
}

#web .list_style .sp_marg-l10{
margin-left: 10px !important;
}

#web #rec{
  width: 56%;
  margin: 0 auto 5%;
}

@media screen and (max-width: 767px){
#web #rec{
width: 100%;
max-width: 440px;
}
}

#web #caution2{
width: 56%;
margin: 0 auto 5%;
}

@media screen and (max-width: 767px){
#web #caution2{
width: 100%;
max-width: 440px;
}
}

#web #rec dl dt{
height: 50px;
background-color: #777;
color: #fff;
text-align: left;
border: none;
line-height: 50px;
cursor: pointer;
font-size: 128%;
font-weight: bold;
margin-bottom: 5px;
padding: 0 3%;
}

#web #rec dl dt dd{
background: #fff !important;
}

@media screen and (max-width: 767px){
#web #rec dl dt dd{
text-align: left !important;
}
}

#web #rec dl dt::before{
background: #fff;
}

#web #rec dl dt::after{
background: #fff;
}

@media screen and (max-width: 767px){
#web .section.sp_pb0{
padding-bottom: 0 !important;
}
}

#web .section.pc_pb0{
padding-bottom: 0 !important;
}

@media screen and (max-width: 767px){
#web .section.sp_pb7{
padding-bottom: 7px !important;
}
}

#matter .matter_web{
margin-top: 5%;
text-align: center;
}

#matter .matter_web .matter_web_p{
margin: 0 2em 5%;
}

#matter .matter_web a{
color:#0a7bcc;
text-decoration:underline;
text-decoration-color:#0a7bcc;
}

@media screen and (max-width: 767px){
#pt1 .chat_btnarea .sp_mb80{
margin-bottom: 96px;
}
}

#web #pt1{
margin-top: 20px;
}

@media screen and (max-width: 767px){
#web #pt1{
margin-top: 15px;
}
}

#web #pt1 .attention{
width: 50%;
margin: 0 auto 58px;
}

@media screen and (max-width: 767px){
#web #pt1 .attention{
width: 100%;
max-width: 430px;
margin-bottom: 40px;
padding-top: 5px;
}
}

#web #pt2{
margin-top: 30px;
}

@media screen and (max-width: 767px){
#web #pt2{
margin-top: 15px;
}
}

.speechBubble_box{
  text-align: center;
}

.speechBubble{
  position: relative;
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 32px;
  border: 2px solid #0c7bcc;
  border-radius: 8px;
  background-color: #ffffff;
  text-align: center;
  font-size: 122%;
  font-weight: 400;
  line-height: 1.5;
  color: #333333;
  z-index: 100;
}

.speechBubble_box.line .speechBubble{
  margin-top: 20px;
  margin-bottom: 5px;
  border: 2px solid #4CC764;
}

@media screen and (max-width: 767px){
.speechBubble_box.line .speechBubble{
  margin-top: 12px;
}
}

.speechBubble::before{
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  border-style: solid;
  border-width: 20px 10px 0 10px;
  border-color: #0c7bcc transparent transparent;
  translate: -50% 100%;
}

.speechBubble_box.line .speechBubble::before{
  border-color: #4CC764 transparent transparent;
}

.speechBubble::after{
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  border-style: solid;
  border-width: 15.5px 7.8px 0 7.8px;
  border-color: #ffffff transparent transparent;
  translate: -50% 100%;
}

.speechBubble span{
background-color: #0c7bcc;
color: #fff;
border-radius: 5px;
padding: 0 5px;
margin-right: 10px;
}

.speechBubble_box.line .speechBubble span{
background-color: #4CC764;
}

@media screen and (max-width: 767px){
.speechBubble span{
display: block;
margin-right: 0;
max-width: 120px;
margin-left: 42px;
}
}

#web #pt2 #matter{
width: 50%;
margin: 0 auto 10px;
}

#web #pt2 .attention{
width: 50%;
margin: 0 auto 80px;
}

@media screen and (max-width: 767px){
#web #pt2 .attention{
width: 100%;
max-width: 430px;
margin-bottom:40px;
}
}

@media screen and (max-width: 767px){
#web #pt2 #matter{
width: 100%;
max-width: 430px;
}
}

@media screen and (max-width: 767px){
#web #pt2 .chat_btnarea.marg-b60{
margin-bottom: 45px !important;
}
}

@media screen and (max-width: 767px){
#web .attention .ast{
margin: 0 5px 8% 1.5em;
}
}

#web .pt2 .chat_btnarea{
margin-top: 20px;
margin-bottom: 60px;
}

#web .ml_auto{
margin-left: 173px;
}

@media screen and (max-width: 767px){
#web .ml_auto{
margin-left: 40%;
}
}

#web .marg-b30{
text-align: left;
}

#webchat_cantion.chat{
max-width: 980px;
width: 93%;
margin: 0 auto;
box-sizing: border-box;
}

@media screen and (max-width: 767px){
#webchat_cantion.chat{
width:100%;
}
}

#web .chat_btnarea.w100{
width: 100%;
}

#web a.btn_none{
padding: 0;
box-shadow: none;
border: none;
background: none;
display: inline !important;
}

#web #caution2 .ac-child{
padding: 4em 1em 6em !important;
}

@media screen and (max-width: 767px){
#web #caution2 .ac-child{
padding: 2em 1em 5em !important;
}
}