@charset "Shift_JIS";

/* ---------------------------
	/opt/pr001/
--------------------------- */

/* ---------------------------
	bace
--------------------------- */
.Stage{
	/*width:950px;*/
	background:url("/opt/pr004/img/top_background.gif") repeat-x top left;
	margin:0px;
	padding:0px;
}
.contentsArea{
	width:100% !important;
	margin:0px;
	text-align: left;
}
.clearFix{
	clear:both;
}
.vAlignBottom{
	vertical-align:bottom;
}
a img{
	border:none;
}

/* ---------------------------
	top
--------------------------- */
#topLogo{
	width:950px;
	height:43px;
	margin:0px auto;
	padding:5px 0px 0px 0px;
}

#topSiteLogoArea{
	width:950px;
	height:173px;
	position:relative;
	margin:0px auto;
	padding:0px;
}
#topSiteLogoArea .siteLogo{
	position:absolute;
	top:17px;
	left:238px;
}
#topSiteLogoArea .caption01{
	position:absolute;
	top:129px;
	left:191px;
}

/* ---------------------------
	Main Visual
--------------------------- */
#mainVisualArea{
	width:950px;
	height:355px;
	background:url("/opt/pr004/img/main_visual_background.gif") no-repeat top left;
	margin:0px auto;
	padding:0px;
}

/* ---------------------------
	Global Menu
--------------------------- */
#globalMenuArea{
	width:100%;
	position:relative;
	z-index:9000
}
#globalMenuArea #navigation{
	width:100%;
	height:65px;
	position:absolute;
	top:0;
	left:0;
	background:url("/opt/pr004/img/navigation_background.gif") repeat-x top left;
	z-index:1000;
}
#globalMenuArea .fixed{
	position:fixed !important;
	top:0 !important;
	left:0 !important;
}
#globalMenuArea #navigation ul{
	width:950px;
	list-style:none;
	margin:0px auto;
	padding:0px;
}
#globalMenuArea #navigation li.button01,
#globalMenuArea #navigation li.button04{
	float:left;
	width:239px;
	display:block;
	margin:0px;
	padding:0px;
}
#globalMenuArea #navigation li.button02,
#globalMenuArea #navigation li.button03{
	float:left;
	width:236px;
	display:block;
	margin:0px;
	padding:0px;
}
#globalMenuArea #navigation li.button01 a{
	width:239px;
	height:84px;
	display:block;
	position:relative;
	z-index:0;
	background:url("/opt/pr004/img/button_navigation01_off.gif") no-repeat top left;
	margin:0px;
	padding:0px;
}
#globalMenuArea #navigation li.button02 a{
	width:236px;
	height:84px;
	display:block;
	position:relative;
	z-index:0;
	background:url("/opt/pr004/img/button_navigation02_off.gif") no-repeat top left;
	margin:0px;
	padding:0px;
}
#globalMenuArea #navigation li.button03 a{
	width:236px;
	height:84px;
	display:block;
	position:relative;
	z-index:0;
	background:url("/opt/pr004/img/button_navigation03_off.gif") no-repeat top left;
	margin:0px;
	padding:0px;
}
#globalMenuArea #navigation li.button04 a{
	width:239px;
	height:84px;
	display:block;
	position:relative;
	z-index:0;
	background:url("/opt/pr004/img/button_navigation04_off.gif") no-repeat top left;
	margin:0px;
	padding:0px;
}

#globalMenuArea #navigation li.button01 a:hover,
#globalMenuArea #navigation li.button01 a.selected{
	width:239px;
	height:84px;
	display:block;
	position:relative;
	z-index:2;
	background:url("/opt/pr004/img/button_navigation01_on.gif") no-repeat top left;
	margin:0px;
	padding:0px;
}
#globalMenuArea #navigation li.button02 a:hover,
#globalMenuArea #navigation li.button02 a.selected{
	width:236px;
	height:84px;
	display:block;
	position:relative;
	z-index:2;
	background:url("/opt/pr004/img/button_navigation02_on.gif") no-repeat top left;
	margin:0px;
	padding:0px;
}
#globalMenuArea #navigation li.button03 a:hover,
#globalMenuArea #navigation li.button03 a.selected{
	width:236px;
	height:84px;
	display:block;
	position:relative;
	z-index:2;
	background:url("/opt/pr004/img/button_navigation03_on.gif") no-repeat top left;
	margin:0px;
	padding:0px;
}
#globalMenuArea #navigation li.button04 a:hover,
#globalMenuArea #navigation li.button04 a.selected{
	width:239px;
	height:84px;
	display:block;
	position:relative;
	z-index:2;
	background:url("/opt/pr004/img/button_navigation04_on.gif") no-repeat top left;
	margin:0px;
	padding:0px;
}


/* ---------------------------
	Start Step
--------------------------- */
#startstep{
	margin:0px;
	padding:100px 0px 0px 0px;
}
#startstep .title{
	text-align:center;
	margin:0px 0px 30px 0px;
	padding:0px;
}

#startstep .stepTitle01,
#startstep .stepTitle02,
#startstep .stepTitle03,
#startstep .stepTitle04{
	position:relative;
	width:896px;
	margin:0px auto 20px auto;
	padding:0px;
}

#startstep .step02AboutArea{
	position:relative;
	width:950px;
	height:451px;
	margin:0px auto 10px auto;
	padding:0px;
}
#startstep .step02AboutArea .thumbnail{
	position:absolute;
	top:21px;
	left:71px;
}
#startstep .step02AboutArea .caption01{
	position:absolute;
	top:39px;
	left:307px;
}
#startstep .step02AboutArea .caption02{
	position:absolute;
	top:128px;
	left:307px;
}
#startstep .step02AboutArea .caption03{
	position:absolute;
	top:249px;
	left:307px;
}

#startstep .canDoArea{
	position:relative;
	width:896px;
	height:470px;
	margin:0px auto 10px auto;
	padding:0px;
}
#startstep .canDoArea .canDo01{
	position:absolute;
	top:0px;
	left:0px;
}
#startstep .canDoArea .canDo02{
	position:absolute;
	top:0px;
	left:307px;
}
#startstep .canDoArea .canDo03{
	position:absolute;
	top:0px;
	left:614px;
}
#startstep .canDoArea .canDo04{
	position:absolute;
	top:227px;
	left:0px;
}
#startstep .canDoArea .canDo05{
	position:absolute;
	top:227px;
	left:307px;
}
#startstep .canDoArea .illustration{
	position:absolute;
	top:227px;
	left:614px;
}

/* ---------------------------
	Movie
--------------------------- */
#movie{
	margin:0px;
	padding:0px;
}
#movie .title{
	text-align:center;
	margin:0px 0px 30px 0px;
	padding:84px 0px 0px 0px;
}
#movie .comingSoon{
	text-align:center;
	margin:0px 0px 30px 0px;
	padding:0px;
}
#movie #movie_content{
	width:854px;
	margin:0px auto 30px auto !important;
	padding:0px !important;
}

/* ---------------------------
	Before After
--------------------------- */
#beforeafter{
	margin:0px;
	padding:0px;
}
#beforeafter .title{
	text-align:center;
	margin:0px 0px 30px 0px;
	padding:84px 0px 0px 0px;
}

#beforeafter #tabArea{
	position:relative;
	width:856px;
	height:290px;
	margin:0px auto 30px auto;
	padding:40px 0px 0px 0px;
}
#beforeafter #tabArea ul{
	position:relative;
	margin:0px;
	padding:0px;
}
#beforeafter #tabArea li.tabFirst{
	position:absolute;
	top:-37px;
	left:23px;
}
#beforeafter #tabArea li.tabSecond{
	position:absolute;
	top:-37px;
	left:276px;
}
#beforeafter #tabArea li.tabFirst a{
	width:247px;
	height:57px;
	display:block;
	background:url("/opt/pr004/img/tab_menu_before_off.gif") no-repeat top left;
	margin:0px;
	padding:0px;
}
#beforeafter #tabArea li.tabFirst a.active{
	width:247px;
	height:57px;
	display:block;
	background:url("/opt/pr004/img/tab_menu_before_on.gif") no-repeat top left;
	margin:0px;
	padding:0px;
}
#beforeafter #tabArea li.tabSecond a{
	width:247px;
	height:57px;
	display:block;
	background:url("/opt/pr004/img/tab_menu_after_off.gif") no-repeat top left;
	margin:0px;
	padding:0px;
}
#beforeafter #tabArea li.tabSecond a.active{
	width:247px;
	height:57px;
	display:block;
	background:url("/opt/pr004/img/tab_menu_after_on.gif") no-repeat top left;
	margin:0px;
	padding:0px;
}
#beforeafter #tabArea .beforeFlow,
#beforeafter #tabArea .afterFlow{
	position:absolute;
	top:85px;
	left:37px;
}

/* ---------------------------
	Smart Phone
--------------------------- */
#smartphone{
	margin:0px;
	padding:0px;
}
#smartphone .title{
	text-align:center;
	margin:0px;
	padding:84px 0px 0px 0px;
}
#smartphone .frameSmartPhone{
	position:relative;
	width:950px;
	height:229px;
	margin:0px auto;
	padding:0px;
}
#smartphone .frameSmartPhone .qrCode{
	position:absolute;
	top:0px;
	left:42px;
}
#smartphone .frameSmartPhone .registration{
	position:absolute;
	top:0px;
	right:42px;
}
#smartphone .frameSmartPhone .registration p{
	position:absolute;
	top:117px;
	left:27px;
}

/* ---------------------------
	Banner
--------------------------- */
.bannerArea{
	text-align:center;
	margin:0px 0px 170px 0px;
	padding:100px 0 0 0;
}

/* ---------------------------
	Member Registration
--------------------------- */
.buttonMemberRegistration{
	text-align:center;
	margin:0px 0px 25px 0px;
	padding:0px;
}


/* ---------------------------
	Separator Line
--------------------------- */
.separatorLine{
	text-align:center;
	margin:0px 0px 30px 0px;
	padding:0px;
}
.separatorLineNoMagin{
	text-align:center;
	margin:0px;
	padding:0px;
}