@charset "UTF-8";



#customerLogin,
#customerLogout{
	width: 95%;
	margin: 1em auto;
	padding: 0.8em;
	border: dotted 1px #a38255;
}

#customerLogin label,
#customerLogout label{
	display:block;
}
#customerLogin label span{
	display:block;
	background-color:#b79646;
	color:#fff;
	width:200px;
	text-align:center;
	padding: 10px;
	margin: auto;
}
#customerLogout label span{
	display:block;
	background-color:#d2c09440;
	color:#453204;
	width:200px;
	text-align:center;
	padding: 10px;
	margin: auto;
	border: solid 1px #b79646;
}


#customerLogin label span:hover,
#customerLogout label span:hover{
	cursor:pointer;
}


#order #loginPopup{
	display: none;
	background: #FFF;
	position: fixed;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 9999;
	width: 90%;
	max-width: 600px;
	max-height: calc(100vh - 15%);
	/*overflow: auto;*/

	padding: 3%;
	color: #555555;
	background-color: #fff;
	box-shadow: 0 0 7px 10px #fff;
	bottom: unset;
}



#order #loginPopup h1{
	position: relative;
	padding: 0 100px;
	text-align: center;
	color: #847246;
	margin: 0 auto 15px;
	font-size: 150%;
	width: fit-content;
}
#order #loginPopup h1:before,
#order #loginPopup h1:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 45px;
  height: 1px;
  background-color: #847246;
}
#order #loginPopup h1:before {
  left:50px;
}
#order #loginPopup h1:after {
  right: 50px;
}

#order .loginErrorBox,
#order .loginOldErrorBox{
	margin: 10px 0;
	padding: 5px 10px;
	border: solid 1px red;
}
#order .loginErrorBox p,
#order .loginOldErrorBox p{
	padding: 0;
	color: #d80808;
	text-align: center;
}


#order #popupBox{
	overflow: auto;
	max-height: 73vh;
}
/*
#order #popupBox .borderLine{ border-top: dashed 1px #999; padding-top: 15px;}


#order #loginPopup dl{ display: flex; padding: 5px; border: none; align-items: center;}
#order #loginPopup dl:after{ background: unset;}
#order #loginPopup dt{ width: 125px; color: #3b3b3b;}
#order #loginPopup dd{ width: calc(100% - 125px);}
#order #loginPopup dd input{ width: 100%;}
#order #loginPopup ul{ display: flex; margin-top: 20px;}
#order #loginPopup li{ margin: auto; text-align: center; line-height: unset;}

#order #loginPopup #btnLogin,
#order #loginPopup #btnOldLogin{
	padding: 8px 0;
	font-weight: bold;
	color: #FFF;
	background-color: #b79646;
	border: solid 1px #b79646;
	font-size: 100%;
	cursor: pointer;
	width: 120px;
}
#order #loginPopup #btnLogin:hover,
#order #loginPopup #btnOldLogin:hover{ opacity: 0.7;}


#order #loginPopup .loginMove dl{ display: block;}
#order #loginPopup .loginMove dd{ width: 100%;}
*/


#order #popupBox dl{ display: block;}
#order #popupBox > dl{ padding: 0;}


#order #new_member,
#order #passwordSetting{ margin-top: 5px; width: 100%;}
#order #new_member dl,
#order #passwordSetting dl{ padding: 5px 0;}
#order #new_member dt,
#order #passwordSetting dt{
	text-align: center;
	font-size: 110%;
	font-weight: 500;
	width: 230px;
	margin: auto;
	border: solid 4px #96d1bf;
	cursor: pointer;
}
#order #passwordSetting dt{ border: solid 2px #96d1bf;}
#order #new_member dt:hover,
#order #passwordSetting dt:hover{ opacity: 0.7;}
#order #new_member dt a,
#order #passwordSetting dt a{ color: #6ea896; vertical-align: sub;}
#order #order #new_member dt a:hover,
#order #passwordSetting dt a:hover{ text-decoration: unset;}
#order #new_member dd,
#order #passwordSetting dd{
	margin-top: 5px;
	text-align: center;
	font-size: 78%;
	color: #756520;
	width: 100%;
}



#order #loginMail,
#order #loginCustomer{ width: 100%; margin-top: 15px;}
#order #loginMail > dl,
#order #loginCustomer > dl{ padding: 0;}
#order #loginMail dl,
#order #loginCustomer dl{ border-bottom: none;}
#order #loginMail dt,
#order #loginCustomer dt{
	font-size: 110%;
	font-weight: 500;
	width: 230px;
	margin: auto;
	border: solid 4px #96d1bf;
	cursor: pointer;
	background-color: #96d1bf;
	color: #FFF;
	padding: 2px 0 0;
	text-align: center;
}
#order #loginMail dt:hover,
#order #loginCustomer dt:hover{ opacity: 0.7;}
#order #loginMail dd,
#order #loginCustomer dd{
	margin-top: 5px;
	text-align: center;
	font-size: 78%;
	color: #756520;
	width: 100%;
}


#order #popupBox .loginBox{
	 display: none;
	border-top: solid 1px #d3c3b2;
	border-bottom: solid 1px #d3c3b2;
	width: 90%;
	margin: 10px auto;
	padding: 20px 15px;
}
#order #loginMail .loginBox dt,
#order #loginCustomer .loginBox dt,
#order #loginMail .loginBoxArea dt{
	width: 100%;
	border: none;
	background-color: unset;
}
#order .loginBox dt p,
#order .loginBoxArea dt p {
	width: fit-content;
	margin: auto;
	font-size: 90%;
}
#order .loginBox dt input,
#order .loginBoxArea dt input {
	margin: auto;
	padding: 3px 5px;
	width: 70%;
}

#order .loginBox dd,
#order .loginBoxArea dd{ font-size: 100%;}

#order .loginBox #btnLogin,
#order .loginBox #btnOldLogin,
#order .loginBoxArea #btnLogin{
	width: 150px;
	padding: 4px;
	font-weight: bold;
	color: #947f28;
	background-color: #FFF;
	border: solid 1px #947f28;
	font-size: 94%;
	cursor: pointer;
	margin: 1.5em auto 0;
	display: block;
}


#order #popupBox .loginBoxArea{
	 display: block;
	border-top: solid 1px #d3c3b2;
	border-bottom: solid 1px #d3c3b2;
	width: 90%;
	margin: 10px auto;
	padding: 20px 15px;
}






#order #loginPopup #closeBtn{
	width: 1em;
	height: 1em;
	font-size: 2em;
	text-align: center;
	background-color: #616161;
	opacity: 1;
	padding: 0;
	color: #fff;
	line-height: 1em;
	background-image: none;
	transition: background-color .3s;
	top: -20px;
	right: -20px;
	position: absolute;
	cursor: pointer;
	border-radius: 6px;
	padding: 1px;
}



#fullOverlay{
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	background: rgb(71 70 70 / 45%);
	z-index: 999;
}


/*#formBox #adressForm dt{ margin: auto;}*/
#formBox #adressForm #nameInput span,
#formBox #adressForm #nameInputK span,
#formBox #adressForm #mailInput p,
#formBox #adressForm #telInput p{ vertical-align: sub;}
#formBox #adressForm #nameInput input,
#formBox #adressForm #nameInputK input { margin: 0 5px; width: calc(50% - 45px);}

#formBox #adressForm #memberHope,
#formBox #adressForm #mailCustomer{ padding-bottom: 0; border-bottom: unset; width: 100%;}


#order .pointMsg{ font-size: 83%; color: #ff3a2b; margin: 10px 0 15px;}


dl.ReceiveDl,
dl.AdressDl{ flex-wrap: wrap;}


#formBox dl #deliveryImportant,
#formBox dl #calendarNote{
	line-height: 1.5;
	margin: 0.5em 0;
	/*color: #e92323;*/
	font-weight: bold;
	width: 100%;
	text-align: center;

	padding: 0.5em;
	background-color: rgb(255 219 28 / 61%);
}
#formBox dl .calendarNote{
	font-size: 12px;
	vertical-align: middle;
	padding: 0;
	font-weight: normal;
	margin-top: 0.5em;
}
#formBox dl .calendarNote.dispNone{
	display: none;
}



#formBox dl .important{
	line-height: 1.5;
	margin: 0.5em 0;
	font-weight: normal;
	width: 100%;
	text-align: center;
	font-size: small;
	padding: 0.5em;
	background-color: rgb(255 219 28 / 61%);
}
.ftRed{ color: #e92323;}

.ft90{ font-size: 90%}

.ftw900{ font-weight: 900;}




/** アドレス帳 **/

#order #addressBookPopup{
	display: none;
	background: #FFF;
	position: fixed;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 9999;
	width: 85%;
	max-width: 600px;
	max-height: calc(100vh - 15%);
	/*overflow: auto;*/

	padding: 3%;
	color: #555555;
	background-color: #fff;
	box-shadow: 0 0 7px 10px #fff;
}


#order #popupAddreaaBox{
	overflow: auto;
	max-height: 73vh;
}



#order #closeAddreaaBookBtn{
	width: 1em;
	height: 1em;
	font-size: 2em;
	text-align: center;
	background-color: #616161;
	opacity: 1;
	padding: 0;
	color: #fff;
	line-height: 1em;
	background-image: none;
	transition: background-color .3s;
	top: -20px;
	right: -20px;
	position: absolute;
	cursor: pointer;
	border-radius: 6px;
	padding: 1px;
	display: flex;
	justify-content: center;
	align-items: center;
}



#addressBookPopup .addressBox{
	padding: 10px;
	border: 2px solid #e3e3e3cc;
	border-radius: 10px;
	max-width: 550px;
	margin: auto auto 1em;
	cursor: pointer;
	background: #f9f9f7;
}
#addressBookPopup .addressBox:last-child{
	margin: auto auto 0;
}
#addressBookPopup .addressBox:hover{
	opacity: 0.8;
}

#addressBookPopup .addressBox p{
	font-weight: bold;
	padding: 3px 8px;
	background-color: #cdaf86;
	border-radius: 5px;
	line-height: 1.5;
	margin-bottom: 10px;
}

#addressBookPopup .addressBox dl{
	width: 95%;
	margin: auto;
	display: flex;
	align-items: baseline;
	padding: 5px 0;
}

#addressBookPopup .addressBox dl dt{
	width: 100px;
	font-size: 90%;
}

#addressBookPopup .addressBox dl dd{
	width: calc(100% - 100px);
}

#addressBookPopup dl:after{ background: none;}


#formBox #adressForm .formInner dl dd{
	flex-wrap: wrap;
	display: flex;
	align-items: center;
}

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


@media only screen and (max-width: 979px){
	#formBox #adressForm #nameInput input,
	#formBox #adressForm #nameInputK input { margin: 0.3em 0 0.3em 5px; width: calc(100% - 37px);}

	#formBox #adressForm #memberHope dd,
	#formBox #adressForm #mailCustomer dd{ width: 100%;}

	#order #customerLogin label span,
	#order #customerLogout label span{ width: fit-content; padding: 8px 20px;}
	#order #loginPopup{ width: 90%;}
	#order #loginPopup #btnLogin,
	#order #loginPopup #btnOldLogin{ padding: 5px 10px;}
	#order #loginPopup #closeBtn{ top: 0px; right: 0px;}
	#order #btnLogin,
	#order #btnOldLogin{ width: 100px; padding: 8px 10px;}

	#order #loginPopup .loginMove a{ font-size: 120%;}



	#addressBookPopup .addressBox {
		font-size: 120%;
	}
	#addressBookPopup .addressBox dl {
		padding: 5px;
	}


	#formBox #deliveryForm dl #deliveryImportant{
		width: 100%;
	}

}

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

	#order #loginPopup{ width: 80%; padding: 6% 4%;}
	#order #loginPopup h1{ padding: unset; text-align: center; font-size: 150%;}

	#order #loginPopup h1:before,
	#order #loginPopup h1:after{ width: 0;}


	#order #popupBox .loginBoxArea{
		width: 100%;
		margin: 10px auto;
		padding: 20px 5px;
	}

	#order #popupBox .loginBoxArea dt{
		display: block;
	}
	#order #popupBox .loginBoxArea dt p{
		padding: 8px 0 0;
	}
	#order #popupBox .loginBoxArea dt input{
		width: 100%;
	}

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

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

	#formBox #datepickerId{
		width: 150px;
	}

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

	#formBox #adressForm .formInner dl dd{
		width: 100%;
		margin: auto;
	}

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

	#addressBookPopup .addressBox {
		font-size: 100%;
	}


}