@charset "utf-8";

textarea {
	height: 4rem;
	width: 92%;
	max-width: 92%;
	border-radius: 3px;
	padding: 5px;
	border: solid 1px #DDD;
}




/*----------------------------------------
					style_fullorderから移植
----------------------------------------*/

body{overflow: visible;}
.orderContent img{object-fit: cover}
/*---------------------
 　　topText
---------------------*/

#contents .title { position: relative; margin-bottom: 30px;}
#contents .title h3{
	text-align: center;
	color:  #A38255;
	/* padding: 2rem 0 1rem; */
	font-size: 1.8rem;
	font-family: serif;
}
.mainTitle {width: 100%; border-top: solid 6px #A38255;}
.mainTitle h2, .mainTitle p{text-align: center;}
.mainTitle h2{
	font-size: 1.2em;
	background-color: #A38255;
	color: #fff;
	width: 30%;
	margin: 0 auto;
	border-radius: 0 0 10px 10px;
	border-color: #A38255;
}
.mainTitle p{color: #A38255; line-height: 1.4em; margin: 10px 0;}

#formBox {
	border: none;
	width: 980px;
	margin: 0 auto;
	padding: 35px;
}
#formBox .formInner {margin: 35px auto 50px; width: 700px;}
#formBox h4 {
	text-align: center;
	padding: 0.2rem 0;
	background: #b79646;
	color: #FFF;
	font-size: 20px;
}
#formBox .formInner {margin: 35px auto 50px; width: 700px;}

#orderForm{ -webkit-box-shadow: 0px 0px 3px 2px #eeeeee;}

.dispFlex{display: -webkit-box;display: -ms-flexbox;display: flex;}

#formOuter {
	display: -webkit-box;display:
	-ms-flexbox;display: flex;
	margin-left: -65px;
	height: 100%;
	position: relative;
}
#formOuter .orderSideMenu {
	position: -webkit-sticky;
	position: sticky;
	top: 30px;
	height: 570px;
}
#formOuter .orderSideMenu ul {margin-right:15px;}
#formOuter .orderSideMenu li {
	width: 50px;
	background-color: #a38255;
	-webkit-box-shadow:4px 4px 15px -10px #000000;
	box-shadow:4px 4px 15px -10px #000000;
	margin-bottom: 0.1rem;
	padding: 2px;
}

.orderContent{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	border-bottom: solid 1px #A38255;
}
.orderContent input[type=radio]{ vertical-align: initial; margin-right: 0.5em;}
.orderContent .required {display: inline-block; color: #F21C7A;}
.orderContent textarea {resize: none;}

input[type="text"] {
	border-radius: 3px;
	border: solid 1px #DDD;
	margin-right: 0.5rem;
}



.formCheckBox { width: 90%; margin: 0 auto;}
.formCheckBox dl{ width: 100%; display: flex;}


.formCheckBox dt {
	display: inline-block;
	width: 20%;
	vertical-align: top;
	padding: 2rem 0;
	color: #A38255;
}
.formCheckBox dt img {margin-top: -5px; margin-right: 10px;}
.formCheckBox dd {
	display: inline-block;
	width: 80%;
	padding: 2rem 1rem;
}
.formCheckBox dd li p {display: inline-block; padding: 0.5rem;}
/*.column li:nth-child(even) {width: 15%;margin-top: 10px;}
.column li:nth-child(odd) {width: 15%;	margin-top: 10px;}
.column li:last-child {width: 65%;}*/

#orderGallery .galleryInput {width: 100%;}
#orderGallery .galleryNumber {width: 100%;}
#orderGallery input[type=text] {width: 30%;}
#orderGallery .orderTextArea{display: -webkit-box;display: -ms-flexbox;display: flex;}
#orderGallery .orderTextArea p{padding: 0;}
#orderGallery textarea {width: 100%;height: 100px;margin-top: 10px;}



.orderTextAreaDetail{ padding:12px 0;}
.orderTextAreaDetail dt,
.orderTextAreaDetail dd{ width:70%; margin:0 0 5px 0; padding:0 0 5px 0; color:#000; display:block; line-height:1.2em; font-size:90%; border-bottom:#A38255 dotted 1px; float:left;}

.orderTextAreaDetail dt{ border-bottom:#A38255 dotted 1px; }
.orderTextAreaDetail dd{}
.orderTextAreaDetail dd#galleryimgBox{ float:right; width:27%; border:none; text-align:center;}
.orderTextAreaDetail dd#galleryimgBox img{ width:100%; height:auto;}

.orderTextAreaDetail dd.attenDd{}
.orderTextAreaDetail dd.attenDd li{padding-left:1em; text-indent:-1em; color:#F03; line-height:1.2em; margin:3px 0;}


a.gallerySetA{
	background:#A38255;
	display:block;
	background-image:url(/images/triangle3.png);
	background-position:7px 50%;
	background-repeat:no-repeat;
	background-size: auto 50%;
	color:#FFF;
	padding:0 0.5em 0 1.7em;
	border-radius:10px;
}

#orderCyosan input[type=text]{width: 160px;}
#orderImgpic input[type=file]{margin-left: 30px; padding-bottom: 1rem;}
input[name^="file_tmp"].fileTmp {margin: -1rem 0 1rem;border:none;display:none;}
#orderMemo textarea{ height: 170px;}

/*formBox*/
/*#formBox dl {
	border-bottom: 1px dashed #CCC;
	padding: 14px 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	position: static;
}
#formBox dl dt {
	color: #A38255;
	font-size: 15px;
	width: 180px;
	padding: 0;
}
#formBox dl dd {width: 520px; padding: 0;}*/
/*dl:after {
	content: "";
	position: absolute;
	width: 90%;
	height: 1px;
	background: #DDD;
	bottom: 0;
	left: 50%;
	-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
			transform: translateX(-50%);
}*/
/*#formBox dl:last-child {border: none;}*/
/*
#naga input[type=checkbox]{margin: 0.3rem 0.5rem 0 0;}
.message_image div{ margin-bottom: 30px;}
.message_image p{padding: 0; font-size: 0.9rem;}*/


/* style_form.css */
/*#confirmArea #orderConfirme dl .oderPhoto{margin: 0;}*/

#formBox .confirmBtn p{ width: 37%; margin: 0 auto;}
#formBox .confirmBtn p button {height: 54px; border: none;}

/*#receiveAboutBlock span {line-height: 1.4rem;}*/
#formBox .pinkTxt a:link,
#formBox .pinkTxt a:visited{color: #6668B7;}
/*
#formBox #adressForm #nameInputK input {margin: 0 5px; width: 120px;}*/

.message .social-bottom { text-align:center;}
.message .social-bottom .social-icon {
	display:flex;/*inline-block*/
	justify-content: space-around;
	margin: 0 auto;
	width: 70%;/*10%*/
	padding: 2rem 1.6rem;
}
/*#formBox #adressForm #nameInput,
#formBox #adressForm #nameInputK{width: 40%;}
#formBox #adressForm #nameInput input,
#formBox #adressForm #nameInputK input {width: 30%;}*/



input[type=number]{ padding: 5px; margin-right: 0.5em;}
/*
#paymentForm input[type=radio]{ vertical-align: initial; margin-right: 0.5em;}
*/

.br450{ display: none;}


/*---------------------
	 sp
---------------------*/

@media only screen and (max-width: 979px) {
	.spNone {display: none;}
	.pcNone {display: block;}

	#formOuter .orderSideMenu {
		visibility: hidden;
	}

	#contents .title h3 {font-size: 1.5rem}
	.mainTitle h2{width: 70%;}
	.mainTitle p{margin: 3% 5% 1%; text-align: left;}

	.formCheckBox { width: 100%;}
	.orderContent {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		padding: 3% 0 2em;
		margin: 0 4%;
	}

	.formCheckBox dl { width: 100%;}
	.orderContent dl {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
	}

	.orderContent #orderTextAreaDetail dl {
		margin: 0;
	}

	.formCheckBox dt{ width: 100%; padding: 1rem 0;}
	.formCheckBox dd {width: 100%; padding: 0rem 1rem;}
	/*.column li:nth-child(odd),
	.column li:nth-child(even),
	.column li:last-child{width: 100%; margin-top: 0;}*/

	#orderCyosan dd{ line-height: 3;}
	.orderContent .column #caketype label{ font-size: 120%;}
	.orderContent input[type=radio]{ vertical-align: text-top;}

	textarea{ width: 100%; max-width: unset;}


	#orderGallery dd{
		width: 100%;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
	}
	#orderGallery .orderTextArea{
		-webkit-box-pack: start;
		-ms-flex-pack: start;
		justify-content: flex-start;
	}
	#orderGallery .galleryInput{width: 100%; margin-right: 0;}
	#orderGallery input[type=text]{width: 40%;}
	#orderGallery textarea {margin: 10px auto;}


	#orderCaketype .column li label{ vertical-align: super; width: 100%;}

	.message .social-bottom .social-icon {width: 26%;/* *3の場合 → width: 50%;*/}
	.message .social-bottom .social-icon a {margin: 0 0.5rem;}


	/*formBox*/
	#formBox {width: 100%; padding: 4%;}
	#formBox .formInner {
		width: 100%;
		margin: 4% auto 7%;
		padding: 0 0.5em;
	}
	#formBox .formCheckBox dl dt {width: 35%;	padding: 0 3% 0 0; font-size: 13px;}
	#formBox .formCheckBox dl dd {width: 62%;}
	#formBox .smallTxt {display: block;}

	#formBox .confirmBtn p{width: 80%;}
/*	#formBox #adressForm #nameInput input,
	#formBox #adressForm #nameInputK input,
	#formBox #paymentForm #nameDInput input {width: 70%; margin-bottom: 0.3em !important;}
*/

	.orderTextAreaDetail dt,
	.orderTextAreaDetail dd{ float:none;width:auto;}
	.orderTextAreaDetail dd#galleryimgBox{ float:none; width:auto;}
	.orderTextAreaDetail dd#galleryimgBox img{ width:40%; height:auto;}



	a.gallerySetA{
		line-height:1.2em; font-size:80%;
		padding:0.4em 1em 0.2em 2.5em;
	}

	/*#datepickerId{ width: 70% !important; margin-bottom: 0.5em; font-size: 110%; height: unset;}*/
/*	#contents #paymentForm input[type=radio]{ vertical-align: middle; margin-right: 0.5em;}*/

	#contents input[type="text"],
	#contents select{ height: unset; font-size: 110%; padding: 5px;}

	.formInner dt{ font-size: 110%;}
	.formInner .formCheckBox dt{ font-size: 125%;}
	.formInner dd{ font-size: 110%;}
	.formInner dd label{ vertical-align: super; width: unset;}

}



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

	.br450{ display: block;}

	.br450 + span{ margin-left: 2em;}
}





.dispNone{ display: none;}





/*----------------------------------------
						個別設定、上書き
----------------------------------------*/


#orderGallery .orderTextArea{
	align-items: center;
}

.orderTextAreaDetail {
	margin-top: 1.5em;
	border-top: #A38255 dotted 1px;
}

label.cake_size{
	display:none;
}

label.cake_size.disp{
	display:block;
}

label.cake_base{
	display:block;
	line-height: 1.2;
	padding: 0 0.5rem;
}


#photoArea {width:100%;}


#photoArea dl:first-child { border-top: 1px dashed #c1c1c1;}
#photoArea dl:last-child{ border-bottom: unset;}
dl[entity=GalleryPhoto]{ position: relative;}

.imageGroup{ margin-bottom: 1.5em; position: relative;}
.imageGroup[data-photo="none"]{ margin-bottom: unset;}

.imageGroup p.editPhoto{
	width:5vh;
	height:5vh;
	position:absolute;
	bottom:0;
	right:0;
	margin: 0 0.2em 0.2em 0;
}
.imageGroup .editPhoto img{ cursor: pointer;max-width: 200%;}


input[type="file"] { display: none;}

.imageGroup p{ text-align:center; font-size:120%; width: 90%; margin: 0 auto;}
.imageGroup input{ margin: unset;}



.photoNote{ margin-left: 5%;}
.posiRelative{ position: relative;}


.add_photo_label{
	line-height: 1.8em;
	padding: 0 1em;
	background: #999;
	border: 1px solid #999;
	color: #FFF;
	border-radius: 5px;
	display: inline-block;
}




.orderContent #caketype{
	display: flex;
	flex-wrap: wrap;
}
#orderCaketype #caketype li{
	width: calc(100% / 4);
	text-align: center;
}


#orderCaketype #caketype li label{
	padding: 0 0.5rem 0.5rem 0.5rem;
	display: inline-block;
}
#orderCakesize #cakesize label{
	padding: 0 0.5rem 0.5rem 0.5rem;
}

.formInner #cakebase p{
	font-size: 97%;
}


li.image_li{
	padding-bottom:1em;
}


li.image_li div.image_index{

}

li.image_li div.image_layout{
	display:flex;
	/*height:100px;*/

}

li.image_li div.image_thumb{
	width:100px;
	/*height:100px;*/
	object-fit: contain;
}

li.image_li div.input_note{
	width:calc(100% - 100px);
	height:100px;
}
li.image_li div.input_note textarea{
	height:100%;
}


#erroerBox{ margin: 2em auto 0; padding: 1em; border: #ef7c7c 4px double; width: 70%;}


#sample_image_list .image_thumb{ position: relative;}

#sample_image_list .delete_upload_image{
	padding: 4px 2px 2px;
	color: #FFF;
	line-height: 0.9em;
	background-color: #fe3e4a;
	border-radius: 50%;
	position: absolute;
	right: -6px;
	top: -6px;
	cursor: pointer;
}
#sample_image_list .delete_upload_image:hover{ opacity: 0.9;}

#sample_image_list .input_note textarea{ margin-left: 1em;}



.attention{
	background-color: #fff7d6;
	border: #947f28 1px solid;
	padding: 5px 0;
	border-radius: 5px;
	margin-bottom: 20px;
}

.attention .message{

	text-align: center;
	color: #e600a1;
	font-weight: normal;

}


#cakebase .clrBlue{ color: #000842; margin: 0 0 15px;}


/*----------------------------------------------------------------------------
*																  顧客情報
----------------------------------------------------------------------------*/

#formBox input[type="checkbox"],
#formBox input[type="radio"] {
	margin: 0 0.5em 0 0;
	vertical-align: middle;
}


/*----------------------------------------------------------------------------
*																  画像拡大
----------------------------------------------------------------------------*/


#blackout{
	background: rgba(0, 0, 0, 0.5);
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 1000;
}


#viewImage{
	z-index: 1002;
	position: absolute;
	text-align: center;
}
#viewImage img{
	z-index: 1003;
}

#sample_image_list .image_thumb p span{
	font-size: 80%;
	margin: 4px 4px;
	cursor: pointer;
	line-height: 1.2;
	border: 1px solid #999;
	border-radius: 10px;
	padding: 2px 8px;
}

#sample_image_list .image_thumb p span:hover{ background-color: rgb(203 203 203 / 43%);}


/* ピック */

#pickArea dt,
#pickArea dd{
	padding: 0;
	line-height: 1.3;
	margin: auto 0;
}

#pickArea dd label{
	vertical-align: middle;
	padding: 0 0 0 2em;
	line-height: 1;
}

#pickArea a{
	font-size: 80%;
	color: #451c08;
	text-decoration: underline;
	cursor: pointer;
	margin-left: 1em;
}
#pickArea a:hover{
	color: #451c088a;
}



@media only screen and (max-width: 979px){
	#erroerBox { width: 95%; font-size: 85%;}


	a.gallerySetA{
		line-height: 1.4;
		padding: 0.2em 1em 0.3em 2.5em;
		font-size: 95%;
	}

	#formBox #receiptName,
	#formBox #receiptTxt{ width: 78%;}


	#pickArea dl{
		flex-direction: unset;
	}
	#pickArea dt{
		width: 30%;
		margin: auto 0;
		min-width: 100px;
	}
	#pickArea dd{
		width: 70%;
		margin: auto 0;
	}

	.orderContent #caketype label{
		font-size: 120%;
	}
	.formInner .formCheckBox dt {
		font-size: 135%;
	}
	.formInner #cakesize label,
	.formInner #cakebase label{
		font-size: 115%;
	}

}


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

	#orderCaketype #caketype li{
		width: calc(100% / 3);
	}
}



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

	#pickArea dt{
		width: calc(100% - 60px);
	}

	#pickArea dd{
		text-align: center;
		width: 50%;
		min-width: 60px;
	}

	.attention {
		padding: 5px 10px;
	}
}

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

	li.image_li div.image_layout{
		display: block;
	}
	li.image_li div.input_note{
		width: 100%;
	}
	#sample_image_list .input_note textarea{
		margin: 0;
	}

}

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

	#orderCaketype #caketype li{
		width: calc(100% / 2);
	}
}