@charset "utf-8";
/* CSS Document */


/* ************************************************ 
 *	
 *	トップページ
 *	
 * ************************************************ */
section{
	margin:0px !important;
	overflow:hidden;
}
/* スライド============================ */
#top_slide{
	overflow:hidden;
	position: relative;
	position: relative;
	width: 100%;
}
@media only screen and  ( max-width : 896px ) {
	#top_slide{
		margin-top:55px;
	}
}
.top_gallery .swiper-slide .s-img{
	position: absolute;
	top: 0%;
	left: 0%;
	z-index:2;
}
.swiper-slide-active .s-img {
  animation: slideTextFade 2.75s ease 0s 1 normal;
}

@keyframes slideTextFade {
  0%, 25% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}




/* ************************************************ 
 *	
 *	バナー
 *	
 * ************************************************ */
.top_banner2{
	padding:2em 0em;
}
@media print, screen and ( min-width : 768px ) {
	.top_banner_ul,
	.top_banner_ul2{
		margin-left:-1%;
		margin-right:-1%;
	}
	.top_banner_ul li{
		width:48%;
		margin:1%;
		float:left;
		text-align:left;
	}
	.top_banner_ul2 li{
		width:31%;
		margin:1%;
		float:left;
		text-align:left;
	}
}
@media only screen and  ( max-width : 768px ) {
	.top_banner_ul li:first-child.
	.top_banner_ul2 li:first-child{
		margin-bottom:0.5em;
	}
	.top_banner_ul li,
	.top_banner_ul2 li{
		max-width:90%;
		padding-left:5%;
		margin-bottom:0.5em;
		text-align:center;
	}
}

/* ------------------------top_banner2------------------------- */
.top_banner2{
	background:#f5f5f5;
}
/* ************************************************ 
 *	
 *	お知らせ
 *	
 * ************************************************ */
.top_news2{
	background:#000;
}
.top_news2 a,
.top_news2 h3{
	color:#fff;
}

.top_news_ul{
	margin-top:3em;
}
.top_news_ul li{
	border-bottom:1px solid #333;
		position: relative;
}
.top_news_ul li a{
	background:url(images/common/icon_white.png) 0% 50% no-repeat;
	-moz-background-size:8px 15px;
	background-size:8px 15px;
	display:block;
	padding:0.5em 0.5em 0.5em 2em;
	-webkit-transition: 0.3s ease-in-out;  
	-moz-transition: 0.3s ease-in-out;  
	-o-transition: 0.3s ease-in-out;  
	transition: 0.3s ease-in-out;
}
.top_news_ul li span.days{
	color:#ccc;
	font-size:80%;
}
.cat_slug_icon,
.cat_slug_icon2{
	border-radius: 2px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	background:#2b3a6e;
	color:#fff;
	display:inline-block;
	font-size:70%;
	width:8em;
	text-align:center;
	position: relative;
	top:-2px;
}
.cat_slug_icon2{
	background:#009b57;
}

@media print, screen and ( min-width : 768px ) {
	.top_news_ul li a:hover{
		background:#333 url(images/common/icon_white.png) 0.5em 50% no-repeat;
		-moz-background-size:8px 15px;
		background-size:8px 15px;
	}
	.top_news_ul li span{
		display:inline-block;
	}
	.top_news_ul li span.days{
		position: absolute;
		top:0.8em;
		left:2em;
	}
	.top_news_ul li span.title{
		padding-left:8em;
		font-size:95%;
	}
}
@media only screen and  ( max-width : 768px ) {
	.days,
	.title{
		display:block;
	}
}

@media print, screen and ( min-width : 650px ) {
	.top_blog{
		width:53%;
		float:left;
	}
	.top_fb{
		width:45%;
		float:right;
	}
	.fb-page{height:400px;}
}
@media only screen and  ( max-width : 650px ) {
	.top_blog{
		margin-bottom:2em;
	}
	.fb-page{
		height:300px;
		margin:0 auto;
	}
}


/* ************************************************ 
 *	
 *	sectionの共通幅
 *	
 * ************************************************ */
.top_section_css{
	padding:5em 0em;

	text-align:left;
}
.top_section_css p{
	margin-bottom:1.5em;
}
.inner_block{
	position: relative;

}
@media only screen and  ( max-width : 768px ) {
	.top_section_css{
		padding:2em 0em;
	}
	.top_section_css{
		font-size:90%;
	}
}

/* -------------------------トップページのH３------------------------- */

@media print, screen and ( min-width : 1000px ) {
	.top_section_css h3{
		font-size:280%;
	}
	.top_news2 h3{
		font-size:200%;
	}
}
@media print, screen and ( max-width : 1000px ) {
	.top_section_css h3{
		font-size:250%;
	}
	.top_news2 h3{
		font-size:180%;
	}
}
@media only screen and  ( max-width : 768px ) {
	.top_section_css h3{
		font-size:200%;
	}
}
.top_contents_title{
	color:#19244b;
	margin-bottom:1em;
}
/* -------------------------トップページのH4------------------------- */

@media print, screen and ( min-width : 1000px ) {
	.top_section_css h4{
		font-size:200%;
	}
}
@media print, screen and ( max-width : 1000px ) {
	.top_section_css h4{
		font-size:180%;
	}
}
@media only screen and  ( max-width : 768px ) {
	.top_section_css h4{
		font-size:120%;
	}
}






/* ************************************************ 
 *	
 *	LPG-HYBRID とは
 *	
 * ************************************************ */
.top_about{
	background:#000 url(images/top/top_contents_bg.jpg) 0% 100% no-repeat;
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center bottom;
	color:#fff;
}
/* -------------------------top_about_title------------------------- */
.top_about_title{
	margin-bottom:30px;
}

@media only screen and  ( max-width : 768px ) {
	.top_about_title{
		margin-bottom:0.5em;
	}
}



/* -------------------------top_about_main------------------------- */
@media print, screen and ( min-width : 768px ) {
	.top_about_main{
		min-height:420px;
	}
	.top_about_img{
		float:right;
		width:50%;
		margin-top:-6em;
		margin-left:5%;
		margin-bottom:10%;
	}
}
@media only screen and  ( max-width : 768px ) {
	.top_about_main{
		text-align:center;
	}
	.top_about_img{
		margin:0em 2em 2em 2em;
	}
}


/* ************************************************ 
 *	
 *	ポイント
 *	
 * ************************************************ */
@media only screen and  ( max-width : 768px ) {
	.top_point{
		background:#f5f5f5;
	}
	.top_point_01,
	.top_point_02,
	.top_point_03{
		background:#fff;
		padding:5%;
		
	}

}
.top_point_head{
	letter-spacing:0.2em;
	font-weight:bold;
	font-size:160%;
	color:#19254b;
	text-align:center;
	padding:0.5em 0em;
	position: relative;
}

.top_point_head::after {
	content: "";
	position: absolute;
	bottom: -40px;
	left: 0;
	width: 100%;
	height:40px;
	background:url(images/top/top_titile_bg.png) center top no-repeat;
	z-index:4;
}
@media only screen and  ( max-width : 768px ) {
	.top_point_head{
		margin-bottom:20px;
		font-size:120%;
	}
	.top_point_head::after {
		bottom: -20px;
		width: 100%;
		height:20px;
		background:url(images/top/top_titile_bg.png) center top no-repeat;
		background-size:contain;
	}

}

/* -------------------------top_right_image_block------------------------- */
.top_point_01,
.top_point_02{margin-bottom:3em;}


@media only screen and  ( max-width : 768px ) {
	.top_point_block_text h3{
		text-align:center;
	}
	.top_point_block_text h3 img{
		width:80%;
	}
	.top_point_01,
	.top_point_02{margin-bottom:1em;}
}


/* -------------------------layaut------------------------- */
.top_point_block{
	background:#e6e6e6;
	position: relative;
}
.top_point_block_text{
	background:#fff;
}

.top_point_block_img img{
	max-width:90%;
}
@media print, screen and ( min-width : 768px ) {

	.top_point_01 .top_point_block_text{
		padding:2em 3% 2em 0em;
		float:left;
		width:47%;
		min-height:350px;

	}
	.top_point_01 .top_point_block_img{
		position: absolute;
		top: 40px;
		right: 0;
		z-index:4;
		width:50%;
		text-align:center;
	}

	.top_point_02 .top_point_block_text{
		padding:2em 0% 2em 2%;
		float:right;
		width:48%;
		min-height:350px;

	}
	.top_point_02 .top_point_block_img{
		position: absolute;
		top: 40px;
		left: 0;
		z-index:4;
		width:50%;
		text-align:center;
	}
	.top_point_03 .top_point_block_text{
		padding:2em 3% 2em 0em;
		float:left;
		width:47%;
		min-height:350px;

	}
	.top_point_03 .top_point_block_img{
		position: absolute;
		top: 40px;
		right: 0;
		z-index:4;
		width:50%;
		text-align:center;
	}



}
@media only screen and  ( max-width : 768px ) {
	.top_point_block_text{
		padding-bottom:0.1em;
	}
	.top_point_block_img{
		background:#e6e6e6;
		padding:5%;
		text-align:center;
		margin-bottom:1em;
	}
	.top_point_01 .top_point_block_img{
		text-align:left;
	}
	.top_point_01 .top_point_block_img img{
		margin-top:3em;
	}

}

/* -------------------------top_point_4wari_block------------------------- */

.top_point_4wari_block{
	background:#f5f5f5;
	border:1px solid #0d1530;
}

.point_4wari_block_title{
	background:#19244b;
	color:#fff;
	text-shadow: 1px 1px 2px #0d1530;
	padding:1em;
}
.top_point_4wari_block .clearfix{
	padding:5%;
}
@media print, screen and ( min-width : 768px ) {
	.point_4wari_block_title{
		font-size:150% !important;
	}
	.top_point01_keisan_4wari_left{
		width:38%;
		float:left;
	}
	.top_point01_keisan_4wari_right{
		width:60%;
		float:right;
	}
}
@media only screen and  ( max-width : 768px ) {
	.point_4wari_block_title{
		font-size:120%;
	}
	.point_4wari_block_title span{
		display:block;
	}
	.top_point01_keisan_4wari_left{
		margin-bottom:1em;
	}
	.top_point01_keisan_4wari_left img{
		width:100%;
	}



}



.top_point01_keisan_4wari_right table,
.top_point01_keisan_4wari_right table th,
.top_point01_keisan_4wari_right table td{
	border:1px solid #d3d3d3;
	background:#454242;
}
.top_point01_keisan_4wari_right table th,
.top_point01_keisan_4wari_right table td{
	width:50%;
	color:#fff;
	font-weight:bold;
	padding:0.5em 0em;
}
.top_point01_keisan_4wari_right table th{
	font-size:120%;
	background:#454242;
}
.top_point01_keisan_4wari_right table td{
	font-size:320%;
	background:#4d4d4d;
}
.top_point_tb_01{
	color:#fcee21 !important;
}
.keisan_4wari_comment{
	text-align:right;
}

@media only screen and  ( max-width : 768px ) {
	.top_point01_keisan_4wari_right table{
		font-size:80%;
	}
}















/* ************************************************ 
 *	
 *	LPG ガスはクリーンで安全なエネルギー
 *	
 * ************************************************ */
.top_energy{
	background: #18244a url(images/top/top_energy_bg.png);
	min-height: 100%;
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center center;
	position: relative;
	text-align:center;
}
.top_energy_block{
	color:#fff;
}



/* -------------------------top_energy_title------------------------- */
.top_energy_title02{
	color:#fff;
}

@media print, screen and ( min-width : 1100px ) {
	.top_energy_block{
		margin:0em auto 5em auto;
	}
}
@media only screen and  ( max-width : 1100px ) {
	.top_energy_block{
		margin:0em auto 5em auto;
		width:90%;
	}
}
.top_energy_title01{
	margin-bottom:0.5em;
	line-height:150%;
	letter-spacing:1px;
}


.top_energy_title02{
	position: relative;
	padding-bottom:20px;
	margin-bottom:1em;
	margin-left:1%;
	margin-right:1%;
}
.top_energy_title02::after {
	content: "";
	position: absolute;
	bottom: -10px;
	left: 0;
	width: 100%;
	height:21px;
	background:url(images/top/point_title.png) center top no-repeat;
	z-index:4;
}
@media only screen and  ( max-width : 768px ) {
	.top_energy_title02::after {
		bottom: -5px;
		width: 100%;
		height:10px;
		background:url(images/top/point_title.png) center top no-repeat;
		background-size:contain;
	}

}





/* -------------------------エネルギー3列------------------------- */
.top_energy_ul li h5{
	font-size:140%;
	line-height:130%;
	padding:1em 0em;
	border-bottom:1px dashed #18244a;
	margin-bottom:1em;
}
.top_energy_ul li p{
	padding:1em;
	font-size:90%;
}
.top_energy_ul li{
	background: #fff;
}
.top_energy_ul_block a{
	text-align:center;
	display:block;
}


@media print, screen and ( min-width : 800px ) {
	.top_energy_ul li{
		width:31%;
		margin:1%;
		float:left;
	}
	.top_energy_img{
		max-width:50%;
	}
}

@media only screen and  ( max-width : 800px ) {
	.top_energy_ul li{
		margin-bottom:1em;
	}
	.top_energy_img{
		width:90px;
		margin:1em 1em 0em 1em;
	}
	.top_energy_ul_block{
		border:1px solid #fff;
	}
}



/* -------------------------全国LPGスタンド検索------------------------- */
.lpg_link{
	border:1px solid #18244a;
	background:#e6e6e6;
	display:block;
	color:#006736;
	padding:0.5em 1em;
	text-align:center;
}

	.lpg_link{
		position: relative;
		top:-1em;
	}

@media only screen and  ( max-width : 800px ) {
	.lpg_link{
		padding:0.5em 30%;
	}
}
/* -------------------------syouhin------------------------- */
.top_product{
	background:#333;
}
.top_product li{
	margin-bottom:1em;
}
.top_product li:last-child{
	margin-bottom:0em;
}
@media only screen and  ( max-width : 800px ) {
	.top_product li{
		margin-bottom:0.5em;
	}
}