@charset "utf-8";
/*--------------------------------------------
  order_input.css
  注文入力系の共通CSS
--------------------------------------------*/

/* アドレス帳選択 */
.addressBookListItemWrap {
	margin: 10px 0;
}

/* お支払い方法 */
.selectedPaymentMethod_selections_itemLabel {
	display:block;
	margin:10px 0;
}

/* 追加クラス */
.contents .pointLayoutGroupNote{
	margin-bottom: 36px;
}
@media only screen and (max-width: 768px) {
.contents .pointLayoutGroupNote{
	font-size: 0.75rem;
	margin-bottom: 28px;
}
}
.contents .appointedDeliveryNote{
	margin-top: 38px;
}
@media only screen and (max-width: 768px) {
 .contents .appointedDeliveryNote{
		font-size: 0.75rem;
  }
}

/*--------------------------------------------
 デフォルトスタイルの上書き
--------------------------------------------*/
/* 各項目の見出し */
.itemWrap.h3Wrap .level_h3{
	border: none;
	font-size: 1.25rem;
	font-weight: 500;
	color: #644c1f;
	background-color: #f7f3e9;
	padding: 8px 26px 5px;
	position: relative;
}
@media only screen and (max-width: 768px) {
  #pointTitleItemWrap .level_h3,
  #customerInfoTitleItemWrap .level_h3,
  #destinationTitleItemWrap .level_h3,
  #paymentTitleItemWrap .level_h3,
  #destinationOptionTitleItemWrap .level_h3,
  #usableCouponTitleItemWrap .level_h3,
  #customerCommentTitleItemWrap .level_h3{
   margin-right: -2.13%;
   margin-left: -2.13%;
   padding: 4px 2.13%;
   font-size: 1rem;
   margin-bottom: 0;
  }
}
/* 必須項目アイコン */
.itemWrap.h3Wrap .level_h3.requiredTitle::after{
 font-size: 13px;
 color: #f03f75;
 background-color: #fff;
 border: 1px solid #f03f75;
 position: absolute;
 top: 0;
 bottom: 0;
 margin-top: auto;
 margin-bottom: auto;
 margin-right: 18px;
 padding: 0 3px;
 width: 32px;
 height: 18px;
 border-radius: 6px;
}

#destinationGroup .required_condition:after,
#creditCardGroup .required_condition:after{
 font-size: 13px;
 color: #f03f75;
 background-color: #fff;
 border: 1px solid #f03f75;
 padding: 0 3px;
 width: 32px;
 height: 18px;
 border-radius: 6px;
}

/* ラジオボタンのラベル */
#OrderInfoInput .radiobuttonLabel{
	color: #333;
	border: none;
}

/* ラジオボタンチェック時 */
.checked {
	background-color: #fbe8ee!important;
}

/* 各項目の見出しとコンテンツのマージン */
#pointGroup .set-group.th_30,
#customerInfoGroup .set-group.th_30,
#destinationSelectGroup .set-group.th_30,
#paymentMethodGroup .set-group.th_30,
#usableCouponGroup .set-group.th_30,
#orderCommentGroup .set-group.th_30{
	margin-top: 17px;
	margin-bottom: 56px;
}
#destinationOptionGroup .set-group.th_30{
	margin-top: 34px;
	margin-bottom: 56px;
}
#pagePartsHtmlText_OrderInfoInputPayment_innerId,
#pagePartsHtmlText_OrderInfoInputCouponCode_innerId,
#orderInfoInputCouponCodePartsIncludeItemWrap{
	margin-top: 17px;
}
@media only screen and (max-width: 768px) {
	#pointGroup .set-group.th_30,
	#customerInfoGroup .set-group.th_30,
	#destinationSelectGroup .set-group.th_30,
	#paymentMethodGroup .set-group.th_30,
	#usableCouponGroup .set-group.th_30,
	#orderCommentGroup .set-group.th_30,
	#destinationOptionGroup .set-group.th_30,
	#pagePartsHtmlText_OrderInfoInputPayment_innerId,
	#pagePartsHtmlText_OrderInfoInputCouponCode_innerId,
	#orderInfoInputCouponCodePartsIncludeItemWra{
		font-size: 0.8125rem;
	}
	#destinationOptionGroup .set-group.th_30{
		margin-top: 0;
	}
}

/* 商品情報テーブルの見出しとテキスト */
#orderItemTitle_innerId.level_h3.orderItemTitle{
	display: none;
}
#pagePartsHtmlText_OrderInfoInput_innerId.pagePartsHtmlText{
	margin-bottom: 32px;
}
@media only screen and (max-width: 768px) {
  #pagePartsHtmlText_OrderInfoInput_innerId.pagePartsHtmlText{
  	font-size: 0.8125rem;
  }
}

/* 商品情報テーブル */
@media only screen and (max-width: 768px) {
	#orderList .orderGoodsPriceCol,
	#orderList .orderGoodsOrderNumCol,
	#orderList .orderGoodsTotalPriceCol,
	#orderList .resultsDeleteLinkSPCol{
		width: 30%;
	}
	#orderList .orderGoodsReduceTaxCol{
		width: 10%;
	}
	#orderList .orderGoodsTotalPriceCol{
		border-right: none;
	}
	#amountInfoLayoutGroup,
	#amountInfoLayoutGroup .tr,
	#amountInfoLayoutGroup .th,
	#amountInfoLayoutGroup .td{
		display: inline-block;
	}
	#amountInfoLayoutGroup{
		font-size: 0.75rem;
		width: 80%;
		float: right;
	}
	#amountInfoLayoutGroup .tr{
	width: 100%;
	border-top: none;
	border-left: none;
	border-right: none;
	border-bottom: 1px solid #ccc;
	}
	#amountInfoLayoutGroup .tr:last-child{
		border-bottom: none;
	}
	#amountInfoLayoutGroup .th{
		width: 40%;
		border-top: none;
		border-left: none;
		border-bottom: none;
		border-right: 1px solid #ccc;
		padding: 13px 10px;
	}
	#amountInfoLayoutGroup .th .labels{
		font-weight: 700;
	}
	#amountInfoLayoutGroup .td{
		width: 58%;
		border: none;
		clear: both;
	}
}
@media screen and (max-width: 641px) {
	#orderList .orderGoodsPriceCol,
	#orderList .orderGoodsOrderNumCol,
	#orderList .orderGoodsTotalPriceCol,
	#orderList .resultsDeleteLinkSPCol{
		width: 28%;
	}
	#orderList .orderGoodsReduceTaxCol{
		width: 16%;
	}
}

/* 合計金額テーブル */
#promotionAmtSumItemWrap{
	display: none!important;
}
@media only screen and (max-width: 768px) {
	#totalAmtItemWrap.tr {
		border-bottom: none;
	}
}

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

/* 入力項目セクションのパディング */
#pointLayoutGroup::after{
	content: "";
	display: block;
	clear: both;
}

/* ポイント情報_リード文 */
.set-group.pointLayoutGroup.table{
	display: block;
	padding: 0 56px;
	border: none;
}
.set-group.pointLayoutGroup.table .th,
.set-group.pointLayoutGroup.table .td{
	width: auto;
	border: none;
	background-color: transparent;
	display: block;
	vertical-align: top;
}
.itemWrap.currentPointItemWrap{
	min-width: 215px;
	border: 4px solid #dfcca6;
	border-radius: 8px;
	display: inline-block;
	margin-right: 50px;
}

/* ポイント情報_利用可能ポイント_テキスト */
#currentPointThSurround{
	width: 100%;
	background-color: #fff;
	padding: 14px 14px 0 14px;
}
@media only screen and (max-width: 768px) {
#pointLayoutGroup{
	padding:0;
}
}

/* ポイント情報_利用可能ポイント_値 */
#currentPointTdSurround{
	padding: 10px 14px 13px;
	font-size:0;
	padding-top: 0;
	text-align: center;
}
#currentPoint_labelId{
	display: block;
	font-size: 0.875rem;
	color: #644c1f;
	text-align: center;
	padding-bottom: 10px;
}
#currentPoint_innerId,
#currentPointSuffixLabel{
	font-size: 1.25rem;
	color: #fff;
	background-color: #a27f37;
}
#currentPoint_innerId{
	padding: 2px 2px 2px 22px;
}
#currentPointSuffixLabel{
	padding: 2px 22px 2px 2px;
}

@media only screen and (max-width: 768px) {
#currentPointItemWrap{
	display: block;
	width: 83%;
	margin: 0 auto 22px;
	font-size: 0;
	padding: 12px 0;
}
#currentPointThSurround{
	display: inline-block;
	width: 50%;
	padding: 0;
}
#currentPoint_labelId{
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 15px;
	padding: 2px 0 0 0;
}
#currentPointTdSurround{
	width: 50%;
	display: inline-block;
	padding: 3px;
}
#currentPoint_innerId,
#currentPointSuffixLabel{
	font-size: 1.0625rem;
}
#currentPoint_innerId{
	padding: 3px 1px 3px 4px;
}
#currentPointSuffixLabel{
	padding: 3px 4px 3px 1px;
}
}

/* ポイント利用ラジオボタングループ */
#pointUsageWrap{
	display: inline-block;
	vertical-align: top;
}
#noPointThSurround,
#useAllPointThSurround,
#usePointTdSurround,
#usePointThSurround{
padding: 0;
vertical-align: baseline;
display: inline-block;
}
#useAllPointItemWrap{
	margin-top: 21px;
	display: block;
}
#usePointItemWrap{
	margin-top: 16px;
	display: block;
}
#usePointTdSurround .items{
	display: inline-block;
}
#usePointTdSurround input[name="usePoint"]{
	width: 130px;
}
#usePointThSurroundApply{
	display: inline-block;
}
#usePointThSurroundApply input[name="usePointThSurroundApply"]{
	padding: 6px 7px;
	margin-left: 4px;
	color: #644c1f;
	background-color: #fff;
	border: 2px solid #bbac8e;
	border-radius: 6px;
}

@media only screen and (max-width: 768px) {
	#pointUsageWrap{
		padding: 0 13px 0;
	}
	#noPointItemWrap,
	#useAllPointItemWrap{
		border: none;
	}
	#usePointItemWrap{
		border: none;
	}
	#usePointThSurround{
		font-size: 0.8125rem;
	}
	#usePointTdSurround input[name="usePoint"]{
		width: 82px;
	}
	#usePointThSurroundApply input[name="usePointThSurroundApply"]{
		border-radius: 4px;
		font-size: 0.6875rem;
	}
}


/* お客様情報 */
#dispOrderNameThSurround,
#dispPostCodeThSurround,
#dispOrderAddressThSurround,
#dispOrderTelNoThSurround{
	background-color: #fff;
}

#customerInfoDispLayout{
	display: block;
	padding: 0 56px;
	border: none;
}
#customerInfoDispLayout .itemWrap{
	display: block;
	font-size: 0;
	margin-left: -56px;
	margin-right: -56px;
	padding-right: 56px;
	padding-left: 56px;
	border-bottom: 1px solid #d7cfb9;
}
#customerInfoDispLayout .th,
#customerInfoDispLayout .td{
	background-color: transparent;
	border: none;
	padding-top: 18px;
	padding-bottom: 18px;
	font-size: 1rem;
	display: inline-block;
}
#customerInfoDispLayout .th{
	width: 30%;
}
#customerInfoDispLayout .td{
	width: 70%;
}
@media only screen and (max-width: 768px) {
 #customerInfoDispLayout{
 	padding: 0;
 }
 #customerInfoDispLayout .itemWrap{
	margin-left: 0;
	margin-right: 0;
	padding-right: 0;
	padding-left: 0;
	border-top: none;
	border-left: none;
	border-right: none;
 }
	#customerInfoDispLayout .th,
	#customerInfoDispLayout .td{
	font-size: 0.8125rem;
	padding-top: 8px;
	padding-bottom: 8px;
}
}

/* お届け先情報 */
#destinationAlterLayoutGroup{
	padding: 0 56px;
}
@media only screen and (max-width: 768px) {
  #destinationAlterLayoutGroup{
  	padding: 0 12px;
  }
}

/* お届け先_別の住所に送るを選択時の入力項目 */
#destinationGroup{
	padding: 40px;
	background-color: #fffaee;
}
#destinationGroup .postCodeSearchButton{
	padding: 6px 7px;
	color: #644c1f;
	background-color: #fff;
	border: 2px solid #bbac8e;
	border-radius: 6px;
}

@media only screen and (max-width: 768px) {
 #destinationGroup{
 	padding: 10px;
 	font-size: 0.8125rem;
 }
 #destinationGroup .postCodeSearchButton{
 	margin-top: 12px;
 	border-radius: 4px;
 	font-size: 0.6875rem;
 }
}


/* お支払い方法 */
#paymentDescriptionItemWrap{
	padding: 15px 56px;
}
#paymentLayoutGroup{
	padding: 0 56px;
}
label[id^="selectedPaymentMethod"] sup{
	font-size: 0.75rem;
	margin-left: 12px;
}

@media only screen and (max-width: 768px) {
	#paymentDescriptionItemWrap{
		padding: 0 12px;
	}
	#paymentLayoutGroup{
		padding: 0 12px;
	}
	label[id^="selectedPaymentMethod"] sup{
		font-size: 0.6875rem;
		font-weight: 700;
	}
}

/* お支払い方法_クレジットカード選択時入力項目 */
#creditCardGroup{
	background-color: #fffaee;
	padding: 40px;
}
#creditCardGroup .creditCardIncludeArea h3{
	padding-bottom: 18px;
}

#creditCardGroup .creditCardIncludeArea p{
	padding-top: 12px;
	padding-bottom: 12px;
}
#creditCardGroup .useCardType1ItemWrap{
	margin-bottom: 12px;
}

#creditCardGroup .creditCardNoDescription{
	font-size: 0.75rem;
	margin-top: 8px;
}
#creditCardGroup .securityCodeNote{
	font-size: 0.75rem;
	margin-top: 8px;
}
#creditCardGroup #securityCode {
	width: 5em;
}
#creditCardGroup .OrderInfoInputSecurityCode{
	display: none;
}
#creditCardGroup .OrderInfoInputCardMember{
	font-size: 0.75rem;
	margin-top: 8px;
}

@media only screen and (max-width: 768px) {
 #creditCardGroup{
 	padding: 10px;
 	font-size: 0.8125rem;
 }
 #creditCardGroup .creditCardIncludeArea h3 span{
 	font-weight: 700;
 	margin-bottom: 8px;
 }
}

/* 配送希望日指定 */
#destinationOptionLayoutGroup{
	display: block;
	padding: 0 56px;
	border: none;
}
#destinationOptionLayoutGroup .tr,
#destinationOptionLayoutGroup .th,
#destinationOptionLayoutGroup .td{
	background-color: transparent;
	border: none;
}
#appointedDeliveryDateThSurround,
#appointedDeliveryTimeCodeThSurround,
#deliveryRequestThSurround{
	padding-left: 0;
	padding-right: 0;
}
#appointedDeliveryDateThSurround,
#appointedDeliveryTimeCodeThSurround,
#appointedDeliveryDate,
#appointedDeliveryTimeCode{
	width: 160px;
}
#appointedDeliveryDateTdSurround,
#appointedDeliveryTimeCodeTdSurround{
	display: inline-block;
	width: 100%;
}

#OrderInfoInput #appointedDeliveryDateTdSurround .items,
#OrderInfoInput #destinationOptionLayoutGroup .items{
	position: relative;
}

#OrderInfoInput #appointedDeliveryDateTdSurround .items::after,
#OrderInfoInput #appointedDeliveryTimeCodeTdSurround .items::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;
}
@media only screen and (max-width: 768px) {
	#destinationOptionLayoutGroup{
		padding: 0 12px;
	}
	#destinationOptionLayoutGroup .tr,
	#destinationOptionLayoutGroup .th,
	#destinationOptionLayoutGroup .td{
		display: inline-block;
	}
	#destinationOptionLayoutGroup .tr{
		width: 100%;
		font-size: 0;
	}
	#destinationOptionLayoutGroup .th{
		width: 40%;
		font-size: 0.8125rem;
	}
	#destinationOptionLayoutGroup .td{
		width: 100%;
		font-size: 0.8125rem;
	}
	#appointedDeliveryDate,
	#appointedDeliveryTimeCode{
		width: 100%;
	}

/* 配送希望日指定_配送時のご要望 */
#deliveryRequestThSurround{
	display: inline-block;
}
#deliveryRequestFlgItemWrap,
#deliveryRequestFlg_0_label,
#deliveryRequestFlg_1_label,
#deliveryRequestFlg_2_label,
#deliveryRequestFlg_3_label{
	display: inline-block;
	padding-right: 8px;
	padding-left: 8px;
}
#deliveryRequestFlgItemWrap label {
	margin-right: 20px;
}
#deliveryRequestFlgItemWrap label:last-of-type {
	margin-right: 0;
}

@media only screen and (max-width: 768px) {
	#deliveryRequestFlgItemWrap,
	#deliveryRequestFlg_0_label,
	#deliveryRequestFlg_1_label,
	#deliveryRequestFlg_2_label,
	#deliveryRequestFlg_3_label{
		margin-left: 0;
		margin-right: 0;
	}
}

/* クーポン */
#orderInfoInputCouponCodePartsIncludeItemWrap{
	padding: 15px 56px;
}
#mediaCouponLayoutGroup{
	display: block;
	border: none;
	padding: 0 56px;
}
.set-group.mediaCouponLayoutGroup.table .th,
.set-group.mediaCouponLayoutGroup.table .td{
	background-color: transparent;
	border: none;
}
@media only screen and (max-width: 768px) {
  #orderInfoInputCouponCodePartsIncludeItemWrap{
  	padding: 15px 12px;
  }
  #mediaCouponLayoutGroup{
  	padding: 0 12px;
  }
  #couponCodeItemWrap{
  	display: inline-block;
  	width: 100%;
  }
}

#customerCommentItemWrap{
	display: block;
	border: none;
	padding: 0 56px;
	font-size: 0;
}
#customerCommentItemWrap .th,
#customerCommentItemWrap .td{
	background-color: transparent;
	border: none;
	display: inline-block;
	font-size: 1rem;
}
#customerCommentItemWrap .th{
	width: 12%;
}
#customerCommentItemWrap .td{
	width: 88%;
}
#orderCommentLayout{
	border: none;
}
@media only screen and (max-width: 768px) {
  #customerCommentItemWrap{
  	padding: 0 12px;
  }
#customerCommentItemWrap .th,
#customerCommentItemWrap .td{
	display: block;
	width: 100%;
	font-size: 0.8125rem;
}
}

/* 前のページに戻るボタン */
.returnButtonItemWrap{
	margin-bottom: 16px;
}
.btn_lg.returnButton{
	font-size: 1.25rem;
	padding: 10px 42px;
	position: relative;
	border: 1px solid #d0d0d0;
	background-color: transparent;
}
.returnButtonItemWrap.buttonWrap > .items{
	position: relative;
}
.returnButtonItemWrap.buttonWrap > .items::before{
	content: "";
	display: inline-block;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	left: 26px;
	height: 6px;
	width: 6px;
	border-top: 1px solid #333;
	border-left: 1px solid #333;
	transform: rotate(-45deg);
}
@media only screen and (max-width: 768px) {
	.returnButtonItemWrap.buttonWrap > .items::before{
	top: 23px;
	bottom: unset;
	left: 15%;
	}
}

/* ご注文内容の確認ボタン */
#returnButtonItemWrap input[name="returnButton"]{
	font-size: 1.25rem;
}
#saveButtonItemWrap input[name="saveButton"]{
	font-size: 1.25rem;
	padding: 10px 42px;
	position: relative;
	border: none;
	background-color: #eadbc0;
	color: #644c1f;
}
#saveButtonItemWrap > .items{
	position: relative;
}
#saveButtonItemWrap > .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) {
	#saveButtonItemWrap > .items::after{
	top: 23px;
	bottom: unset;
	right: 15%;
	}
	#returnButtonItemWrap input[name="returnButton"],
	#saveButtonItemWrap input[name="saveButton"]{
		font-size: 1.125rem;
	}
	input#returnButton.returnButton[type="button"] {
			width: 80%;
	}
}