@charset "utf-8";

/* ==================================================================
	order.css
	
=================================================================== */

.spinner_area {
    width: 140px;
}

/* accent
------------------------------------ */
.accent .title h2{
    font-size: 225%;
    margin-bottom: 40px;
}

.visual_text{
    text-align: center;
    font-size: 114%;
}
.point .visual_text{
	color:#333;
}

/* alertBox
------------------------------------ */
.alertBox{
	margin-bottom: 20px;
}
.alertBox ul.items{
	margin-top: 10px;
}

/* postage
------------------------------------ */
.postage{
	text-align: center;
	margin-bottom: 40px;
	background: #eee;
	padding: 10px;
}

.businessuser .postage{
	display:none;
}

/* cartTable
------------------------------------ */
.cartTable{
    margin-bottom: 50px;
}

	.cartTable ul.ttl{
		display: flex;
	}

	.cartTable ul.ttl li{
		box-sizing: border-box;
	}

	.cartTable ul.ttl li.product_name{
		flex-basis: 50%;
		padding-left: 210px;
	}

	.cartTable ul.ttl li.product_price{
		flex-basis: 20%;
		padding-left: 30px;
	}

	.cartTable ul.ttl li.product_quantity{
		flex-basis: 12%;
		text-align: center;
	}

	.cartTable ul.ttl li.product_subtotal{
		flex-basis: 15%;
		text-align: center;
	}

/* productsflex
------------------------------------ */
.productsflex{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #d4d4d4;
    clear: both;
}

	.productsflex:first-child,
	.productsflex.first{
		border-top: 1px solid #d4d4d4;
	}

	.productsflex p{
		margin-bottom: 0;
	}

	.productsflex p.quantity input{
		width: 80px;
		text-align: center;
	}
	.productsflex p.erase button{
		padding: 0;
		border: none;
		cursor: pointer;
	}

	.productsflex .box{
		display: flex;
		width: 30%;
		justify-content: space-between;
		align-items: center;
	}


/* cartTable
------------------------------------ */
.cartTable .products{
    display: flex;
    align-items: center;
}

	.cartTable .products .name{
		min-width: 491px;
		max-width: 620px;
	}

	.cartTable .products .name dl{
		display: flex;
		align-items: center;
	}

	.cartTable .products .name dl dt{
		width: 15%;
	}

	.cartTable .products .name dl dd{
		width: 42%;
		line-height: 2;
		margin-left: 25px;
		font-size: 87%;
	}

	.cartTable .products .name dl dd span{
	}


/* upsell
------------------------------------ */
#upsell {
    padding: 80px 0;
    background: #D2D2D2;
    text-align: center;
}

	#upsell p.postage{
		text-align: center;
		margin-bottom: 50px;
	}

	#upsell p{
		text-align: center;
	}



/* procedure
------------------------------------ */
#procedure{
    text-align: center;

	.submitArea {
		@media (max-width: 767px) {
			display: block;
		}
	}
}

	#procedure .remarks{
		text-align: center;
	}

	#procedure .caution {
		width: 599px;
		margin: auto;
		padding: 20px 40px;
		box-sizing: border-box;
		border: 2px solid #DC666A;
		border-radius: 7px;
		margin-bottom: 50px;
	}
	#procedure .caution p{
		margin: 0;
	}
	#procedure .amazon-pay-section {
		margin-inline: auto;
		margin-bottom: 50px;
		max-width: 600px;
		text-align: center;
		box-sizing: border-box;

		p.amazon-pay-description {
			text-align: center;
			font-size: 1.7rem;
			font-weight: bold;
			margin-bottom: 20px;
		}
		p.amazon-pay-note {
			text-align: center;
			font-size: 1.2rem;
			margin-top: 8px;
		}

		#AmazonPayButton {
			width: 100%;
			max-width: 400px;
			margin-inline: auto;
		}
	}


.contents .buttonStyle.square a{
    border-radius: 10px;
    padding: 20px 40px;
    width: 25%;
    margin-bottom: 30px;
}

.calc{
}


/* tablePoint
------------------------------------ */
table.tablePoint{
    width: 40%;
    border: 1px solid #d4d4d4;
    float: left;
} 

	table.tablePoint th,
	table.tablePoint td{
		border-bottom: 1px solid #d4d4d4;
		padding: 15px 20px;
		box-sizing: border-box;
		font-weight: 700;
	}

.tableTotal{
	width: 40%;
	float: right;
}

	.tableTotal ul.list li.border{
		border-bottom: 1px solid #d4d4d4;
	}

	.tableTotal ul.list li dl{
		display: flex;
		justify-content: space-between;
		font-size: 14px;
		padding: 10px 0;
	}

	.tableTotal ul.list li dl dt{
		text-align: left;
		width: 50%;
		float: left;
		padding: 5px 0 5px 130px;
		box-sizing: border-box;
		font-weight: 700;
	}

	.tableTotal ul.list li dl dd{
		text-align: right;
		width: 50%;
		float: right;
		padding: 5px 130px 5px 5px;
		box-sizing: border-box;
		font-weight: 700;
	}

	.tableTotal ul.list li dl dd.price{
		font-size: 171%;
	}

	.tableTotal ul.list li dl.total{
		display: table;
		width: 100%;
	}

	.tableTotal ul.list li dl.total dt,
	.tableTotal ul.list li dl.total dd{
		display: table-cell;
		vertical-align: bottom;
		float: none;
	}


/* pay
------------------------------------ */
.pay{
    width: 50%;
    margin: 0 auto 50px;
}

	.pay p{
		text-align: center;
		line-height: 2;
	}

	.pay p span{
		display: block;
		color: #959595;
	}


/* stepFlow
------------------------------------ */
.stepFlow{
    text-align: center;
    margin: 50px 0;
}


/* point
------------------------------------ */
.point .tableTotal ul.list li dl dt {
    width: 55%;
    font-weight: normal;
}


.point .cartTable ul.ttl li.product_price {
    padding-left: 0px;
}




/* SPのみ
------------------------------------ */
@media only screen and
(max-width : 767px) {

 
.accent .title {
    font-size: 87%;
    padding: 30px 0;
}    
    
.accent .title h2{
    margin-bottom: 10px;
}
    
    .contents .chapter.flow{
        margin: 0;
    }
    
    
    .stepFlow{
        display: flex;
        border-bottom: 1px solid #afafaf;
        margin: 0;
    }    

.stepFlow li{
    width: 20%;
    text-align: center;
    font-size: 75%;
}
    
.stepFlow li.current {
    padding-bottom: calc(28 * (100vw / 750));
    color: #545454;
    padding-bottom: 16px;
    border-bottom: solid 5px #545454;
}



table.tablePoint {
    width: 100%;
    border: 1px solid #d4d4d4;
    float: none;
    margin-bottom: 30px;
}

.cartTable ul.ttl {
    display: none;
}
    
.tableTotal {
    width: 100%;
    float: none;
}

.cartTable .products {
    display: block;
    width: 100%;
    position: relative;
}

.productsflex {
    display: block;
}
    
.productsflex .box {
    width: auto;
    justify-content: flex-end;
    flex-basis: auto;
    margin-top: calc(20 * (100vw / 750));
}

.productsflex p.quantity {
    margin-right: 20px;
}

.subtotal{
    display: none;
}

.productsflex .box .erase {
    line-height: 1;
    margin-left: 25px;
}
    
.cartTable .products .name {
	max-width: inherit;
	min-width: inherit;
}
.cartTable .products .name dl dt {
    width: 25%;
}

.cartTable .products .name dl dd {
    width: 65%;
}
    
.tableTotal ul.list li dl dt {
    padding: 5px 0 5px 50px;
}

.tableTotal ul.list li dl dd {
    padding: 5px 50px 5px 5px;
}

#procedure .caution {
    padding: 20px;
    width: auto;
}
	
.caution {
}

.contents .buttonStyle.square a {
    padding: 15px;
    width: 100%;
	margin-bottom: 0;
}

.pay {
    width: auto;
}


.point .stepFlow li {
    width: 25%;
}

















}