@charset "utf-8";
/* ===================================================================
CSS information

 file name  :top.css
 style info :トップページ
=================================================================== */


	/*
	.topPgimage {
	background: url(../../images/topImg.jpg) no-repeat;
	}
	*/


div#topImg {
width: 980px;
height: 422px;
}

	/*
	div#topImg div#tInfo {
	width: 140px;
	position: relative;
	top: 258px;
	left: 167px;
	}
	*/
	
	div#topImg div#tInfo {
	width: 140px;
	float: right;
	position: relative;
	top: 258px;
	right: 670px;
	/*
	top: 258px;
	left: 167px;
	*/
	}
	
	div#topImg div#top-campaign {
	width: 124px;
	height: 124px;
	float: left;
	position: relative;
	top: 225px;
	left: 10px;
	}
	
	div#topImg div#tInfo p {
	font-size: 116.7%;
	}
	
	div#topImg div#tInfo div#goDetail {
	margin-top: 10px;
	font-size: 83.4%;
	margin-right: 8px;
	line-height: 10px;
	text-align: right;
	}


/* -----------------------------------------------------------
	#sub col
		右カラム
----------------------------------------------------------- */

div#news-press {
width: 201px;
margin-top: 17px;
margin-bottom: 11px;
padding-bottom: 2px;
background: url(../../images/news_press_bottom.gif) no-repeat;
background-position: bottom;
}

	div.news-head {
	clear: both;
	width: 201px;
	height: 29px;
	background: url(../../images/news_head_bg.gif) no-repeat;
	}
		
		
	div.newsBox {
	padding: 12px 0 12px 0;
	background: url(../../images/news_side.gif) repeat-y;
	}
	
	ul.newsList {
	padding: 0 10px 0 10px;
	list-style: none;
	font-size: 83.4%;
	}
	
	ul.newsList li.nDate {
	width: 61px;
	display: block;
	float: left;
	}
	
	ul.newsList li.nList {
	width: 120px;
	display: block;
	float: left;
	}


/* -----------------------------------------------------------
	#main col
		左カラム
----------------------------------------------------------- */

div#container div#maincol-top {
	width: 754px;
	color: #3f3f3f;
	float: left;
}

div#points {
width: 754px;
height: 366px;
margin-bottom: 16px;
background: url(../../images/points_bg.jpg) no-repeat;
}




div#price {
width: 754px;
padding-top: 2px;
background: url(../../images/price_top.gif) no-repeat;
background-position: top;
}

	div#price-inner {
	font-size: 83.4%;
	padding-left: 2px;
	padding-bottom: 16px;
	background: url(../../images/price_bottom.gif) no-repeat;
	background-position: bottom;
	}
	
	div#price-title {
	padding: 21px 21px 20px;
	text-align: right;
	}
	
	a.goOther {
	text-align: right;
	padding-right: 18px;
	background: url(../images/arrow_more.gif) no-repeat;
	background-position: right;
	}
	
	div#price-inner div.priceBox {
	width: 150px;
	_width: 188px;
	float: left;
	padding: 0 19px 25px 19px;
	}
	
	div.sideLine {
	background: url(../images/line_fade.png) no-repeat;
	background-position: right top;
	}
	
	.planIcon {
	margin: 20px 0 15px;
	}
	
	.planName {
	margin-bottom: 13px;
	}
	
div#bottomBanner {
clear: both;
width: 754px;
height: 99px;
}

	div#bottomBanner div.btnBnr {
	margin-right: 0px;
	float: left;
	}
	
	.btnBnrM {
	padding-right: 10px;
	}
	
div#contactB {
text-align: center;
margin-top: 35px;
}





/* -----------------------------------------------------------
	#scroll
		3つの要素スクロール
----------------------------------------------------------- */

/* 
	root element for the scrollable. 
	when scrolling occurs this element stays still. 
*/
div.scrollable {
	position:relative;
	overflow:hidden;	 	
	width: 565px;	
	height:257px;
	_height: 327px;
	margin-left: 189px;
	padding-top: 70px;	
}

/* 
	root element for scrollable items. Must be absolutely positioned
	and it should have a super large width to accomodate scrollable items.
	it's enough that you set width and height for the root element and
	not for this element.
*/
div.scrollable div.items {	
	width:3016px;
	position:absolute;
	clear:both;		
}


/* single scrollable item */
div.scrollable div.items div.sItem {
	float:left;
	width:565px;
	height: 257px;
}



/*********** navigator ***********/


/* position and dimensions of the navigator */
div.navi {
height:23px;
}

div.navi span {
margin-right: 19px;
float:left;
text-indent: -9999px;
cursor:pointer;	
}

div.navi span#pointsNavi1 {
width: 76px;
height: 23px;
background: url(../../images/points_navi1.gif) no-repeat;
}
div.navi span#pointsNavi2 {
width: 70px;
height: 23px;
background: url(../../images/points_navi2.gif) no-repeat;
}
div.navi span#pointsNavi3 {
width: 79px;
height: 23px;
background: url(../../images/points_navi3.gif) no-repeat;
}
div.navi span#pointsNavi4 {
width: 57px;
height: 23px;
background: url(../../images/points_navi4.gif) no-repeat;
}


div.navi span#pointsNavi1:hover {
background: url(../../images/points_navi1_o.gif) no-repeat;
}
div.navi span#pointsNavi2:hover {
width: 70px;
height: 23px;
background: url(../../images/points_navi2_o.gif) no-repeat;
}
div.navi span#pointsNavi3:hover {
width: 79px;
height: 23px;
background: url(../../images/points_navi3_o.gif) no-repeat;
}
div.navi span#pointsNavi4:hover {
width: 57px;
height: 23px;
background: url(../../images/points_navi4_o.gif) no-repeat;
}


div.navi span#pointsNavi1.active {
background: url(../../images/points_navi1_a.gif) no-repeat;
}
div.navi span#pointsNavi2.active {
width: 70px;
height: 23px;
background: url(../../images/points_navi2_a.gif) no-repeat;
}
div.navi span#pointsNavi3.active {
width: 79px;
height: 23px;
background: url(../../images/points_navi3_a.gif) no-repeat;
}
div.navi span#pointsNavi4.active {
width: 57px;
height: 23px;
background: url(../../images/points_navi4_a.gif) no-repeat;
}


/*********** 3つの理由 ***********/

div.point0-box {
width: 152px;
_width: 188px;
height: 240px;
padding: 0 18px;
float: left;
}

	div.point0-box.sline {
	background: url(../../images/points_sideline.gif) no-repeat;
	background-position: right;
	}
	
	div.point0-box img.p0img {
	margin: 20px 0 7px;
	}
	
/*********** 簡単導入 ***********/

div.point1-box {
width: 529px;
_width: 565px;
height: 240px;
padding: 0 18px;
background: url(../../images/point1_img.gif) no-repeat;
background-position: 354px 0px;
}

	div.point1-box img#point1_hl {
	margin: 12px 0 40px;
	}

	div.point1-box p {
	width: 286px;
	}
	
/*********** 使いやすい ***********/
	
div.point2-box {
width: 529px;
_width: 565px;
height: 240px;
padding: 0 18px;
background: url(../../images/point2_img.gif) no-repeat;
background-position: 258px 32px;
}

	div.point2-box img#point2_hl {
	margin-top: 12px;
	}

	div.point2-box div#icon-mo {
	width: 210px;
	text-align: center;
	margin: 14px 0;
	}

	div.point2-box p {
	width: 210px;
	}
	
/*********** 低価格 ***********/
	
div.point3-box {
width: 529px;
_width: 565px;
height: 240px;
padding: 0 18px;
background: url(../../images/point3_img.gif) no-repeat;
background-position: 329px 11px;
}

	div.point3-box img#point3_hl {
	margin: 12px 0 25px;
	}
	
	div.point3-box li,
	div.point3-box p {
	width: 265px;
	_width: 286px;
	padding-left: 21px;
	}
	
	div.point3-box li {
	list-style: none;
	margin-bottom: 10px;
	background:url(../images/arrow_bullet.gif) no-repeat;
	background-position: 6px 5px;
	}