@charset "utf-8";
/*-------------------------------------------------------------------------------------------
	1.	System Contents
			1-1.		Common
			1-2.		Index
			1-3.		System
			1-4.		PriceList
			1-5.		Order
			1-6.		Sample
			1-7.		Card Variety
			1-8.		Option
			1-9.		Pay
-------------------------------------------------------------------------------------------*/


/*	*	*	*	*	*	*	*	*	*	*	*	*	*	*	*	*	*	*	*	*	*	*	*	*	*/

/*	1.	System Contents

/*	*	*	*	*	*	*	*	*	*	*	*	*	*	*	*	*	*	*	*	*	*	*	*	*	*/
/*	1-1.	Common
----------------------------------------	*/
/*	1-1-1.	Column	*/
.column1LongTop	{
	margin:	0	0	-20px	0;
	width:	700px;
	height:	50px;
}
.column1LongMiddle	{
	background:	url(../images/about_system/column1_long_middle.gif)	repeat-y	center	top;
	width:	700px;
	height:	auto;
}
.column1LongBottom	{
	background:	url(../images/about_system/column1_long_bottom.gif)	no-repeat	center	bottom;
	margin:	-40px	0	20px	0;
	width:	700px;
	height:	50px;
}

/*	1-1-2.	About Notes	*/
.aboutNotes,	.aboutNotesTopSpace	{
	clear:	both;
	margin:	0;
	padding:	0;
	width:	700px;
}
.aboutNotesTopSpace	{
	margin:	30px	0	0	0;
}
.aboutNotes	img,	.aboutNotesTopSpace	img	{
	margin:	0;
	padding:	0;
	width:	700px;
	height:	20px;
}
.aboutNotes	ul,	.aboutNotesTopSpace	ul	{
	margin:	20px	50px	30px	50px;
	padding:	0;
}
.aboutNotes	li,	.aboutNotesTopSpace	li	{
	padding:	0	0	8px	0;
	font-size:	0.8em;
	line-height:	1.5em;
	text-align:	left;
	color:	#666;
}
.aboutNotes	li	span,	.aboutNotesTopSpace	li	span	{
	color:	#F00;
}
.contentsSystem	ul#card	li	{
	float:	left;
	padding:	0	20px	20px	0;
}

/*	1-1-3.	Anchor	*/
.systemAnchor	{
	clear:	both;
	margin:	30px	0	30px	0;
	padding:	0;
	width:	700px;
	height:	30px;
}
.systemAnchor	h5	{
	padding:	0	20px	0	0;
	text-align:	center;
	font-size:	0.8em;
}
.systemAnchor	h5	span	{
	padding:	0	10px	0	0;
}

/*	1-2.	Index
----------------------------------------	*/
#titleSystemIndex	{
	background:	url(../images/about_system/column1_long_top_use.gif)	no-repeat	center	top;
	text-indent:	-9999px;
}
#commentSystemIndex	{
	margin:	20px	0	0	0;
	padding:	0;
	width:	700px;
}
#commentSystemIndex	h3	{
	margin:	0;
	padding:	0	30px	20px	30px;
	color:	#000;
	font-size:	0.9em;
	line-height:	1.5em;
	font-weight:	normal;
	text-align:	left;
}
ol#contentsSystemIndex	{
	margin:	0;
	padding:	0;
	list-style-type:	none;
}
ol#contentsSystemIndex	li	{
	margin:	0;
	padding:	0;
	float:	left;
	border-top:	1px	solid	#FCC;
}
ol#contentsSystemIndex	li	a	{
	padding:	10px	15px	0	15px;
	text-align:	left;
	font-size:	0.8em;
	font-weight:	bold;
	color:	#444;
	line-height:	1.6em;
	height:	100px;
	display: block;
	text-decoration:	none;
}
ol#contentsSystemIndex	li	a:hover	{
	background:	url(../images/about_system/btn_system_index.gif)	repeat-x	center	top;
}
ol#contentsSystemIndex	li	a	span	{
	font-size:	0.9em!important;
	font-size:	0.8em;
	font-weight:	normal;
	color:	#F69;
	line-height:	1.6em;
}
ol#contentsSystemIndex	li.systemIndex	a	{
	width:	204px!important;
	width:	235px;
	border-left:	1px	solid	#FCC;
}
ol#contentsSystemIndex	li.systemIndexRight	a	{
	width:	198px!important;
	width:	230px;
	border-left:	1px	solid	#FCC;
	border-right:	1px	solid	#FCC;
}
ol#contentsSystemIndex	li#systemIndexRightNon	{
	display:	block;
	width:	228px!important;
	width:	230px;
	height:	100px;
	border-left:	1px	solid	#FCC;
	border-right:	1px	solid	#FCC;
}

/*	1-3.	System
----------------------------------------	*/
#titleSystem	{
	background:	url(../images/about_system/column1_long_top_system.gif)	no-repeat	center	top;
	text-indent:	-9999px;
}
#headerSystem,	#headerSystemLeft,	#headerSystemRight	{
	margin:	20px	0	0	0;
	padding:	0	0	30px	0;
}
#headerSystemLeft	{
	float:	left;
	width:	500px;
}
#headerSystemLeft	h2	{
	margin:	0	0	10px	0;
	padding:	0	20px	0	20px;
	color:	#000;
	font-size:	0.9em;
	line-height:	1.5em;
	font-weight:	normal;
	text-align:	left;
}
#headerSystemLeft	h3	{
	margin:	20px	0	20px	0;
	padding:	0	20px	0	20px;
	color:	#333;
	font-size:	0.8em;
	font-weight:	normal;
	text-align:	left;
}
#headerSystemRight	{
	float:	right;
	width:	200px;
}
#headerSystemRight	ul	{
	list-style-type:	none;
	margin:	0;
	padding:	0;
}
#headerSystemRight	li	{
	margin:	0;
	padding:	0	0	10px	0;
	text-align:	left;
	font-size:	0.9em!important;
	font-size:	0.8em;
}
#headerSystemRight	li	a	{
	background:	url(../images/allow_12FF6699.gif)	no-repeat;
	padding:	0	5px	0	15px;
	color:	#666;
}
#headerSystemRight	li	a:hover	{
	background:	url(../images/allow_12FF6699.gif)	no-repeat;
	color:	#F69;
}
.contentsSystem	{
	clear:	both;
	margin:	0;
	padding:	0;
	text-align:	left;
}
.contentsSystem	h3	{
	margin:	0	0	20px	0;
	padding:	0;
	width:	700px;
	height:	50px;
}
.contentsSystem	h4	{
	margin:	0;
	padding:	0	20px	5px	20px;
	font-size:	0.9em;
	color:	#333;
}
.contentsSystem	p	{
	margin:	0;
	padding:	0	20px	15px	30px;
	font-size:	0.8em;
	color:	#333;
	line-height:	1.5em;
}
.contentsSystem	ul	{
	list-style-type:	disc;
	margin:	0	20px	0px	50px;
}
.contentsSystem	li	{
	padding:	0	0	10px	0;
	font-size:	0.8em;
	color:	#333;
	line-height:	1.5em;
}
.contentsSystem	li	span	{
	font-weight:	bold;
}
.contentsSystem	ul#card	{
	list-style-type:	none;
	margin:	0	20px	5px	50px;
	height:	150px;
}

/*	1-4.	Price
----------------------------------------	*/
#titlePriceList	{
	background:	url(../images/about_system/column1_long_top_price.gif)	no-repeat	center	top;
	text-indent:	-9999px;
}
#headerPrice,	#headerPriceLeft,	#headerPriceRight	{
	margin:	20px	0	0	0;
	padding:	0;
}
#headerPriceLeft	{
	float:	left;
	width:	500px;
}
#headerPriceLeft	h2	{
	margin:	0	0	10px	0;
	padding:	0	20px	0	20px;
	color:	#000;
	font-size:	0.9em;
	line-height:	1.5em;
	text-indent:	0.9em;
	font-weight:	normal;
	text-align:	left;
}
#headerPriceLeft	h3	{
	margin:	20px	0	20px	0;
	padding:	0	20px	0	20px;
	color:	#333;
	font-size:	0.8em;
	font-weight:	normal;
	text-align:	left;
}
#headerPriceRight	{
	float:	right;
	width:	200px;
}
#headerPriceRight	ul	{
	list-style-type:	none;
	margin:	0;
	padding:	30px	0	0	0;
}
#headerPriceRight	li	{
	margin:	0;
	padding:	0	0	10px	0;
	text-align:	left;
	font-size:	0.9em!important;
	font-size:	0.8em;
}
#headerPriceRight	li	a	{
	background:	url(../images/allow_12FF6699.gif)	no-repeat;
	padding:	0	5px	0	15px;
	color:	#666;
}
#headerPriceRight	li	a:hover	{
	background:	url(../images/allow_12FF6699.gif)	no-repeat;
	color:	#F69;
}
.contentsPrice	{
	clear:	both;
	margin:	80px	0	0	0;
	padding:	0;
	width:	700px;
}
.contentsPrice	h4	{
	margin:	0;
	padding:	20px	30px	0	30px;
	text-align:	left;
	color:	#333;
	font-size:	1em!important;
	font-size:	0.9em;
	line-height:	1.5em!important;
	line-height:	1.5em;
	font-weight:	normal;
}
.contentsPrice	h4	span	{
	color:	#F00;
}
.contentsPrice	p	{
	margin:	0;
	padding:	5px	0	0	30px;
	text-align:	left;
	color:	#555;
	font-size:	0.8em!important;
	font-size:	0.7em;
}
.contentsPrice	a	{
	text-align:	left;
	font-size:	1em!important;
	font-size:	0.9em;
}
.contentsPrice	a	img	{
	margin:	0;
	padding:	0;
	text-align:	left;
	line-height:	30px;
	display:	block;
	width:	700px;
	height:	30px;
	border-top:	1px	solid	#FCC;
	border-bottom:	1px	solid	#FCC;
}
.contentsPrice	ul	{
	list-style-type:	none;
	margin:	20px	20px	5px	50px;
	height:	150px;
}
.contentsPrice	ul	li	{
	float:	left;
	padding:	0	20px	20px	0;
}
table#priceList	{
	clear:	both;
	margin:	0	0	40px	0;
	padding: 0;
	width:	700px;
}
table#priceList	th	{
	color:	#333;
	font-size:	0.9em;
	background-color:	#fcc;
	text-align:	center;
	height:	2em;
}
table#priceList th.lineDot	{
	border-right:	1px	dotted	#999;
	width:	80px;
}
table#priceList th.lineSolid	{
	border-right: 1px solid #999;
	width: 87px;
}
table#priceList th#lineSolidNon	{
	border: none;
	width: 86px;
}
table#priceList td	{
	color: #666;
	font-size: 0.9em;
	text-align: center;
	line-height:	30px;
	height: 30px;
}
table#priceList tr.lineColor	{
	background-color: #FEE;
}
table#priceList td.lineDot	{
	border-right: 1px dotted #999;
}
table#priceList td.lineDot2	{
	border-right:	1px	dotted	#999;
	border-left:	1px	solid	#FCC;
}
table#priceList td.lineSolid	{
	border-right: 1px solid #999;
	font-weight:	bold;
}
table#priceList td.lineSolidNon	{
	border: none;
	font-weight:	bold;
}
table#priceList td.lineSolid2	{
	border-right:	1px	solid	#FCC;
	font-weight:	bold;
}
/*	1-4-2.	Price Anchor	----------	*/
.priceAnchor,	#priceAnchorBottom	{
	margin:	20px	0	0	0;
	padding:	0;
	width:	700px;
	height:	30px;
}
#priceAnchorBottom	{
	margin:	20px	0	50px	0;
}
.priceAnchor	h5,	#priceAnchorBottom	h4	{
	padding:	0	20px	0	0;
	text-align:	center;
	font-size:	1em!important;
	font-size:	0.9em;
}
.priceAnchor	h5	span,	#priceAnchorBottom	h4	span	{
	padding:	0	10px	0	0;
}

/*	1-5.	Online Order
----------------------------------------	*/
/*	1-6.	Sample
----------------------------------------	*/
#titleSample	{
	background:	url(../images/about_system/column1_long_top_sample.gif)	no-repeat	center	top;
	text-indent:	-9999px;
}
.contentsSample	{
	margin:	20px	0	30px	0;
	padding:	0;
	width:	700px;
}
.contentsSample	h2	{
	padding:	30px	60px	0	60px;
	text-align:	left;
	color:	#333;
	font-weight:	normal;
	font-size:	0.9em;
	line-height:	1.5em;
}
.contentsSample	h2	span	{
	color:	#F00;
}

/*	1-7.	Card Variety
----------------------------------------	*/
#titleVariety	{
	background:	url(../images/about_system/column1_long_top_variety.gif)	no-repeat	center	top;
	text-indent:	-9999px;
}
#contentsCard	{
	margin:	20px	0	0	0;
	padding:	0;
	width:	700px;
}
#contentsCard	p	{
	float:	left;
	margin:	20px	20px	0	0;
	padding:	0;
	text-align:	center;
	display:	block;
	width:	200px;
	height:	180px;
}
#contentsCard	img	{
	border-top:	1px	solid	#CCC;
	border-left:	1px	solid	#CCC;
	border-bottom:	1px	solid	#999;
	border-right:	1px	solid	#999;
}
#contentsCard	img.noImage	{
	border:	none;
}
#contentsCard	p.cardTitle	{
	font-size:	0.8em;
	color:	#333;
	height:	30px;
}
#contentsCard	p.cardImageSide	{
	height:	130px;
}

/*	1-7-2.	Sample	*/
#contentsCardSample	{
	margin:	20px	0	50px	0;
	padding:	0;
	width:	700px;
}
#contentsCardSample	h3	{
	padding:	20px	0	20px	0;
	color:	#666;
	font-size:	82%;
	line-height:	180%;
}
#contentsCardSample	h3	span	{
	padding:	0	10px	0	10px;
}
#contentsCardSample	img	{
	border-top:	1px	solid	#CCC;
	border-left:	1px	solid	#CCC;
	border-bottom:	1px	solid	#999;
	border-right:	1px	solid	#999;
}
#contentsCardSample	p	{
	padding:	20px	0	20px	0;
	font-size:	82%;
	line-height:	180%;
}

/*	1-7-3.	Carbon	*/
#carbon	{
	clear:	both;
	margin:	0	auto	20px	auto;
	padding:	0;
	text-align:	left;
	width:	700px;
}
#carbon	h3	{
	margin:	0	0	5px	0;
	background:	url(../images/about_system/tIndexCarbonSystem.gif)	no-repeat;
	text-indent:	-9999px;
	width:	700px;
	height:	20px;	
}
#carbon	h3	strong	{
	font-weight:	normal;
}
#contentsCarbon	{
	margin:	0	auto;
	padding:	0;
	width:	688px;
	border:	1px	solid	#6C6;
}
#contentsCarbon	q	{
	margin:	20px	0	0	0;
	padding:	0	20px	0	20px;
	text-align:	right;
	color:	#333;
	font-size:	77%;
	line-height:	160%;
	font-style:	italic;
}
#contentsCarbon	p	{
	padding:	10px	20px	20px	20px;
	text-align:	left;
	font-weight:	normal;
	color:	#333;
	font-size:	77%;
	line-height:	160%;
}
#contentsCarbon	p	strong	{
	font-weight:	normal;
}

/*	1-8.	Pay
----------------------------------------	*/
#titlePay	{
	background:	url(../images/about_system/column1_long_top_pay.gif)	no-repeat	center	top;
	text-indent:	-9999px;
}
#headerContentsPay	{
	margin:	20px	0	0	0;
	padding:	0;
	width:	700px;
}
#headerContentsPay	h3	{
	margin:	20px	0	10px	0;
	padding:	10px	20px	0	20px;
	color:	#000;
	font-size:	0.9em;
	line-height:	1.5em;
	text-indent:	0.9em;
	font-weight:	normal;
	text-align:	left;
}
#headerContentsPay	ul	{
	list-style-type:	none;
	margin:	30px	0	0	30px;
}
#headerContentsPay	li	{
	padding:	0	0	10px	0;
	text-align:	left;
	color:	#333;
	font-size:	0.8em;
}
#headerContentsPay	li	span.payEx	{
	padding:	0	20px	0	0;
	color:	#F69;
	font-weight:	bold;
}
.contentsPay	{
	margin:	80px	0	0	0;
	padding:	0;
	width:	700px;
}
.contentsPay	h4	{
	margin:	0;
	padding:	20px	0	0	20px;
	text-align:	left;
	color:	#333;
	font-size:	0.8em;
	font-weight:	normal;
}
.contentsPay	p	{
	margin:	0;
	padding:	5px	0	0	50px;
	text-align:	left;
	color:	#555;
	font-size:	0.8em;
}
.contentsPay	a	{
	margin:	0;
	padding:	0;
	color:	#333;
	text-align:	left;
	font-size:	0.9em;
	line-height:	30px;
	display:	block;
	width:	700px;
	height:	30px;
	border-top:	1px	solid	#FCC;
	border-bottom:	1px	solid	#FCC;
}
.contentsPay	a:hover	{
	text-decoration:	none;
}
.contentsPay	a	span.payEx	{
	padding:	0	20px	0	30px;
	color:	#F69;
	font-weight:	bold;
}
table.tblPay	{
	width:	700px;
}
table.tblPay	th	{
	width:	400px;
}
table.tblPay	td	{
	text-align:	left;
	color:	#333;
	width:	150px;
}
table.tblPay	td.tdRight	{
	text-align:	right;
	width:	100px;
}
table.tblPay	td.discount	{
	text-align:	right;
	color:	#F00;
	font-weight:	bold;
	width:	100px;
}
table.tblPay	td.add	{
	text-align:	right;
	color:	#00F;
	font-weight:	bold;
	width:	100px;
}
table.tblPay	td.total,	table.tblPay	td.totalRight	{
	color:	#00F;
	font-weight:	bold;
	border-top:	1px	solid	#333;
}
table.tblPay	td.totalRight	{
	width:	100px;
	text-align:	right;
}
table.tblPay	td.tdSpaceHeight	{
	height:	50px;
}
table.tblPay	td.tdSpace	{
	width:	48px;
}
table.tblPay	span	{
	font-weight:	bold;
	color:	#F69;
}
table.tblPay	span.payEx	{
	font-size:	1.2em;
	padding:	0	10px	0	0;
}
table.tblPay	span.payOption	{
	padding:	0	0	0	10px;
}