@charset "utf-8";

@import "/Portals/0/css/base.css";
@import "/Portals/0/css/contents.css";
@import "/Portals/0/css/contents_page.css";

/* ===========================================================
 html
=========================================================== */
/* font settings */
html,
body{color:#333;font-size:16px;line-height:1.8;font-weight:500;}
body{font-family:"Noto Sans JP", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "sans-serif";}
/* basic tags */
p{margin:0 0 2em;}
@media screen and (max-width:320px){
  html,
  body{font-size:14px;}
}

/* ===========================================================
 skin layouts
=========================================================== */
#blockskip{display:none;}
.DNNEmptyPane{margin:0 !important;padding:0 !important;}
.pc_area{display:block;}
.sp_area{display:none;}
.inner{max-width:calc(1200px + 10.3vw);margin:0 auto;padding:0 5.15vw;}
.content_middle{margin:80px 0 0;}
.content_bottom{position:relative;margin:60px 0 0;background:#EFF8F8;width:100%;}
._Index .inner{max-width:1680px;padding:0 40px;}
._Index .content01 > .inner,
._Index .content02 > .inner,
._Index .content03 > .inner{max-width:unset;padding:0;}
._Index .content_middle{margin-top:120px;}
._Index .content_bottom{margin-top:0;}
@media screen and (max-width:768px){
  .pc_area{display:none;}
  .sp_area{display:block;}
  .content_middle{margin-top:40px;}
  .content_bottom{margi-top:120px;}
}

/* ===========================================================
 headings
=========================================================== */
h1,h2,h3,h4,h5,h6{position:relative;margin-top:3em;margin-bottom:1em;text-align:left;font-weight:700;}
h1{padding:0 0 0.7em;font-size:280%;}
h1:after{display:none;}
h2{padding:0 0 0.7em;font-size:220%;}
h2:after{content:"";display:block;width:100%;height:0.2em;background:linear-gradient(to right, #008095 50%, #DFDFDF 50%);position:absolute;bottom:0;left:0;}
h3{padding:0 0 0.5em;font-size:160%;}
h3:after{content:"";display:block;width:100%;height:0.15em;background:linear-gradient(90deg, #008095 0%, #008095 15%, #DFDFDF 15%, #DFDFDF 100%);position:absolute;bottom:0;left:0;}
h4{padding:0 0 0 0.75em;font-size:140%;}
h4:before{content:"";position:absolute;left:0;top:50%;background:#008095;width:0.15em;height:calc(100% - 0.4em);transform:translateY(-50%);}
h5{padding:0 0 0 1.5em;font-size:120%;}
h5:before{content:"";width:1em;height:0.15em;background-color:#008095;position:absolute;left:0;top:0.75em;transform:translateY(-50%);}
h6{padding:0 0 0.5em;font-size:120%;}
.PagetitlePane{background:#E5F2F4;}
.PagetitlePane h1{margin:0;padding:1em 5.15vw;}
.content_middle .ContentPane > section.moduleSkin:first-of-type div[id$="_ModuleContent"] > h1:first-child,
.content_middle .ContentPane > section.moduleSkin:first-of-type div[id$="_ModuleContent"] > h2:first-child,
.content_middle .ContentPane > section.moduleSkin:first-of-type div[id$="_ModuleContent"] > h3:first-child,
.content_middle .ContentPane > section.moduleSkin:first-of-type div[id$="_ModuleContent"] > h4:first-child,
.content_middle .ContentPane > section.moduleSkin:first-of-type div[id$="_ModuleContent"] > h5:first-child,
.content_middle .ContentPane > section.moduleSkin:first-of-type div[id$="_ModuleContent"] > h6:first-child{margin-top:0;}

@media screen and (max-width:768px){
  h1{font-size:160%;}
  h2{font-size:150%;}
  h3{font-size:140%;}
}
/* ===========================================================
 header
=========================================================== */
#header{position:fixed;top:0;left:0;width:100%;margin:0;padding:0;background:#fff;box-shadow:0 0px 24px 0 rgba(0, 0, 0, 0.09);z-index:10;}
.editMode #header{position:static;}
.head{display:flex;justify-content:space-between;height:100%;}
.head .left{margin:0 1vw 0 30px;}
.head .right{display:flex;justify-content:flex-end;align-items:center;}
.logoGasPane,
.logoGasPane section,
.logoGasPane section div[id$="_ContentPane"],
.logoGasPane section div[id$="_ModuleContent"],
.GlobalNaviGasPane,
.GlobalNaviGasPane section,
.GlobalNaviGasPane section div[id$="_ContentPane"],
.GlobalNaviGasPane section div[id$="_ModuleContent"],
.HeadTopGasPane,
.HeadTopGasPane section,
.HeadTopGasPane section div[id$="_ContentPane"],
.HeadTopGasPane section div[id$="_ModuleContent"]{height:100%;}
#header .burgerMotion{display:none;}
/**/
.logo_area{display:flex;align-items:center;height:100%;padding:16px 0;}
.logo_area a{display:flex;align-items:center;}
.logo_area a:hover{text-decoration:none;}
.logo_area span,
.logo_area img{display:block;}
.logo_area .logo_text{margin:18px 3vw 0;padding:0.4em 0;font-size:134%;font-weight:700;line-height:1;color:#696A6A;white-space:nowrap;border-top:1px solid #696A6A;border-bottom:1px solid #696A6A;}
.globalNav{display:flex;align-items:center;margin-right:1vw;}
.globalNav ul{display:flex;justify-content:flex-end;flex-wrap:wrap;margin:0;padding:0;list-style:none;}
.globalNav ul li{padding-bottom:0;padding:0;margin:0;}
.globalNav ul li a{padding:7px 1vw;display:block;color:#333;font-size:114%;font-weight:700;line-height:1.2;white-space:nowrap;}
.globalNav ul li a:hover{color:#008095;text-decoration:none;opacity:1;}
.head_link_item{display:flex;height:100%;}
.head_link_item > * > a{display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:7em;height:100%;min-height:110px;padding:0.5em;color:#fff;white-space:nowrap;}
.head_link_item > * > a:hover{text-decoration:none;}
.head_link_item > .link_01 a{background:linear-gradient(#277737 0%,#87c12e 100%);}
.head_link_item > .link_02 a{background:linear-gradient(#004B57 0%,#008095 100%);}
@media screen and (max-width:1920px){
  .logo_area .logo_text{margin-right:0.25vw;font-size:1vw;}
}
@media screen and (max-width:1240px){
  .logo_area a{flex-direction:column;align-items:flex-end;}
  .globalNav ul li a{font-size:100%;}
  .logo_area .logo_text{font-size:12px;margin-top: 2vw;}
}
@media screen and (max-width:768px){
  #header{height:60px}
  .head .left{width:;calc(100% - 70px);margin:0 0 0 4%;}
  .head .right.burger_item.main{position:absolute;top:60px;display:none;flex-direction:column-reverse;width:100%;background:#fff;z-index:10;}
  #header .burgerMotion{display:block;z-index:10;}
  #header .burgerMotion p span,
  #header .burgerMotion p span:before,
  #header .burgerMotion p span:after{background-color:#008095;}
  #header .burgerMotion.open p span{background-color:rgba(0,128,149,0);transition:background 0.25s ease-in-out 0.0s;}
  #header .burgerMotion.open p span:before{transform:rotate(45deg);margin-top:0;transition:transform ease-in-out 0.25s 0.25s,margin ease-in-out 0.25s;}
  #header .burgerMotion.open p span:after{transform:rotate(-45deg);margin-top:0;transition:transform ease-in-out 0.25s 0.25s,margin ease-in-out 0.25s;}
  #header .burger-overlay{position:fixed;top:60px;width:100%;height:calc(100% - 60px);background-color:rgba(0,0,0,0.5);}
  .logo_area{padding:0;}
  .logo_area a{flex-direction:row;align-items:center;}
  .logo_area img{max-height:30px;}
  .logo_area .logo_text{font-size:12px;margin-left:9vw;margin-right:0;margin-top: 1.5vw;}
  .globalNav{display:block;margin:0;}
  .globalNav ul{display:block;}
  .globalNav ul li{border-top:1px solid #eee;}
  .globalNav ul li a{padding:1em 5vw;font-weight:500;}
  .head_link_item > div{flex:1;}
  .head_link_item > * > a{flex-direction:row;min-height:unset;}
  .head_link_item > * > a img{width:40px;margin:0 5px 0 0;}
}
@media screen and (max-width:320px){
  #header{height:100px;}
  .logo_area a{flex-direction:column;}
  .head .right.burger_item.main{top:100px;}
  #header .burger-overlay{top:100px;height:calc(100% - 100px);}
}

/* ===========================================================
 breadcrumb
=========================================================== */
.breadcrumb .inner{max-width:unset;}
.breadcrumb [id$="_lblBreadCrumb"]{display:flex;flex-wrap:wrap;align-items:center;padding:1em 0.25em;color:#666;font-size:85%;}
.breadcrumb span,
.breadcrumb a{display:block;margin:0;color:#666;text-decoration:none;}
.breadcrumb a:hover{color:#008095;opacity:1;}
.breadcrumb span > .separator{position:relative;margin:0 0.75em;overflow:hidden;white-space:nowrap;text-indent:100%;}
.breadcrumb span > .separator:before{position:absolute;content:"";top:0;bottom:0;left:-2px;width:7px;height:7px;margin:auto;border-top:1px solid #008095;border-right:1px solid #008095;transform:rotate(45deg);}

.breadcrumb [id$="_lblBreadCrumb"]>a:first-child,
.breadcrumb [id$="_lblBreadCrumb"]>a:first-child + span{display:none;}
.breadcrumb [id$="_lblBreadCrumb"]>a:first-child + span + a{position:relative;display:block;width:3em;overflow:hidden;white-space:nowrap;text-indent:5em;}
.breadcrumb [id$="_lblBreadCrumb"]>a:first-child + span + a:before{content:"ホーム";position:absolute;top:0;left:0;text-indent:0;}

/* ===========================================================
 footer
=========================================================== */
#footer{padding:30px 0 46px;opacity:1 !important;}
.copyright{margin:0;text-align:center;}
.copyright > span{font-size:75%;color:#849294;}
.pagetop{position:fixed;right:5vw;bottom:30px;display:block;margin:0;padding:0;z-index:10;}
.pagetop a{display:block;overflow:hidden;width:50px;height:50px;border-radius:50%;background:#008095;white-space:nowrap;text-indent:100%;}
.pagetop a:before{position:absolute;content:"";top:43%;right:0;left:0;transform:rotate(-45deg);width:15px;height:15px;margin:auto;border-top:2px solid #fff;border-right:2px solid #fff;}
/**/
.footTxt{display:flex;justify-content:center;margin:0;padding:0;list-style:none;;}
.footTxt li{margin:0;padding:0;}
.footTxt li a{display:block;padding:0 1.5vw;font-size:94%;font-weight:400;color:#333;}
.footTxt li a:hover{color:#5fbfbd;text-decoration:none;opacity:1;}
.foot_logo{margin:32px 0 9px;text-align:center;}
@media screen and (max-width:768px){
  .pagetop.in,
  .pagetop{right:20px;bottom:20px;transition:all 0.3s ease;}
  .footTxt{flex-direction:column;align-items:center;}
  .footTxt li{margin:0.5em 0;}
}

/* ===========================================================
 basic items
=========================================================== */
.linkBtn a,
a.linkBtn{background-color:#008095;border-radius:0;padding:1.25em 4em 1.25em 3em;}
 .linkBtn a:before,
a.linkBtn:before{content:"";}
.linkBtn.shrink a,
a.linkBtn.shrink{padding:0.5em 2.5em 0.5em 1.75em;}
.linkBtn.shrink a:before,
a.linkBtn.shrink:before{right:1em;}
.linkBtn a[download]:before,
a.linkBtn[download]:before{content:"";right:1em;width:18px;height:18px;background:url(/Portals/0/images/gasequip/common/ico_download.png) center no-repeat;border:none;transform:none;}
.linkBtn a[download] .js-fileicon,
a.linkBtn[download] .js-fileicon{display:none;}
.linkTxt a:before,
a.linkTxt:before{background:#008095 url(/Portals/0/images/common/ico_arrow.png) 6px center no-repeat;z-index:auto;}
.linkInpage a:before,
a.linkInpage:before{border:2px solid #008095;border-top:none;border-left:none;}
.linkInpage a:hover,
a.linkInpage:hover{color:#008095;}
.txtLarge{font-size:150%;line-height:1.4;}
.txtXLarge{font-size:180%;line-height:1.4;}
p.txtLarge{margin-bottom:1em;}
p.txtXLarge{margin-bottom:1em;}
.colorBlue{color:#008095;}
.boxColored{background:#E5F2F4;}
.boxColored.boxColorGray{background:#f8f8f8;}
.boxColored.boxColorBlue{background:#008095;}
.boxColored.boxColorBlue *{color:#fff;}
.boxBordered{background:#fff;border:10px solid #E5F2F4;}
.boxBordered.boxColorBlue{border-color:#008095;}
* + .boxBordered,
* + .boxColored{margin-top:inherit;}
.layoutItem.col2 > * > *:last-child,
.layoutItem.col3 > * > *:last-child,
.layoutItem.col4 > * > *:last-child,
.layoutItem.col5 > * > *:last-child,
.layoutItem.col6 > * > *:last-child,
.layoutItem.col7 > * > *:last-child,
.layoutItem.col8 > * > *:last-child{margin-bottom:0;}
.layoutItem > * > *:first-child{margin-top:0;}
.layoutItem > * > *:last-child{margin-bottom:0;}

@media screen and (max-width:768px){
  .linkBtn a,
  a.linkBtn{padding-left:1em;padding-right:2em;}
  .linkInpage a,
  a.linkInpage{padding-top:1em;border-top:1px solid #999;}
  .linkBtn a[download]:before,
  a.linkBtn[download]:before{right:12px;}
  .linkBtn.inquiryBtn a,
  a.linkBtn.inquiryBtn{padding:3em 1em 1em 1em;font-size:150%;}
  .linkBtn.inquiryBtn a:before,
  a.linkBtn.inquiryBtn:before{top:1em;bottom:auto;left:0;right:0;margin:auto;}
  .txtLarge{font-size:130%;}
  .txtXLarge{font-size:150%;}
  .layoutItem.col2 > *,
  .layoutItem.col3 > *,
  .layoutItem.col4 > *,
  .layoutItem.col5 > *,
  .layoutItem.col6 > *,
  .layoutItem.col7 > *,
  .layoutItem.col8 > *{margin-bottom:16%;}
  table.tableBasic:not(.notBlock):not(.scrollTable){border-top:none;}
  table.tableBasic:not(.notBlock):not(.scrollTable) > tbody > tr > th,
  table.tableBasic:not(.notBlock):not(.scrollTable) > tbody > tr > td{border-top:1px solid #999;}
}