@charset "utf-8";

/*
------------------------------------------------------------*/


/*
------------------------------------------------------------*/

#gnavArea{
	position: fixed;
	top: 0;
	left: 0;
	width: 48px;
	height: 100%;
	background: url(../images/bg_gnav_area.png) no-repeat 0 0;
	z-index: 1;
}
#gnavArea{
	position: absolute;
	min-height: 800px;
}



#gnav ul li {
}
#gnav ul li a{
	display: block;
	background-image: url(../images/gnav.png);
	background-repeat: no-repeat;
	background-position: 0 0;
}
#gnav ul li.top a          { height: 95px;	background-position: 0 0;}
#gnav ul li.story a        { height: 66px;	background-position: 0 -95px;}
#gnav ul li.product a      { height: 97px;	background-position: 0 -161px;}
#gnav ul li.special a      { height: 98px;	background-position: 0 -258px;}
#gnav ul li.banner a       { height: 112px;	background-position: 0 -356px;}
#gnav ul li.blog a         { height: 174px;	background-position: 0 -468px;}
#gnav ul li.top a:hover    { background-position: -48px 0;}
#gnav ul li.story a:hover  { background-position: -48px -95px;}
#gnav ul li.product a:hover{ background-position: -48px -161px;}
#gnav ul li.special a:hover{ background-position: -48px -258px;}
#gnav ul li.banner a:hover { background-position: -48px -356px;}
#gnav ul li.blog a:hover   { background-position: -48px -468px;}

#gnav ul li.top a.active    { background-position: -48px 0;}
#gnav ul li.story a.active  { background-position: -48px -95px;}
#gnav ul li.product a.active{ background-position: -48px -161px;}
#gnav ul li.special a.active{ background-position: -48px -258px;}
#gnav ul li.banner a.active { background-position: -48px -356px;}
#gnav ul li.blog a.active   { background-position: -48px -468px;}

#gnav ul li.banner a.disable    { opacity: 0.3; cursor: default;}
#gnav ul li.banner a.disable:hover    { background-position: 0 -356px;}

/*
------------------------------------------------------------*/

#side.top{
	position: fixed;
	top: 0;
	left: 48px;
	width: 272px;
	height: 100%;
	background: url(../images/bg_side_area.png) no-repeat 0 0;
	z-index: 1;
}
#side.top #TopVoice {
	position: absolute;
	top: 48px;
	left: 58px;
	width: 161px;
	height: 174px;
	background: url(../images/btn_rei01.png) no-repeat 0 0;
	z-index: 1;
	cursor: pointer;
}
#side.top #TopVoice.vplay:hover,
#side.top #TopVoice.vstop {
	opacity: 0.8;
	filter: alpha(opacity=80);
}

#side.top #TopVoice02 {
	position: absolute;
	top: 48px;
	left: 58px;
	width: 161px;
	height: 174px;
	background: url(../images/btn_rei02.png) no-repeat 0 0;
	z-index: 1;
	cursor: pointer;
}
#side.top #TopVoice02.vplay:hover,
#side.top #TopVoice02.vstop {
	opacity: 0.8;
	filter: alpha(opacity=80);
}

#side.top{
	position: absolute;
	min-height: 800px;
}
/**/
#side.top #intro{
	position: relative;
	margin: 272px 0 60px 33px;
	width: 208px;
	height: 203px;
}
#side.top #intro ul li{
	position: absolute;
	width: 81px;
	height: 90px;
	top: 0;
	left: 0;
}
#side.top #intro ul li a{
	display: block;
	height: 90px;
}
#side.top #intro .isao{ top: 0;	left: 0;}
#side.top #intro .sanji{top: 0;	left: 127px;}
#side.top #intro .seishiro{	top: 56px;	left: 63px;}
#side.top #intro .fuji{	top: 113px;	left: 0px;}
#side.top #intro .rei{	top: 113px;	left: 127px;}


#side.top #intro ul li.isao a{
	background-image: url(../../images/intro.png);
	background-position: 0 0;
	background-repeat: no-repeat;
}
#side.top #intro ul li.sanji a{
	background-image: url(../../images/intro.png);
	background-position: -127px 0;
	background-repeat: no-repeat;
}
#side.top #intro ul li.seishiro a{
	background-image: url(../../images/intro.png);
	background-position: -63px -56px;
	background-repeat: no-repeat;
}
#side.top #intro ul li.fuji a{
	background-image: url(../../images/intro.png);
	background-position: 0 -113px;
	background-repeat: no-repeat;
}
#side.top #intro ul li.rei a{
	background-image: url(../../images/intro.png);
	background-position: -127px -113px;
	background-repeat: no-repeat;
}


#side.top #intro ul li.isao a:hover{
	background-image: url(../../images/intro_isao_on.png);
	background-position: 0 0;
	background-repeat: no-repeat;
}
#side.top #intro ul li.sanji a:hover{
	background-image: url(../../images/intro_sanji_on.png);
	background-position: -127px 0;
	background-repeat: no-repeat;
}
#side.top #intro ul li.seishiro a:hover{
	background-image: url(../../images/intro_seishiro_on.png);
	background-position: -63px -56px;
	background-repeat: no-repeat;
}
#side.top #intro ul li.fuji a:hover{
	background-image: url(../../images/intro_fuji_on.png);
	background-position: 0 -113px;
	background-repeat: no-repeat;
}
#side.top #intro ul li.rei a:hover{
	background-image: url(../../images/intro_rei_on.png);
	background-position: -127px -113px;
	background-repeat: no-repeat;
}



/**/
#side.top #links{	width: 200px;	margin: 0 auto 10px;}
.ml08 {margin-left: 8px;}
#side.top #links #related{
	background-position: 0 0;
	background-repeat: no-repeat;
}
#side.top #links #related ul li a.rejet{
	display: block;
	height: 16px;
	background-image: url(../../images/related.png);
	background-position: 0 0;
	background-repeat: no-repeat;
}
#side.top #links #related ul li a.rejetShop{
	display: block;
	height: 16px;
	background-image: url(../../images/related.png);
	background-position: -44px 0;
	background-repeat: no-repeat;
}
#side.top #links #related ul li a.SkitDolce{
	display: block;
	height: 16px;
	background-image: url(../../images/related.png);
	background-position: -120px 0;
	background-repeat: no-repeat;
}
/**/
#side.top #social{
	width: 215px;
	margin: 0 auto 10px 30px;
}
#side.top #social #twitter{
	float: left;
	margin: 0 10px 5px 0;
}
#side.top #social #facebook{
	clear: left;
	width: 100px;
	float: left;
	margin: 0 5px 5px 0;
}
#side.top #social #naverline{
	float: left;
	margin: 0 15px 5px 0;
}
/**/
#side.top #news{
	width: 208px;
	margin: 0px auto 45px;
	font-size: 10px;
	line-height: 1.4;
}
#side.top #news .scroll-pane {
	width: 100%;
	height: 64px;
	overflow: auto;
}
/**/
#side.top #copyrights{
	width: 208px;
	margin: 0px auto 0;
}

/*
------------------------------------------------------------*/

#side.lower{
	position: fixed;
	top: 0;
	left: 48px;
	width: 192px;
	height: 100%;
	background: url(../images/bg_side_lower.png) no-repeat 0 0;
	z-index: 1;
}
#side.lower{
	position: absolute;
	min-height: 800px;
}
/**/
#side.lower #logo{
	width: 143px;
	height: 195px;
	margin: 27px auto 0;
}
#side.lower #logo a{
	display: block;
	height: 100%;
}
/**/
#side.lower #intro{
	position: relative;
	margin: 279px 0 60px 33px;
	margin: 57px 0 60px 33px;
	width: 128px;
	height: 312px;
}
#side.lower #intro ul li{
	
}
#side.lower #intro ul li a{
	display: block;
	height: 63px;
}
#side.lower #intro ul li.seishiro a{
	background-image: url(../images/intro_lower.png);
	background-position: 0 0;
	background-repeat: no-repeat;
}
#side.lower #intro ul li.isao a{
	background-image: url(../images/intro_lower.png);
	background-position: 0 -63px;
	background-repeat: no-repeat;
}
#side.lower #intro ul li.sanji a{
	background-image: url(../images/intro_lower.png);
	background-position: 0 -126px;
	background-repeat: no-repeat;
}
#side.lower #intro ul li.fuji a{
	background-image: url(../images/intro_lower.png);
	background-position: 0 -189px;
	background-repeat: no-repeat;
}
#side.lower #intro ul li.rei a{
	background-image: url(../images/intro_lower.png);
	background-position: 0 -252px;
	background-repeat: no-repeat;
}



#side.lower #intro ul li.seishiro a:hover{
	background-image: url(../images/intro_lower_on.png);
	background-position: 0 0;
	background-repeat: no-repeat;
}
#side.lower #intro ul li.isao a:hover{
	background-image: url(../images/intro_lower_on.png);
	background-position: 0 -63px;
	background-repeat: no-repeat;
}
#side.lower #intro ul li.sanji a:hover{
	background-image: url(../images/intro_lower_on.png);
	background-position: 0 -126px;
	background-repeat: no-repeat;
}
#side.lower #intro ul li.fuji a:hover{
	background-image: url(../images/intro_lower_on.png);
	background-position: 0 -189px;
	background-repeat: no-repeat;
}
#side.lower #intro ul li.rei a:hover{
	background-image: url(../images/intro_lower_on.png);
	background-position: 0 -252px;
	background-repeat: no-repeat;
}



#side.lower #intro ul li.seishiro a.active{
	background-image: url(../images/intro_lower_on.png);
	background-position: 0 0;
	background-repeat: no-repeat;
}
#side.lower #intro ul li.isao a.active{
	background-image: url(../images/intro_lower_on.png);
	background-position: 0 -63px;
	background-repeat: no-repeat;
}
#side.lower #intro ul li.sanji a.active{
	background-image: url(../images/intro_lower_on.png);
	background-position: 0 -126px;
	background-repeat: no-repeat;
}
#side.lower #intro ul li.fuji a.active{
	background-image: url(../images/intro_lower_on.png);
	background-position: 0 -189px;
	background-repeat: no-repeat;
}
#side.lower #intro ul li.rei a.active{
	background-image: url(../images/intro_lower_on.png);
	background-position: 0 -252px;
	background-repeat: no-repeat;
}


/**/
#side.lower #links{
	width: 186px;
	margin: 0 auto 10px;
}
#side.lower #links #related{
	width: 128px;
	margin: 0 auto;
	background-position: 0 0;
	background-repeat: no-repeat;
}
#side.lower #links #related ul li a.rejet{
	display: block;
	height: 16px;
	background-image: url(../../images/related.png);
	background-position: 0 0;
	background-repeat: no-repeat;
}
#side.lower #links #related ul li a.rejetShop{
	display: block;
	height: 16px;
	background-image: url(../../images/related.png);
	background-position: -44px 0;
	background-repeat: no-repeat;
}
#side.lower #links #related ul li a.SkitDolce{
	display: block;
	height: 16px;
	background-image: url(../../images/related.png);
	background-position: -120px 0;
	background-repeat: no-repeat;
}
/**/
#side.lower #social{
	width: 135px;
	margin: 0 auto 10px 30px;
}
#side.lower #social #twitter{
	float: left;
	margin: 0 15px 5px 0;
}
#side.lower #social #facebook{
	clear: left;
	float: left;
	width: 100px;
	margin: 0 8px 5px 0;
}
#side.lower #social #naverline{
	float: left;
	margin: 0 0px 5px 0;
}

/**/
#side.lower #copyrights{
	/*width: 128px;*/
	margin: 0px 0 0 30px;
}



/*
------------------------------------------------------------*/
/*
#wrapper{
	height: 100%;
	overflow: hidden;
	width: 100%;	
}
*/

/*
------------------------------------------------------------*/
#main.top{
	position: relative;
	z-index: 0;/* for set main under side */
	width: auto;
	margin: 0 0 0 320px;
}
#main.top #contents{
	position: relative;
	margin: 0 auto;
	z-index: 1;
}/*
#main.top #background_contents{
	position: fixed;
	top: 0;
	left: 320px;
	right:0px;
	z-index: 0;
}*/
#main.top #background_contents{
	position: absolute;
	top: 0;
	left: 0;
}
#main.top #background_contents img{
	/*width: 100%;
	height: auto;*/
}
#main.top #background_contents:before{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image:url(../images/bg_01.png);
	background-repeat: repeat-y;
	background-position: 0 0;
}


/*
------------------------------------------------------------*/
#main.lower{
	position: relative;
	z-index: 0;/* for set main under side */
	width: auto;
	margin: 0 0 0 240px;
}
#main.lower #contents{
	position: relative;
	width: 750px;	
	margin: 0 auto;
	z-index: 1;
}
#main.lower #background_contents{
	position: fixed;
	top: 0;
	left: 240px;
	right: 0;
	z-index: 0;
	/*min-width: 750px;*/
}
#main.lower #background_contents img{
	/*width: 100%;
	height: auto;*/
}
#main.lower #background_contents:before{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image:url(../images/bg_01.png);
	background-repeat: repeat-y;
	background-position: 0 0;
}

/*
------------------------------------------------------------*/
#view_video{
	position: fixed;
	left: 295px;
	bottom: 0;
	width: 245px;
	height: 206px;
	background:url(../images/bg_nowplaying.png) no-repeat 0 0;
	z-index: 3;	
}
#btnSeishiro {
	position: fixed;
	right: 5px;
	bottom: 5px;
	z-index: 3;	
}
#btnIsao {
	position: fixed;
	/*right: 5px;
	bottom: 175px;*/
	
	right: 5px;
	bottom: 5px;
	
	z-index: 3;	
}
#btnIsao01 {
	position: fixed;
	right: 5px;
	bottom: 175px;
	z-index: 3;	
}
#btnSanji {
	position: fixed;
	right: 5px;
	bottom: 5px;
	z-index: 3;	
}
#btnIsao a,
#btnSeishiro a {
	outline: none !important;
}/*
#view_video{
	position: absolute;
	left: 295px;
	bottom: 0;
	width: 245px;
	height: 206px;
	background:url(../images/bg_nowplaying.png) no-repeat 0 0;
	z-index: 3;	
}
*/
#view_video #btn_view{
	position: absolute;
	top: 133px;
	left: 37px;	
	width: 143px;
	height: 67px;
}
#view_video #btn_view a{
	display: block;
	background-image: url(../images/btn_view.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	width: 143px;
	height: 67px;
}
#view_video #btn_view a:hover{
	background-image: url(../images/btn_view_on.png);
	background-repeat: no-repeat;
	background-position: 0 0;
}


/*
------------------------------------------------------------*/
#soundPlayer{
	position: fixed;
	top: 0;
	right: 0;
	background:url(../images/bg_player.png) no-repeat 0 0;
	width: 138px;
	height: 35px;
	z-index: 9;
}
#soundPlayer .bgmplay{
	display: block;
	width: 138px;
	height: 35px;
	background: url(../images/btn_player_off.png) no-repeat 0 0;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	cursor: pointer;
}
#soundPlayer .bgmpause{
	display: block;
	width: 138px;
	height: 35px;
	background: url(../images/btn_player_on.png) no-repeat 0 0;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	cursor: pointer;
}

#contents.product .voiceList{
	position: absolute;
	top: 550px;
	left: 544px;
}

.voiceList li {
	cursor: pointer;
	width: 42px;
	height: 42px;
	margin-bottom: 3px;
}
#a1.vplay {background-image: url(../../product/seishiro/images/cv_01.png);}
#a1.vplay:hover,
#a1.vstop {background-image: url(../../product/seishiro/images/cv_01_on.png);}
#b1.vplay {background-image: url(../../product/seishiro/images/cv_02.png);}
#b1.vplay:hover,
#b1.vstop {background-image: url(../../product/seishiro/images/cv_02_on.png);}
#c1.vplay {background-image: url(../../product/seishiro/images/cv_03.png);}
#c1.vplay:hover,
#c1.vstop {background-image: url(../../product/seishiro/images/cv_03_on.png);}

#a2.vplay {background-image: url(../../product/isao/images/cv_01.png);}
#a2.vplay:hover,
#a2.vstop {background-image: url(../../product/isao/images/cv_01_on.png);}
#b2.vplay {background-image: url(../../product/isao/images/cv_02.png);}
#b2.vplay:hover,
#b2.vstop {background-image: url(../../product/isao/images/cv_02_on.png);}
#c2.vplay {background-image: url(../../product/isao/images/cv_03.png);}
#c2.vplay:hover,
#c2.vstop {background-image: url(../../product/isao/images/cv_03_on.png);}

#a2.disable {background-image: url(../../product/images/common/cv_01_disable.png) !important;}
#b2.disable {background-image: url(../../product/images/common/cv_02_disable.png) !important;}
#c2.disable {background-image: url(../../product/images/common/cv_03_disable.png) !important;}


.voices li#c5,.voices li#b5,.voices li#a5,
.voices li#c4,.voices li#b4,.voices li#a4,
.voices li#c3,.voices li#b3,.voices li#a3 {
	cursor: pointer;
	width: 42px !important;
	height: 42px !important;
	margin-bottom: 3px;
}

#a3.vplay {background-image: url(../../product/sanji/images/cv_01.png);}
#a3.vplay:hover,
#a3.vstop {background-image: url(../../product/sanji/images/cv_01_on.png);}
#b3.vplay {background-image: url(../../product/sanji/images/cv_02.png);}
#b3.vplay:hover,
#b3.vstop {background-image: url(../../product/sanji/images/cv_02_on.png);}
#c3.vplay {background-image: url(../../product/sanji/images/cv_03.png);}
#c3.vplay:hover,
#c3.vstop {background-image: url(../../product/sanji/images/cv_03_on.png);}


#a4.vplay {background-image: url(../../product/fuji/images/cv_01.png);}
#a4.vplay:hover,
#a4.vstop {background-image: url(../../product/fuji/images/cv_01_on.png);}
#b4.vplay {background-image: url(../../product/fuji/images/cv_02.png);}
#b4.vplay:hover,
#b4.vstop {background-image: url(../../product/fuji/images/cv_02_on.png);}
#c4.vplay {background-image: url(../../product/fuji/images/cv_03.png);}
#c4.vplay:hover,
#c4.vstop {background-image: url(../../product/fuji/images/cv_03_on.png);}


#a5.vplay {background-image: url(../../product/rei/images/cv_01.png);}
#a5.vplay:hover,
#a5.vstop {background-image: url(../../product/rei/images/cv_01_on.png);}
#b5.vplay {background-image: url(../../product/rei/images/cv_02.png);}
#b5.vplay:hover,
#b5.vstop {background-image: url(../../product/rei/images/cv_02_on.png);}
#c5.vplay {background-image: url(../../product/rei/images/cv_03.png);}
#c5.vplay:hover,
#c5.vstop {background-image: url(../../product/rei/images/cv_03_on.png);}


.v1.disable, .v1.disable:hover{background: url(../../product/images/common/cv_01_disable.png) !important; width: 42px !important; height: 42px !important; margin-bottom: 3px;}
.v2.disable, .v2.disable:hover{background: url(../../product/images/common/cv_02_disable.png) !important; width: 42px !important; height: 42px !important; margin-bottom: 3px;}
.v3.disable, .v3.disable:hover{background: url(../../product/images/common/cv_03_disable.png) !important; width: 42px !important; height: 42px !important; margin-bottom: 3px;}



#d1,#d2 {
	width: 162px;
	height: 174px;
	position: absolute;
	top: -228px;
	left: 22px;
	cursor: pointer;
}
#d1.vplay {background-image: url(../../images/btn_count.png);}
#d1.vplay:hover,
#d1.vstop {
	opacity: 0.5;
	filter: alpha(opacity=50);
	background-image: url(../../images/btn_count.png);
}
#d2.vplay {background-image: url(../../images/btn_count2.png);}
#d2.vplay:hover,
#d2.vstop {
	opacity: 0.5;
	filter: alpha(opacity=50);
	background-image: url(../../images/btn_count2.png);
}


/*
------------------------------------------------------------*/

#loader{
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 9999;
	background:url(../images/loader.gif) no-repeat center center;
	width: 30px;
	height: 30px;
}

.voices{
	position: absolute;
	top: 430px;
	right: 165px;
}
#contents.rei .btn_buy,
#contents.sanji .btn_buy,
#contents.fuji .btn_buy{
	top: 322px !important;
}