@charset 'utf-8';

/* ----- HTML再定義 ------------------------------------ */

img {
	margin:0px;
	padding:0px;
	border:0px;
	vertical-align:bottom;
}

a{
color:#FFFFFF;
text-decoration:none;
}

a:hover{
color:#66CCFF;
}

body{background-color: #191919;}

#Cart{background: #191919;}

/*-------flexbox定義191008-------*/
.cart_flow_img{display: flex;justify-content: center;width: 100%;margin-top: 50px;padding-top: 120px;}
.cartField__wrap{
	width: 100%;
	margin: 0 auto;
	padding: 20px 0;
	display: flex;
	justify-content: center;
	flex-flow: column;
}
.cartField_Tittle{width:96%;flex-basis: 96%; display: flex;justify-content: center;font-size: 2em;color: white;margin: 2%;}
.cartTb {
	margin:.5% auto;
	border: 1px solid #999;
	width:80%;
	display: flex;
	flex-flow: wrap;
}
.cartTb__input {
	margin:.5% auto;
	padding: 1%;
	border: 1px solid #999;
	width:80%;
	display: flex;
	flex-flow: wrap;
	color: white;
}
.cartTb__input__other {
	margin:.5% auto;
	padding: 1%;
	border: 1px solid #999;
	width:80%;
	display: flex;
	flex-flow: wrap;
	color: white;
}
.cartTb__input li {
	margin:.5% auto;
	padding: 1%;
	border: 1px solid #333;
}
.cartTb__input__other li {
	margin:.5% auto;
	padding: 1%;
	border: 1px solid #333;
}
.cartTb__input li:nth-child(2n) {
	background: #333;
}
.cartTb__input__other li:nth-child(2n+3) {
	background: #333;
}
.cartThumbnailTd {
	width: 15%;
	display: flex;
	justify-content: center;
	align-items: center;
	border-bottom: 1px solid #999;
}
.cartThumbnailTd img{width: 100%;}

.cartTb ul {	
	display: flex;
	flex-flow: wrap;
	width: 85%;
}
.cartTb ul li {
	border-bottom: 1px solid #999;
	padding:1%;
}
.cartNameField {
	flex-basis: 40%;
	flex-grow: 1;
	margin: 0;
	overflow-wrap: break-word;
	word-break: break-all;
	border-left: solid 1px #999;
}
.zaikoField {
	flex-basis: 10%;
	flex-grow: 1;
	border-left: solid 1px #999;
	color: white;
}
.lotField {
	flex-basis: 20%;
	flex-grow: 1;
	border-left: solid 1px #999;
	color: white;
}
.priceField {
	flex-basis: 20%;
	flex-grow: 1;
	border-left: solid 1px #999;
}
.deleteField {
	flex-grow: 1;
	margin:0 auto;
	text-align: right;
	border-left: solid 1px #999;
}

.msgField {
	width:60%;
	margin: 0 auto;
	padding: 1%;
	text-align: center;
	color:white;
}
.msgField a {
	color:#99CCFF;
}

.totalField{
	display: flex;
	flex-direction: column;
	width: 40%;
	flex-basis: 40%;
	color:white;
}

.totalCnt1{
	padding: 1%;
	flex-grow: 1;
	flex-basis: 27%;
	border-left: solid 1px #999; 
}
.totalField li:nth-child(n+11) {color: orange;}/*合計の段を色変更（liの数により(n+x)を変動）*/

.totalCnt2{
	padding: 1%;
	flex-grow: 2;
	flex-basis: 67%;
	border-left: solid 1px #999; 
	text-align: right;
}

.cartBTN {
	margin:1% auto;
	width:96%;
	display: flex;
	flex-flow: wrap;
	justify-content: center;
}
.cartBTNitem {
	padding:1%;
}
.regist_buttons {
	margin:1% auto;
	padding:0;
	width:80%;
	display: flex;
	flex-flow: wrap;
	justify-content: space-around;
}
.regist_buttons li {flex-basis: 50%; margin: 1% 0;padding: 1% 0;display: flex;}

.button_ok {
    font-size: 120%;
    font-weight: bold;
	background-color: #c8c8c8;
	color: #000;
	flex-basis: 50%;
	flex-grow: 1;
	padding: 5%;
}

.button_else {
    font-size: 120%;
    font-weight: bold;
	background-color: #333;
	color: #fff;
	flex-basis: 50%;
	flex-grow: 1;
	padding: 5%;
}

.columnTitle{flex-grow: 2;flex-basis: 37%;}
.columnBodyName{flex-grow: 3;flex-basis: 57%;}
.columnPayType{padding: 1%; display: inline-block;width: 60%;font-size: 1.2em;color: white;}

.other_info{width:100%;text-align: center; border: none;color: white;font-size: 1.5em;}
.checkbox{width:100%;text-align: center; border: none;color: white;font-size: 1.5em;}
.checkboxfield{background: #666;margin: 1%; padding:1% 2%;display: inline-block;}
.checkboxItem{width:30px; height:30px;position: relative;top: 8px;}

.cart_firm {width: 100%; display: flex; justify-content: center;flex-direction: column;color: white;}
.cart_firm2 {width: 98%; display: flex; justify-content: center;flex-direction: column;color: white;border-top: 1px dotted #666;margin: 1%;padding: 1%;}
.cart_firm2__address__del{width: 100%; display: flex; justify-content: center;flex-direction: column;color: white;margin: 1%;padding: 1%;background: #333;}
.cart_firm li {flex-basis: 80%; width: 80%;display: flex; justify-content: center;margin: 0 auto;padding: .5%;}
.cart_firm2 li {flex-basis: 80%; width: 80%;display: flex; justify-content: center;margin: 0 auto;padding: .5%;}
.cart_firm_btn {font-size: 1.4em;font-weight: bold;padding: 1%;background-color: #c8c8c8;width: 30%;color: #000;}
.cart_firm_btn__address {font-size: 1.4em;padding: 1%;background:lightgray;color: black;box-shadow: 2px 2px 0px 0px rgba(150, 150, 150, 1);border: none; border-radius: 5px;max-width: 100%;}
.cart_firm_btn__address__del {font-size: 1.4em;padding: 1%;background:lightgray;color: black;box-shadow: 2px 2px 0px 0px rgba(150, 150, 150, 1);border: none; border-radius: 5px;max-width: 100%;}
.cart_firm_btn__address__del::before{content: '\f00d';font-family: fontawesome;padding-right: 5px;}
.cart_firm_btn__address:hover{background:gray;box-shadow: 2px 2px 0px 0px rgba(200, 200, 200, 1);}
.cart_firm_btn__address__del:hover{background:gray;box-shadow: 2px 2px 0px 0px rgba(200, 200, 200, 1);}
.cart_firm__address__tittle{display:flex; flex-wrap: wrap;}

/*利用規約チェック*/
.agree_wrap{width:100%;padding-top:2%;display:flex;justify-content:center;}
.agree_box{width:80%;padding:2%;border:1px solid #999;text-align:center;}

@media screen and (max-width:1024px) {
	.cart_flow_img img{width:95%;height: 95%;}
}
@media screen and (max-width:480px) {
	.cartField_Tittle{font-size: 1.2em;}
	.msgField {width:100% !important;border-bottom: 1px solid #999;}
	.totalField{width:100%;flex-basis: 100%;}
	.totalCnt1{border: none;}
	.cartNameField {flex-basis: 100%;}
	.zaikoField {flex-grow: 1;}
	.lotField {flex-grow: .5;}
	.priceField {flex-grow: 2;}
	.deleteField {flex-basis: 100%;}
	.cartThumbnailTd {align-items:center;}
	.cartBTN {width:100%;}
	.cartBTNitem {margin-top: 2%;}
	.cartTb {width:100%;}
	.cartTb__input {width:100%;}
	.cartTb__input__other {width:100%;}
	.regist_buttons {width:100%;margin-top: 5%;}
	.other_info{font-size: 1em;}
	.checkbox{font-size: 1em;}
	.cart_firm_btn {width: 90%;margin-top: 5%;}
	.cart_firm li {width: 100%;height: 100%;}
	.cart_firm2 li {width: 100%;height: 100%;}
	.cart_firm_btn__address {font-size: 1em;}
	.cart_firm_btn__address__del {font-size: 1em;}
	.regist_buttons li{flex-basis: 100%;}
	.button_ok {width: 100%;flex-basis: 100%; color: red;padding: 5% 0;}
	.button_else {width: 100%;flex-basis: 100%;padding: 5% 0;}
	.agree_box{width:100%;}
}