@charset "utf-8";

/*--- 全体の幅 ------------------------------*/
#wrapper {max-width: 100%;width: 94%;margin:0 auto;display:block;position:relative;}
.wrapper {width: 84.6%;max-width: 1100px;margin:0 auto;padding: 0;}
.wrapper2 {width: 95.3%;/*max-width: 1230px;*/margin:0 auto;padding: 0;}
@media screen and (max-width:900px){
	#wrapper {width: 100%;font-size:105%;}
	.wrapper,.wrapper2 {width: 90%;max-width: 90%;}
}

/*--- Header glNav ------------------------------*/
.inner {width: 84.6%;max-width: 1100px;margin: 0 auto;}
.inner:after { content: ""; clear: both; display: block;}

/* header */
#header {top: 0;position: relative;width: 100%;margin: 0 auto;line-height: 1;z-index: 999;}
#header a,
#header {text-decoration: none;display: block;}
#header .inner {position: relative;height: 90px;}
#header .bgColor .inner {padding: 10px 0 0 0;height: auto;}
#header .bgColor .inner .sub-nav {display:block;float: right;}
#header .logo { background: url(../img/logo.png) no-repeat; width: 195px; height: 34px; position: absolute; top: 30px; background-size: 100% auto; font-size: 1px; line-height: 1em; text-indent: -99999px;}
#header .logo a {display:none;width: 100%;height: 100%;}
.b2c #header .logo a.cBlock,
.b2b #header .logo a.bBlock { display:block;}
#header .btn-contact {width:130px;text-align:center;padding: 0;line-height: 30px;color: #fff;font-weight: 500;font-size: 87%;}
.b2c #header{  border-bottom: solid 3px #BBE3F4;}
.b2b #header{  border-bottom: solid 3px #BBF4ED;}
.contact #header .bgColor {display:none;}

.b2b #header .not-business { display: none; }
@media screen and (max-width: 1100px) {
	#header .inner {height: 50px;}
	#header .bgColor .inner {padding: 10px 5% 0 5%;}
	#header .bgColor .inner .sub-nav { display:none;}
	.b2c #header{  border-bottom: solid 2px #EEF3F7;}
	.b2b #header{  border-bottom: solid 2px #BBF4ED;}
}

/* glnav */
#global-nav { text-align:right;}
#global-nav ul {list-style: none;position: absolute;font-weight: bold;font-size: 94%;width: 80%;right: 0;/* top: 40px; */margin-top: -.5em;}
.sub #global-nav ul { top:40px;}
#global-nav ul li {margin-left: 2%;display: inline-block;position: relative;}
#global-nav ul li.nav-btn { display:inline-block !important;}
#global-nav ul li:after {content:"";display:block;height:3px;position: absolute;/* bottom: -35px; */bottom: 0;left: 0;right: 0;opacity: 0;-moz-transition: all 0.5s ease-out 0s;-webkit-transition: all 0.5s ease-out 0s;-o-transition: all 0.5s ease-out 0s;-ms-transition: all 0.5s ease-out 0s;transition: all 0.5s ease-out 0s;}
#global-nav ul li.nav-btn:after { display:none;}
#global-nav ul li:hover:after{/*bottom: -35px;*/ bottom:0;opacity: 1;-moz-transition: all 0.5s ease-out 0s;-webkit-transition: all 0.5s ease-out 0s;-o-transition: all 0.5s ease-out 0s;-ms-transition: all 0.5s ease-out 0s;transition: all 0.5s ease-out 0s;}
#global-nav ul li:first-child { margin-left:0;}
.b2c #global-nav ul li:hover:after { background:#00469c;}
.b2b #global-nav ul li:hover:after {background: #107c6f;}
.b2c.lpgas #global-nav ul li.nav1:after,
.b2c.guide #global-nav ul li.nav1:after,
.b2c.trouble #global-nav ul li.nav1:after ,
.b2c.electric #global-nav ul li.nav2:after,
.b2c.renovation #global-nav ul li.nav3:after,
.b2c.generate #global-nav ul li.nav4:after,
.b2c.health #global-nav ul li.nav5:after,
.b2c.equipment #global-nav ul li.nav6:after,
.b2c.faq #global-nav ul li.nav7:after,
.b2c.recruit.top #global-nav ul li.nav1:after,
.b2c.recruit.recruitment #global-nav ul li.nav2:after,
.b2c.recruit.schedule #global-nav ul li.nav3:after,
.b2c.recruit.senior #global-nav ul li.nav4:after,
.b2c.company.top #global-nav ul li.nav1:after,
.b2c.company.net #global-nav ul li.nav2:after ,
.b2c.joho #global-nav ul li.nav2:after {background:#00469c; /*bottom: -35px;*/ bottom:0; opacity: 1;-moz-transition: all 0.5s ease-out 0s;-webkit-transition: all 0.5s ease-out 0s;-o-transition: all 0.5s ease-out 0s;-ms-transition: all 0.5s ease-out 0s;transition: all 0.5s ease-out 0s;}
.b2b.gas #global-nav ul li.nav1:after,
.b2b.lp #global-nav ul li.nav2:after,
.b2b.welding #global-nav ul li.nav3:after,
.b2b.medical #global-nav ul li.nav4:after,
.b2b.environment #global-nav ul li.nav5:after,
.b2b.law #global-nav ul li.nav6:after,
.b2b.product #global-nav ul li.nav6:after,
.b2b.power #global-nav ul li.nav7:after,
.b2b.faq #global-nav ul li.nav8:after {background:#107c6f;/* bottom: -35px; */bottom: 0;opacity: 1;-moz-transition: all 0.5s ease-out 0s;-webkit-transition: all 0.5s ease-out 0s;-o-transition: all 0.5s ease-out 0s;-ms-transition: all 0.5s ease-out 0s;transition: all 0.5s ease-out 0s;}
.b2b.faq.gas #global-nav ul li.nav1:after,
.contact #global-nav,
.b2b.faq.lp #global-nav ul li.nav2:after { display:none;}
@media screen and (max-width: 1100px) {
	#global-nav ul li:after,
	#global-nav ul li:hover:after { display:none;}
}



#global-nav ul li.li-search:hover:after {display:none;}
#global-nav ul li a {padding: 40px 0 37px;/* background:#0f0; */}
#global-nav .sub-nav { display:none;}
#nav-toggle {display: none;position: absolute;right: 12px;top: 50%;width: 20px;height: 13px;cursor: pointer;z-index: 101;margin-top: -13px;}
#nav-toggle div { position: relative;}
#nav-toggle span {display: block;position: absolute;height: 2px;width: 100%;background: #00469c;left: 0;-webkit-transition: .35s ease-in-out;-moz-transition: .35s ease-in-out;transition: .35s ease-in-out;}
.b2b #nav-toggle span {background:#107c6f;}
#nav-toggle span:nth-child(1) { top: 0;}
#nav-toggle span:nth-child(2) {top: 6px;}
#nav-toggle span:nth-child(3) {top: 13px;}
.nav-red {display: none;}
#mobile-head .nav-red { display:none;}
@media screen and (max-width: 1240px) {
	#global-nav ul li {margin-left: 1%;font-size: 92%;}
}
@media screen and (max-width: 1100px) {
    #header, .inner {width: auto;min-width: 1px;padding: 0;}
    #header {top: 0;margin-top: 0;}
    #header .bgColor,
    #mobile-head {position:relative;z-index:10000000;}
    #mobile-head  { height:50px; background:#fff;}
    .b2c #mobile-head .cBlock.nav-red ,
    .b2b #mobile-head .bBlock.nav-red { display:block;}
    .contact.b2c #mobile-head .cBlock.nav-red,
    .contact.b2b #mobile-head .cBlock.nav-red { display:none;}
    #header .logo {left: 5%;width: 20%;height: auto;padding-top: 4%;top: 50%;margin-top: -2%;}
    #global-nav {position: absolute;top: -704px;background: #fff;width: 100%;text-align: center;padding: 0 0 2em 0;-webkit-transition: .5s ease-in-out;-moz-transition: .5s ease-in-out;transition: .5s ease-in-out;box-shadow: 1px 1px 0px 0px #bec2c6;-moz-box-shadow:1px 1px 0px 0px #bec2c6;-webkit-box-shadow:1px 1px 0px 0px #bec2c6;-ms-box-shadow:1px 1px 0px 0px #bec2c6;}
    #global-nav ul {list-style: none;position: static;right: 0;bottom: 0;margin: 0;width: 100%;}
    #global-nav ul li {float: none;position: relative;display: block;text-align: left;border-bottom: solid 2px #EEF3F7;margin: 0;padding: 0 5%;}
    #global-nav ul li.nav-btn {display:none !important;}
    .b2b #global-nav ul li {border-bottom: solid 2px #bbf4ed;}
    #global-nav ul li:hover:after { display:none;}
    #global-nav ul.bBlock li:before,
    #global-nav ul.cBlock li:before {content:"";display: block;top: 50%;margin-top: -2px;width: 4px;height: 4px;-webkit-transform: rotate(45deg);transform: rotate(45deg);position: absolute;border-top: 1px solid #00469C;border-right: 1px solid #00469C;right: 5%;}
    #global-nav ul.bBlock li:before {border-top: 1px solid #107c6f;border-right: 1px solid #107c6f;}
    #global-nav ul li:last-child { border-bottom:none;padding:5%;text-align:center;}
    #global-nav ul li:last-child:before { display:none;}
    #global-nav .sub-nav { display:block;}
    #global-nav .sub-nav li.sp-inline {display: inline-block !important;}
    #global-nav .sub-nav li { border:none !important;display:inline-block; padding: 0 1%; font-size: .7rem;}
    #global-nav .sub-nav li:last-child {width:90%;display:block;padding: 0 5%;}
    #global-nav .sub-nav li .btn-contact-w { width:100%; }
    #header #global-nav ul li a.btn-contact-w { width: 90%; margin: .5em auto 0;  }
  
    #header #global-nav ul li a,
    #header.fixed #global-nav ul li a {width: 100%;display: block;padding: .7em 0; margin-top: .5em; }
  #header #global-nav ul li a.btn-mypage, #header.fixed #global-nav ul li a.btn-mypage {  padding: .2em; text-align: center; }
  
   	#header .logo a { position:absolute;top:0;bottom:0;right:0;left:0;}
    #nav-toggle {display: block; }
    #nav-toggle:after {content:"メニュー";font-size:50%;position: absolute;bottom: -18px;left: -1em;right: -1em;}
    .open #nav-toggle span:nth-child(1) {top: 11px;-webkit-transform: rotate(315deg);-moz-transform: rotate(315deg); transform: rotate(315deg);}
    .open #nav-toggle span:nth-child(2) { width: 0; left: 50%; }
    .open #nav-toggle span:nth-child(3) {top: 11px;-webkit-transform: rotate(-315deg);-moz-transform: rotate(-315deg);transform: rotate(-315deg);}
    .open #global-nav {-moz-transform: translateY(756px);-webkit-transform: translateY(756px);transform: translateY(756px);}
    .nav-red {display: block;position: absolute;right: 50px;top: 50%;width: 50px;height: 13px;cursor: pointer;z-index: 101;font-size: 50%;margin-top: -13px;text-align: center;}
    .nav-red a { color:#333 !important;}
    .nav-red a:before {content:"";background:url(../img/icon-red.svg) no-repeat 50% 0;width: 100%;height: 23px;display:block;}
    .contact #nav-toggle,
    .contact .nav-red  { display:none;}
    .pc.nav-btn {display:none !important;}
    .nomalBlockBtn, .recBlockBtn { display:none !important;}
    .b2b .nomalBlockBtn,.b2c .nomalBlockBtn,.sub .nomalBlockBtn,.company .nomalBlockBtn{ display:block !important;}
    .recruit .recBlockBtn { display:block !important;}
    .b2c.recruit .nomalBlockBtn{ display:none !important;}

}
@media screen and (max-width: 767px) {
	#header .logo {width: 40%;padding-top: 8%;margin-top: -3%;}
}

/*search*/
.search-form {position: relative;}

input[type="search"].search-field,.search-field {width: 150px;background: #F8F8F8;padding: 0 .7em;line-height: 30px;margin-right: -5px;padding: 0 .7em;height: 30px;}
.search-submit:before {content: "";width: 14px;height: 14px;margin-right: .5em;display: block;position: absolute;top: 50%;left: .5em;margin-top: -7px;}
.search-submit {overflow: hidden;padding: 0;color: #fff;line-height: 30px;padding: 0 .7em 0 26px;cursor: pointer;position: relative; background:#fff;}
.b2c .search-submit:before{background: url(../img/icon-search-blue.svg) no-repeat;}
.b2b .search-submit:before{background: url(../img/icon-search-green.svg) no-repeat;}
.b2c input[type="search"].search-field,.b2c .search-field  { background:#336bb0;color: #fff;}
.b2b input[type="search"].search-field,.b2b .search-field  {background: #40968c;color: #fff;}
.b2c .search-submit{ color:#00469C;}
.b2b .search-submit{ color:#107c6f;}
@media screen and (max-width:900px){
	.search-form {text-align:center;}
	.search-submit:before {background: url(../img/icon-search.svg) no-repeat !important;}
	input[type="search"].search-field {width:77%;background: #F8F8F8 !important;padding: 0 .7em;line-height: 30px;margin-right: -5px;box-shadow: 2px 2px 0px 0px #dfdfdf inset;-moz-box-shadow:2px 2px 0px 0px #dfdfdf inset;-webkit-box-shadow:2px 2px 0px 0px #dfdfdf inset;-ms-box-shadow:2px 2px 0px 0px #dfdfdf inset;color: #333 !important;}
	.b2c .search-submit{background: #00469C;color: #fff;}
	.b2b .search-submit{background: #107c6f;color: #fff;}
}

/*--- nav ------------------------------*/
.to-nav {float:left;font-size: 90%;}
.to-nav li {float:left;width: 240px;background: rgba(255,255,255,.2);text-align: center;font-weight: bold;font-size: 112%;line-height: 40px;}
.b2c .to-c ,.b2b .to-b {background:#fff;}
.b2c .to-c a, .b2c .bgColor .btn-contact {color: #00469c !important;}
.b2b .to-b a, .b2b .bgColor .btn-contact {color: #107c6f;}
.b2c.company .to-c a,.b2c.recruit .to-c a,.b2c.joho .to-c a,.b2c.sub .to-c a {background: #336bb0;border-right: solid 1px #00469c;box-sizing: border-box;color: #fff !important;}
.sub-nav {}
.sub-nav li {float:left;margin-left: 2em;font-size: 90%;font-weight: bold;}
.sub-nav li:nth-child(-n+3) {padding-top:.3em;}
.sub-nav li.li-search {padding-top: 0;}
.sub-nav .btn-mypage { border: 1px solid; padding: .3em .5em; margin-top: -.4em;  }


@media screen and (max-width:1200px){
  .to-nav li { width: 200px; font-size: .9rem; }
  .sub-nav li:nth-child(-n+3) { margin-left: 1em; }
}
@media screen and (max-width:1100px){
	.to-nav {float:none;width: 100%;display: block;}
	.to-nav li {width: 50%;font-size: 80%;}
}

/*--- contents ------------------------------*/
#container{position:relative;background: #EEF3F7;padding: 40px 0 0;}
#sub #container {padding-top: 20px;}
.contents {position:relative;margin: 0 auto;padding: 60px 6%;}
.contents p { margin-bottom:2em;}
.contact#sub #container { padding-top:60px;}
.main { width:66%;width : -webkit-calc(100% - 290px) ;   width : calc(100% - 290px) ;}
.side {width:220px;}
.contents .search-submit:before {background: url(../img/icon-search.svg) no-repeat !important;}
.contents input[type="search"].search-field,.contents .search-field {/* width:77%; */background: #F8F8F8 !important;padding: 0 .7em;line-height: 30px;margin-right: -5px;box-shadow: 2px 2px 0px 0px #dfdfdf inset;-moz-box-shadow:2px 2px 0px 0px #dfdfdf inset;-webkit-box-shadow:2px 2px 0px 0px #dfdfdf inset;-ms-box-shadow:2px 2px 0px 0px #dfdfdf inset;color: #333 !important;}
.b2c .contents .search-submit{background: #00469C;color: #fff;}
.b2b .contents .search-submit{background: #107c6f;color: #fff;}
@media screen and (max-width:900px){
	#container,.contact#sub #container { padding: 10% 0 0 0;}
	.contents {padding: 10% 5%;}
	.main, .side { width:100%;width : -webkit-calc(100%) ;   width : calc(100%) ;}
	.side { padding-top:3em;}
}

/*--- pan ------------------------------*/
#pan {padding: 0 0 30px;font-size: 77%;line-height: 100%;}
#pan li { display: block; float: left; padding-right:1em; }
#pan li a{/* padding-left: 1em; */padding-right: 1em;}
.breadcrumbs { margin-left:-1em;}
.breadcrumbs a {padding: 0 1em;}
#pan li span:after {content: " ＞"; }
@media screen and (max-width:767px){
	#pan { display:none;}
}


/*--- footer ------------------------------*/
#footer { background:#EEF3F7;}
.copy{font-size: 70%;color: #333;padding: 30px 0;}
.foot-nav li {font-size: 94%;display: inline-block;margin: 30px 2em 30px 0;}
.foot-nav li a {color: #333;}
.contact #footer .bg-white {background: none;}
.contact #footer .bg-white .wrapper { background:#fff;} 
.contact .copy { text-align:center;float:none;}
.contact .foot-nav { display:none;}
@media screen and (max-width:900px){
	#footer {}
	#footer .bg-white { padding-top:5%;}
	.contact #footer .bg-white { padding:0;}
	.copy{font-size:70%;padding: 5% 0;text-align: center;}
	.tel-link a {display: inline-block;}
	.foot-nav {text-align:center;}
	.foot-nav li {margin: 0 .5em;font-size:80%;}
	.pagetop {bottom:auto;top: 5em;right:0;z-index: 100000000000;}
}

/*--- pagetop ------------------------------*/
#pagetop {display: block;position: fixed;bottom: 40px;right: 0;z-index: 10000;width: 40px;height: 40px;background: #00469c;}
.b2b #pagetop {background:#107c6f;}
#pagetop a {display:block;width: 100%;height: 100%;position: relative;text-decoration: none;background: url(../img/icon-arrow-top.svg) no-repeat 50% 50%;}
@media screen and (max-width: 767px){
	#pagetop {bottom:10px;}
}