@charset "utf-8";

/*::::::::::::::::::::::::::::::::::
 Style Setting
:::::::::::::::::::::::::::::::::::*/

/*———————————–
Common
———————————–*/
body {
	color: #333333;
	font-size: 12px;
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	line-height: 1.7;
}

#container {
	width: 100%;
	position: relative;
	top:0;
	left: 0;
}

section .contents,
footer .contents,
#sec_contact .contents{
	width: 980px;
	margin: auto;
	position: relative;
}

section{
	background: no-repeat 50% 0 fixed;
	margin: 0 auto;
	position: relative;
}



/*———————————–
Loading
———————————–*/
#loader{
	width: 100%;
	position: absolute;
	top:43%;
	left: 0;
	text-align: center;
	background: #fff;
}

#loader p{
	background: url(../images/loading.gif) no-repeat center center;
	width: 163px;
	height: 38px;
	text-align: center;
	padding-top: 100px;
	margin: auto;
	color: #fcda1c;
	font-weight: bold;
}



/*———————————–
Navigation
———————————–*/
#nav{
	position:fixed;
	right: 0px;
	top:103px;
	width: 133px;
	height: 413px;
	z-index: 100;
	display: none;
}

#nav a{
	display: block;
}

#nav #nav01{position: absolute;	right: 0px;	top:0px;}
#nav #nav02{position: absolute;	right: 0px;	top:60px;}
#nav #nav03{position: absolute;	right: 0px;	top:120px;}
#nav #nav04{position: absolute;	right: 0px;	top:180px;}
#nav #nav05{position: absolute;	right: 0px;	top:240px;}
#nav #nav06{position: absolute;	right: 0px;	top:300px;}
#nav #nav07{position: absolute;	right: 0px;	top:360px;}



/*———————————–
Main
———————————–*/
#container #sec_main {
	width: 100%;
	height: 739px;
	z-index: 50;
	background-image: url(../images/bg_main.jpg);
	overflow: hidden;
}

#sec_main h1{
	position: absolute;
	left:-29px;
	top:0px;
	margin-top: -250px;
}

#sec_main h1 img{
	left: 57px;
}

#sec_main #maincopy{
	position: relative;
	left:282px;
	/*top:394px;*/
	top:314px;
	line-height: 1.0;
}

#sec_main #maincopy span{
	background-image: url(../images/main_copy.gif);
	background-repeat: no-repeat;
	display: block;
	float: left;
	display: none;
	text-indent: -99999px;
}


#sec_main #maincopy #copy_01{width: 53px;height: 60px;background-position: 0px 0px;}
#sec_main #maincopy #copy_02{width: 57px;height: 60px;background-position: -53px 0px; left:0px; top:100px;}
#sec_main #maincopy #copy_03{width: 51px;height: 60px;background-position: -109px 0px;}
#sec_main #maincopy #copy_04{width: 60px;height: 60px;background-position: -160px 0px;}
#sec_main #maincopy #copy_05{width: 61px;height: 60px;background-position: -219px 0px;}
#sec_main #maincopy #copy_06{width: 40px;height: 60px;background-position: -280px 0px;}
#sec_main #maincopy #copy_07{width: 53px;height: 66px;background-position: 0px -60px; clear: both;}
#sec_main #maincopy #copy_08{width: 57px;height: 66px;background-position: -53px -60px;}
#sec_main #maincopy #copy_09{width: 51px;height: 66px;background-position: -109px -60px;}
#sec_main #maincopy #copy_10{width: 60px;height: 66px;background-position: -160px -60px;}
#sec_main #maincopy #copy_11{width: 61px;height: 66px;background-position: -219px -60px;}


#sec_main #product{
	position: absolute;
	left:10px;
	top:235px;
	display: none;
}

#sec_main #products{
	position: absolute;
	left:10px;
	/*top:235px;*/
	top:208px;
	display: none;
}


#sec_main #point{
	position: absolute;
	/*left:282px;
	top:561px;*/
	left:270px;
	top:630px;
}

#sec_main #point li{
	float: left;
	margin-right: 7px;
	display: none;
}

#sec_main #oil{
	position: absolute;
	/*left:222px;
	top:661px;*/
	left:150px;
	top:675px;
	display: none;
}

#sec_main #mothers{
	position:absolute;
	/*left:553px;
	top:489px;*/
	left:316px;
	top:470px;
	display:none;
}
#sec_main #waserinlip{
	position:absolute;
	left:540px;
	top:372px;
	display:none;
}
#sec_main #bnr{
	position: absolute;
	left:555px;
	top:520px;
	display: none;
}


#sec_main #social{
	display: none;
}


#sec_main #lang{
	position:absolute;
	right:12px;
	top:15px;
	}

#sec_main #lang li{
	float:left;
	}

#sec_main #lang li a,
#sec_main #lang li img{
	display: block;
	}

#sec_main #social #tw img{
	position: absolute;
	right:240px;
	top:15px;
}

#sec_main #social #fb img{
	position: absolute;
	right:188px;
	top:15px;
}



/*———————————–
About
———————————–*/
#sec_about {
	width: 100%;
	height: 785px;
	z-index: 2;
	background-image: url(../images/bg_about.jpg);
	background-position: 50% 147px;
}

#sec_about h2{
	position: absolute;
	left:327px;
	top:117px;
}

#sec_about p#intr{
	position: absolute;
	left:327px;
	top:210px;
}

#sec_about #btn1{
	position: absolute;
	left:327px;
	top:590px;
}

#sec_about #btn1 a img,
#sec_about #btn2 a img,
#sec_about #btn3 a img,
footer #bnr{
	background-color: #fdfdfd;  /*IE8以下*/
}

:root #sec_about #btn1 a img,
:root #sec_about #btn2 a img,
:root #sec_about #btn3 a img,
:root footer #bnr{
	background-color:transparent;
}


#sec_about #btn1 h3{
	padding: 24px 0 24px 43px;
}

#sec_about #btn1 figure{
	float: left;
	padding: 0 26px 0 38px;
}

#sec_about #btn1 p#mechanism{
	padding-top:5px;
}

#sec_about #btn2 h3{
	text-align: center;
	padding: 42px 0 10px;
}

#sec_about #btn2 p#q{
	text-align: center;
	padding: 0  0 23px 0;
}

#sec_about #btn2 div#answer{
	padding: 0  0 0 35px;
	height: 219px;
}

#sec_about #btn2 div#answer p{
	float: left;
}

#sec_about #btn2 div#answer p#ans01{
	margin-right:15px;
}

#sec_about #btn2 div#answer p#ans02{
	margin-right:29px;
}

#sec_about #btn2 #note{
	clear: both;
	padding:10px 0 5px 0;
	text-align: center;
}

#sec_about p.btn_close{
	text-align: right;
	padding:0 23px 0 0;
	height: 15px;

}

#sec_about #btn2{
	position: absolute;
	left:510px;
	top:590px;
}

#sec_about #btn li{
	display: inline;
	margin-right: 17px;
}

#sec_about #btn3{
	position: absolute;
	left:327px;
	top:654px;
}

#sec_about #btn3 h3{
	padding: 58px 0 44px 58px;
}

#sec_about #btn3 p#txt{
	width: 510px;
	padding: 0 35px 0 45px;
	float: left;
	font-size: 14px;
	line-height: 2.4;
	letter-spacing:0.3;
	background-color:#fff;
	margin:0 0 0 3px;
}

#sec_about #btn3 #photo{
	padding: 0 24px 0 0;
	width: 167px;
	text-align: center;
	float: right;
}

#sec_about #btn3 #photo figure img{
	margin-bottom: 10px;
}

#sec_about #btn3 .btn_close{
	padding-top: 30px;
	clear: both;
}

/*———————————–
TVCM
———————————–*/
#sec_tvcm {
	top: 1523px;
	left: 0;
	height: 785px;
	width: 100%;
	position: absolute;
	z-index: 52;
	background-image: url(../images/bg_tvcm.jpg);
}

#sec_tvcm h2{
	position: absolute;
	left:53px;
	top:118px;
}

#sec_tvcm #moviebg{
	position: absolute;
	left:53px;
	top:219px;
	width: 586px;
	height: 342px;
	background: #ffd900;
	opacity:0.9;
	filter: alpha(opacity=90);
}

#sec_tvcm #comingsoon{
	position: absolute;
	left: 261px;
	top:381px;
}

#sec_tvcm #movie{
	position: absolute;
	left:73px;
	top:239px;
}

#sec_tvcm #btn{
	position: absolute;
	left:53px;
	top:576px;
}

#sec_tvcm #btn li{
	display: inline;
	margin-right: 15px;
}

#sec_tvcm #btn li a img{
	background: #fff\9;
}



/*———————————–
Howto
———————————–*/
#sec_howto {
	top: 2308px;
	left: 0;
	height: 785px;
	width: 100%;
	position: absolute;
	z-index: 53;
	background-image: url(../images/bg_howto.jpg);
}

#sec_howto h2{
	position: absolute;
	left:186px;
	top:102px;
}

#sec_howto #txt{
	position: absolute;
	left:193px;
	top:219px;
	width: 687px;/*732*/
	min-height: 492px;/*529*/
	padding: 37px 0 0 45px;
	background: #ffd900;
	opacity:0.9;
	filter: alpha(opacity=90);
}

#sec_howto #txt  h3{
	background:url(../images/howto_title_burette.gif) left 2px no-repeat;
	padding-left: 16px;
}

#sec_howto #txt  #well h3{
	margin: 17px 0 8px 0;
}

#sec_howto #txt #well{
	min-height: 272px;
}

#tab{
	margin: 0;
	padding: 0;
}

#sec_howto #txt #scene {
	clear: both;
	background: #fee65c;
	width: 611px;
	padding: 15px 17px 10px 17px; 
}

#sec_howto #txt  #scene h4{
	margin:0 0 10px 0;
}

.content_wrap{
	width:608px;	
}

#sec_howto #txt #scene li{
	float: left;
	line-height: 1.0;
	display: block;
	background-repeat: no-repeat;
}

#sec_howto #txt #scene li span{
	width: 189px;
	height:34px;
	line-height: 1.0;
	cursor: pointer;
	display: block;
	background-repeat: no-repeat;
	text-indent: -9999px;
}

.disnon {
  display: none;
}

#tab01{
	background-image: url(../images/howto_scene_01_off.gif);
	margin-right: 22px;
}

.select #tab01{
	background-image: url(../images/howto_scene_01_on.gif) ;
	margin-right: 22px;
}

#tab02{
	background-image: url(../images/howto_scene_02_off.gif);
	margin-right: 22px;
}

.select #tab02{
	background-image: url(../images/howto_scene_02_on.gif);
	margin-right: 22px;
}

#tab03{
	background-image: url(../images/howto_scene_03_off.gif);
}

.select #tab03{
	background-image: url(../images/howto_scene_03_on.gif);
}



/*———————————–
Spec
———————————–*/
#sec_spec {
	top: 3093px;
	left: 0;
	height: 785px;
	width: 100%;
	position: absolute;
	z-index: 54;
	background-image: url(../images/bg_spec.jpg);
}

#sec_spec h2{
	position: absolute;
	left:53px;
	top:118px;
}

#sec_spec p{
	position: absolute;
	left:21px;
	top:191px;
}

#sec_spec figure{
	position: absolute;
	left:747px;
	top:356px;
}



/*———————————–
QA
———————————–*/
#sec_qa {
	top: 3878px;
	left: 0;
	height: 785px;
	width: 100%;
	position: absolute;
	z-index: 55;
	background-image: url(../images/bg_qa.jpg);
}

#sec_qa h2{
	position: absolute;
	left:198px;
	top:118px;
}

#sec_qa dl{
	position: absolute;
	left:198px;
	top:215px;
	padding: 20px 37px 41px 37px;
	background: #ffd900;
	opacity:0.9;
	filter: alpha(opacity=90);
}

#sec_qa dt{
	font-size: 12px;
	font-weight: bold;
	margin-top: 20px;
	padding-left: 14px;
	background:url(../images/qa_burette.gif) no-repeat left center;
	letter-spacing:0.3;
}

#sec_qa dd{
	padding-top: 6px;
	font-size: 12px;
	letter-spacing:0.3;
}



/*———————————–
Contact
———————————–*/
#sec_contact {
	top: 4663px;
	left: 0;
	height: 784px;
	width: 100%;
	position: absolute;
	z-index: 56;
	margin: 0 auto;	
}

#sec_contact div#in{
	width: 100%;
	height: 784px;
	margin: 0 auto;
	background: url(../images/bg_contact.jpg) no-repeat center top;
}

#sec_contact h2{
	position: absolute;
	left:5px;
	top:76px;
}

#sec_contact h3{
	position: absolute;
	left:41px;
	top:252px;
}

#sec_contact #txt_01{
	position: absolute;
	left:23px;
	top:333px;
}

#sec_contact #txt_02{
	position: absolute;
	left:53px;
	top:412px;
}

#sec_contact #txt_03{
	position: absolute;
	left:53px;
	top:459px;
}


/*———————————–
EC Banner
———————————–*/
#sec_banner {
    top: 5447px;
    left: 0;
    height: 520px;
    width: 100%;
    position: absolute;
    z-index: 57;
    margin: 0 auto;
	text-align: center;
}

#sec_banner div#in2 {
	width: 100%;
	height: 520px;
	margin: 0 auto;
	background: url(../images/bg_banner.jpg) no-repeat center top;
	background-size: cover;
}

#sec_banner .contents {
    width: 980px;
    margin: auto;
	padding: 120px 0;
    position: relative;
}

#sec_banner ul {
	margin-top: 65px;
}
#sec_banner ul li {
    display: inline-block;
    margin-left: 8px;
}

#sec_banner ul li:first-child {
    margin-left: 0;
}

#sec_banner .text_attention {
	width: 880px;
	margin: 20px auto 0 auto;
	text-align: left;
}

#sec_banner .trans:hover {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
    -moz-opacity: .8;
    -khtml-opacity: .8;
    opacity: .8;
}



/*———————————–
Footer
———————————–*/
footer {
    top: 5970px;
    left: 0;
    height: 160px;
    width: 100%;
    position: absolute;
    z-index: 58;
}

footer #bnr{
	position: absolute;
	left:0px;
	top:32px;
}


footer #corp{
	position: absolute;
	left:0px;
	top:42px;
}

footer #copy{
	position: absolute;
	right:0px;
	top:60px;
}