@charset "utf-8";

/********************************************************************************

	カートモジュールCSS

********************************************************************************/
@media screen and (max-width: 640px) {

	#goods-area,
	.season-item,
	.foot-banner {
		display: none;
	}

	.warning {
		margin: 10px 2%;
		background: #efefef;
		padding: 5px;
		color: red;
		border: 1px solid #ccc;
	}

	/* ------------------------------------------------------------------------
		フォーム
	------------------------------------------------------------------------ */

	.buttons {
		margin: 2px;
	}

	.hidden {
		display: none;
	}

	table td{
		min-width: 33%;
		box-sizing:border-box;
	}

	table.cart {
		width: 100%;
		box-sizing:border-box;
		margin: 0 0 5px 0;
	}

	table.cart td{
		box-sizing:border-box;
		padding: 1%;
	}

	table.cart th{
		background: #efefef;
	}

	table.cart th:nth-child(6),
	table.cart td:nth-child(6),
	table.cart th:nth-child(4),
	table.cart td:nth-child(4),
	table.cart th:nth-child(2),
	table.cart td:nth-child(2){
		display: none;
	}

	table.confirm,
	table.entryconfirm,
	table.entryform {
		width: 100%;
		box-sizing:border-box;
	}

	table.confirm {
		background: #efefef;
		padding: 2px;
	}

	table.entryconfirm td,
	table.entryform td{
		display: block;
		box-sizing:border-box;
		padding: 1%;
	}

	table.entryform td textarea{
		width: 96%;
	}

	table.entryform td select#know_id{
		display: block;
	}

	table td span.required {
		color: red;
	}

	table td span.entry_ex {
		display: none;
	}

	table td.title-area {
		background: #efefef;
		width: 98%;
	}

	input {
		max-width: 100%;
	}

	table td.input-area input[name="city"]{
		width: 90%;
	}
	table td.input-area input[name="address_1"]{
		width: 90%;
	}
	table td.input-area input[name="address_2"]{
		width: 90%;
	}
	table td.input-area input[name="address_3"]{
		width: 90%;
	}
	table td.input-area input[name="company"]{
		width: 90%;
	}

	.button {
		padding: 5px;
		margin: 1px;
		width: 8em;
		border-radius: 5px;
		display: inline-block;
		background: #ff8b00;
		text-decoration: none;
		color:#FFF;
		text-align:center;
	}
	a.button:hover {
		color: #fff;
	}

	div.content {
		margin: 5px 2%;
		width: 96%;
	}

	/* ------------------------------------------------------------------------
		住所変更
	------------------------------------------------------------------------ */

	form#address_2 table td {
		display: block;
	}


	/* ------------------------------------------------------------------------
		マイアカウント
	------------------------------------------------------------------------ */
	.account-inner {
		width:96%;
		margin:0 2%;
	}
	.account-inner p {
		background:#83CCD5;
		padding:3px 10px;
		color:#FFF;
		font-size:116%;
	}
	.account-inner ul {
		border-right:1px solid #83CCD5;
		border-bottom:1px solid #83CCD5;
		border-left:1px solid #83CCD5;
		padding:10px 5px 0 10px;
	}
	.account-inner ul li {
		margin:0 0 10px 0;
	}


}




/********************************************************************************/
/********************************************************************************/
/********************************************************************************/




@media screen and (min-width: 641px) {

/* ------------------------------------------------------------------------
	共通
------------------------------------------------------------------------ */

	input, textarea, select {
		margin: 3px 0px;
		border:1px solid #BBBBBB;
	}
	a:link, a:visited {
		text-decoration: none;
		cursor: pointer;
	}
	a:hover {
		text-decoration: none;
		cursor: pointer;
	}
	a img {
		border: none;
	}
	p {
		margin-top: 0px;
	}
	/* layout */

	#header .div2 {
		float: left;
		padding-top: 15px;
		padding-left: 15px;
	}
	#header .div3 {
		float: right;
		padding-top: 7px;
		height: 38px;
	}
	#header .div3 a {
		margin-left: 15px;
		padding: 1px 0px 2px 20px;
		background-repeat: no-repeat;
		background-position: left center;
	}
	#header .div4 {
		width: 510px;
		clear: right;
		float: right;
		height: 32px;
		padding-right: 14px;
	}
	#header .div4 a {
		float: left;
		margin-right: 2px;
		width: 100px;
		height: 18px;
		padding-top: 9px;
		padding-bottom: 9px;
		text-align: center;
		color: #333333;
		text-decoration: none;
		font-size: 14px;
		font-weight: bold;
		position: relative;
		z-index: 1;
	}
	#header .div7 {
		float: right;
		padding-top: 2px;
	}
	#header .div8 {
		float: left; margin-top: 6px;
	}
	#header .div9 {
		float: left;
	}
	#header .div10 {
		float: left; 
		margin-top: 2px;	
	}
	#search {
		padding-top: 7px;
		padding-left: 5px;
		color: #FFF;
		font-weight: bold;
	}
	#search select {
		border: 1px solid #0A5391;
		padding: 1px;
	}
	#search a {
		color: #FFF;
	}
	#search input {
		border: 1px solid #0A5391;
		padding: 2px;
	}
	#breadcrumb {
		float: left;
		padding-top: 7px;
		padding-bottom: 11px;
		height: 13px;
		margin-bottom: 10px;
		color: #000000;
	}
	.switcher {
		float: right;	
		margin-top: 3px;
		margin-left: 10px;
	}
	.switcher a {
		text-decoration: none;
		display: block;
	}
	.switcher .option {	
		position: absolute;
		z-index: 3;
		border-left: 1px solid #CCCCCC;
		border-right: 1px solid #CCCCCC;
		border-bottom: 1px solid #CCCCCC;
		background-color: #EEEEEE;
		display: none;
		width: 131px;
	}
	.switcher .option a {
		color: #000;
		padding: 3px 5px 3px 5px;
	}
	.switcher .option a:hover {
		background: #FFC;
	}
	.switcher img {
		position: relative;
		top: 1px;
	}
	#column_left {
		float: left;
		width: 190px;
		margin-right: 10px;
		clear: left;
	}
	#column_right {
		float: right;
		width: 190px;
		margin-left: 10px;
		clear: right;
	}
	#content {
		margin-left: 0px;
		margin-right: 200px;
		margin-bottom: 10px;
	}
	#content .top h1 {
		padding: 8px 0px 8px 7px;
	}
	#content h1, .heading {
		color: #000000;
		font-size: 14px;
		font-family: Arial, Helvetica, sans-serif;
		font-weight: bold;
		text-transform: uppercase;
		margin: 0px;
	}
	.heading {
		border-bottom: 1px solid #DDDDDD;
		padding-bottom: 3px;
		margin-bottom: 10px;
	}
	#content .middle {
		border-left: 1px solid #DDDDDD;
		border-right: 1px solid #DDDDDD;
		background: #FFFFFF;
		padding: 10px 10px 1px 10px;
		min-height: 380px;
	}

	.box .top img {
		float: left;
		margin-right: 5px;
	}
	.box .middle {
		border-left: 1px solid #C7C7C7;
		border-right: 1px solid #C7C7C7;
		background: #FFFFFF;
		padding: 10px;
	}

	/*-------- cart-btn -------*/
	#module_cart .cart-btn {
		padding: 0px 0px 0px 0px;
	}
	#module_cart .middleaj {
		background: #FFFFFF;
		padding: 5px;
		margin-top: -2px;
		border: 5px solid #FFE7BF;
	}

	#module_cart ul.cart_foot {
		margin-top:10px;
	}
	#module_cart ul.cart_foot li {
		margin-top:3px;
	}
	/*-------- cart -------*/


	.success {
		padding: 5px 0px;
		margin-bottom: 10px;
		background: #E4F1C9;
		border: 1px solid #A5BD71;
		font-size: 11px;
		font-family: Verdana, Geneva, sans-serif;
		text-align: center;
	}
	.warning {
		padding: 5px 0px;
		margin-bottom: 10px;
		background: #FFDFE0;
		border: 1px solid #FF9999;
		font-size: 11px;
		font-family: Verdana, Geneva, sans-serif;
		text-align: center;
	}
	.wait {
		padding: 5px 0px;
		margin-bottom: 10px;
		background: #FBFAEA;
		border: 1px solid #EFEBAA;
		font-size: 11px;
		font-family: Verdana, Geneva, sans-serif;
		text-align: center;
	}
	.required {
		color: #FF0000;
		font-weight: bold;
	}
	.error {
		color: #FF0000;
		display: block;
	}
	.help {
		cursor: pointer;
	}
	.tooltip {
		border: 1px solid #FDDA5C;
		background: #FBFF95;
		padding: 5px;
		font-size: 11px;
		width: 250px;
	}
	.clear { /* generic container (i.e. div) for floating buttons */
		overflow: hidden;
		width: 100%;
	}

	/* 可能ボタン */
	a.button {
		cursor: pointer;
	}

	/* イメージボタン */
	a#add_to_cart {
		cursor: pointer;

	}
	a#add_to_cart img{
		max-width: 70%;
	}
	/* 不能ボタン */

	.buttons {
		margin: 30px 10px 40px 10px;
	}
	.buttons input {
		padding: 0px;
		margin: 0px;
	}
	.buttons table {
		width: 100%;
		border-collapse: collapse;
	}
	.buttons table td {
		vertical-align: middle;
	}
	.set {
		background: #FFC;
		border: 1px solid #FC3;
		padding: 10px;
		margin-top: 3px;
		margin-bottom: 10px;
	}
	.content {
		background: #F7F7F7;
		border: 1px solid #DDDDDD;
		padding: 10px;
		margin-top: 3px;
		margin-bottom: 10px;
		clear:both;
	}

	.list {
		margin-bottom: 10px;
		width: 100%;
	}
	.list td {
		text-align: center;
		vertical-align: top;
		padding-bottom: 10px;
	}
	.sort {
		margin-bottom: 10px;
		background: #F8F8F8;
		height: 30px;
		width: 100%;
	}
	.sort .div1 {
		float: right;
		margin-left: 5px;
		padding-top: 6px;
		padding-right: 9px;
	}
	.sort .div2 {
		text-align: right;
		padding-top: 9px;
	}
	.sort select {
		font-size: 11px;
		margin: 0;
		padding: 0;
	}
	.pagination {
		display: inline-block;
		width: 100%;
		background: #F8F8F8;
		margin-bottom: 10px;
	}
	.pagination .links, .pagination .results {
		padding: 7px;
	}
	.pagination .links {
		float: left;
	}
	.pagination .links a {
		border: 1px solid #CCCCCC;
		padding: 4px 7px;
		text-decoration: none;
		color: #000000;
	}
	.pagination .links b {
		border: 1px solid #CCCCCC;
		padding: 4px 7px;
		text-decoration: none;
		color: #000000;
		background: #FFFFFF;
	}
	.pagination .results {
		float: right;
	}
	.tabs {
		width: 100%;
		height: 31px;
		margin-bottom: 0px;
	}
	.tabs a {
		float: left;
		display: block;
		padding: 6px 15px 7px 15px;
		margin-right: 2px;
		border-top: 1px solid #DDDDDD;
		border-bottom: 1px solid #DDDDDD;
		border-left: 1px solid #DDDDDD;
		border-right: 1px solid #DDDDDD;
		color: #000000;
		font-weight: bold;
		font-size: 13px;
		text-decoration: none;
		z-index: 1;
		position: relative;
		top: 1px;
	}
	.tabs a.selected {
		border-bottom: 0px;
		padding-bottom: 8px;
		z-index: 3;
	}
	.tab_page {
		border: 1px solid #DDDDDD;
		background: #FFFFFF;
		padding: 10px;
		display: block;
		z-index: 2;
		margin-bottom: 10px;
	}
	#footer {
		width: 100%;
		clear: both;
		padding-top: 5px;
		border-top: 1px solid #DDDDDD;
	}
	#footer .div1 {
		float: left;
		text-align: left;
	}
	#footer .div2 {
		float: right;
		text-align: right;
	}
	#category ul {
		margin-top: 0px;
		margin-bottom: 0px;
		margin-left: 8px;
		padding-left: 12px;
	}
	#information ul {
		margin-top: 0px;
		margin-bottom: 0px;
		margin-left: 8px;
		padding-left: 12px;
	}
	.cart {
		border-collapse: collapse;
		width: 100%;
		border-bottom: 1px solid #EEEEEE;
		margin-bottom: 10px;
	}
	.cart th {
		background: #EEEEEE;
		padding: 5px;
		font-weight: normal;
	}
	.cart td {
		padding: 5px;
		border-bottom:1px solid #EEEEEE;
	}

	.cart input.unit{ text-align:right;}


	/* -------- flow navi ----------*/
	.naviflow{
		margin:10px 0;
	}

	p.cartcomment{
		margin:0 0 10px 0;
	}

	/* -------- cart image border ----------*/
	img.b11 { border:1px solid #3FABDD;}
	img.b12 { border:1px solid #9ECC35;}
	img.b13 { border:1px solid #FB7D98;}
	img.b   { border:1px solid #999999;}

	/* -------- module css --------------*/
	span.yen { color:#900 } 

	/* -------- hidden ----------*/
	span.order_id{
		//display:none;
		color:#FFF;
	}

	/* -------- hidden (newsletter etc..)----------*/
	.hidden{
		display:none;
	}

	/* -------- entry form table  ----------*/

	.content table.confirm,
	.content table.entryform,
	.content table.entryconfirm,
	#contents form table {
		width:100%;
	}

	.content table.confirm,
	.content table.addr-area,
	#contents table.addr-area,
	.content p.about-est {
		background:#FFF;
	}
	.content table.addr-area td,
	.content p.about-est {
		padding:5px 10px;
	}
	.content table.confirm th {
		background:#F8F8F8;
		padding:3px 10px;
	}
	.content table.confirm td,
	#contents table.addr-area td {
		padding:5px 10px;
		border-bottom:1px dotted #DDD;
	}

	.content table tr.confirmtr{
		border-bottom:1px dotted #DDDDDD;
		padding-bottom:4px;
	}

	.content table tr.ordertr td{ 
		padding-bottom:4px;
	}

	.content table.entryform td{
		border-bottom:1px dotted #DDDDDD;
		padding:2px;
	}

	.content table.entryconfirm td{
		border-bottom:1px dotted #DDDDDD;
		padding:4px;
	}

	.content .est-sum {
		background:#FFF;
		padding:10px 10px 10px 0;
		border-bottom:1px dotted #DDD;
	}


	.content table span.entry_ex,
	#contents table span.entry_ex {
		color:#999;
		padding:0 0.5em;
	}

	form h3,
	h3.form-title {
		padding:0 0 0 10px;
		border-left:5px solid #8B653F;
		font-size:116%;
		margin:0 0 5px 0;
	}
	.content table td.title-area,
	#contents table td.title-area {
		background:#F7F7F7;
		padding:5px 0;
		border-bottom:1px dotted #DDD;
	}
	.content table td.input-area,
	#contents table td.input-area {
		background:#FFF;
		padding:5px 10px;
		border-bottom:1px dotted #DDD;
	}
	/* -------- login input ----------*/
	input.inputbig {
		width:200px;
		font-size:18px;
		padding:5px;
	}

	/* -------- common/home.tpl top lineup ----------*/
	#contents #lineup table.list td.aitem {
		width: 25%;
	}
	#contents #lineup table.list td.aitem .model{
		color: #999; 
		font-size: 11px;
	}
	#contents #lineup table.list td.aitem .price{
		color: #900; 
		font-weight: bold;
	}
	#contents #lineup table.list td.aitem .special{
		color: #900; 
		font-weight: bold; 
		text-decoration: line-through;
	}
	#contents #lineup table.list td.aitem .price2{
		color: #F00;
	}

	/* ------------------------------------------------------------------------
		おそうじグッズ
	------------------------------------------------------------------------ */
	#goods-area h3 {
		background:none;
		padding:0;
	}
	#goods-area ul {
		margin:0 10px;
	}
	#goods-area ul li {
		float:left;
		width:200px;
		line-height:1.4;
	}
	#goods-area ul li img {
		margin:0 0 3px 0;
	}
	#goods-area ul li a {
		font-weight:bold;
		font-size:116%;
	}
	#goods-area ul li a:hover {
		text-decoration:none;
	}
	#goods-area ul li.middle {
		margin:0 15px;
	}

	/* ------------------------------------------------------------------------
		マイアカウント
	------------------------------------------------------------------------ */
	.account-inner {
		float:left;
		width:195px;
		margin:0 10px;
	}
	* html .account-inner {
		width:188px;
	}
	.account-inner p {
		background:#83CCD5;
		padding:3px 10px;
		color:#FFF;
		font-size:116%;
	}
	.account-inner ul {
		border-right:1px solid #83CCD5;
		border-bottom:1px solid #83CCD5;
		border-left:1px solid #83CCD5;
		padding:10px 5px 0 10px;
	}
	.account-inner ul li {
		margin:0 0 10px 0;
	}

	/* ========================================================================
		カートロック（フローズンタイプ）カートの横にいるウザい奴
	======================================================================== */

	#side .cart_foot{
		position: relative;
	}

	#side .messenger{
		position: absolute;
		top: -110px;
		left: 160px;
	}

	#side .messenger{
		position: absolute;
		top: -79px;
		left: 164px;
	}

	#side .cart_under{
		margin: 5px 0 0 0;
	}

	/* ------------------------------------------------------------------------
		個人情報保護方針
	------------------------------------------------------------------------ */
	a.policy {
		color:#0971F3;
		cursor: pointer;
	}


	/* ------------------------------------------------------------------------
		ご依頼を確定ボタン
	------------------------------------------------------------------------ */

	/* ------------------------------------------------------------------------
		各ボタン個別配置指定 //2011.06.16 itai
	------------------------------------------------------------------------ */

	.account-success {
		margin:30px 50px;
	}

	/* ========================================================================
		季節のオススメ //2011.08.01 itai
	======================================================================== */
	.season-item {
		margin:0 10px 20px 10px;
	}
	.season-item dl {
		margin:5px 0;
	}
	.season-item dt {
		font-size:116%;
		font-weight:bold;
	}
	.season-item-l {
		float:left;
		width:300px;
	}
	.season-item-r {
		float:right;
		width:300px;
	}

	.foot-banner {
		margin:0 0 10px 0;
	}



}