#alartWindow{
	position: fixed;
	z-index: 10;
	top: 0; left: 0;
	
	display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-content: center;
    align-items: center;
	
	width: 100vw;
	height: 100vh;
	background: rgba(255,255,255,.6);
}

#alartWindow p{
	position: relative;
	display: inline-block;
	padding: 32px;
	font-size: 1.2rem;
	line-height: 1.8rem;
	max-width: 80vw;
	box-sizing: border-box;
	background: #fff;
	border: #cccccc solid 1px;
	border-radius: 8px;
	filter: drop-shadow(8px 8px 8px rgba(0,0,0,.1));
}

#alartWindow span.close{
	position: absolute;
	z-index: 10;
	top: 4px;right: 4px;
	display: inline-block;
	width: 20px;height: 20px;
	
}	


#container{
	margin:0 auto;
	/* max-width:800px; */
	height:auto;
	border:none;
	background:#fff;
	background: url(/assets/kyokuhou/images/frame_top.png) no-repeat top center;
	background-size:   auto 88px;
		
}

#container>header{
	margin-bottom: calc(32px + 20px);
	height: 56px;
	color: #fff;
	/* border-top: var(--key-color) solid 56px; */
	background: var(--key-color);
}

#container header #logo img{
	width: 200px;
	height: auto;
}

#container header .topbar{
	display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-content: center;
    align-items: center;

	margin: 0 auto 0;
	padding: 0 20px;
	height: 56px;

}

#container header .topbar .tagline{
	font-size: 20px;
	font-weight: bold;
}

#container header .topbar #phone{
	font-size: 20px;
	font-weight: bold;
	font-family: Gugi;
}

#container header .topbar #phone img{
	margin-right: 4px;
}

main{
	position:relative;
	margin:0 auto;
	padding-bottom:16px;
	width:calc(100% - 24px );
	max-width: 800px;
	background:#fff;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

#headline{
	margin-bottom: 48px;
}

#headline  h1{
	text-align: center;
}


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;
}

main .contents .simulatorBox img#home{
	position: absolute;
	left: -72px;
	top: -88px;
}

main .contents .simulatorBox img#character{
	position: absolute;
	right: -52px;
	bottom: -82px;
}


main .contents .simulatorBox h3{
	
	font-size: 40px;
	line-height: 56px;
}

main .contents .nextbutton{
	margin-bottom: 68px;
}

main .contents .nextbutton a{
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-content: center;
    align-items: center;
	
	margin: 0 auto;
	width: 260px;
	height: 60px;
	font-size: 28px;
	font-weight: bold;
	color: #fff;
	background: var(--sub-color);
	border-radius: 12px;
}

main .contents .nextbutton a img{
	margin-left: 16px;
}

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

footer{
    display: flex;
    flex-flow: column;
    justify-content: flex-end;
    align-content: center;
    align-items: center;
	
	padding: 20px 0 40px;
	height: min(24vw,200px);
	background: var(--footerbase-color);
	box-sizing: content-box;
}

footer nav{
	margin-bottom: 8px;
	font-size: 12px;
}

footer p{
	font-size: 12px;
}


/* StepView */
#stepview{
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		align-content: center;
		align-items: center;
		margin-bottom: 12px;
}

#stepview span{
	margin: 0 2px;
	padding: 2px 12px;
	color: #fff;
	font-size: .9rem;
	line-height: 1.4em;
	/* font-weight: bold; */
	background: var(--key-color-pale);
	border-radius: 8px;
}

#stepview span.display{
	background: var(--key-color);
}


#top #headline  h1 img{
	width: unset;
	height: auto;
}

#top main .contents .simulatorBox h3 {
	font-size: 40px;
	line-height: 56px;
}



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


	#container header #logo{
		position: relative;
		top: -4px;
	}

	#container header .topbar .tagline{
		font-size: 24px;
	}


}


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


	#container header .topbar{
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		align-content: center;
		align-items: center;
		
		padding: 8px;
	}

	#container header .topbar #logo{
		order: 1;
		flex: 0 1 30%;
		max-width: 30%;
		margin-bottom: 12px;
	}

	#container header .topbar #phone{
		order: 2;
		flex: 0 1 70%;
		max-width: 70%;
		text-align: right;
		font-size: 14px;
		margin-bottom: 12px;
	}

	#container header .topbar .tagline{
		order: 3;
		flex: 0 1 100vw;
		max-width: 100vw;
		text-align: center;
	}

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

	#container header #logo img{
		width: 160px;
		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#home{
		position: absolute;
		left: -6vw;
		top: -14vw;
		width: 20vw;
		min-width: 100px;
		height: auto;
	}

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

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

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

	main .contents .nextbutton a{
		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(12px, 1.7vw);
	}
}


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

	#top main .contents .simulatorBox{
		margin-bottom: min(56px, 24vw);
		padding: 12vw 12vw 16vw;
		width: 92%;
		border: var(--key-color) solid 2px;
		border-radius: 24px;
		box-sizing: border-box;
	}

	.step main .contents .simulatorBox{
		margin-bottom: min(56px, 24vw);
		padding: 12px;
		width: 100%;
		border: var(--key-color) solid 2px;
		border-radius: 24px;
		box-sizing: border-box;
	}
		
	#top main .contents .simulatorBox h3 {
		font-size: 7.2vw;
		line-height: 12vw;
	}
	

	#top main .contents .simulatorBox img#character{
		position: absolute;
		right: -4vw;
		top: unset;
		bottom: -14vw;
		width: 46vw;
		height: auto;
	}

	main .contents .simulatorBox img#home{
		position: absolute;
		left: -4vw;
		top: -12vw;
		width: 20vw;
		min-width: 100px;
		height: auto;
	}

	
	#top #headline h1 img {
	  width: 62vw;
	  height: auto;
	}
	
	#stepview{
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		align-content: center;
		align-items: center;
		margin-bottom: 12px;
	}

	#stepview span{
		margin: 2px;
		padding: 2px 8px;
		color: #fff;
		font-size: .8rem;
		/* font-weight: bold; */
		background: var(--key-color-pale);
		border-radius: 8px;
	}

	#stepview span.display{
		background: var(--key-color);
	}
	
	ul.box2.spinner.square .spinnerBox .spinner,
	ul.box2.spinner.width .spinnerBox .spinner{
		position: relative;	
		transform-origin: left;
		transform: scale(1);
		width: 100%;
	}
	
	.box2.spinner.square .spinnerBox .spinner .howmany:nth-child(1),
	.box2.spinner.width .spinnerBox .spinner .howmany:nth-child(1){
		position: absolute;	
		z-index: 5;
		left: 0;
	}
	
	.box2.spinner.square .spinnerBox .spinner  input,
	.box2.spinner.width .spinnerBox .spinner  input {
		margin: 0 4px 0 8px;
		padding-left: 0;
		padding-right: 0;
		width: 50vw;
		min-width: 56px;
	}

}