
.step #headline{
	margin-bottom: mim(64px,8vw);
}

.step #headline  h1 img{
	width: 180px;
	height: auto;
}

.step main .contents .simulatorBox img#character{
	position: absolute;
	right: 4px;
	top: 4px;
	top: -20px;
	width: 146px;
	height: auto;
}

#privacy-policy main header{
	margin-bottom: 32px;
}

#privacy-policy main li{
	padding-bottom: 32px;
}

#privacy-policy main li h4{
	padding-bottom: 12px;
	font-size: 1.2rem;
}

#container #footerNav {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	margin-bottom: 0;
}

#container #footerNav li {
	margin-right: 0;
	padding: 0px 4px;
	height: 18px;
	border-right: #999999 solid 1px;
}

#container #footerNav li:last-child {
	border-right: none;
}

.step main .contents .simulatorBox h3{
	display: block;
	font-size: 28px;
	line-height: 36px;
}

body.step main .contents .simulatorBox h3 em,
body#top main .contents .simulatorBox h3 em{
	display: block;
	font-size: 14px;
	line-height: 20px;
}

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

.step main .contents .buttonarea input,
.step main .contents .buttonarea button{
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-content: center;
    align-items: center;
	
	width: min(240px, 30%);
	height: 60px;
	border-radius: 12px;
}

.step main .contents .buttonarea button em{
	font-size: 24px;
	font-weight: bold;
	color: #fff;
}



.step main .contents .buttonarea button.back{
	margin-right: 20px;
	background: var(--key-color);
}

.step main .contents .buttonarea input,
.step main .contents .buttonarea button.next{
	background: var(--border-color-darkgray);
	background: var(--sub-color);
}

.step main .contents .buttonarea button.next.on{
	background: var(--sub-color);
}

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

.step main .contents .buttonarea button.next img{
	margin-left: 16px;
}

.step main .textcontents {
	margin: 0 auto 40px;
	width: 66%;
	
}

.step main .selectBox .fig{
	text-align: center;
}

.step main .selectBox .fig img{
	margin: 0 auto 40px;
	width: min(48vw, 72%);
	min-width: min(268px, 100%);
	height: auto;
}

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




}


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



	#headline  h1 img{
		width: 80vw;
		height: auto;
	}


	main .contents .simulatorBox{
		position: relative;
		z-index: 1;
		margin: 0 auto 40px;
		padding: 36px;
		width: 80%;
		max-width: 528px;
		border: var(--key-color) solid 8px;
		border-radius: 24px;
		box-sizing: border-box;
	}

	main .contents .simulatorBox img#character{
		position: absolute;
		right: -8vw;
		bottom: -12vw;
		width: min(30vw,132px);
		height: auto;
	}

	main .contents .simulatorBox h3{
		
		font-size: min(7.2vw, 40px);
		line-height: min(56px,11vw);
	}

	main .contents .buttonarea{
		margin-bottom: min(8.2vw,68px);
	}

	main .contents .buttonarea button{
		width: 80%;
		max-width: 260px;
		height: 60px;
		font-size: max(4vw, 20px);
		font-weight: bold;
		color: #fff;
		background: var(--sub-color);
		border-radius: 12px;
	}

	main .textcontents {
		width: 80%;
		font-size: max(14px, 1.7vw);
	}
}

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

	body.step main .contents .simulatorBox {
		padding: 20px;
		width: 100%;
		max-width: 100vw;
	}

	#top main .contents .simulatorBox{
		position: relative;
		z-index: 1;
		margin: 0 auto 40px;
		padding: 56px;
		width: 66%;
		border: var(--key-color) solid 16px;
		border-radius: 24px;
		box-sizing: border-box;
	}


	.step main .contents .simulatorBox{
		position: relative;
		z-index: 1;
		margin: 0 auto 40px;
		padding: 28px;
		width: 75%;
		border: var(--key-color) solid 2px;
		border-radius: 24px;
		box-sizing: border-box;
	}
	
	
	.step #headline{
		margin-bottom: 64px;
		margin-bottom: 8vw;
	}

	
	
}

@media only screen and (max-width: 480px) {
	.selectBox .item,
	.selectBox .box2.spinner 
	{
		padding: 0px;
	}
	
	#phone{
		text-decoration:none;
	}
}


@media only screen and (max-width: 600px) {
		
	#complete main .contents .simulatorBox h3{
		padding-right: 100px;
	}
	
}

@media only screen and (max-width: 427px) {
		
	.step main .contents .simulatorBox h3{
		font-size: min(34vw,18px);
		line-height: min(38vw,24px);
	}


	.step main .contents .simulatorBox h3 em{
		display: block;
		font-size: 12px;
		line-height: 16px;
	}

	.step main .contents .simulatorBox img#character{
		position: absolute;
		right: 4px;
		top: -20px;
		z-index: 3;
		width: min(32vw,146px);
		height: auto;
	}


.step main .contents .buttonarea button{
	
	width: min(240px, 40vw);
	height: max(40px, 8vw);
	color: #fff;
	border-radius: 12px;
}

.step main .contents .buttonarea button em{
	display: inline-block;
	height: 1.4rem;
	font-size: 1.1rem;
	font-weight: bold;
}

.step main .contents .buttonarea button img{
	width: max(2vw, 12px);
	height: auto;
}




















}

