@charset "utf-8";
/*--------------------------------------------
  orderGoodsList.css
  注文明細表示用CSS
--------------------------------------------*/

/*--------------------------------------------
 注文明細リスト
--------------------------------------------*/
.orderGoodsList{
	font-size:0.9em;
}
.orderGoodsList tr{
	border: none;
}
.orderGoodsList th{
	white-space: nowrap;
}

/* テーブルの見出し */
.orderGoodsList .detailsTitle{
	padding: 6px 16px;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	border-left: none;
	border-right: none;
}
.orderGoodsList #resultsGoodsImageTitle {
	border-left: solid 1px #ccc;
}
.orderGoodsList .detailsTitle.orderListGoodsImageTitle{
	border-left: solid 1px #ccc;
}
.orderGoodsList .detailsTitle.detailsTitle.orderListGoodsTotalPriceTitle{
	border-right: solid 1px #ccc;
}
.orderGoodsList .detailsTitle#resultsDeleteLinkPCTitle{
	border-right: solid 1px #ccc;
}

/* カート内商品の各セル */
.orderGoodsList .resultsCol{
	border-top: none;
	padding-right: 16px;
	padding-left: 16px;
}
/* 商品画像のセル */
.orderGoodsList .orderGoodsImageCol{
	text-align:center;
	width:10%;
}
/* 商品名のセル */
.orderGoodsList .orderGoodsNameCol{
	width: 51.2%;
}
.orderGoodsList .orderGoodsNameCol a{
	width: 150px;
	margin: 3px 0;
	text-align: center;
}
/* 価格と小計のセル */
.orderGoodsList .orderGoodsPriceCol,
.orderGoodsList .orderGoodsTotalPriceCol{
	text-align:right;
	width:12.2%;
}
/* 数量のセル */
.orderGoodsList .orderGoodsOrderNumCol{
	text-align:center;
	width:12.2%;
}
/* 軽減のセル */
.orderGoodsList .orderGoodsReduceTaxCol{
	text-align:center;
}
/* 削除ボタンのセル */
.orderGoodsList .orderGoodsDeleteLinkCol{
	text-align:center;
	width:12.2%;
}
.orderGoodsList .orderGoodsDeleteLinkCol input {
	padding: 2px 8px;
}
.orderGoodsList th[class$="DeleteLinkSPTitle"] {
	display: none;
}
.orderGoodsList .resultsDeleteLinkSPCol {
	display: none;
}

.orderGoodsList .orderNumPreLabel,
.orderGoodsList .reglOrderNumPreLabel,
.orderGoodsList .goodsAmountPreLabel,
.orderGoodsList .reglGoodsAmountPreLabel,
.orderGoodsList .goodsTotalPricePreLabel,
.orderGoodsList .reglGoodsTotalPricePreLabel{
	display:none;
}

.orderGoodsList .orderGoodsNameCol .goodsName:after{
	content: "\A"; /* 改行コード */
	white-space: pre;
}

@media screen and (max-width: 641px) {
	.orderGoodsList tr:last-of-type {
		border-bottom: solid 1px #ccc;
	}

	.orderGoodsList th{
		display:none;
	}

	.orderGoodsList td{
		display: block;
		border:none;
		padding: 10px 10px 10px 0;
	}

	.orderGoodsList .orderGoodsImageCol{
		float:left;
		width: 40%;
	}

	.orderGoodsList .orderGoodsNameCol{
		float:right;
		width: 60%;
		padding: 10px 10px 3px 10px;
	}

	.orderGoodsList .orderGoodsNameCol a{
		width: 100%;
	}

	.orderGoodsList .orderGoodsPriceCol,
	.orderGoodsList .orderGoodsTotalPriceCol{
		float:right;
		width: 60%;
		padding: 3px 10px;
	}

	/* 価格と小計のセル内の値の位置調整 */
	.orderGoodsList .orderGoodsPriceCol .goodsPrice,
	.orderGoodsList .orderGoodsPriceCol .goodsPriceSuffixLabel,
	.orderGoodsList .orderGoodsTotalPriceCol .goodsTotalPrice,
	.orderGoodsList .orderGoodsTotalPriceCol .goodsTotalPriceSuffixLabel{
		display: inline-block;
	}

	.orderGoodsList .orderGoodsOrderNumCol{
		float:right;
		text-align:right;
		width: 60%;
		padding: 3px 10px;
	}

	.orderGoodsList select.orderNum {
		width: 72px;
	}

	.orderGoodsList .resultsDeleteLinkPCCol {
		display: none;
	}
	.orderGoodsList .resultsDeleteLinkSPCol {
		display: block;
		float:right;
		text-align:right;
		width: 60%;
		padding: 3px 10px 10px 10px;
	}

	.orderGoodsList .orderNumPreLabel,
	.orderGoodsList .reglOrderNumPreLabel,
	.orderGoodsList .goodsAmountPreLabel,
	.orderGoodsList .reglGoodsAmountPreLabel,
	.orderGoodsList .goodsTotalPricePreLabel,
	.orderGoodsList .reglGoodsTotalPricePreLabel{
		display:inline-block;
	}
}


/*--------------------------------------------
 追加スタイル
--------------------------------------------*/

/* セレクトボックスのスタイル */
select{
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
}
select::-ms-expand {
	display: none;
}


[id^="orderNumPreLabel_0_"]+span,
[id^="reglTermDisp_0_"]+span{
	position: relative;
}

[id^="orderNumPreLabel_0_"]+span::after,
[id^="reglTermDisp_0_"]+span::after{
	 content: "";
	 position: absolute;
	 top: -6px;
	 right: 15px;
	 bottom: 0;
	 width: 6px;
	 height: 6px;
	 border-bottom: 2px solid #333;
	 border-right: 2px solid #333;
	 transform: rotate(45deg);
	 margin: auto;
}

/* カート進行状況 */
.orderStep{
	padding: 0 20px;
	margin: 40px 0 60px;
	font-size: 0;
}
.orderStep .orderStepList{
	position: relative;
	display: inline-block;
	padding-top: 34px;
	color: #333;
 font: 1.125rem /1.5 "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	text-align: center;
}
.orderStep .orderStepList.active{
	color: #a47f36;
}
.orderStep .orderStepList::before{
	content: "";
	width: 20px;
	height: 20px;
	background-color: #d0d0d2;
	position: absolute;
	top: 0;
	margin: 0 auto;
	left: 0;
	right: 0;
	border-radius: 50%;
	z-index: 2;
}
.orderStep .orderStepList.active::before{
	background-color: #a47f36;
}
.orderStep .orderStepList:not(:last-child)::after{
	content: "";
	height: 1px;
	background-color: #d0d0d2;
	position: absolute;
	top: 10px;
	left: 60%;
	width: 80%;
	z-index: 1;
}

@media only screen and (max-width: 768px) {
	.orderStep{
		padding: 0;
		margin: 10px 0 24px;
	}
	.orderStep .orderStepList{
		font-size: 0.6875rem;
		vertical-align: top;
	}
}

/* 送料無料までの金額表示 */
.amountInfoFreeShippingInfo{
	display: inline-block;
	font-size: 1.25rem;
	color: #f03f75;
	padding: 6px 18px;
	margin-bottom: 24px;
	border: 1px solid #f03f75;
	border-radius: 50px;
}
.amountInfoFreeShippingInfo_tax{
	font-size: 0.875rem;
}

@media only screen and (max-width: 768px) {
	.amountInfoFreeShippingInfo{
		font-size: 0.6875rem;
		font-weight: 700;
		text-align: center;
		padding: 7px 16px 4px;
		margin-bottom: 0;
		width: 100%;
	}
	.amountInfoFreeShippingInfo .amountInfoFreeShippingInfo_tax{
		font-size: 0.6875rem;
		font-weight: 700;
	}
	.amountInfoFreeShippingInfo .amountInfoFreeShippingInfo_tax:after{
		content: "\A";
		white-space: pre;
	}
}


/*--------------------------------------------
 デフォルトスタイルの上書き
--------------------------------------------*/
/* ページ全体のコンテナ */
.contents{
	width: 100%;
	max-width: 1000px;
}
@media only screen and (max-width: 1000px) {
  .contents{
  	padding: 0 2.13%;
  }
}

/* メインコンテンツのコンテナ */
.topGroupName{
	width: 100%;
}
@media only screen and (max-width: 768px) {
 .topGroupName{
 	padding: 10px 0 0;
 }
}
/* ページの見出し */
.level_h2.title{
	border-bottom: none;
	color: #644c1f;
	font-size: 1.625rem;
}
@media only screen and (max-width: 768px) {
	.level_h2.title{
		font-size: 1.25rem;
		margin-bottom: 10px;
	}
}

/* 見出し下のテキスト */
.pagePartsHtmlText.Cart{
	margin-bottom: 30px;
}
@media only screen and (max-width: 768px) {
	.pagePartsHtmlText.Cart{
		font-size: 0.8125rem;
	}
}

/* 商品画像のdiv */
.detailsImg img{
	width: 60px;
}

/* 商品名下のアップセルリンク */
#upsellLink_0_0_link.upsellLink{
	display: none;
}

/* 削除ボタン */
.orderGoodsList .orderGoodsDeleteLinkCol input{
 color: #644c1f;
 border: 2px solid #bbac8e;
 border-radius: 4px;
 background-color: transparent;
 position: relative;
 padding: 0 6px 0 30px;
 width: 73px;
 height: 32px;
}
.orderGoodsList .orderGoodsDeleteLinkCol .deleteLinkInner{
	display: inline-block;
	position: relative;
}
.orderGoodsList .orderGoodsDeleteLinkCol .deleteLinkInner::before,
.orderGoodsList .orderGoodsDeleteLinkCol .deleteLinkInner::after{
	content: "";
	display: inline-block;
	position: absolute;
	width: 16px;
	top: 50%;
	left: 0;
	margin: -1px 0 0 9px;
	z-index: 2;
}
.orderGoodsList .orderGoodsDeleteLinkCol .deleteLinkInner::before{
	border-top: 2px solid #644c1f;
	transform: rotate(45deg);
}
.orderGoodsList .orderGoodsDeleteLinkCol .deleteLinkInner::after{
	border-top: 2px solid #644c1f;
	transform: rotate(-45deg);
}
@media only screen and (max-width: 768px) {
	.orderGoodsList .orderGoodsDeleteLinkCol input{
		font-size: 0.6875rem;
		width: 54px;
		height: 23px;
	 border-width: 1px;
	 padding-right: 6px;
	 padding-left: 23px;
	}
	.orderGoodsList .orderGoodsDeleteLinkCol .deleteLinkInner::before,
	.orderGoodsList .orderGoodsDeleteLinkCol .deleteLinkInner::after{
		width: 11px;
		margin-left: 7px;
	}
	.orderGoodsList .orderGoodsDeleteLinkCol .deleteLinkInner::before,
	.orderGoodsList .orderGoodsDeleteLinkCol .deleteLinkInner::after{
		border-width: 1px;
	}
}

/* 注文商品合計ブロック */
.cartSummaryGroup.orderSummaryGroup{
	margin-top: 30px;
}
@media only screen and (max-width: 768px) {
  .cartSummaryGroup.orderSummaryGroup{
  	font-size: 0.6875rem;
  	margin-top: 17.5px;
  }
}

/* 商品合計金額セル */
#tpriceSumItemWrap{
	display: none!important;
}

/* 割引額合計セル */
/*
#tdiscountPromoItemWrap{
 display: none!important;
}
*/

/* ご購入特典見出し */
.level_h3.promotionTitle,
#orderPremiumTitle_innerId.level_h3.orderPremiumTitle{
	background-color: #f3f3f4;
	display: inline-block;
	padding: 6px 18px;
	border-bottom: none;
	font-size: 1rem;
	color: #333;
}
@media only screen and (max-width: 768px) {
	.level_h3.promotionTitle,
	#orderPremiumTitle_innerId.level_h3.orderPremiumTitle,
	#promotionResults,
	#orderPremium{
		font-size: 0.8125rem;
		font-weight: 700;
		color: #333;
		margin: 17px 0 0 0;
	}
}

/*軽減税率の注記文*/
@media only screen and (max-width: 768px) {
	.attensionMessageItemWrap {
		text-align: right;
		margin-top: -12px;
		margin-bottom: 20px;
	}
	.attensionMessage {
		font-size: 12px;
	}
}

/* 商品合計の見出し */
.level_h3.amountInfoTitle{
	display: none;
}
.amountInfoTitleItemWrap.h3Wrap{
	text-align: right;
}
@media only screen and (max-width: 768px) {
	.amountInfoTitleItemWrap.h3Wrap{
		text-align: left;
		/*display: inline-block;*/
		float: left;
		width: 38.53%;
	}
}

/* 商品合計のセル */
.orderTotalGroup .totalLayoutGroup .tr.ttotalPriceItemWrap > div#ttotalPriceThSurround,
.orderSummaryGroup .amountInfoLayoutGroup .tr.totalAmtItemWrap > div#totalAmtThSurround{
	background-color: #f3f3f3;
}
.orderTotalGroup .totalLayoutGroup .tr.ttotalPriceItemWrap > div#ttotalPriceTdSurround,
.orderSummaryGroup .amountInfoLayoutGroup .tr.totalAmtItemWrap > div#totalAmtTdSurround{
	background-color: #fff;
}
#ttotalPriceItemWrap,
#totalAmtItemWrap{
	border: none;
}
#MemberOrderDetail #totalAmtItemWrap {
	border-bottom: 1px solid #d7cfb9;
}
#ttotalPrice_innerId,
#totalAmt_innerId{
	font-size: 22px;
	color: #333;
}
@media only screen and (max-width: 768px) {
	#totalLayoutGroup .th,
	#totalLayoutGroup .td{
		display: table-cell;
	}
	/* 商品合計セル */
	#totalLayoutGroup{
		width: unset;
		float: right;
		vertical-align: top;
		border: none;
	}
	#totalLayoutGroup .tr{
		width: 100%;
		border-top: none;
		border-left: none;
		border-right: none;
		border-bottom: 1px solid #ccc;
	}
	#totalLayoutGroup .tr:last-child{
		border-bottom: none;
	}
	#totalLayoutGroup .th{
		border: 1px solid #ccc;
		padding: 14px 10px;
		font-size: 0.6875rem;
	}
	#totalLayoutGroup .td{
		border-top: 1px solid #ccc;
		border-right: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		clear: both;
		padding: 11px 10px;
	}
	#ttotalPrice_innerId,
	#totalAmt_innerId{
		font-size: 0.9375rem;
	}
	#ttotalPriceSuffixLabel{
		font-size: 0.6875rem;
	}
}

/* 注意事項 */
.set-group.cautionGroup{
	margin-top: 30px;
}
@media only screen and (max-width: 768px) {
	.set-group.cautionGroup .level_h3,
	.set-group.cautionGroup .pagePartsHtmlText{
		font-size: 0.8125rem;
	}
}

/*ご注文手続きへボタン*/
@media only screen and (max-width: 641px) {
	#orderLink2ItemWrap.orderLink2ItemWrap.buttonWrap > .items::after {
		top: 34%;
		bottom: auto;
		right: 14%;
	}
}

/* お買い物を続けるボタン */
.continueLink2ItemWrap{
	margin-bottom: 16px;
}
.btn_lg.backButton.continueLink2{
	font-size: 1.25rem;
	padding: 10px 42px;
	position: relative;
	border: 1px solid #d0d0d0;
	background-color: #fff;
}
.btn_lg.backButton.continueLink2::before{
	content: "";
	display: inline-block;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	left: 16px;
	height: 6px;
	width: 6px;
	border-top: 1px solid #333;
	border-left: 1px solid #333;
	transform: rotate(-45deg);
}

/* ご自宅用ににお届けボタン & ギフトを指定してお届けボタン */
#giftOrderLinkItemWrap.giftOrderLinkItemWrap{
	display: none;
}
.selfOrderLinkItemWrap,
.giftOrderLinkItemWrap {
	margin-bottom: 16px;
}
.btn_lg.btn_1.nextButton.selfOrderLink,
.btn_lg.btn_1.nextButton.giftOrderLink{
	font-size: 1.25rem;
	padding: 10px 42px;
	position: relative;
	border: none;
	background-color: #eadbc0;
	color: #644c1f;
}
.selfOrderLinkItemWrap.buttonWrap > .items,
.giftOrderLinkItemWrap.buttonWrap > .items{
	position: relative;
}
.selfOrderLinkItemWrap.buttonWrap > .items::after,
.giftOrderLinkItemWrap.buttonWrap > .items::after{
	content: "";
	display: inline-block;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	right: 26px;
	height: 6px;
	width: 6px;
	border-top: 1px solid #333;
	border-right: 1px solid #333;
	transform: rotate(45deg);
}
@media only screen and (max-width: 641px) {
	.selfOrderLinkItemWrap.buttonWrap > .items::after,
	.giftOrderLinkItemWrap.buttonWrap > .items::after{
	top: 23px;
	bottom: unset;
	right: 15%;
	}
}

/* 関連商品 */
.relatedArea{
	margin-top: 64px;
}
.relatedArea .level_h1{
 padding: 10px 24px;
 font-size: 1.25rem;
 color: #644c1f;
 background-color: #f7f3e9;
 border-bottom: none;
}
.relatedArea .level_h1 span{
	border-bottom: none;
}

@media only screen and (max-width: 641px) {

	#relatedLabel_innerId.level_h1{
		margin-right: -2.13%;
		margin-left: -2.13%;
		padding: 4px 2.13%;
	}
	#relatedLabel_innerId.level_h1 span{
		font-size: 1rem;
		padding: 0;
	}

	#relatedGoods .itemBlock{
		border: none;
		margin: 0;
		padding: 0 14px;
		width: 50%;
	}
	#relatedGoods figcaption{
  font-size: 0.6875rem;
  line-height: 1.125rem;
  text-align: center;
  padding: 0;
	}
	#relatedGoods figcaption a{
		text-decoration: underline;
	}

}


/* SP用テーブル調整 */
@media only screen and (max-width: 768px) {
	/* 不要な要素の非表示 */
	.orderGoodsList th /* PC表示の見出し用 テーブル*/,
	.resultsCol.resultsDeleteLinkPCCol /* PC用削除ボタン */,
	.orderNumPreLabel.preLabel /* 「数量」の文言 */,
	.goodsTotalPricePreLabel.preLabel /* 「小計」の文言 */{
		display: none;
	}
	.table td{
		border: none;
	}
	.orderGoodsList tr{
		border-top: none;
	}

	/* 各商品の行の表示設定 */
	.orderGoodsList tr[id^="resultsRow"],
	.orderGoodsList tr[id^="orderListRow"]{
		border: 1px solid #d0d0d0;
		display:-webkit-box;
		display:-ms-flexbox;
		display:flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		/*align-items: center;*/
		/*padding: 7px;*/
		margin-bottom: 8px;
	}

	/* 各セルの表示設定 */
	.orderGoodsList .orderGoodsImageCol /* 商品画像のセル */,
	.orderGoodsList .orderGoodsNameCol /* 商品名のセル */,
	.orderGoodsList .orderGoodsReduceTaxCol /* 軽減のセル */,
	.orderGoodsList .orderGoodsPriceCol /* 価格のセル */,
	.orderGoodsList .orderGoodsOrderNumCol /* 数量のドロップダウンのセル */,
	.orderGoodsList .orderGoodsTotalPriceCol /* 小計のセル */,
	.orderGoodsList .resultsDeleteLinkSPCol /* SP用の削除ボタンのセル */{
		position: relative;
		display: block!important;
		font-size: 0.6875rem;
		padding: 44px 10px 14px;
		text-align: left;
		float: none;
		clear: both;
	}

	/* セル毎のパディング微調整 */
	.orderGoodsList .orderGoodsImageCol /* 商品画像のセル */,
	.orderGoodsList .orderGoodsNameCol /* 商品名のセル */{
		/*padding-top: 36px;*/
	}
	.orderGoodsList .orderGoodsNameCol .goodsName /* 商品名のセル 内側 */{
		/*display: inline-block;*/
		/*padding-top: 10px;*/
	}

	/* 数量のセレクトボックス */
	.orderGoodsList select.orderNum{
		width: 100%;
	}

	/* 各セルの幅 */
	.orderGoodsList .orderGoodsImageCol{ /* 商品画像のセル */
		width: 20%;
	}
	.orderGoodsList .orderGoodsNameCol{ /* 商品名のセル */
		width: 80%;
	}
	.orderGoodsList .orderGoodsPriceCol /* 価格のセル */,
	.orderGoodsList .orderGoodsOrderNumCol /* 数量のドロップダウンのセル */{
		width: 25%;
	}
	.orderGoodsList .orderGoodsTotalPriceCol /* 小計のセル */{
		width: 30%;
	}
	.orderGoodsList .resultsDeleteLinkSPCol /* SP用の削除ボタンのセル */{
		width: 20%;
	}

/* セルの罫線 */
	.orderGoodsList .orderGoodsPriceCol /* 価格のセル */,
	.orderGoodsList .orderGoodsReduceTaxCol /* 軽減のセル */,
	.orderGoodsList .orderGoodsOrderNumCol /* 数量のドロップダウンのセル */,
	.orderGoodsList .orderGoodsTotalPriceCol /* 小計のセル */,
	.orderGoodsList .orderGoodsDeleteLinkCol /* 削除のセル */{
		border-top: 1px solid #d0d0d0;
 		border-right: 1px solid #d0d0d0;
	}
	.orderGoodsList td:last-of-type /* 最後のセル */{
 		border-right: none;
	}

	/* 商品名内の定期セレクトボックス */
	select.reglTerm{
		margin: 8px 0;
	}

	/* SP用の見出し */
	.orderGoodsList .orderGoodsImageCol::before{
		/*content: "商品";*/
		position: absolute;
		display: block;
		width: 100%;
		top: 0;
		left: 0;
		margin: auto;
		/*padding: 3px;*/
		background-color: #f3f3f4;
	}

 /* 各セルの見出しを疑似要素で作成 */
	.orderGoodsList .orderGoodsImageCol::before /* 商品画像のセル */,
	.orderGoodsList .orderGoodsNameCol::before /* 商品名のセル */,
	.orderGoodsList .orderGoodsReduceTaxCol::before /* 軽減のセル */,
	.orderGoodsList .orderGoodsPriceCol::before /* 価格のセル */,
	.orderGoodsList .orderGoodsOrderNumCol::before /* 数量のドロップダウンのセル */,
	.orderGoodsList .orderGoodsTotalPriceCol::before /* 小計のセル */,
	.orderGoodsList .resultsDeleteLinkSPCol::before /* 削除ボタンのセル */{
		position: absolute;
		display: block;
		box-sizing: border-box;
		font-weight: 700;
		width: 100%;
		top: 0;
		left: 0;
		margin: auto;
		padding: 6px 10px;
		background-color: #f3f3f4;
		line-height: 1;
	}
	.orderGoodsList .orderGoodsImageCol::before /* 商品画像のセル */{
		content: "商品";
	}
	.orderGoodsList .orderGoodsNameCol::before /* 商品名のセル */{
		content: "商品名";
		color: #F3F3F4;
	}
	.orderGoodsList .orderGoodsReduceTaxCol::before /* 軽減のセル */{
		content: "軽減";
	}
	.orderGoodsList .orderGoodsPriceCol::before /* 価格のセル */{
		content: "価格";
	}
	.orderGoodsList .orderGoodsOrderNumCol::before /* 数量のドロップダウンのセル */{
		content: "数量";
	}
	.orderGoodsList .orderGoodsTotalPriceCol::before /* 小計のセル */{
		content: "小計（税込）";
	}
	.orderGoodsList .resultsDeleteLinkSPCol::before /* 削除ボタンのセル */{
		content: "削除";
		color: #F3F3F4;
	}

}/* end media query */