/* catalog.css */

/*
最低限のheightのような指定ができるか調べる
*/

/* 検索エリア */
/*
#search_area_follow_scroll {
	display: none;
	background-color: #FFF;
	position: fixed;
	top: 95px;
	left: 15px;
*/
#search_area_space {
	margin-left: 15px;
	margin-right: 15px;
	width: 200px;
	float: left;
} #search_area {
	/*margin-left: 15px;
	margin-right: 15px;*/
	position: absolute;
	top: 137px;
	left: 15px;
	width: 200px;
	float: left;
	/*background-color: #24A7D3;*//*開発用*/
	/*
} #search_area div.button {
	margin: 0px;
	float:left;
	border:0px solid #222;
	background-color: #e5dfd3;
	text-decoration: none;
	color: #222;
	padding: 0px;
	transition: background-color .5s linear 0;
	-webkit-transition: all .5s;
	*/
} #search_area div.button, #search_area_follow_scroll div.button {
	float:left;
} #search_area div.title, #search_area_follow_scroll div.title {
	background-color: #e5dfd3;
} #search_area div.category1 div.title:hover, #search_area_follow_scroll div.category1 div.title:hover {
	cursor:pointer;
	color: #FFF;
	background-color: #ffa2a2;
} #search_area div.category2 div.title:hover, #search_area_follow_scroll div.category2 div.title:hover {
	cursor:pointer;
	color: #FFF;
	background-color: #ff8888;
} #search_area div.category3 div.title:hover, #search_area_follow_scroll div.category3 div.title:hover {
	cursor:pointer;
	color: #FFF;
	background-color: #ff6060;
} #search_area div.category1 div.title[data-select-flg="1"], #search_area_follow_scroll div.category1 div.title[data-select-flg="1"] {
	color: #FFF;
	background-color: #ffa2a2;
} #search_area div.category2 div.title[data-select-flg="1"], #search_area_follow_scroll div.category2 div.title[data-select-flg="1"] {
	color: #FFF;
	background-color: #ff8888;
} #search_area div.category3 div.title[data-select-flg="1"], #search_area_follow_scroll div.category3 div.title[data-select-flg="1"] {
	color: #FFF;
	background-color: #ff6060;
} #keyword_search_area {
	width: 200px;
} #keyword_search_area input#keyword {
	width: 155px;
	float: left;
} #keyword_search_area img {
	float: right;
} #favorite_chk {
	width: 18px;
	height: 18px;
	vertical-align: middle;
} #except_end_of_sale_chk {
	width: 18px;
	height: 18px;
	vertical-align: middle;
} div.checkbox_area {
	float: left;
	clear: both;
} div.checkbox_area:hover * {
	cursor: pointer;
} div.checkbox_area input {
	float: left;
} div.checkbox_area img.favorite {
	width: 18px;
	float: left;
	margin-top: 3px;
} div.checkbox_area label {
	float: left;
	margin-top: 2px;
} #category_search_area {
	width: 200px;
} #category_search_area div.category1 {
	width: 200px;
	margin-top:2px;
	text-align: left;
} #category_search_area div.category2 {
	display: none;
	width: 185px;
	margin-top:2px;
	margin-left: 15px;
	text-align: left;
/*
} #category_search_area div.category2 > div.title {
	margin-left: 2px;
	margin-right: 2px;
*/
} #category_search_area div.category3 {
	display: none;
	/*width: 185px;*/
	width: 100%;
	width: 179px;
	margin-top:2px;

	text-align: left;
} #category_search_area div.category3 > div.title {
	margin-left: 2px;
	margin-right: 2px;
} #category_search_area div.category3 > div.title.test {
	width: 165px;
	margin-left: 15px;
} #category_search_area div.title {
	line-height: 30px;
	font-size: 10pt;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 5px;
	border-radius: 2px;
/*
} #category_search_area div.category1 div.container {
	border-style: solid;
	border-color: #ffa2a2;
	border-radius: 5px;
	background-color: #ffa2a2;
*/
} #category_search_area div.category2 div.container[data-select-flg="0"] {
	border-radius: 2px;
} #category_search_area div.category2 div.container[data-select-flg="1"] {
	border-style: solid;
	border-color: #ff8888;
	border-radius: 2px;
	background-color: #ff8888;
	
/* 商品選択エリア */
} #item_select_area {
	width: 794px;
	float: right;
/*background-color: #CFF0F0;*//*開発用*/
} #item_select_area div.head {
	font-weight: bold;
} #item_select_area div.row {
	width: 794px;
	clear: both;
	
	margin-top: 10px;
	margin-bottom: 10px;
	
	/*padding-top: 10px;
	padding-bottom: 10px;*//* paddingの方がよいかもしれない。要検討 */
	border-bottom-style: solid;
	border-bottom-width: 1px;
	/*border-bottom-color: #CCCCCC;*/
	border-bottom-color: #DDD;
	
	height: 120px;/* デモ用の設定。本来はjsで商品を検索した時にその行のitem_outerで一番大きいheightを設定する */
} #item_select_area div.item_area div.item_outer {
	float: left;
	width: 33.33333%;
	text-align: center;
	/*color: #0066c0;*//* 文字色を青にすべきか検討 */
	font-size: 10pt;
	border-radius: 20px;/* クリック時に背景色を変えるべきか検討 */
	height: 100%;
} #item_select_area div.item_area div.item_inner {
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-top: 10px;
	position: relative;
} #item_select_area div.item_area div.item_inner *:hover {
	cursor: pointer;
} #item_select_area div.item_area div.item_outer img {
	width: 80px;
	/*margin-top: 5px;*/
} #item_select_area div.item_area div.item_outer div.caption {
	width: 150px;
	margin:0 auto 0 auto;/* 中央に配置 */
} #item_select_area div.item_area div.item_inner div.clickable_area {
	position: absolute;
	left: 5px;
	width: 50px;
	height: 50px;
} #item_select_area div.item_area div.item_inner img.favorite {
	width: 20px;
	/*
	float: left;
	*/
	position: absolute;
	left: 0px;
	
/* 注文エリア*/
} #order_area {
	display: none;
	position: absolute;
	/*
	top: 150px;
	left: 50px;
	*/
	z-index: 51;
	border: solid 1px #aaa;
	padding: 10px;
	background-color: #EEE;
	border-radius: 2px;
} .order_minus_bt {
	width: 30px;
	line-height: 26px;
	text-align: center;
	border-radius: 5px;
} .order_plus_bt {
	width: 30px;
	line-height: 26px;
	text-align: center;
	border-radius: 5px;
/*
} #order_area div.order_item_name:hover {
	cursor: pointer;
*/
} #order_area tr:not(.header):hover td {
	/*cursor: pointer;*/
	background-color: #cff0f0;
	transition: background-color .5s linear 0;
	-webkit-transition: all .5s;
} #order_area td.maker_name_cell:hover, #order_area td.order_item_name_cell:hover, #order_area td.tanka_cell:hover {
	cursor: pointer;
/*
} #order_area td.order_item[data-selected-flg="1"] {
	background-color: #cff0f0;
*/
} #order_area tr[data-selected-flg="1"] td {
	background-color: #cff0f0;
	cursor: auto !important;
} #order_area div.close_bt {
	float: right;
} #order_area div.close_bt a {
	margin-top: 10px;
	font-size: 10pt;
	width: 200px;
	line-height: 30px;
	text-align: center;
	border-radius: 2px;
} #order_area div.clickable_area {
	height: 50px;
	width: 32px;
	cursor: pointer;
	/*
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	*/
	display: table-cell;
	vertical-align: middle;
	position: relative;
} #order_area div.clickable_area img.favorite {
	width: 20px;
	cursor: pointer;
	/*
	margin: auto;
	*/
	position: absolute;
	left: 2px;
	top: 14px;
	
/* 商品詳細エリア */
} div.item_detail_area {
	display: none;
	position: absolute;
	z-index: 52;
	border: solid 1px #aaa;
	padding: 10px;
	background-color: #EEE;
	border-radius: 2px;
	width: 1002px;
} div.item_detail_area div.container {
	margin-bottom: 5px;
} div.item_detail_area img {
	height: 200px;
	float: left;
} div.item_detail_area table.item_detail_upper {
	float: left;
	margin-left: 5px;
} div.item_detail_area table.item_detail_upper td.list_label {
	width: 210px;
	text-align: left;
} div.item_detail_area table.item_detail_upper td.list_data {
	width: 500px;
	text-align: left;
} div.item_detail_area table.item_detail_lower {
	width 100%;
} div.item_detail_area table.item_detail_lower td.list_label {
	/*width: 100px;*/
	text-align: left;
} div.item_detail_area table.item_detail_lower td.list_data {
	/*width: 392px;*/
	text-align: left;
} col.col_1, col.col_3 {/* table-layout: fixed;にして、colspanを指定するとcolspanを指定していない行のwidthが効かなくなるらしいので、このように指定するようにした。参考URL：http://stackoverflow.com/questions/10712839/styling-a-table-layout-fixed-fixed-width-columns-colspan */
	width: 101px;
} col.col_2, col.col_4 {
	width: 395px;/* 見出しのtdに100pxを指定しておいて、後は自動の方が良いのではないかと思ったので、コメントアウト */
} div.item_detail_area table.item_detail_lower td.list_data[colspan="3"] {
	width: 891px;
} div.item_detail_area div.close_bt {
	float: right;
} div.item_detail_area div.close_bt a {
	margin-top: 10px;
	font-size: 10pt;
	width: 200px;
	line-height: 30px;
	text-align: center;
	border-radius: 2px;
} div.item_detail_area a.filelink_bt {
	text-decoration: underline;
	color: #000;
}