@charset "utf-8";
/* cart css */
@charset "UTF-8";

/* usrStep
----------------------------------------------------------------------*/
#usrStep h1{ display:inline; }

/* main
----------------------------------------------------------------------*/
#main{
	display:-webkit-flex;
	display:flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: flex-start;
	align-items: flex-start;
	-webkit-flex-wrap:wrap;
	flex-wrap:wrap;
}
/* orderMessage
----------------------------------------------- */
.orderMessage{
	width:100%;
	padding:15px;
	margin-bottom:30px;
	background:#fafafa;
	text-align:center;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}
.orderMessage span{
	display:block;
	width:100%;
	color:#f44336;
}

/* error
----------------------------------------------- */
.errorHead{
	width:100%;
}
.orderMessage + .errorHead{
	margin-top:-15px;
}
.errorTxt{
	width:100%;
}
/* cartDetail
----------------------------------------------- */
#cartDetail{
	position:relative;
	width:calc(100% - 308px); /* 288px + 20px */
}
/*-- cartTable --*/
#cartDetail .cartTable{
	width:100%;
}
.cartTable th{
	height:21px;
	padding-bottom:10px;
	font-size:14px;
	color:#666;
	text-align:left;
	border-bottom:1px solid #000;
}
.cartTable td{
	padding:25px 0 0;
	font-size:13px;
	vertical-align:top;
	border-bottom:1px solid #ccc;
}
/* image */
.cartTable .image{
	width:150px;
	padding:25px 35px 25px 0;
	border-bottom:1px solid #ccc;
}
.cartTable .image img{ width:100%; }

/* itemInfo */
.cartTable .itemInfo{ padding-right:5%; }

.cartTable .itemInfo ul{
	position:relative;
	display:-webkit-flex;
	display:flex;
	-webkit-flex-direction:column;
	flex-direction:column;
	margin-bottom:25px;
	min-height:180px;
}
.cartTable .itemName{
	margin:5px 0 15px;
	color:#666;
}
.cartTable .color,
.cartTable .size{
	margin-top:3px;
	font-size:14px;
}
.cartTable .size{ margin-bottom:25px; }

.cartTable .color span,
.cartTable .size span{ font-weight:bold; }

/* price */
.cartTable .price{
	width:130px;
	padding:25px 10px 0 5px;
	font-size:20px;
}
.cartTable .price span{
	display:block;
	font-size:13px;
}
/* itemStock */
.cartTable .stockItem{
	margin-top:10px;
	white-space:nowrap;
}
/* number */
.cartTable .number{
	width:86px;
	padding:25px 10px 0;
	font-size:20px;
	text-align:left;
}
.cartTable .number .selectBox{ margin:0 10px 20px 0; }

.cartTable .number select{
	padding:0 0 0 3px;
	font-size:20px;
	color:#111;
}
/* campaign */
.cartTable .campaign{
	max-width:284px;
	margin-top:auto;
}
.cartTable .campaign .inner{
	display:block;
	width:553px;
}
.cartTable .campaign span:not(.inner){
	display:inline-block;
	margin:0 5px 5px 0;
	color:#ff2626;
	border:1px solid #ff2626;
	padding:6px 20px 8px;
}
/*-- cartTable --*/
.cartTable.confirm .image{
	width:100px;
	padding: 15px 20px 15px 0;
}
.cartTable.confirm tr{ position:relative; }
.cartTable.confirm td{ padding-top:15px; }

.cartTable.confirm .itemInfo ul{
	position:relative;
	display:grid;
	display:-ms-grid;
	-ms-grid-columns:auto 1fr;
	grid-rows:auto auto;
	-ms-grid-rows:auto auto;
	width:calc(105% + 75px + 115px);
	min-height:120px;
	padding-bottom:0;
	margin-bottom:15px;
}
.cartTable.confirm .brand,
.cartTable.confirm .itemName,
.cartTable.confirm .color,
.cartTable.confirm .size{
	max-width:280px;
}

.cartTable.confirm .brand{ grid-row: 1 / 2; grid-column: 1 / 3; -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 2; }
.cartTable.confirm .itemName{ font-weight:bold; grid-row: 2 / 3; -ms-grid-row: 2; grid-column: 1 / 3; -ms-grid-column: 1; -ms-grid-column-span: 2; }
.cartTable.confirm .color{ grid-row: 3 / 4; grid-column: 1 / 2; -ms-grid-row: 3; -ms-grid-column: 1; }
.cartTable.confirm .size{ grid-row: 4 / 5; grid-column: 1 / 2; -ms-grid-row: 4;	-ms-grid-column: 1; }

.cartTable.confirm .campaign{
	position:relative;
	left:0;
	bottom:0;
	width:auto;
	max-width:unset;
	text-align:right;
	grid-row: 4 / 5;
	grid-column: 2 / 3;
	-ms-grid-row: 4;
	-ms-grid-column: 2;
	transform:translateY(-15px);
}
.cartTable.confirm .campaign .inner{
	display:inline;
	width:auto;
}
.cartTable.confirm .campaign span{
	margin:5px 0 0 5px;
	text-align:left;
}
.cartTable.confirm .price{
	width:100px;
	font-size:13px;
}
.cartTable.confirm .number{
	width:55px;
	font-size:13px;
}
/*-- operation --*/
.operation{ margin-bottom:60px; }

.operation .heading{
	padding-bottom:10px;
	font-size:15px;
	font-weight:bold;
	color:#666;
	border-bottom:1px solid #000;
}
.operation .category{
	width:100%;
	display:-webkit-flex;
	display:flex;
	-webkit-justify-content:space-between;
	justify-content:space-between;
	padding-bottom:30px;
}
.operation .category dl{
	display:-webkit-flex;
	display:flex;
	-webkit-flex-wrap:wrap;
	flex-wrap:wrap;
	width:100%;
}
.operation .category dl dt{
	width:120px;
	padding:25px 20px 0 0;
	font-size:13px;
	font-weight:bold;
}
.operation .category dl dd{
	padding-top:25px;
	font-size:15px;
}
.operation .category:not(.point) dl dd span:not(.linking){
	display:block;
}
.operation .category dl dd #selectDeliveryName,
.operation .category dl dd #selectDeliveryZip{ display:inline; margin-right:5px; }

.operation .category dl dd.point,
.operation .category dl dd.type{
	width:290px;
	padding-right:0;
}
.operation .category dl dd + dd.type{ margin-left:140px; }
.operation .category dl dd.status{
	-webkit-flex: 1;
	flex: 1;
	color:#666;
	text-align:center;
}
.operation .change{ margin:25px; }
.operation .change a{
	border-color:#666;
	cursor:pointer;
}
.operation .change.preorder{
	position:absolute;
	right:0;
	color:#ccc;
}
.operation .cMaintenance{
	font-size: 13px;
	color: #F44336;
	/* ▼ ATGW-4191【GMO後払い】システムメンテナンス対応 ▼*/
	line-height: 35px;
	/* ▲ ATGW-4191【GMO後払い】システムメンテナンス対応 ▲*/
}
/* point */
.operation .category.point{
	padding-bottom:0;
	border-bottom:1px solid #ccc;
}
.operation .category.point dl dd span{ margin-left:5px; }
.operation .point .change{ margin:20px 25px; }

/* coupon */
.operation .category.coupon{ padding-bottom:0; }
.operation .category.coupon dl dd span{ font-size:12px; }
.operation .category.coupon dl dd span.useCp{
	margin-bottom: 3px;
}

/* couponCode */
.operation .category.couponCode{
	margin-top:10px;
	border-bottom:1px solid #ccc;
}
.operation .category.couponCode dd span{ font-size: 12px; }
.operation .category.couponCode dt{ position:absolute; }

.operation .category.couponCode dd{
	width:100%;
	margin-left:140px;
}
.operation .category.couponCode #appliedCampaignCode{
	padding:0;
	line-height:0;
	margin-left:0;
}
.operation .category.couponCode #appliedCampaignCode .inputData{
	display:block;
	margin-left:140px;
	padding-top:25px;
	font-size:15px;
	line-height:1.5;
}
.operation .category.couponCode a{
	color:#1e8dee;
	cursor:pointer;
	font-size:15px;
}
/* payment */
.operation .category.payment dl dd{
	flex:1;
	min-width: 0;
}
.operation .category.payment dl dd span span{ font-size:12px; }

/* shipping */
.operation.shipping .category.address{
	padding-bottom:20px;
	border-bottom:1px solid #ccc;
}
.operation.shipping .category dl{ padding-top:15px; }
.operation.shipping .category dl dt{ padding-top:10px; }

.operation.shipping .category dl dd{
	width:calc(100% - 130px);
	padding-top:10px;
}
.operation .category + .attention3d span{
	color:#f00;
}
.operation .attention3d{
	order:5;
	margin:10px 0 0;
}
.operation .attention3d span,
.operation .attention3d a{
	color:#f00;
}
/* cartTotal
----------------------------------------------- */
#cartTotal{ width:288px; }

/* amount */
.amount{
	margin-top:32px;
	padding:20px 25px 35px;
	background:#f0f0f0;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}
.amount .number{
	margin:0 5px;
	font-size:14px;
	font-weight:bold;
	color:#666;
}
.amount .number span{ margin-left:20px; }

.amount .total{
	margin:15px 5px 0;
	font-size:25px;
	color:#111;
}
.amount .shipping{
	margin:15px 5px 0;
	font-size:14px;
	color:#666;
}
.amount .shipping.free{
	color:#ff2626;
	font-weight:bold;
}
.amount .shipping.more{

}
.amount .shipping.more a{
	display: block;
	background-color: #ff7272;
	color: #fff;
	font-size: 13px;
	padding: 10px;
	border-radius: 12px;
	margin-top: 15px;
	text-decoration: none;
	position:relative;
	text-align: center;
}

.amount .shipping.more a:before{
	content:"";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 7.5px 15px 7.5px;
	border-color: transparent transparent #ff7272 transparent;
	position:absolute;
	top: -10px;
	left: 13px;
	-webkit-transition: .3s;
	transition:.3s;
	-webkit-backface-visibility: hidden;
	-webkit-font-smoothing: antialiased;
}

.amount .shipping.more a:hover{
	background-color:#ffa1a1;
}
.amount .shipping.more a:hover:before{
	border-color: transparent transparent #ffa1a1 transparent;
}

.amount .btn{ margin-top:20px; }

/* ショッピングを続ける */
.amount .back{
	margin-top:30px;
	text-align:center;
}
.amount .back a{
	color:#1e8eee;
	font-size:15px;
}
/* orderBtn */
#cartTotal .orderBtn a{ width:100%; }

/* amountTable */
.amountTable{
	width:100%;
	margin-top:20px;
	background:#f0f0f0;
	font-size:14px;
	color:#666;
}
.amountTable th{
	padding:5px 0 7px 25px;
	text-align:left;
}
.amountTable td{
	padding:5px 25px 7px 0;
	text-align:right;
	font-weight:bold;
}
.amountTable tr:first-child th,
.amountTable tr:first-child td{ padding-top:25px; }

.amountTable tr.total th{ padding:30px 0 30px 25px; }

.amountTable tr.total td{
	padding:30px 25px 30px 0;
	font-size:25px;
	color:#111;
	font-weight:normal;
}
.amountTable tr.addPoint th,
.amountTable tr.addPoint td{
	padding-top:25px;
	padding-bottom:25px;
	background:#ddd;
}
.amountTable tr.addPoint td span{
	margin-right:10px;
	font-size:17px;
	color:#111;
	font-weight:normal;
}
/* orderBtn */
#main > .orderBtn{
	width:100%;
	margin-top:90px;
	text-align:center;
}
/* カート0件
----------------------------------------------- */
#noData{
	width:100%;
	font-size:15px;
	text-align:center;
}
#noData .btn{
	margin-top:35px;
}
/* modalWin
----------------------------------------------- */
/* modalOverlay */
.modalOverlay{
	display:none;
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background:rgba(34,34,34,.5);
	z-index: 51;
}
.open .modalOverlay{ display:block; }
.open.disable .modalOverlay{ display:block; background:rgba(34,34,34,.2); }

/*-- modalWin --*/
.modalWin{
	position:absolute;
	left:calc(50% - 375px);
	top:calc(50% - 250px);
	width:750px;
	max-height:570px;
	padding:15px 30px 30px;
	background:#fff;
	-webkit-border-radius:15px;
	border-radius:15px;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	opacity:0;
	pointer-events: none;
	-webkit-transition: 0s;
	transition: 0s;
	z-index: 52;
}
.modalWin.open{
	opacity:1;
	pointer-events: initial;
	-webkit-transition: .5s;
	transition: .5s;
}
.modalWin .heading{ padding:30px 0 20px; }

.modalWin .head{
	color:#666;
	font-size:20px;
	font-weight:bold;
	text-align:center;
}
.modalWin .head span{
	display: block;
	font-size: 13px;
	margin-top: 10px;
	font-weight: normal;
}
.modalWin .closeIcon{
	position: absolute;
	right: 35px;
	top: 35px;
	width: 25px;
	height: 25px;
	line-height: 0;
	font-size: 0;
	overflow: hidden;
	cursor:pointer;
}
.modalWin .closeIcon:before,
.modalWin .closeIcon:after{
	content:'';
	position:absolute;
	left:-4px;
	top:11px;
	display:block;
	width:33px;
	height:1px;
	background:#666;
	-webkit-transition:.5s .3s;
	transition:.5s .3s;
}
.modalWin.open .closeIcon:before{ -webkit-transform:rotate(45deg); transform:rotate(45deg); }
.modalWin.open .closeIcon:after{ -webkit-transform:rotate(-45deg); transform:rotate(-45deg); }

.modalWin .modalBody{
	max-height:445px;
	padding:25px 50px 0;
	font-size:15px;
	overflow-y:auto;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}
.modalWin .selectBlock > li{
	position:relative;
	overflow:hidden;
}
.modalWin .selectBlock > li:not(:first-child){
	margin-top:35px;
}
.modalWin .selectBlock > li > input + label{
	position:relative;
	display:flex;
	display:-webkit-flex;
	z-index:3;
	background:#fff;
	-webkit-align-items: center;
	align-items: center;
}
.modalWin .selectBlock li .radio{
	margin-right:30px;
}
.modalWin .selectBlock > .radioDisable{
	color:#ccc;
}
.modalWin .selectBlock > .radioDisable .radio{
	position:relative;
	display: inline-block;
	width: 19px;
	height: 19px;
	line-height: 19px;
	border: 1px solid #ccc;
	color: #fff;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	vertical-align: -3px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	background: #fff;
	overflow:visible;
}
.modalWin .selectBlock > .radioDisable .radio:after{
	content:'';
	position:absolute;
	left: -10px;
	top: 10px;
	display:block;
	width:32px;
	height:1px;
	border-top:1px solid #ccc;
	transform: rotate(-45deg);
}
#paymentModal.modalWin .selectBlock > .radioDisable .commission,
.modalWin .selectBlock > .radioDisable .notes{
	margin-left: 10px;
	color:#ccc;
	font-size: 12px;
}
.modalWin .selectBlock > li > label + .notes{
	margin:5px 0 0 48px;
	font-size:11px;
	color:#666;
}
.modalWin .selectBlock li .widthLimit{
	display:inline-block;
	vertical-align:middle;
	white-space:nowrap;
}
.modalWin .selectBlock li .paymentNote{
	display:block;
	margin:5px 0 0;
	font-size:11px;
	white-space:normal;
	color:#f00;
}
.modalWin .selectBlock li .paymentNote a{
	color:#f00;
}
.modalWin .selectBlock .radioDisable .paymentNote.leftmargin{
	margin:5px 0 0 48px;
}
.modalWin .selectBlock .statusCheck{
	display:-webkit-flex;
	display:flex;
	-webkit-align-items:center;
	align-items:center;
}
.modalWin .selectBlock .statusCheck label{
	margin-left:40px;
}
.modalWin .selectBlock .statusCheck  .radio{
	margin-right:15px;
}
.modalWin .btnBox{
	margin-top: 45px;
	text-align:center;
}
/* point */
.modalWin .currentPoint{
	margin-bottom:25px;
	font-weight:bold;
}
.modalWin .currentPoint span{ margin-left:10px; }

#pointModal .inputText{
	width:100px;
	height:35px;
	margin-left:30px;
	line-height:1;
	padding:6px 20px 5px;
}
#pointModal .errorTxt{ margin-left:50px; }
/* coupon */
.modalWin .type{
	width:200px;
}
.modalWin .type span{
	display:block;
	font-size: 12px;
}
/* payment */
#paymentModal .selectBlock > li{
	margin-top:25px;
	min-height:44px;
}
#paymentModal .selectBlock { margin-right:12px; }
#paymentModal .selectBlock > li:first-child{ margin-top:0; }
#paymentModal .selectBlock > li:last-child{ min-height:unset; }

#paymentModal .widthLimit .selectBox {
	margin-left:20px;
	display:inline-block;
	width:150px;
}

#paymentModal .newData > ul{ margin:10px; }
#paymentModal .newData > ul > li:not(:first-child){ margin-top:15px; }
#paymentModal .errorTxt + p{
	margin:5px 0 7px;
	font-size:12px;
}
#paymentModal .commission{
	margin-left:10px;
	color:#666;
	font-size:12px;
}
/* address */
#addressModal .selectBlock { margin-right:12px; }
.modalWin .registAddress{ width: 500px; }
.modalWin .registAddress li{
	margin-top:0;
	white-space: initial;
}

/* postalList */
#postalModal.modalWin{ height:100vh; }
#postalModal.modalWin .modalBody{ max-height:345px; }

.postalList li:not(:first-child){ margin:7px 0; }

.postalList li a{
	display:block;
	padding:0;
	font-size:14px;
	text-decoration:none;
}
.postalList li a:before{
	content:'\9078\629E';
	display:inline-block;
	padding:5px 10px;
	margin-right:10px;
	background:#1e8dfd;
	color:#fff;
	border-radius: 3px;
}
/* data */
.modalWin .dataSelect{
	display:-webkit-flex;
	display:flex;
	-webkit-align-items:center;
	align-items:center;
}
.modalWin .dataSelect dt{
	margin-right:25px;
	white-space:nowrap;
}
.modalWin .dataSelect dd{
	width:175px;
	margin-right:40px;
}
.modalWin .dataSelect dd:last-child{ margin-right:0; }

/* newData（新規入力エリア） */
.newData{
	margin:15px 0 0 50px;
	padding:15px;
	max-height:0;
	font-size:13px;
	overflow:hidden;
	background:#f0f0f0;
	overflow: hidden;
	position: absolute;
	top: 100%;
	left: 0;
	visibility: hidden;
	z-index: -1;
	-webkit-transform: translateY(-200px);
	transform: translateY(-200px);
}
input.new:checked ~ .newData{
	position: static;
	max-height:100%;
	visibility: visible;
	z-index: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
	-webkit-transition:  .3s ease;
	transition: .3s ease;
}
.newData table{ width:480px; }

.newData table th{
	position:relative;
	width:126px;
	padding:20px 0 0 0;
	font-weight:normal;
	vertical-align:top;
	text-align:left;
}
.newData table th.required{
	padding-right:60px;
}
.newData table th.required:after{
	content:'\5FC5\9808';
	position:absolute;
	right:10px;
	top:20px;
	display:inline-block;
	margin:-2px 0 0 5px;
	padding:4px 10px;
	font-size:11px;
	background:#ff4d4d;
	color:#fff;
}
.newData table td{
	width:300px;
	padding:5px 0;
	text-align:left;
}
.newData table .date{
	display:-webkit-flex;
	display:flex;
	-webkit-align-items:center;
	align-items:center;
	-webkit-flex-wrap:wrap;
	flex-wrap:wrap;
}
.newData table .date span{
	display:inline-block;
	margin:0 5% 0 3%;
}
.newData table .date > span:nth-of-type(2){
	margin-right:0;
}
.newData table .date .selectBox{ width:90px; }
.newData table .code input{ width:80px; }
.newData table .cardSelect .selectBox{ width:200px; }

.newData table .name{
	display:-webkit-flex;
	display:flex;
	-webkit-align-items:center;
	align-items:center;
	-webkit-flex-wrap:wrap;
	flex-wrap:wrap;
}
.newData table .name input{
	width:145px;
}
.newData table .name input + input{
	margin-left:10px;
}
.newData table .postalCode{
	display:-webkit-flex;
	display:flex;
	-webkit-align-items:center;
	align-items:center;
	-webkit-flex-wrap:wrap;
	flex-wrap:wrap;
}
.newData table .postalCode input{
	width:180px;
}
.newData table .postalCode .btn a{
	width:auto;
	height:44px;
	line-height:44px;
	margin-left:10px;
	padding:0 15px;
	white-space:nowrap;
	font-size:11px;
	font-weight:normal;
	border-radius: 5px;
	cursor:pointer;
}
.newData table .telNumber{
	display:-webkit-flex;
	display:flex;
	-webkit-align-items:center;
	align-items:center;
	-webkit-flex-wrap:wrap;
	flex-wrap:wrap;
}
.newData table .telNumber input{
	width:80px;
}
.newData table .telNumber span{
	margin: 0 10px;
	padding:13px 0 12px;
}

.newData .save{ margin-top:20px; }

.newData table .pref .autoArea{
	padding: 13px 20px 12px;
	font-size: 13px;
	vertical-align: middle;
	background: #fff;
	color:#ccc;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.newData table .autoInputArea{
	display:-webkit-flex;
	display:flex;
	-webkit-align-items:center;
	align-items:center;
}
.newData table .autoInputArea span{
	white-space:nowrap;
	margin-right:10px;
	display: block;
	padding: 15px 18px;
}

/* loading
----------------------------------------------- */
.loadingOverlay {
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:1003;
	background:rgba(34,34,34,.35);
}
.loader {
	display:none;
	position:fixed;
	left:0;
	right:0;
	top:0;
	bottom:0;
	width:61px;
	height:61px;
	margin: auto;
	z-index:1003;
}
.loader:after,
.loader:before,
.loader>div {
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	position: absolute;
	width: 11px;
	height: 11px;
	background: #fff;
	border-radius: 50%;
	-webkit-animation: ball-spin-fade-loader 1.3s infinite linear;
	animation: ball-spin-fade-loader 1.3s infinite linear
}
.loader:after,
.loader:before{
	content:'';
	display:block;
}
.loader>div:nth-child(1) {
	top: 50px;
	left: 25px;
	-webkit-animation-delay: -.12s;
	animation-delay: -.16s;
}
.loader>div:nth-child(2) {
	top: 42.05px;
	left: 42.05px;
	-webkit-animation-delay: -.24s;
	animation-delay: -.32s;
}
.loader>div:nth-child(3) {
	top: 25px;
	left: 50px;
	-webkit-animation-delay: -.36s;
	animation-delay: -.48s;
}
.loader>div:nth-child(4) {
	top: 7.95px;
	left: 42.05px;
	-webkit-animation-delay: -.48s;
	animation-delay: -.64s;
}
.loader>div:nth-child(5) {
	top: 0;
	left: 25px;
	-webkit-animation-delay: -.6s;
	animation-delay: -.80s;
}
.loader>div:nth-child(6) {
	top: 7.95px;
	left: 7.95px;
	-webkit-animation-delay: -.72s;
	animation-delay: -.96s;
}
.loader:before {
	top: 25px;
	left: 0px;
	-webkit-animation-delay: -.84s;
	animation-delay: -1.12s;
}
.loader:after {
	top: 42.05px;
	left: 7.95px;
	-webkit-animation-delay: -1.28s;
	animation-delay: -1.28s;
}
@-webkit-keyframes ball-spin-fade-loader {
	30% {
		-webkit-transform: scale(0);
		transform: scale(0)
	} 60% {
		-webkit-transform: scale(0);
		transform: scale(0)
	} 0%, 100% {
		-webkit-transform: scale(1.2);
		transform: scale(1.2)
	}
}

@keyframes ball-spin-fade-loader {
	30% {
		-webkit-transform: scale(0);
		transform: scale(0)
	} 60% {
		-webkit-transform: scale(0);
		transform: scale(0)
	} 0%, 100% {
		-webkit-transform: scale(1.2);
		transform: scale(1.2)
	}
}

/* 完了画面
----------------------------------------------- */
#orderComplete{
	width:100%;
	text-align:center;
}
/* message */
#orderComplete .message{
	display:-webkit-flex;
	display:flex;
	-webkit-justify-content: center;
	justify-content: center;
	line-height:1;
	font-size:100px;
	color:#ffbf00;
	-webkit-text-shadow:7px 5px 0px #ccc;
	text-shadow:7px 5px 0px #ccc;
}
#orderComplete .message span {
	opacity:0;
	padding:0 4px;
	-webkit-transform: translateY(50px);
	transform: translateY(50px);
	-webkit-animation: lettering .65s forwards ease-out;
	animation: lettering .65s forwards ease-out;
}
#orderComplete .message span:nth-child(1) { -webkit-animation-delay: 0.55s; animation-delay: 0.55s; }
#orderComplete .message span:nth-child(2) { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; }
#orderComplete .message span:nth-child(3) { -webkit-animation-delay: 0.65s; animation-delay: 0.65s; }
#orderComplete .message span:nth-child(4) { -webkit-animation-delay: 0.70s; animation-delay: 0.70s; }
#orderComplete .message span:nth-child(5) { -webkit-animation-delay: 0.75s; animation-delay: 0.75s; }
#orderComplete .message span:nth-child(6) { -webkit-animation-delay: 0.80s; animation-delay: 0.80s; }
#orderComplete .message span:nth-child(7) { -webkit-animation-delay: 1.00s; animation-delay: 1.00s; }
#orderComplete .message span:nth-child(8) { -webkit-animation-delay: 1.05s; animation-delay: 1.05s; }
#orderComplete .message span:nth-child(9) { -webkit-animation-delay: 1.10s; animation-delay: 1.10s; }
#orderComplete .message span:nth-child(10) { -webkit-animation-delay: 1.15s; animation-delay: 1.15s; }
#orderComplete .message span:nth-child(11) { -webkit-animation-delay: 1.20s; animation-delay: 1.20s; }

@-webkit-keyframes lettering {
	0%{ opacity:0; -webkit-transform: translate3d(10px, 80%, 0); }
	30% { opacity:1; }
	50% { opacity:1; -webkit-transform: translate3d(0, -15px, 0); }
	100% { opacity:1; -webkit-transform: translateY3d(0, 0, 0); }
}
@keyframes lettering {
	0%{ opacity:0; transform: translate3d(10px, 80%, 0); }
	30% { opacity:1; }
	50% { opacity:1; transform: translate3d(0, -15px, 0); }
	100% { opacity:1; transform: translate3d(0, 0, 0); }
}
#orderComplete .desp{
	display:inline-block;
	margin-top:40px;
	font-size:14px;
	font-weight:bold;
	text-align:left;
	color:#666;
}
#orderComplete .desp p{
	margin-top:25px;
}
#orderComplete .naviBtn{
	margin-top:70px;
}
/* orderGuestInfo */
#orderComplete .orderGuestInfo{
	border: 1px solid #000;
	width: 100%;
	max-width: 798px;
	padding: 40px;
	margin: 50px auto 0;
}
#orderComplete .orderGuestInfo p{
	font-weight: 600;
	font-size: 18px;
}
#orderComplete .orderGuestInfo p+p{
    font-size: 14px;
    text-align: left;
    padding: 10px 0 30px;
    width: fit-content;
    margin: 0 auto;
    line-height:1.8;
    font-weight: 500;
    text-align: center;
}
#orderComplete .orderGuestInfo span.btn a{
	background-color: #1e8dfd;
	border:#1e8dfd;
}
@media all and (max-width: 640px) { 
	#orderComplete .orderGuestInfo{
		width: 100%;
		padding: 30px 15px;
		margin: 35px auto 0;
		box-sizing: border-box;
	}
	#orderComplete .orderGuestInfo p{
		font-weight: 600;
		font-size: 15px;
		line-height: 1.8;
	}
	#orderComplete .orderGuestInfo p+p{
		font-size: 11px;
		text-align: left;
		padding: 15px 0 30px;
		width: 100%;
		line-height: 1.8;
	}
}

/*---------------------------------------------------------------------
 sp
----------------------------------------------------------------------*/
@media all and (max-width: 640px) {

/* contents
----------------------------------------------------------------------*/
		.contents { padding: 0 25px; }

/* cartDetail
----------------------------------------------- */
	#cartDetail{ width:100%; }

	#cartDetail .cartTable{
		width:100%;
		border-collapse: collapse;
		border-spacing: 0;
		empty-cells: show;
	}
	.cartTable th{
		padding-bottom:3px;
		font-size:11px;
	}
	/* image */
	.cartTable .image{
		width:88px;
		padding:15px 10px 15px 0;
	}
	/* itemInfo */
	.cartTable .itemInfo{
		max-width: 1px;
		padding:15px 35px 0 0;
		font-size:11px;
		box-sizing:border-box;
		-webkit-box-sizing:border-box;
	}
	.cartTable .itemInfo ul{
		min-height:106px;
		margin-bottom:15px;
		padding-bottom:0;
	}
	.cartTable .brand{
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.cartTable .itemName{
		margin:0 0 10px;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.cartTable .color,
	.cartTable .size{
		margin-top:0;
		font-size:11px;
		margin-bottom:0;
	}
	.cartTable .color span,
	.cartTable .size span{ font-weight:normal; }
	.cartTable .stockItem{ margin-top:0; }

	.cartTable .price{
		width:100%;
		padding:10px 0 0;
		font-family: 'myFontB';
		font-size:12px;
		box-sizing:border-box;
		-webkit-box-sizing:border-box;
	}
	.cartTable .price span{
		display:inline;
		margin-left:5px;
		font-family: 'myFontR';
	}
	.cartTable .campaign{
		position:static;
		margin-top:10px;
		width:calc(100% + 80px);
	}
	.cartTable .campaign .inner,
	.cartTable.confirm .campaign .inner{
		width:auto;
	}
	.cartTable .campaign span:not(.inner){
		padding:5px 10px;
		margin-right:5px;
	}
	.cartTable.confirm .campaign span:not(.inner){
		margin:0 5px 5px 0;
	}
	.cartTable.confirm .campaign span:not(:last-child),
	.cartTable .campaign span:not(:last-child){
		margin-bottom:5px;
	}

	/* number */
	.cartTable .number{
		width:45px;
		padding:5px 0;
	}
	.cartTable .number .selectBox{
		margin:0 0 10px;
		line-height:1;
	}
	.cartTable .number select{
		padding: 10px 0 10px 3px;
		vertical-align:top;
		font-size:11px;
	}
	.cartTable .number .selectBox:after{
		right:5px;
		border: 3px solid transparent;
		border-top: 5px solid #666;
	}
	.cartTable .number .btn.smallBtn a{
		width:100%;
		height:24px;
		padding:0;
		font-size:11px;
		line-height:22px;
		vertical-align: top;
	}

	/* comfirm */
	.cartTable.confirm{ margin-bottom:20px; }

	.cartTable.confirm th{
		padding-bottom: 10px;
		font-size: 15px;
		font-weight: bold;
		color: #666;
	}
	.cartTable.confirm .image{
		width:88px;
		padding: 15px 15px 15px 0;
	}
	.cartTable.confirm .itemInfo ul{
		display:block;
		width:auto;
	}
	.cartTable.confirm .number{
		font-size:11px;
		text-align:center;
	}
	.cartTable.confirm .campaign{
		position:static;
		width:calc(100% + 90px);
		text-align:left;
		transform:translateY(0);
	}
	.cartTable.confirm .campaign .inner{
		padding:0;
	}
	.cartTable.confirm .campaign span{
		padding: 5px 10px;
		margin:5px 5px 0 0;
	}

	/*-- operation --*/

	.operation{ margin:25px 0 40px; }
	.operation .category .change{
		margin:20px 0 20px 20px;
		height:36px;
	}
	.operation .category dl{
		-webkit-justify-content: space-between;
		justify-content: space-between;
	}
	.operation .category dl dt{
		width:100%;
		padding-top:15px;
		font-size:11px;
	}
	.operation .category dl dd{ padding-top:0; }
	.operation .category dd:not([class]){ font-size:11px; }

	.operation .category dl dd.status{
		-webkit-flex: none;
		flex: none;
		font-weight:normal;
		font-size:11px;
	}
	.operation .change a{
		width:64px;
		height:36px;
		font-size:11px;
	}
	/* point */
	.operation .category.point dd{
		font-size:15px;
		font-weight:bold;
	}
	.operation .category.point .point{
		width:calc(100% - 80px);
		margin-top: -10px;
	}
	.operation .category.point dd span{
		display:inline;
		margin-left:5px;
		font-size:12px;
	}
	.operation .category.point .status{
		margin-top:-18px;
		padding-top:0;
		text-align:right;
		font-weight:normal;
		font-size:11px;
	}
	/* coupon */
	.operation .category.coupon{
		padding-bottom:20px;
		border-bottom:1px solid #ccc;
	}
	.operation .category.coupon dl{
		-webkit-align-items: center;
		align-items: center;
	}
	.operation .category.coupon .type{
		margin-top:20px;
		font-size:12px;
		width:calc(100% - 80px);
	}
	.operation .category.coupon .type span{
		font-size:11px;
		color:#aaa;
	}
	.operation .category.coupon .type span.useCp{
		margin-top:3px;
		color: #000;
	}
	.operation .category dl dd + dd.type{ margin-left:0; }
	.operation .category.coupon .status{ margin-top:20px; }

	/* couponCode */
	.operation .category.couponCode{ padding:5px 0 20px; }

	.operation .category.couponCode dl dt{
		position:static;
		width:80px;
		padding:0;
	}
	.operation .category.couponCode #appliedCampaignCode .inputData{
		margin-left:0;
		padding:0 0 20px 0;
		font-size:11px;
	}
	.operation .category.couponCode #appliedCampaignCode .inputData:last-child{
		padding-bottom:40px;
	}
	.operation .category.couponCode dd{
		width: calc(100% - 90px);
		margin-top:-20px;
	}
	.operation .category.couponCode .codeInput{ text-align:right; }
	.operation .category.couponCode dl dt + dd{ margin-top:0; }
	.operation .category.couponCode dd + dd{ margin-left:90px; }
	.operation .category.couponCode dl dd a{ font-size:12px; }

	/* peyment address date */
	.operation .category.payment,
	.operation .category.address,
	.operation .category.date{
		-webkit-align-items: flex-start;
		align-items: flex-start;
		padding:20px 0;
	}
	.operation.shipping .category.address{ padding-bottom:0; }
	.operation.shipping .category dl{ padding-top:0; }

	.operation .category.payment dl dt,
	.operation .category.address dl dt,
	.operation .category.date dl dt{
		width:80px;
		margin-bottom:10px;
		padding:0;
	}
	.operation .category.payment dl dd,
	.operation .category.address dl dd,
	.operation .category.date dl dd{
		width:calc(100% - 90px);
		margin-bottom:10px;
		padding-top:0;
	}
	.operation .category.payment dl dd{ white-space:nowrap; }
	.operation .category.payment dl dd span span{ font-size:11px; color:#aaa; }

	.operation .category.payment .change,
	.operation .category.address .change,
	.operation .category.date .change{ margin:0; }

	.operation .category .change.preorder{
		margin-left:160px;
		text-align:right;
		white-space:nowrap;
	}
	.operation .cMaintenance {
    	font-size: 11px;
    	margin-top:5px;
    	/* ▼ ATGW-4191【GMO後払い】システムメンテナンス対応 ▼*/
    	padding-left:0px;
		line-height: 20px;
    	/* ▲ ATGW-4191【GMO後払い】システムメンテナンス対応 ▲*/
	}


/* cartTotal
----------------------------------------------- */
	#cartTotal{ width:100%; }

	#cartTotal .amount{
		display:-webkit-flex;
		display:flex;
		-webkit-justify-content:center;
		justify-content:center;
		-webkit-flex-wrap:wrap;
		flex-wrap:wrap;
		width:100%;
		padding:0;
		margin-top:10px;
		background:#fff;
	}
	.amount .number{
		width:50%;
		margin:0;
		font-size:12px;
	}
	.amount .number span{ margin-left:10px; }

	.amount .total{
		width:50%;
		margin:0;
		font-size:18px;
		font-family: 'myFontB';
		text-align:right;
		line-height:1;
	}
	.amount .shipping{
		width:100%;
		margin:10px 0 0;
		font-size:11px;
		text-align:right;
	}
	.amount .shipping.more a{
		padding:15px 10px;
	}
	.amount .shipping.more a:before{
		left:inherit;
		right:10px;
	}
	.amount .shipping.more + .primaryBtn{
		margin-top: 20px;
	}
	.amount .btn{
		width:100%;
		margin-top:35px;
	}
	.amount .back .textLink{
		font-size:12px;
		text-decoration:underline;
	}
	.amount .back .textLink:hover{ text-decoration:none; }

	/* amountTable */
	.amountTable{ font-size:12px; }
	.amountTable th{ padding:0 0 5px 15px; }
	.amountTable td{
		padding:0 15px 5px 0;
		font-size:14px;
	}
	.amountTable tr:first-child th,
	.amountTable tr:first-child td{ padding-top:10px; }
	.amountTable tr.total th{ padding:10px 0 15px 15px; }

	.amountTable tr.total td{
		padding:10px 15px 15px 0;
		font-size:18px;
	}
	.amountTable tr.addPoint th,
	.amountTable tr.addPoint td{
		padding-top:10px;
		padding-bottom:10px;
		font-size:12px;
	}
	.amountTable tr.addPoint td span{
		font-size:18px;
		margin-right:7px;
	}

/* modalWin
----------------------------------------------- */
	.open .modalOverlay{ opacity:0; }

	.modalWin{
		position:fixed;
		left:0;
		top:0;
		width:100%;
		height:100%;
		max-height:unset;
		padding:0;
		z-index: 1003;
		background:#fff;
		overflow-y:scroll;
		-webkit-transform: translateY(120%);
		transform: translateY(120%);
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		-webkit-transition: .3s;
		transition: .3s;
		-webkit-border-radius:0;
		border-radius:0;
	}
	.modalWin.open{
		margin-top:0 !important;
		-webkit-transform: translateY(0%);
		transform: translateY(0%);
		-webkit-transition: .5s;
		transition: .5s;
	}
	.modalWin .heading{
		width:100%;
		padding:25px;
		font-size:15px;
		color:#666;
		-webkit-box-sizing:border-box;
		box-sizing:border-box;
		background:#fff;
		z-index: 1;
	}
	.modalWin .head{
		padding:0 35px;
		white-space:nowrap;
		font-size:15px;
	}
	.modalWin .closeIcon{
		position:absolute;
		right:25px;
		top:25px;
		width:25px;
		height:25px;
		line-height:0;
		font-size:0;
		overflow:hidden;
	}
	.modalWin .modalBody{
		max-height:unset;
		padding:25px;
		font-size:12px;
	}
	#postalModal.modalWin .modalBody {
	max-height: unset;
	}
	.modalWin .btnBox{
		display:-webkit-flex;
		display:flex;
		-webkit-justify-content:space-between;
		justify-content:space-between;
		padding:0 18px;
	}
	.modalWin .btnBox .btn{
		display:inline-block;
		width: 48%;
	}
	.modalWin .btnBox .btn a{
		height:50px;
		line-height:50px;
	}
	.modalWin .selectBlock li .radio{ margin-right:20px; }

	/* point */
	.modalWin .currentPoint{ font-size:14px; }
	#pointModal .inputText{ margin-left:15px; }
	#pointModal .errorTxt{ margin-left:40px; }

	/* coupon */
	.modalWin .selectBlock .statusCheck{
		-webkit-flex-wrap:wrap;
		flex-wrap:wrap;
	}
	.modalWin .selectBlock .statusCheck .type{ width:100%; }

	.modalWin .selectBlock .statusCheck .type span{
		font-size: 11px;
		color: #aaa;
	}
	.modalWin .selectBlock .statusCheck label{ margin:15px 40px 0 0; }

	/* newData */
	.newData{ margin: 15px 0 0 0; }
	.newData table{ width:100%; }
	.newData table th{
		display:block;
		width:auto;
		padding:10px 0 5px 0;
		font-weight:bold;
		font-size:13px;
	}
	.newData table th.required:after{
		top:10px;
		right:0;
		margin:-4px 0 0;
		padding:5px 10px;
	}
	.newData table td{
		display:block;
		width:100%;
		padding: 10px 0;
	}

	.newData table .telNumber input{ width:75px; }
	.newData table .telNumber span{ margin: 0 5px; }

	/* paymentModal */
	#paymentModal .selectBlock { margin-right:0; }
	#paymentModal .widthLimit{ width:calc(100% - 45px); }
	#paymentModal .widthLimit .selectBox{
		width:200px;
		margin:10px 0 0;
		display:block;
	}
	#paymentModal .selectBlock > li > label + .notes{
		margin: 5px 0 0 39px;
	}
	.modalWin .selectBlock .radioDisable .paymentNote.leftmargin{
		margin:5px 0 0 39px;
	}
	/* name */
	.newData table .name input { width: calc(50% - 2.5px); }
	.newData table .name input + input { margin-left: 5px; }

	/* address */
	#addressModal .selectBlock { margin-right:0; }
	#addressModal .widthLimit{ width:calc(100% - 45px); }
	.modalWin .registAddress{ width:auto; }
	.modalWin .registAddress li:not(:first-child){ margin-top:0; }

	/* postalCode */
	.newData table .postalCode input[type='text']{
		width:calc(100% - 102px);
	}
	.newData table .postalCode input[type='text'] + .btn a{
		width:97px;
		height:42px;
		line-height:42px;
		margin-left: 5px;
	}
	.newData table .autoInputArea{
		-webkit-flex-wrap:wrap;
		flex-wrap:wrap;
	}
	.newData table .autoInputArea span{
		width:100%;
		margin-bottom:15px;
	}
	/* data */
	.modalWin .dataSelect{
		-webkit-flex-wrap:wrap;
		flex-wrap:wrap;
	}
	.modalWin .dataSelect dt{
		width:120px;
		margin-right:15px;
	}
	.modalWin .dataSelect dd{
		width:calc(100% - 135px);
		margin-right:0;
	}
	.modalWin .dataSelect dd .selectBox{
		max-width:175px;
	}

/* comfirm非表示要素
----------------------------------------------- */
	#cartConfirm #header .headerNavi,
	#cartConfirm #header .sideNavi{
		visibility:hidden;
	}
	#cartConfirm #footer .windowFixBtn .searchModalBtn,
	#cartConfirm #footer .snsLink,
	#cartConfirm #footer ul{
		display:none;
	}

/* 完了画面
----------------------------------------------- */
	/* message */
	#orderComplete .message{
		font-size:45px;
		color:#ffbf00;
		-webkit-text-shadow:2px 3px 0px #ccc;
		text-shadow:2px 3px 0px #ccc;
	}
	#orderComplete .message span{ padding:0 1px; }

	#orderComplete .desp{
		display:block;
		font-size:11px;
	}
	#orderComplete .desp p{ margin-top:15px; }
	#orderComplete .naviBtn{ margin-top:45px; }

}

@media all and (max-width: 320px) {
	.newData table .telNumber span{
		margin:0 1px;
	}
}

/* paypay */
.cartBana{
    margin-top: 15px;
}

.cartBana img{
	width: 100%;
}

@media all and (max-width: 640px) { 
.cartBana{
    margin-top: 30px;
}
}

/* Amazon Pay */
#cartTotal .amount #AmazonPayButton{
	height: 60px!important;
	margin: 30px auto;
	width: calc(100% - 4px)!important;
}
/*
#paymentModal .selectBlock > li.amazonpay{
	border-top:1px solid #000;
	margin-top: 35px;
}
#paymentModal label[for="payTypeAmazonPay"] .radio{
	display:none;
}

#paymentModal input[checked="checked"]+label[for="payTypeAmazonPay"] {
	padding-top: 30px;
}
*/
#paymentModal input[checked="checked"]+label[for="payTypeAmazonPay"] .radio{
	display:block;
}
#paymentModal label[for="payTypeAmazonPay"] #amazonChangePaymentBtn{
		margin-left: 20px;
}
#paymentModal label[for="payTypeAmazonPay"] p.change a {
    width: 180px;
    line-height: 38px;
    height: 40px;
    font-size:12px;
}
#paymentModal #AmazonPayButton{
	height: 60px!important;
	width: 350px!important;
	margin: 35px auto 20px;
}
#AmazonPayButton + .notes{
	text-indent: 0;
}

/* #paymentModal .selectBlock > li.amazonpay.radioDisable {
    border-top: none;
	color: #888;
}
li.amazonpay.radioDisable input[type=radio]:disabled + .radio {
    background: #f0f0f0;
    border-color: #cacaca;
}
 */
 .AmazonPayWrapper{
	display:flex;
	flex-direction: column;
	justify-content:center;
	align-items: center;
}
.AmazonPayWrapper p.amazonText1{
	font-size:15px;
	font-weight: 500;
	text-align:center;
	margin-bottom: 40px;
}
.AmazonPayWrapper p.amazonText2{
	width:550px;
	margin-top: 20px;
}
.AmazonPayWrapper #AmazonPayButton{
    width: 550px!important;
    height: 65px!important;
}

.AmazonPayWrapper .customBtn span:nth-child(1){float:inherit;}
.AmazonPayWrapper .customBtn span{width:100%;}
.AmazonPayWrapper .customBtn{
	width: 100%;
	display: flex;
    justify-content: center;
    margin-top:80px;
}

@media all and (max-width: 640px) { 
	#cartTotal .amount #AmazonPayButton{
		margin: 30px 0 0;
		width: 100%!important;
	}
	dd#selPayTypeText_13 {
    	white-space: break-spaces;
	}
	#paymentModal #AmazonPayButton {
	    height: 55px!important;
	    width: 100%!important;
	    margin: 25px auto 20px;
	}

	#paymentModal label[for="payTypeAmazonPay"] span.amazonpayCard{
		width:50%;
	}
	#paymentModal label[for="payTypeAmazonPay"] #amazonChangePaymentBtn{
		width: 40%;
		margin-left: 10px;
    }
	#paymentModal label[for="payTypeAmazonPay"] p.change a {
		width: 100%;
		line-height: inherit;
	}
	#amazonpayAssist>div>div>div:first-child{
		z-index:10;
	}
		.AmazonPayWrapper #AmazonPayButton{
	    width: 100%!important;
	    height: 50px!important;
	}
	.AmazonPayWrapper p.amazonText1{
	font-size:14px;
	text-align: left;
	}
	.AmazonPayWrapper p.amazonText2{
	width: 100%;
	}
}
/* Amazon Pay POP UP */
#AmazonPayButton2 {
	margin-bottom: 55px !important;
}
#AmazonPayButton2 span {
    font-size: 16px !important;
	width: 245px !important;
	border-radius: 5px !important;
	border-color: #a88734 #9c7e31 #846a29 !important;
    background: linear-gradient(to bottom, #f7dfa5, #f0c14b) !important;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset !important;
	color: #161616 !important;
    font-weight: bold !important;
}
#AmazonPayButton2 span:hover {
	background: linear-gradient(to bottom, #f5d78e, #eeb933) !important;
}
@media all and (min-width: 768px) {
	#AmazonPayButton2 {
		margin-bottom: 40px !important;
	}
	#AmazonPayButton2 span {
		font-size: 15px !important;
		height: 50px !important;
		line-height: 48px !important;
	}
}
.toggle-icon dt::after {
	content: '';
	position: absolute;
	width: 7px;
	height: 7px;
	border-right: 1px solid #666;
	border-bottom: 1px solid #666;
	-webkit-transition: transform .3s;
	transition: transform .3s;
	-webkit-transform: rotate(45deg);
	transform: translateY(2.5px) rotate(45deg);
	margin-left: 6px;
}
.toggle-icon dt.open:after{
	-webkit-transform:translateY(2px) rotate(225deg);
	transform:translateY(6px) rotate(225deg);
}