@charset "UTF-8";
/* 00.0 Reset */a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}/* 00.1 Normalize */html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-font-smoothing:subpixel-antialiased}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}abbr[title]{border-bottom:1px dotted}b,optgroup,strong{font-weight:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}svg:not(:root){overflow:hidden}hr{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}code,kbd,pre,samp{font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}select{text-transform:none}button{overflow:visible}button,input,select,textarea{max-width:100%}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default;opacity:.5}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input[type=checkbox],input[type=radio]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin-right:.4375em;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #d1d1d1;margin:0 0 1.75em;padding:.875em}fieldset>:last-child{margin-bottom:0}textarea{overflow:auto;vertical-align:top}/* 00.2 Typography */address,blockquote,cite,dfn,em,i{font-style:italic}code,ins,mark{padding:.125em .25em}body,button,input,select,textarea{color:#222;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:62.5%;line-height:1.7;letter-spacing:1px}h1,h2,h3,h4,h5,h6{clear:both;font-weight:300;text-rendering:auto}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:""}blockquote cite,blockquote small{display:block}blockquote cite:before,blockquote small:before{content:"\2014\00a0"}blockquote cite,blockquote em,blockquote i{font-style:normal}blockquote b,blockquote strong{font-weight:400}code,kbd,pre,samp,tt,var{font-family:Inconsolata,monospace}pre{border:1px solid #333;max-width:100%;overflow:auto;padding:1.75em;white-space:pre;white-space:pre-wrap;word-wrap:break-word}code{background-color:#d1d1d1}abbr,acronym{border-bottom:1px dotted #d1d1d1;cursor:help}ins,mark{background:#007acc;color:#fff;text-decoration:none}big{font-size:125%}/* 00.3 Elements */body,table{width:100%}img,td{vertical-align:middle}a,a:active,a:focus,a:hover{text-decoration:none}html{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}*,:after,:before{-webkit-box-sizing:inherit;-moz-box-sizing:inherit;box-sizing:inherit}body,html{height:100%}hr{background-color:#333;border:0;height:1px}ol,ul{list-style:none}img{height:auto;max-width:100%}del{opacity:.8}table,td,th{border:none}table{border-spacing:0;table-layout:fixed}caption,td,th{font-weight:400;text-align:left}th{font-weight:700}td,th{padding:1.5em}::-webkit-input-placeholder{color:#ccc}:-moz-placeholder{color:#ccc}::-moz-placeholder{color:#ccc;opacity:1}:-ms-input-placeholder{color:#ccc}a{color:#1982d1}::selection{background:#3db5e4;color:#fff;text-shadow:none}::-moz-selection{background:#3db5e4;color:#fff;}

/* ------------------------------
 * 00.4 Class and ID 
------------------------------ */
.left {float:left;}
.right {float:right;}
.clear {clear:both;}
.inlineBlock {display:inline-block; *display:inline; *zoom:1;}
/*font*/
p {font-size:160%;}
b,
strong {font-weight:normal}
.bold {font-weight:bold;}
/*image*/
.img {text-align:center;}
img {user-select:none; -webkit-user-select:none; -ms-user-select: none; -moz-user-select:none; -khtml-user-select:none; -webkit-user-drag:none; -khtml-user-drag:none;}
img::selection {background:none;color:none;text-shadow:none}
img::-moz-selection {background:none;color:none}
/*hover*/
a {color:#3db5e4;}
a,
a:before,
a:after {transition:all .2s ease; -webkit-transition:all .2s ease;}
/*hover underline*/
a.link-blue {position:relative; display:inline-block;}
a.link-blue:after {position:absolute; top:1.4em; left:0; display:inline-block; content:""; width:0%; height:2px; background:#3db5e4;}
a.link-blue:hover:after {width:100%;}
a.link-blue.arrow:before {content:''; position:absolute; right:-13px; top:10px; width:11px; height:11px; border:2px solid; border-color:#3db5e4 #3db5e4 transparent transparent; transform:rotate(45deg); opacity:0;}
a.link-blue.arrow:hover:before {animation:footerLinks .8s ease-in; opacity:1;}
/*clearfix*/
.clearfix:after {visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0;}
* html .clearfix {zoom:1;}
*:first-child+html .clearfix {zoom:1;}

/* ------------------------------
 * 01.0 Structure 
------------------------------ */
body {}
#header,
#footer {z-index:9999; position:relative; width:100%; min-width:1080px;}
#header {height:170px; text-align:center;}
/*pc min-fix*/
#title,
.lead,
.article {width:100%; min-width:1080px;}
/*pc 1080-fix*/
.area,
.section {position:relative; width:1080px; margin:0 auto;}
/*column*/
.area.column {width:100%;}
/*footer-overlay*/
.article.overlay {padding-bottom:420px;}
#footer {margin-top:-320px;}
/*common -> text !未整理*/
.area {margin-top:15px;}
.area.single {margin-top:45px;}
.area.single.next {margin-top:20px;}
.caption-line{margin-top:45px;}
.column3.left {margin-right:36px;}


/* ------------------------------
 * 01.1 Header 
------------------------------ */
#logo {width:180px; height:130px; margin:0 auto; padding:10px 0;}
/*navigation*/
#header-navigation {position:relative; max-width:1080px; margin:0 auto; line-height:1;}
/*nav-main*/
.nav-main {float:left;}
.nav-main a {position:relative; display:inline-block; padding:5px; font-size:160%; color:#222;}
.nav-main a:before {position:absolute; bottom:-2px; left:50%; display:inline-block; content:""; width:0%; height:2px; background:#3db5e4;}
.nav-main a:hover {color:#3db5e4;}
.nav-main a:hover:before {left:0; width:100%;}
#navigation-gas a:before {background:#ea9b15;}
#navigation-gas a:hover {color:#ea9b15;}
#navigation-reform a:before {background:#7fbe26;}
#navigation-reform a:hover {color:#7fbe26;}
/*main-nav*/
.nav-main > a {margin:15px 18px 20px;}
/*nav-sub*/
.nav-sub {display:none; position:absolute; padding-bottom:10px; top:60px; text-align:left; background:rgba(255,255,255,.9); border-radius:0 0 5px 5px;}
.nav-sub a {margin:15px 18px 5px;}

/* ------------------------------
 * 01.1B Fixed Menu 
------------------------------ */
.headerContain {position:fixed; top:-170px; left:0; z-index:20000; width:100%; padding:10px; height:70px; background:rgba(255,255,255,.9); transition:all .3s ease-in;}
.headerContain .area {margin-top:0;}
.fixlogo {width:82px;}
.headerContain.fixed {top:0;}
.headerContain .nav-main > a,
.headerContain .nav-main > .nav-sub a {font-size:150%;}
.headerContain .nav-main > a {margin:15px 18px 10px;}
.headerContain .nav-main > .nav-sub a {margin:5px 18px;}
.headerContain .nav-main a:before {bottom:5px;}
#fixmenu-gas a:before {background:#ea9b15;}
#fixmenu-gas a:hover {color:#ea9b15;}
#fixmenu-reform a:before {background:#7fbe26;}
#fixmenu-reform a:hover {color:#7fbe26;}
/*index only*/
body.home #fixmenu-navigation {margin-right:50px;}
body.home .headerContain .nav-main > a {margin:15px 12px 10px;}

/* ------------------------------
 * 01.2 Footer 
------------------------------ */
#footer {line-height:1; letter-spacing:1px;}
#footer .area {margin-top:0;}
/*nav > href*/
#footer a {position:relative; display:inline-block; color:#fff;}
#footer a:after {position:absolute; left:0; bottom:-3px; display:inline-block; content:""; width:0%; height:2px; background:#fff;}
#footer a:hover:after {width:100%;}
#footer a.main:hover:after {width:0%;}
#footer a:before {content:''; position:absolute; right:-13px; top:1px; width:11px; height:11px; border:2px solid; border-color:#fff #fff transparent transparent; transform:rotate(45deg); opacity:0;}
#footer a:hover:before {animation:footerLinks .8s ease-in; opacity:1;}
@keyframes footerLinks {
0% {right:-13px;}
25% {right:-18px;}
50% {right:-13px}
75% {right:-18px}
100% {right-:13px}
}
/*logo*/
#footer {background-image:url(/img/footer_bg.png); background-size:2000px 800px; background-repeat:no-repeat; background-position:center top;}
#footer-head {min-height:220px;}
.footer-logo {position:absolute; top:100px; left:30px; font-size:140%; color:#fff;}
.footer-logo span {padding-left:.5em;}
.footer-logo strong {display:block; width:250px; height:40px; margin:0 auto; text-indent:-9999px; background-image:url(/img/footer_logo.png); background-repeat:no-repeat; background-position:left top; background-size:250px 25px;}
/*nav*/
#footer nav {padding-bottom:60px;}
#footer ul {float:left; width:20%; font-size:130%;}
#footer ul.last {width:18%; margin-left:2%;}
#footer li {padding-bottom:14px;}
#footer ol {margin:10px 30px 0 0; padding-top:14px; border-top:1px solid #fff;}
#footer .sub {padding-left:1em;}
/*banner*/
.footer-banner {width:200px; height:auto; padding-top:25px;}
.footer-banner,
.footer-banner img {border-radius:5px;}
#footer .footer-banner a:before,
#footer .footer-banner a:after {display:none;}
.footer-banner a:hover {filter:brightness(1.1);}
/*copyright*/
#copyright {width:100%; padding:15px 10px; background:#3db5e4;}
#copyright a {font-size:120%;}
#copyright p {font-size:100%; color:#eee;}

/* ------------------------------
 * 01.4 Page Common (Title) 
------------------------------ */
#title {z-index:100; position:relative; margin-top:40px; background-position:center top; background-color:#fff;}
#title ,
#title:before,
#title:after {height:220px; background-size:1300px 220px; background-repeat:no-repeat;}
#title:before,
#title:after {z-index:110; position:absolute; content:""; overflow:hidden; width:calc(50% - 540px);}
#title:before {top:-20px; right:calc(50% + 540px); background-position:right top; background-image:url(/img/title_bg_blue_l.png);}
#title:after {top:20px; left:calc(50% + 540px); background-position:left top; background-image:url(/img/title_bg_blue_r.png);}
/*color*/
#title.gas:before {background-image:url(/img/title_bg_gas_l.png);}
#title.gas:after {background-image:url(/img/title_bg_gas_r.png);}
#title.reform:before {background-image:url(/img/title_bg_reform_l.png);}
#title.reform:after {background-image:url(/img/title_bg_reform_r.png);}
/*image*/
#title.gas {background-image:url(/img/title_bg_gas.png);}
#title.reform {background-image:url(/img/title_bg_reform.png);}
#title.base {background-image:url(/img/title_bg_base.png);}
#title.about {background-image:url(/img/title_bg_about.png);}
#title.corporate {background-image:url(/img/title_bg_corporate.png);}
#title.recruit {background-image:url(/img/title_bg_recruit.png);}
#title.privacy {background-image:url(/img/title_bg_privacy.png);}
#title.news {background-image:url(/img/title_bg_news.png);}
#title.blog {background-image:url(/img/title_bg_blog.png);}
#title.contact {background-image:url(/img/title_bg_contact.png);}
/*title*/
#title h2 {z-index:5; position:absolute; top:45px; left:calc(50% - 225px); width:450px; height:130px; text-align:center; background-image:url(/img/title_bg_text.png); background-size:450px 130px; background-repeat:no-repeat;}
#title h2 strong,
#title h2 span {display:block;}
#title h2 strong {padding-top:39px;}
#title h2 span {padding-top:19px; font-size:120%; font-weight:bold; color:#999; letter-spacing:2px;}

/* ------------------------------
 * 01.5 Page Common (Contain)
------------------------------ */
.article.bg-gray {background:#eee;}
.article.bg-blue {background:#e1f1fc;}
.article.bg-dotted {background:#fff; background-position:0 0, 5px 5px; background-size:10px 10px;
background-image:radial-gradient(#e1f1fc 20%, transparent 0), radial-gradient(#e1f1fc 20%, transparent 0);}
.article.bg-dotted-blue{background-position:0 0,5px 5px;background-size:10px 10px;background-image:radial-gradient(#4cbeeb 20%,transparent 0),radial-gradient(#4cbeeb 20%,#3db5e4 0)}
.article.bg-stripe {background-image:url(/img/bg_stripe.png); background-size:100px;}
.article.bg-jima {background-position:center bottom; background-size:100% auto; background-image: url("/img/index_blog_bg.jpg"); background-repeat:no-repeat;}
/*margin*/
.article.next,
.section-next {padding-bottom:60px;}
/*1080-area*/
.section.bg-white,
.area.bg-white {padding:35px; background:#fff; border:1px solid; border-radius:5px;}
.area.bg-white {border-color:#e1f1fc;}
.section.bg-white {border-color:#e9e9e9}
.area.bg-gray {padding:35px; background:#eee;}
.section.bg-gradient-gray {background:linear-gradient(to right, #eee 0%, #fefefe 60%, #eee 100%);}
/*column*/
.column2 {width:520px;}
.column2.center {margin:auto;}
.column3 {width:312px;}
.column4 {width:240px;}

/* ------------------------------
 * 01.6 Page Common (Lead + caption)
------------------------------ */
.lead {height:140px; text-align:center; background:#fff;}
.lead strong,
.lead span {display:block;}
.lead strong {padding-top:45px;}
.lead span {padding-top:15px; font-size:120%; color:#3db5e4; letter-spacing:2px;}
.lead span.gas {color:#ea9b15;}
.lead span.reform {color:#7fbe26;}
/*lead-line*/
.lead-line {padding-top:28px; height:80px; text-align:center; background:#3db5e4;}
.lead-line.gas {background:#ea9b15;}
.lead-line.reform {background:#7fbe26;}
/*lead-text*/
.lead-contact {background:#3db5e4; color:#fff; font-size:210%; font-weight:bold; line-height:80px; text-align:center; letter-spacing:3px;}
.lead-contact.gas {background-color:#ea9b15;}
.lead-contact.reform {margin-bottom:40px; background:#7fbe26;}
/*caption*/
.caption-box {border-radius:5px; padding:5px; font-size:180%; letter-spacing:3px; text-align:center; background:#fff; border:1px solid #e1f1fc;}
.caption-box.blue {background:#3db5e4; color:#fff; border-color:#3db5e4;}
.caption-box.sky {background:#e1f1fc; font-weight:bold;}
.caption-box.gas {border-color:#faebd0;}
/*caption-line*/
.caption-line {text-align:center; font-size:200%; font-weight:bold; letter-spacing:3px;}
.caption-line span {z-index:10; position:relative; display:inline-block;}
.caption-line span:before {z-index:-1; content:""; position:absolute; bottom:2px; left:-15px; right:-15px; height:12px;}
#gas .caption-line span:before {background:#fff9b1;}
#reform .caption-line span {min-width:200px;}
#reform .caption-line span:before {background:#e4f5cc;}

/* ------------------------------
 * 01.5 Page Common = elements
------------------------------ */
/*text*/
.lead-text {padding-top:45px; font-size:160%; font-weight:500; text-align:center;}
.lead-text.normal {font-weight:normal;}
/*attention*/
.attention-list {font-size:140%;}
.attention-list b,
.attention-list span {display:table-cell}
.attention-list b {white-space:nowrap; padding-right:.5em;}
/*Botton > common*/
.link-botton {text-align:center;}
.link-botton a {position:relative; display:inline-block; line-height:40px; margin:0 auto; padding:0 70px; font-size:180%; background:#3db5e4; color:#fff; border-radius:40px; border:2px solid #3db5e4;}
.link-botton a:after {content:''; position:absolute; top:13px; right:15px; width:14px; height:14px; border:2px solid; border-color:#fff #fff transparent transparent; transform:rotate(45deg);}
.link-botton a:hover {background:#fff; color:#3db5e4;}
.link-botton a:hover:after {border-color:#3db5e4 #3db5e4 transparent transparent; animation:arrow .7s ease-in .2s;}
.link-botton.column1 {padding-top:45px;}
.link-botton.column1.inbox {padding-top:30px;}
.link-botton.column2 {padding-top:30px;}
.link-botton.invert {padding-top:65px;}
.link-botton.invert a {background:#fff; color:#3db5e4;}
.link-botton.invert a:after {border-color:#3db5e4 #3db5e4 transparent transparent;}
/*Botton > blog*/
.link-botton.blog {padding-top:60px;}
.link-botton.blog a {background-color:#fff; border-color:#fff; color:#3db5e4}
.link-botton.blog a:hover {background-color:#3db5e4; color:#fff;}
.link-botton.blog a:after {border-color:#3db5e4 #3db5e4 transparent transparent;}
.link-botton.blog a:hover:after {border-color:#fff #fff transparent transparent;}
/*Botton > jima*/
.link-botton.jima {padding-top:60px;}
.link-botton.jima a {background-color:#3db5e4; border-color:#3db5e4; color:#fff}
.link-botton.jima a:hover {background-color:#fff; color:#3db5e4;}
.link-botton.jima a:after {border-color:#fff #fff transparent transparent;}
.link-botton.jima a:hover:after {border-color:#3db5e4 #3db5e4 transparent transparent;}
/*Botton > covid*/
.link-botton.covid {padding-top:60px;}
.link-botton.covid a {padding:0 50px; background-color:#3db5e4; border-color:#3db5e4; color:#fff}
.link-botton.covid a:hover {background-color:#fff; color:#3db5e4;}
.link-botton.covid a:after {border-color:#fff #fff transparent transparent;}
.link-botton.covid a:hover:after {border-color:#3db5e4 #3db5e4 transparent transparent;}
/*Botton > reform*/
.link-botton.reform {padding:30px;}
.link-botton.reform.inner {padding:0 30px 50px;}
.link-botton.reform a {padding:0 60px 0 75px; background-color:#7fbe26; border-color:#7fbe26; background-image:url(/img/icon_mail.png); background-size:36px; background-position:3px 2px; background-repeat:no-repeat;}
.link-botton.reform a:hover {background-color:#fff; background-image:url(/img/icon_mail_reform.png); color:#7fbe26;}
.link-botton.reform a:hover:after {border-color:#7fbe26 #7fbe26 transparent transparent;}
@keyframes arrow {
0% {right:15px}
25% {right:10px}
50% {right:15px}
75% {right:10px}
100% {right:15px}
}
/*tel-box*/
.call-box {padding:30px 0 30px; text-align:center; line-height:1;}
.call-box .tel {font-size:400%; font-weight:bold; color:#3db5e4; letter-spacing:3px;}
.call-box.reform .tel {color:#7fbe26;}
.call-box.gas .tel {color:#ea9b15;}
.call-box .tel span {display:inline-block; padding-left:50px; background-image:url(/img/icon_tel.png); background-size:40px; background-position:left top; background-repeat:no-repeat;}
.call-box .sup {padding-top:10px; font-size:140%; letter-spacing:2px;}
.call-box .sup-gas {padding-top:17px; font-size:140%;}
.call-box .sup-gas span {padding:3px 10px 3px 18px; color:#fff; background-color:#ea9b15; border-radius:20px 0 0 20px;}
.call-box .sup-gas.blue span {background-color:#3db5e4;}
.call-box .sup-gas b {padding:3px 15px 3px 12px; background-color:#fff; border-radius:0 20px 20px 0;}
/* pagenav */
.pagenavi {clear:both; width:100%; padding:30px 0 20px 0; text-align:center;}
.pagenavi a,
.pagenavi span {margin:2px; padding:6px 10px; font-size:15px!important; font-weight:bold; border:1px solid #3db5e4; background:#fff;}
.pagenavi a {position:relative; color:#3db5e4;}
.pagenavi a:hover {background:#3db5e4; color:#fff; border:1px solid #3db5e4;}
.pagenavi span.pages {background:#eee;}
.pagenavi span.current {background:#3db5e4; border-color:#3db5e4; color:#fff;}
/* prev-next */
.pagenavi a.next {padding-right:24px;}
.pagenavi a.prev {padding-left:24px;}
.pagenavi a.next:after,
.pagenavi a.prev:after {content:''; position:absolute; top:11px; width:9px; height:9px; border:2px solid; transform:rotate(45deg);}
.pagenavi a.next:after {right:12px; border-color:#3db5e4 #3db5e4 transparent transparent;}
.pagenavi a.prev:after {left:12px; border-color:transparent transparent #3db5e4 #3db5e4;}
.pagenavi a.next:hover:after {border-color:#fff #fff transparent transparent; animation:naviNext .7s ease-in;} 
.pagenavi a.prev:hover:after {border-color:transparent transparent #fff #fff; animation:naviPrev .7s ease-in;} 
@keyframes naviNext {
0% {right:12px}
25% {right:9px}
50% {right:12px}
75% {right:9px}
100% {right:12px}
}
@keyframes naviPrev {
0% {left:12px}
25% {left:9px}
50% {left:12px}
75% {left:9px}
100% {left:12px}
}

/* ------------------------------
 * 10.0-A Index slider / Old
------------------------------ */
#index-slider {position:relative; width:100%; max-width:1280px; height:580px; margin:30px auto 0;}
@media screen and (max-width:1300px) {.index-wrapper {overflow-x:hidden;}}
.indexImgBox,
.indexImgBox {transition:opacity 1s ease-in; -webkit-transition:opacity 1s ease-in;}
/*image*/
.indexImgBox {position:absolute; top:0; width:100%; height:580px; background-size:1280px 580px; background-position:center top; background-repeat:no-repeat; opacity:0; z-index:10;}
.indexImgBox.active {opacity:1; z-index:100;}
#imgCovid19 {background-image:url(/img/index_slider_covid19.png);}
#img01 {background-image:url(/img/index_slider_image01.png);}
#img02 {background-image:url(/img/index_slider_image02.png);}
#img03 {background-image:url(/img/index_slider_image03.png);}
#img04 {background-image:url(/img/index_slider_image04_2020.png);}
#img05 {background-image:url(/img/index_slider_image05_2020.png);}
/*svg*/
#svgArea {position:absolute; z-index:999; top:180px; left:calc(50% - 280px); width:580px; height:120px; opacity:1; background-image:url(/img/index_slider_cap_bg.png); background-size:580px 120px; background-position:center top; background-repeat:no-repeat; transition:opacity .2s ease;}
#svgArea.hide {opacity:0;}
#svgArea .svgBox {display:none; position:absolute; top:30px; left:13px; z-index:1000; width:180px; height:60px;}
#svg01 .st1,
#svg02 .st2,
#svg03 .st3,
#svg04 .st4 {fill:none; stroke:#fff; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1500; stroke-dashoffset:1500;}
#svg01 .st1 {stroke-width:5; stroke-miterlimit:5;}
#svg02 .st2 {stroke-width:7; stroke-miterlimit:10;}
#svg03 .st3 {stroke-width:6; stroke-miterlimit:10;}
#svg04 .st4 {stroke-width:6; stroke-miterlimit:10;}
/*jima*/
#indexBanner {z-index:20001; position:relative; width:100%; max-width:1280px; height:1px; margin:auto;}
#yearBox {position:absolute; display:table-cell; text-align:center; vertical-align:middle; top:-80px; right:-20px; width:150px; height:150px; background-image:url(/img/index_banner_jima.png); background-size:0; background-position:50%; background-repeat:no-repeat; transition:all .3s ease-in;}
#yearBox:hover {filter:brightness(1.2);}
/*menu*/
.area.index-main-menu {position:relative; z-index:5000; margin-top:-100px;}
.area.index-main-menu a {display:block; position:relative; color:#222;}
.area.index-main-menu img {transition:all .2s ease-in; -webkit-transition:all .2s ease-in;}
.area.index-main-menu .botton {position:absolute; top:0; left:0; width:200px; height:200px;}
.area.index-main-menu .botton img {position:absolute; z-index:100; top:15px; left:0; width:170px; height:170px;}
.area.index-main-menu .img {position:relative; z-index:50;}
.area.index-main-menu p {padding:5px 0 0 88px;}
.area.index-main-menu a:hover .img {filter:brightness(110%)}
.area.index-main-menu a:hover .botton img {top:5px; left:-10px; width:190px; height:190px;}
.area.index-main-menu .img:before {position:absolute; z-index:1000; top:80px; right:35px; content:''; width:40px; height:40px; border:3px solid transparent; transform:rotate(45deg)}
.area.index-main-menu a:hover .img:before {animation:bannerArrow .7s ease-in;}
.area.index-main-menu a:hover .img.gas:before {border-color:#ea9b15 #ea9b15 transparent transparent;}
.area.index-main-menu a:hover .img.reform:before {border-color:#7fbe26 #7fbe26 transparent transparent;}
@keyframes bannerArrow {
0% {right:35px}
25% {right:25px}
50% {right:35px}
75% {right:25px}
100% {right:35px}
}

/* ------------------------------
 * 10.0-B Index Movie / NEW
------------------------------ */
.bg-movie {overflow:hidden; position:relative; text-align:center; margin:30px auto 0;}
#movieArea {position:relative; width:1280px; height:600px; margin:auto;}
.bg-mask {z-index:20; position:absolute; top:0; left:0; width:1280px; height:600px; background-size:1280px 600px; background-position:center bottom; background-repeat:no-repeat; background-image:url("/movie/index_move_mask.png?004");}
video {z-index:10; position:absolute; top:0; left:calc(50% - 640px); width:1280px; height:600px;}
@media screen and (max-width:1280px) {
	.bg-movie,
	#movieArea,
	.bg-mask {width:100%;}
}

/* ------------------------------
 * 10.0-C Index slider / NEW
------------------------------ */
#pickup {margin-top:50px;}
#pickup a:focus {outline:none;}
.pickup-box {width:360px; padding:0 15px;}
.pickup-photo {position:relative; overflow:hidden; display:block; width:330px; height:220px; background-size:330px 220px; background-position:center; background-repeat:no-repeat; border-radius:5px;}
.pickup-photo:hover {background-size:360px 240px; filter:brightness(1.1)}
.pickup-title {position:absolute; bottom:0; left:0; right:0; line-height:1; padding:12px 20px; font-size:180%; color:#fff; background-color:rgba(45,179,232,.9);}
.pickup-text {position:relative; display:block; padding:10px 5px 0 5px; font-size:180%; font-weight:500;}
.pickup-text span {position:relative; display:inline; padding-right:25px; transition:all .2s ease-in; border-bottom:2px solid transparent;}
.pickup-text span:hover {border-color:#3db5e4;}
.pickup-text span:before {position:absolute; content:''; right:0; bottom:3px; width:16px; height:16px; background-image:url("/img/icon_exlink.png"); background-size:contain; background-position:left top; background-repeat:no-repeat;}
/*aarrow*/
#pickup .slick-arrow {position:absolute; z-index:1000; top:78px; width:60px; height:60px; text-indent:-9999px; background-color:#3db5e4; border:none; border-radius:50%; transform:none;}
#pickup .slick-prev {left:calc(50% - 210px);}
#pickup .slick-next {right:calc(50% - 210px);}
#pickup .slick-prev:hover {animation:indexPrev .7s ease-in;}
#pickup .slick-next:hover {animation:indexNext .7s ease-in;}
@keyframes indexPrev {
0% {left:calc(50% - 210px);}
25% {left:calc(50% - 215px);}
50% {left:calc(50% - 210px);}
75% {left:calc(50% - 215px);}
100% {left:calc(50% - 210px);}
}
@keyframes indexNext {
0% {right:calc(50% - 210px);}
25% {right:calc(50% - 215px);}
50% {right:calc(50% - 210px);}
75% {right:calc(50% - 215px);}
100% {right:calc(50% - 210px);}
}
#pickup .slick-arrow:before {content:''; position:absolute; top:20px; width:20px; height:20px; border:3px solid; border-color:#fff #fff transparent transparent;}
#pickup .slick-prev:before {transform:rotate(-135deg); right:15px;}
#pickup .slick-next:before {transform:rotate(45deg); left:15px;}

/* ------------------------------
 * 10.0-D Index Shima Box / NEW
------------------------------ */
.shima {display:flex; justify-content:space-between; flex-wrap:wrap; width:1080px; margin:auto; padding-top:20px;}
.shima__block {width:32%; padding-top:30px;}
.shima__block--only {width:32%; padding-top:10px;}
[class^='shima__caption'] {position:relative; padding:3px; text-align:center; font-size:180%; font-weight:500; color:#fff; background-color:#3db5e4; border-radius:5px;}
[class^='shima__caption'].new:before {display:block; position:absolute; top:-14px; right:-5px; width:60px; height:60px; content:''; background-repeat:no-repeat; background-position:50%; background-size:cover;}
.shima__caption--home:before {background-image:url("/img/icon_new_home.png");}
.shima__caption--blog:before {background-image:url("/img/icon_new_blog.png");}
.shima__caption--example:before {background-image:url("/img/icon_new_example.png");}
.shima__caption--solution:before {background-image:url("/img/icon_new_solution.png");}
.shima__caption--staff:before {background-image:url("/img/icon_new_staff.png");}
.shima__caption--trivia:before {background-image:url("/img/icon_new_trivia.png");}
.shima__caption--recommend:before {background-image:url("/img/icon_new_recommend.png");}
.shima__caption--entertainment:before {background-image:url("/img/icon_new_entertainment.png");}
[class^='shima__photo'] {position:relative; display:block; padding-top:15px;}
.shima__photo:before {content:''; position:absolute; top:0; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position:50%; background-size:cover; background-image:url("/img/index_movie_icon.png");}
[class^='shima__photo'] img {border-radius:5px;}
[class^='shima__photo']:hover {filter:brightness(110%);}
.shima__date {padding-top:8px; font-size:150%;}
.shima__title {font-size:160%; font-weight:700; color:#3db5e4;}
.shima__title a {padding-right:21px; background-repeat:no-repeat; background-position:right 2px; background-size:15px; background-image:url("/img/icon_exlink.png");}
.shima__title a:hover {border-bottom:2px solid #3db5e4;}



/* ------------------------------
 * 10.1 News (index and Single)
------------------------------ */
.news-list {width:750px; margin:50px auto 0;}
.news-list li {position:relative; padding:15px 5px 10px; border-bottom:1px dotted #3db5e4; font-size:150%;}
.news-list span {display:inline-block;}
.news-list .cat {margin-right:7px; width:100px; padding:3px 0; text-align:center; border-radius:20px; color:#fff; font-size:13px; line-height:1;}
.news-list .cat.gas {color:#ea9b15; background:#fff;}
.news-list .cat.reform {color:#7fbe26; background:#fff;}
.news-list .time {width:110px;}
.news-list a {position:relative; color:#222;}
.news-list a:before {content:''; position:absolute; top:3px; width:10px; height:10px; border:2px solid; border-color:#222 #222 transparent transparent; transform:rotate(45deg);}
/*.news-list a:after {content:''; position:absolute; top:3px; width:10px; height:10px; border:2px solid; border-color:#222 #222 transparent transparent; transform:rotate(45deg);}*/
.news-list a:before {right:-10px;}
/*.news-list a:after {right:-15px;}*/
.news-list a:hover {color:#3db5e4}
.news-list a:hover:before {border-color:#3db5e4 #3db5e4 transparent transparent;}
/*.news-list a:hover:after {border-color:#3db5e4 #3db5e4 transparent transparent;}*/
.news-list a:hover:before {animation:newsBefore .7s ease-in;}
/*.news-list a:hover:after {animation:newsAfter .7s ease-in;}*/
@keyframes newsBefore {
0% {right:-10px}
25% {right:-15px}
50% {right:-10px}
75% {right:-15px}
100% {right:-10px}
}
@keyframes newsAfter {
0% {right:-15px}
25% {right:-20px}
50% {right:-15px}
75% {right:-20px}
100% {right:-15px}
}

/* ------------------------------
 * 10.2 Activity Base (index and Single)
------------------------------ */
.index-linkbox {margin-top:50px;}
.index-linkbox .second-line {width:800px; margin:30px auto 0;}
.index-linkbox .left {margin-right:40px;}
/*linkbox*/
.linkbox {display:block; width:333px; color:#fff; border-radius:5px; background:#3db5e4;}
.office-name {position:relative; z-index:10; display:table-cell; vertical-align:middle; width:333px; height:90px; padding:12px 20px;}
.office-name span,
.office-name strong {display:block}
.office-name span {font-size:150%}
.office-name strong {font-size:180%;}
.office-arrow {position:relative; z-index:10; line-height:1; padding:12px 20px; font-size:140%; background:#fff; color:#3db5e4; border-radius:0 0 5px 5px;}
.office-arrow:before,
.office-name.small:before {position:absolute; z-index:20; content:''; top:12px; right:15px; width:14px; height:14px; border:2px solid; border-color:#3db5e4 #3db5e4 transparent transparent; transform:rotate(45deg);}
.office-arrow:after {position:absolute; z-index:-1; content:''; top:0; left:0; width:0%; height:100%; border-radius:0 0 5px 5px; border-top:1px solid #fff; background:#3db5e4; transition:all .3s ease; -webkit-transition:all .3s ease;}
/*gas-reform*/
.linkbox.gas {background:#ea9b15;}
.linkbox.gas .office-arrow {color:#ea9b15;}
.linkbox.gas .office-arrow:before {border-color:#ea9b15 #ea9b15 transparent transparent;}
.linkbox.gas .office-arrow:after {background:#ea9b15;}
.linkbox.reform {background:#7fbe26;}
.linkbox.reform .office-arrow {color:#7fbe26;}
.linkbox.reform .office-arrow:before {border-color:#7fbe26 #7fbe26 transparent transparent;}
.linkbox.reform .office-arrow:after {background:#7fbe26;}
/*hover*/
/*.linkbox:hover {color:#3db5e4; background:#fff;}*/
/*.linkbox.gas:hover {color:#ea9b15;}*/
/*.linkbox.reform:hover {color:#7fbe26;}*/
.linkbox:hover .office-arrow {color:#fff;}
.linkbox:hover .office-arrow:before {animation:linkboxArrow .7s ease-in .1s; border-color:#fff #fff transparent transparent;}
.linkbox:hover .office-arrow:after {width:100%;}
@keyframes linkboxArrow {
0% {right:15px}
25% {right:10px}
50% {right:15px}
75% {right:10px}
100% {right:15px}
}

/* ------------------------------
 * 10.3 Index Contents (not Only)
------------------------------ */
/*Corporate Information*/
.index-info-second {margin-top:35px;}
.infobox {position:relative; display:block; width:334px; height:250px; border-radius:5px;}
.infobox.left {margin-right:39px;}
.infobox img {width:334px; height:250px; border-radius:5px;}
.info-name {position:absolute; display:block; z-index:20; bottom:0; left:0; width:100%; line-height:1; padding:12px 20px; font-size:150%; letter-spacing:2px; color:#fff; background:rgba(45,179,232,.9); border-radius:0 0 5px 5px;}
.infobox .img {transition:all .2s ease-in; -webkit-transition:all .2s ease-in;}
.infobox:hover .img {filter:brightness(110%)}
.infobox:hover .info-name {color:#3db5e4;}
.info-name:before {position:absolute; z-index:20; content:''; top:12px; right:15px; width:14px; height:14px; border:2px solid; border-color:#fff #fff transparent transparent; transform:rotate(45deg);}
.infobox:hover .info-name:before {animation:linkboxArrow .7s ease-in .1s; border-color:#3db5e4 #3db5e4 transparent transparent;}
.info-name:after {position:absolute; z-index:-1; content:''; top:0; left:0; width:0%; height:100%; border-radius:0 0 5px 5px; background:#fff; transition:all .3s ease; -webkit-transition:all .3s ease;}
.infobox:hover .info-name:after {width:100%;}

/* ------------------------------
 * 20.0 Top Slider 
------------------------------ */
.slick-slider {position:relative; display:block; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
-webkit-touch-callout:none; -khtml-user-select:none; -ms-touch-action:pan-y; touch-action:pan-y; -webkit-tap-highlight-color:transparent;}
.slick-list {position:relative; display:block; overflow:hidden;}
.slick-list:focus {outline:none;}
.slick-list.dragging {cursor:pointer; cursor:hand;}
.slick-slider .slick-track,
.slick-slider .slick-list {transform:translate3d(0, 0, 0);}
.slick-track {position:relative; top:0; left:0; display:block; margin-left:auto; margin-right:auto;}
.slick-track:before,
.slick-track:after {display:table; content:''}
.slick-track:after {clear:both;}
.slick-loading .slick-track {visibility:hidden;}
.slick-slide {display:none; float:left; height:100%; min-height:1px;}
[dir='rtl'] .slick-slide {float:right;}
.slick-slide img {display:block;}
.slick-slide.slick-loading img {display:none;}
.slick-slide.dragging img {pointer-events:none;}
.slick-initialized .slick-slide {display:block;}
.slick-loading .slick-slide {visibility:hidden;}
.slick-vertical .slick-slide {display:block; height:auto; border:1px solid transparent;}
.slick-arrow.slick-hidden {display:none;}
/* Arrows */
.slick-prev,
.slick-next {position:absolute; z-index:1000; top:47%; width:30px; height:30px; text-indent:-9999px; background:rgba(255,255,255,0); border:2px solid; transform:rotate(45deg);}
.slick-prev {left:30px;}
.slick-next {right:30px;}
#gas-main .slick-prev {border-color:transparent transparent #ea9b15 #ea9b15;}
#gas-main .slick-next {border-color:#ea9b15 #ea9b15 transparent transparent;}
#reform-main .slick-prev {border-color:transparent transparent #7fbe26 #7fbe26;}
#reform-main .slick-next {border-color:#7fbe26 #7fbe26 transparent transparent;}
.slick-prev:hover {animation:slidePrev .7s ease-in;}
.slick-next:hover {animation:slideNext .7s ease-in;}
@keyframes slidePrev {
0% {left:30px}
25% {left:25px}
50% {left:30px}
75% {left:25px}
100% {left:30px}
}
@keyframes slideNext {
0% {right:30px}
25% {right:25px}
50% {right:30px}
75% {right:25px}
100% {right:30px}
}
/*slider contents*/
.top-slider {margin-top:25px; height:500px; overflow:hidden;}
.slider-box li {position:relative; width:100%; height:500px; background-position:50%; background-size:cover; background-repeat:no-repeat;}
.slideline {position:absolute; bottom:0; left:0; width:100%; height:74px;}
.slideline.middle {top:calc(50% - 37px); bottom:auto;}
.slider-box .image-only {background-size:1080px 500px;}
.reform .slider-box .image-only {background-size:cover;}
.slider-box .image-contain {background-size:contain;}
#gas-main .slideline {background:linear-gradient(to right, rgba(234,155,21,.9) 0%, rgba(234,155,21,.8) 50%, rgba(234,155,21,.1) 100%);}
#reform-main .slideline {height:74px; background:linear-gradient(to right, rgba(127,190,38,.1) 0%, rgba(127,190,38,.8) 20%, rgba(127,190,38,.9) 50%, rgba(127,190,38,.8) 80%, rgba(127,190,38,.1) 100%);}
#reform-main .slideline img {margin:0 auto;}
.slideline span {display:block; width:1060px; margin:0 auto; padding-top:19px;}

/* ------------------------------
 * 20.1 Top Gas/Reform 
------------------------------ */
/*title*/
#index-title {z-index:100; position:relative; margin-top:60px; background-position:center top; background-color:#fff;}
#index-title {height:130px; background-size:cover; background-position:50%;}
/*image*/
#index-title.gas {background-image:url(/img/bg_gas_index.jpg);}
#index-title.reform {background-image:url(/img/bg_reform_index.jpg);}
/*title*/
#index-title h2 {z-index:5; position:absolute; top:0; left:calc(50% - 225px); width:450px; height:130px; text-align:center; background-image:url(/img/title_bg_index.png); background-size:450px 130px; background-repeat:no-repeat;}
#index-title h2 strong,
#index-title h2 span {display:block;}
#index-title h2 strong {padding-top:39px;}
#index-title h2 span {padding-top:19px; font-size:120%; font-weight:bold; color:#999; letter-spacing:2px;}
/*Menu-Box*/
.article.inner-index {margin-top:35px; padding-top:25px;}
.inner-index-menu {width:1080px; margin:0 auto; padding-top:36px;}
.inner-index-menu a {position:relative; display:block; width:243px; height:243px; background-size:243px; background-position:left top; background-repeat:no-repeat; line-height:1; color:#fff; text-align:center;}
.inner-index-menu a.left {margin-right:36px;}
.inner-index-title {padding-top:30px;  font-size:180%; font-weight:bold; color:#fff;}
.inner-index-menu.gas a:hover p,
.inner-index-menu.gas a:hover .inner-index-title,
#gas-inner-botton:hover p,
#gas-inner-botton:hover .inner-index-title {color:#ea9b15;}
.inner-index-menu.reform a:hover p,
.inner-index-menu.reform a:hover .inner-index-title,
#reform-inner-botton:hover p,
#reform-inner-botton:hover .inner-index-title {color:#7fbe26;}
.inner-index-menu p {position:absolute; z-index:10; bottom:30px; width:100%; padding-right:10px;}
.inner-index-menu span {position:relative; display:inline-block;}
.inner-index-menu span:before {position:absolute; content:''; top:2px; right:-12px; width:12px; height:12px; border:2px solid; border-color:#fff #fff transparent transparent; transform:rotate(45deg)}
.inner-index-menu a:hover span:before {animation:inIndexMenu .7s ease-in;}
.inner-index-menu.gas a:hover span:before,
#gas-inner-botton:hover span:before {border-color:#ea9b15 #ea9b15 transparent transparent;}
.inner-index-menu.reform a:hover span:before,
#reform-inner-botton:hover span:before {border-color:#7fbe26 #7fbe26 transparent transparent;}
@keyframes inIndexMenu {
0% {right:-12px}
25% {right:-17px}
50% {right:-12px}
75% {right:-17px}
100% {right:-12px}
}
/*Menu-Box -> Gas*/
.inner-index-menu .outline {background-image:url(/img/box_gas_menu_outline.png)}
.inner-index-menu .outline:hover {background-image:url(/img/box_gas_menu_outline_hover.png)}
.inner-index-menu .knowledge {background-image:url(/img/box_gas_menu_knowledge.png)}
.inner-index-menu .knowledge:hover {background-image:url(/img/box_gas_menu_knowledge_hover.png)}
.inner-index-menu .payment {background-image:url(/img/box_gas_menu_payment.png)}
.inner-index-menu .payment:hover {background-image:url(/img/box_gas_menu_payment_hover.png)}
.inner-index-menu .procedure {background-image:url(/img/box_gas_menu_procedure.png)}
.inner-index-menu .procedure:hover {background-image:url(/img/box_gas_menu_procedure_hover.png)}
.inner-index-menu .base {background-image:url(/img/box_gas_menu_base.png)}
.inner-index-menu .base:hover {background-image:url(/img/box_gas_menu_base_hover.png)}
.inner-index-menu .emergency {background-image:url(/img/box_gas_menu_emergency.png)}
.inner-index-menu .emergency:hover {background-image:url(/img/box_gas_menu_emergency_hover.png)}
.inner-index-menu .trouble {background-image:url(/img/box_gas_menu_trouble.png)}
.inner-index-menu .trouble:hover {background-image:url(/img/box_gas_menu_trouble_hover.png)}
.inner-index-menu .reform {background-image:url(/img/box_gas_menu_reform.png)}
.inner-index-menu .reform:hover {background-image:url(/img/box_gas_menu_reform_hover.png)}
/*Menu-Box -> Reform*/
.inner-index-menu .advantage {background-image:url(/img/box_gas_menu_reform.png)}
.inner-index-menu .advantage:hover {background-image:url(/img/box_gas_menu_reform_hover.png)}
.inner-index-menu .example {background-image:url(/img/box_reform_menu_example.png)}
.inner-index-menu .example:hover {background-image:url(/img/box_reform_menu_example_hover.png)}
.inner-index-menu .remenu {background-image:url(/img/box_reform_menu_remenu.png)}
.inner-index-menu .remenu:hover {background-image:url(/img/box_reform_menu_remenu_hover.png)}
.inner-index-menu .step {background-image:url(/img/box_reform_menu_step.png)}
.inner-index-menu .step:hover {background-image:url(/img/box_reform_menu_step_hover.png)}
.inner-index-menu .testimonials {background-image:url(/img/box_reform_menu_testimonials.png)}
.inner-index-menu .testimonials:hover {background-image:url(/img/box_reform_menu_testimonials_hover.png)}
.inner-index-menu .base-reform {background-image:url(/img/box_reform_menu_base.png)}
.inner-index-menu .base-reform:hover {background-image:url(/img/box_reform_menu_base_hover.png)}
.inner-index-menu .flyers {background-image:url(/img/box_reform_menu_flyers.png)}
.inner-index-menu .flyers:hover {background-image:url(/img/box_reform_menu_flyers_hover.png)}
.inner-index-menu .gas {background-image:url(/img/box_gas_menu_outline.png)}
.inner-index-menu .gas:hover {background-image:url(/img/box_gas_menu_outline_hover.png)}

/* ------------------------------
 * 30.0 Gas Common
------------------------------ */
/*step*/
.bg-step {position:relative; padding-left:120px;}
.bg-step.next {padding-bottom:45px;}
.bg-step .number {position:absolute; top:0; left:0;}
.caption-step {padding-bottom:15px; font-size:180%; font-weight:bold;}
.caption-step {color:#ea9b15;}
.caption-step.mid {padding-top:30px;}

/* ------------------------------
 * 30.1 Gas -> Page
------------------------------ */
/*page > outline*/
#gas.gas-outline .area p.text {padding-top:30px;}
#gas.gas-outline .column3 .caption-box {margin-top:25px;}
#gas.gas-outline .column3 p {padding:22px 5px 0;}
#gas.gas-outline .attention-list {margin-top:15px; text-align:center;}
.bg-white.slant {z-index:10; position:relative; padding-right:400px;}
.slant-img {z-index:-1; position:absolute; top:15px; bottom:15px; right:15px; width:400px; background-repeat:no-repeat; background-position:right top; border-radius:5px;}
.slant-img.lpgas {background-image:url(/img/gas_outline_bg_lpgas_2019.png); background-size:400px 250px;}
.slant-img.sale {background-image:url(/img/gas_outline_bg_sale.png); background-size:400px 180px;}
.slant-img.construction {background-image:url(/img/gas_outline_bg_construction_2019.png); background-size:400px 230px;}
.slant-img.electric {background-image:url(/img/gas_outline_bg_electric.png); background-size:400px 230px;}
/*page > knowledge*/
#gas.gas-knowledge .area .img {padding:15px 0 5px;}
.difference-image {width:700px; min-height:300px; margin:45px auto 0; line-height:1; background-image:url(/img/gas_knowledge_difference_image.png); background-size:700px 300px; background-repeat:no-repeat; background-position:center top;}
.difference-calc {font-size:180%; text-align:center; letter-spacing:3px;}
.difference-calc .left,
.difference-calc .right {width:300px; padding-top:40px; font-weight:bold; color:#ea9b15;}
.difference-calc .equal {display:inline-block; width:100px; font-size:300%; padding-top:120px;}
#gas.gas-knowledge .column3 p {padding:17px 5px 0;}
#gas.gas-knowledge .img-recovery {padding-top:25px;}
#gas.gas-knowledge .img-recovery .left {padding-right:24px;}
#gas.gas-knowledge .attention-list {padding-top:20px;}
/*page > payment*/
.howpayment .lead-pay {padding:20px 5px 10px;}
.howpayment .pay-list {padding:0 5px; font-weight:bold;}
.howpayment .attention-list {padding:20px 5px 0;}
.howpayment .caption-pay {display:inline-block; margin:15px 0; padding:7px 15px; font-size:160%; border:1px solid #ddd; border-radius:15px; background:#eee; line-height:1;}
.area.bg-white.egasticket {padding-right:270px;}
.egasticket .ticket-img {position:absolute; top:35px; right:35px;}
.egasticket .ticket-img a:hover {opacity:.7;}
.egasticket .attention-list {padding-top:15px;}
#gas.gas-payment .caution-box {margin-top:40px; padding:20px 35px; background:#e1f1fc; border-radius:5px;}
#gas.gas-payment .caution-box .left {width:200px; font-size:160%; font-weight:bold; line-height:3.4;}
#gas.gas-payment .caution-box .right {width:800px;}
/*page > fee*/
.feestructure {}
.lead-fee {text-align:center;}
.lead-fee strong {font-size:120%; font-weight:bold;}
.lead-fee span {padding-left:.5em; font-size:14px;}
.fee-calc {padding:45px 0; text-align:center; font-size:180%; font-weight:bold; line-height:1; letter-spacing:3px;}
.fee-calc b,
.fee-calc span {display:inline-block; padding:10px 20px;}
.fee-calc b {border:3px solid #ea9b15;}
.fee-calc span {font-size:150%;}
.fee-calc .equal {background:#ea9b15; color:#fff;}
.feestructure .attention-list li {padding-top:5px;}
.lpfee {}
.lpfee table {margin-top:15px;}
.lpfee tr:first-child th {border-radius:5px 5px 0 0;}
.lpfee tr:last-child td {border-radius:0 0 5px 5px;}
.lpfee th,
.lpfee td {display:block; padding:10px; text-align:center; border:1px solid #e1f1fc; letter-spacing:3px;}
.lpfee th {background:#e1f1fc; font-size:180%;}
.lpfee td {background:#fff; font-size:300%; font-weight:bold; color:#ea9b15; letter-spacing:5px;}
.lpfee th span {font-size:80%}
.lpfee td span {font-size:50%; color:#222;}
.lpfee .attention-list {padding:5px 5px 0 0; text-align:right;}
/*page > procedure*/
.gasuse .pcFix01 {padding-bottom:20px;}
/*page > emergency*/
.emergency-list li {list-style-type:disc; list-style-position:outside; margin-left:1em; font-size:160%;}
.gas-emergency .caption-box.sky {margin-bottom:25px;}
.gas-emergency .bg-white .attention-list {padding:10px 30px 0;}
.odor {}
.odor .img {padding-bottom:15px;}
.odor .attention-list {padding-left:10px;}
.quake {}
.bg-emergency {position:relative; margin:0 20px; padding-right:300px;}
.bg-emergency .img {position:absolute; top:0; right:0; min-width:300px; text-align:center;}
.bg-emergency.quake01 {padding-bottom:20px; min-height:calc(111px + 20px);}
.bg-emergency.quake03 {min-height:125px;}
.bg-emergency.bottom {padding-bottom:10px;}
.quake-text {padding:10px 30px 30px;}
.quake-recover {}
.quake-recover .bg-emergency {min-height:calc(159px - 20px);}
.bg-emergency.quake04 .img {top:-20px;}
.quake-recover .bg-emergency .img {min-width:350px;}
.bg-emergency.quake06 .img {top:20px; right:20px;}
.quake-recover .bg-emergency.bottom {min-height:110px;}
/*page > emergency > call*/
.emergency-call {margin-bottom:40px;}
.emergency-call > div {width:50%; height:120px; line-height:1;}
.emergency-call > div.left {padding-top:50px; background:#3db5e4; text-align:center; font-size:180%; color:#fff; letter-spacing:2px; border-radius:5px 0 0 5px;}
.emergency-call > div.right {background:#fff; border-radius:0 5px 5px 0;}
.emergency-call .call-box {padding:32px 0 0;}
/*page > QandA*/
.qa {padding:0 20px 25px; margin-bottom:30px; border-bottom:2px dotted #e1f1fc;}
.qa.bottom {margin-bottom:0; padding-bottom:0; border:none;}
.q-box,
.a-box {position:relative; padding-left:60px;}
.q-box span,
.a-box span {z-index:10; position:absolute; top:0; left:0; display:block; width:40px; line-height:40px; color:#fff; font-size:24px; font-weight:bold; text-align:center;}
.q-box span:before,
.a-box span:before {z-index:-1; content:""; position:absolute; top:15px; right:-5px; width:10px; height:10px; transform:rotate(45deg);}
.q-box span,
.q-box span:before {background:#ea9b15;}
.a-box span,
.a-box span:before {background:#3db5e4;}
.q-box {min-height:60px; padding-top:7px; font-size:160%; font-weight:bold; color:#ea9b15;}
.gas-trouble .attention-list {width:auto; margin-top:5px; padding-left:62px;}

/* ------------------------------
 * 30.2 Gas -> Form
------------------------------ */
.form-gas .area.form {margin-top:35px;}
.form-gas .caption-box.sky {margin:30px 0 20px;}
.form-gas .area.attention-list {padding-left:10px;}
/*table-style*/
.table-attention {display:block; padding:10px 0 0 10px; color:#999; font-size:140%;}
.table-attention.second {padding-top:0;}
.mwform-radio-field-text {font-size:160%;}
.mwform-radio-field.horizontal-item {margin-right:30px;}
/*botton*/
.form-botton {text-align:center; padding-top:50px;}
.form-botton input {position:relative; display:inline-block; line-height:40px; margin:0 auto; padding:0 70px; font-size:180%; background:#3db5e4; color:#fff; border-radius:40px; border:2px solid #3db5e4; transition:all .3s ease-in; -webkit-transition:all .3s ease-in;}
.form-botton input:hover {background:#fff; color:#3db5e4;}
.form-botton span {display:inline-block; position:relative;}
.form-botton span:after {content:''; position:absolute; top:15px; right:15px; width:14px; height:14px; border:2px solid; border-color:#fff #fff transparent transparent; transform:rotate(45deg);}
.form-botton span:hover:after {border-color:#3db5e4 #3db5e4 transparent transparent; animation:arrow .7s ease-in .2s;}
.form-botton .back {margin-left:-15px; padding-right:30px;}
.form-botton .back input {background:#fff; color:#3db5e4;}
.form-botton .back:after {left:15px; border-color:transparent transparent #3db5e4 #3db5e4; transform:rotate(45deg); color:#e1f1fc;}
.form-botton .back:hover:after {border-color:transparent transparent #3db5e4 #3db5e4; animation:formBack .7s ease-in .2s;}
.mw_wp_form_input .back {display:none!important;}
@keyframes formBack {
0% {left:15px}
25% {left:10px}
50% {left:15px}
75% {left:10px}
100% {left:15px}
}
/*Preview*/
.mw_wp_form_preview .table-attention,
.mw_wp_form_preview .attention-list {display:none;}
.mw_wp_form_preview td {font-size:160%;}

/* ------------------------------
 * 40.1 Reform -> Example
------------------------------ */
/*Corporate Information -> Rewrite*/
.reform-linkbox {margin-top:45px;}
.reform-example-second {margin-top:35px;}
.reform-linkbox .info-name {background:rgba(127,190,38,.9);}
.reform-linkbox .infobox:hover .info-name {color:#7fbe26;}
.reform-linkbox .infobox:hover .info-name:before {border-color:#7fbe26 #7fbe26 transparent transparent;}
.reform-linkbox .infobox:hover .img {filter:none;}
/*new*/
.reform-linkbox .infobox p {position:absolute; display:block; top:0; left:0; width:100%; height:100%; padding:25px; font-size:180%; font-weight:bold; background:rgba(127,190,38,0); color:rgba(255,255,255,0); border-radius:5px; transition:all .2s ease-in; -webkit-transition:all .2s ease-in;}
.reform-linkbox .infobox:hover p {background:rgba(127,190,38,.95); color:rgba(255,255,255,1);}

/* ------------------------------
 * 40.2 Reform -> Example List
------------------------------ */
.area.bg-white.example {padding:25px 35px;}
.example-list-area {margin:20px 0 30px; padding:30px 0; background:#fff;}
.example-list {width:1080px; margin:0 auto;}
.example-list li {width:243px; margin-right:36px;}
.example-list li:nth-child(4n) {margin-right:0;}
/*box => Corporate Information Rewrite*/
.infobox.example {width:243px; height:243px;}
.infobox.example .info-name {background:rgba(127,190,38,.9);}
.infobox.example img {width:243px; height:243px;}
.infobox.example:hover .info-name {color:#7fbe26;}
.infobox.example:hover .info-name:before {border-color:#7fbe26 #7fbe26 transparent transparent;}
/*text*/
.example-excerpt {padding:10px 5px 5px; color:#7fbe26;}
.example-sup {padding:0 7px; font-size:150%;}

/* ------------------------------
 * 40.3 Reform -> Example single
------------------------------ */
.area.example-single {padding-top:45px;}
.example-caption {padding-left:20px; font-size:300%; color:#7fbe26; letter-spacing:2px; border-left:4px solid #ccc;}
.example-single-box {margin-top:25px;}
.example-single-box img {border-radius:5px;}
/*right*/
.example-single-box .right {position:relative; width:600px; height:600px; padding:0 20px; background-image:url(/img/box_bg_example.png); background-position:50%; background-size:600px; background-repeat:no-repeat;}
.example-single-box .right.tate {padding:20px 0;}
.example-single-box .right span {display:table-cell; text-align:center; width:560px; height:600px; vertical-align:middle;}
.example-single-box .right.tate span {width:600px; height:560px;}
.example-single-box .right.tate span img {width:auto; height:560px;}
.example-single-box .right:before {content:''; position:absolute; top:0; right:0; width:90px; height:90px; background-image:url(/img/icon_example_after.png); background-position:50%; background-size:90px; background-repeat:no-repeat;}
/*left*/
.example-single-box .left {width:440px;}
.example-single-box .before {position:relative; display:table-cell; text-align:center; vertical-align:middle; width:440px; height:440px; padding:0 20px; background-image:url(/img/box_bg_example.png); background-position:50%; background-size:440px; background-repeat:no-repeat;}
.example-single-box .before.tate {padding:20px 0;}
.example-single-box .before img {width:400px; height:auto;}
.example-single-box .before.tate img {height:400px; width:auto;}
.example-single-box .before:before {content:''; position:absolute; bottom:-20px; left:0; width:90px; height:90px; background-image:url(/img/icon_example_before.png); background-position:50%; background-size:90px; background-repeat:no-repeat;}
.example-single-box .before:after {content:''; position:absolute; top:220px; right:-53px; width:0; height:0; border:20px solid; border-color:transparent transparent transparent #3db5e4;}
.example-single-box .text-box {margin-top:30px; padding:20px 30px; background:#fff; border:1px solid #e1f1fc; color:#7fbe26;}
/*leagescale*/
.example-lead {padding:30px 10px;}
/*leagescale -> inner-photo*/
.caption-line.example-inner {margin-top:10px;}
#reform .caption-line.example span {min-width:300px;}
.example-single-box.inner .right {width:550px; height:550px; background-size:550px;}
.example-single-box.inner .right span {width:510px; height:550px;}
.example-single-box.inner .right.tate span {width:550px; height:510px;}
.example-single-box.inner .right.tate span img {width:auto; height:510px;}
.example-single-box.inner .right:before {top:auto; bottom:0;}
.example-single-box.inner .left {width:410px; margin-top:70px;}
.example-single-box.inner .before {width:410px; height:410px; background-size:410px;}
.example-single-box.inner .before img {width:370px; height:auto;}
.example-single-box.inner .before.tate img {height:370px; width:auto;}
.example-single-box.inner .before:before {bottom:auto; top:-30px;}
.example-single-box.inner .before:after {top:180px}
/*form*/
.example-single {padding:60px 0 0;}



/* ------------------------------
 * 40.1 Reform -> Page
------------------------------ */
/*page > advantage*/
.advantage-area {padding-bottom:50px;}
.advantage-area .img {position:relative; margin-top:20px; background:#e1f1fc; overflow:hidden;}
.advantage-area .img:before,
.advantage-area .img:after {content:''; position:absolute; top:0; width:50px; height:400px;}
.advantage-area .img:before {left:calc(50% + 540px); background:linear-gradient(to right, rgba(225,241,252,0) 0%, rgba(225,241,252,1) 100%)}
.advantage-area .img:after {right:calc(50% + 540px); background:linear-gradient(to left, rgba(225,241,252,0) 0%, rgba(225,241,252,1) 100%)}
.advantage-area .lead-text.image {padding:20px 0; font-weight:normal;}
/*page > menu*/
.marugoto-excerpt {}
.marugoto-excerpt .img {width:500px;}
.marugoto-excerpt .img img {border-radius:5px;}
.marugoto-excerpt .text {width:465px; padding-top:0px; background-image:url(/img/reform_menu_marugoto_logo.); background-size:203px 180px; background-position:center top; background-repeat:no-repeat;}
.reformmenu-box {}
.reformmenu-box img {border-radius:5px;}
.reformmenu-box p {padding:15px 5px 0;}
/*page > menu -> Marugoto*/
.marugoto-main {padding:20px 0 30px;}
.area.bg-white.bg-marugoto {padding-top:340px; background-size:1080px 293px; background-position:center 50px; background-repeat:no-repeat;}
.area.bg-white.bg-marugoto.st {margin-bottom:60px; background-image:url(/img/reform_marugoto_standard.png);}
.area.bg-white.bg-marugoto.pre {background-image:url(/img/reform_marugoto_premium.png);}
.marugoto-image {padding:40px 0;}
.area.marugoto-attention {padding:0 10px 5px; font-size:140%; line-height:1.5}
.reformpac-banner {padding:50px 0 30px; color:#fff; font-size:180%; text-align:center;}
.reformpac-banner span {display:inline-block; padding:12px 60px 12px 120px; background-color:#3db5e4; background-image:url(/img/icon_house.png); background-position:25px bottom; background-size:contain; background-repeat:no-repeat; border-radius:30px;}
/*page > step*/
.flow-area {padding-bottom:80px; background-image:url(/img/reform_icon_arrow.png); background-size:60px; background-position:center bottom; background-repeat:no-repeat;}
.flow-area.top {margin-top:45px;}
.flow-area.bottom {padding-bottom:0px; background:none;}
.area.flow-box {position:relative; padding-left:150px; padding-right:300px; background-repeat:no-repeat;}
.flow-box .number {position:absolute; top:35px; left:35px;}
.caption-flow {padding-bottom:10px; font-size:180%; letter-spacing:3px;}
.caption-flow b {z-index:10; position:relative; display:inline-block; padding-left:15px; font-weight:bold;}
.caption-flow b:before {z-index:-1; content:""; position:absolute; bottom:2px; left:0px;; right:-15px; height:12px; background:#e4f5cc;}
.flow-box.step01 {min-height:210px; background-image:url(/img/reform_step_flow01.png); background-size:145px 190px; background-position:850px 50%;}
.flow-box.step02 {min-height:180px; background-image:url(/img/reform_step_flow02.png); background-size:204px 160px; background-position:820px 50%;}
.flow-box.step03 {min-height:160px; background-image:url(/img/reform_step_flow03.png); background-size:251px 140px; background-position:802px 50%;}
.flow-box.step04 {min-height:220px; background-image:url(/img/reform_step_flow04.png); background-size:168px 203px; background-position:850px 50%;}
.flow-box.step05 {min-height:210px; background-image:url(/img/reform_step_flow05.png); background-size:195px 191px; background-position:820px 50%;}
/*page > flyers*/
.area.flyers.bottom {padding-bottom:40px;}
.flyers-box {z-index:100; position:relative; margin-top:40px; padding:15px; text-align:center; background:#7fbe26; color:#fff; border-radius:300px;}
.flyers-box .caption-flyers {padding:5px 0 10px;}
.flyers-box:before {z-index:-1; content:''; position:absolute; bottom:-5px; left:calc(50% - 20px); width:50px; height:50px; background:#7fbe26; transform:rotate(45deg);}
.flyers-image {display:flex; justify-content:space-between; margin-top:30px;}
.flyers-image.single-image {justify-content:center;}
.flyers-image > div {height:520px; background-image:url(/img/box_bg_white.png); background-size:520px; background-position:left top; background-repeat:no-repeat;}
.flyers-image .img {display:table-cell; vertical-align:middle; width:520px; height:520px;}
.flyers-image img {width:auto; max-width:480px; height:auto; max-height:480px; border-radius:5px; border:1px solid #e1f1fc;}
.flyers-image a {position:relative; display:inline-block;}
.flyers-image a:before {content:'クリックでPDFファイルを開きます'; position:absolute; display:table-cell; vertical-align:middle; width:100%; height:100%; padding-top:250px; background:rgba(0,0,0,0); color:rgba(255,255,255,0); font-size:160%; border-radius:5px;}
.flyers-image a:hover:before {background:rgba(0,0,0,.5); color:rgba(255,255,255,1);}
.flyers-image a:after {content:''; position:absolute; top:calc(240px - 90px); left:calc(50% - 42px); width:84px; height:84px; background-image:url(/img/icon_pdf.png); background-position:center 7px; background-size:64px; background-repeat:no-repeat; border:2px dashed #fff; border-radius:10px; opacity:0;}
.flyers-image a:hover:after {opacity:1;}
.flyers-image.oblong a:before {padding-top:185px}
.flyers-image.oblong a:after {top:calc(179px - 90px)}

/* ------------------------------
 * 40.1 Reform -> Page -> Testimonials
------------------------------ */
.voice-area {}
.voice-list li {padding-top:35px; width:243px; margin-right:36px;}
.voice-list li:nth-child(4n) {margin-right:0;}
.voice-list .imglink {display:block; width:243px; height:243px; text-align:center; cursor:pointer; background-image:url(/img/box_bg_white_column4.png); background-size:243px; background-position:left top; background-repeat:no-repeat; transition:all .3s ease-in; -webkit-transition:all .3s ease-in;}
.voice-list .imglink:hover {filter:brightness(110%)}
.voice-list .imglink img {border:1px solid #e1f1fc; border-radius:5px;}
.voice-list .excerpt {padding:10px 5px 5px; color:#7fbe26;}
.voice-list .name {text-align:center; font-size:140%;}
/*jquery core*/
#colorbox,
#cboxOverlay,
#cboxWrapper {position:absolute; top:0; left:0; z-index:99999; overflow:hidden;}
#cboxWrapper {max-width:none;}
#cboxOverlay {position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft {clear:left;}
#cboxContent {position:relative;}
#cboxLoadedContent {overflow:auto; -webkit-overflow-scrolling:touch;}
#cboxLoadingOverlay,
#cboxLoadingGraphic {position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious,
#cboxNext,
#cboxClose,
#cboxSlideshow {cursor:pointer;}
.cboxIframe {width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox,
#cboxContent,
#cboxLoadedContent {box-sizing:content-box;}
/*color*/
#cboxOverlay {background:#e1f1fc;}
#colorbox {outline:0;}
#cboxContent {margin-top:32px; overflow:visible;}
.cboxIframe {background:#fff;}
#cboxError {padding:50px; border:1px solid #ccc;}
#cboxLoadedContent {padding:1px;}
#cboxLoadingOverlay {background:#fff;}
#cboxPrevious:active,
#cboxNext:active,
#cboxSlideshow:active,
#cboxClose:active,
.inline:focus {outline:none;}
/*cancel-X*/
#cboxClose {z-index:1000; position:absolute; top:-35px; width:100%; height:40px; border:none; background:none; text-indent:-9999px;}
#cboxClose:before,
#cboxClose:after {display:block; content:''; position:absolute; width:30px; height:2px; background:#7fbe26;}
#cboxClose:after {top:20px; right:20px; transform:rotate(45deg);}
#cboxClose:before {top:20px; right:20px; transform:rotate(-45deg);}
/*modalBox*/
.modalBox {display:none;}
.modal { width:1000px; height:auto; padding:30px 35px; border:1px solid #e1f1fc; border-radius:5px; background:#fff;}
.modal .img {width:400px;}
.modal img { border:1px solid #ccc; border-radius:5px;}
.modal .text-box {width:560px; text-align:left; position:relative;}
.voice-line {font-size:140%;}
.voice-line span,
.voice-line strong {display:inline-block; min-width:80px; padding:5px 15px; text-align:center; border:1px solid #ccc; line-height:1;}
.voice-line span {background:#7fbe26; border-radius:5px 0 0 5px; border-right:none; color:#fff;}
.voice-line strong {border-radius:0 5px 5px 0;}
.voice-staff {position:absolute; top:5px; right:0px; font-size:140%;}
.voice-caption {padding-top:30px; font-size:160%; color:#7fbe26;}
.check-box {padding-top:15px; padding-left:27px;}
.check-box span {display:inline-block; margin:0 5px; padding:7px 12px; line-height:1;}
.check-box span.old {margin:0 0 14px; padding:0;}
.check-box .check {border:1px solid #7fbe26; border-radius:20px;}
.voice-message {padding-top:12px; padding-left:27px;}
/*modalBox -> old*/
#voice467 .old, #voice469 .old, #voice471 .old {display:none;}

/* ------------------------------
 * 40.2 Reform -> Tel Box
------------------------------ */
#title-office {position:relative; z-index:10; height:190px;}
#title-office:before {content:''; position:absolute; z-index:1; top:0; left:calc(50% - 60px); width:calc(50% + 60px); height:100%; background:#fff;}
#title-office.common {background:#3db5e4;}
#title-office.gas {background:#ea9b15;}
#title-office.reform {background:#7fbe26;}
.area.tel-office {position:relative; z-index:99; margin-top:0;}
.tel-office .left,
.tel-office .left span {max-width:calc(1800px - 600px); height:190px;}
.tel-office .left span {display:table-cell; vertical-align:middle; text-align:center; padding:0 30px; font-size:180%; color:#fff;}
.tel-office .right {width:600px; padding:40px 0 0;}
.tel-box {position:relative; margin-left:50px; padding-left:255px;}
.tel-title {position:absolute; top:3px; left:0; line-height:40px; padding-left:50px; font-size:160%; background-image:url(/img/icon_tel.png); background-size:40px; background-position:left top; background-repeat:no-repeat;}
.tel-box .tel {padding-left:2px; font-size:400%; font-weight:bold; line-height:1; color:#3db5e4;}
#title-office.gas .tel-box .tel {color:#ea9b15;}
#title-office.reform .tel-box .tel {color:#7fbe26;}
.tel-title.mail {top:0; background-image:url(/img/icon_mail_office.png);}
.mail-botton {margin-top:25px;}
.mail-botton a {position:relative; display:inline-block; line-height:36px; width:270px; padding-right:14px; margin:0 auto; font-size:160%; background:#3db5e4; color:#fff; text-align:center; border-radius:40px; border:2px solid #3db5e4;}
#title-office.gas .mail-botton a {background:#ea9b15; border-color:#ea9b15;}
#title-office.reform .mail-botton a {background:#7fbe26; border-color:#7fbe26;} 
.mail-botton a:after {content:''; position:absolute; top:11px; right:15px; width:14px; height:14px; border:2px solid; border-color:#fff #fff transparent transparent; transform:rotate(45deg);}
.mail-botton a:hover {background:#fff; color:#3db5e4;}
#title-office.gas .mail-botton a:hover {background:#fff; color:#ea9b15;}
#title-office.reform .mail-botton a:hover {background:#fff; color:#7fbe26;} 
.mail-botton a:hover:after {border-color:#3db5e4 #3db5e4 transparent transparent; animation:arrow .7s ease-in .2s;}
#title-office.gas .mail-botton a:hover:after {border-color:#ea9b15 #ea9b15 transparent transparent;}
#title-office.reform .mail-botton a:hover:after {border-color:#7fbe26 #7fbe26 transparent transparent;}

/* ------------------------------
 * 50.0 Blog list 
------------------------------ */
.blog-list li {width:240px; margin:30px 40px 0 0;}
.blog-list li:nth-of-type(4n) {margin-right:0;}
.blog-list-title {padding-bottom:15px; line-height:1; text-align:center; font-size:160%; font-weight:bold; color:#fff; letter-spacing:2px;}
.blog-thumbnail {display:block; position:relative; z-index:20; width:240px; height:240px; background-position:50%; background-size:cover; background-repeat:no-repeat; border-radius:50%;}
.blog-thumbnail:hover {filter:brightness(120%)}
.blog-list .excerpt {padding:20px 5px 0; color:#fff;}
.blog-list .update {margin-top:12px; padding:8px 10px; font-size:140%; background:#fff; border-radius:5px; text-align:center; line-height:1;}
/* Archives */
.blog-list.archives li {padding-bottom:35px;}
.blog-list.archives .blog-list-title {color:#3db5e4;}
.blog-list.archives .excerpt {color:#222;}

/* ------------------------------
 * 50.0 Blog Single 
------------------------------ */
.blog-single {margin-bottom:60px;}
.blog-single .area.bg-white {margin-top:50px; padding:35px 70px; border-radius:5px 5px 0 0;}
.blog-single .caption-line {margin:20px 0 50px;}
#blog .caption-line span:before {background-color:#e1f1fc;}
/*content*/
.single-content p {padding-bottom:1.5em; line-height:2;}
.single-content img {display:block; max-width:700px; margin:0 auto;}
.single-content img + img {margin-top:20px;}
.blog-single .update {padding-top:40px; text-align:right; color:#3db5e4;}
/*caption*/
.single-content div.wp-caption {max-width:100%; padding-bottom:2em;}
.single-content p.wp-caption-text {padding:5px 5px 0 0; text-align:center; line-height:1.6; font-size:150%; letter-spacing:1px;}
/*style*/
.single-content strong {font-weight:bold;}
/*staff*/
.blog-single .area.bg-gray {margin:0; padding:40px 60px; border-radius:0 0 5px 5px;}
.staff-blog-title {padding:10px 20px; background:#3db5e4; line-height:1; border-radius:20px; color:#fff; font-size:180%; text-align:center;}
.staff-blog-box {position:relative; width:100%; padding:30px 20px 0; min-height:270px;}
.staff-blog-box .staff-photo {width:260px; height:260px; position:absolute; top:30px; left:20px; background-repeat:no-repeat;
background-position:50%; background-size:cover;}
.staff-text-box.blog {padding:10px 0 0 300px;}
.staff-text-box.blog.single {padding-top:50px;}
.staff-text-box.blog .left {width:35%}
.staff-text-box.blog .right {width:65%}
.staff-text-box.blog .staff-text {padding-top:15px;}
.staff-blog-box .staff-comment {background:#fff;}

/* ------------------------------
 * 60.0 Base 
------------------------------ */
.section.base {margin-top:50px;}
.base-message {display:table-cell; vertical-align:bottom; height:325px; padding-left:560px;}
.officeImage {position:absolute; top:0; left:0; width:520px; height:325px;}
.caption-base {padding-bottom:15px; font-size:180%; font-weight:bold; color:#3db5e4;}
.caption-base.gas {color:#ea9b15}
.caption-base.reform {color:#7fbe26}
.base-outline {margin-top:45px;}
.base-outline p {border-bottom:1px dotted #3db5e4; line-height:50px;}
.base-outline p a {position:relative}
.base-outline p a:before {content:''; position:absolute; left:0; bottom:0; width:0; height:2px; background:#3db5e4;}
.base-outline p a:hover:before {width:100%;}
.base-outline span {display:inline-block; width:150px; padding-left:40px; background-size:30px; background-position:left 10px; background-repeat:no-repeat;}
.base-outline .address span {background-image:url(/img/icon_address.png);}
.base-outline .tel span {background-image:url(/img/icon_tel_small.png);}
.base-outline .fax span {background-image:url(/img/icon_fax.png);}
.base-outline .mail span {background-image:url(/img/icon_mail_office.png);}
.base-outline .access {position:relative; clear:both;}
.base-outline .access p {padding:13px 0 12px 150px; line-height:1.8;}
.base-outline .access span {position:absolute; line-height:30px; top:12px; left:0; background-image:url(/img/icon_access.png); background-position:left top;}
.section-map {width:100%; height:400px; margin-top:50px;}

/* ------------------------------
 * 60.1 Base -> gas division 
------------------------------ */
.article.bg-stripe.gas {padding-bottom:50px;}
.officeList {padding:50px 0;}
.officeList-block {float:left; width:calc(33.33% - 30px); margin-right:40px;}
.officeList-block:nth-of-type(3) {margin-right:0;}
.officeList-title {padding:4px 0 2px; font-size:180%; font-weight:700; letter-spacing:2px; color:#fff; text-align:center; background-color:#ea9b15; border-radius:5px;}
.officeList-block p {padding:25px 0;}
.map-botton {padding-top:20px; text-align:center;}
.map-botton a {position:relative; padding:7px 55px 7px 45px; text-align:center; font-size:160%; color:#fff; border:2px solid #ea9b15; background-color:#ea9b15; border-radius:20px;}
.map-botton a:before {content:''; position:absolute; top:10px; right:15px; width:14px; height:14px; border:2px solid; border-color:#fff #fff transparent transparent; transform:rotate(45deg);}
.map-botton a:hover {background:#fff; color:#ea9b15;}
.map-botton a:hover:before {border-color:#ea9b15 #ea9b15 transparent transparent; animation:arrow .7s ease-in .2s;}
/*telbox*/
.gasDivision .emergency-call > div.left {background-color:#ea9b15;}

/* ------------------------------
 * 60.1 Base -> reform division 
------------------------------ */
.store-outer {width:100%; margin-top:50px; background-color:#fff;}
.store-outer.gas {margin-top:0;}
.storeList {padding:50px 0;}
.storeList-block {float:left; width:calc(50% - 20px);}
.storeList-block:nth-of-type(2) {float:right;}
.storeList-block.gas {width:calc(33.33% - 20px); margin-right:30px;}
.storeList-block.gas:nth-of-type(2) {float:left;}
.storeList-block.gas:nth-of-type(3) {float:right; margin-right:0;}
.storeList-title {margin-bottom:5px; padding:4px 0 6px; font-size:180%; font-weight:700; letter-spacing:2px; color:#fff; text-align:center; background-color:#7fbe26; border-radius:5px;}
.storeList-title.gas {background-color:#ea9b15;}
.storeList-block p {padding:15px 0;}
.base-summary p {position:relative; border-bottom:1px dotted #3db5e4; line-height:30px; padding-left:140px;}
.base-summary.gas p {padding-left:110px;}
.base-summary p a {position:relative}
.base-summary p a:before {content:''; position:absolute; left:0; bottom:0; width:0; height:2px; background:#3db5e4;}
.base-summary p a:hover:before {width:100%;}
.base-summary span {position:absolute; left:0; padding-left:40px; background-size:30px; background-position:left 0; background-repeat:no-repeat;}
.base-summary .address span {background-image:url(/img/icon_address.png);}
.base-summary .tel span {background-image:url(/img/icon_tel_small.png);}
.base-summary .fax span {background-image:url(/img/icon_fax.png);}
.base-summary .mail span {background-image:url(/img/icon_mail_office.png);}
/*map*/
.reform-map-botton {padding-top:20px; text-align:center;}
.reform-map-botton a {position:relative; padding:7px 55px 7px 45px; text-align:center; font-size:160%; color:#fff; border:2px solid #7fbe26; background-color:#7fbe26; border-radius:20px;}
.reform-map-botton a:before {content:''; position:absolute; top:10px; right:15px; width:14px; height:14px; border:2px solid; border-color:#fff #fff transparent transparent; transform:rotate(45deg);}
.reform-map-botton a:hover {background:#fff; color:#7fbe26;}
.reform-map-botton a:hover:before {border-color:#7fbe26 #7fbe26 transparent transparent; animation:arrow .7s ease-in .2s;}


/* ------------------------------
 * 60.2 Base -> Staff area 
------------------------------ */
/*box*/
.staff-area {width:1080px; margin:0 auto;}
.staff-area.top {padding-top:50px;}
.staff-box {position:relative; display:block; width:200px; height:200px; padding:20px 20px 0; background:#fff; border:1px solid #e1f1fc; border-radius:5px; color:#222; cursor:pointer;}
.staff-box.left {margin-right:20px;}
.staff-box.title-box {padding:0; border:none; cursor:default;}
.staff-area-box {display:table-cell; width:200px; height:200px; text-align:center; vertical-align:middle; background:#3db5e4; color:#fff; border-radius:5px;}
.staff-area-box b {font-size:180%; font-weight:bold;}
.staff-area-box span {display:block; font-size:160%; letter-spacing:2px;}
.staff-area-box.gas {background:#ea9b15;}
.staff-area-box.reform {background:#7fbe26;}
/*box -> staff*/
.staff-box .photo,
.staff-box .photo img {width:90px; height:90px; border-radius:5px;}
.staff-in {padding-top:8px; font-size:140%; line-height:1.5;}
.staff-name {padding-top:7px; text-align:right; line-height:1;}
.staff-name span {font-size:80%; padding-right:7px;}
.staff-box .care {position:absolute; top:20px; right:15px; width:50px; height:61px;}
/*box -> hover*/
.staff-box.link,
.staff-box.link img {transition:all .2s ease-in; -webkit-transition:all .2s ease-in;}
.staff-box.link.open,
.staff-box.link:hover {border-color:#3db5e4; color:#3db5e4}
.staff-box.link.gas.open,
.staff-box.link.gas:hover {border-color:#ea9b15; color:#ea9b15;}
.staff-box.link.reform.open,
.staff-box.link.reform:hover {border-color:#7fbe26; color:#7fbe26;}
.staff-box.link.open .photo img,
.staff-box.link:hover .photo img {filter:brightness(120%)}
/*openBox*/
.staff-fix {position:relative; z-index:10; margin-top:20px;}
.staff-big {position:absolute; top:0; left:0; z-index:20; overflow:hidden; width:100%; height:0px; margin-bottom:20px; background:#fff; 
/*transition:height .3s ease-in; -webkit-transition:height .3s ease-in;*/
}
.staff-big.open {position:relative; height:auto; min-height:400px; z-index:100;}
.staff-big .staff-big-box {opacity:0; transition:opacity .3s ease-in; -webkit-transition:opacity .3s ease-in;}
.staff-big.open .staff-big-box {opacity:1;}
/*openBox -> text*/
.staff-big-box {position:relative; width:1080px; height:100%; margin:0 auto;}
.staff-big-box .staff-photo {width:470px; height:340px; position:absolute; top:30px; left:0; border-radius:5px; background-repeat:no-repeat;
background-position:left top; background-size:470px 340px;}
.staff-text-box {padding:40px 20px 0 520px;}
.staff-text-box.gas {padding-top:120px;}
.staff-caption {font-size:180%; font-weight:bold; color:#3db5e4;}
.staff-text-box.gas .staff-caption {color:#ea9b15;}
.staff-text-box.reform .staff-caption {color:#7fbe26;}
.staff-text {padding-top:30px;}
.staff-text-box.gas .staff-text {padding-top:40px;}
.staff-text > .left {width:45%;}
.staff-text > .right {width:55%;}
.staff-text .right p {font-size:140%;}
.staff-text .right span {width:3.5em; display:inline-block;}
.staff-position-main {padding-bottom:18px; font-size:140%;}
.staff-position-main b {display:block;}
.staff-name-main span {padding-right:10px; font-size:140%;}
.staff-name-main strong {font-size:180%; font-weight:bold;}
.staff-comment {margin:20px 0; padding:15px 20px; background:#eee; border-radius:5px; line-height:1.5;}

/* ------------------------------
 * 60.2 Base -> Base Link
------------------------------ */
.linkbox.small {border:2px solid #3db5e4}
.office-name.small {line-height:1; padding:12px 33px;}
.office-name.small span {padding-bottom:10px;}
.office-name.small:before {position:absolute; z-index:20; content:''; top:37px; right:15px; width:18px; height:18px; border:2px solid; border-color:#fff #fff transparent transparent; transform:rotate(45deg);}
.office-name.small:after {position:absolute; z-index:-1; content:''; top:0; left:0; width:0%; height:100%; border-radius:5px; background:#fff; transition:all .3s ease; -webkit-transition:all .3s ease;}
/*gas-reform*/
.linkbox.small.gas {background:#ea9b15; border-color:#ea9b15;}
.linkbox.small.reform {background:#7fbe26; border-color:#7fbe26;}
/*hover*/
.linkbox.small:hover .office-name {color:#3db5e4;}
.linkbox.small.gas:hover .office-name {color:#ea9b15;}
.linkbox.small.reform:hover .office-name {color:#7fbe26;}
.linkbox.small:hover .office-name:before {animation:linkboxArrow .7s ease-in .1s; border-color:#3db5e4 #3db5e4 transparent transparent;}
.linkbox.small.gas:hover .office-name:before {border-color:#ea9b15 #ea9b15 transparent transparent;}
.linkbox.small.reform:hover .office-name:before {border-color:#7fbe26 #7fbe26 transparent transparent;}
.linkbox.small:hover .office-name:after {width:100%;}
/*disabled*/
.linkbox.small.disabled {pointer-events:none; padding-left:32px; background:#fff; color:#3db5e4;}
.linkbox.small.gas.disabled {color:#ea9b15;}
.linkbox.small.reform.disabled {color:#7fbe26;}
.linkbox.small.disabled .office-name.small:before {left:-22px; border-color:#3db5e4 #3db5e4 transparent transparent;}
.linkbox.small.gas.disabled .office-name.small:before {border-color:#ea9b15 #ea9b15 transparent transparent;}
.linkbox.small.reform.disabled .office-name.small:before {border-color:#7fbe26 #7fbe26 transparent transparent;}

/* ------------------------------------------------------------
 * 70.0 gray Common Table -> Recruit / overview / Contact
------------------------------------------------------------ */
.table-gray,
.table-gray caption,
.table-gray th, 
.table-gray td {border:1px solid #e1f1fc;}
.table-gray caption {border-bottom:none; padding:15px 20px; font-size:180%; text-align:center; color:#3db5e4; background:#e1f1fc; line-height:1; letter-spacing:3px;}
.table-gray th, 
.table-gray td {padding:15px 20px; font-size:160%; font-weight:normal;}
.table-gray th {background:#f9f9f9; border-right:none;}
.table-gray td {background:#fff; border-left:none;}

/* ------------------------------
 * 70.0 Recruit
------------------------------ */
.recruit-box {margin-top:50px;}
/*anchor-botton*/
.scroll-botton {margin-top:45px;}
.scroll-botton a {position:relative; display:block; float:left; width:360px; padding:10px 0 28px; text-align:center; font-size:180%; border:1px solid #e1f1fc; border-right:none; background:#fff; letter-spacing:2px;}
.scroll-botton a:nth-child(3) {border-right:1px solid #e1f1fc;}
.scroll-botton a:before {position:absolute; content:''; left:calc(50% - 7px); bottom:15px; width:12px; height:12px; border:2px solid; border-color:transparent #3db5e4 #3db5e4 transparent; transform:rotate(45deg)}
.scroll-botton a:hover {background:#3db5e4; color:#fff;}
.scroll-botton a:hover:before {border-color:transparent #fff #fff transparent; animation:recruitBotton .7s ease-in}
@keyframes recruitBotton {
0% {bottom:15px}
25% {bottom:10px}
50% {bottom:15px}
75% {bottom:10px}
100% {bottom:15px}
}
/*table*/
.recruit-box .table-gray {margin-top:45px;}
.recruit-box .table-gray.way,
.recruit-box .table-gray.way th,
.recruit-box .table-gray.way td {margin-top:0; border-top:none;}
.recruit-box th {width:11em;}
.table-gray td.recruit-attention {text-align:center; font-size:100%;}
/*form*/
.recruit-box .link-botton {padding-top:30px;}
/*no-recruit*/
.no-recruit-cap,
.no-recruit-text {text-align:center;}
.no-recruit-cap {padding:50px 0 30px; font-size:300%; color:#3db5e4;}
.no-recruit-text {padding-bottom:20px;}

/* ------------------------------
 * 70.0 Contact Form
------------------------------ */
.contactlead-sup {font-size:14px; font-weight:normal;}
/*table*/
.table-gray.contact-table {margin-top:45px;}
.table-gray.contact-table.inner {margin-top:0;}
.table-gray.contact-table .agreement {display:none;}
.lead-text.domain-attention {font-size:140%; font-weight:normal;}
/*form*/
.table-gray.contact-table th {width:20em; position:relative;}
.table-gray.contact-table th span {position:absolute; right:1.5em; color:#3db5e4;}
.table-gray.contact-table.gas th span {color:#ea9b15;}
.table-gray.contact-table th .br {display:block;}
.table-gray.contact-table td {font-size:100%}
.table-gray.contact-table td .error {margin-top:5px; padding:0 10px; font-size:150%; font-weight:bold;}
.contact-attention {display:block; padding:10px 0 0 10px; color:#999; font-size:140%;}
.contact-table .attention-list {margin:15px 0 0 10px; font-size:140%; color:#999;}
.contact-table input {font-size:160%; padding:3px 5px; border:1px solid #ddd;}
.mwform-radio-field-text {font-size:160%;}
.mwform-radio-field.horizontal-item {margin-right:30px;}
.contact-table input[type=text],
.contact-table input[type=email] {width:50%;}
.contact-table input[name=adress],
.contact-table input[name=adress-after] {width:90%;}
.contact-table input[name=mail-check] {margin-top:10px;}
.contact-form input[name=post-zip] {width:9em;}
.mwform-tel-field input.tel-after[type=text] {width:4em;}
.contact-table textarea[name=note] {width:90%; height:200px; padding:3px 5px; border:1px solid #ddd; box-shadow:none; font-size:160%;}
/*select - date*/
.contact-table input.datepicker {position:relative; z-index:3; width:210px; height:38px; background:transparent;}
.dayWrap {position:relative; display:inline-block;}
.dayWrap::before {content:''; position:absolute; z-index:1; top:0; right:0; width:30px; height:38px; background-color:#999;}
.dayWrap::after {content:''; position:absolute; z-index:2; top:0; right:0; width:30px; height:100%; background-image:url(/img/icon_calendar.png); background-size:24px; background-position:3px 7px; background-repeat:no-repeat;}
/*select - time*/
.contact-table select.tel-time {-webkit-appearance:none; -moz-appearance:none; appearance:none; border:1px solid #ddd; font-size:160%;
position:relative; z-index:1; height:38px; padding:3px 40px 3px 15px; background:transparent; border-radius:0;}
.contact-table select.tel-time::-ms-expand {display:none;}
.selectWrap {position:relative; display:inline-block; margin-left:20px;}
.selectWrap::before{content:''; position:absolute; z-index:0; top:0; right:0; width:30px; height:38px; background:#999; border-radius:0;}
.selectWrap::after{content:''; position:absolute; z-index:0; top:17px; bottom:0; right:6px; width:0; height:0; margin:0 auto;
border-style:solid; border-width:9px 9px 0 9px; border-color:#fff transparent transparent transparent;}
/*select - preview*/
.mw_wp_form_preview span.must-more {display:none!important}
.mw_wp_form_preview .selectWrap {margin-left:10px;}
.mw_wp_form_preview .selectWrap::before,
.mw_wp_form_preview .selectWrap::after,
.mw_wp_form_preview .dayWrap::before,
.mw_wp_form_preview .dayWrap::after {display:none;}
/*hide-select*/
.hidecell {display:none;}
/*iframe*/
.privacyIframe {overflow:auto; width:1080px; height:240px; margin:30px auto 0; padding:30px 30px 25px; border:1px solid #e1f1fc; background:#fff; border-radius:5px; letter-spacing:2px;}
.privacyIframe h3 {padding-bottom:25px; font-size:180%; text-align:center; color:#3db5e4; font-weight:bold;}
.privacyIframe h4 {padding-top:20px; font-size:130%; font-weight:bold; color:#3db5e4;}
.privacyIframe p {font-size:130%;}
.privacyIframe p.list {margin-top:10px;}
.privacyIframe p span {color:#3db5e4; padding-right:5px;}
.privacyIframe a.link-blue.arrow:before {top:7px;}
/*checkBox*/
.checkBox {position:relative; padding-top:40px; text-align:center; font-size:180%; letter-spacing:2px;}
.checkBox input[type=checkbox] {display:inline-block; width:20px; height:15px; margin-right:10px;}
.checkBox label {position:relative; display:inline-block; margin-right:12px; cursor:pointer;}
@media (min-width: 1px) {
.checkBox input[type=checkbox] {display:none; margin:0;}
.checkBox label {padding-left:40px;}
.checkBox label:before {content:""; position:absolute; top:50%; left:0; display:block; width:24px; height:24px; margin-top:-13px; background:#fff; border:2px solid #3db5e4;}
.checkBox label.show:after {content:""; position:absolute; display:block; top:50%; left:0; margin-top:-15px; width:25px; height:16px; border-left:2px solid #3db5e4; border-bottom:3px solid #3db5e4; transform:rotate(-53deg);}
}
#checkBoxError {display:block; text-align:center;}
#checkBoxError .error {display:inline-block; margin-bottom:30px; padding:5px 15px; background:#c00; color:#fff; font-weight:bold;}
/*Preview*/
.mw_wp_form_preview .contact-attention,
.mw_wp_form_preview .attention-list,
.mw_wp_form_preview b.recruitSelect,
.mw_wp_form_preview b.gasSelect {display:none;}
.mw_wp_form_preview .table-gray.contact-table td {font-size:160%;}
.mw_wp_form_preview .hidecell {display:table-row;}
.mw_wp_form_preview .hidecell .must-more {display:none;}
.mw_wp_form_preview .lead-text,
.mw_wp_form_preview .must,
.mw_wp_form_preview .privacyIframe,
.mw_wp_form_preview .checkBox {display:none;}
.mw_wp_form_preview .table-gray.contact-table .agreement {display:table-row;}
.mw_wp_form_preview .ConfirmationMail {display:none;}

/* ------------------------------
 * 70.1 Contact Tell-List
------------------------------ */
.area.tell-office-list {}
.area.tell-office-list .caption-box {color:#3db5e4;}
.contact-moving {padding-top:30px;}

/* ------------------------------
 * 70.2 Contact Thanks
------------------------------ */
.thanks-content .lead {height:110px;}
.thanks-content .img {padding:30px 0;}
.thanks-content .lead-text {padding:10px 0 20px; font-weight:normal;}
.thanks-content .link-botton {padding-top:20px;}

/* ------------------------------
 * 90.0 About Us 
------------------------------ */
.article.bg-town {background-image:url(/img/about_bg_town.jpg); background-repeat:no-repeat; background-attachment:fixed; background-size:2000px 1828px; background-position-x:0!important; background-position-y:20%;}
@media screen and (max-width:1366px) {.article.bg-town{background-size: 1500px 1371px;}}
.concept-caption {padding-top:100px;}
.concept-area {padding:90px 0;}
.concept-area .img {padding-top:20px;}
.concept-area p {padding:100px 0 600px; text-align:center; line-height:2;}
.vi-area {text-align:center;}
.brand-vi {padding:50px 0 30px;}
.caption-vi {padding-top:50px; font-size:180%; color:#2db3e8;}
.caption-vi.img {padding-bottom:30px;}
.area.bg-white.vi {margin-top:40px; padding:25px; text-align:center;}
.area.bg-white.vi .caption-vi {padding-top:0;}

/* ------------------------------
 * 90.1 Corporate Information 
------------------------------ */
#corporate p {font-size:160%;}
#corporate .caption-box {margin-top:60px;}
#corporate .caption-box.blue {margin-top:30px;}
/*message*/
.message-area,
.message-title {min-height:360px;}
.message-area {background-image:url(/img/corporate_message_image.png); background-size:1280px 360px; background-repeat:no-repeat; background-position:center top; background-color:#fefefe}
.message-title {width:1080px; margin:0 auto; padding:100px 10px 0;}
.header-sign {padding-top:40px;}
.header-sign span {font-size:90%; padding-right:15px;}
.message-text {padding:50px 10px;}
.message-text p {padding-bottom:12px; text-indent:1em;}
.message-text .sign {padding:20px 15px 0; text-align:right;}
.message-text .sign img {margin:-12px 0 0 15px;}
/*philosophy*/
.philosophy {padding-bottom:60px;}
.philosophy .text-img {padding-top:60px; text-align:center;}
.philosophy .area {padding-top:60px;}
.philosophy .column2 {padding:0 5px;}
.philosophy .column4 {margin-right:40px;}
.philosophy .column4.right {margin-right:0;}
.philosophy .column4 p {padding:20px 5px 0;}
.philosophy .catch {width:240px; height:240px; text-align:center; background-image:url(/img/box_bg_white_240.png); background-position:top left; background-size:240px;}
.philosophy .catch img {margin-top:110px;}
/*overview*/
.overview {padding:60px 0;}
.overview th {width:calc(8em + 40px);}
.overview td span {padding-left:1.5em;}
.overview td {position:relative;}
.over-icon {display:block; position:absolute; top:20px; left:390px; width:45px; height:45px; background-repeat:no-repeat; background-position:right top; background-size:contain;}
.over-icon:hover {filter:brightness(110%)}
.over-icon.reform.head {left:443px;}
.over-icon.gas {background-image:url(/img/icon_co_gas.png);}
.over-icon.reform {background-image:url(/img/icon_co_reform.png);}
.overview li {margin-left:1em; list-style-position:outside; list-style-type:disc;}
/*location*/
.location {padding:30px 0;}
.location-map {width:100%; height:400px; margin-top:25px;}
.location p {position:relative; padding:15px 5px 0;}
.location-office {position:absolute; display:inline-block; bottom:3px; right:5px; padding:0 40px 0 30px; line-height:26px; background:#3db5e4; color:#fff; border-radius:20px; border:2px solid #3db5e4;}
.location-office:after {content:''; position:absolute; top:7px; right:15px; width:12px; height:12px; border:2px solid; border-color:#fff #fff transparent transparent; transform:rotate(45deg);}
.location-office:hover {background:#fff; color:#3db5e4;}
.location-office:hover:after {border-color:#3db5e4 #3db5e4 transparent transparent; animation:arrow .7s ease-in .2s;}
.loca-icon {display:block; position:absolute; top:17px; right:5px; width:45px; height:45px; background-repeat:no-repeat; background-position:right top; background-size:contain;}
.loca-icon:hover {filter:brightness(110%)}
.loca-icon.gas.head {right:58px;}
.loca-icon.gas {background-image:url(/img/icon_co_gas.png);}
.loca-icon.reform {background-image:url(/img/icon_co_reform.png);}
/*history*/
.history {margin-top:60px;}
.history:before {content:''; position:absolute; top:0; bottom:0; left:calc(50% - 2px); width:4px; background:#3db5e4;}
.history-box {position:relative; padding:20px 0;}
.history-box.margin {margin-top:50px;}
.history-box.margin30 {margin-top:30px;}
.history-box > section {position:relative; z-index:100; width:500px; padding:20px 25px; background:#fff; border-radius:5px;}
.history-box > section:before,
.history-box > section:after {content:''; position:absolute;}
.history-box > section:before {z-index:-1; top:5px; width:0; height:0; border:20px solid; transform:scaleY(.6);}
.history-box > section.left-box:before {right:-40px; border-color:transparent transparent transparent #fff;}
.history-box > section:after {box-sizing:content-box; z-index:10; top:14px; width:12px; height:12px; border-radius:50%; background:#fff; border:4px solid #3db5e4;}
.history-box > section.left-box:after {left:calc(540px - 10px);}
/*history > design-right*/
.history-box > section.right-box {position:absolute; top:-30px; right:0;}
.history-box > section.right-box:before {left:-40px; border-color:transparent #fff transparent transparent;}
.history-box > section.right-box:after {right:calc(540px - 10px);}
/*history > content*/
.history-year {font-size:160%; color:#3db5e4;}
.history-box p {position:relative; margin-top:5px; padding-left:3em; line-height:1.5}
.history-box p span {position:absolute; top:0; left:0;}
/*period*/
.period {position:relative; z-index:100;}

/* ------------------------------
 * 99.0 Privacy Policy
------------------------------ */
.personalinfo {margin-top:60px; letter-spacing:2px;}
.personalinfo h3,
.personalinfo p,
.personalinfo li {font-size:130%;}
.personalinfo h3 {margin:2em 0 .3em; color:#3db5e4; font-weight:bold;}
.personalinfo li {list-style-type:circle; list-style-position:inside; margin-left:1em;}
.co-info {padding-top:20px;}
.co-info strong {font-weight:bold;}
.personalinfo a.link-blue.arrow:before {top:7px;}

@media screen and (max-width:1300px) {
#yearBox {right:0;}
}

@media screen and (max-width:1024px) {
#header,
#footer,
#title,
.lead,
.article,
.headerContain {min-width:1024px;}
.area,
.section {width:100%; padding-right:12px; padding-left:12px;}
.column2 {width:480px;}
.column3 {width:299px;}
.column3.left {margin-right:20px;}
.column4 {width:225px;}
/*header*/
.headerContain .nav-main > a {margin:15px 12px 10px;}
#yearBox {display:none;}
body.home #fixmenu-navigation {margin-right:0px;}
/*footer*/
.footer-banner {width:180px;}
/*index*/
#yearBox {top:-30px;}
.area.index-main-menu a {width:50%; margin-left:-5px;}
.area.index-main-menu .botton {left:5px;}
.linkbox {width:231px;}
.blog-list li {width:216px;}
.blog-thumbnail {width:216px; height:216px;}
.index-linkbox .left {margin-right:20px;}
.index-linkbox .second-line {width:735px;}
.infobox {width:315px;}
.infobox img {height:auto;}
/*gas*/
.slideline {padding-left:20px;}
.inner-index-menu {width:100%; padding:20px 12px 0;}
.inner-index-menu a.left {margin-right:20px;}
.inner-index-menu a {width:231px; height:231px; background-size:231px;}
/*basic-knowledge*/
#gas.gas-knowledge .img-recovery img {width:186px;}
#gas.gas-knowledge .img-recovery.ipad img {width:auto;} 
/*payment*/
.howpayment .caption-pay {padding:7px;}
#gas.gas-payment .caution-box .right {width:730px;}
/*reform*/
.slider-box .image-only {background-size:1000px 463px;}
.reform .slider-box .image-only {background-size:cover;}
.slider-box li {height:480px;}
.slider-box li.ipad {background-position:20px 50%;}
/*example*/
.infobox.left {margin-right:20px;}
/*example-list*/
.example-list {width:100%;}
.example-list-area {padding-right:12px; padding-left:12px;}
.example-list li {width:231px; margin-right:20px;}
.infobox.example,
.infobox.example img {width:231px; heigt:231px;}
/*example-single*/
.example-single-box .left {width:400px;}
.example-single-box .before {width:390px; height:390px; background-size:390px;}
.example-single-box .right {width:550px; height:550px; background-size:550px;}
/*reform-menu*/
.marugoto-excerpt .text {width:400px;}
/*marugotoReformPack*/
.marugoto-main {padding-right:15px; padding-left:15px;}
.area.bg-white.bg-marugoto.st .left,
.area.bg-white.bg-marugoto.st .right,
.area.bg-white.bg-marugoto.pre .left,
.area.bg-white.bg-marugoto.pre .right {width:48%;}
/*step*/
.flow-box.step01 {background-position:750px 50%;}
.flow-box.step02 {background-position:720px 50%;}
.flow-box.step03 {background-position:712px 50%;}
.flow-box.step04 {background-position:750px 50%;}
.flow-box.step05 {background-position:720px 50%;}
/*ofice*/
.staff-area {width:100%; padding-right:18px; padding-left:20px;}
.staff-box {width:181px;}
.staff-big-box {width:100%;}
.staff-big-box .staff-photo {width:460px;}
.staff-text-box {padding-left:500px;}
.staff-big-box .staff-photo {border-radius:0 5px 5px 0;}
#title-office:before {left:calc(50% - 80px); width:calc(50% + 80px);}
.tel-office .right {width:580px;}
.tel-box {margin-left:40px;}
/*voice*/
.voice-list li {width:231px; margin-right:20px;}
.voice-list .imglink {width:231px; height:231px; background-size:231px;}
.voice-list .excerpt {padding-top:25px;}
.modal {width:920px;}
.modal .text-box {width:480px;}
/*corporate-information*/
.message-title {width:100%; padding:100px 50px 0;}
.message-text {padding:50px 20px}
.philosophy .column4 {margin-right:20px;}
.location {padding-right:0!important; padding-left:0!important;}
.history-box > section {width:465px;}
.history-box > section.left-box:after {left:calc(540px - 58px)}
.history-box > section.right-box:after {right:calc(540px - 57px)}
.history-box > section.left-box:after {left:calc(540px - 50px);}
.history-box > section.right-box:after {right:calc(540px - 50px);}
/*contact*/
.privacyIframe {width:100%;}
}