@charset "UTF-8";

section#cart > .inner {
	overflow : hidden;
	margin : 0 auto;
	padding : 0 20px 40px;
}
section#cart > .inner > .content {
	margin-bottom : 60px;
}
#cart h1 {
	font-size : 1.8em;
	margin-bottom : 24px;
	padding-bottom : 24px;
	border-bottom : 1px dotted #000000;
}
#cart #error {
	display : flex;
	flex-direction : column;
	align-items : center;
	margin-bottom : 40px;
	padding : 40px 0;
	color : #cc0000;
	border : 6px solid #ffe9e9;
}
#cart #error > li:not(:last-child) {
	margin-bottom : 0.5em;
}

.flow {
	display : flex;
	margin-bottom : 32px;
}
.flow > li {
	display : flex;
	line-height : 1.45;
	flex-direction : column;
	flex-grow : 1;
	justify-content : center;
	align-items : center;
	padding : 16px;
	background-color : #cccccc;
}
.flow > li.current {
	background-color : #ff9900;
}
.flow > li:not(:last-child) {
	position : relative;
	margin-right : 40px;
}
.flow > li:not(:last-child)::after {
	position : absolute;
	top : 50%;
	right : -25px;
	content : ">";
	transform : translateX(-50%) translateY(-50%);
}
.flow > li span {
	font-weight : bold;
	margin-bottom : 0.5em;
}

#cartItems {
	margin-bottom : 40px;
}
#cartItems .notfound {
	margin-bottom : 40px;
	padding : 60px 0;
	text-align : center;
	border : 1px solid #cccccc;
}

#itemList {
	margin-bottom : 40px;
}
#itemList > li {
	display : grid;
	grid-template-columns : 10em 1fr 10em 12em 12em;
	grid-gap : 16px;
	padding : 24px 16px;
	border-bottom : 1px dotted #000000;
}
#itemList > li:first-child {
	border-top : 1px dotted #000000;
}
#itemList > li > div {
	display : flex;
	align-items : center;
}

#itemList > li.listhead {
	font-weight : bold;
	background-color : #f2f2f2;
}

#itemList > li.listhead > div {
	justify-content : center;
}
#itemList > li.listbody .unitprice {
	justify-content : flex-end;
}
#itemList > li.listbody .amount {
	justify-content : flex-end;
}
#itemList > li.listbody .amount input[type="number"] {
	padding : 2px;
	text-align : center;
	border : 1px solid #dddddd;
	border-radius : 4px;
}
#itemList > li.listbody .amount input[type="submit"] {
	font-size : 0.825em;
	padding : 6px;
}
#itemList > li.listbody .price input[type="submit"] {
	font-size : 0.825em;
	padding : 6px;
	color : #ffffff;
	border : none;
	border-radius : 4px;
	background-color : #444444;
}
#itemList > li.listbody > .price,
#itemList > li.listfooter > .price {
	display : grid;
	grid-template-columns : 8em 2.5em;
	grid-gap : 16px;
	justify-content : flex-end;
	text-align : right;
}
#itemList > li.listfooter {
	display : grid;
	grid-template-columns : 1fr 12em 12em;
	background-color : #fafafa;
}
#itemList > li#total.listfooter {
	font-size : 1.125em;
	font-weight : bold;
	background-color : #f2f2f2;
}

#cartNav {
	display : flex;
	justify-content : center;
	align-items : center;
}
#cartNav > * {
	width : 20%;
	min-width : 20em;
	margin : 0 8px;
}
#cartNav form button {
	width : 100%;
	cursor : pointer;
}
#cartNav .linkBtn[disabled="disabled"] {
	pointer-events : none;
	background-color : #cccccc;
}
#cart .attention {
	line-height : 1.45;
	margin-bottom : 40px;
	padding : 24px;
	border : 5px solid #eeeeee;
}
#cart .attention > li:not(:last-child) {
	margin-bottom : 1em;
}


#customer {
	margin-bottom : 60px;
}
#customer h3 {
	font-size : 1.25em;
	font-weight : bold;
	margin-bottom : 0.785em;
}
#customer .leadtext {
	font-weight : bold;
	margin-bottom : 0.785em;
}
#customer ul {
	border-top : 1px dotted #000000;
}
#customer ul > li {
	display : grid;
	grid-template-columns : 14em 1fr;
	grid-gap : 16px;
	padding : 1em;
	border-bottom : 1px dotted #000000;
}
#customer ul > li h4 {
	display : flex;
	font-weight : bold;
	justify-content : center;
	align-items : center;
}
#customer ul > li h4 span {
	color : #cc0000;
}
#customer .content > p:not(:last-child) {
	margin-bottom : 0.75em;
}
#customer .content .caption {
	font-size : 0.785em;
	color : #777777;
}

#delivery {
	margin-bottom : 40px;
}
#delivery h3 {
	font-size : 1.25em;
	font-weight : bold;
	margin-bottom : 0.785em;
}
#delivery .leadtext {
	font-weight : bold;
	margin-bottom : 0.785em;
}
#delivery ul {
	border-top : 1px dotted #000000;
}
#delivery ul > li {
	display : grid;
	grid-template-columns : 14em 1fr;
	grid-gap : 16px;
	padding : 1em;
	border-bottom : 1px dotted #000000;
}
#delivery ul > li h4 {
	display : flex;
	font-weight : bold;
	justify-content : center;
	align-items : center;
}
#delivery ul > li h4 span {
	color : #cc0000;
}
#delivery .content > p:not(:last-child) {
	margin-bottom : 0.75em;
}


#agreement {
	display : grid;
	grid-template-columns : 14em 1fr;
	grid-gap : 16px;
	margin-bottom : 40px;
	padding : 16px ;
	border-top : 1px dotted #000000;
	border-bottom : 1px dotted #000000;
}
#agreement h4 {
	display : flex;
	font-weight : bold;
	justify-content : center;
	align-items : center;
}
#agreement h4 span {
	color : #cc0000;
}
#agreement label {
	display : block;
	margin-bottom : 1em;
	padding : 1.5em;
	border : 1px solid #8cbad0;
	background-color : #d7effb;
}
#agreement .content > p:not(:last-child) {
	margin-bottom : 1em;
}
#agreement .content .caption {
	font-size : 0.785em;
	color : #777777;
}

#complete {
	padding : 40px;
	border : 4px solid #eeeeee;
}
#complete h4 {
	font-size : 1.125em;
	font-weight : bold;
	margin-bottom : 1em;
}
#complete > p:not(:last-child) {
	margin-bottom : 1em;
}


@media screen and (max-width: 767px) {
	.flow {
		flex-direction : column;
	}
	.flow > li {
		display : block;
		padding : 0.725em;
		text-align : center;
	}
	.flow > li br {
		display : none;
	}
	.flow > li span {
		margin : 0 1em 0 0;
	}
	.flow > li:not(:last-child) {
		margin : 0 0 40px 0;
	}
	.flow > li:not(:last-child)::after {
		position : absolute;
		top : auto;
		right : auto;
		bottom : -45px;
		left : 50%;
		content : "▼";
		transform : translateX(-50%) translateY(-50%);
	}

	#itemList > li.listhead {
		display : none;
	}
	#itemList {
		font-size : 0.725em;
		border-top : 1px dotted #000000;
	}
	#itemList > li.listbody {
		grid-template-columns : 1fr 10em;
		grid-gap : 0 16px;
		padding : 12px 8px;
	}
	#itemList > li.listbody > *:nth-child(1) {
		grid-column : 1/2;
		grid-row : 1/2;
	}
	#itemList > li.listbody > *:nth-child(2) {
		grid-column : 1/2;
		grid-row : 2/3;
	}
	#itemList > li.listbody > *:nth-child(3) {
		grid-column : 2/3;
		grid-row : 1/3;
	}
	#itemList > li.listbody > *:nth-child(4) {
		grid-column : 1/2;
		grid-row : 3/4;
	}
	#itemList > li.listbody > *:nth-child(5) {
		grid-column : 2/3;
		grid-row : 3/4;
	}
	#itemList > li.listbody > .name {
		margin-bottom : 8px;
	}
	#itemList > li.listbody > .unitprice {
		align-items : flex-end;
		margin-bottom : 8px;
	}
	#itemList > li.listbody > .amount {
		justify-content : flex-start;
	}
	#itemList > li.listbody > .price {
		display : flex;
		justify-content : flex-end;
	}
	#itemList > li.listbody > .price > *:first-child {
		display : none;
	}
	#itemList > li.listfooter {
		grid-template-columns : 1fr auto 10em;
		grid-gap : 0 16px;
		padding : 12px 8px;
	}
	#itemList > li.listfooter > .price {
		grid-template-columns : 1fr;
	}
	#itemList > li#total.listfooter {
		font-size : 1em;
	}

	#cartNav {
		display : block;
	}
	#cartNav > * {
		width : 100%;
		margin : 0;
	}
	#cartNav > *:not(:last-child) {
		margin-bottom : 16px;
	}

	#customer h3,
	#delivery h3 {
		font-size : 1em;
	}
	#customer ul > li,
	#delivery ul > li {
		display : block;
		padding : 1em 0;
	}
	#customer ul > li h4,
	#delivery ul > li h4 {
		font-size : 0.785em;
		justify-content : flex-start;
		margin-bottom : 1em;
	}
	#agreement {
		display : block;
		padding : 1em 0;
	}
	#agreement h4 {
		font-size : 0.785em;
		justify-content : flex-start;
		margin-bottom : 1em;
	}
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
}
@media screen and (min-width: 1025px) and (max-width: 1439px) {
}
@media screen and (min-width: 1440px) and (max-width: 1919px) {
}
@media screen and (min-width: 1920px) {
}