@charset "utf-8";
/*------------------------------------
 
CSS Information
 
  Site URL: http:www.kitanihon-gas.co.jp/
  File name: top.css
  Summary: index styles
  Created: 
  Last update: 2011.11.28
  Author: 
 
  Order of description
  	=01.TOC
	=02.Top-body
		=02-1.New-info
		=02-2.C-Guide
 
 
------------------------------------*/

body {
	font-family: "メイリオ",Meiryo,"Osaka","ヒラギノ角ゴPro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック",sans-serif;
	font-size:14px!important;
	line-height: 1.8!important;
}
@media only print, only screen and (min-width: 641px){
a:hover img{
    opacity:0.50;
    filter: alpha(opacity=50);
}
}
a img{
	-webkit-transition: 0.4s;
	-moz-transition: 0.4s;
	-ms-transition: 0.4s;
	-o-transition: 0.4s;
	transition: 0.4s;
}



/* splash */
#splash{
	display: none;
	position: absolute;
	width: 100%;
	background: url(../../exhibition/img/bg-splash.png) repeat 0 0;
	z-index:10000;
}
#splash-main{
	margin: 50px auto 0;
	text-align: center;
}

/* 	sns	======================================================================================== */

#sns-btn{
	width: 980px;
	margin: 0 auto;
	padding: 10px 0;
    text-align: right;
}
#sns-btn span {
    display: inline-block;
    *display:inline;
    overflow: hidden;
    line-height: 1;
    vertical-align:top;
    zoom:1;
}
#sns-btn span img{
    max-width:100%;
    height:auto;
    vertical-align: text-top;
}
#sns-btn span#btn_facebook {
    width: 130px;
}
#sns-btn span#btn_google {
   /*width: 58px;*/
}
#sns-btn span#btn_twitter {
    width: 68px;
}
#sns-btn span#btn_line {
    width: 82px;
}
#sns-btn span#btn_line a{
    display: block;
    margin: -2px 0 0;
}

/* 	slideshow	======================================================================================== */
#slideshow{
	margin: 0 0 20px;
	padding: 0 0 10px;
	overflow: hidden;
}
#slideshow .slick-slide img{
	width: 980px;
}

/* 	=01.body	======================================================================================== */

#Container #TOC{
	width:980px;
	height:444px; margin-bottom:15px;
	position:relative;
	font-size:0;
	line-height:0;
	background: url(../images/home/main/back.png) no-repeat left top;
}



/* 	=02.Top-body	======================================================================================== */



#Container #Top-body{
	width:980px;
	margin:0 auto;
	padding-bottom:50px;
	/*font-size: 14px;*/
	overflow:hidden;
}
#Container #Top-body #New-info{
	width:700px; float:left;
}


#Container #Top-body #Top-side{
	width:225px; float:right;
}
#Container #Top-body #CC-Guide{
	margin: 2% 0 2%;
	border:1px solid #191970;
	background:#FFF url(../images/home/campaign/cam_back.png) repeat left top;
	-moz-box-shadow:2px 2px 2px 2px #CCC;
	-webkit-box-shadow:2px 2px 2px 2px #CCC;
	box-shadow:2px 2px 2px 2px #CCC;
	filter: progid:DXImageTransform.Microsoft.Shadow(strength=2, direction=135, color='#CCCCCC');
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(strength=2, Direction=135, Color='#CCCCCC')";
	/*Shadows look very different in IE (Only cardinal directions supported)*/
	/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
	/*Element should have a background-color*/
	/*All filters must be placed together*/
	/*IE 7 AND 8 DO NOT SUPPORT BLUR PROPERTY OF SHADOWS*/
	/*IE 7 AND 8 DO NOT SUPPORT SPREAD PROPERTY OF SHADOWS*/
	// float:left;
	// width:50%;
}
#Container #Top-body #C-Guide{
	margin: 0 0 10px;
	border:1px solid #D50000;
	background:#FFF url(../images/home/trouble/back.png) repeat left top;
	-moz-box-shadow:2px 2px 2px 2px #CCC;
	-webkit-box-shadow:2px 2px 2px 2px #CCC;
	box-shadow:2px 2px 2px 2px #CCC;
	filter: progid:DXImageTransform.Microsoft.Shadow(strength=2, direction=135, color='#CCCCCC');
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(strength=2, Direction=135, Color='#CCCCCC')";
	/*Shadows look very different in IE (Only cardinal directions supported)*/
	/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
	/*Element should have a background-color*/
	/*All filters must be placed together*/
	/*IE 7 AND 8 DO NOT SUPPORT BLUR PROPERTY OF SHADOWS*/
	/*IE 7 AND 8 DO NOT SUPPORT SPREAD PROPERTY OF SHADOWS*/
}
#Container #Top-body h2.ttl{
	margin: 0 0 10px;
	padding: 2px 0 17px 10px;
	border-left: 3px solid #19740a;
	border-bottom: 1px solid #c8c8c8;
}


/* 	top-bnr
--------------------------------------------------------------------------------------------------------- */
#Top-bnr{
	margin: 5px 0 30px;
}
#Top-bnr ul{
	margin: 0 -10px 0 0;
	overflow: hidden;
}
#Top-bnr ul li{
	float: left;
	width: 318px;
	margin: 0 10px 10px 0;
}

#Top-bnr ul li img{
	border:1px #ccc solid;
}


/*　under topics bnr
--------------------------------------------------------------------------------------------------------- */

div#Contents-bnr img{
	margin:15px auto 0;
}



/* 	=02-1.New-info
--------------------------------------------------------------------------------------------------------- */

#Container #Top-body #New-info .news-list{
	margin: 0 0 50px;
}

 
/* 	=02-2.C-Guide
--------------------------------------------------------------------------------------------------------- */

#Container #Top-body #CC-Guide h2{
	width:225px; height:44px;
	text-align:left; margin-bottom:10px;
	background: url(../images/home/campaign/cam_ttl.png) no-repeat left top;
}

#Container #Top-body #CC-Guide h2 span{
	position:absolute;
	width:0; height:0;
	overflow:hidden;
}

#Container #Top-body #CC-Guide dd{
	text-align:center;
}

#Container #Top-body #CC-Guide ul.sefety{
	width:200px;
	margin:0 0 0 12px;
	padding:5px 0;
}

#Container #Top-body #CC-Guide ul.sefety li{ margin-bottom:10px;}

#Container #Top-body #CC-Guide dd #campaign_code{ 
  font-family:'メイリオ', 'Meiryo', sans-serif;
  width:60%;
  font-size:1.1em;
}

#Container #Top-body #CC-Guide  .btn-square-so-pop {
  position: relative;
  display: inline-block;
  padding: 0.2em 0.5em;
  text-decoration: none;
  color: #FFF;
  background: #191970;/*色*/
  border-radius: 4px;/*角の丸み*/
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
  font-weight: bold;
  border: solid 2px #191970;/*線色*/
}

#Container #Top-body #CC-Guide .btn-square-so-pop:active {
  /*押したとき*/
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}

#Container #Top-body #C-Guide h2{
	width:225px; height:44px;
	text-align:left; margin-bottom:10px;
	background: url(../images/home/trouble/ttl.png) no-repeat left top;
}

#Container #Top-body #C-Guide h2 span{
	position:absolute;
	width:0; height:0;
	overflow:hidden;
}

#Container #Top-body #C-Guide ul.sefety{
	width:200px;
	margin:0 0 0 12px;
	padding:5px 0;
}

#Container #Top-body #C-Guide ul.sefety li{ margin-bottom:10px;}

#Container #Top-body #Top-side .mirai{
	margin: 0 0 15px;
	padding: 10px;
	text-align: center;
	border: 1px solid #c8c8c8;
	background: #fff9e3;
}
#Container #Top-body #Top-side .mirai a{
	display: block;
	width: 150px;
	margin: 0 auto;
}
#Container #Top-body #Top-side .mirai a span{
	display: block;
	margin: 5px 0 0;
	padding-left: 10px;
	font-size: 12px;
	text-align: left;
	background: url(../images/arrow.png) no-repeat 0 0.6em;
}
#Container #Top-body #Top-side ul.side-bnr{
	margin-top:20px;
}

#Container #Top-body #Top-side .side-bnr li{
	margin: 0 0 15px;
	padding-right:1px;
	text-align:center;
}
#Container #Top-body #Top-side .side-bnr li a span{
	display: block;
	margin: 5px 0 0;
	padding-left: 10px;
	font-size: 12px;
	background: url(../images/arrow.png) no-repeat 0 0.6em;
}

#Container #Top-body #Top-side .side-bnr li img{
	border:1px #ccc solid;
}


/* 	maker
--------------------------------------------------------------------------------------------------------- */
#maker{
	margin: 40px 0 0;
	padding: 15px;
	border: 1px solid #c8c8c8;
	width:740px;
}
#maker h2{
	margin: 0 0 20px;
}
#maker ul{
	// width: 930px;
	width:780px;
	margin: 0 -40px 0 0;
	overflow: hidden;
}
#maker ul li{
	float: left;
	width: 146px;
	margin: 0 40px 20px 0;
}

/* 	タブレット
--------------------------------------------------------------------------------------------------------- */
@media screen and (max-width: 999px){
#Container #Top-body h2.ttl a{
	float: right;
	padding-left: 10px;
	background: url(../images/arrow.png) 0 0.6em no-repeat;
	font-size:1.5em;
}
#Container #Top-body #New-info .news-list dt{
	float: left;
	width: 10em;
	padding: 10px 5px;
	font-size:1.5em;
}
#Container #Top-body #New-info .news-list dd{
	padding: 10px 0 10px 16em;
	// border-bottom: 1px dotted #c8c8c8 ;
	border-bottom: 1px dotted #6C6C6C ;
}
#Container #Top-body a{
	// color: #39a727;
	color: #008226;
	text-decoration:none; 
	font-size:1.0em;
	font-family:"Meiryo";
}
#Container #Top-body a:hover{
	color: #ff6400;
	// text-decoration: none;
	text-decoration: underline;
	font-size:1.0em;
	font-family:"Meiryo";
}
}


/*パソコン
--------------------------------------------------------------------------------------------------------- */
@media screen and (min-width: 1000px){
#Container #Top-body h2.ttl a{
	float: right;
	padding-left: 10px;
	background: url(../images/arrow.png) 0 0.6em no-repeat;
	// font-size:1.2em;
}
#Container #Top-body #New-info .news-list dt{
	float: left;
	width: 10em;
	padding: 10px 5px;
	// font-size:1.2em;
}
#Container #Top-body #New-info .news-list dd{
	padding: 10px 0 10px 11em;
	// border-bottom: 1px dotted #c8c8c8 ;
	border-bottom: 1px dotted #6C6C6C ;
}
#Container #Top-body a{
	// color: #39a727;
	color: #008226;
	text-decoration:none; 
	font-size:1.1em;
	font-family:"Meiryo";
}
#Container #Top-body a:hover{
	color: #ff6400;
	// text-decoration: none;
	text-decoration: underline;
	font-size:1.1em;
	font-family:"Meiryo";
}
}