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

/* -------------------------------------------------------------------
 Loading
-------------------------------------------------------------------- */
#loader {
	width: 60px;
	height: 60px;
	position: fixed;
	_position: absolute; /* IE6対策 */
	top: 50%;
	left: 50%;
	margin-top: -30px; /* heightの半分のマイナス値 */
	margin-left: -30px; /* widthの半分のマイナス値 */
	z-index: 302;
	display: none;
}

#fade {
	width: 100%;
	height: 100%;
	background-color: #717071;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 301;
	display: none;
}

/* -------------------------------------------------------------------
 bx-slider
-------------------------------------------------------------------- */
#sliderWrap .bx-wrapper .bx-viewport {
	background: none;
	border: none;
	box-shadow: none;
	left: 0;
}
#sliderWrap .bx-wrapper .bx-controls-direction a {
	width: 102px;
    height: 102px;
	margin: 0;
    position: absolute;
    text-indent: -9999px;
    z-index: 9999;
}
#sliderWrap .bx-wrapper .bx-prev {
/*	background: url(../img/btn_slider_prev.png) no-repeat left top;*/
	left: -150px;
}
#sliderWrap .bx-wrapper .bx-prev:hover {
	background-position: left -102px;
}
#sliderWrap .bx-wrapper .bx-next {
/*	background: url(../img/btn_slider_next.png) no-repeat left top;*/
	right: -150px;
}
#sliderWrap .bx-wrapper .bx-next:hover {
	background-position: left -102px;
}

/* 背景画像はブラウザにFit */
#contents {
	background-color: #480a0a;
}
#section1,
#section2,
#section3,
#section4,
#section5,
#section6,
#section7,
#section9 {
/*	background-size: cover;*/
	background-position: center center;
	
	background-size: auto 100%;
	background-repeat: no-repeat;	
	
}
#section1 {
	background-image: url(/img/top_bg.jpg);
}
#section2 {
	background-image: url(/img/s02_bg.jpg);
}
#section3 {
	background-image: url(/img/s03_bg.jpg);
}
#section4 {
	background-image: url(/img/s04_bg.jpg);
}
#section5 {
	background-image: url(/img/s05_bg.jpg);
}
#section6 {
	background-image: url(/img/s06_bg_02.jpg);
}
#section7 {
	background-image: url(/img/s06_bg_02.jpg);
}
#section8 {
	background: #480a0a;
}
#section9 {
	background-image: url(/img/s09_bg.jpg);
}

.section{
	text-align:center;
}
.sectionInner {
	width: 1000px;
	height: 500px;
	position: absolute;
	left: 50%;
	margin-left: -500px;
	top: 50%;
	margin-top: -250px;
}
.nextBtn a:hover {
	filter:alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;
}

/* -------------------------------------------------------------------
 TOP
-------------------------------------------------------------------- */
#s01Cont {
	width: 660px;
	margin: 49px 0 0 340px;
	position: relative;
}
#s01Item {
	position: absolute;
/*	
	left: 5px;
	top: -30px;
*/
	left: 0;
	top: 0;
}
#s01Txt {
	position: absolute;
	left: 230px;
	top: 100px;
}
#s01Ttl {
	position: absolute;
	left: 230px;
	top: 167px;
}

/* -------------------------------------------------------------------
 Section02,03,04,05
-------------------------------------------------------------------- */
#s02Txt,
#s03Txt,
#s04Txt,
#s05Txt {
	padding: 172px 0 0 596px;
	text-align: left;
}
#s02Txt {
	opacity: 0;
	margin-top: -50px;
}

/* -------------------------------------------------------------------
 Section06（スライド）
-------------------------------------------------------------------- */
/* 背景ぼかす */
#s02Img01,
#s02Img02,
#s02Img03,
#s02Img04 {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
#s02Img01 {
	background-image: url(/img/s02_bg.jpg);
	z-index: 102;
}
#s02Img02 {
	background-image: url(/img/s03_bg.jpg);
	z-index: 103;
	display: none;
}
#s02Img03 {
	background-image: url(/img/s04_bg.jpg);
	z-index: 104;
	display: none;
}
#s02Img04 {
	background-image: url(/img/s05_bg.jpg);
	z-index: 105;
	display: none;
}



#s02Txt01,
#s02Txt02,
#s02Txt03,
#s02Txt04 {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

#s02Txt01 {
	background-image: url(/img/s02_txt_01.png);
	z-index: 102;
	display: none;
}
#s02Txt02 {
	background-image: url(/img/s02_txt_02.png);
	z-index: 103;
	display: none;
}
#s02Txt03 {
	background-image: url(/img/s02_txt_03.png);
	z-index: 104;
	display: none;
}
#s02Txt04 {
	background-image: url(/img/s02_txt_04.png);
	z-index: 105;
	display: none;
}




#s06Pre,
#s06Pre2 {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

#s06Pre {
	background-image: url(/img/s06_bg_01.jpg);
	display: none;
	z-index: 106;
}
#s06Pre2 {
	background-image: url(/img/s06_bg_02.jpg);
	display: none;
	z-index: 107;
}

#section6Inner {
	z-index: 108;	
}


#s06Item {
	position: absolute;
	left: 44px;
	top: 46px;
	margin-top: -50px;
	opacity: 0;
}
#s06Circle01 {
	position: absolute;
	left: 297px;
	top: 64px;
	opacity: 0;
	margin-left: -50px;
}
#s06Circle02 {
	position: absolute;
	left: 364px;
	top: 195px;
	opacity: 0;
	margin-left: 50px;
}
#s06LogoEco {
	position: absolute;
	left: 320px;
	top: 367px;
	display: none;
}
#s06BtnNext.bx-pager {
	position: static !important;
	display: none;
}
#s06Cont {
	position: absolute;
	left: 596px;
	top: 120px;
	text-align: left;
	color: #d4cccc;
	line-height: 2;
	display: none;
}
#s06Txt {
	margin-bottom: 30px;
}
#btnEcocert {
	position: absolute;
	left: 596px;
	bottom: 60px;
	width: 370px;
	text-align: left;
	margin-left: -20px;
	opacity: 0;
}
/*#btnEcocert:hover {
	cursor: pointer;
	filter:alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7 !important;
}*/

/* スライド */
#s06SlideInner {
	width: 3000px;
}
#s06SlideWrap {
	width: 1000px;
	height: 500px;
	overflow: hidden;
	text-align: center;
}
.s06Slide {
	width: 1000px;
	height: 500px;
	float: left;
}

/* スライド1枚目 */
#s06Slide01 {
	width: 1000px;
	position: relative;
}
#s06_prevS01:hover,
#s06_prevS02:hover,
#s06_nextS03:hover {
	cursor: pointer;
	filter:alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;
}
/* スライド2枚目 */
#s06Slide02L,
#s06Slide03L {
	width: 300px;
	height: 442px;
	float: left;
	padding: 18px;
	position: relative;
}
#s06Slide02R,
#s06Slide03R {
	width: 630px;
	height: 460px;
	float: right;
	padding: 18px 18px 0 0;
	text-align: left;
	color: #d4cccc;
	position: relative;
	line-height: 1.8;
}
#s06_prevS01,
#s06_prevS02 {
	position: absolute;
	left: 0;
	bottom: 0;
	cursor: pointer;
}
#s06_nextS03 {
	position: absolute;
	right: 0;
	bottom: 0;
	cursor: pointer;
}

#box02List01 {
	display: table;
	border-collapse: separate;
	border-spacing: 5px 0;
	width: 640px;
	margin-left: -5px;
}
#box02List01 li {
    color: #d4cccc;
    display: table-cell;
    height: 130px;
    text-align: center;
    vertical-align: middle;
    width: 150px;
}
#box02List01 .box02List1st {
    background: url(../img/s06_eco_bg_01.png) no-repeat center center;
}
#box02List01 .box02List2nd {
    background: url(../img/s06_eco_bg_02.png) no-repeat center center;
}
#box02List01 .box02List3rd {
    background: url(../img/s06_eco_bg_03.png) no-repeat center center;
}
#box02List01 .box02List4th {
    background: url(../img/s06_eco_bg_04.png) no-repeat center center;
}
/* スライド3枚目 */
#box03List02 {
	width: 640px;
	display: table;
	border-collapse: separate;
	border-spacing: 2px 0;
	margin-left: -2px;
}
#box03List02 li {
	display: table-cell;
	width: 124px;
	height: 160px;
	text-align: center;
	vertical-align: middle;
	color: #d4cccc;
}
#box03List02 .box02List1st {
	background: url(../img/s06_cos_bg_01.png) no-repeat center center;
}
#box03List02 .box02List2nd {
	background: url(../img/s06_cos_bg_02.png) no-repeat center center;
}
#box03List02 .box02List3rd {
	background: url(../img/s06_cos_bg_03.png) no-repeat center center;
}
#box03List02 .box02List4th {
	background: url(../img/s06_cos_bg_04.png) no-repeat center center;
}
#box03List02 .box02List5th {
	background: url(../img/s06_cos_bg_05.png) no-repeat center center;
}


/* -------------------------------------------------------------------
 Section07
-------------------------------------------------------------------- */
#section7Inner {
	background: url(../img/s07_bg_circle.png) no-repeat left top;
}
#s07Item {
	position: absolute;
	left: 44px;
	top: 46px;
}
#s07Circle01 {
	position: absolute;
	left: 297px;
	top: 64px;
}
#s07Circle02 {
	position: absolute;
	left: 364px;
	top: 195px;
}
#s07LogoEco {
	position: absolute;
	left: 320px;
	top: 367px;
}
#s07Cont {
	width: 444px;
	float: right;
	text-align: left;
	padding-top: 50px;
}
/*#s07Txt01,*/
#s07Txt02,
#s07Txt03,
#s07Txt04,
#s07Txt05,
#s07Txt06 {
	margin-left: 50px;
	opacity: 0;
}

/* -------------------------------------------------------------------
 Section08
-------------------------------------------------------------------- */
#s08Txt01 {
	margin-top: -10px;
}
#s08Item {
	position: absolute;
	left: 44px;
	top: 46px;
}
#s08Cont {
	position: absolute;
	left: 350px;
	top: 65px;
	text-align: left;
	color: #d4cccc;
	opacity: 0;
	margin-top: 0px;
}
.s08BtnList {
	width: 660px;
	margin: 0 0 7px -13px;
}
.s08BtnList li {
	float: left;
	margin: 0 0 4px 13px;
}
.s08BtnList li img {
	vertical-align: bottom;
}
#btnSeibun {
	width: 160px;
	height: 30px;
	line-height: 30px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;   
	background: rgba(62, 58, 38, 1) url(../img/s08_btn_seibun.png) no-repeat 5px 5px;
	color: #d4cccc;
	cursor: pointer;
	padding-left: 40px;
	float: left;
}
#btnSeibun:hover {
	cursor: pointer;
	background-color:rgba(62, 58, 38, 0.7);
}
.fukidashiIc {
    background: url(../img/ic_fukidashi.png) no-repeat left 2px;
    padding-left: 20px;
}
#s08Genryo,
.fukidashiIc {
	display: inline;
}
#s08Genryo {
	margin-right: 35px;
}






/* 全成分表示 */
.s08Popup {
	display: none;
}
.popupArea {
    width: 720px;
	height: 240px;
	background: url(../img/bg_popup.png);
    padding: 10px;
	position:  absolute;
	left: 50%;
	top: 50%;
	margin-top: -120px;
	margin-left: -360px;
}
.popupAreaInner {
    width: 720px;
	height: 240px;
}
.popupArea li {
	height: 205px;
    background-color: #fff;
    border: 1px solid #ccc;
    display: block;
    padding: 15px 20px 20px;
    position: relative;
    text-align: left;
    z-index: 102;
	color: #000;
}
.productsPopupItemHead {
    font-size: 18px;
}
.productsPopupTable {
    border: 1px solid #999999;
    margin-top: 10px;
    width: 100%;
	border-collapse: collapse;
	font-size: 12px;
}
.productsPopupTable th,
.productsPopupTable td {
    padding: 8px 10px;
    vertical-align: top;
}
.productsPopupTable th {
    background-color: #E6E6E6;
    border-right: 1px solid #999999;
    min-width: 70px;
    white-space: nowrap;
}
.popupClose {
    cursor: pointer;
    position: absolute;
    right: 11px;
    top: 11px;
    z-index: 103;
}

/* 吹き出し */
.popupBalloon {
	width: 350px;
	text-align: left;
	color: #666;
	padding-bottom: 25px;
	position: absolute;
	z-index: 200;
}
.popupBalloon dd {
	padding: 0 24px 5px 15px;
}
.popupBalloon dt {
	padding: 15px 15px 5px;
	line-height: 1.2;
	font-size: 18px;
	font-weight: bold;
}
.popupBalloon span {
	font-size: 10px;
	font-weight: normal;
}
.popupBalloon {
	background: url(../img/bg_fukidashi_btm.png) no-repeat left bottom;
}
.popupBalloon dd {
	background: url(../img/bg_fukidashi_top.png) no-repeat left -30px;
}
.popupBalloon dt {
	background: url(../img/bg_fukidashi_top.png) no-repeat left top;
}
#popup01.popupBalloon {
	width: 610px;
	background: url(../img/bg_fukidashi1_btm.png) no-repeat left bottom;
}
#popup01.popupBalloon dd {
	background: url(../img/bg_fukidashi1_top.png) no-repeat left -30px;
}
#popup01.popupBalloon dt {
	background: url(../img/bg_fukidashi1_top.png) no-repeat left top;
}

#popup01 {
	left: -100px;
	bottom: 312px;
}
#popup02 {
	left: -100px;
	bottom: 250px;
}
#popup03 {
	left: 160px;
	bottom: 250px;
}
#popup04 {
	left: 310px;
	bottom: 250px;
}
#popup05 {
	left: -100px;
	bottom: 182px;
}
#popup06 {
	left: 160px;
	bottom: 182px;
}
#popup07 {
	left: -100px;
	bottom: 115px;
}
#popup08 {
	left: 160px;
	bottom: 115px;
}
#popup09 {
	left: 310px;
	bottom: 115px;
}


/* -------------------------------------------------------------------
 Section09（購入）
-------------------------------------------------------------------- */
#s09Cont {
	width: 660px;
	margin: 49px 0 0 340px;
	position: relative;
	text-align: left;
/*	
	margin-top: -50px;
	opacity: 0;
*/
	display: none;
}
#s09Item {
	position: absolute;
	left: 0;
	top: 0;
}
#s09Txt {
	position: absolute;
	left: 230px;
	top: 25px;
}
#s09Ttl {
	position: absolute;
	left: 230px;
	top: 92px;
}
#btnKonyu {
	position: absolute;
	left: 230px;
	top: 238px;
}
#s09Ul {
	position: absolute;
	left: 230px;
	top: 320px;
	color: #d4cccc;
	font-size: 10px;
}
#s09LinkList {
	position: absolute;
	left: 230px;
	top: 355px;
}


/* -------------------------------------------------------------------
 Footer
-------------------------------------------------------------------- */
#footerMenuCont {
	width: 100%;
	height: 100%;
	background: url(../common/img/parts/macFFBgHack.png);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 50;
	display: none;
}
#fMenuContIn {
	width: 970px;
	height: 560px;
	background: #000;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-left: -485px;
	margin-top: -280px;
}
#fMenuContIn img {
	vertical-align: bottom;
}
#fMenuTtl {
	text-align: center;
	margin-bottom: 20px;
}
.fMenuListTtl {
	margin-top: 5px;
	color: #999;
	font-weight: normal;
	font-size: 12px;
}
.fMenuListTtl .sub {
	font-size: 10px;
}
#wrapBtnBsList {
	width: 840px;
	height: 560px;
	margin: 0 auto;
	display: table;
	text-align: center;
}
#wrapBtnBsListIn {
	display: table-cell;
	vertical-align: middle;
}
#wrapBtnBsList li {
	width: 160px;
	float: left;
	margin: 0 25px 5px;
}
#wrapBtnBsList ul {
	margin-bottom: 20px;
}
#wrapBtnBsList .fMenuListLast {
	margin-bottom: -5px;
}