@charset "UTF-8";


/*------------------------------------------------------------------------------*/
/* header_section
/*------------------------------------------------------------------------------*/
#header_section ul {
	position: absolute;
	top: 60px;
	right: 70px;
	z-index: 4;
}
#header_section ul li {
	display: inline-block;
	margin-right: 22px;
}
#header_section ul li:last-child {
	margin-right: 0;
}
#header_section ul li a {
	position: relative;
}
#header_section ul li a::after {
	position: absolute;
	top: 22px;
	left: 14%;
	content: '';
	width: 82%;
	height: 1px;
	background: #777;
	transform: scale(0, 1);
	transform-origin: left top;
	transition: transform .3s;
}
#header_section ul li a:hover::after {
	transform: scale(1, 1);
}


.btn_menu {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 100;
}



/*------------------------------------------------------------------------------*/
/* modal_section
/*------------------------------------------------------------------------------*/
.modal_about_box {
	width: 92%;
	max-width: 860px;
	background: url(/assets/img/common/bg_gray.jpg) left top repeat;
	margin: 0 auto;
	overflow: hidden;
}
.modal_about_box:before {
	content: '';
	display: block;
	background: url(/assets/img/top/modal_about/modal_bg_top.png) center top no-repeat;
	background-size: cover;
	width: 100%;
	height: 204px;
}
.modal_about_box .modal_about_txt {
	text-align: left;
	line-height: 1.5;
	padding: 0 50px;
	margin-top: -70px;
	margin-bottom: -40px;
}
.modal_about_box:after {
	content: '';
	display: block;
	background: url(/assets/img/top/modal_about/modal_bg_bottom.png) center top no-repeat;
	background-size: cover;
	width: 100%;
	height: 104px;
}



/*------------------------------------------------------------------------------*/
/* main_section
/*------------------------------------------------------------------------------*/
.main_section {
	position: relative;
	width: 94.143%;
	background: url(/assets/img/common/bg_blue.jpg) left top repeat;
	margin: 0 auto;
}
.icon_summary_gp {
	position: absolute;
	top: 60px;
	left: 0;
	margin: 0 0 0 -25px;
	text-align: center;
	z-index: 3;
}
.icon_summary_gp li p.summary_ttl {
	font-size: 11px;
	color: #18174c;
	font-weight: bold;
	margin: 8px 0 20px 0;
}
.main_img_gp {
	margin: 0 auto;
	text-align: center;
}
a.scrolldown {
	position: absolute;
	padding-top: 32px;
	bottom: -20px;
	left: 49%;
	z-index: 100;
	display: inline-block;
	-webkit-transform: translate(0, -50%);
	transform: translate(0, -50%);
	text-decoration: none;
	font-family: 'Ruluko', sans-serif;
	font-size: 14px;
	letter-spacing: 0.03em;
	color: #18174c;
}
a.scrolldown span {
	position: absolute;
	top: 0;
	left: 50%;
	width: 20px;
	height: 20px;
	margin-left: -12px;
	border-left: 1px solid #18174c;
	border-bottom: 1px solid #18174c;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-animation: sdb 1.5s infinite;
	box-sizing: border-box;
}
@-webkit-keyframes sdb {
	0% {
	-webkit-transform: rotate(-45deg) translate(0, 0);
	opacity: 0;
	}
	50% {
	opacity: 1;
	}
	100% {
	-webkit-transform: rotate(-45deg) translate(-5px, 5px);
	opacity: 0;
	}
}
@keyframes sdb {
	0% {
	transform: rotate(-45deg) translate(0, 0);
	opacity: 0;
	}
	50% {
	opacity: 1;
	}
	100% {
	transform: rotate(-45deg) translate(-5px, 5px);
	opacity: 0;
	}
}
.main_img_gp .main_img {
	position: absolute;
	left: 50%;
	top: 0;
	z-index: 1;
}
.main_img_gp .main_img img {
	height: 100%;
}
.main_img_gp .main_ttl {
	position: relative;
	margin: 0 auto;
	z-index: 2;
}



/*------------------------------------------------------------------------------*/
/* content_section
/*------------------------------------------------------------------------------*/
.content_section {
	position: relative;
	width: 100%;
	background: url(/assets/img/common/bg_white.jpg) left top repeat;
	margin: 0 auto;
}
.content_section .article_inner {
	margin-top: 60px;
	padding: 80px 0;
}
.btn_about {
	position: relative;
	background: url(/assets/img/top/bg_modal_about.jpg) center top no-repeat;
	height: 231px;
	padding-top: 94px;
	margin: -50px 0 -110px 0;
}
.content_section .content_txt {
	position: relative;
	z-index: 1;
}
.case {
	position: relative;
	margin-bottom: 40px;
	z-index: 1;
	/*transition: .8s;*/
}
.fadeInDown {
	-webkit-animation-fill-mode:both;
	-ms-animation-fill-mode:both;
	animation-fill-mode:both;
	-webkit-animation-duration:1s;
	-ms-animation-duration:1s;
	animation-duration:1s;
	-webkit-animation-name: fadeInDown;
	animation-name: fadeInDown;
	visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
 	0% { opacity: 0; -webkit-transform: translateY(-20px); }
 	100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
 	0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
 	100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}
.case:last-child {
	margin-bottom: 60px;
}
.case a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 99;
}
.case_r .case_txt, .case_r .case_img {
	float: right;
	text-align: right;
}
.case_l .case_txt, .case_l .case_img {
	float: left;
	text-align: left;
}
.case_txt {
	width: 33.3%;
	/*padding-top: 20px;*/
	padding-top: 80px;
}
.case_img {
	width: 62.79%;
	-webkit-transition: all 0.8s ease;
    	-moz-transition: all 0.8s ease;
    	-o-transition: all 0.8s ease;
    	transition: all  0.8s ease;
}
.case_no {
	font-family: 'Ruluko', sans-serif;
	font-size: 114px;
	color: #222222;
}
.type_txt {
	display: inline-block;
	background: url(/assets/img/common/bg_black.jpg) left top repeat;
	font-family: 'Ruluko', sans-serif;
	font-size: 18px;
	font-weight: bold;
	padding: 3px 15px;
	color: #ffffff;
	margin-bottom: 10px;
	-webkit-transition: all 0.8s ease;
    	-moz-transition: all 0.8s ease;
    	-o-transition: all 0.8s ease;
    	transition: all  0.8s ease;
}
.copy_txt {
	/*display: inline-block;*/
}
.copy_txt span {
	display: inline-block;
	background: url(/assets/img/common/bg_black.jpg) left top repeat;
	font-size: 34px;
	font-weight: bold;
	line-height: 1.46;
	padding: 3px 15px;
	color: #ffffff;
	-webkit-transition: all 0.8s ease;
    	-moz-transition: all 0.8s ease;
    	-o-transition: all 0.8s ease;
    	transition: all  0.8s ease;
}
.case_r .case_txt {
	margin-right: 3.91%;
}
.case_l .case_txt {
	margin-left: 3.91%;
}
.about_product {
	float: left;
	width: 35.25%;
	margin: 100px auto 0;
	text-align: center;
}
.about_txt {
	position: relative;
	width: 27.98%;
	margin: 0 auto;
	text-align: center;
	z-index: 1;
}
.about_img {
	position: relative;
	margin-top: -20px;
}
.image_product01 {
	float: right;
	width: 62.79%;
	margin-bottom: 60px;
}
.image_product02 {
	width: 62.79%;
	margin: 0 auto 60px;
}
.copy_tocolumn {
	width: 266px;
	margin: 0 auto 10px;
}




/*------------------------------------------------------------------------------*/
/* scene_image_section
/*------------------------------------------------------------------------------*/
.scene_image_section {
	width: 100%;
	margin: 60px auto 0;
	text-align: center;
}
.scene_image_section img {
	width: 94.14%;
}




/*------------------------------------------------------------------------------*/
/* faq_section
/*------------------------------------------------------------------------------*/
.faq_img {
	display: inline-block;
	position: relative;
	width: 23.14%;
	margin-right: 10%;
	vertical-align: bottom;
}
.faq_txt {
	display: inline-block;
	position: relative;
	text-align: left;
	width: 65.35%;
	margin-top: 50px;
}
.faq_txt li {
	border-bottom: 1px solid #666666;
	padding: 15px 0;
	margin-bottom: 8px;
}
.faq_txt li .question {
	display: block;
	min-height: 40px;
	line-height: 1.4;
}
.faq_txt li .question:before {
	content: '';
	display: block;
	background: url(/assets/img/top/icon_q.png) left top no-repeat;
	background-size: cover;
	width: 42px;
	height: 42px;
	float: left;
	margin: -10px 10px 0 0;
}
.faq_txt li .answer {
	line-height: 1.4;
	font-size: 14px;
}
.faq_txt li .icon_concentration {
	margin: 20px auto 25px;
	text-align: center;
}
.faq_txt li .category_ethanol {
	display: inline-block;
	width: 120px;
}
.faq_txt li .category_ethanol img {
	width: 40px;
}
.faq_txt li .category_ethanol .category_txt {
	font-size: 11px;
	color: #18174c;
	font-weight: bold;
	margin: 8px 0 0;
	line-height: 1.4;
}




/*------------------------------------------------------------------------------*/
/* column_section
/*------------------------------------------------------------------------------*/
.column_gp {
	margin-top: 50px;
}
.column_gp li {
	background: url(/assets/img/common/bg_white.jpg) left top repeat;
	margin-bottom: 5px;
	width: 100%;
}
.column_gp li:hover {
	opacity: 0.8;
}
.column_thumb {
	background: #000000;
	float: left;
	line-height: 110px;
	display: block;
}
.column_thumb span {
	font-family: 'Ruluko', sans-serif;
	font-size: 40px;
	color: #ffffff;
	position: absolute;
	padding: 35px 0 0 5px;
	z-index: 1;
}
.column_thumb img {
	opacity: 0.75;
}
.column_txt_gp {
	float: left;
	padding: 35px 30px 0;
	text-align: left;
}
.icon_arrow {
	width: 17px;
	float: right;
	position: relative;
	padding: 5.2% 10px 0 0;
}
.column_txt_gp .column_caption {
	font-size: 14px;
}
.column_txt_gp .column_txt {
	font-size: 18px;
	color: #18174c;
	margin-top: 5px;
	line-height: 1.6;
}



@media (max-width: 960px) and (min-width: 768px) {

	#header_section ul {
		display: none;
	}
	.icon_summary_gp {
		display: none;
	}
	.case_txt {
		padding-top: 40px;
	}
	.case_no {
		font-size: 100px;
	}
	.copy_txt span {
		font-size: 25px;
	}
	.column_txt_gp {
		padding: 35px 12px 0;
	}
	.column_txt_gp .column_txt {
		font-size: 16px;
	}

}



@media (max-width: 767px) {

	/*------------------------------------------------------------------------------*/
	/* header_section
	/*------------------------------------------------------------------------------*/
	#header_section ul {
		display: none;
		top: 0;
		left: 0;
	}
	#header_section ul li {
		display: block;
		margin-right: 0;
	}
	
	
	
	/*------------------------------------------------------------------------------*/
	/* main_section
	/*------------------------------------------------------------------------------*/
	.main_section {
		width: 100%;
	}
	.icon_summary_gp {
		display: none;
	}
	a.scrolldown {
		display: none;
	}
	.main_img_gp .main_img {
		position: relative;
		width: 40.53%;
		height: auto;
		left: 0;
		margin: 0 auto;
		padding: 14% 0 12%;
	}
	.main_img_gp .main_img img {
		height: auto;
		width: 100%;
	}
	.main_img_gp .main_ttl {
		position: absolute;
		width: 85.3%;
		left: 50%;
		margin-left: -43%;
		top: 32%;
	}
	.main_img_gp .sp_summary_txt {
		font-size: 12px;
		font-weight: normal;
		line-height: 1.4;
		margin-top: -2rem;
		padding-bottom: 2rem;
	}
	
	
	
	/*------------------------------------------------------------------------------*/
	/* modal_section
	/*------------------------------------------------------------------------------*/
	.modal_about_box:before {
		background: url(/assets/img/top/modal_about/sp_modal_bg_top.png) center top no-repeat;
		background-size: cover;
		height: 163px;
	}
	.modal_about_box .modal_about_txt {
		padding: 0 5.8%;
		margin-top: -3rem;
		margin-bottom: -4rem;
	}
	.modal_about_box:after {
		background: url(/assets/img/top/modal_about/sp_modal_bg_bottom.png) center top no-repeat;
		background-size: cover;
		height: 96px;
	}
	
	
	
	/*------------------------------------------------------------------------------*/
	/* content_section
	/*------------------------------------------------------------------------------*/
	.btn_icon_column {
		position: relative;
		z-index: 100;
	}
	.sp_btn_icon_column {
		margin: 2rem auto 0;
		text-align: center;
		width: 32%;
	}
	.content_section .article_inner {
		margin-top: -2.5rem;
		padding: 4.5rem 0;
	}
	.btn_about {
		margin: -6rem 0 -13rem 0;
		background: url(/assets/img/top/sp_bg_modal_about.jpg) center top no-repeat;
	}
	.case {
		margin-bottom: 3rem;
	}
	.case:last-child {
		margin-bottom: 5rem;
	}
	.case_r .case_txt, .case_r .case_img {
		float: none;
	}
	.case_l .case_txt, .case_l .case_img {
		float: none;
	}
	.case_txt {
		width: 100%;
		padding-top: 0;
		/*margin-top: -6rem;*/
	}
	.case_img {
		width: 100%;
	}
	.case_no {
		font-size: 102px;
	}
	.type_txt {
		font-size: 16px;
		padding: 0.3rem 1.5rem;
		margin-bottom: 1rem;
	}
	.copy_txt span {
		font-size: 28px;
		padding: 0.24rem 1.5rem;
		margin-top: -3px;
	}
	.case_r .case_txt {
		margin-right: 0;
	}
	.case_l .case_txt {
		margin-left: 0;
	}
	.about_product {
		float: none;
		width: 75.36%;
		margin: 0 auto 4rem;
	}
	.image_product01, .image_product02 {
		float: none;
		width: 100%;
		margin-bottom: 6rem;
	}
	.copy_tocolumn {
		width: 69.57%;
	}
	
	
	
	/*------------------------------------------------------------------------------*/
	/* scene_image_section
	/*------------------------------------------------------------------------------*/
	.scene_image_section {
		width: 100%;
		margin: 5rem auto 0;
	}
	.scene_image_section img {
		width: 100%;
	}
	
	
	
	/*------------------------------------------------------------------------------*/
	/* faq_section
	/*------------------------------------------------------------------------------*/
	.faq_img {
		display: none;
	}
	.faq_txt {
		display: block;
		width: 100%;
		margin-top: 1.5rem;
	}
	.faq_txt li {
		padding: 1rem 0 1.4rem;
		margin-bottom: 0.8rem;
	}
	.faq_txt li .question:before {
		width: 34px;
		height: 34px;
		margin: -0.2rem 0.6rem 0 0;
	}
	.faq_txt li .question {
		/*min-height: 4.6rem;*/
		line-height: 1.5;
		margin-bottom: 0.5rem;
	}
	.faq_txt li .answer {
		font-size: 14px;
		line-height: 1.5;
	}
	.faq_txt li .icon_concentration {
		margin: 2rem auto 2.5rem;
	}
	.faq_txt li .category_ethanol {
		width: 30%;
	}
	.faq_txt li .category_ethanol .category_txt {
		margin: 0.8rem 0 0;
	}
	
	
	
	/*------------------------------------------------------------------------------*/
	/* column_section
	/*------------------------------------------------------------------------------*/
	.column_gp {
		margin-top: 1.5rem;
	}
	.column_gp li {
		margin-bottom: 0.5rem;
		padding: 1.8rem 0 1.4rem;
	}
	.column_thumb {
		background: none;
		line-height: 0.6;
	}
	.column_thumb span {
		font-size: 50px;
		font-weight: normal;
		color: #18174c;
		position: relative;
		padding: 0 0.8rem 0 1.2rem;
		top: 0.5rem;
	}
	.column_thumb img {
		display: none;
	}
	.column_txt_gp {
		float: none;
		padding: 0 3rem 0 1.2rem;
	}
	.icon_arrow {
		width: 3.3%;
		padding: 0 1.2rem 0 0;
		margin-top: -5.5rem;
	}
	.column_txt_gp .column_caption {
		font-size: 14px;
		line-height: 1.5;
	}
	.column_txt_gp .column_txt {
		font-size: 17px;
		margin-top: 0.5rem;
		line-height: 1.5;
	}
	.caption_line2 {
		padding-top: 1.2rem;
		margin-bottom: 1.2rem;
	}

}