@charset "utf-8";

/* =========================================================
 * 鈴茶堂: 商品詳細・カート・会員ページの見た目調整
 * （親 Welcart Basic の usces_cart.css を上書き）
 * ========================================================= */

/* ---------- 共通 ---------- */
.cart-page,
.member-page {
	padding: 12px 16px 48px;
	box-sizing: border-box;
	text-align: left;
	color: #666666;
	line-height: 1.7;
}

.cart_page_title,
.member_page_title,
.item_page_title {
	font-size: 100% !important;
	background: #ffffff url(images/h2_bg.gif) no-repeat left top !important;
	background-size: 100% 100% !important; /* スマホでも右端の枠が切れないようにする */
	color: #808080 !important;
	padding: 4px 0 10px 15px !important;
	margin: 0 0 16px !important;
	line-height: 28px !important;
	border: none !important;
	font-weight: normal !important;
	box-sizing: border-box;
}

/* カートページ見出しの上余白 */
.cart_page_title {
	margin-top: 12px !important;
}

.cart-page h3,
.member-page h3,
#memberpages h3,
#confirm_table caption,
.cart-page .header_explanation h3 {
	font-size: 100%;
	background: url(images/h3_bg.gif) no-repeat left top;
	background-size: 100% 100%; /* PCでもグレー背景が右端まで伸びるようにする */
	background-color: transparent;
	color: #ffffff;
	margin: 16px 0 10px;
	line-height: 28px;
	letter-spacing: 0.2em;
	padding: 0 0 2px 15px;
	border: none;
	box-sizing: border-box;
	text-align: left;
}

/* 注文完了「送信が完了しました」は中央揃え */
#cart_completion h3,
#wc_ordercompletion h3 {
	font-size: 100%;
	background: url(images/h3_bg.gif) no-repeat left top;
	background-size: 100% 100%;
	background-color: transparent;
	color: #ffffff;
	margin: 16px 0 10px;
	line-height: 28px;
	letter-spacing: 0.2em;
	padding: 0 15px 2px;
	border: none;
	box-sizing: border-box;
	text-align: center;
}

.error_message {
	margin: 0 0 14px;
	padding: 10px 12px;
	background: #fff5f5;
	border: 1px solid #f0c2c2;
	color: #8b0000;
	font-size: 13px;
}

/* エラー未発生時は空の枠を出さない */
.error_message:empty {
	display: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.header_explanation,
.footer_explanation {
	margin-bottom: 14px;
	font-size: 13px;
	color: #666666;
}

/* 内容確認: 在庫超過・ご用意不可の注意文を目立たせる */
#info-confirm .header_explanation strong {
	color: #8b1e3f;
	font-weight: bold;
	background: #fff5f5;
	padding: 0 2px;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

.taxincluded,
.taxincluded_top {
	text-align: right;
	font-size: 12px;
	color: #888888;
}

/* ---------- カートステップナビ ---------- */
div.cart_navi {
	margin: 0 0 20px;
}

div.cart_navi ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: visible;
}

div.cart_navi li {
	flex: 1 1 25%;
	float: none;
	min-width: 0;
	padding: 0 8px !important;
	background: #e8e8e8 !important;
	color: #666666 !important;
	font-size: 12px !important;
	font-weight: normal !important;
	line-height: 40px !important;
	text-align: center;
	border-right: 1px solid #ffffff;
	box-sizing: border-box;
}

div.cart_navi li::before,
div.cart_navi li::after {
	display: none !important;
	content: none !important;
}

div.cart_navi li.current,
div.cart_navi li.current::before,
div.cart_navi li.current::after {
	background-color: #808080 !important;
	color: #ffffff !important;
	font-weight: bold !important;
}

/* ---------- カートテーブル ---------- */
#cart {
	margin-bottom: 20px;
}

#cart .upbutton {
	margin-bottom: 12px;
	padding: 10px 12px;
	background: #f7f7f7;
	border: 1px solid #dddddd;
	font-size: 12px;
	color: #666666;
}

#cart .upbutton input {
	margin-left: 8px;
	padding: 6px 12px;
	border: 1px solid #999999;
	background: #ffffff;
	color: #333333;
	cursor: pointer;
}

#cart .upbutton input:hover {
	background: #f0f0f0;
}

#cart_table,
#cart table,
.confirm_table,
#confirm_table,
#memberinfo table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid #cccccc;
	background: #ffffff;
}

#cart_table th,
#cart table th,
.confirm_table th,
#confirm_table th,
#memberinfo table th,
.customer_form th {
	background: #e6e6e6 !important;
	color: #333333 !important;
	border: 1px solid #cccccc !important;
	padding: 8px 6px !important;
	font-size: 12px !important;
	font-weight: normal !important;
	text-align: center;
	vertical-align: middle;
}

#cart_table td,
#cart table td,
.confirm_table td,
#confirm_table td,
#memberinfo table td,
.customer_form td {
	border: 1px solid #cccccc !important;
	padding: 8px 6px !important;
	font-size: 13px;
	vertical-align: middle;
	background: #ffffff;
}

#cart_table .aright,
#cart_table .amount {
	text-align: right;
	font-weight: bold;
}

#cart_table .thumbnail img {
	max-width: 60px;
	height: auto;
	border: 1px solid #dddddd;
}

#cart_table .quantity input {
	width: 3.5em;
	padding: 4px;
	border: 1px solid #cccccc;
	text-align: center;
}

#cart .action input.delButton,
#cart .action input[type="submit"] {
	padding: 4px 8px;
	border: 1px solid #aaaaaa;
	background: #f5f5f5;
	color: #666666;
	font-size: 11px;
	cursor: pointer;
}

.currency_code,
.no_cart {
	margin: 10px 0 16px;
	font-size: 13px;
}

.no_cart {
	padding: 16px;
	background: #fafafa;
	border: 1px dashed #cccccc;
	text-align: center;
}

.gp {
	margin: 10px 0;
	font-size: 12px;
	color: #666666;
}

.gp img {
	vertical-align: middle;
	margin-right: 6px;
}

/* ---------- 送信ボタン ---------- */
.cart-page .send,
.member-page .send,
#memberpages .send {
	padding-top: 16px;
	text-align: center;
}

.cart-page .send input,
.member-page .send input,
#memberpages .send input,
.send input[type="submit"],
.send input[type="button"] {
	min-height: 40px;
	margin: 4px 6px;
	padding: 8px 18px;
	border: 1px solid #999999;
	background: #f0f0f0;
	color: #333333;
	font-size: 13px;
	cursor: pointer;
	border-radius: 0;
	box-shadow: none;
}

.cart-page .send input:hover,
.member-page .send input:hover,
#memberpages .send input:hover {
	background: #e4e4e4;
}

.send input.to_customerinfo_button,
.send input.to_memberlogin_button,
.send input.to_deliveryinfo_button,
.send input.to_confirm_button,
.send input#purchase_button,
.send input[name="backCart"],
#wc_login .loginbox #member_login,
#wc_member .loginbox #member_login,
#wc_newmemberform .send input,
.loginbox .submit input {
	background-color: #808080 !important;
	border-color: #666666 !important;
	color: #ffffff !important;
}

.send input.to_customerinfo_button:hover,
.send input.to_memberlogin_button:hover,
.send input.to_deliveryinfo_button:hover,
.send input.to_confirm_button:hover,
.send input#purchase_button:hover,
#wc_login .loginbox #member_login:hover,
#wc_member .loginbox #member_login:hover {
	background-color: #666666 !important;
}

/* ---------- 顧客・配送フォーム ---------- */
.customer_form {
	width: 100%;
	margin-bottom: 16px;
}

.customer_form th {
	width: 30%;
	text-align: left !important;
	padding-left: 10px !important;
}

.customer_form th em {
	color: #cc0000;
	font-style: normal;
	margin-left: 4px;
}

.customer_form td {
	text-align: left !important;
}

.customer_form input[type="text"],
.customer_form input[type="email"],
.customer_form input[type="tel"],
.customer_form input[type="password"],
.customer_form select,
.customer_form textarea,
.loginbox input[type="text"],
.loginbox input[type="password"] {
	max-width: 100%;
	padding: 7px 8px;
	border: 1px solid #cccccc;
	background: #ffffff;
	color: #333333;
	box-sizing: border-box;
}

.customer_form input#mailaddress1,
.customer_form input#mailaddress2,
.customer_form input#loginmail,
.loginbox input.loginmail,
.loginbox input.loginpass {
	width: 100%;
	max-width: 360px;
}

/* ---------- 会員ページ ---------- */
#memberpages {
	margin-top: 8px;
}

#memberpages .whitebox,
.member-page .whitebox {
	padding: 16px;
	background: #ffffff;
	border: 1px solid #cccccc;
	box-shadow: none;
	border-radius: 0;
}

#memberinfo {
	margin-bottom: 20px;
}

#memberinfo table {
	margin-bottom: 16px;
}

#memberinfo table th {
	width: 22%;
	text-align: left !important;
	padding-left: 10px !important;
}

.loginbox {
	max-width: 480px;
	margin: 0 auto;
}

#wc_login .loginbox,
#wc_member .loginbox,
#wc_lostmemberpassword .loginbox,
#wc_changepassword .loginbox {
	padding: 20px;
	background: #fafafa;
	border: 1px solid #cccccc;
}

#wc_login .loginbox label,
#wc_member .loginbox label {
	display: block;
	margin-bottom: 12px;
	font-size: 13px;
	color: #555555;
}

#wc_login .loginbox #member_login,
#wc_member .loginbox #member_login {
	width: auto;
	min-width: 140px;
}

.loginbox .new-entry,
#wc_login .loginbox .new-entry,
#wc_member .loginbox .new-entry {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px dotted #cccccc;
	text-align: center;
}

#wc_login .loginbox .new-entry #nav a,
#wc_member .loginbox .new-entry #nav a,
.loginbox a {
	color: #333333;
	text-decoration: underline;
}

#wc_login .loginbox .new-entry #nav a:hover,
#wc_member .loginbox .new-entry #nav a:hover,
.loginbox a:hover {
	color: #999999;
}

.memberonly-note {
	margin: 10px 0 0;
	padding: 10px 12px;
	color: #8b0000;
	background: #fff5f5;
	border: 1px solid #f0c2c2;
	font-size: 14px;
	line-height: 1.5;
}

/* ---------- 商品詳細（現行デザイン寄りの左右レイアウト） ---------- */
#itempage {
	overflow: hidden;
	text-align: left;
	color: #666666;
}

#itempage .item-layout {
	overflow: hidden;
	margin: 0 0 16px;
}

#itempage #img-box {
	float: left;
	width: 270px;
	max-width: 100%;
	margin: 0 20px 16px 0;
}

#itempage .itemimg {
	width: 270px;
	max-width: 100%;
	border: 5px solid #e6e6e6;
	box-sizing: border-box;
	text-align: center;
	background: #ffffff;
}

#itempage .itemimg a {
	display: block;
	line-height: 0;
}

#itempage .itemimg img {
	width: 100%;
	max-width: 260px;
	height: auto;
	vertical-align: middle;
}

/* 名称・産地などのスペック表（商品画像枠と同じ高さ） */
#itempage table.conf {
	border: 2px solid #cccccc;
	border-collapse: collapse;
	box-sizing: border-box;
	margin: 0 0 20px;
	padding: 0;
	width: 100%;
	max-width: 365px;
	height: 270px;
	table-layout: fixed;
}

#itempage table.conf td {
	border-bottom: 2px solid #cccccc;
	border-right: 1px solid #d9d9d9;
	margin: 0;
	padding: 3px 6px;
	font-size: 13px;
	vertical-align: middle;
}

#itempage table.conf tr:last-child td {
	border-bottom: none;
}

#itempage table.conf td.confType {
	width: 38%;
	background-color: #e6e6e6;
	border-bottom: 1px solid #ffffff;
	border-right: 1px solid #ffffff;
	font-size: 12px;
	font-weight: normal;
	text-align: center;
	color: #666666;
}

/* 本文先頭の空段落で画像とテーブルがずれないようにする */
#itempage .item-description > p:empty {
	display: none;
}

#itempage .detail-box {
	float: none;
	width: auto;
	overflow: hidden;
}

#itempage .item-description {
	margin: 0 0 14px;
	line-height: 1.8;
	font-size: 13px;
}

#itempage .item-info {
	clear: none;
	padding-top: 0;
}

#itempage .itemcode,
#itempage .item-name {
	display: none;
}

#itempage .field {
	margin: 0 0 10px 0;
	padding: 6px 0 8px;
	border-bottom: 1px solid #cccccc;
	overflow: hidden;
}

#itempage .field_name {
	margin: 0 0 2px;
	font-size: 12px;
	color: #888888;
}

#itempage .field_cprice {
	color: #999999;
	text-decoration: line-through;
	font-size: 13px;
}

#itempage .field_price {
	float: none;
	margin: 0;
	padding: 0;
	color: #333333;
	font-size: 16px;
	font-weight: bold;
	text-align: right;
}

#itempage .taxincluded,
#itempage .tax_inc_block {
	margin-top: 3px;
	text-align: right;
	font-size: 12px;
	color: #888888;
}

#itempage .zaikostatus {
	margin: 0 0 12px;
	font-size: 13px;
}

#itempage .skuform {
	margin: 0 0 12px;
	text-align: right;
}

#itempage .skuname {
	min-height: 0;
	margin: 0 0 10px;
	padding: 4px 8px;
	background-color: #999999;
	color: #ffffff;
	font-size: 13px;
	font-weight: bold;
	text-align: left;
}

#itempage table.item_option {
	width: 100%;
	margin: 0 0 10px;
	border-collapse: collapse;
	border: 1px solid #dcdcdc;
	text-align: left;
}

#itempage table.item_option caption {
	padding: 4px 0;
	text-align: left;
	font-size: 12px;
	color: #888888;
}

#itempage table.item_option th,
#itempage table.item_option td {
	padding: 6px 8px;
	border: 1px solid #dcdcdc;
	font-size: 13px;
	vertical-align: middle;
}

#itempage table.item_option th {
	width: 30%;
	background: #f5f5f5;
	font-weight: normal;
}

#itempage .c-box {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 10px;
}

#itempage .quantity,
#itempage .unit {
	font-size: 13px;
}

#itempage .skubutton,
#itempage .cart-button input,
#itempage input.skubutton {
	min-height: 36px;
	padding: 8px 18px !important;
	border: 1px solid #666666 !important;
	background: #808080 !important;
	color: #ffffff !important;
	font-size: 13px !important;
	font-family: inherit !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	cursor: pointer;
}

#itempage .skubutton:hover,
#itempage .cart-button input:hover,
#itempage input.skubutton:hover {
	background: #6e6e6e !important;
}

#itempage .itemsoldout {
	margin: 10px 0;
	color: #8b0000;
	font-weight: bold;
}

#itempage .itemsubimg {
	clear: both;
	float: none;
	width: 100%;
	margin: 16px 0 8px;
	overflow: hidden;
	text-align: left;
}

#itempage .itemsubimg a {
	display: inline-block;
	float: none;
	width: auto;
	margin: 0 8px 8px 0;
	border: 3px solid #e6e6e6;
	line-height: 0;
	vertical-align: top;
}

#itempage .itemsubimg img {
	width: 135px;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

#itempage .assistance_item {
	clear: both;
	margin-top: 24px;
}

#itempage .itemcode {
	border-bottom-color: #cccccc;
}

.item-info .skuname {
	background-color: #999999;
	color: #ffffff;
}

.item_list_layout_li .soldout {
	color: #8b0000;
	font-weight: bold;
}

.item_list_layout_li .newitem {
	color: #ffa500;
	font-weight: bold;
}

/* ---------- カレンダー（サイド） ----------
 * 親 Basic の .widget_welcart_calendar .businessday { #fff0d1 } を現行色で上書き */
.widget_welcart_calendar .businessday,
.widget_welcart_calendar td.businessday,
#secondary .widget_welcart_calendar .businessday,
#secondary.suzuchado-sidebar .businessday,
.businessday,
td.businessday,
span.business_days_exp_box.businessday {
	background-color: #708090 !important;
	color: #f0f8ff !important;
}

.widget_welcart_calendar table.usces_calendar caption,
#secondary .widget_welcart_calendar table.usces_calendar caption {
	background-color: #708090 !important;
	color: #f0f8ff !important;
}

.widget_welcart_calendar .businesstoday,
#secondary .widget_welcart_calendar .businesstoday,
td.businesstoday {
	color: #000000;
	font-weight: bold;
	background-color: transparent;
}

/* ---------- レスポンシブ ---------- */
@media screen and (max-width: 767px) {
	.cart-page,
	.member-page {
		padding: 12px 12px 40px;
	}

	div.cart_navi li {
		flex: 1 1 50%;
		font-size: 11px !important;
		line-height: 34px !important;
	}

	#cart .upbutton {
		text-align: left;
	}

	#cart .upbutton input {
		display: block;
		width: 100%;
		margin: 8px 0 0;
		min-height: 40px;
	}

	#cart_table,
	#cart table,
	.customer_form,
	.confirm_table,
	#confirm_table,
	#memberinfo table {
		display: block;
		width: 100% !important;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	#itempage #img-box {
		float: none;
		width: 100%;
		max-width: 270px;
		margin: 0 auto 16px;
	}

	#itempage .itemimg {
		width: 100%;
	}

	#itempage .itemimg,
	#itempage .itemimg img {
		max-width: 100%;
		height: auto;
	}

	/* スマホではスペック表を画像高さ固定にしない */
	#itempage table.conf {
		width: 100%;
		max-width: 100%;
		height: auto;
		margin: 0 0 16px;
	}

	#itempage .item_option {
		width: 100%;
		text-align: left;
	}

	/* 販売価格・在庫・数量・カートボタンは右寄せ */
	#itempage .field,
	#itempage .field_name,
	#itempage .field_cprice,
	#itempage .field_price,
	#itempage .taxincluded,
	#itempage .zaikostatus,
	#itempage .skuform {
		width: 100%;
		text-align: right;
	}

	#itempage .c-box {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-end;
		gap: 8px;
		text-align: right;
	}

	#itempage .cart-button,
	#itempage .cart-button input,
	#itempage .skubutton {
		width: auto;
		max-width: 280px;
	}

	#itempage .itemsubimg a {
		margin: 0 6px 6px 0;
	}

	#itempage .itemsubimg img {
		width: 100px;
	}

	.customer_form th {
		width: auto;
	}

	.customer_form input#mailaddress1,
	.customer_form input#mailaddress2,
	.customer_form input#loginmail,
	.loginbox input.loginmail,
	.loginbox input.loginpass {
		max-width: 100%;
	}

	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="password"],
	select,
	textarea {
		max-width: 100%;
		font-size: 16px; /* iOS 自動ズーム防止 */
	}

	.cart-page .send input,
	.member-page .send input,
	#memberpages .send input {
		display: block;
		width: 100%;
		margin: 6px 0;
		min-height: 44px;
	}

	#memberpages .whitebox,
	.member-page .whitebox {
		padding: 12px;
	}

	.loginbox {
		max-width: 100%;
	}
}