@charset "utf-8";

/*================================
ファイル名：shop.css
作成者：ND&I 徳田 ( tokuda@n-di.co.jp )
=================================*/

@import url("../share/default.css");
@import url("../share/layout.css");
@import url("../share/share.css");
@import url("../share/color.css");

@import url("../share/datePicker.css");
@import url("../share/fancy.css");

@import url("../share/validation.css");

/* @ Clearfix
=================================*/

.shopping:after,
.shopping li:after,
#itemList:after,
#itemList li:after,
.detail:after,
.cart fieldset ul li:after,
.position:after,
#contents p.detailPhoto:after {
 content: "."; 
 display: block; 
 height: 0; 
 clear: both; 
 visibility: hidden;
}

.shopping,
.shopping li,
#itemList,
#itemList li,
.detail,
.cart fieldset ul li,
.position,
#contents p.detailPhoto {
	display: inline-block;
}

/* Hide from Mac IE \*/
.shopping,
.shopping li,
#itemList,
#itemList li,
.detail,
.cart fieldset ul li,
.position,
#contents p.detailPhoto {
	*height: 1%;
	display: block;
}
/* Hide from Mac IE */

/* @ PageNav
=================================*/

div#pageNav fieldset {
	border: solid #DFDFDF 4px;
	border-top: none;
	padding: .5em 1em;
}

	div#pageNav legend {
		display: none;
	}
	
	div#pageNav fieldset p {
		text-align: right;
	}
	
		input#itemSearchInput {
			border: solid #DFDFDF 1px;
			width: 170px;
			height: 2em;
		}
		
		input {
			border: solid #DFDFDF 1px;
		}
		
		input.hover, input.focus {
			border: solid #DFDFDF 1px;
			background: #FFF !important;
		}
		
		div#pageNav input#itemSearchSubmit {
			margin-top: .5em;
		}
		
div#header p.feed {
	margin-top: -40px;
	padding-bottom: 11px;
}

	div#header p.feed img {
		position: relative;
		z-index: 10000;
	}

/* pageNavの書き換え */
div#pageNav ul {
	border: solid #DFDFDF 4px;
	border-top: none;
}

	div#pageNav ul li {
		border-bottom: solid #DFDFDF 1px;
		background: #EEE;
	}
	
		div#pageNav ul li a {
			padding: 0 3px 0 10px;
			display: block;
			line-height: 2.1;
		}
		
	div#pageNav ul li.toggle {
		text-indent: 1.6em;
		background: #EEE url(../../img/shop/nav_off.gif) no-repeat .6em .6em;
		cursor: pointer;
	}
	
		div#pageNav ul li.toggle a {
			display: inline;
			background: none;
		}
		
		div#pageNav ul li.toggle a:hover {
			color: #121212;
			text-decoration: underline;
		}
		
			div#pageNav ul li.toggle ul {
				border: none;
				border-top: solid #DFDFDF 1px;
			}
			
				div#pageNav ul li.toggle ul li.location {
					background: #D7D7D7;
					text-decoration: underline;
				}
				
					div#pageNav ul li.toggle ul li a {
						display: block;
					}
					
					div#main div#pageNav ul li.toggle ul li a:hover {
						background: #D7D7D7 !important;
					}
		
	div#pageNav ul li.hover {
		background: #EEE url(../../img/shop/nav_off_hover.gif) no-repeat .6em .6em;
	}
	
		div#pageNav ul li.hover a {
		}
		
	div#main div#pageNav ul li.active {
		background: #EEE url(../../img/shop/nav_on.gif) no-repeat .6em .6em;
	}
	
		div#main div#pageNav ul li.active a {
			color: #121212 !important;
			background: none !important;
		}
		
		div#main div#pageNav ul li.active a:hover {
			text-decoration: underline;
		}
		
		div#main div#pageNav ul li.active a:hover {
			background: none !important;
		}
						
/* @ Main
=================================*/

div#contents {
	xmargin-top: -13px;
}

h1.shopMainImg {
}

	h1.shopMainImg img {
		border: solid #DFDFDF 4px;
	}
		
div#main h3 {
	margin-top: 13px;
	border: solid #DFDFDF 4px;
	height: 29px;
	padding-left: 26px;
}

ul.shopping {
	border: solid #DFDFDF 4px;
	border-top: none;
	padding: 0 10px 10px;
}

	ul.shopping li {
		float: left;
		margin-top: 10px;
		width: 240px;
	}
	
		ul.shopping li p.shopImg {
			float: left;
			width: 90px;
		}
		
			ul.shopping li p.shopImg img {
				border: solid #DFDFDF 4px;
			}
		
		ul.shopping li p.shopTxt {
			margin-left: 90px;
			padding-right: 10px;
		}
		
/* @ Item
=================================*/

div#displayswitch {
	float: right;
	margin-top: 13px;
	padding-bottom: 13px;
}

	div#displayswitch select {
		float: left;
		margin-right: 1em;
	}
	
	div#displayswitch ul {
		float: left;
		margin-right: 1em;
	}
	
		div#displayswitch ul li {
			position: relative;
			width: 97px;
			height: 27px;
		}
		
			div#displayswitch ul li span {
				float: right;
				width: 22px;
				height: 27px;
				background: url(../../img/shop/bg_selectorspan.png) no-repeat right top;
			}
			
			div#displayswitch ul li span.expanded {
				background: url(../../img/shop/bg_selectorspan.png) no-repeat right -54px;
			}
			
			div#displayswitch ul li span.hover {
				background: url(../../img/shop/bg_selectorspan.png) no-repeat right -27px;
			}
			
			div#displayswitch ul li span.spanLeft {
				float: left;
				width: 75px;
				height: 27px;
				background: url(../../img/shop/bg_selector.png) no-repeat left top;
				font-size: 90%;
				text-align: center;
				line-height: 27px;
			}
		
			div#displayswitch ul li ul {
				xclear: both;
				position: absolute;
				top: 30px;
				left: 0;
				border: solid #545454 1px;
				border-top: none;
				background: #FAFAFA;
				font-size: 90%;
			}
			
				div#displayswitch ul li ul li {
					width: 9em;
					height: 2.3em;
					border-top: solid #545454 1px;
					line-height: 2.3em;
				}
				
					div#displayswitch ul li ul li a {
						float: none;
						display: block;
						height: 2.3em;
						padding-left: .3em;
						color: #545454;
						text-decoration: none;
					}
					
					div#displayswitch ul li ul li a:hover {
						color: #666;
						background: #E5E5E5;
					}
		
	div#displayswitch a {
		float: left;
	}
	
	#dis_a {
		background: url(../../img/shop/list_img_on.gif) no-repeat left top;
	}
	
	#dis_b {
		background: url(../../img/shop/list_txt_on.gif) no-repeat left top;
	}
	
		#dis_a img {
			opacity: 0;
			filter: alpha(opacity=0);
		}
		
p.lots {
	clear: both;
	margin-top: 0;
	font-size: 90%;
	text-align: center;
}

html>/**/body p.lots {
	margin-top: 7px;
}
		
ul#itemList {
	clear: both;
	margin-top: 13px;
	border: solid #DFDFDF 4px;
	padding: 0 10px 15px;
}

	ul#itemList li {
		float: left;
		margin-top: 15px;
		width: 240px;
		height: 7em;
		overflow: hidden;
	}
	
		ul#itemList li p.shopImg {
			float: left;
			width: 90px;
		}
		
			ul#itemList li p.shopImg img {
				border: solid #DFDFDF 4px;
			}
		
		ul#itemList li div.shopTxt {
			margin-left: 90px;
			padding-right: 10px;
		}
		
			ul#itemList li div.shopTxt a.itemName {
				display: block;
			}
		
		ul#itemList li p.shopDis {
			display: none;
			margin-top: .5em;
		}
		
p.pager {
	margin-top: 13px;
	font-size: 90%;
	text-align: center;
}

/* @ Detail
=================================*/

div.detail {
	margin-top: 13px;
	border: solid #DFDFDF 4px;
	padding: 0 10px;
}

	div#contents p.detailPhoto {
		margin-top: .4em;
	}
	
		p.detailPhoto a {
			float: left;
			margin: 5px 5px 0 0;
			border: solid #DFDFDF 4px;
			xwidth: 75px;
			xheight: 75px;
			xoverflow: hidden;
			cursor: url(../img/fancy/zoomin.cur), pointer;
		}
		
			p.detailPhoto a img {
				width: 75px;
				height: 75px;
			}
				
		div#fancy_content {
			cursor: url(../img/fancy/zoomout.cur), pointer;
		}
		
	div.detail div.detailTxt {
		clear: left;
		padding: 5px 0 10px;
	}
	
		div.detailTxt p {
			margin-top: 1em;
		}
		
		div.detailTxt p.first-child {
			margin: 0;
		}
	
form.cart {
}

	form.cart fieldset {
		margin: 25px 70px 0;
		border: solid #DFDFDF 4px;
		padding: 10px 10px 0;
		background: #EFEFEF;
	}
	
	form.cart fieldset legend {
		display: none;
	}
	
		form.cart fieldset ul {
		}
		
			form.cart fieldset ul li {
				clear: left;
				border-top: dashed #F7F7F7 3px;
				padding-top: 1em;
			}
			
			form.cart fieldset ul li.first-child {
				border: none;
				padding-top: 0;
			}
	
		form.cart fieldset dl {
			display: inline;
		}
		
		html>/**/body form.cart fieldset dl {
			display: block;
		}
		
			form.cart fieldset dl dt {
				float: left;
				width: 140px;
				background: url(../../img/share/icon_check.gif) no-repeat left center;
				text-indent: 1.4em;
			}
			
			form.cart fieldset dl dd {
				float: left;
				width: 200px;
			}
			
			html>/**/body form.cart fieldset dl dd {
				padding-bottom: 1em;
			}
			
	form.cart p.btn {
		margin-top: 25px;
		text-align: center;
	}
			
	form.cart button {
		clear: both;
		margin: 0;
		border: none;
		padding: 0;
		background: none;
	}
		
/* @ Order
=================================*/

div#cart {
}

table.order {
	margin: 2em auto 0;
	border: solid #DFDFDF 2px;
	border-right: none;
	border-bottom: none;
	width: 90%;
}

	table.order th,
	table.order td {
		border: solid #DFDFDF 2px;
		border-top: none;
		border-left: none;
		padding: .5em .8em;
	}
	
	table.order thead td {
		background: #E7E7E7;
		text-align: center;
	}
	
	td.lot,
	td.delete {
		text-align: center;
	}
	
		td.delete a {
			display: block;
		}
	
	td.price {
		text-align: right;
	}
	
	td.amount {
		font-weight: bold;
		text-align: right;
	}
	
	tfoot td.lot,
	tfoot td.price {
		color: #F60;
		font-size: 120%;
		font-weight: bold;
	}
	
	table.order tr.carriage th {
		background: #EEE;
		font-weight: normal;
		text-align: right;
	}
	
	table.order tr.carriage td {
		text-align: right;
	}	

ol.position {
	margin: 0 auto;
	width: 593px;
	height: 52px;
	background: url(../../img/shop/orderposition.png) no-repeat;
}

	ol.position li {
		float: left;
		padding: 0 2.2em 0 1.2em;
		background: url(../../img/shop/orderposition_part.png) no-repeat right center;
		line-height: 52px;
		color: #FAFAFA;
	}	
	
	ol.position li.first-child {
		padding-left: 2em;
	}
	
	ol.position li.location {
		color: #FFA913;
		font-weight: bold;
	}
	
	ol.position li.last-child {
		padding-right: 0;
		background: none;
	}
	
p.pre-order {
	margin-top: 1em;
	text-align: center;
}

p#submitBtn a,
p#submitBtn2 a,
p#submitBtn3 a,
p#submitBtn4 a {
	margin: 0 1em;
}

form#orderForm {
	padding-bottom: 1em;
}

form#orderForm legend {
	display: none;
}

dl.form {
	margin: 1em auto 0;
	border: solid #DFDFDF 2px;
	border-top: none;
	width: 70%;
}

	dl.form label {
		cursor: pointer;
	}

	dl.form dt,
	dl.form dd {
		border-top: solid #DFDFDF 2px;
		padding: .7em 1em;
	}

	dl.form dt {
		clear: left;
		float: left;
		width: 11em;
	}
	
		#orderForm dl.form dt input {
			margin-right: .4em;
			border: none;
			cursor: pointer;
		}
	
	dl.form dd {
		margin-left: 12em;
		border-left: dashed #DFDFDF 2px;
	}
	
		dl.form dd span {
			margin-top: .2em;
			padding-left: 1.2em;
			color: #F60;
			background: url(../../img/share/icon_delete.gif) no-repeat left center;
			font-weight: bold;
		}
		dl.form dd span.group {
			padding-left: 0;
			color: #000;
			background: none;
			font-weight: normal;
		}
		
		dl.form dd strong {
			font-size: 80%;
			line-height: 2;
		}
	
		dl.form dd input {
			width: 10em;
		}
		
			#orderForm dl.form dd li input {
				margin-right: .4em;
				border: none;
				width: auto;
				cursor: pointer;
			}
		
	dl.form dd ul.select {
	}
	
		dl.form dd ul.select li {
			margin-right: 1em;
			display: inline;
		}
		
#name01,
#name02 {
	width: 8em;
}

#ruby01,
#ruby02 {
	width: 8em;
}

#zip,
#zip2 {
	width: 5em;
}

/*#add1,
#add3 {
	width: 6em;
}*/

#add2_01,
#add2_02,
#add4 {
	width: 25em;
}

#tel,
#tel2 {
	width: 10em;
}

#mail,
#mail2 {
	width: 20em;
}

#comment {
	width: 25em;
}

#orderForm input,
#orderForm textarea {
	border: solid #DFDFDF 1px;
	padding: .2em;
}

#orderForm a:hover img {
	opacity: .9;
	filter: alpha(opacity=90);
}

body#order {
	xbackground: #F7F7F7;
}

	body#order div#header {
		padding-bottom: 1em;
	}

	body#order div#main {
		padding: 0 6px;
		width: 950px;
	}

		div#cart {
			border-top: solid #545454 3px;
			padding: 1.5em 0 1em;
		}
	
	body#order div#footer {
		clear: both;
		margin: 0 auto;
		width: 962px;
		height: auto;
		background: #545454 url(../../img/share/bg_footer.jpg) no-repeat left bottom;
	}
	
		body#order div#footer ul {
			padding-bottom: .5em;
			line-height: 40px;
			font-size: 90%;
			text-align: center;
		}
		
			body#order div#footer ul li {
				padding: 0 .5em;
				display: inline;
			}
			
				body#order div#footer ul li a {
					color: #FAFAFA;
				}
				
	body#order p#copyright {
		font-size: 90%;
	}
	
a.dp-choose-date {
	margin-left: .5em;
	padding-left: 1.6em;
	background: url(../../img/share/icon_calendar.gif) no-repeat left center;
	font-size: 85%;
}

p.submit {
	margin-top: 1em;
	text-align: center;
}

h1.complete {
	margin-top: 3em;
	font-size: 120%;
	text-align: center;
}

ul.link {
	margin-top: 3em;
	text-align: center;
}

	ul.link li {
		padding: 0 .5em;
		display: inline;
	}
	
p.err {
	margin-top: 1em;
	color: #F60;
	font-size: 110%;
	font-weight: bold;
	text-align: center;
}