@charset "UTF-8";


select.no_show {
	display: none;
}

#formBox .dispNone,
#formBox #deliveryForm .dispNone {
	display: none;
}

/* 繧ｫ繝ｬ繝ｳ繝�繝ｼ隱ｿ謨ｴ */
.bgGray {
	background: #F2F2F2;
}

.ui-widget.ui-widget-content {
	box-shadow: 1px 1px 4px 1px rgba(50, 50, 50, 0.4);
	/*transition:top 0.2s ease; */
}

.ui-datepicker .ui-datepicker-title {
	line-height: 1;
	display: flex;
	justify-content: center;
	align-items: center;
}

.ui-datepicker select.ui-datepicker-year {
	font-size: 100%;
	padding: 0 0.2em;
	border-radius: 5px;
	line-height: 1;
	height: 2em;
	border: #bbb solid 1px;
	width: auto;
}

.ui-datepicker select.ui-datepicker-month {
	font-size: 100%;
	padding: 0 0.2em;
	border-radius: 5px;
	line-height: 1;
	height: 2em;
	border: #bbb solid 1px;
	width: auto;
	margin-left: 0.5em;
}
/* 譌･譖懈律縺ｮ繧ｫ繝ｩ繝ｼ險ｭ螳� */
td.ui-datepicker-week-end:first-child a.ui-state-default {
	background-color: #ffecec;
	color: #f00 !important;
}
/* 蝨滓屆譌･縺ｮ繧ｫ繝ｩ繝ｼ險ｭ螳� */
td.ui-datepicker-week-end:last-child a.ui-state-default {
	background-color: #eaeaff;
	color: #00f !important;
}
/* 繝帙ヰ繝ｼ譎ゅ�ｮ蜍穂ｽ� */
td.ui-datepicker-week-end a.ui-state-hover {
	opacity: 0.8;
}
/* 蠖捺律繧堤､ｺ縺呵牡縺ｯ縺昴�ｮ縺ｾ縺ｾ */
td.ui-datepicker-week-end a.ui-state-highlight {
	background-color: #fffa90 !important;
}
/* 繧ｫ繝ｼ繧ｽ繝ｫ繧偵�昴う繝ｳ繧ｿ繝ｼ縺ｫ螟画峩 */
#ui-datepicker-div {
	position: relative;
	display: inline-block;
	margin-right: 1%;
}

#ui-datepicker-div {
	position: absolute;
	top: 100%;
	left: 0;
	display: none;
}

#datepickerId_output {
	cursor: pointer;
}

.hasDatepicker {

}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
	cursor: pointer;
	top: calc(50% - 0.9em);
}


#formBox #paymentForm .formInner li.remote_box{
	margin: 10px 0;
}
#formBox .remote_box label{
	padding: 0;
	width: 100%;
	display: block;
	margin-bottom: 0.5em;
}
#formBox #paymentForm .formInner #DeliveryBox .remote_box label p{
	font-weight: unset;
	font-size: 90%;
	margin-left: 10px;
}

.megRemote p,
.coolNotLi p {
	font-size: 83%;
	padding-left: 0.5em;
	line-height: 1.5em;
}

#formBox #paymentForm #receipt .dispReceiptNone{ display: none;}





#searchAddress {
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-align: center;
	text-decoration: none;
	padding: 5px 1em;
	font-weight: bold;
	background: #eee;
	color: #67550a;
	border-radius: 15px;
	position: relative;
	transition: 0.5s;
	border: 1px solid #999;
}
#searchAddress:hover {
	background: #d3d3d3;
	color: #67550a;
	cursor: pointer;
}

/*#formBox #customerAddress,*/
#formBox #customerAddress .addAddressBox{
	display: inline-flex;
	align-items: center;
}
#formBox #addAddressBox dd{
	background-color: #f9f1e787;
	width: 100%;
	padding: 10px;
	text-align: center;
	border: 1px solid #ffe0ce;
	font-weight: bold;
	margin-top: 1em;
}
#formBox #addAddressBox dd p{
	padding: 0;
	text-align: center;
	font-weight: normal;
	font-size: 85%;
}


#formBox #paymentForm .formInner #adressDInput li p.smallTxt {
	display: block;
	font-weight: bold;
	line-height: 1.5;
}
#formBox .smallTxt2 {
	display: block;
	font-size: 11px;
	margin: 0 0 2px 0.3rem;
	vertical-align: middle;
	padding: 0;
	font-weight: normal;
	line-height: 1.3;
}

#formBox #paymentForm .formInner #adressDInput li select,
#formBox #paymentForm .formInner #adressDInput li input {
	margin: 0 5px;
}
#formBox #paymentForm .formInner #adressDInput li input[type=text] {
	width: calc(100% - 10px);
	max-width: unset;
}



/*---------------------
		繧ｹ繝槭�帛ｯｾ蠢�
---------------------*/
@media only screen and (max-width: 979px) {
	#ui-datepicker-div {
		right: 0;
		left: unset;
	}
	#formBox #is_remote_island {
		vertical-align: sub;
	}

	#formBox #datepickerId{ width: 120px;}

	#formBox #addAddressBox .pcNone{ display: none;}

}


@media only screen and (max-width: 510px){
	#AddressBookBox dd ul li{
		width: 100%;
	}
	#AddressBookBox dd ul li:first-child{
		font-size: 115%;
	}

	#AddressBookBox dd ul li:last-child{
		margin-top: 10px;
		border-left: none;
	}

	#formBox #addAddressBox .pcNone{ display: block;}


}

/*----  ID追加  ---*/
#formBox #delivery{ border-bottom: none;}
#formBox #delivery #DeliveryKind{ display: inline-flex; align-items: center; width: 100%;}
#formBox #delivery div.dispNone{ display: none;}
#formBox #delivery input[type="text"]{ width: 150px; margin-left: 0.3em;}

/* アドレス帳の選択があれば↓反映 */
#delivery:not(.dispNone) + #deliveryForm{ width: 100%; margin: 0 0 0 auto;}
/*#delivery:not(.dispNone) + #deliveryForm dl dt{ width: 100px;}*/
/*#delivery:not(.dispNone) + #deliveryForm dl dd{ width: calc(100% - 100px);}
#delivery:not(.dispNone) + #deliveryForm .NameDl{ border-top: 1px dashed #CCC;}*/

@media only screen and (max-width: 979px) {
	#delivery select{ margin: 0.5em 0;}
	label[name='fordelivery']{ display: block; font-size: 13px; white-space: nowrap;}
}

@media only screen and (max-width: 500px){
	#formBox #delivery div{ display: unset;}
	label[name='fordelivery']{ display: block; padding: 0; font-size: 12px;}
	#formBox #delivery input[type="text"]{ margin-left: 0;  width: 100%;}
	#deliveryForm dl dt{ width: 75px;}
}


#formBox #paymentForm .formInner dl dt{
	font-size: 15px;
}

#formBox #paymentForm .formInner dl#delivery{
	border-bottom: 1px dashed #CCC;
}

#formBox #paymentForm #DeliveryKind{
	display: flex;
}

#formBox #paymentForm #DeliveryKind li{
	margin-right: 2em;
}

#formBox #paymentForm #DeliveryKind span{
	background: linear-gradient(transparent 40%, #ffdffd 60%);
	vertical-align: text-bottom;
}


/*#formBox #paymentForm .formInner #DeliveryBox li p{
	display: block;
	font-weight: bold;
}*/
#formBox #paymentForm .formInner #DeliveryBox li input[type=text]{
	width: 100%;
}

#formBox #paymentForm .formInner #DeliveryBox li.zip_code_li{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

#formBox #paymentForm .formInner #DeliveryBox .changeAddress02.home input,
#formBox #paymentForm .formInner #DeliveryBox .changeAddress03.home input{
	width: 100%;
}
#formBox #paymentForm .formInner #DeliveryBox .changeAddress03.hotel input{
	width: calc(100% - 100px);
}
#formBox #paymentForm .formInner #DeliveryBox .changeAddress03.hotel span{
	vertical-align: sub;
	font-size: 90%;
}

#DeliveryKind li label{
	padding: 0;
	display: inline-flex;
	align-items: center;
	width: auto;
}

#formBox #deliveryForm #hotelDeliveryUl li.hotelDelivery{
	margin: 15px 0 5px;
	padding: 5px 10px;
	border: 2px solid #d74f4f;
}
#hotelDeliveryUl .hotelDelivery p{
	font-size: 82%;
	color: #e92323;
	font-weight: bold;
	margin-bottom: 5px;
	padding: 0;
}
#hotelDeliveryUl .hotelDelivery input{
	transform: unset;
	margin: 0;
	vertical-align: baseline;
}

#hotelDeliveryUl .hotelDelivery label{
	padding: 0;
	display: block;
	text-align: center;
}

#addressKindSelect{
	font-weight: bold;
	margin: 5px;
	border: double;
	padding: 5px 10px;
	text-align: center;
}

#DelivetyNote span,
#deliveryImportant span{ white-space: nowrap;}

#attentionUketori01{
	margin: 5px 0 0 0;
	font-size: 12px;
	line-height: 1.5;
}

.noticeTxt{
	margin: 5px 0 0 0;
	font-size: 12px;
	line-height: 1.5;
}
.fontCBold{
	font-weight: bold;
}
.txtRed{
	color: #e92323;
}
.txtPink{
	color: #ed1e79;
}

.shopMsgCookie{
	line-height: 1.4em;
}

.shopMsgCookie{
	line-height: 1.4em;
	font-weight: bold;
}

.shopMsgCookie{
	line-height: 1.4em;
	font-weight: bold;
}

#formBox #paymentForm dl #ngAreaMsg{
	width: 100%;
	max-width: unset;
}

#formBox #ngAreaMsg p{
	text-align: center;
}

#formBox .pdfTxt{
	line-height: 1.4em;
	margin-top: 8px;
}

@media screen and (max-width: 979px){

	#formBox #paymentForm dl dt {
		width: 22%;
	}
	#formBox #paymentForm dl dd {
		width: 78%;
	}
	/*#formBox #paymentForm dl dd {
		width: 100%;
	}*/
	#formBox #paymentForm dl dd#deliveryImportant,
	#formBox #paymentForm dl dd.important,
	#formBox #paymentForm dl dd#calendarNote{
		width: 100%;
	}

	#formBox #deliveryForm #adressDInput #DPost1{
		width: 100px;
	}
	#formBox #deliveryForm #nameDInput #DName1,
	#formBox #deliveryForm #nameDInput #DName2 {
		width: calc(100% - 40px);
	}

	#formBox #paymentForm .formInner #DeliveryBox .changeAddress02.hotel input{
		width: 100%;
	}
	#formBox #paymentForm .formInner #DeliveryBox .changeAddress02.hotel span{
		display: block;
	}


	#hotelDeliveryUl .hotelDelivery{
		padding: 5px 5px;
	}

	#formBox #datepickerId {
		width: fit-content;
	}

	#formBox #paymentForm .formInner #DeliveryBox .changeAddress03.hotel input{
		width: calc(100% - 90px);
	}

	#formBox #deliveryForm #DTel{ width: 220px;}

}


@media screen and (max-width: 600px){
	#formBox #paymentForm #DeliveryKind{
		display: block;
	}
	#formBox #customerAddress .addAddressBox {
		display: block;
	}
	#formBox #delivery input[type="text"] {
		width: 100%;
	}
}

@media only screen and (max-width: 500px){

	#formBox #paymentForm .formInner dl{
		flex-wrap: wrap;
	}

	#formBox #paymentForm .formInner d dd{
		width: 100%;
	}
	#formBox #paymentForm .formInner dt .smallTxt {
		display: unset;
	}

	#formBox #datepickerId{
		width: 150px;
	}

	#formBox dl dt .pcNone{
		display: none;
	}
	#formBox #paymentForm .formInner dl dt{
		width: 100%;
		margin-bottom: 8px;
	}

	#formBox #paymentForm .formInner dl dd{
		width: 95%;
		margin: auto;
	}

	#formBox #paymentForm .formInner dl dd.calendarNote{
		margin-top: 0.5em;
	}

	#formBox #paymentForm .formInner dl .important{
		margin: 0.5em 0 0;
		width: 100%;
	}

	#formBox #deliveryForm dl #deliveryImportant,
	#formBox dl #calendarNote{
		font-size: 105%;
		width: 100%;
	}

}


@media only screen and (max-width: 400px){

	#formBox #deliveryForm dl{
		display: block;
	}
	#formBox #deliveryForm dl dd{
		width: 100%;
	}

}