@charset "utf-8";
/* -----------------------------
cart.css
----------------------------- */
main article {
}

main .flow {
	width: 100%;
	max-width: 1200px;
	padding: 10px 0px;
	border-bottom: 1px dotted #CCCCCC;
}

main .flow ul {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: stretch;
	width: 100%;
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	font-weight: bold;
}

main .flow ul li:first-child:before {
	content: "";
	position: absolute;
	display: block;
	top: calc(1em);
	left: 12.5%;
	width: 75%;
	height: 5px;
	margin: auto;
	background-color: #666666;
	z-index: 3;
}

main .flow ul li {
	display: flex;
	flex-direction: column;
	flex-basis: 25%;
	flex-grow: 1;
	flex-shrink: 1;
	align-items: center;
	font-size: small;
	color: #666666;
	white-space: nowrap;
}

main .flow ul li span {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 2em;
	height: 2em;
	border-radius: 100%;
	background-color: #666666;
	font-size: medium;
	color: #FFFFFF;
	z-index: 5;
}

main .flow ul li.active {
	color: #FF6600;
}

main .flow ul li.active span {
	background-color: #FF6600;
}

main .form {
	width: 100%;
	max-width: 1200px;
	padding: 0px 5px;
}

main .form .info {
	margin: 0px;
	padding: 10px 0px;
	border-bottom: 1px dotted #CCCCCC;
	text-align: center;
}

main .form .cartList {
	margin: 0px;
	margin-bottom: 10px;
	padding: 0px;
	list-style-type: none;
}

main .form .cartList > li {
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 10px 0px;
	border-bottom: 1px dotted #CCCCCC;
}

main .form .cartList .remove {
	font-size: xx-large;
	font-weight: bold;
	text-align: center;
	color: #999999;
}

main .form .cartList .img {
	width: 80px;
	margin: 0px 10px;
}

main .form .cartList .img img {
	width: 100%;
	height: auto;
}

main .form .cartList .item {
	flex-grow: 1;
}

main .form .cartList .item dl {
	margin: 0px;
	padding: 0px;
	line-height: 120%;
}

main .form .cartList .item dl dt {
	margin: 0px;
	margin-bottom: 10px;
	padding: 0px;
	font-weight: bold;
	font-size: large;
}

main .form .cartList .item dl dd {
	margin: 0px;
	padding: 0px;
}

main .form .cartList .item dl dd.prc {
	font-weight: bold;
}

main .form .cartList .quantity {
}

main .form .cartList .quantity p {
	margin: 0px;
	margin-bottom: 5px;
	padding: 0px;
	text-align: center;
}

main .form .cartList .quantity ul {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}

main .form .cartList .quantity ul li {
}

main .form .cartList .quantity ul li:first-child {
	margin-right: 10px;
}

main .form .cartList .quantity ul li a,
main .form .cartList .quantity ul li span {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 30px;
	height: 30px;
	border-radius: 100%;
	border: 3px solid #000000;
	text-align: center;
	font-size: xx-large;
	font-weight: bold;
	line-height: 30px;
}

main .form .cartList .quantity ul li span {
	border-color: #CCCCCC;
	color: #AAAAAA;
}

main .form .total {
	margin-bottom: 20px;
}

main .form .total dl {
	margin: 0px;
	margin-bottom: 20px;
	padding: 0px;
	font-size: large;
	font-weight: bold;
	text-align: right;
}

main .form .total dl dt {
	display: inline-block;
	margin: 0px;
	padding: 0px;
}

main .form .total dl dd {
	display: inline-block;
	margin: 0px;
	padding: 0px;
	color: #FF6900;
}

main .form .total ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}

main .form .total ul li {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 20px;
}

main .form .total ul li a {
	display: block;
	width: 100%;
	max-width: 400px;
	margin: auto;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	line-height: 300%;
	color: #FFFFFF;
}

main .form .total ul li.step a {
	background:
		linear-gradient(
			to bottom,
			#FF6600 0%,
			#FF6600 50%,
			#CC6600 50%,
			#CC6600 100%
		);
}

main .form .total ul li.back a {
	background:
		linear-gradient(
			to bottom,
			#0066FF 0%,
			#0066FF 50%,
			#0033FF 50%,
			#0033FF 100%
		);
	color: #FFFFFF;
}

/* お客様情報 */
main .entry {
	width: 100%;
	max-width: 1200px;
	margin: 30px 0px;
}

main .entry table {
	width: 100%;
	margin-bottom: 20px;
}

main .entry th {
	padding: 3px;
	border: 1px solid #CCCCCC;
	background-color: #EEEEEE;
}

main .entry td {
	padding: 3px;
	border: 1px solid #CCCCCC;
}

main .entry span.required {
	margin-left: 10px;
	color: #FF0000;
}

/*main .entry .zip {
}*/

main .entry .zip .question-circle {
	display: none;
}

main .entry .zip a {
	display: none;
}

main .entry .zip-search {
	display: none;
}

main .entry #zip-search {
	margin: 5px 0px;
}

/*main .entry #zip-search button {
	padding: 5px 20px;
	border: 1px solid #CCCCCC;
	border-radius: 5px;
	background:
		linear-gradient(
			to bottom,
			#CCCCCC 0%,
			#EEEEEE 100%
		);
}*/

main .entry td p {
	margin: 5px 0px;
}

main .entry .line {
	display: flex;
	lign-items: center;
}

main .entry .line :not(:last-child) {
	margin-right: 5px;
}

main .entry .line :not(:first-child) {
	margin-left: 5px;
}

main .entry .line * {
	display: inline-block;
}

main .entry .line input {
	flex-shrink: 1;
}

main .entry td .single input {
	width: 100%;
}

main .entry input,
main .entry select,
main .entry textarea {
	padding: 3px;
	border: 1px solid #CCCCCC;
}

main .entry .btn {
	margin-bottom: 20px;
}

main .entry .btn a,
main .entry .btn button {
	display: block;
	width: calc(100% - 10px);
	max-width: 300px;
	margin: auto;
	border: none;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	line-height: 300%;
}

main .entry .btn .pos {
	background:
		linear-gradient(
			to bottom,
			#FF6600 0%,
			#FF6600 50%,
			#CC6600 50%,
			#CC6600 100%
		);
	color: #FFFFFF;
}

main .entry .btn .neg {
	background:
		linear-gradient(
			to bottom,
			#CCCCCC 0%,
			#CCCCCC 50%,
			#999999 50%,
			#999999 100%
		);
	color: #333333;
}

main .entry .agree {
	text-align: center;
}

main .entry .agree a {
	text-decoration: underline;
}

main .entry .outofservice {
	text-align: center;
	color: #FF0000;
	font-weight: bold;
	margin-bottom: 20px;
}

/* -----------------------------
 PC
----------------------------- */
@media not screen and (max-width:1000px) {
}

/* -----------------------------
 SP
----------------------------- */
@media screen and (max-width:1000px) {
	main .entry th {
		display: block;
		border: 0px;
	}

	main .entry td {
		display: block;
		border: 0px;
	}

	main .entry input {
		width: 100%;
	}
}