
#body{
	background: #ffffff url(/img/MainImage2010.jpg) center top no-repeat;
	}
#T_Members{
	background: url(/img/t_members_top.png);
	behavior: url(/js/iepngfix.htc);
	}

/*-----------------------------------------------------------
  MainImage
-----------------------------------------------------------*/
#MainImage{
	display: block;
	width: 900px;
	height: 310px;
	margin: 0 auto;
	padding: 0;
	cursor: default;
	position: relative;
	}
	#MainImage .SNSTheaterList{
		width: 200px;
		}
	#MainImage .SNSTheater{
		position: absolute;
		top: 95px;
		right: 30px;
		width: 210px;
		height: 200px;
		}
		#MainImage .SNSTheater ul{
			margin: 0;
			padding: 0;
			list-style: none;
			}
			#MainImage .SNSTheater ul li{
				margin: 0;
				padding: 3px 0;
				line-height: 1.2em;
				}
	/* サンロフト社内SNS劇場 */
	.SNSTheater{
		margin: 0 0 20px 0;
		padding: 0;
		}
		.SNSTheater .SNSTheaterList{
			position: absolute;
			display: block;
			width: 230px;
			height: 190px;
			margin: 0;
			padding: 0;
			}
			.SNSTheaterList ul{
				display: block;
				list-style-type: none;
				text-align: left;
				margin: 0 15px;
				padding: 0;
				}
				.SNSTheaterList ul li{
					display: block;
					margin: 0;
					padding: 8px 0;
					background: url(/img/dotline01.gif) left bottom no-repeat;
					}
					.SNSTheaterList ul li span{
						color: #6a6a6a;
						font-size: 10px;
						}
					.SNSTheaterList ul li span img{
						vertical-align: middle;
						}
				.SNSTheaterList ul li p{
					margin: 0;
					padding: 3px 0 1px 0;
					}
			.SNSTheaterList p.More{
				margin: 4px 0 20px 5px;
				padding: 0;
				line-height: 1.5em;
				}
				.SNSTheaterList p.More a{
					display: block;
					margin: 0 0 0 auto;
					padding: 0 0 0 15px;
					background: url(/img/listmark02.gif) left center no-repeat;
					width: 200px;
					}
					.SNSTheaterList p.More a:hover{
						background: url(/img/listmark03.gif) left center no-repeat;
						}

/*-----------------------------------------------------------
  FrameTopエリア
-----------------------------------------------------------*/
#FrameTop #Left{
	display: block;
	float: left;
	width: 640px;
	margin: 0;
	padding: 0;
	}
	#FrameTop #Left .TopFunctionT{
		background: url(/img/TopFunctionT.jpg) 0 0 no-repeat;
		width: 590px;
		height: 71px;
		text-indent: -10000px;
		margin: 0 0 15px 30px;
		padding: 0;
		}
	#FrameTop #Left .TopFunctionC{
		background: url(/img/bg_TopFunction.jpg) 430px top no-repeat;
		width: 610px;
		height: auto;
		margin: 0 0 30px 0;
		padding: 0 0 0 30px;
		}
		#FrameTop #Left .TopFunctionC span.font_b{
			display: block;
			width: 400px;
			height: auto;
			margin: 0 0 5px 0;
			padding: 0;
			font-weight: bold;
			}
		#FrameTop #Left .TopFunctionC .FunctionPickup{
			width: 410px;
			height: auto;
			margin: 0 0 10px 0;
			padding: 0;
			}
			#FrameTop #Left .TopFunctionC .FunctionPickup a{
				float: left;
				display: block;
				width: 192px;
				height: 84px;
				margin: 0 10px 10px 0;
				padding: 0;
				overflow: hidden;
				color: #333333;
				text-decoration: none;
				cursor: pointer;
				}
				#FrameTop #Left .TopFunctionC .FunctionPickup a.Pickup1{background: url(/img/Pickup1.jpg) 0 0 no-repeat}
				#FrameTop #Left .TopFunctionC .FunctionPickup a.Pickup2{background: url(/img/Pickup2.jpg) 0 0 no-repeat}
				#FrameTop #Left .TopFunctionC .FunctionPickup a.Pickup3{background: url(/img/Pickup3.jpg) 0 0 no-repeat}
				#FrameTop #Left .TopFunctionC .FunctionPickup a.Pickup4{background: url(/img/Pickup4.jpg) 0 0 no-repeat}
				#FrameTop #Left .TopFunctionC .FunctionPickup a:hover.Pickup1{background: url(/img/Pickup1_on.jpg) 0 0 no-repeat}
				#FrameTop #Left .TopFunctionC .FunctionPickup a:hover.Pickup2{background: url(/img/Pickup2_on.jpg) 0 0 no-repeat}
				#FrameTop #Left .TopFunctionC .FunctionPickup a:hover.Pickup3{background: url(/img/Pickup3_on.jpg) 0 0 no-repeat}
				#FrameTop #Left .TopFunctionC .FunctionPickup a:hover.Pickup4{background: url(/img/Pickup4_on.jpg) 0 0 no-repeat}
				#FrameTop #Left .TopFunctionC .FunctionPickup a strong{
					display: block;
					margin: 0;
					padding: 0;
					text-indent: -10000px;
					height: 38px;
					}
				#FrameTop #Left .TopFunctionC .FunctionPickup a span{
					display: block;
					margin: 0 15px;
					padding: 0;
					overflow: hidden;
					}
		#FrameTop #Left .TopFunctionC a.FunctionMore{
				clear: left;
				display: block;
				width: 590px;
				height: 34px;
				text-align: right;
				margin: 0;
				padding: 0;
				background: url(/img/bg_FunctionMore.jpg) 0 0 no-repeat;
				}
			#FrameTop #Left .TopFunctionC a.FunctionMore:hover{background: url(/img/bg_FunctionMore_on.jpg) 0 0 no-repeat;}
			#FrameTop #Left .TopFunctionC a.FunctionMore span{
				display: block;
				margin: 0;
				padding: 11px 8px 0 0;
				}

	#FrameTop #Left .TopPoint{
		position:relative;
		width: 640px;
		height: 243px;
		margin: 0 0 30px 0;
		padding: 0;
		}
		#FrameTop #Left .TopPoint dl{
			position: absolute;
			top: 0;
			left: 0;	
			background: url(/img/TopPoint.jpg) left top no-repeat;
			width: 624px;
			height: 243px;
			margin: 0 0 0 15px;
			padding: 0;
			}
			#FrameTop #Left .TopPoint dl dt,
			#FrameTop #Left .TopPoint dl dd{
				margin: 0;
				padding: 0;
				text-indent: -10000px;
				}
		#FrameTop #Left .TopPoint a.PointMore{
			position: absolute;
			top: 210px;
			left: 365px;
			width: 106px;
			height: 23px;
			text-indent: -10000px;
			overflow: hidden;
			}
			#FrameTop #Left .TopPoint a:hover.PointMore{background: url(/img/TopPoint_on.jpg) -350px -210px no-repeat;}

	#FrameTop #Left .TopMedia{
		position:relative;
		width: 640px;
		height: 130px;
		margin: 0 0 0 0;
		padding: 0;
		}
		#FrameTop #Left .TopMedia dl{
			position: absolute;
			top: 0;
			left: 0;	
			background: url(/img/TopMedia.jpg) left top no-repeat;
			width: 625px;
			height: 134px;
			margin: 0 0 0 10px;
			padding: 0;
			}
			#FrameTop #Left .TopMedia dl dt,
			#FrameTop #Left .TopMedia dl dd{
				margin: 0;
				padding: 0;
				text-indent: -10000px;
				}
		#FrameTop #Left .TopMedia a.MediaMore{
			position: absolute;
			top: 53px;
			left: 475px;
			width: 110px;
			height: 28px;
			text-indent: -10000px;
			overflow: hidden;
			}
			#FrameTop #Left .TopMedia a:hover.PointMore{background: url(/img/TopMedia_on.jpg) -475px -53px no-repeat;}


/* 導入事例は　base.css に記載 */

#FrameTop #Right{
	display: block;
	float: right;
	width: 230px;
	margin: 0;
	padding: 0 30px 0 0;
	}
	#FrameTop #Right .TwiArea{
		margin: 0 0 20px 0;
		padding: 0;
		}
		#FrameTop #Right .TwiArea h3{
		background: #255f9f !important;
		}
		#FrameTop #Right .TwiArea h4{
		border: none !important;
		}
	#FrameTop #Right .BtnArea{
		margin: 30px 0 0 0;
		padding: 0;
		}
		#FrameTop #Right .BtnArea .btn_demo{
			margin: 0 0 10px 0;
			padding: 0;
			width: 230px;
			height: 85px;
			}
		#FrameTop #Right .BtnArea .btn_movie{
			margin: 0 0 10px 0;
			padding: 0;
			width: 230px;
			height: 80px;
			}
		#FrameTop #Right .BtnArea .btn_experience{
			margin: 0 0 20px 0;
			padding: 0;
			width: 230px;
			height: 85px;
			}
			#FrameTop #Right .BtnArea .btn_demo a,
			#FrameTop #Right .BtnArea .btn_experience a{
				display: block;
				margin: 0;
				padding: 0;
				width: 230px;
				height: 85px;
				background: url(/img/btn_demo.jpg) 0 0 no-repeat;
				text-indent: -10000px;
				overflow: hidden;
				}
			#FrameTop #Right .BtnArea .btn_demo a		{background: url(/img/btn_demo.jpg) 0 0 no-repeat;}
			#FrameTop #Right .BtnArea .btn_experience a	{background: url(/img/btn_experience.jpg) 0 0 no-repeat;}
			#FrameTop #Right .BtnArea .btn_demo a:hover			{background: url(/img/btn_demo_on.jpg) 0 0 no-repeat;}
			#FrameTop #Right .BtnArea .btn_experience a:hover	{background: url(/img/btn_experience_on.jpg) 0 0 no-repeat;}

	/* ナノティーシリーズ */
	#FrameTop #Right .NanotyAreaT{
		width: 230px;
		height: 30px;
		background: url(/img/NanotyAreaT.gif) 0 0 no-repeat;
		margin: 0;
		padding: 0;
		text-indent: -10000px;
		}
	#FrameTop #Right .NanotyAreaC{
		margin: 0;
		padding: 10px;
		width: 210px;
		background: url(/img/bg_NanotyArea.gif) left bottom no-repeat;
		}
		#FrameTop #Right .NanotyAreaC a{
			display: block;
			margin: 0 0 10px 0;
			padding: 0;
			width: 210px;
			}
			#FrameTop #Right .NanotyAreaC img{
				margin: 0;
				padding: 0;
				}
