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


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

.pageTitle h1,
.pageTitle p {
	display: inline-block;
}
.pageTitle h1 {
	margin: 0 15px 5px 0;
}
.pageTitle p {
	font-size: 12px;
	font-size: 1.2rem;
}
.pageTitle p em {
	color: #ff0000;
	font-style: normal;
}


/*======================================================================*
 *  [ cartWrap ]
 *======================================================================*/

.cartWrap {
	display: table;
	width: 100%;
	margin: 0 0 30px 0;
	box-sizing: border-box;
}
.cartWrap > div {
	display: table-cell;
	vertical-align: top;
}


/*======================================================================*
 *  [ cartBox ]
 *======================================================================*/

.cartBox {
	width: auto;
	padding: 0 20px 0 0;
}
.cartBox ul {
	position: relative;
	border-top: 1px dotted #909090;
	color: #666;
}
.cartBox li {
	position: relative;
	list-style-type: none;
	padding: 20px 105px 20px 10px;
	border-bottom: 1px dotted #909090;
}

.cartBox .img,
.cartBox .summary {
	float: left;
	box-sizing: border-box;
}
.cartBox .img {
	width: 25%;
	padding: 0 10px 0 0;
}
.cartBox .img img {
	width: 100%;
}
.cartBox .summary {
	width: 75%;
}

.cartBox .title {
	font-size: 11px;
	font-size: 1.1rem;
}
.cartBox .title a {
	display: inline-block;
	margin: 5px 0 0 0;
	color: #000;
	font-size: 13px;
	font-size: 1.3rem;
	font-weight: bold;
	line-height: 1.2;
	text-decoration: underline;
}
.cartBox .title a:hover {
	text-decoration: none;
}

.cartBox .notes {
	margin: 5px 0 0 0;
	color: #5576a5;
}

.cartBox .icon i {
	display: inline-block;
	margin: 5px 5px 0 0;
	padding: 2px;
	border: 1px solid #000;
	border-radius: 2px;
	color: #000;
	font-size: 10px;
	font-size: 1rem;
	font-style: normal;
}

.cartBox dl {
	margin: 15px 0 0 0;
	padding: 0 0 0 4em;
}
.cartBox dt {
	float: left;
	clear: both;
	margin: 0 0 5px -4em;
}
.cartBox dd {
	margin: 0 0 5px 0;
}
/* [ 2016.03 追記 ] */
.cartBox dd.couponPrice {
	display: inline-block;
	margin-left: -4em;
	padding: 3px;
	border: 1px solid #e44800;
	color: #e44800;
	line-height: 1.2;
}
.cartBox dd.couponPrice p {
	display: inline-block;
}

.cartBox .quantity {
	position: absolute;
	top: 50%;
	right: 45px;
	margin: 0;
	padding: 0;
}
.cartBox .quantity dt,
.cartBox .quantity dd {
	margin: 0;
	float: none;
}
.cartBox .quantity dt {
	margin: -30px 0 5px 0;
	text-align: center;
}
.cartBox .quantity dt span {
	display: none;
}
.cartBox .quantity .customSelect {
	width: 50px;
	padding: 5px 0;
	line-height: 1;
}

/* [ 2020.02 追記 ] */
.couponList {
	list-style: none;
	margin-top: 15px;
	border: none !important;
	color: #e64800 !important;
	font-size: 1.2rem;
}
.couponList li {
	margin-top: 10px;
	padding: 10px;
	border: none;
	border-radius: 5px;
	background: #f5f5f5;
}
.couponList li > * {
	display: block;
}
.couponList li .off {
	margin-top: 5px;
}
.couponList li .off b {
	font-size: 1.6rem;
}
.couponList li .off span {
	font-size: 1.2rem;
	font-weight: normal;
}

.cartBox .deleteButton {
	position: absolute;
	top: 50%;
	right: 10px;
	margin: -12px 0 0 0;
}


/*======================================================================*
 *  [ subtotalBox ]
 *======================================================================*/

.subtotalBox {
	width: 315px;
}
.subtotalBox .inner {
	padding: 20px 20px 30px 20px;
	background: #eee;
}

.subtotalBox a {
	color: #083f99;
	text-decoration: underline;
}
.subtotalBox a:hover {
	text-decoration: none;
}
.subtotalBox .link {
	float: right;
	margin: 10px 0 0 0;
	font-size: 12px;
	font-size: 1.2rem;
}
.subtotalBox .link:after {
	display: inline-block;
	width: 5px;
	height: 5px;
	margin: -2px 2px 0 2px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	border-top: 2px solid #969696;
	border-right: 2px solid #969696;
	content: "";
}

/* [ 2019.09 追記 ] */
.subtotalBox .taxLink {
	clear: both;
	padding-top: 20px;
}
.subtotalBox .taxLink a {
	display: block;
	padding: 10px;
	border: 5px solid #FFE9E9;
	text-align: center;
	font-size: 1.1rem;
	line-height: 1.4;
	text-decoration: none;
}
.subtotalBox .taxLink a b {
	display: block;
	font-size: 1.4rem;
	text-decoration: underline;
}
.subtotalBox .taxLink a:hover,
.subtotalBox .taxLink a:active {
	border-color: #FFE9E9 !important;
}
.subtotalBox .taxLink a:hover b,
.subtotalBox .taxLink a:active b {
	text-decoration: none;
}

/* [ 2019.10 追記 ] */
.subtotalBox .spLink {
	clear: both;
	padding-top: 20px;
	text-align: center;
}

.subtotalBox .postageFree {
	margin: 0 0 30px 0;
	color: #ff0000;
	font-size: 14px;
	font-size: 1.4rem;
}
.subtotalBox .postageFree span {
	margin: 0 5px;
	font-size: 18px;
	font-size: 1.8rem;
}

.subtotalBox dt,
.subtotalBox dd {
	float: left;
	width: 50%;
	margin: 0 0 10px 0;
	text-align: right;
}
.subtotalBox dt {
	clear: both;
}
.subtotalBox dt span {
	display: inline-block;
	font-size: 11px;
	font-size: 1.1rem;
}

.subtotalBox .total {
	margin: 0 -10px;
	padding: 15px 10px;
	border-top: 1px solid #aeaeae;
}
.subtotalBox .total dt {
	font-size: 14px;
	font-size: 1.4rem
}
.subtotalBox .total dd {
	font-size: 13px;
	font-size: 1.3rem;
	font-weight: bold;
}
.subtotalBox .total dd strong {
	font-size: 20px;
	font-size: 2rem;
}

/* [ 2016.03 追記 ] */
.subtotalBox .couponAttention {
	position: relative;
	margin: 0 -10px 30px -10px;
	padding: 9px 9px 9px 39px;
	border: 1px solid #ff0000;
	color: #ff0000;
	line-height: 1.2;
}
.subtotalBox .couponAttention:before {
	position: absolute;
	top: 50%;
	left: 9px;
	margin-top: -9px;
	content: url(/app/shared/svg/icon_attention_red.svg);
}

/* [ 2020.02 追記 ] */
.couponText {
	position: relative;
	margin: 0 -10px 20px -10px;
	padding: 10px 10px 10px 50px;
	border: 1px solid #e60012;
	color: #e60012;
	line-height: 1.4;
}
.couponText::before {
	position: absolute;
	top: 50%;
	left: 15px;
	width: 19px;
	height: 16px;
	margin-top: -8px;
	content: url(/app/shared/svg/icon_attention_red.svg);
}

.subtotalBox .sendButton {
	min-width: 100%;
}

.subtotalBox .notes {
	margin: 10px 0 0 0;
	font-size: 13px;
	font-size: 1.3rem;
	line-height: 1.4;
	text-align: center;
}


/*======================================================================*
 *  [ pasBattery ]
 *======================================================================*/

.pasBattery {
	margin: 0 0 20px 0;
	padding: 20px 20px 15px 20px;
	background: #ffe9e9;
}
.pasBattery p {
	margin: 0 0 15px 0;
	font-weight: bold;
}
.pasBattery dt {
	width: 70%;
}
.pasBattery dt span {
	margin-top: 5px;
}
.pasBattery dd {
	width: 30%;
}
.pasBattery dd .customSelect {
	width: 50px;
	padding: 5px 0;
	line-height: 1;
	text-align: left;
}


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

.prevLink.small {
	margin: 0 0 100px 0;
}


/*======================================================================*
 *  [ relatedProduct ]
 *======================================================================*/

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

.relatedProduct h2 {
	margin: 0 0 15px 0;
	padding: 0 0 10px 0;
	border-bottom: 2px solid #eee;
	font-size: 15px;
	font-size: 1.5rem;
	color: #444;
}

.relatedProduct .inner {
	position: relative;
	padding: 0 20px;
}

.relatedProduct .item {
	margin: 0 5px;
}
.relatedProduct .item a {
	display: block;
	max-width: 120px;
	margin: 0 auto;
}
.relatedProduct .item p {
	margin: 5px 0 0 0;
}

.relatedProduct .owl-prev,
.relatedProduct .owl-next {
	position: absolute;
	top: 0;
	width: 20px;
	height: 120px;
}
.relatedProduct .owl-prev {
	left: -20px;
}
.relatedProduct .owl-next {
	right: -20px;
}
.relatedProduct .owl-prev:after,
.relatedProduct .owl-next:after {
	display: inline-block;
	width: 0;
	height: 0;
	margin: 54px 0;
	border: 6px solid transparent;
	content: "";
}
.relatedProduct .owl-prev:after {
	border-right: 8px solid #909090;
}
.relatedProduct .owl-next:after {
	margin-left: 6px;
	border-left: 8px solid #909090;
}

/* [ preloading images ] */
.relatedProduct .owl-item.loading{
	min-height: 150px;
	background: url(/app/shared/js/plugin/owl-carousel/AjaxLoader.gif) no-repeat center center
}

/*======================================================================*
 *  [ cartGuide ]
 *======================================================================*/

.cartGuide {
	display: table;
	width: 100%;
	margin: 0 0 30px 0;
	border: 1px dotted #909090;
	box-sizing: border-box;
}
.cartGuide h2,
.cartGuide ul {
	display: table-cell;
	vertical-align: middle;
}
.cartGuide h2 {
	width: 20%;
	color: #575757;
	font-size: 14px;
	font-size: 1.4rem;
	line-height: 1.2;
	text-align: center;
}
.cartGuide ul {
	padding: 20px;
	border-left: 1px dotted #909090;
}
.cartGuide li {
	list-style-type: none;
	float: left;
	width: 33.33%;
}
.cartGuide li:nth-child(3n+1) {
	clear: both;
	width: 40%;
}
.cartGuide li:nth-child(3n) {
	width: 26.66%;
}
.cartGuide a {
	display: block;
	padding: 5px 15px;
}
.cartGuide a:before {
	display: inline-block;
	width: 0;
	height: 0;
	margin: 0 5px 1px -15px;
	border: 3px solid transparent;
	border-left: 5px solid #909090;
	content: "";
}


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

.cartWrap:after,
.cartGuide ul:after {
	display: block;
	clear: both;
	content: "";
}


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

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

	/*==================================================================*
	 *  [ cartWrap ]
	 *==================================================================*/

	.cartWrap {
		padding: 0 10px;
	}


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

	.prevLink.small {
		margin: 0 10px 100px 10px;
	}


	/*==================================================================*
	 *  [ cartAside ]
	 *==================================================================*/

	.cartAside {
		margin: 0 10px;
	}

}


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

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

	/*==================================================================*
	 *  [ cartWrap ]
	 *==================================================================*/

	.cartWrap ,
	.cartWrap > div {
		display: block;
		margin: 0 0 20px 0;
	}


	/*==================================================================*
	 *  [ cartBox ]
	 *==================================================================*/

	.cartBox {
		margin: 0 0 20px 0;
		padding: 0;
	}


	/*==================================================================*
	 *  [ subtotalBox ]
	 *==================================================================*/

	.subtotalBox {
		width: 100%;
	}


	/*======================================================================*
	 *  [ pasBattery ]
	 *======================================================================*/

	.pasBattery p {
		width: 50%;
		text-align: right;
	}
	.pasBattery dl {
		text-align: right;
	}
	.pasBattery dt,
	.pasBattery dd {
		display: inline-block !important;
		float: none;
		width: auto;
		vertical-align: middle;
	}
	.pasBattery dt {
		padding: 0 10px 0 0;
	}


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

	.prevLink.small {
		margin: 0 10px 50px 10px;
	}


	/*==================================================================*
	 *  [ cartGuide ]
	 *==================================================================*/

	.cartGuide,
	.cartGuide h2,
	.cartGuide ul {
		display: block;
	}
	.cartGuide h2 {
		width: auto;
		padding: 10px 20px;
		border-bottom: 1px dotted #909090;
	}
	.cartGuide h2 br {
		display: none;
	}
	.cartGuide ul {
		border: none;
	}
	.cartGuide li,
	.cartGuide li:nth-child(3n+1),
	.cartGuide li:nth-child(3n) {
		clear: none;
		width: 50%;
	}
	.cartGuide li:nth-child(2n+1) {
		clear: both;
	}

}


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

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

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

	.pageTitle {
		text-align: center;
	}
	.pageTitle h1 {
		display: block;
		margin: 0 0 25px 0;
	}
	.pageTitle p strong {
		font-size: 13px;
		font-size: 1.3;
	}
	.pageTitle p span {
		display: none;
	}
	.pageTitle p {
		font-size: 11px;
		font-size: 1.1rem;
	}


	/*==================================================================*
	 *  [ subtotalBox ]
	 *==================================================================*/

	.cartBox li {
		padding: 10px;
	}
	.cartBox .title { /* [ 2020.02 修正 ] */
		padding-right: 25px;
	}
	.cartBox .quantity {
		position: static;
		padding: 0 0 0 4em;
	}
	.cartBox .quantity dt {
		float: left;
		margin: 0 0 0 -4em;
		text-align: left;
	}
	.cartBox .quantity dt span {
		display: inline;
	}
	.cartBox .deleteButton { /* [ 2020.02 修正 ] */
		top: 20px;
		right: 5px;
	}

}


/*======================================================================*
 *  [ Media Queries 480 ]
 *======================================================================*/

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

	/*======================================================================*
	 *  [ pasBattery ]
	 *======================================================================*/

	.pasBattery p {
		width: 100%;
		text-align: left;
	}


	/*==================================================================*
	 *  [ cartGuide ]
	 *==================================================================*/

	.cartGuide li,
	.cartGuide li:nth-child(3n+1),
	.cartGuide li:nth-child(3n) {
		width: 100%;
	}

}