@charset "UTF-8";
/*////////////////////////////////////////////////////////////
Tokyo Life - itemdetail.css
------------------------------------------------------------

[Item Detail]
	0. Import
	1. Layout
	2. PageTitle
	3. Big Column
	  3-1. itemSwf
		3-2. colmBlock Frame
		3-3. Point
		3-4. Related News
		3-5. Tab Block
	4. Small Column
		4-1. Base Info
		4-2. Option Info
		4-3. Color Info
		4-4. Buy Info
		4-5. Sub Info
	5. Item List

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

/* ################################################################################
	[Item Detail] item detail styles
  ################################################################################ */
/* ------------------------------------------------------------
	0. Import
  ------------------------------------------------------------ */
@import url(itemunit.css);

/* ------------------------------------------------------------
	1. Layout
  ------------------------------------------------------------ */
div#content {background:url(../imgJP/common/bg_grid_ccc.gif) repeat-y 192px 0;}
div#main {padding:0 0 20px;}
div#itemDetBody {
	width:768px;
	border-top: 1px solid #ccc;
	background:url(../imgJP/common/bg_grid_ccc.gif) repeat-y 516px 0;
	margin-bottom: 20px;
	border-bottom: 1px solid #ccc;
}
div#itemDetBody .bigColm {float:left;width:517px;}
div#itemDetBody .smallColm {float:right;width:251px;}

/* ------------------------------------------------------------
	2. PageTitle
  ------------------------------------------------------------ */
div#main .pagetitleBT {
	width:736px;
	border-top:9px solid #000;
	padding:8px 0;
	margin:10px 16px 0;
}
div#main .headTtl {width:560px;float:left;}
div#main .pagetitleBT .itemBrand {
	font-size:85%;/*11px*/
	font-weight:bold;
	padding-bottom:8px;
}
div#main .pagetitleBT .itemBrand a:link,
div#main .pagetitleBT .itemBrand a:visited {color:#003399;text-decoration:none;}
div#main .pagetitleBT .itemBrand a:hover,
div#main .pagetitleBT .itemBrand a:active {color:#003399;text-decoration:underline;}
div#main .pagetitleBT .itemCopy {font-size:153.9%;/*20px*/font-weight:bold;}
div#main .pagetitleBT .headIco {float:right;width:165px;}
div#main .pagetitleBT .headIco li {float:left;margin:0 2px 2px 0;}
*:first-child+html div#main .pagetitleBT .headIco li {
	line-height:0;
	font-size:0;
	vertical-align:bottom;
}
* html div#main .pagetitleBT .headIco li {
	line-height:0;
	font-size:0;
	vertical-align:bottom;
}

/* ------------------------------------------------------------
	3. Big Column
  ------------------------------------------------------------ */
/*  3-1. itemSwf
  ------------------------------------------------- */
div#itemSwf {
	position: relative;
	width:515px;
	height: 660px;
	padding:0 1px;
	border-bottom: 1px solid #ccc;
	margin-bottom: 20px;
}
div#itemSwf div#itemPhoto {
	position: absolute;
	top:0;
	left:57px;
	width:400px;
	height: 435px;
}
div#itemSwf div#itemPhoto table {width:400px;height: 435px;}
div#itemSwf div#itemPhoto table td#coverPhoto {
	width: 400px;
	height:400px;
	margin:0 auto;
	vertical-align:middle;
	text-align: center;	
}
div#itemSwf div#itemPhoto table td.note {
	width: 400px;
	height:35px;
	text-align:right;
	font-size:11px;
	vertical-align:middle;
}
div#swfHolder {width: 515px;height: 660px;}
div#swfStockOut {
	display: none;
	position: absolute;
	width: 515px;
	top: 225px;
	left: 0;
	text-align: center;
}

/*  3-2. colmBlock Frame
  ------------------------------------------------- */
div.bigColm dl.colmBlock {width:485pxpx;padding:0 16px 20px;}
div.bigColm dl.colmBlock dt {width:485pxpx;padding-bottom:5px;}
* html div.bigColm dl.colmBlock dt {
	line-height:0;
	vertical-align:bottom;
	font-size:0;
}

/*2010.9.27�lj�-----��������*/
div.bigColm dl.colmBlock a:link,
div.bigColm dl.colmBlock a:visited,
div.bigColm dl.colmBlock a:active {
	color:#000080;
	text-decoration:underline;
}
div.bigColm dl.colmBlock a:hover {
	text-decoration:none;
}
/*2010.9.27�lj�-----�����܂�*/

/*  3-3. Point
  ------------------------------------------------- */
div.bigColm dl.colmBlock dd.point {line-height:1.4;}

/*  3-4. Related News
  ------------------------------------------------- */
div.bigColm dl.colmBlock dd.relatedNews li {
	font-size:93%; /*12px*/
	padding:0 0 3px 8px;
	background:url(../imgJP/common/marker_triangle.gif) no-repeat 0 4px;
}
* html div.bigColm dl.colmBlock dd.relatedNews li {
	background:url(../imgJP/common/marker_triangle.gif) no-repeat 0 5px;
}

/*  3-5. Tab Block
  ------------------------------------------------- */
div.bigColm div.tabBlock {width:485px;margin:0 auto 15px;}
div.bigColm div.tabBlock ul li#head1 {width:161px;float:left;height:28px;}
div.bigColm div.tabBlock ul li#head2 {width:162px;float:left;height:28px;}
div.bigColm div.tabBlock ul li#head3 {width:162px;float:left;height:28px;}
div.bigColm div.tabBlock ul li.head1 a {
	width:161px;
	height:28px;
	display:block;
	text-indent:-9999px;
	background:url(../imgJP/detail/tab_feature.gif) no-repeat 0 0;
}
div.bigColm div.tabBlock ul li.head2 a {
	width:162px;
	height:28px;
	display:block;
	text-indent:-9999px;
	background:url(../imgJP/detail/tab_detail.gif) no-repeat 0 0;
}
div.bigColm div.tabBlock ul li.head3 a {
	width:162px;
	height:28px;
	display:block;
	text-indent:-9999px;
	background:url(../imgJP/detail/tab_size.gif) no-repeat 0 0;
}
div.bigColm div.tabBlock ul li.head1_on a {
	width:161px;
	height:28px;
	display:block;
	text-indent:-9999px;
	background:url(../imgJP/detail/tab_feature.gif) no-repeat 0 -28px;
}
div.bigColm div.tabBlock ul li.head2_on a {
	width:162px;
	height:28px;
	display:block;
	text-indent:-9999px;
	background:url(../imgJP/detail/tab_detail.gif) no-repeat 0 -28px;
}
div.bigColm div.tabBlock ul li.head3_on a {
	width:162px;
	height:28px;
	display:block;
	text-indent:-9999px;
	background:url(../imgJP/detail/tab_size.gif) no-repeat 0 -28px;
}
div.bigColm div.tabBlock div.itemBox {
	width:455px;
	border-right:1px solid #ccc;
	border-left:1px solid #ccc;
	border-bottom:1px solid #ccc;
	padding:14px;
}
div.bigColm div.tabBlock div.itemBox p.detail {font-size:93%;/*12px*/line-height:1.4;}
div.bigColm div.tabBlock div.itemBox table.feature {font-size:93%;/*12px*/width:455px;}
div.bigColm div.tabBlock div.itemBox table.feature th {
	vertical-align:top;
	text-align:left;
	width:95px;
	padding:5px 5px 5px 0;
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;
}
div.bigColm div.tabBlock div.itemBox table.feature td {
	vertical-align:top;
	text-align:left;
	padding:5px 0;
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;
}
div.bigColm div.tabBlock div.itemBox table.size {font-size:93%;/*12px*/width:455px;}
div.bigColm div.tabBlock div.itemBox table.size th {
	border-left:1px solid #ccc;
	border-right:1px solid #ccc;
	border-top:1px solid #ccc;
	border-bottom:2px solid #ccc;
	text-align: center;
	vertical-align: top;
	background:#e5e5e1;
	padding:2px 0;
}
div.bigColm div.tabBlock div.itemBox table.size td {
	border:1px solid #ccc;
	text-align:center;
	vertical-align:top;
	padding:2px 0;
}
div.bigColm div.tabBlock div.itemBox table.size td.unit {font-weight:bold;width:50px;}

/* ------------------------------------------------------------
	4. Small Column
  ------------------------------------------------------------ */
/*  4-1. Base Info
  ------------------------------------------------- */
div.smallColm .baseInfo {
	width:220px;
	margin:0 16px 0 15px;
	padding:14px 0;
	border-bottom:1px solid #ccc;
}
div.smallColm .baseInfo li.itemName {font-size:116%; /*15px*/margin-bottom:5px;}
div.smallColm .baseInfo li.itemModel {font-size:85%; /*11px*/margin-bottom:20px;}
div.smallColm .baseInfo li.itemPrice {
	font-size:108%; /*14px*/
	margin-bottom:5px;
	line-height:1.4;
	font-weight: bold;
}
div.smallColm .baseInfo li.salePrice {
	font-size:108%; /*14px*/
	margin-bottom:5px;
	font-weight:bold;
	color:#ff0000;
	line-height:1.4;
}
div.smallColm .baseInfo li.salePrice span.through {
	text-decoration:line-through;
	padding-right:5px;
	color:#000;
}
div.smallColm .baseInfo li.salePrice span.price {padding-left:3px;}
div.smallColm .baseInfo li.itemPoint {
	font-size:93%; /*12px*/
	padding:15px 0 5px;
	float:left;
}
div.smallColm .baseInfo li.aboutPoint {
	float:right;
	width:78px;
	padding-top:13px;
}
* html div.smallColm .baseInfo li.aboutPoint {
	line-height:0;
	vertical-align:bottom;
	font-size:0;
}
div.smallColm .baseInfo li.itemFee {
	font-size:93%; /*12px*/
	padding:0 0 5px;
	float:left;
}
div.smallColm .baseInfo li.aboutFee {
	float:right;
	width:78px;
	padding-top:4px;
}
* html div.smallColm .baseInfo li.aboutFee {
	line-height:0;
	vertical-align:bottom;
	font-size:0;
}
div.smallColm .baseInfo li.aboutPoint a {
	display:block;
	width:78px;
	height:9px;
	padding:5px 0;
}
* html div.smallColm .baseInfo li.aboutPoint a {padding:3px 0 5px;}
div.smallColm .baseInfo p.noteDeliv {font-size:85%; /*11px*/color:#ff0000;}

/*  4-2. Option Info
  ------------------------------------------------- */
div.smallColm .optionInfo {
	width:220px;
	margin:0 16px 0 15px;
	padding:6px 0 0;
	border-bottom:1px solid #ccc;
}
div.smallColm .optionInfo li {
	float:left;
	padding-bottom: 4px;
	width:110px;
	text-align:center;
}
* html div.smallColm .optionInfo li {
	line-height:0;
	font-size:0;
	vertical-align:bottom;
}
div.smallColm .optionInfo li.aboutIcon {
	float:right;
	padding:0 0 2px 0;
	width:78px;
}
* html div.smallColm .optionInfo li.aboutIcon {
	line-height:0;
	vertical-align:bottom;
	font-size:0;
}
div.smallColm .optionInfo li.aboutIcon a {
	padding:2px 0 4px;
	width:78px;
	height:9px;
	display:block;
}

/*  4-3. Color Info
  ------------------------------------------------- */
div.smallColm dl.colorInfo {width:220px;margin:14px 16px 14px 15px;}
div.smallColm dl.colorInfo dt {padding-bottom:10px;}
* html div.smallColm dl.colorInfo dt {
	line-height:0;
	font-size:0;
	vertical-align:bottom;
}
div.smallColm dl.colorInfo dd ul {padding-bottom: 5px;}
div.smallColm dl.colorInfo dd li {
	display:inline;
	color:#003399;
	padding-right: 5px;
}
div.smallColm dl.colorInfo dd li a:link,
div.smallColm dl.colorInfo dd li a:visited {color:#003399;text-decoration:none;}
div.smallColm dl.colorInfo dd li a:hover,
div.smallColm dl.colorInfo dd li a:active {color:#003399;text-decoration:underline;}
div.smallColm dl.colorInfo dd p.note {
	text-indent:-1em;
	margin-left:1em;
	font-size: 10px;
}

/*  4-4. Buy Info
  ------------------------------------------------- */
div.smallColm .buyInfo {
	width:220px;
	background:url(../imgJP/common/bg_diagonal.gif) repeat 0 0;
	margin-right: 1px;
	padding:15px;
}
div.smallColm .buyInfo p.soonTxt {
	text-align:center;
	font-weight:bold;
	color:#FF0000;
	padding:5px 0 0;
}
div.smallColm dl.buyInfo dt {padding-bottom:10px;}
* html div.smallColm dl.buyInfo dt {
	line-height:0;
	font-size:0;
	vertical-align:bottom;
}
div.smallColm dl.buyInfo dd li.sel {padding-bottom:15px;}
div.smallColm dl.buyInfo dd li.sel select {font-size:11px;width:220px;}
div.smallColm dl.buyInfo dd li.cartin {padding-bottom:15px;}
div.smallColm dl.buyInfo dd li.option {color:#003399;}
div.smallColm dl.buyInfo dd li.option table th {
	text-align:left;
	vertical-align:middle;
	width:200px;
	font-weight: bold;
}
*:first-child+html div.smallColm dl.buyInfo dd li.option table th {padding-top:4px;}
* html div.smallColm dl.buyInfo dd li.option table th {padding-top:5px;}
div.smallColm dl.buyInfo dd li.option table td {
	text-align:left;
	vertical-align:top;
	color:#003399;
	font-size:93%;/*12px*/
	padding-top:2px;
}

/*  4-5. Sub Info
  ------------------------------------------------- */
div.smallColm .subInfo {width:220px;margin:14px 16px 14px 15px;}
div.smallColm .subInfo p.btn {
	width:180px;
	margin:0 20px;
	padding-bottom:10px;
}
div.smallColm .subInfo p.note {font-size:10px;padding-bottom:6px;}
div.smallColm .subInfo p.aboutStaff {float:right;width:101px;}
div.smallColm .subInfo p.aboutStaff a {
	width:101px;
	display:block;
	height:9px;
	padding:4px 0;
}

/* ------------------------------------------------------------
	5. Item List
  ------------------------------------------------------------ */
div#main dl.mainBlock {width:768px;}
div#main dl.mainBlock dt {
	width:736px;
	border-top:9px solid #000;
	padding:8px 0 3px;
	margin:0 16px;
}
* html div#main dl.mainBlock dt {
	line-height:0;
	vertical-align:bottom;
	font-size:0;
}
div#main dl.mainBlock dt dd {width:768px;}
div#main div#itemlistWrap {width:768px;}