@charset "utf-8";
/* CSS Document */


/*----------------------------------------------------------------------------
***                                                                  form
----------------------------------------------------------------------------*/
.topBox{ position:relative; margin-bottom:30px;}
.topBox h3{ color:#a38255; font-size:28px; text-align:center; padding:0 !important;}
/*202008↓*/
.topBox .listBack{ color:#a38255;font-size:16px; position:absolute; top:0; bottom:0; padding:10px 0;}
/*202008↑*/
.topBox p a:link,
.topBox p a:visited{ color:#a38255;}

#formBox{ width:980px; margin:0 auto; border:1px solid #a38255; padding:35px;}
#formBox form{ box-shadow:none; -webkit-box-shadow:none; border-radius:none;}

#formBox h4{ text-align:center; padding:0.2rem 0; background:#b79646; color:#FFF; font-size:20px;}
#formBox dl{ border-bottom:1px dashed #CCC; padding:14px 0; display:flex; position:static;}
#formBox dl:last-child{ border:none;}
#formBox dl dt{ color:#947f28; font-size:15px; width:180px; padding:0; }
#formBox dl dd{ width:520px; padding:0; }
#formBox .smallTxt{ display:inline-block; font-size:12px; margin:0 0 0 0.3rem; vertical-align:middle; padding:0; font-weight:normal;}
#formBox .pinkTxt{ display:inline-block; color:#ed1e79; font-weight:normal;}
#formBox .pinkTxt a:link,
#formBox .pinkTxt a:visited{ color:#ed1e79;}
#formBox .formInner{ margin:35px auto 50px; width:700px;}

#formBox select,
#formBox input{ line-height:1.8em; padding:0.3em; border:1px solid #b3b3b3; appearance:auto;}
#formBox select{max-width: 100%;height: 2.55em; background-color: #FFF;}/*202008*/
#formBox input[type="text"]{ width:220px;}
#formBox input[type="password"]{ line-height:1.5em; width: 80px;}
#formBox input[type="checkbox"],
#formBox input[type="radio"]{ margin-right:0.3rem; vertical-align:baseline;}
#formBox input[readonly=""]{background:rgba(100,100,100,0.1);-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none; outline: none;}
#formBox label{ padding:0 0.5rem;}


#formBox #candleForm ul{ margin:30px 0 30px;}
#formBox #candleForm ul li{ margin:0 15px 60px; position:relative; float:left;}
#formBox #candleForm ul li:nth-child(1),
#formBox #candleForm ul li:nth-child(6){ margin-left:0;}
#formBox #candleForm ul li:nth-child(5){ margin-right:0;}
#formBox #candleForm ul li img{ display:block; margin:auto; margin-bottom:10px;}
#formBox #candleForm ul li p{ font-size:13px; text-align:center; line-height:1.5em; padding:0.2rem 0;}
#formBox #candleForm ul li p:nth-of-type(1){ padding:0;}
#formBox #candleForm ul li p strong{ font-weight:bold; }
#formBox #candleForm ul li select{ position:absolute; left:0; right:0; margin:0 auto; width:60px;}

#formBox #paymentForm #creditBlock{ display:none;}
#formBox #paymentForm #creditcdInput li{ margin:0.3rem 0}
#formBox #paymentForm #creditcdInput .smallTxt{ display:block;}
#formBox #paymentForm #receiptTxtBlock{ display:none; line-height:2.4em;}
#formBox #paymentForm #receiptTxtBlock span{ display:block;}
#formBox #paymentForm #receiptTxtBlock #receiptName {margin-right:0;}

#formBox #adressForm #nameInput input{ margin:0 5px; width:120px;}
#formBox #adressForm #adressInput input{ margin:0 0.3rem;}
#formBox #adressForm #adressInput input:first-child{ margin:0 0.3rem 0 0;}/*202008*/
#formBox #adressForm #adressInput li{ margin:0.3rem 0}
#formBox #adressForm #adressInput button{ line-height:1.8em; padding:0 1em; background:#999; border:1px solid #999; color:#FFF; border-radius:5px;}
#formBox #adressForm #adressInput #Post1,
#formBox #adressForm #adressInput #Post2{ width:80px;}

#formBox #deliveryForm #adressSelect{ margin-bottom:15px;}
#formBox #deliveryForm #adressSelect li:first-child{ float:left; font-size:13px;}
#formBox #deliveryForm #adressSelect li:last-child{ float:right; font-size:12px;}
#formBox #deliveryForm #nameDInput input{ margin:0 5px;}
#formBox #deliveryForm #adressDInput input{ margin:0 5px;}
#formBox #deliveryForm #adressDInput input:first-child{ margin:0 5px 0 0;}/*202008*/
#formBox #deliveryForm #adressDInput li{ margin:0.3rem 0}
#formBox #deliveryForm #adressDInput button{ line-height:1.8em; padding:0 1em; background:#999; border:1px solid #999; color:#FFF; border-radius:5px;}
#formBox #deliveryForm #nameDInput span{ vertical-align: middle;}
#formBox #deliveryForm #nameDInput #DName1,
#formBox #deliveryForm #nameDInput #DName2{ margin: 0 5px 5px; width: calc(50% - 45px);}
#formBox #deliveryForm #adressDInput #DPost1,
#formBox #deliveryForm #adressDInput #DPost2{ width:80px;}
#formBox #deliveryForm select,
#formBox #deliveryForm input{ /*background:#efefef;*/}


#formBox .confirmBtn p{ text-align:center;}
#formBox .confirmBtn p:hover{ opacity:0.6;}
#formBox .confirmBtn button{ border:none;}

/*----------------------------------------------------------------------------
***                                                                  confirm
----------------------------------------------------------------------------*/
.semiConfirm .topBox p{ color:#ed1e79;}

#confirmArea{ width:980px; margin:0 auto; border:1px solid #a38255; padding:35px;}

#confirmArea h4{ text-align:center; padding:0.2rem 0; background:#b79646; color:#FFF; font-size:20px;}
#confirmArea dl{ border-bottom:1px dashed #CCC; padding:8px 0 5px; display:flex; position:static;}
#confirmArea dl dt{ color:#947f28; font-size:15px; width:180px; padding:0; margin-right:20px;}
#confirmArea dl dd{ padding:0; font-size:16px; }
#confirmArea .smallTxt{ display:inline-block; font-size:12px; margin:0 0 0 0.5rem; vertical-align:middle; padding:0; font-weight:normal;}
#confirmArea .pinkTxt{ display:inline-block; color:#ed1e79; font-weight:normal;}
#confirmArea .pinkTxt a:link,
#confirmArea .pinkTxt a:visited{ color:#ed1e79;}

/*202008↓*/
#confirmArea .confirmCakeBox{}
#confirmArea .confirmCakeBox .formInner{padding: 0 35px 15px;width:100%;border-bottom: 1px solid #b79646;}
/*202008↑*/
#confirmArea .formInner{ margin:35px auto; width:840px;}

#confirmArea #orderConfirme .cakeImgBox{ float:left;}
#confirmArea #orderConfirme .oderCakeName{ font-size:24px; float:right; width:680px; padding:0;}
#confirmArea #orderConfirme .oderCakeContent{ float:right;}
/*202008↓*/
#confirmArea #orderConfirme .oderCakeContent dl:last-child{border-bottom:none;}
/*202008↑*/
#confirmArea #orderConfirme dl{ width:680px; padding:3px 0 2px;}
#confirmArea #orderConfirme dl dt{ width:90px;}
#confirmArea #orderConfirme dl dd p{ display:inline-block;}
#confirmArea #orderConfirme dl .oderPhoto{ margin:5px 0 5px 15px; }
#confirmArea #orderConfirme #totalPrise{ color:#ed1e79; text-align:right; font-weight:normal;}
#confirmArea #orderConfirme #priseTxt{ color:#000; font-size:31px; margin-left:0.4rem; }
#confirmArea #orderConfirme #taxin{ font-size:13px; color:#000; margin-left:-0.6rem;}

#confirmArea #orderConfirme .oderDetailBox{ padding:25px 30px; background:#fcf7ed; margin-bottom:40px;}
#confirmArea #orderConfirme .oderDetailBox h5{ font-size:20px; text-align:center;}
#confirmArea #orderConfirme .oderDetailBox dl{ width:100%;}
#confirmArea #orderConfirme .oderDetailBox #oderDetailHead{ border:none; margin:20px 0;}
#confirmArea #orderConfirme .oderDetailBox #oderDetailHead dt{ border-bottom:1px solid #a38255; text-align:center;}

#confirmArea #orderConfirme .oderDetailBox dl dd{ margin-right:20px; font-weight:normal;}
#confirmArea #orderConfirme .oderDetailBox dl dd:nth-child(1){ padding-left:20px; width:70%;}
#confirmArea #orderConfirme .oderDetailBox dl dd:nth-child(2){ text-align:center; width:15%;}
#confirmArea #orderConfirme .oderDetailBox dl dd:nth-child(3){ text-align:center; width:15%;}
#confirmArea #orderConfirme .oderDetailBox dl .candlePrice{ font-size:12px; color:#666666;}
#confirmArea #orderConfirme .oderDetailBox .marginTopDl{ margin-top:30px;}
#confirmArea #orderConfirme .oderDetailBox #koumoku{ width:70%;}
#confirmArea #orderConfirme .oderDetailBox #suryo{ width:15%;}
#confirmArea #orderConfirme .oderDetailBox #syokei{ width:15%;}

#confirmArea .finalPriseBox #totalPrise{ color:#947f28; font-weight:normal; border-bottom:3px solid #a38255; margin:0 auto; width:295px; padding:0; text-align:center;}
#confirmArea .finalPriseBox #priseTxt{ color:#000; font-size:31px; margin-left:0.4rem; }
#confirmArea .finalPriseBox #taxin{ font-size:13px; color:#000; margin-left:-0.6rem;}
#confirmArea .confirmBtn{ margin:28px auto 15px;}
#confirmArea .confirmBtn p{ text-align:center;}
#confirmArea .confirmBtn p:hover{ opacity:0.6;}
#confirmArea .backBtn{ color:#a38255; text-align:center;}
#confirmArea .confirmBtn button{ border:none;}



/*----------------------------------------------------------------------------
***                                                                  thanks
----------------------------------------------------------------------------*/
#thanksArea .txtBox{ margin:1.7rem auto 0;}
#thanksArea .txtBox p{ text-align:center;}
#thanksArea .txtBox h4{ text-align:center; color:#947f28; font-size:160% !important; margin-bottom:0.5rem; border-top: 1px solid #ccc; padding-top: 1em;}
#thanksArea .txtBox table{ margin:0.7rem auto 0;}
#thanksArea .txtBox tr td:first-child{ width:8rem; background:#fcf7ed;}
#thanksArea .txtBox tr td:last-child{ width:14rem;}

#thanksArea .txtBox  p a:link,
#thanksArea .txtBox  p a:visited{ color:#a38255;}

#thanksArea .pinkTxt {color: #ed1e79; font-weight: normal; font-size: 80%;}

/*---------------------
		スマホ対応
---------------------*/

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



	/*----------------------------------------------------------------------------
	***                                                                  form
	----------------------------------------------------------------------------*/

	.topBox{ margin-bottom:5%}
	/*202008↓*/
	.topBox .listBack{position: absolute;padding:2% 0;font-size: 80%;}
	/*202008↑*/
	#formBox { width:95%; padding:4%;}
	#formBox .formInner{ width:100%; margin:4% auto 7%; padding: 0 0.5em;}
	#formBox dl{ padding: 4% 0;}
	#formBox dl dt{ width:35%; padding:0 3% 0 0; font-size: 13px;}
	#formBox dl dd{ width:62%}
	#formBox input[type="text"]{ width:100%;}
	#formBox .smallTxt{ display:block;}

	#formBox #candleForm ul{ width:100%; margin: 8% 0;}
	#formBox #candleForm ul li{ width:50%; margin:0 auto 18%;}

	#formBox #adressForm #nameInput input{ width:70%;}
	#formBox #adressForm #adressInput li{ line-height:2rem;}
	#formBox #adressForm #adressInput .smallTxt{ display:inline-block;}
	#formBox #adressForm #adressInput #Post1{ width:25%;}
	#formBox #adressForm #adressInput #Post2{ width:30%;}

	#formBox #deliveryForm #adressDInput li{ line-height:2rem;}
	#formBox #deliveryForm #adressDInput .smallTxt{ display:inline-block;}
	#formBox #deliveryForm #nameDInput #DName1,
	#formBox #deliveryForm #nameDInput #DName2{ width: calc(100% - 35px);}
	#formBox #deliveryForm #adressDInput #DPost1{ width:40%;}
	#formBox #deliveryForm #adressDInput #DPost2{ width:30%;}
	#formBox #deliveryForm #nameDInput{ line-height:2.5rem;}
	#formBox #deliveryForm ul li{ float:none !important; display:block;}

	#formBox .confirmBtn button{ width:100%; background:none;}


	/*----------------------------------------------------------------------------
	***                                                                  confirm
	----------------------------------------------------------------------------*/


	#confirmArea { width:95%; padding:4%;}
	#confirmArea .formInner{ width:100%; margin:4% auto 7%;}
	/*202008↓*/
	#confirmArea .confirmCakeBox{}
	#confirmArea .confirmCakeBox .formInner{padding: 0 0% 10%;margin-bottom: 10%;width: 100%;}
	#confirmArea dl dt{ width:35%; padding:0 3% 0 0;}
	#confirmArea dl dd{width: 65%;font-size: 81%;}
	/*202008↑*/
	#confirmArea .smallTxt{ margin:0;}

	#confirmArea #orderConfirme .cakeImgBox{ float:none; text-align:center; margin:4% 0;}
	#confirmArea #orderConfirme .oderCakeName{float:none;width:100%;text-align:center;font-weight: bold;}/*202008*/
	#confirmArea #orderConfirme .oderCakeContent{ float:none;}
	#confirmArea #orderConfirme dl{ width:100%;}
	#confirmArea #orderConfirme dl dt{margin-right:0.5rem;width: 7.5em;font-size: 81%;}/*202008*/

	#confirmArea #orderConfirme .oderDetailBox{ padding:7% 5%; margin-bottom:8%;}
	#confirmArea #orderConfirme .oderDetailBox #oderDetailHead{ margin:3% 0;}
	#confirmArea #orderConfirme .oderDetailBox #oderDetailHead dt{ font-size:90%;}
	#confirmArea #orderConfirme dl .oderPhoto{margin:0 0 4%;width: 65px;display: block;}/*202008*/
	#confirmArea #orderConfirme #totalPrise{ text-align:center; margin-bottom:5%;}
	#confirmArea #orderConfirme #priseTxt{ font-size:170%;}
	#confirmArea #orderConfirme #taxin{ }

	#confirmArea #orderConfirme .oderDetailBox dl dd{ font-size:70%; margin-right:0.5rem;}
	#confirmArea #orderConfirme .oderDetailBox dl dd:nth-child(1){ padding-left:0; width:60%}
	#confirmArea #orderConfirme .oderDetailBox dl dd:nth-child(2){ width:20%;}
	#confirmArea #orderConfirme .oderDetailBox dl dd:nth-child(3){ width:20%;}
	#confirmArea #orderConfirme .oderDetailBox .marginTopDl{ margin-top:1.5rem;}
	#confirmArea #orderConfirme .oderDetailBox #koumoku{ width:60%;}
	#confirmArea #orderConfirme .oderDetailBox #suryo{ width:20%;}
	#confirmArea #orderConfirme .oderDetailBox #syokei{ width:20%;}

	#confirmArea .finalPriseBox{ margin:8% 0;}
	#confirmArea .finalPriseBox #totalPrise{ width:100%;}
	#confirmArea .finalPriseBox #priseTxt{ font-size:170%;}

	#confirmArea .confirmBtn button{ width:100%; background:none;}


	#formBox dl{ padding: 2% 0;}

}

@media only screen and (max-width: 500px) {
	#formBox dl{ padding: 4% 0;}
}