ul {
	list-style: none;
}

button{
	appearance: none;
	border: none;
}

input[type="checkbox"], 
input[type="radio"]
{
	appearance: none;
	position: absolute;
	z-index: -1;
}

input[type="text"],
input[type="email"]
{
	padding:16px 20px;
	width: 100%;
	height: 60px;
	border: var(--border-color-darkgray) solid 1px;
	border-radius: 12px;
	
	font-size: .9rem;
	color: #666;
	box-sizing: border-box;
	outline: none;
}

select, textarea, [type="password"], [type="email"], [type="number"], [type="text"] {
	padding: 20px;
	width: 100%;
	font-size: .9rem;
	color: #666;
	border: var(--border-color-darkgray) solid 1px;
	border-radius: 0;
	box-shadow: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	border-radius: 12px;
}

.agreement input{
	display: none;
}


li.form-box{
	padding-bottom: 28px;
}

p.form-body{
}

.form-title{
	padding-left: 12px;
	font-size: .8rem;
}

.mw_wp_form_confirm p.form-body{
	padding:16px 20x;
	width: 100%;
	height: auto;
	min-height: 60px;
	border: var(--border-color-darkgray) solid 1px;
	border-radius: 12px;
	box-sizing: border-box;
}

span.mwform-checkbox-field-text {
  flex: 0 0 42px;
  position: relative;
  z-index: 1;
  display: inline-block;
  margin-right: 16px;
  width: 42px;
  height: 42px;
  background: #f5f5f5;
  text-indent: -99999px;
}

/* Agreement +++++++++++++++ */

li.agreement{
	padding-bottom: 44px;
}

li.agreement em{
	display: block;
	margin-bottom: 8px;
}

li.agreement a::after{
	content: "";
	position: relative;
	top: -1px;
	display: inline-block;
	margin-left: 8px;
	width: 0;
	height: 0;
	border-top: transparent solid 8px;
	border-right: transparent solid 8px;
	border-bottom: transparent solid 8px;
	border-left: var(--attention-color) solid 12px;
	vertical-align: middle;
}

.baseForm input:checked + span.checkbox
{
	border: var(--key-color) solid 4px;
}

.baseForm input:checked + span.radiobox::after, 
.baseForm input:checked + span.checkbox::after{
	content: '';
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	margin-top: -5px;
	margin-left: -6px;
	display: inline-block;
	width: 12px;
	height: 10px;
	border: var(--key-color) solid;
	border-width: 0 0 2px 2px;
	transform: rotate(-45deg);
}

label[for="agreement"]{
	display: flex;
	flex-flow: row nowrap;
	justify-content: start;
	align-content: center;
	align-items: center;
	
	margin-bottom: 8px;
}

/* 送信ボタン ++++++++++++++++++ */

.notice{
text-align: right;	
}

.baseForm{
/* 	margin-bottom: 32px;	
	height: 0;
 */	overflow: hidden;
}

.step main .contents .buttonarea.contact{
    display: flex;
    flex-flow: column;
    justify-content: start;
    align-content: center;
    align-items: start;
	margin-bottom: 68px;
}

.step main .contents .buttonarea.contact input{
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-content: center;
    align-items: center;
	margin-bottom: 20px;
	width: 100%;
	height: 60px;
	font-size: 1.2rem;
	font-weight: bold;
	color: #fff;
	border-radius: 12px;
	border: none;
	box-sizing: border-box;
	appearance: none;
	outline: none;
}

.step main .contents .buttonarea.contact a{
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-content: center;
    align-items: center;
	margin-right: 20px;
	width: min(240px, 30%);
	height: 60px;
	font-size: 18px;
	font-weight: bold;
	color: #fff;
	border-radius: 12px;
	background: var(--key-color);
	
}

.step main .contents .buttonarea.contact a img{
	margin-right: 16px;
	transform: rotate(180deg);
}

.step main .contents .buttonarea.contact a em{
	line-height: 24px;
	font-weight: bold;
}

.garden .box2 img,
.forest .box2 img{
	width: 100%;
	height: auto;
}

span.checkbox img{
	width: auto;
	height: 160px;
}

.selectBox {
	font-size: 1.2rem;
	font-weight: bold;
}

.selectBox p.credit{
	font-size: .9rem;
	font-weight: normal;
	text-align: center;
}

.selectBox h3{
	margin-bottom: 40px;
	padding-right: 100px;
	box-sizing: border-box;
}

.selectBox .item{
	margin-bottom: 20px;
	padding: 6px 20px 4px;
	font-size: min(4vw, 18px);
	border: var(--key-color) solid 1px;
	border-radius: 8px;
	background: var(--base-color-light);
}

.selectBox .item span{
	
}


.selectBox .box2 {
	display: flex;
	flex-flow: row wrap;
	justify-content: start;
	align-content: space-between;
	align-items: start;
	
	padding: 20px 100px 20px 20px ;
}

.selectBox label {
	display: flex;
	flex-flow: row nowrap;
	justify-content: start;
	align-content: space-between;
	align-items: center;
	padding-right: 40px;
	padding-top: var(--label-padding);
	padding-bottom: var(--label-padding);
}

/* .selectBox#step3 label { */
	/* padding-right: 40px; */
	/* padding-bottom: 20px; */
/* } */


ul.box2 li:last-child label{
	padding-top: var(--label-padding);
	padding-bottom: 0;
}

.selectBox#step3 li{
	padding-top: var(--label-padding);
	padding-bottom: var(--label-padding);
	border-bottom: var(--border-color-section) dotted 2px;
}

.selectBox#step3 li:last-child{
	padding-top: var(--label-padding);
	padding-bottom: var(--label-padding);
	border-bottom: none;
}

.selectBox#step3 li label {
	padding-top: var(--label-padding);
	padding-bottom: var(--label-padding);
	
}

.selectBox#step3 li legend{
	margin-bottom: var(--label-padding);
	font-size: 14px;
	line-height: 20px;
}

fieldset{
	border: none;
	margin: 0;
	padding: 0;
}

/* +++++++++++++++++++++++++++++++ */

span.checkbox ,
span.radiobox 
{
	flex: 0 0 40px;
	position: relative;
	z-index: 1;
	display: inline-block;
	margin-right: 16px;
	width: 40px;
	height: 40px;
	background: #fff;
	border: var(--border-color-darkgray) solid 1px;
	border-radius: 4px;
	box-sizing: border-box;
}

.selectBox input:checked + span.radiobox::brfore,
.selectBox input:checked + span.checkbox::brfore 
{
	content: '';
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,.7);
	
}

.selectBox input:checked + span.radiobox::after,
.selectBox input:checked + span.checkbox::after 
{
	content: '';
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	margin-top: -5px;
	margin-left: -6px;
	display: inline-block;
	width: 12px;
	height: 10px;
	border: var(--key-color) solid;
	border-width: 0 0 2px 2px;
	transform: rotate(-45deg);
}

/* SPINNER ++++++++++++++++++++ */

.selectBox .box2.spinner {
	padding: min(20px, 1vw);
}

@media only screen and (max-width: 500px) {
	.spinnerBox .subject {
		transform-origin: left;
		transform: scale(.9);
	}
	.spinnerBox .spinner {
		transform-origin: right;
		transform: scale(.9);
	}
	/*#step4 .spinnerBox .spinner {
		transform-origin: right;
		transform: scale(1);
	}*/
	
	.box2.width .spinnerBox {
		flex-flow: column;
		align-items: start;
	}
	
	.box2.spinner li .spinnerBox{
		flex-flow: column;
		align-content: space-between;
		align-items: stretch;
	}
	
	.box2.spinner.square li .spinnerBox input,
	.box2.spinner.num li .spinnerBox input{
		/* transform: scale(1); */
		width: 100%;
	}
	
	.box2.spinner li .spinnerBox .subject{
		margin-bottom: 12px;
	}
}

.selectBox .box2>li {
	width: 100%;
}

.spinnerBox {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
	align-content: center;
	
	margin: 0;
	padding: 8px 0px;
	width: 100%;	
	border-bottom: var(--border-color-darkgray) dotted 2px;
}

.selectBox .box2.spinner li:last-child .spinnerBox{
	border: none;
}

.spinnerBox > .subject{
	display: flex;
	flex-flow: row nowrap;
	justify-content: start;
	align-items: center;
	align-content: center;
	font-size: 1.6rem;
}

.spinnerBox > .subject em{
	margin-left: 4px;
	font-size: 64%;
	font-weight: bold;
	word-break: keep-all;
	
	margin-left: 4px;
	font-size: 64%;
	font-weight: bold;
	word-break: keep-all;
	position: relative;
	top: 2px;
}



div.spinner {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-end;
	align-items: center;
	align-content: center;
	flex: 0 1 auto;
}

div.spinner input {
	/* flex: 0 1 auto; */
	display: block;
	/*width: max(56px,7vw);
	width: auto;
	min-width: 56px;
	max-width: auto;*/
	height: auto;
	font-family: Quicksand;
	font-weight: 600;
	font-size: 5vw;
	text-align: right;
	border: none;
	box-sizing: border-box;
	border-radius: 0;
	outline: none;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	vertical-align: top;
}

ul.square span.howmany{
	word-break: keep-all;
}

ul.square span.square sub{
	font-size: 60%;
}

span.checkbox, span.radiobox,
span.mwform-checkbox-field-text
 {
	flex: 0 0 40px;
	position: relative;
	z-index: 1;
	display: inline-block;
	margin-right: 16px;
	width: 40px;
	height: 40px;
	background: #fff;
	border: var(--border-color-darkgray) solid 1px;
	border-radius: 4px;
	box-sizing: border-box;
}

.baseForm > li.agreement input:checked + span.mwform-checkbox-field-text::after,
.baseForm > li.agreement input:checked + span.checkbox::after 
{
	content: '';
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	margin-top: -5px;
	margin-left: -6px;
	display: inline-block;
	width: 12px;
	height: 10px;
	border: var(--key-color) solid;
	border-width: 0 0 2px 2px;
	transform: rotate(-45deg);
}

/* confirm画面 +++++++++++++++++++++++++++++++++++++++ */

body#confirm .baseForm .buttonarea a.back.button{
	display: none;
}

body#confirm .buttonarea.contact input:nth-child(1){

	order: 2;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-content: center;
	align-items: center;
	margin-right: 20px;
	width: min(240px, 30%);
	height: 60px;
	font-size: 24px;
	font-size: 1.2rem;
	font-weight: bold;
	color: #fff;
	border-radius: 12px;
	background: var(--key-color);
	box-sizing: border-box;
	appearance: none;
	outline: none;
}

body#confirm .buttonarea.contact input:nth-child(2){
	order: 1
}

body#confirm .form-box p.form-body{
	display: flex;
	flex-flow: row nowrap;
	justify-content: start;
	align-content: center;
	align-items: center;
	padding: 20px;
}

body#confirm .form-title{
	color: #5389b9;
}

body#confirm .form-box.confirm_email{
	display: none;
}


body#error ul.hiddenForm,
body#simulator ul.hiddenForm,
body#simulator ul.baseForm
{
	height: 0;
	overflow: hidden;
	transition: all 0.3s ease-out;
}

body#confirm ul.hiddenForm{
	margin-bottom: 32px;
	padding: 20px;
	border: var(--border-color-darkgray) solid 1px;
	border-radius: 12px;
	box-sizing: border-box;
}

body#confirm #stepview,
body#confirm .simulatorBox,
body#confirm .buttonarea.simulator,
body#error #stepview,
body#error .simulatorBox,
body#error .buttonarea.simulator
{
	display: none;
}

#error .back.button{
	display: none;
}


/* 完了画面 */
#complete header{
	margin-bottom: 64px;
	
}

#complete p{
	line-height: 1.6rem;
	
}

#container{
	display: flex;
	flex-flow: column;
	justify-content: space-between;
	min-height: 100vh;
}




@media only screen and (min-width: 810px) {

	#searchForm>h2{
		margin-bottom: 32px;
		text-align: center;
		font-size: 44px;
		line-height: 44px;
	}
}

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

	#searchForm>h2{
		margin-bottom: 32px;
		text-align: center;
		font-size: max(28px,4vw);
		line-height: max(36px, 6vw);
	}
		
}

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

	.box2.width div.spinner input {
		margin: 0 4px 0 8px;
		width: max(56px,9vw);
		min-width: auto;
	}
	
		
	.step main .contents .buttonarea.contact a em{
		line-height: 24px;
		font-weight: bold;
		word-break: keep-all;
	}
	
	.step main .contents .buttonarea.contact a {
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-content: center;
		align-items: center;
		margin-right: 20px;
		padding: 0 20px;
		width: auto;
		height: 60px;
		font-size: 18px;
		font-weight: bold;
		color: #fff;
		border-radius: 12px;
		background: var(--key-color);
	}

}


.spinner .square{
	
	margin-left: 8px;
}

.howmany{
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: flex-end;
	align-items: center;
	margin-left: 8px;
	height: 48px;
	word-break: keep-all;
}

.spinnerBox{
    -ms-user-select: none;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

.spinnerbtn {
	display: inline-flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;
	flex: 0 0 108px;
	
	margin-left: 12px;
	cursor: pointer;
}

.spinnerbtn i {
	display: inline-flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	
	position: relative;
	z-index: 3;
	padding: 2px 4px;
	width: 48px;
	height: 48px;
	font-size: 16px;
	text-align: center;
	line-height: 44px;
	background: rgba(255,255,255,1);
	border: #ddd solid;
	box-sizing: border-box;
	border: #ddd solid 1px;
	border-radius: 4px;
}

.spinnerbtn i.minus {
	flex: 0 0 auto;
	order: 2;
}

.spinnerbtn i.plus {
	flex: 0 0 auto;
	order: 1;
}

.asterisc,
em.req svg,
span.required,
.notice svg
{
	margin: 0 8px;
	color: #FF7BAC;
}

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

	.simulatorBox  div.spinner input {
		/* flex: 0 1 auto; */
		display: block;
		/* width: max(56px,7vw); */
		padding: 16px 8px;
		width: max(56px,16vw);
		width: auto;
		min-width: 56px;
		max-width: auto;
		height: auto;
		font-family: Quicksand;
		font-weight: 600;
		font-size: 5vw;
		font-size: 11vw;
		transform: scale(0.9);
		text-align: right;
		border: none;
		box-sizing: content-box;
		border-radius: 0;
		outline: none;
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		vertical-align: top;
	}
	
	div.spinner .howmany,
	div.spinner .square {
		margin: 0;
		
	}
	
	.spinnerBox .spinner {
		transform-origin: left;
		transform: scale(.9);
		width: 112%;
	}

}