/* ===================================================================
CSS information

 file name  :index.css
 style info :TOP
=================================================================== */
body {font-size: 14px;}
a,a:link,a:active,a:visited {
	color: #333;
	text-decoration: none;
}
a:hover {
	color: #333;
	text-decoration:underline; 
}



/*----------------------------------------------------
header (top)
----------------------------------------------------*/
#osakagas #hnav_upper {
/*width: 790px;*/
}
#osakagas .hnav_upper-english {
	border-left: 1px solid #ccc;;
}
div#SS_suggest.SS_suggest {
	z-index: 99999;
}

/*----------------------------------------------------
gnav (top)
----------------------------------------------------*/
#osakagas #gnav {
	position: relative;
	z-index: 9999;
}

#osakagas #gnav > ul > li > a {
	padding: 18px 27px 20px;
}
#osakagas #gnav > ul > li#g_top-product > a {
	padding: 18px 32px 20px;
}
#osakagas #gnav > ul > li > a:before {
	height: 30px;
	top: 14px;
}
#osakagas #gnav > ul > li:first-child > a:after {
	height: 30px;
	top: 14px;
}
#osakagas #gnav > ul > li:hover {
    border-bottom: 3px solid #fff;
}


/*----------------------------------------------------
megamenu
----------------------------------------------------*/
#megamenu_wrapper,
.megamenu {
	position: absolute;
	width: 950px;
	height: 340px;
	left: 50%;
	top: 58px;
	margin-left: -475px;
	background-color: #fff;
	text-align: left;
	display: none;
	z-index: 9999;
}
#megamenu_wrapper {
	display: none;
}
.megamenu {
	background-color: #b9b9b9;
}
#mm-family {
	background-color: #7db7df;
	width: 727px !important;
}
#mm-products {
	background-color: #87cca6;
}

.megamenu .inner {
	width: 942px;
	padding: 24px 0 0 8px;
}

.megamenu dt {
	width: 907px;
	margin: 0 0 14px 2px;
	background-color: #fff;
	padding: 10px 10px 10px 14px;
	border-radius: 2px;
	overflow: hidden;
}
.megamenu dt img {
	float: left;
}
.megamenu dd {
	overflow: hidden;
}
.megamenu dd li {
	float: left;
	width: 310px;
	height: 64px;
	margin: 0 3px 3px 0;
}
.megamenu dd li a {
	display: block;
	width: 100%;
	height: 46px;
	margin: 2px 0 0 0;
	padding: 18px 0 0 0;
	font-size: 20px;
	font-weight: bold;
	letter-spacing: -0.05em;
	background: url(/img/top/mm-btn-bg.png) no-repeat 0 0;
}
.megamenu dd li a:hover {
	text-decoration: none;
	background: url(/img/top/mm-btn-bg-yellow.png) no-repeat 0 0;
}
#g_top-product .megamenu dd li a:hover {
	background: url(/img/top/mm-btn-bg-green.png) no-repeat 0 0;
}

.megamenu dd li a span {
	display: block;
	margin-left: 16px;
	padding-left: 12px;
	background: url(/img/top/mm-arrow-blue.png) no-repeat 0 9px;
	text-align: left;
}
#mm-products dd li a span {
	background-image: url(/img/top/mm-arrow-green.png);
}
.megamenu dd li a span small {
	font-size: 15px;
}

#mm-family .inner {
	width: 718px;
}

#mm-family dl {
	width: 714px;
	float: left;
}
#mm-family dt {
	width: 683px;
}
#mm-family dd li {
	width: 235px;
}
#mm-family dd li a {
	background: url(/img/top/mm-btn_s-bg.png) no-repeat 0 0;
}
#mm-family dd li a:hover {
	background: url(/img/top/mm-btn_s-bg_blue.png) no-repeat 0 0;
}
#mm-family .loginArea {
	margin: 0 0 0 6px;
}
.mm_arrow {
	display: block;
	margin-top: -1px;
	width: 15px;
	height: 7px;
	background: url(/img/top/mm_arrow.gif) no-repeat 0 0;
}

#mm-family .mm_arrow {
	margin-left: 100px;
}
#mm-products .mm_arrow {
	margin-left: 350px;
}
#mm-company .mm_arrow {
	margin-left: 550px;
}
#mm-ir .mm_arrow {
	margin-left: 660px;
}
#mm-saiyou .mm_arrow {
	margin-left: 770px;
}
#mm-rd .mm_arrow {
	margin-left: 885px;
}





/*----------------------------------------------------
slider (top)
----------------------------------------------------*/
#mainArea
{
    margin-top: 30px;
    padding-bottom: 30px;


}
#mainArea > div
{
    display: table-cell;

    vertical-align: top;

    border: 1px solid #ccc;
}
#mainArea div:after
{
    display: none;
}
#mainArea .slickArea
{
    position: relative; 

    border-right: none;
    border-radius: 4px 0 0 4px;


}
#mainArea .loginArea
{
    border-radius: 0 4px 4px 0;
}
#mainArea *
{
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

#osakagas .slickArea
{
    overflow: visible; 

    width: 740px;
    padding: 0;

    background-color: transparent;
}


#osakagas .slick
{
    width: 738px;
    margin: 0;

    background-color: transparent;

}

#osakagas .slick-list
{
    border-radius: 4px 0 0 4px;

    overflow:hidden;
}

#osakagas .slick-slider
{
    height: 100%;
}

#osakagas .slick-dots
{
    position: absolute;
    top: 320px;
    
}

#osakagas .slick-slide a
{
    overflow: hidden; 

    background: #fff;
}

.slick-dots
{
    bottom: 0; 

    height: 12px;
}
.slick-dots li
{
    width: 12px;
    height: 12px;
    margin: 0 5px; 

    vertical-align: top;
}
.slick-dots li button
{
    width: 12px;
    height: 12px;

    border-radius: 50%; 
    background: none;
    background-color: #c2c2c2 !important;
}
.slick-dots li.slick-active button
{
    background: none;
    background-color: #006fbc !important;
}

.slick-arrow
{
    top: 320px;

    width: 10px;
    height: 13px;
    margin: 0;
}
.slick-arrow:hover
{
    opacity: 1 !important;
}

.slick-prev
{
    left: 50%;

    margin-left: -60px;

    background: url('/img/top/slider_controls.png') no-repeat left top;
}
.slick-prev:hover
{
    background-position: left bottom;
}

.slick-next
{
    right: 50%;

    margin-right: -60px;

    background: url('/img/top/slider_controls.png') no-repeat right top;
}
.slick-next:hover
{
    background-position: right bottom;
}

/*----------------------------------------------------
loginArea
----------------------------------------------------*/
.loginArea
{
    width: 212px;
    padding: 13px 0 0;

    text-align: center;

    color: #666; 
    background-color: #f6fbff;
}

/*
.loginArea-inner {
	background-color: #fff;
	padding-top: 10px;
}
*/
.loginArea p
{
    line-height: 19px; 

    margin: 10px 0 8px;
}
.loginArea p span
{
    font-size: 10px; 

    display: block;
}

.loginArea .caption
{
    margin: 0 0 2px;
}

.loginArea ul
{
    margin: 10px 0 0;
}
.loginArea ul li
{
    margin-top: 8px;
}
.loginArea ul li:first-child
{
    margin-top: 0;
}

/*----------------------------------------------------
alertArea
----------------------------------------------------*/
#alertArea
{
    margin-top: 30px;

    border: 1px solid #e96666;
    border-radius: 4px; 
    background-color: #fafafa;
}
#alertArea ul
{
    padding: 13px 10px;
}
#alertArea li
{
    overflow: hidden; 

    min-height: 24px;
    margin-top: 3px;
    padding-left: 40px;
}
#alertArea li:first-child
{
    margin-top: 0;
}
#alertArea li .linkbtn
{
    float: none; 

    margin: 0 0 0 12px;
}
#alertArea ul li.alert
{
    color: #e00; 
    background: url(/img/top/alertArea-icon-alert.png) no-repeat 0 2px;
}
#alertArea ul li.notice
{
    background: url(/img/top/alertArea-icon-notice.png) no-repeat 0 2px;
}



/*----------------------------------------------------
BnrArea
----------------------------------------------------*/

#heroBnrsArea
{
    margin: 30px 0 0;
}
#heroBnrsArea .heroBnrsArea-Inner
{
    width: 950px;
    margin: 0 auto;
}
#heroBnrsArea .bnr_list
{
    overflow: hidden;

    width: 960px;
    margin: -10px -10px 0 0;
}
#heroBnrsArea .bnr_list li
{
    float: left;

    width: 310px;
    margin: 10px 10px 0 0;
}
#heroBnrsArea .bnr_list li a img:hover
{
    opacity: .5; 

    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)';
}



/*----------------------------------------------------
mainInfo
----------------------------------------------------*/
#mainInfo {
	position: relative;
	width: 954px;
	margin: 40px auto 0;
}
#mainInfo h2 {
	margin: 0 2px 20px;
	padding-bottom: 8px;
	border-bottom: 1px solid #bbbbbb;
}
#mainInfo h3 {
	margin: 0 2px 15px;
}
#mainInfo .linkbtn {
	margin-top: 9px;
	margin-left: 2px;
}


#familyArea .family-list ul li,
#emargencyArea ul li {
	margin-top: 1px;
}
#familyArea .family-list ul li:first-child,
#emargencyArea ul li:first-child {
	margin-top: 0;
}

#emargencyArea ul li:first-child {
	margin-bottom: 12px;
}

#emargencyArea {
	position: absolute;
	top: 0;
	right: 0;
}
#emargencyArea ul {
	background: url(/img/top/emergency-bg.gif) no-repeat 0 0;
}


#emargencyArea #emergency-gas {
	margin-bottom: 29px;
}

#emargencyArea #emergency-electricity ul {
	background: url(/img/top/emergency-ele-bg.gif) no-repeat 0 0;
}

#emargencyArea #emergency-electricity ul li:first-child {
	margin-bottom: 0;
}


#emargencyArea ul,
#familyArea .family-list ul {
	padding: 3px;
}
#familyArea .family-list {
	float: left;
	width: 240px;
	margin-right: 11px;
}

#familyArea .linkbtn {
	float: none;
}
#familyArea .family-list .linkbtn {
	width: 209px;
}

#familyArea #family-linkbtn {
	display: inline-block;
}
#familyArea h2 {
	width: 738px;
}
#familyArea h2 .linkbtn {
	margin: 4px 0 0 20px;
	font-weight: normal;
}


#familyArea #family-gas ul {
	background: url(/img/top/family-gas-bg.gif) no-repeat 0 0;
}
#familyArea #family-electricity ul {
	background: url(/img/top/family-electricity-bg.gif) no-repeat 0 0;
}
#familyArea #family-survice ul {
	background: url(/img/top/family-survice-bg.gif) no-repeat 0 0;
}

#familyArea #family-support {
	clear: both;
	padding-top: 31px;
}
#familyArea #family-support .linkbtn {
	float: none;
	margin: -1px 0 0 20px;
	font-weight: normal;
}
#familyArea #family-support ul {
	overflow: hidden;
	float: left;
}
#familyArea #family-support ul li,
#productArea ul li {
	float: left;
	margin-left: 6px;
}

#familyArea #family-support ul {
	margin-bottom: 8px;
}

#familyArea #family-support ul li {
	margin-left: 9px;
}

#networkArea ul li {
	float: left;
}
#familyArea #family-support ul li:first-child,
#productArea ul li:first-child{
	margin-left: 0;
}
#familyArea #family-support ul.sublink{
	margin-left: 16px;
}
#familyArea #family-support ul.sublink li {
	float: none;
	margin: 6px 0 0 0;
	background: url(/img/common/arrow-blue.png) no-repeat 0 5px;
	padding-left: 10px;
	line-height: 20px;
	font-weight: bold;
}
#familyArea #family-support ul.sublink li:first-child {
	margin-top: 0;
}

#productArea,
#networkArea {
	margin-top: 50px;
}
#productArea .linkbtn {
	float: none;
	margin: 4px 0 0 20px;
	font-weight: normal;
}
#productAreaIn,
#networkAreaIn {
	width: 714px;
	float: left;
}

#productAreaIn .mb15 {
	margin-bottom: 15px;
}

#helloOGArea {
	background-color: #fff;
	border: 3px solid #d5d5d5;
	border-radius: 4px;
	float: left;
	height: 170px;
	margin-left: 20px;
	padding: 7px 5px 0px 5px;
	text-align: center;
}

#helloOGArea ul {
	padding-left: 11px;
}

.infoList {
	margin-top: 50px;
}
.infoList .linkbtn {
	margin-left: 10px;
}
.infoList h3 {
	border-bottom: 1px solid #bbbbbb;
	padding-bottom: 10px;
}
#Info-imp {
	padding: 50px 0 25px;
	background-color: #fff6f6;
}


#osakagas #topic-facility {
	position: relative;
	padding-top: 50px;
}
#osakagas #topic-facility:before {
	position: absolute;
	content: " ";
	background-color: #dadada;
	display: block;
	width: 950px;
	height: 1px;
	top: 0px;
	left: 10px;
}
#osakagas #topic-facility ul li {
	margin: 0 0 0 13px;
}
#osakagas #topic-facility ul li:first-child {
	margin: 0 0 0 0;
}


#osakagas #fnav dt {
	min-height: 3.2em;
}



/*----------------------------------------------------
ie 6,7
----------------------------------------------------*/
#osakagas #hnav_upper .hnav_upper-english {
	*float: right;
}

.megamenu {
	_top: 58px;
	*margin-left: -476px !important;
	_height: 350px;
}

.megamenu .linkbtn  {
	*padding: 0px 8px 3px 17px;
	_padding: 3px 8px 0px 17px;
}
.mm_arrow {
	*margin-top: -2px;
	_font-size: 0 !important;
}
.megamenu dd {
	*overflow: visible;
}
.megamenu dd li {
	*width: 310px !important;
	_height: 60px;
	_margin: 2px !important;
	_padding-top: 0px !important;
}
#mm-family dd li {
	*width: 235px !important;
}
.megamenu dd li a span {
	_text-align: left;
}
.megamenu .loginArea {
	_margin-left: 0 !important;
}
.megamenu .loginArea ul {
	_width: 186px !important;
}
.megamenu .loginArea ul li {
	*width: auto !important;
	*float: none !important;
	*height: auto !important;
	_margin: 0 auto 10px !important;
	_padding: 0 !important;
}
#mm-family .inner {
	_width: 723px !important;
}
#mm-family dt {
	_width: 691px;
}
#mm-family dl ul {
	_width: 720px;
}

#osakagas .slick-list {
	_width: 650px !important;
	_height: 248px !important;
	_margin-left: 0 !important;
}
ul.slick-dots {
	*margin-left: 310px;
}

/*fnav*/
#osakagas #fnav_container dl {
	*width: 158px;
	*float: left;
}

.linkbtn-imp,
.linkbtn-imp:hover {
	color: #ee0000;
	background: #fff url(/img/common/icon_importantInformation.png) no-repeat 7px center;
	padding-left: 24px;
	font-weight: bold;
}
a.linkbtn-imp,a.linkbtn-imp:hover,a.linkbtn-imp:active, a.linkbtn-imp:visited{color: #ee0000;}

.linkbtn-nfrm {
	background-color: transparent;
	border: none;
}

/*===================================================================* /
//* exception */
#osakagas div#emergency {
	width: 850px;
	margin: 0 auto 18px auto;
	background: url(/img/index_i/emergency/bg-repeat.gif) repeat-y;
	text-align: center;
}
div#emergencyInner { background: url(/img/index_i/emergency/bg-top.gif) no-repeat top; }
div#emergencyBox {
	padding: 13px 17px 11px 17px;
	background: url(/img/index_i/emergency/bg-bottom.gif) no-repeat bottom;
}
div#emergency dl {
	text-align: left;
	font-weight: bold;
	line-height: 130%;
}
div#emergency dl dt {
	float: left;
	width: 117px;
	height: 16px;
	padding: 3px 0 0 25px;
	background: url(/img/common/icon-emergency.gif) no-repeat left;
	color: #c41b1b;
}
div#emergency dl dd {
	float: right;
	width: 651px;
	padding: 3px 0 0 0;
}
div#emergency dl dd#emergencyInfo { text-align: right; }
div#emergency dl dd#emergencyInfo a { color: #c41b1b; }
div#emergency dl dd#emergencyInfo a:hover { color: #ff4e55; }
div#emergency dl dd#emergencyInfo img{vertical-align:middle;}
dl .important a { color: #d80008; }
dl .important a:hover { color: #ff4e55; }
/* exception */