/* Y'S GEAR : customer.css */


/*======================================================================*
 *  [ orderStep / registrationStep ] 
 *======================================================================*/

.orderStep, 
.registrationStep {
	max-width: 800px;
	margin: 30px auto;
}
.orderStep { max-width: 800px; }
.registrationStep { max-width: 480px; }
.orderStep li, 
.registrationStep li {
	list-style-type: none;
	position: relative;
	float: left;
	color: #929191;
	text-align: center;
}
.orderStep li { width: 16.66%; }
.registrationStep li { width: 33.33%; }
.orderStep li:before, 
.registrationStep li:before {
	display: block;
	content: "";
	width: 14px;
	height: 14px;
	margin: 9px auto 14px auto;
	border-radius: 14px;
	background: #bbbaba;
}
.orderStep li:after, 
.registrationStep li:after {
	display: block;
	position: absolute;
	z-index: -100;
	width: 100%;
	content: "";
	border-top: 2px dotted #bbbaba;
	top: 15px;
	left: -50%;
}
.orderStep li:first-child:after, 
.registrationStep li:first-child:after {
	border: none;
}
.orderStep .now, 
.registrationStep .now {
	color: #000;
}
.orderStep .now:before, 
.registrationStep .now:before {
	width: 32px;
	height: 32px;
	margin: 0 auto 5px auto;
	border-radius: 32px;
	background: #000;
}
.orderStep .now:before { content: url(/app/shared/svg/customer/icon_order_step.svg); }
.registrationStep .now:before { content: url(/app/shared/svg/customer/icon_registration_step.svg); }


/*======================================================================*
 *  [ pageTitle ] 
 *======================================================================*/

.pageTitle h1 {
	font-size: 20px;
	font-size: 2rem;
}


/*======================================================================*
 *  [ selectBox ] 
 *======================================================================*/

.selectBox {
	display: inline-block;
	position: relative;
}
.selectBox:after {
	display: block;
	position: absolute;
	top: 50%;
	right: 5px;
	width: 0;
	height: 0;
	margin: -3px 0 0 0;
	border: 4px solid transparent;
	border-top: 8px solid #000;
	content: "";
	cursor: text;
}

.hasCustomSelect {
	z-index: 100;
}
.customSelect {
	background: #f3f4f5;
	border: 1px solid #aeaeae;
	padding: 5px 0;
	color: #000;
	font-size: 13px;
	font-size: 1.3rem;
	line-height: 1.8;
	box-sizing: border-box;
}
.customSelect.customSelectHover {}
.customSelect.customSelectOpen {}
.customSelect.customSelectFocus {}
.customSelectInner {
	padding: 0 20px 0 10px;
}


/*======================================================================*
 *  [ deleteButton ] 
 *======================================================================*/

.deleteButton {
	display: inline-block;
	overflow: hidden;
	width: 24px;
	height: 24px;
	background: url(/app/shared/svg/icon_delete.svg) center center no-repeat #909090;
	border-radius: 24px;
	text-indent: 100%;
	white-space: nowrap;
	cursor: pointer;
}
.deleteButton:hover {
	background-color: #000;
}


/*======================================================================*
 *  [ sendButton / mypageButton / shoptopButton / addButton ] 
 *======================================================================*/

.sendButton, 
.mypageButton, 
.shoptopButton, 
.addButton {
	display: inline-block;
	position: relative;
	min-width: 285px;
	border: none;
	box-sizing: border-box;
	background: #000; /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(66,66,66,1) 0%, rgba(32,32,32,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(66,66,66,1)), color-stop(100%,rgba(32,32,32,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(66,66,66,1) 0%,rgba(32,32,32,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -ms-linear-gradient(top,  rgba(66,66,66,1) 0%,rgba(32,32,32,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(66,66,66,1) 0%,rgba(32,32,32,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#424242', endColorstr='#202020',GradientType=0 ); /* IE6-9 */
	color: #fff !important;
	font-size: 18px;
	font-size: 1.8rem;
	text-align: center;
	cursor: pointer;
}
.sendButton:hover, 
.mypageButton:hover, 
.shoptopButton:hover, 
.addButton:hover {
	background: #424242; /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(0,0,0,1) 0%, rgba(66,66,66,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(100%,rgba(66,66,66,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(66,66,66,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -ms-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(66,66,66,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(0,0,0,1) 0%,rgba(66,66,66,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#424242',GradientType=0 ); /* IE6-9 */
}
a.sendButton:hover, 
a.mypageButton:hover, 
a.shoptopButton:hover, 
a.addButton:hover {
	color: #fff !important;
}


/*======================================================================*
 *  [ sendButton ] 
 *======================================================================*/

.sendButton {
	padding: 15px;
}
.sendButton:after {
	display: block;
	position: absolute;
	top: 50%;
	right: 10px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	width: 10px;
	height: 10px;
	margin: -7px 0 0 0;
	border-top: 3px solid #969696;
	border-right: 3px solid #969696;
	content: "";
}
.sendButton span {
	font-size: 13px;
	font-size: 1.3rem;
}

.customerBox .sendButton {
	min-width: 230px;
	padding: 10px 15px;
	font-size: 16px;
	font-size: 1.6rem;
}

.customerBox.login .sendButton, 
.customerBox.first .sendButton {
	min-width: 285px;
	padding: 15px;
	font-size: 18px;
	font-size: 1.8rem;
}

/* [ 使用不可の場合 ] */
.sendButton:disabled {
	background: #bbbaba;
	cursor: default;
}


/*======================================================================*
 *  [ mypageButton ] 
 *======================================================================*/

.mypageButton {
	padding: 15px 15px 15px 40px;
}
.mypageButton:before {
	display: block;
	position: absolute;
	top: 50%;
	left: 12px;
	width: 20px;
	height: 25px;
	margin: -12px 0 0 0;
	content: url(/app/shared/svg/customer/icon_mypage.svg);
}


/*======================================================================*
 *  [ shoptopButton ] 
 *======================================================================*/

.shoptopButton {
	padding: 15px 15px 15px 40px;
}
.shoptopButton:before {
	display: block;
	position: absolute;
	top: 50%;
	left: 12px;
	width: 23px;
	height: 22px;
	margin: -12px 0 0 0;
	content: url(/app/shared/svg/customer/icon_shoptop.svg);
}


/*======================================================================*
 *  [ addButton ] 
 *======================================================================*/

.addButton {
	padding: 15px 15px 15px 40px;
}
.addButton:before {
	display: block;
	position: absolute;
	top: 50%;
	left: 12px;
	width: 26px;
	height: 28px;
	margin: -14px 0 0 0;
	content: url(/app/shared/svg/customer/icon_add.svg);
}


/*======================================================================*
 *  [ detailButton ] 
 *======================================================================*/

.detailButton {
	display: inline-block;
	width: 105px;
	padding: 7px 5px 8px 5px;
	border: 0;
	border-radius: 5px;
	box-sizing: border-box;
	background: #464646;
	color: #fff !important;
	font-size: 13px;
	font-size: 1.3rem;
	text-align: center;
	cursor: pointer;
}
.detailButton:hover {
	background: #747474;
}
a.detailButton:hover {
	color: #fff !important;
}
.detailButton:before {
	display: inline-block;
	border: 5px solid transparent;
	border-left: 6px solid #fff;
	content: "";
}


/*======================================================================*
 *  [ printButton ] 
 *======================================================================*/

.printButton {
	display: table-cell;
	width: 90px;
	height: 90px;
	padding: 0;
	border: 0;
	background: #505050;
	color: #fff;
	text-align: center;
	vertical-align: middle;
}
.printButton:hover {
	background: #000;
	cursor: pointer;
}
.printButton:before {
	display: block;
	width: 37px;
	height: 34px;
	margin: 0 auto 10px auto;
	content: url(/app/shared/svg/customer/icon_print.svg);
}

/*======================================================================*
 *  [ downloadButton ] 
 *======================================================================*/

.downloadButton {
	display: table-cell;
	width: 90px;
	height: 90px;
	padding: 0;
	border: 0;
	background: #4794cf;
	color: #fff;
	text-align: center;
	vertical-align: middle;
}
.downloadButton:hover {
	background: #3a7cb5;
	cursor: pointer;
}

/*======================================================================*
 *  [ cancelButton ] 
 *======================================================================*/

.cancelButton {
	display: inline-block;
	padding: 9px 20px;
	border: none;
	background: #909090;
	color: #fff;
	font-size: 13px;
	font-size: 1.3rem;
	cursor: pointer;
}
.cancelButton:before {
	display: inline-block;
	margin: 0 5px 0 0;
	font-size: 20px;
	font-size: 2rem;
	line-height: 10px;
	vertical-align: text-middle;
	content: "×";
}
.cancelButton:hover {
	color: #fff;
	background: #515151;
}


/*======================================================================*
 *  [ couponSendButton ]  2016.03 追記
 *======================================================================*/

.couponSendButton {
	display: inline-block;
	position: relative;
	padding: 20px 40px 20px 20px;
	border: none;
	box-sizing: border-box;
	background: #b5c435; /* Old browsers */
	background: -moz-linear-gradient(top,  #b5c435 0%, #8c9d13 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #b5c435 0%,#8c9d13 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #b5c435 0%,#8c9d13 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5c435', endColorstr='#8c9d13',GradientType=0 ); /* IE6-9 */
	color: #fff !important;
	font-size: 24px;
	font-size: 2.4rem;
	font-weight: bold;
	line-height: 1.2;
	text-align: center;
	text-shadow: 1px 2px 1px #666;
	cursor: pointer;
}
.couponSendButton:hover {
	background: #8c9d13; /* Old browsers */
	background: -moz-linear-gradient(top,  #8c9d13 0%, #b5c435 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #8c9d13 0%,#b5c435 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #8c9d13 0%,#b5c435 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8c9d13', endColorstr='#b5c435',GradientType=0 ); /* IE6-9 */
}
.couponSendButton:after {
	display: block;
	position: absolute;
	top: 50%;
	right: 12px;
	width: 12px;
	height: 12px;
	margin-top: -9px;
	border-top: 4px solid #fff;
	border-right: 4px solid #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	content: "";
}
.couponSendButton b {
	display: inline-block;
}


/*======================================================================*
 *  [ leftArrowLink ] 
 *======================================================================*/

.leftArrowLink {
	display: inline-block;
	position: relative;
	padding: 0 0 0 12px;
	margin: 0 0 0 10px;
	line-height: 1.2;
	text-decoration: underline;
}
.leftArrowLink:hover {
	text-decoration: none;
}
.leftArrowLink:before {
	display: inline-block;
	width: 5px;
	height: 5px;
	margin: -3px 5px 0 -10px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	border-top: 2px solid #666;
	border-right: 2px solid #666;
	content: "";
	vertical-align: middle;
}
.leftArrowLink[target="_blank"]:after, 
.leftArrowLink.blank:after {
	display: inline-block;
	margin: 0 0 0 3px;
	content: url(/app/shared/svg/icon_blank.svg);
}

/* ボタン風味 */
.leftArrowLink.styleButton {
	margin: 3px 10px;
	padding: 7px 10px 7px 20px;
	border: 1px solid #aeaeae;
	text-decoration: none;
}


/*======================================================================*
 *  [ prevLink.small ] 
 *======================================================================*/

.prevLink.small {
	display: inline-block;
	padding: 10px 20px;
	border: none;
	background: #909090;
	color: #fff;
	font-size: 13px;
	font-size: 1.3rem;
	cursor: pointer;
}
.prevLink.small:before {
	display: inline-block;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	width: 5px;
	height: 5px;
	margin: 0 5px 1px 0;
	border-bottom: 2px solid #fff;
	border-left: 2px solid #fff;
	content: "";
}
.prevLink.small:hover {
	color: #fff !important;
	background: #515151;
}


/*======================================================================*
 *  [ prevLink.large ] 
 *======================================================================*/

.prevLink.large {
	display: inline-block;
	position: relative;
	min-width: 285px;
	padding: 15px;
	border: none;
	background: #000; /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(166,166,166,1) 0%, rgba(129,129,129,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(166,166,166,1)), color-stop(100%,rgba(129,129,129,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(166,166,166,1) 0%,rgba(129,129,129,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -ms-linear-gradient(top,  rgba(166,166,166,1) 0%,rgba(129,129,129,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(166,166,166,1) 0%,rgba(129,129,129,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6a6a6', endColorstr='#818181',GradientType=0 ); /* IE6-9 */
	color: #fff;
	font-size: 18px;
	font-size: 1.8rem;
	cursor: pointer;
}
.prevLink.large:hover {
	background: #424242; /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(129,129,129,1) 0%, rgba(166,166,166,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(129,129,129,1)), color-stop(100%,rgba(166,166,166,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(129,129,129,1) 0%,rgba(166,166,166,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -ms-linear-gradient(top,  rgba(129,129,129,1) 0%,rgba(166,166,166,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(129,129,129,1) 0%,rgba(166,166,166,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#818181', endColorstr='#a6a6a6',GradientType=0 ); /* IE6-9 */
}
.prevLink.large:before {
	display: block;
	position: absolute;
	top: 50%;
	left: 10px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	width: 10px;
	height: 10px;
	margin: -7px 0 0 0;
	border: none;
	border-bottom: 3px solid #ccc;
	border-left: 3px solid #ccc;
	content: "";
}


/*======================================================================*
 *  [ customerWrap ] 
 *======================================================================*/

.customerWrap {
	/* margin: 0 0 50px 0; */
	font-size: 13px;
	font-size: 1.3rem;
}


/*======================================================================*
 *  [ customerWrap common ] 
 *======================================================================*/

.customerWrap section, 
.customerWrap .section {
	margin: 0 0 50px 0;
}

.customerWrap h2 {
	margin: 0 0 20px 0;
	padding: 0 0 0 10px;
	border-left: 7px solid #000;
	font-size: 15px;
	font-size: 1.5rem;
	line-height: 1.2;
}

.customerWrap h3 {
	margin: 0 0 15px 0;
	font-size: 18px;
	font-size: 1.8rem;
}
.customerWrap h3 span {
	font-size: 13px;
	font-size: 1.3rem;
	font-weight: normal;
}

.customerWrap p {
	margin: 0 0 15px 0;
	line-height: 1.4;
}

.customerWrap .attention {
	padding: 0 0 0 1em;
	color: #e44800;
	text-indent: -1em;
}
.customerWrap span.attention {
	display: inline-block;
}
/* [ 2016.03 追記 ] */
.customerWrap .attention.couponAttention {
	position: relative;
	padding: 5px 5px 5px 30px;
	border: 1px solid #ff0000;
	color: #ff0000;
	text-indent: 0;
}
.customerWrap .attention.couponAttention:before {
	position: absolute;
	top: 50%;
	left: 5px;
	margin-top: -8px;
	content: url(/app/shared/svg/icon_attention_red.svg);
}
.customerWrap .attention.couponAttention a {
	color: #ff0000 !important;
	text-decoration: underline;
}
.customerWrap .attention.couponAttention a:hover, 
.customerWrap .attention.couponAttention a:active {
	text-decoration: none;
}

.customerWrap .completionText {
	padding: 15px 10px;
	background: #ffefef;
	color: #ff0000;
}

.customerWrap .countText strong {
	font-size: 16px;
	font-size: 1.6rem;
}


/*======================================================================*
 *  [ customerWrap form ] 
 *======================================================================*/

.customerWrap label {
	display: inline-block;
}

.customerWrap input[type="text"], 
.customerWrap input[type="number"], 
.customerWrap input[type="tel"], 
.customerWrap input[type="email"], 
.customerWrap input[type="password"],
.customerWrap textarea {
	-webkit-appearance: none;
	padding: 10px;
	border: 1px solid #aeaeae;
	border-radius: 0;
	background: #f3f4f5;
	font-size: 13px;
	font-size: 1.3rem;
	line-height: 1.3;
}
.customerWrap input[type="text"]:focus, 
.customerWrap input[type="number"]:focus, 
.customerWrap input[type="tel"]:focus, 
.customerWrap input[type="email"]:focus, 
.customerWrap input[type="password"]:focus,
.customerWrap textarea:focus {
	border-color: #4571b0;
	background: #fff;
	outline: none;
}

.customerWrap .size10 { width: 10%; }
.customerWrap .size20 { width: 20%; }
.customerWrap .size30 { width: 30%; }
.customerWrap .size40 { width: 40%; }
.customerWrap .size50 { width: 50%; }
.customerWrap .size60 { width: 60%; }
.customerWrap .size70 { width: 70%; }
.customerWrap .size80 { width: 80%; }
.customerWrap .size90 { width: 90%; }

.customerWrap ::-webkit-input-placeholder { color: #bbb; }
.customerWrap ::-moz-placeholder { color: #bbb; -moz-opacity: 1; opacity: 1; }
.customerWrap :-moz-placeholder { color: #bbb; -moz-opacity: 1; opacity: 1; }
.customerWrap :-ms-input-placeholder { color: #bbb; }

.customerWrap .an {
	ime-mode: inactive;
}

.customerWrap input[type="radio"], 
.customerWrap input[type="checkbox"] {
	display: none;
}
.customerWrap input[type="radio"] + label, 
.customerWrap input[type="checkbox"] + label {
	display: inline-block;
	position: relative;
	padding: 12px 12px 12px 42px;
	border-radius: 5px;
	box-sizing: border-box;
	background: #f3f4f5;
	vertical-align: middle;
	-webkit-transition: background 0.2s linear;
	transition: background 0.2s linear;
	cursor: pointer;
}
.customerWrap input[type="radio"] + label:hover, 
.customerWrap input[type="checkbox"] + label:hover {
	background: #fff2ee;
}
.customerWrap input[type="radio"] + label:after, 
.customerWrap input[type="checkbox"] + label:after {
	display: block;
	position: absolute;
	top: 50%;
	left: 15px;
	width: 16px;
	height: 16px;
	margin: -10px 0 0 0;
	border: 2px solid #aeaeae;
	border-radius: 6px;
	content: '';
	-webkit-transition: border-color 0.2s linear;
	transition: border-color 0.2s linear;
}
.customerWrap input[type="radio"] + label:before {
	display: block;
	opacity: 0;
	position: absolute;
	top: 50%;
	left: 20px;
	width: 10px;
	height: 10px;
	margin: -5px 0 0 0;
	border-radius: 50%;
	background: #e44800;
	content: '';
	-webkit-transition: opacity 0.2s linear;
	transition: opacity 0.2s linear;
}
.customerWrap input[type="radio"]:checked + label:before {
	opacity: 1;
}
.customerWrap input[type="checkbox"] + label:before {
	display: block;
	opacity: 0;
	position: absolute;
	top: 50%;
	left: 21px;
	width: 5px;
	height: 9px;
	margin: -7px 0 0 0;
	border-right: 3px solid #e44800;
	border-bottom: 3px solid #e44800;
	content: '';
	-webkit-transition: opacity 0.2s linear;
	transition: opacity 0.2s linear;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
.customerWrap input[type="checkbox"]:checked + label:before {
	opacity: 1;
}

.customerWrap button:focus {
	outline: none;
}

/* [ 使用不可の時 ] */
.customerWrap input[type="radio"]:disabled + label, 
.customerWrap input[type="checkbox"]:disabled + label {
	cursor: default;
}
.customerWrap input[type="radio"]:disabled + label:after, 
.customerWrap input[type="checkbox"]:disabled + label:after, 
.customerWrap input[type="radio"]:disabled + label:hover:after, 
.customerWrap input[type="checkbox"]:disabled + label:hover:after {
	border-color: #ccc;
}
.customerWrap input[type="radio"]:disabled + label:before, 
.customerWrap input[type="checkbox"]:disabled + label:before {
	width: 0;
	height: 22px;
	margin: -11px 0 0 4px;
	border-right: 2px solid #ccc;
	border-bottom: none;
	background: #ccc;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	opacity: 1;
}


/*======================================================================*
 *  [ squareList / discList ] 
 *======================================================================*/

.squareList, 
.discList {
	margin: 0 0 0 20px;
	line-height: 1.2;
}
.squareList li { list-style-type: square; }
.discList li { list-style-type: disc; }
.squareList li + li {
	margin: 10px 0 0 0;
}


/*======================================================================*
 *  [ destinationBox ] 
 *======================================================================*/

.destinationCheck input[type="checkbox"] + label {
	display: inline-block;
	padding: 20px 20px 20px 42px;
	background: none;
	border: 1px solid #e66841;
	font-size: 15px;
	font-size: 1.5rem;
}

.destinationInner {
	display: none;
}


/*======================================================================*
 *  [ coupointBox ] 
 *======================================================================*/

.coupointBox p:first-child {
	margin: 0 !important;
}

.coupointInner {
	display: none;
}
.coupointBox p + .coupointInner {
	margin: 15px 0 0 0;
}

.coupointBox .customerBox dt {
	font-weight: bold;
}

/* [ 2016.04 追記 ] */

.coupointBox .customerBox .special {
	background: #ecf4fa;
}


/*======================================================================*
 *  [ couponLoginBox ] 2016.03 追記
 *======================================================================*/

.couponLoginBox {
	text-align: center;
}
.couponLoginBox h1 {
	margin: 0 0 25px 0;
}

.couponLoginBox .privilege {
	position: relative;
	margin: 0 0 40px 0;
	padding: 5px 40px 10px 40px;
	background-color: #323568;
	color: #fff;
	font-size: 24px;
	font-size: 2.4rem;
}
.couponLoginBox .privilege:before, 
.couponLoginBox .privilege:after {
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	width: 36px;
	height: 100%;
	background-size: 100% 100%;
	content: "";
}
.couponLoginBox .privilege:before {
	left: 0;
	background-image: url(/app/shared/img/customer/bg_privilege_left.png);
}
.couponLoginBox .privilege:after {
	right: 0;
	background-image: url(/app/shared/img/customer/bg_privilege_right.png);
}
.couponLoginBox .privilege span {
	display: inline-block;
	font-size: 16px;
	font-size: 1.6rem;
}
.couponLoginBox .privilege b {
	display: inline-block;
	font-size: 26px;
	font-size: 2.6rem;
}
.couponLoginBox .privilege b:before { content: "「"; }
.couponLoginBox .privilege b:after  { content: "」"; }

.couponLoginBox .text {
	margin: 0 0 40px 0;
	color: #323568;
	font-size: 16px;
	font-size: 1.6rem;
	font-weight: bold;
}


/*======================================================================*
 *  [ couponOutline | クーポン概要 ] 
 *======================================================================*/

.couponOutline {
	max-width: 820px;
	margin: 0 auto 40px auto;
	text-align: center;
}

.couponOutline .title {
	margin-bottom: 30px;
	color: #d02929;
	font-size: 40px;
	font-size: 4rem;
	font-weight: bold;
}

/* [ リボン ] */
.couponOutline .ribbon {
	margin-bottom: 20px;
	padding: 5px 50px;
	background-color: #d02929;
	background-image: url(/app/shared/img/coupon/bg_privilege_right.png), 
					  url(/app/shared/img/coupon/bg_privilege_left.png);
	background-position: right center, 
						 left center;
	background-repeat: no-repeat, no-repeat;
	background-size: 32px 100%, 32px 100%;
	text-align: center;
}
.couponOutline dl {
	display: inline-block;
	margin-top: 10px;
	color: #fff;
	text-align: left;
}
.couponOutline dt {
	float: left;
	width: 6em;
	margin-bottom: 10px;
	padding: 2px 10px;
	background: #e75959;
	font-size: 14px;
	font-size: 1.4rem;
	line-height: 1.4;
	text-align: right;
	clear: both;
}
.couponOutline dd {
	margin-bottom: 10px;
	padding-left: 125px;
	font-size: 18px;
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 1.35;
}

/* [ テキスト ] */
.couponOutline .text {
	margin-bottom: 20px;
	font-size: 16px;
	font-size: 1.6rem;
	font-weight: bold;
}
.couponOutline .text a {
	display: inline-block;
	position: relative;
	padding: 5px 50px 5px 20px;
	background: #f5f0ab;
	color: #000;
}
.couponOutline .text a:after {
	position: absolute;
	top: 50%;
	right: 20px;
	width: 8px;
	height: 8px;
	margin-top: -8px;
	border-right: 3px solid #b3a71d;
	border-bottom: 3px solid #b3a71d;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	content: "";
}

/* [ ポイント ] */
.couponOutline .point {
	margin: 30px -5px 0 -5px;
}
.couponOutline .point li {
	display: inline-block;
	width: 33.33333333%;
	padding: 0 5px;
	box-sizing: border-box;
	vertical-align: middle;
}
.couponOutline .point p {
	position: relative;
	padding: 10px 5%;
	border: 1px solid #363a90;
	color: #363a90;
	font-size: 14px;
	font-size: 1.4rem;
	font-weight: bold;
}
.couponOutline .point p:before, 
.couponOutline .point p:after {
	position: absolute;
	left: 5%;
	width: 90%;
	height: 0;
	border-top: 1px solid #fff;
	content: "";
}
.couponOutline .point p:before { top: -1px; }
.couponOutline .point p:after  { bottom: -1px; }
.couponOutline .point b {
	display: block;
	font-size: 16px;
	font-size: 1.6rem;
}


/*======================================================================*
 *  [ paymentBox ] 2016.04追記
 *======================================================================*/

.paymentBox .customerBox dt {
	font-weight: bold;
}


/*======================================================================*
 *  [ customerBox ] 
 *======================================================================*/

.customerBox {
	margin: 0 0 30px 0;
	border-top: 1px dotted #aeaeae;
}
.destinationInner .customerBox {
	margin: 0;
}

.squareList + .customerBox {
	margin: 15px 0 30px 0;
}


.customerBox dl {
	display: table;
	width: 100%;
}
.customerBox dt,
.customerBox dd {
	display: table-cell;
	padding: 20px;
	border-bottom: 1px dotted #aeaeae;
	box-sizing: border-box;
	vertical-align: middle;
}
.customerBox dt {
	width: 25%;
	font-size: 14px;
	font-size: 1.4rem;
}
.customerBox dt label {
	display: block;
	position: relative;
	margin: -20px;
	padding: 20px;
}
.customerBox dt input[type="radio"] + label, 
.customerBox dt input[type="checkbox"] + label {
	display: block;
	padding: 20px 20px 20px 42px;
	background: none;
}
.customerBox dt input[type="radio"] + label:hover, 
.customerBox dt input[type="checkbox"] + label:hover {
	background: none;
}
.customerBox dt input[type="radio"] + label:hover:after, 
.customerBox dt input[type="checkbox"] + label:hover:after {
	border-color: #e44800;
}
.customerBox dt span {
	display: block;
	position: absolute;
	top: 50%;
	right: 10px;
	margin:  -9px 0 0 0;
	padding: 3px 4px 4px 4px;
	color: #fff;
	font-size: 11px;
	font-size: 1.1rem;
	font-weight: normal;
}
.customerBox dd {
	width: 75%;
	border-left: 1px dotted #aeaeae;
}
.customerBox dd .note {
	display: inline-block;
	color: #666;
	font-size: 11px;
	font-size: 1.1rem;
}
.customerBox dd .auto {
	color: #9c9c9c;
}
.customerBox dd .icon {
	margin: 10px 0 0 0;
}
.customerBox dd .icon i {
	margin: 5px 5px 0 0;
}

.customerBox dd p {
	margin: 15px 0 0 0 ;
}
.customerBox dd p:first-child {
	margin: 0 0 15px 0 ;
}
.customerBox dd .againText {
	margin: 10px 0;
}

.customerBox dd i {
	margin: 0 3px;
}

.customerBox label + label {
	margin: 0 0 0 15px;
}

/*  [ placeholder ]  */
.customerBox .placeholder {
	display: none;
}
:root .customerBox .placeholder { /* [ IE9 ] */
	display: inline-block\0/;
	width: 5.5em\0/;
}

/*  [ required / any ]  */
.customerBox .required dt label, 
.customerBox .any dt label {
	padding-right: 50px;
}
.customerBox .required dt span {
	background: #e66841;
}
.customerBox .any dt span {
	background: #96a0ad;
}

/*  [ zipcode ]  */
.zipcode input {
	margin: 0 5px 0 0;
}

/*  [ sei / mei ]  */
.customerBox .sei, 
.customerBox .mei {
	width: 30%;
	padding: 0 0 0 1.5em;
	box-sizing: border-box;
	text-indent: -1.5em;
}
.customerBox .sei input, 
.customerBox .mei input {
	width: 100%;
}

/*  [ carrier / specified ]  */
.customerBox .carrier dd strong, 
.customerBox .specified dd strong {
	font-size: 15px;
	font-size: 1.5rem;
	font-weight: normal;
}
.customerBox .specified dd strong {
	display: inline-block;
	max-width: 50%;
	vertical-align: middle;
}

/*  [ sex ]  */
.customerBox .sex li {
	list-style-type: none;
	float: left;
}
.customerBox .sex li + li {
	margin: 0 0 0 15px;
}

/* [ selection ] */
.customerBox .selection li {
	list-style-type: none;
}
.customerBox .selection li + li {
	margin: 10px 0 0 0;
}
.customerBox .selection li label {
	display: block;
}

/* [ birthday ] */
.customerBox .birthday label + label {
	margin: 0 0 0 5px;
}


/*======================================================================*
 *  [ notArea ]
 *======================================================================*/

.notArea {
	display: inline-block;
	padding: 2px 5px;
	background: #aeaeae;
	color: #fff;
	font-size: 13px;
	font-size: 1.3rem;
	font-style: normal;
	text-align: center;
}
.notArea:before {
	display: inline-block;
	width: 19px;
	height: 16px;
	margin: 0 5px 0 0;
	vertical-align: middle;
	content: url(/app/shared/svg/icon_attention.svg);
}


/*======================================================================*
 *  [ zipButton ] 
 *======================================================================*/

.zipButton {
	display: inline-block;
	position: relative;
	min-width: 180px;
	padding: 10px 15px;
	border: 1px solid #aeaeae;
	border-radius: 5px;
	background: #fff; /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(227,227,227,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(227,227,227,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(227,227,227,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(227,227,227,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(227,227,227,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e3e3e3',GradientType=0 ); /* IE6-9 */
	font-size: 13px;
	font-size: 1.3rem;
	vertical-align: middle;
	cursor: pointer;
}
.zipButton:hover {
	background: #e3e3e3; /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(227,227,227,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(227,227,227,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(227,227,227,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -ms-linear-gradient(top,  rgba(227,227,227,1) 0%,rgba(255,255,255,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(227,227,227,1) 0%,rgba(255,255,255,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e3e3e3', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
	color: #333;
}


/*======================================================================*
 *  [ editButton ] 
 *======================================================================*/

.editButton {
	display: inline-block;
	position: relative;
	min-width: 180px;
	padding: 8px 25px 8px 15px;
	border: 1px solid #aeaeae;
	border-radius: 5px;
	box-sizing: border-box;
	background: #fff;
	font-size: 13px;
	font-size: 1.3rem;
	cursor: pointer;
}
.editButton:hover {
	background: #f3f4f6;
}
.editButton:after {
	display: block;
	position: absolute;
	top: 50%;
	right: 10px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	width: 5px;
	height: 5px;
	margin: -4px 0 0 0;
	border-top: 2px solid #000;
	border-right: 2px solid #000;
	content: "";
}


/*======================================================================*
 *  [ changeButton ] 
 *======================================================================*/

.changeButton {
	display: inline-block;
	position: relative;
	min-width: 180px;
	padding: 8px 15px;
	border: 1px solid #000;
	box-sizing: border-box;
	background: #fff;
	font-size: 13px;
	font-size: 1.3rem;
	cursor: pointer;
}
.changeButton:hover {
	background: #f3f4f6;
}
.changeButton:after {
	display: block;
	position: absolute;
	top: 50%;
	right: 10px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	width: 5px;
	height: 5px;
	margin: -4px 0 0 0;
	border-top: 2px solid #000;
	border-right: 2px solid #000;
	content: "";
}


/*======================================================================*
 *  [ calcButton ] 
 *======================================================================*/

.calcButton {
	display: inline-block;
	width: 140px;
	padding: 7px 0;
	border: none;
	border-radius: 0;
	background: #424242; /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(66,66,66,1) 0%, rgba(32,32,32,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(66,66,66,1)), color-stop(100%,rgba(32,32,32,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(66,66,66,1) 0%,rgba(32,32,32,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -ms-linear-gradient(top,  rgba(66,66,66,1) 0%,rgba(32,32,32,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(66,66,66,1) 0%,rgba(32,32,32,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#424242', endColorstr='#202020',GradientType=0 ); /* IE6-9 */
	color: #fff;
	font-size: 14px;
	font-size: 1.4rem;
	cursor: pointer;
}
.calcButton:hover {
	background: #202020; /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(32,32,32,1) 0%, rgba(66,66,66,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(32,32,32,1)), color-stop(100%,rgba(66,66,66,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(32,32,32,1) 0%,rgba(66,66,66,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -ms-linear-gradient(top,  rgba(32,32,32,1) 0%,rgba(66,66,66,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(32,32,32,1) 0%,rgba(66,66,66,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#202020', endColorstr='#424242',GradientType=0 ); /* IE6-9 */
}
.calcButton:before {
	display: inline-block;
	width: 18px;
	height: 25px;
	margin: 0 10px 0 0;
	content: url(/app/shared/svg/customer/icon_recalculations.svg);
	vertical-align: middle;
}


/*======================================================================*
 *  [ customerBox.login / customerBox.first ] 
 *======================================================================*/

.customerBox.login dt, 
.customerBox.first dt {
	text-align: center;
	vertical-align: top;
}

.customerBox.login a, 
.customerBox.first a {
	color: #074195;
}


/*======================================================================*
 *  [ customerBox.login ] 
 *======================================================================*/

.customerBox.login {
	margin: 0 0 50px 0;
}
.customerBox.login dd label {
	display: block;
	margin: 0 0 15px 0;
}
.customerBox.login dd span {
	margin: 5px 0 0 0;
	line-height: 1.4;
	vertical-align: middle;
}
.customerBox.login dd a {
	margin: 5px 0 0 0;
}
.customerBox.login .closeSeaStyle {
	color: #ff0000;
	font-weight: bold;;
}


/*======================================================================*
 *  [ customerBox.first ] 
 *======================================================================*/

.customerBox.first section {
	margin: 0;
}
.customerBox.first h3 {
	color: #e44800;
	font-size: 14px;
	font-size: 1.4rem;
	line-height: 1.2;
}
.customerBox.first hr {
	clear: both;
	border-top: 1px dotted #aeaeae;
	margin: 15px -20px;
}

.customerBox.first .mobile {
	float: right;
	width: 130px;
	margin: 0 0 20px 20px;
	padding: 25px 25px 15px 25px;
	background: #e6e6e6;
}
.customerBox.first .mobile p {
	margin: 15px 0 0 0;
	font-size: 11px;
	font-size: 1.1rem;
	line-height: 1.4;
	text-align: center;
}

.customerBox.first .privilege {
	margin: 20px 0 0 0;
	padding: 0 0 0 80px;
}
.customerBox.first .privilege h4 {
	float: left;
	width: 63px;
	height: 63px;
	margin: 0 0 0 -80px;
	border-radius: 100%;
	background: #ededed;
	color: #e44800;
	font-size: 11px;
	font-size: 1.1rem;
	text-align: center;
}
.customerBox.first .privilege h4:before {
	display: block;
	width: 23px;
	height: 27px;
	margin: 0 auto;
	padding: 10px 0 3px 0;
	content: url(/app/shared/svg/customer/icon_privilege.svg);
}

.customerBox.first .privilege ul {
	line-height: 1.2;
}
.customerBox.first .privilege li {
	list-style-type: none;
	padding: 0 0 0 1em;
	background: url(/app/shared/svg/customer/icon_checked.svg) left .5em no-repeat;
}
.customerBox.first .privilege li + li {
	margin: 10px 0 0 0;
}

.customerBox.first .privilege p {
	margin: 0 0 10px 0;
}
.customerBox.first .privilege a {
	margin: 10px 0 0 0;
}


/*======================================================================*
 *  [ customerBox.address / customerBox.addresslist ] 
 *======================================================================*/

.customerBox.address dd, 
.customerBox.addresslist dd {
	position: relative;
}
.customerBox.address dd p, 
.customerBox.addresslist dd p {
	padding: 0 200px 0 0;
}
.customerBox.address dd strong, 
.customerBox.addresslist dd strong {
	display: inline-block;
	margin: 0 0 10px 0;
	font-size: 15px;
	font-size: 1.5rem;
}


/*======================================================================*
 *  [ customerBox.address ] 
 *======================================================================*/

.customerBox.address .time {
	position: absolute;
	top: 20px;
	right: 20px;
}
.customerBox.address .time dt, 
.customerBox.address .time dd {
	display: block;
	width: auto;
	padding: 0;
	border: none;
}
.customerBox.address .time dt {
	margin: 0 0 5px 0;
	font-size: 13px;
	font-size: 1.3rem;
}
.customerBox.address .time i {
	display: block;
	width: 168px;
	margin: 0;
}
.customerBox.address .time i + i {
	margin: 5px 0 0 0;
}

.customerBox.address .editButton {
	float: left;
}

.customerBox.address .sendButton {
	float: right;
	min-width: 177px;
}


/*======================================================================*
 *  [ customerBox.addresslist ] 
 *======================================================================*/

.customerBox.addresslist dd p {
	margin: 0;
}

.customerBox.addresslist .time {
	margin: 15px 0 0 0;
}

.customerBox.addresslist .editButton {
	position: absolute;
	top: 20px;
	right: 20px;
}
.customerBox.addresslist .deleteButton {
	position: absolute;
	right: 20px;
	bottom: 20px;
}


/*======================================================================*
 *  [ customerBox.coupoint ] 
 *======================================================================*/

.customerBox.coupoint dt {
}

.customerBox.coupoint dd strong {
	display: inline-block;
	color: #e44800;
}
.customerBox.coupoint dd strong span {
	font-size: 18px;
	font-size: 1.8rem;
}

.customerBox.coupoint .calcButton {
	display: block;
	margin: 15px 0 0 0;
}

.ypointAmount {
	margin: 0 0 15px 0;
	padding: 5px;
	background: #fff2ee;
}
.ypointAmount li {
	display: inline-block;
	list-style-type: none;
}
.ypointAmount li label {
	margin: 5px;
}
.ypointAmount li input[type="radio"] + label {
	width: 15em;
	border: 1px solid #fff;
	background: #fff;
	-webkit-transition: border-color 0.2s linear;
	transition: border-color 0.2s linear;
}
.ypointAmount li input[type="radio"] + label:hover {
	border-color: #e44800;
	background: #fff;
}


/*======================================================================*
 *  [ customerBox.confirm ] 
 *======================================================================*/

.customerBox.confirm dd {
	position: relative;
	padding: 20px 220px 20px 20px;
}
.customerBox.confirm dd.nobutton {
	padding: 20px;
}
.customerBox.confirm dd dl + dl {
	margin: 10px 0 0 0;
}
.customerBox.confirm dd dt, 
.customerBox.confirm dd dd {
	padding: 0;
	border: none;
	line-height: 1.4;
	vertical-align: top;
}
.customerBox.confirm dd dt {
	font-size: 13px;
	font-size: 1.3rem;
	font-weight: bold;
}
.customerBox.confirm dd dd strong {
	display: inline-block;
	margin: 0 0 5px 0;
	font-size: 15px;
	font-size: 1.5rem;
}
.customerBox.confirm .changeButton {
	position: absolute;
	top: 20px;
	right: 20px;
}


/*======================================================================*
 *  [ customerBox.card ] 
 *======================================================================*/

.customerBox.card .select {
	margin: -5px;
}
.customerBox.card .select li {
	float: left;
	box-sizing: border-box;
	padding: 5px;
	list-style-type: none;
}
.customerBox.card .select label {
	display: block;
	padding: 10px 10px 40px 10px;
	text-align: center;
}
.customerBox.card .select input[type="radio"] + label:before, 
.customerBox.card .select input[type="radio"] + label:after {
	top: auto;
	left: 50%;
}
.customerBox.card .select input[type="radio"] + label:before {
	margin: 0 0 0 -5px;
	bottom: 15px;
}
.customerBox.card .select input[type="radio"] + label:after {
	margin: 0 0 0 -10px;
	bottom: 10px;
}

.customerBox.card .example div {
	display: none;
	max-width: 345px;
	margin: 15px 0 0 0;
}
.customerBox.card .example p {
	padding: 5px;
	background: #9fa0a0;
	color: #fff;
}
.customerBox.card .example img {
	padding: 0 10px;
	box-sizing: border-box;
}


/*======================================================================*
 *  [ customerBox.completion ] 
 *======================================================================*/

.customerBox.completion {
	padding: 50px;
	border-top: none;
	background: #f3f4f6;
}
.customerBox.completion dl {
	background: #fff;
}
.customerBox.completion dl:first-child {
	border-top: 1px dotted #aeaeae;
}
.customerBox.completion dd {
	font-size: 16px;
	font-size: 1.6rem;
}
.customerBox.completion strong {
	color: #ff0000;
}


/*======================================================================*
 *  [ customerBox.magazine ] 
 *======================================================================*/

.customerBox.magazine .select li {
	display: table;
	width: 100%;
}
.customerBox.magazine .select li + li {
	margin: 10px 0 0 0;
}
.customerBox.magazine .select label, 
.customerBox.magazine .select a {
	display: table-cell;
	vertical-align: middle;
}
.customerBox.magazine .select label {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}
.customerBox.magazine .select label strong {
	display: inline-block;
	margin: 0 0 5px 0;
}
.customerBox.magazine .select a {
	width: 20%;
	padding: 10px;
	background: #e6e6e6;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	text-align: center;
	white-space: nowrap;
}
.customerBox.magazine .select a:hover {
	background: #dadada;
}
.customerBox.magazine .select a:before {
	display: inline-block;
	width: 22px;
	height: 16px;
	margin: 0 5px 0 0;
	vertical-align: text-bottom;
	content: url(/app/shared/svg/customer/icon_magazine.svg);
}


/*======================================================================*
 *  [ customerBox .error ] 
 *======================================================================*/

.customerBox .error dd {
	background: #fff7f7;
}
.customerBox .error input {
	border-color: #ff0000;
	background: #ffe9e9;
}
.customerBox .error input:focus {
	border-color: #ff0000;
}

.errorText {
	margin: 10px 0 0 0 !important;
	color: #ff0000;
}
.errorText:before {
	margin: 0 7px;
	content: url(/app/shared/svg/icon_error.svg);
	vertical-align: middle;
}

.customerBox.login .errorText {
	margin: 10px 0 !important;
}


/*======================================================================*
 *  [ customerBox empty / cannot ] 
 *======================================================================*/

.customerBox .empty dt, 
.customerBox .empty dd,
.customerBox .cannot dt, 
.customerBox .cannot dd {
	background: #f3f4f5;
	color: #999;
}


/*======================================================================*
 *  [ totalBox ] 
 *======================================================================*/

.totalBox {
	margin: 45px 0;
	text-align: center;
}

.totalBox dl {
	display: inline-block;
	position: relative;
	margin: 5px 0;
	border-bottom: 3px solid #bbbaba;
	vertical-align: bottom;
}
.totalBox dl + dl {
	margin-left: 40px;
}
.totalBox dl + dl:before {
	position: absolute;
	top: 20%;
	left: -35px;
	color: #9fa0a0;
	font-size: 30px;
}
.totalBox dt, 
.totalBox dd {
	padding: 0 15px 15px 15px;
}
.totalBox strong {
	font-size: 16px;
	font-size: 1.6rem;
}
.totalBox dt {
	font-size: 12px;
	font-size: 1.2rem;
}
.totalBox dd {
	font-weight: bold;
}

.totalBox .postage:before {
	content: "＋";
}

.totalBox .point:before {
	content: "－";
}

.totalBox .total {
	padding: 17px 0 0 0;
	border-color: #e44800;
	color: #e44800;
}
.totalBox .total:before {
	content: "＝";
}
.totalBox .total dt, 
.totalBox .total dd {
	display: inline-block;
	font-weight: bold;
}
.totalBox .total dt {
	padding-right: 0;
}
.totalBox .total dd {
	padding-left: 0;
}
.totalBox .total dd strong {
	font-size: 26px;
	font-size: 2.6rem;
}


/*======================================================================*
 *  [ confirmBox ] 
 *======================================================================*/

.confirmBox {
	margin: 0 0 50px 0;
	padding: 15px;
	background: #f3f4f6;
}

.confirmBox .no { width: 5%; }
.confirmBox .name { width: 35%; }
.confirmBox .size { width: 10%; }
.confirmBox .price { width: 15%; }
.confirmBox .quantity { width: 5%; }
.confirmBox .subtotal { width: 15%; }
.confirmBox .point { width: 15%; }

.confirmBox ul {
	display: table;
	width: 100%;
	margin: 0 0 10px 0;
}
.confirmBox ul li {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}
.confirmBox ul span {
	display: inline-block;
}

.confirmBox ol li {
	display: table;
	width: 100%;
	padding: 10px 0;
	background: #fff;
}
.confirmBox ol li + li {
	margin: 5px 0 0 0;
}
.confirmBox ol .no, 
.confirmBox ol .name, 
.confirmBox ol dl {
	display: table-cell;
	box-sizing: border-box;
	vertical-align: middle;
}
.confirmBox ol .no {
	text-align: center;
}
.confirmBox ol .name {
	padding: 0 10px;
	border-left: 1px solid #e7e7e7;
}
.confirmBox ol .name div {
	display: table-cell;
	box-sizing: border-box;
	vertical-align: middle;
}
.confirmBox ol .img {
	width: 55px;
}
.confirmBox ol .img img {
	width: 45px;
}
.confirmBox ol .name p {
	margin: 0;
}
.confirmBox ol .title {
	font-size: 11px;
	font-size: 1.1rem;
}
.confirmBox ol .title a {
	color: #000;
	font-size: 13px;
	font-size: 1.3rem;
	font-weight: bold;
	text-decoration: underline;
}
.confirmBox ol .title a:hover {
	text-decoration: none;
}
.confirmBox ol p.notes {
	color: #5576a5;
}
.confirmBox ol dl {
	padding: 0 10px;
	border-left: 1px solid #e7e7e7;
	text-align: center;
}
.confirmBox ol dt {
	display: none;
}

/* [ 2016.03 追記 ] */
.confirmBox .price.couponPrice {
	color: #e44800;
}
.confirmBox .price.couponPrice span {
	display: block;
	margin-bottom: 5px;
	font-size: 11px;
	font-size: 1.1rem;
}

.confirmBox .result {
	float: right;
	width: 300px;
	margin: 15px 0 0 0;
	box-sizing: border-box;
	font-size: 12px;
	font-size: 1.2rem;
	text-align: right;
}
.confirmBox .result a {
	color: #083f99;
	text-decoration: underline;
}
.confirmBox .result a:hover {
	text-decoration: none;
}
.confirmBox .result dt,
.confirmBox .result dd {
	float: left;
	width: 50%;
	margin: 10px 0 0 0;
	box-sizing: border-box;
}
.confirmBox .result dt {
	clear: both;
}
.confirmBox .result dt span {
	display: inline-block;
	font-size: 11px;
	font-size: 1.1rem;
}
/* [ 2016.03 追記 ] */
.confirmBox .result .coupon {
	color: #e44800;
}
.confirmBox .result .total {
	margin: 15px 0 0 0;
	padding: 15px 0 0 0;
	border-top: 1px solid #aeaeae;
	color: #e44800;
	line-height: 1.8rem;
}
.confirmBox .result dd.total {
	font-weight: bold;
}
.confirmBox .result .total strong {
	font-size: 18px;
	font-size: 1.8rem;
}


/*======================================================================*
 *  [ pasBatteryConfirm ] 
 *======================================================================*/

.pasBatteryConfirm {
	margin: -20px 0 50px 0;
	padding: 15px;
	background: #ffe9e9;
}

.pasBatteryConfirm dl {
	float: right;
	box-sizing: border-box;
	font-size: 12px;
	font-size: 1.2rem;
	text-align: right;
}
.pasBatteryConfirm dt,
.pasBatteryConfirm dd {
	float: left;
	box-sizing: border-box;
}
.pasBatteryConfirm dt {
	clear: both;
}
.pasBatteryConfirm dd {
	width: 150px;
}

.pasBatteryConfirm p {
	padding: 10px 0 0 0;
	text-align: right;
	font-weight: bold;
	clear: both;
}


/*======================================================================*
 *  [ copyrightBox ] 
 *======================================================================*/

.copyrightBox dl {
	overflow-y: scroll;
	height: 300px;
	margin: -30px 0 30px 0;
	padding: 20px;
	border: 1px solid #b4b4b4;
	box-sizing: border-box;
}
.copyrightBox dl a {
	text-decoration: underline;
}
.copyrightBox dl a:hover {
	text-decoration: none;
}

.copyrightBox dt {
	margin: 0 0 10px 0;
	padding: 5px 10px 5px 5px;
	border-left: 5px solid #ccc;
	font-weight: bold;
}
.copyrightBox dd {
	margin: 0 0 20px 0;
	padding: 0 0 20px 20px;
	border-bottom: 1px dotted #b4b4b4;
	font-size: 12px;
	font-size: 1.2rem;
	line-height: 140%;
}
.copyrightBox .date {
	padding: 0;
	border: none;
	text-align: right;
}

.copyrightBox dd li {
	list-style: none;
	padding: 5px 0 0 3.5em;
	counter-increment: chapter;
}
.copyrightBox dd li:before {
	display: inline-block;
	width: 3.5em;
	margin: 0 0 0 -3.5em;
	text-align: center;
	content : "（" counter(chapter) "）";
}


/*======================================================================*
 *  [ mailBox ] 
 *======================================================================*/

.mailBox {
	display: none;
	margin: 0;
}


/*======================================================================*
 *  [ orderBox ] 
 *======================================================================*/

.orderBox {
	position: relative;
	min-height: 90px;
	padding: 10px 110px 10px 10px;
	background: #e6e6e6;
}

.orderBox li {
	display: table;
	list-style-type: none;
	margin: 5px 0;
}
.orderBox li:before {
	display: inline-block;
	margin: -3px 5px 0 10px;
	vertical-align: top;
	content: url(/app/shared/svg/customer/icon_checked.svg);
}
.orderBox li strong, 
.orderBox li p {
	display: table-cell;
}
.orderBox li strong {
	width: 7em;
}
.orderBox li .id {
	font-size: 15px;
	font-size: 1.5rem;
}

.orderBox .printButton {
	position: absolute;
	top: 10px;
	right: 10px;
}

.orderBox .downloadButton {
	position: absolute;
	top: 10px;
	right: 110px;
}


/*======================================================================*
 *  [ buttonBox ] 
 *======================================================================*/

.buttonBox {
	margin: 0 0 50px 0;
}

.buttonBox p {
	text-align: right;
}
.buttonBox p a {
	color: #074195;
	text-decoration: underline;
}
.buttonBox p a:hover {
	text-decoration: none;
}

.buttonBox > .sendButton {
	float: right;
}
.buttonBox > .prevLink.small {
	float: left;
}

.buttonBox.center, 
.buttonBox.center p {
	text-align: center;
}
.buttonBox.center button + button {
	margin: 0 0 0 15px;
}

.buttonBox.center li {
	list-style-type: none;
	float: right;
	width: 50%;
	padding: 0 10px;
	box-sizing: border-box;
	text-align: left;
}
.buttonBox.center li + li {
	text-align: right;
}

.buttonBox.center.single button {
	float: none;
}

.buttonBox.cancel .cancelButton {
	float: right;
}


/*======================================================================*
 *  [ securityBox ] 
 *======================================================================*/

.securityBox {
	margin: 0 0 50px 0;
}

.securityBox ul {
	border-top: 1px solid #ccc;
}
.securityBox li {
	display: table;
	padding: 10px;
	border-bottom: 1px solid #ccc;
}
.securityBox li div, 
.securityBox li p {
	display: table-cell;
	vertical-align: middle;
}
.securityBox li div {
	width: 150px;
	padding: 0 10px 0 0;
	text-align: center;
}


/*======================================================================*
 *  [ asideLinkBox ] 
 *======================================================================*/

.asideLinkBox {
	margin: 0 0 50px 0;
}
.asideLinkBox ul {
	border-top: 1px solid #ccc;
}
.asideLinkBox li {
	list-style-type: none;
	border-bottom: 1px solid #ccc;
}
.asideLinkBox a {
	display: table;
	padding: 20px 10px;
}
.asideLinkBox div, 
.asideLinkBox p {
	display: table-cell;
	vertical-align: middle;
}
.asideLinkBox div {
	width: 300px;
	padding: 0 10px 0 0;
	text-align: center;
}
.asideLinkBox strong {
	display: inline-block;
	margin: 0 0 10px 0;
}
.asideLinkBox span {
	color: #363a90;
}


/*======================================================================*
 *  [ pageNav ] 
 *======================================================================*/

.pageNav {
	margin: 0 0 50px 0;
	text-align: right;
}
.pageNav li {
	display: inline-block;
	list-style-type: none;
}
.pageNav li a, 
.pageNav li span {
	display: block;
	width: 2em;
	margin: 0 0 5px 0;
	padding: 7px 0;
	border-radius: 3px;
	box-sizing: border-box;
	text-align: center;
}
.pageNav li a:hover {
	background: #f0f1f8;
}
.pageNav li.active span {
	background: #313567;
	color: #fff;
}
.pageNav li.prev a, 
.pageNav li.next a {
	width: 5em;
	padding: 6px 0;
	border: 1px solid #bcbcbc;
}
.pageNav li.prev a:before, 
.pageNav li.next a:after {
	display: inline-block;
	width: 5px;
	height: 5px;
	content: "";
	vertical-align: middle;
}
.pageNav li.prev a:before {
	margin: -3px 5px 0 0;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	border-bottom: 2px solid #bcbcbc;
	border-left: 2px solid #bcbcbc;
}
.pageNav li.next a:after {
	margin: -3px 0 0 5px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	border-top: 2px solid #bcbcbc;
	border-right: 2px solid #bcbcbc;
}


/*======================================================================*
 *  [ modalWin ] 2023.12 追記
 *======================================================================*/

.mfp-content {
	display: inline-block !important;
	width:auto !important;
}

.modalWin {
	padding: 20px;
	background: #fff;
	font-size: 13px;
	font-size: 1.3rem;
	line-height: 1.4;
	text-align: center;
}
.modalWin .buttonBox {
	margin: 0 0 30px 0;
}
.modalWin .buttonBox + p {
	color: #e85800;
}
.modalWin .buttonBox li {
	list-style-type: none;
}
.modalWin .buttonBox li + li {
	margin: 10px 0 0 0;
}
.modalWin .leftArrowLink {
	cursor: pointer;
}
.modalWin .leftArrowLink:before {
	-webkit-transform: rotate(-135deg);
	transform: rotate(-135deg);
}

/* [ 住所選択 ] */
#zipcodeWin {
	border: none;
}
#zipcodeWin .selection {
	margin: 0 0 30px 0;
	text-align: left;
}

/* [ お支払いをする ] */
#processingWin {
	padding: 50px 20px;
}
#processingWin p {
	margin: 20px 0 0 0;
}
#processingWin img + p {
	color: #e66841;
	font-size: 20px;
	font-size: 2rem;
	font-weight: bold;
}

/* [ メールアドレスを確認 ] */
#sendmailWin p {
	font-size: 15px;
	font-size: 1.5rem;
}
#sendmailWin p:first-child {
	margin: 0 0 30px 0;
}
#sendmailWin p:first-child strong {
	display: inline-block;
	margin: 10px 0 0 0;
	font-size: 17px;
	font-size: 1.7rem;
}
#sendmailWin .errorText {
	margin: 30px 0 !important;
	color: #ff0000;
	font-size: 17px;
	font-size: 1.7rem;
}

/* [ 3Dセキュア同意 ] */
#consentWin {
	max-width: 800px;
	padding: 0;
	font-weight: 500;
}
#consentWin .mfp-close { color: #fff; }
#consentWin .title {
	padding: 20px;
	background: #1D2A6B;
	color: #fff;
	font-size: 2.4rem;
}
#consentWin .inner {
	padding: 20px;
	line-height: 1.6;
	text-align: left;
}
#consentWin .inner > p {
	font-size: 1.6rem;
}
#consentWin .section {
	margin: 20px 0;
	padding-top: 20px;
	border-top: 1px solid #EDEDED;
	font-size: 1.4rem;
}
#consentWin .section h3 {
	margin-bottom: 15px;
	padding-left: 10px;
	border-left: 5px solid #000;
	font-size: 1.6rem;
	font-weight: bold;
}
#consentWin .section ul {
	list-style: disc;
	margin: 5px 0 5px 2em;
}
#consentWin .buttonBox {
	display: flex;
	justify-content: center;
	flex-direction: row-reverse;
	margin: 30px 0 10px;
	text-align: center;
}
#consentWin .agreeBtn,
#consentWin .disagreeBtn {
	display: block;
	width: calc(50% - 40px);
	margin: 0 20px;
	max-width: 210px;
}
#consentWin .agreeBtn p,
#consentWin .disagreeBtn p {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 50px;
	color: #fff;
	font-size: 1.6rem;
	-webkit-transition: opacity 0.2s linear;
	transition: opacity 0.2s linear;
}
#consentWin .agreeBtn:hover p,
#consentWin .agreeBtn:active p,
#consentWin .disagreeBtn:hover p,
#consentWin .disagreeBtn:active p { opacity: 0.7; }
#consentWin .agreeBtn span,
#consentWin .disagreeBtn span {
	display: inline-block;
	margin-top: 5px;
	font-size: 1.2rem;
}
#consentWin .agreeBtn p { background: #1D2A6B; }
#consentWin .disagreeBtn p { background: #909090; }
#consentWin .disagreeBtn span:before, 
#consentWin .agreeBtn span:after {
	display: inline-block;
	width: 6px;
	height: 6px;
	content: "";
	vertical-align: middle;
}
#consentWin .disagreeBtn span:before {
	margin: -1px 3px 0 0;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	border-bottom: 2px solid #bcbcbc;
	border-left: 2px solid #bcbcbc;
}
#consentWin .agreeBtn span:after {
	margin: -1px 0 0 3px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	border-top: 2px solid #bcbcbc;
	border-right: 2px solid #bcbcbc;
}


/*======================================================================*
 *  [ pageTop ] 
 *======================================================================*/

.pageTop {
	display: none;
	position: fixed;
	right: 50%;
	bottom: 40px;
	margin: 0 -490px 0 0;
	z-index: 100;
}
.pageTop a {
	display: block;
	position: relative;
	overflow: hidden;
	width: 35px;
	height: 35px;
	margin: 0 0 0 auto;
	border-radius: 5px;
	background: rgba(0,0,0,.7);
	text-indent: 100%;
	white-space: nowrap;
}
.pageTop a:hover {
	background: rgba(0,0,0,1);
}
.pageTop a:after {
	display: block;
	position: absolute;
	top: 15px;
	left: 11px;
	width: 10px;
	height: 10px;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	border-top: 3px solid #fff;
	border-right: 3px solid #fff;
	content: "";
}


/*======================================================================*
 *  [ cf ] 
 *======================================================================*/

.customerWrap:after, 
.orderStep ol:after, 
.registrationStep ol:after, 
.totalBox:after, 
.confirmBox:after {
	display: block;
	clear: both;
	content: "";
}


/*======================================================================*
 *  [ Media Queries 1030 ] 
 *======================================================================*/

@media screen and (max-width: 1030px) {
	
	/*==================================================================*
	 *  [ pageTop ] 
	 *==================================================================*/
	
	.pageTop {
		right: 15px;
		width: auto;
		margin: 0;
	}
	
}


/*======================================================================*
 *  [ Media Queries 980 ] 
 *======================================================================*/

@media screen and (max-width: 980px) {
	
	/*==================================================================*
	 *  [ customerWrap ] 
	 *==================================================================*/
	
	.customerWrap {
		margin: 0 20px;
	}
	
	
	/*==================================================================*
	 *  [ couponLoginBox ] 2016.03 追記
	 *==================================================================*/
	
	.couponLoginBox h1 {
		margin-right: -20px;
		margin-left: -20px;
	}
	
	
	/*==================================================================*
	 *  [ pageTop ] 
	 *==================================================================*/
	
	.pageTop {
		right: 20px;
	}
	
}


/*======================================================================*
 *  [ Media Queries 768 ] 
 *======================================================================*/

@media screen and (max-width: 768px) {
	
	/*==================================================================*
	 *  [ customerBox.first ] 
	 *==================================================================*/
	
	.customerBox.first .mobile {
		display: none;
	}
	
	
	/*==================================================================*
	 *  [ customerBox.confirm ] 
	 *==================================================================*/
	
	.customerBox.confirm dd {
		padding: 20px;
	}
	.customerBox.confirm .changeButton {
		display: block;
		position: relative;
		margin: 20px 0 0 auto;
		top: 0;
		right: 0;
	}
	
}


/*======================================================================*
 *  [ Media Queries 667 ] 
 *======================================================================*/

@media screen and (max-width: 667px) {
	
	/*==================================================================*
	 *  [ customerBox.address / customerBox.addresslist ] 
	 *==================================================================*/
	
	.customerBox.address .editButton, 
	.customerBox.addresslist .editButton {
		min-width: 0;
	}
	.customerBox.address .editButton span, 
	.customerBox.addresslist .editButton span {
		display: none;
	}
	
	
	/*==================================================================*
	 *  [ customerBox.address ] 
	 *==================================================================*/
	
	.customerBox.address dd p {
		padding: 0 80px 0 0;
	}
	
	.customerBox.address .time {
		position: relative;
		top: 0;
		right: 0;
		margin: 15px 0;
	}
	.customerBox.address .time i {
		display: inline-block;
		width: auto;
	}
	.customerBox.address .time i + i {
		margin: 0 0 0 5px;
	}
	
	.customerBox.address .editButton {
		position: absolute;
		top: 20px;
		right: 20px;
		min-width: 0;
	}
	
	.customerBox.address .sendButton {
		float: none;
		width: 100%;
	}
	
	
	/*==================================================================*
	 *  [ customerBox.addresslist ] 
	 *==================================================================*/
	
	.customerBox.addresslist dd p {
		padding: 0 100px 0 0;
	}
	
	
	/*==================================================================*
	 *  [ customerBox.magazine ] 
	 *==================================================================*/
	
	.customerBox.magazine .select a span {
		display: none;
	}
	
	
	/*==================================================================*
	 *  [ buttonBox ] 
	 *==================================================================*/
	
	.buttonBox.center button {
		display: block;
		margin: 0 auto;
	}
	.buttonBox.center button + button {
		margin: 15px auto 0 auto;
	}
	
	.buttonBox.center li button {
		width: 100%;
		min-width: 0;
	}
	
	
	/*==================================================================*
	 *  [ asideLinkBox ] 
	 *==================================================================*/
	
	.asideLinkBox a, 
	.asideLinkBox p {
		display: block;
	}
	.asideLinkBox p {
		margin: 0;
	}
	.asideLinkBox div {
		display: none;
	}
	
}


/*======================================================================*
 *  [ Media Queries 568 ] 
 *======================================================================*/

@media screen and (max-width: 568px) {
	
	/*==================================================================*
	 *  [ orderStep / registrationStep ] 
	 *==================================================================*/
	
	.orderStep, 
	.registrationStep {
		margin: 10px auto 25px auto;
	}
	#siteWrap .orderStep, 
	#siteWrap .registrationStep {
		margin: 20px auto 15px auto;
	}
	.orderStep li, 
	.registrationStep li {
		font-size: 0;
	}
	
	
	/*==================================================================*
	 *  [ pageTitle ] 
	 *==================================================================*/
	
	.pageTitle h1 {
		text-align: center;
		font-size: 18px;
		font-size: 1.8rem;
	}
	
	
	/*==================================================================*
	 *  [ sendButton / mypageButton / shoptopButton / addButton
	 *     / prevLink.large ] 
	 *==================================================================*/
	
	.sendButton, 
	.customerBox.login .sendButton, 
	.customerBox.first .sendButton,
	.mypageButton, 
	.shoptopButton,
	.addButton,
	.prevLink.large {
		width: 100%;
		min-width: 0;
		padding: 15px;
		font-size: 16px;
		font-size: 1.6rem;
	}
	
	
	/*==================================================================*
	 *  [ couponSendButton ]  2016.03 追記
	 *==================================================================*/

	.couponSendButton {
		width: 100%;
		padding: 15px 30px;
		font-size: 18px;
		font-size: 1.8rem;
	}
	
	
	/*==================================================================*
	 *  [ customerWrap ] 
	 *==================================================================*/
	
	.customerWrap {
		margin: 20px 10px 0 10px;
		/* font-size: 12px;
		font-size: 1.2rem; */
	}
	
	
	/*==================================================================*
	 *  [ customerWrap common ] 
	 *==================================================================*/
	
	.customerWrap h2, 
	.customerWrap h3 {
		margin: 0 -10px 15px -10px;
		padding: 10px;
		background: #999;
		border-left: none;
		color: #fff;
		font-size: 16px;
		font-size: 1.6rem;
		line-height: 1.2;
		text-align: center;
	}
	.customerWrap h3 span {
		display: none;
	}
	
	.customerWrap .countText strong {
		font-size: 14px;
		font-size: 1.4rem;
	}
	
	
	/*==================================================================*
	 *  [ customerWrap form ] 
	 *==================================================================*/
	
	.customerWrap input[type="text"], 
	.customerWrap input[type="number"], 
	.customerWrap input[type="tel"], 
	.customerWrap input[type="email"], 
	.customerWrap input[type="password"],
	.customerWrap textarea {
		font-size: 14px;
		font-size: 1.4rem;
		line-height: 1.4;
	}
	
	.customerWrap .size10 { width: 10%; }
	.customerWrap .size20 { width: 30%; }
	.customerWrap .size30, 
	.customerWrap .size40 { width: 50%; }
	.customerWrap .size50, 
	.customerWrap .size60, 
	.customerWrap .size70, 
	.customerWrap .size80, 
	.customerWrap .size90 { width: 100%; }
	
	.customerWrap input[type="radio"] + label, 
	.customerWrap input[type="checkbox"] + label {
		display: block;
	}
	
	
	/*==================================================================*
	 *  [ destinationBox ] 
	 *==================================================================*/
	
	.destinationCheck input[type="checkbox"] + label {
		display: block;
		padding: 12px 12px 12px 42px;
		border: 1px solid #e66841;
		font-size: 14px;
		font-size: 1.4rem;
	}
	
	.destinationInner {
		display: none;
	}
	
	
	/*==================================================================*
	 *  [ addressBox ] 
	 *==================================================================*/
	
	.addressBox.spn h2 {
		position: relative;
		cursor: pointer;
	}
	.addressBox.spn h2:after {
		display: block;
		position: absolute;
		top: 50%;
		right: 15px;
		margin: -8px 0 0 0;
		content: url(/app/shared/svg/icon_show_white.svg);
	}
	.addressBox.spn h2:after path { fill: #fff; }
	.addressBox.spn h2.active:after {
		content: url(/app/shared/svg/icon_hide_white.svg);
	}
	
	.addressBox.spn .addressInner {
		display: none;
	}
	.addressBox.spn.open .addressInner {
		display: block;
	}
	
	
	/*==================================================================*
	 *  [ coupointBox / paymentBox ] 
	 *==================================================================*/
	
	.coupointBox .customerBox .active, 
	.paymentBox.spn .active {
		border-color: #e44800;
		background: #fff2ee;
	}
	
	
	/*==================================================================*
	 *  [ coupointBox ] 
	 *==================================================================*/
	
	.coupointBox .none dd {
		display: none;
	}
	
	/*==================================================================*
	 *  [ paymentBox ] 
	 *==================================================================*/
	
	.paymentBox.spn dd.paymentInner {
		display: none;
	}
	
	
	/*==================================================================*
	 *  [ couponLoginBox ] 2016.03 追記
	 *==================================================================*/
	
	.couponLoginBox {
		margin-top: -20px;
	}
	.couponLoginBox h1 {
		margin: 0 -10px 10px -10px;
	}
	
	.couponLoginBox .privilege {
		margin: 0 -10px 30px -10px;
		padding: 0 10px;
		background-color: transparent;
		color: #323568;
		font-size: 18px;
		font-size: 1.8rem;
	}
	.couponLoginBox .privilege:before, 
	.couponLoginBox .privilege:after {
			display: none;
	}
	.couponLoginBox .privilege span {
		margin-bottom: 10px;
		font-size: 14px;
		font-size: 1.4rem;
		line-height: 1.2;
	}
	.couponLoginBox .privilege b {
		display: block;
		position: relative;
		padding: 5px 20px;
		background-color: #323568;
		color: #fff;
		font-size: 20px;
		font-size: 2rem;
	}
	.couponLoginBox .privilege b:before, 
	.couponLoginBox .privilege b:after {
		display: block;
		position: absolute;
		top: 0;
		bottom: 0;
		width: 15px;
		height: 100%;
		background-size: 100% 100%;
		content: "";
	}
	.couponLoginBox .privilege b:before {
		left: 0;
		background-image: url(/app/shared/img/customer/bg_privilege_left.png);
	}
	.couponLoginBox .privilege b:after {
		right: 0;
		background-image: url(/app/shared/img/customer/bg_privilege_right.png);
	}

	.couponLoginBox .text {
		margin: 0 0 30px 0;
		font-size: 16px;
		font-size: 1.6rem;
	}
	
	
	/*==================================================================*
	 *  [ couponOutline | クーポン概要 ] 
	 *==================================================================*/
	
	.couponOutline .title {
		margin-bottom: 10px;
		font-size: 20px;
		font-size: 2rem;
	}

	/* [ リボン ] */
	.couponOutline .ribbon {
		display: inline-block;
		min-width: 80%;
		padding: 1px 20px;
		background-repeat: repeat-y, repeat-y;
		background-size: 5px, 5px;
	}
	.couponOutline dt {
		float: none;
		margin: 0 auto 5px auto;
		text-align: center;
	}
	.couponOutline dd {
		padding-left: 0;
		text-align: center;
	}
	
	/* [ テキスト ] */
	.couponOutline .text {
		font-size: 14px;
		font-size: 1.4rem;
	}
	.couponOutline .text a {
		margin-top: 5px;
	}
	
	/* [ ポイント ] */
	.couponOutline .point {
		margin-top: 20px;
	}
	.couponOutline .point li {
		display: block;
		width: 100%;
	}
	.couponOutline .point li + li {
		margin-top: 10px;
	}
	.couponOutline .point p:before, 
	.couponOutline .point p:after {
		display: none;
	}
	.couponOutline .point b {
		display: inline-block;
	}
	
	
	/*==================================================================*
	 *  [ customerBox ] 
	 *==================================================================*/
	
	.customerBox {
		border-top: none;
	}
	
	.customerBox dl {
		display: block;
		width: auto;
	}
	.customerBox dt,
	.customerBox dd {
		display: block;
		width: auto;
		padding: 0;
		border-bottom: none;
	}
	.customerBox dt {
		margin: 0 0 10px 0;
		border-bottom: 1px dotted #aeaeae;
		font-weight: bold;
	}
	.customerBox dt label {
		margin: 0;
		padding: 0 0 5px 0;
	}
	.customerBox dt label:before {
		content: "■";
	}
	.customerBox dt span {
		top: auto;
		right: 0;
		bottom: 3px;
		margin: 0;
		padding: 2px 3px;
		font-size: 10px;
		font-size: 1rem;
	}
	.customerBox dd {
		margin: 0 0 25px 0;
		border-left: none;
	}
	.customerBox dd .note {
		/* display: block; */
		margin: 5px 0 0 0;
		font-size: 10px;
		font-size: 1rem;
	}
	
	/*  [ sei / mei ]  */
	.customerBox .sei, 
	.customerBox .mei {
		width: 40%;
	}
	
	/*  [ zipcode ]  */
	.zipcode input {
		display: block;
		margin: 0 0 5px 0;
	}
	
	/*  [ number ]  */
	.customerBox .number .size20 {
		width: 24%;
	}
	.customerBox .number i + .size20 {
		margin: 0 0 0 1%;
	}
	.customerBox .number i {
		display: none;
	}
	
	/*  [ carrier / specified ]  */
	.customerBox .carrier dd:after, 
	.customerBox .specified dd:after {
		display: block;
		clear: both;
		content: "";
	}
	.customerBox .carrier dd strong, 
	.customerBox .carrier dd i, 
	.customerBox .carrier dd > a, 
	.customerBox .specified dd strong, 
	.customerBox .specified dd i {
		display: block;
		margin: 0;
	}
	.customerBox .carrier dd strong, 
	.customerBox .specified dd strong {
		float: left;
	}
	.customerBox .specified dd strong {
		margin: 0 0 15px 0;
	}
	.customerBox .carrier dd i, 
	.customerBox .specified dd i {
		float: right;
	}
	.customerBox .carrier dd > a {
		float: right;
		clear: both;
		margin: 5px 0 0 0;
	}
	.customerBox .specified dd p {
		clear: both;
	}
	
	
	/*==================================================================*
	 *  [ notArea ]
	 *==================================================================*/
	
	.notArea {
		font-size: 11px;
		font-size: 1.1rem;
		line-height: 1.2;
	}
	
	
	/*==================================================================*
	 *  [ customerBox.login / customerBox.first ] 
	 *==================================================================*/
	
	.customerBox.login dt, 
	.customerBox.first dt {
		display: none;
	}
	
	.customerBox.login h3, 
	.customerBox.first h3 {
		margin: 0 0 15px 0;
		padding: 0;
		background: none;
		color: #e44800;
		font-size: 14px;
		font-size: 1.4rem;
	}
	
	
	/*==================================================================*
	 *  [ customerBox.login ] 
	 *==================================================================*/
	
	.customerBox.login dd {
		padding: 0 10px;
	}
	.customerBox.login dd .note {
		font-size: 11px;
		font-size: 1.1rem;
	}
	
	
	/*==================================================================*
	 *  [ customerBox.first ] 
	 *==================================================================*/
	
	.customerBox.first dd {
		margin: 0 -10px 20px -10px;
		padding: 0 20px 20px 20px;
		border-bottom: 1px solid #909090;
	}
	
	.customerBox.first hr {
		margin: 15px 0;
	}
	
	
	/*==================================================================*
	 *  [ customerBox.address / customerBox.coupoint 
	 *     / customerBox.payment / customerBox.completion
	 *     / customerBox.address ]
	 *==================================================================*/
	
	.customerBox.address > dl, 
	.customerBox.coupoint > dl, 
	.customerBox.payment > dl, 
	.customerBox.completion > dl, 
	.customerBox.addresslist > dl {
		border: 1px solid #aeaeae;
	}
	.customerBox.address > dl + dl, 
	.customerBox.coupoint > dl + dl, 
	.customerBox.payment > dl + dl, 
	.customerBox.completion > dl + dl, 
	.customerBox.addresslist > dl + dl {
		margin: 15px 0 0 0;
	}
	.customerBox.address dt, 
	.customerBox.coupoint dt, 
	.customerBox.payment dt, 
	.customerBox.completion dt, 
	.customerBox.addresslist dt {
		margin: 0;
		border: none;
		font-size: 13px;
		font-size: 1.3rem;
	}
	.customerBox.address dd, 
	.customerBox.coupoint dd, 
	.customerBox.payment dd, 
	.customerBox.completion dd, 
	.customerBox.addresslist dd {
		margin: 0;
		padding: 10px;
		border-top: 1px dotted #aeaeae;
	}
	
	.customerBox.card .example div {
		max-width: 100%;
	}
	
	
	/*==================================================================*
	 *  [ customerBox.address / customerBox.addresslist ] 
	 *==================================================================*/
	
	.customerBox.address > dl, 
	.customerBox.addresslist > dl {
		position: relative;
	}
	.customerBox.address dt, 
	.customerBox.addresslist dt {
		padding: 10px;
	}
	.customerBox.address dd, 
	.customerBox.addresslist dd {
		position: static;
	}
	
	.customerBox.address dd p, 
	.customerBox.addresslist dd p {
		padding: 0;
	}
	.customerBox.address dd strong, 
	.customerBox.addresslist dd strong {
		font-weight: normal;
	}
	
	.customerBox.address .time i, 
	.customerBox.addresslist .time i {
		display: block;
		width: 168px;
		margin: 0;
	}
	.customerBox.address .time i + i, 
	.customerBox.addresslist .time i + i {
		margin: 5px 0 0 0;
	}
	
	.customerBox.address .editButton, 
	.customerBox.addresslist .editButton {
		top: 5px;
		right: 5px;
		padding: 2px 5px;
		border: none;
		border-radius: 0;
		background: #dfdfdf;
		font-size: 11px;
		font-size: 1.1rem;
	}
	.customerBox.address .editButton:hover, 
	.customerBox.addresslist .editButton:hover {
		background: #aeaeae;
	}
	.customerBox.address .editButton:before, 
	.customerBox.addresslist .editButton:before {
		display: inline-block;
		margin: 0 5px 0 0;
		vertical-align: text-top;
		content: url(/app/shared/svg/icon_edit.svg);
	}
	.customerBox.address .editButton:after, 
	.customerBox.addresslist .editButton:after {
		display: none;
	}
	
	
	/*==================================================================*
	 *  [ customerBox.address ] 
	 *==================================================================*/
	
	.customerBox.address .time {
		display: inline-block;
		margin: 0;
	}
	
	.customerBox.address .sendButton {
		position: absolute;
		right: 10px;
		bottom: 10px;
		width: auto;
		min-width: 0;
		font-size: 12px;
		font-size: 1.2rem;
	}
	
	
	/*==================================================================*
	 *  [ customerBox.addresslist ] 
	 *==================================================================*/
	
	.customerBox.addresslist dd {
		padding: 10px 10px 40px 10px;
	}
	
	.customerBox.addresslist .deleteButton {
		right: 10px;
		bottom: 10px;
	}
	
	
	/*==================================================================*
	 *  [ customerBox.coupoint ] 
	 *==================================================================*/
	
	.customerBox.coupoint dt {
		border: none;
	}
	
	
	/*==================================================================*
	 *  [ customerBox.confirm ] 
	 *==================================================================*/
	
	.customerBox.confirm > dl {
		position: relative;
	}
	.customerBox.confirm dt {
		font-size: 13px;
		font-size: 1.3rem;
		line-height: 1.8;
	}
	.customerBox.confirm dd, 
	.customerBox.confirm dd.nobutton {
		position: static;
		padding: 0;
	}
	.customerBox.confirm dd dl + dl {
		margin: 15px 0 0 0;
	}
	.customerBox.confirm dd dt {
		margin: 0 0 5px 0;
		font-size: 100%;
	}
	.customerBox.confirm dd dt:before {
		content: "[";
	}
	.customerBox.confirm dd dt:after {
		content: "]";
	}
	.customerBox.confirm dd dd {
		margin: 0;
	}
	.customerBox.confirm dd dd strong {
		font-size: 13px;
		font-size: 1.3rem;
		font-weight: normal;
	}
	
	.customerBox.confirm .changeButton {
		position: absolute;
		min-width: 0;
		margin: 0;
		padding: 2px 5px;
		border: none;
		border-radius: 0;
		background: #dfdfdf;
		font-size: 11px;
		font-size: 1.1rem;
	}
	.customerBox.confirm .changeButton:hover {
		background: #aeaeae;
	}
	.customerBox.confirm .changeButton:before {
		display: inline-block;
		margin: 0 5px 0 0;
		vertical-align: text-top;
		content: url(/app/shared/svg/icon_edit.svg);
	}
	.customerBox.confirm .changeButton:after {
		display: none;
	}
	.customerBox.confirm .changeButton span {
		display: none;
	}
	
	
	/*==================================================================*
	 *  [ customerBox.confirm2column ] 
	 *==================================================================*/
	
	.customerBox.confirm2column {
		margin: -10px 0 0 0;
	}
	.customerBox.confirm2column dl {
		display: table;
		width: 100%;
	}
	.customerBox.confirm2column dt, 
	.customerBox.confirm2column dd {
		display: table-cell;
		padding: 10px 0 7px 0;
		border-bottom: 1px dotted #aeaeae;
		vertical-align: middle;
	}
	.customerBox.confirm2column dt {
		width: 30%;
	}
	.customerBox.confirm2column dt label {
		padding: 0;
	}
	
	
	/*==================================================================*
	 *  [ customerBox.card ] 
	 *==================================================================*/
	
	.customerBox.card .select li {
		width: 25%;
	}
	
	
	/*==================================================================*
	 *  [ customerBox.completion ] 
	 *==================================================================*/
	
	.customerBox.completion {
		padding: 0;
		background: none;
	}
	
	.customerBox.completion dl {
		text-align: center;
	}
	.customerBox.completion dl:first-child {
		border-style: solid;
	}
	.customerBox.completion dt {
		padding: 10px;
	}
	.customerBox.completion dd {
		padding: 30px 0;
		font-size: 13px;
		font-size: 1.3rem;
	}
	
	
	/*==================================================================*
	 *  [ customerBox.magazine ] 
	 *==================================================================*/
	
	.customerBox.magazine .select label strong {
		margin: 0;
	}
	.customerBox.magazine .select label br, 
	.customerBox.magazine .select label span {
		display: none;
	}
	
	
	/*==================================================================*
	 *  [ customerBox.error ] 
	 *==================================================================*/
	
	.customerBox .error dd {
		background: none;
	}
	
	.errorText {
		font-size: 12px;
		font-size: 1.2rem;
	}
	
	
	/*==================================================================*
	 *  [ customerBox empty / cannot ] 
	 *==================================================================*/
	
	.customerBox .empty {
		display: none;
	}
	
	.customerBox .cannot dt {
		padding: 10px;
	}
	
	.coupointBox .cannot dt, 
	.paymentBox .cannot dt {
		padding: 0;
	}
	
	
	/*==================================================================*
	 *  [ totalBox ] 
	 *==================================================================*/
	
	.totalBox {
		margin: 25px 0;
		font-size: 11px;
		font-size: 1.1rem;
	}
	
	.totalBox dl {
		border: 1px solid #7e7e7e;
	}
	.totalBox dl + dl {
		margin-left: 20px;
	}
	.totalBox dl + dl:before {
		top: 30%;
		left: -22px;
		color: #7e7e7e;
		font-size: 20px;
		font-weight: bold;
	}
	.totalBox strong {
		font-size: 13px;
		font-size: 1.3rem;
		font-weight: normal;
	}
	.totalBox dt {
		padding: 5px;
		background: #7e7e7e;
		color: #fff;
		font-size: 11px;
		font-size: 1.1rem;
	}
	.totalBox dt span {
		display: none;
	}
	.totalBox dd {
		padding: 10px 5px;
		font-weight: normal;
	}
	
	.totalBox .total {
		display: table;
		margin: 5px auto;
		padding: 0;
	}
	.totalBox .total:before {
		content: "";
	}
	.totalBox .total dt, 
	.totalBox .total dd {
		display: table-cell;
	}
	.totalBox .total dt {
		padding: 5px;
		background: #e44800;
	}
	.totalBox .total dd {
		padding: 15px 10px;
		background: #fff2ee;
	}
	.totalBox .total dd strong {
		font-size: 20px;
		font-size: 2rem;
	}
	
	
	/*==================================================================*
	 *  [ confirmBox ] 
	 *==================================================================*/
	
	.confirmBox {
		padding: 0;
		background: none;
	}
	
	.confirmBox .no, 
	.confirmBox .name, 
	.confirmBox .size, 
	.confirmBox .price, 
	.confirmBox .quantity, 
	.confirmBox .subtotal, 
	.confirmBox .point { width: auto; }
	
	.confirmBox ul {
		display: none;
	}
	
	.confirmBox ol {
		color: #666;
		border-top: 1px dotted #909090;
	}
	.confirmBox ol li {
		display: block;
		padding: 10px 0 15px 0;
		border-bottom: 1px dotted #909090;
	}
	.confirmBox ol li + li {
		margin: 0;
	}
	.confirmBox ol .no {
			display: none;
	}
	.confirmBox ol .name {
		display: table;
		margin: 0 0 10px 0;
		border-left: none;
	}
	.confirmBox ol dl {
		display: block;
		margin: 3px 10px 0 65px;
		padding: 0;
		border: none;
		text-align: left;
	}
	.confirmBox ol dt, 
	.confirmBox ol dd {
		display: inline-block;
	}
	/* [ 2016.03 追記 ] */
	.confirmBox .price.couponPrice span {
		display: inline-block;
		margin-bottom: 0;
	}
	.confirmBox ol .empty {
		display: none;
	}
	.confirmBox ol .subtotal, 
	.confirmBox ol .point {
		display: inline-block;
		color: #000;
	}
	.confirmBox ol .subtotal {
		margin-right: 0;
	}
	.confirmBox ol .subtotal dd {
		font-size: 14px;
		font-size: 1.4rem;
	}
	.confirmBox ol .point {
		margin-left: 0;
	}
	.confirmBox ol .point dt {
		display: none;
	}
	.confirmBox ol .point dd {
		font-size: 11px;
		font-size: 1.1rem;
	}
	.confirmBox ol .point dd:before {
		content: "（";
	}
	.confirmBox ol .point dd:after {
		content: "獲得）";
	}
	
	.confirmBox .result {
		width: 100%;
		padding: 1px 10px 15px 10px;
		background: #eee;
	}
	.confirmBox .result dt, 
	.confirmBox .result dd {
		margin: 5px 0 0 0;
		padding: 5px 5px 0 5px;
		border-top: 1px dotted #999da2;
	}
	.confirmBox .result dt:first-child, 
	.confirmBox .result dt:first-child +  dd {
		border-top: none;
	}
	.confirmBox .result dt {
		text-align: left;
	}
	.confirmBox .result .total {
		margin: 5px 0 0 0;
		padding: 10px 5px 0 5px;
	}
	
	
	/*==================================================================*
	 *  [ pasBatteryConfirm ] 
	 *==================================================================*/
	
	.pasBatteryConfirm dl {
		float: none;
	}
	.pasBatteryConfirm dt {
		width: 70%;
		text-align: left;
	}
	.pasBatteryConfirm dd {
		width: 30%;
	}
	
	.pasBatteryConfirm p {
		padding: 5px 0 0 0;
		text-align: left;
	}
	
	
	/*==================================================================*
	 *  [ copyrightBox ] 
	 *==================================================================*/
	
	.copyrightBox {
		margin: 0 -10px 50px -10px !important;
		padding: 0 10px;
	}
	
	
	/*==================================================================*
	 *  [ buttonBox ] 
	 *==================================================================*/
	
	.ypointAmount li, 
	.ypointAmount li label {
		display: block;
		width: 100% !important;
	}
	
	
	/*==================================================================*
	 *  [ buttonBox ] 
	 *==================================================================*/
	
	.buttonBox p {
		text-align: center;
	}
	
	.buttonBox > .sendButton {
		float: none;
		margin: 0 0 50px 0;
	}
	section .buttonBox > .sendButton {
		margin: 0;
	}
	
	.buttonBox.center li {
		float: none;
		width: 100%;
		padding: 0;
	}
	.buttonBox.center li + li {
		margin: 15px 0 0 0;
	}
	
	.buttonBox.cancel {
		text-align: center !important;
	}
	.buttonBox.cancel .cancelButton {
		margin: 0 auto 15px auto;
		display: block;
		float: none;
	}
	.buttonBox.cancel .prevLink {
		float: none;
	}
	
	
	/*==================================================================*
	 *  [ orderBox ] 
	 *==================================================================*/

	.orderBox {
		min-height: 0;
		margin: 0 0 15px 0;
		padding: 10px;
	}
	
	.orderBox li .id {
		font-size: 13px;
		font-size: 1.3rem;
	}
	
	.orderBox .printButton {
		display: none;
	}

	.orderBox .downloadButton {
		display: none;
	}
	
	
	/*==================================================================*
	 *  [ securityBox ] 
	 *==================================================================*/
	
	.securityBox li {
		padding: 10px 0;
	}
	
	
	/*======================================================================*
	 *  [ pageNav ] 
	 *======================================================================*/
	
	.pageNav {
		position: relative;
		padding: 0 5.5em;
		text-align: center;
	}
	.pageNav .prev, 
	.pageNav .next {
		position: absolute;
		top: 0;
	}
	.pageNav .prev { left: 0; }
	.pageNav .next { right: 0; }
	
	
	/*==================================================================*
	 *  [ modalWin ] 2023.12 追記
	 *==================================================================*/

	/* [ 3Dセキュア同意 ] */
	#consentWin {
		max-width: 800px;
		padding: 0;
		font-weight: 500;
	}
	#consentWin .title {
		padding: 10px;
		font-size: 1.6rem;
	}
	#consentWin .inner { padding: 10px; }
	#consentWin .inner > p { font-size: 1.3rem; }
	#consentWin .section {
		margin: 10px 0;
		padding-top: 10px;
		font-size: 1.2rem;
	}
	#consentWin .section h3 {
		margin-bottom: 10px;
		font-size: 1.4rem;
	}
	#consentWin .buttonBox {
		display: block;
		margin: 20px 0 10px;
	}
	#consentWin .agreeBtn,
	#consentWin .disagreeBtn {
		width: 100%;
		margin: 0 auto;
	}
	#consentWin .disagreeBtn { margin-top: 10px; }
	#consentWin .agreeBtn p,
	#consentWin .disagreeBtn p {
		height: 40px;
		font-size: 1.4rem;
	}
	#consentWin .agreeBtn span,
	#consentWin .disagreeBtn span { font-size: 1.1rem; }
	
	
	/*==================================================================*
	 *  [ pageTop ] 
	 *==================================================================*/
	
	.pageTop {
		right: 10px;
	}
	
}


/*======================================================================*
 *  [ Media Queries 375 ] 
 *======================================================================*/

@media screen and (max-width: 375px) {
	
	
	/*==================================================================*
	 *  [ customerBox.address ] 
	 *==================================================================*/
	
	.customerBox.address .sendButton {
		position: relative;
		right: 0;
		bottom: 0;
		width: 100%;
		margin: 10px 0 0 0;
		padding: 15px 10px;
	}
	
	
	/*==================================================================*
	 *  [ orderBox ] 
	 *==================================================================*/
	
	.orderBox li {
		display: block;
	}
	.orderBox li + li {
		margin: 10px 0 0 0;
	}
	.orderBox li strong {
		display: inline-block;
	}
	.orderBox li p {
		display: block;
		margin: 2px 0 0 20px;
	}
	
}