@media(min-width:400px){
	.intro-bg .mobile{
		margin-top:-20vw;
	}
	.whatyougonnado{
		top:70vw;
	}
	.intro-bg .gradient{
		content:'';display:block;
		position:absolute;
		bottom:0;left:0;
		background: linear-gradient(to top, rgba(0,0,0,0.5), transparent 100%);
		height: 20vh;
		width:100%;
	}
}
@media (min-width:500px){
	.introbox{
		position:absolute;
		left:9vw;
		bottom:auto;
		top:95vw;
		top:calc( 95vw + 3em );
		margin-left:0;
	}
	.radiowrap input ~ label:before{
		display:inline-block;
	}
	.hidemobile{
		display:block;
	}
}
@media (min-width:640px) and (max-aspect-ratio: 4/3){
	html.home .main{
	    height: 135vw;
    }
}
@media (min-width:640px) and (min-aspect-ratio: 4/3){
	html.home .main{
	    height: auto;
	}
	.introbox{
		top:auto;
		margin: 0;
		bottom: 5vw;
		bottom: calc(5vw - 2em);
		left: 6.5vw;
	}
	.intro-bg{
		min-height: auto;

		width:auto;
		top: 3.85em;
		left: 0.5em;
		right: 0.5em;
		bottom: 0.5em;
		border-radius: 0.3em;
	}
	html.app .content, html.result .contents{ 
		margin: 0.75em;
		margin-top:0;
		border-radius: 0.3em;
	}
	.result .contents{
		background: white;
	}
	.result .whitebar{
		display: block;
	}
	.intro-bg .mobile{
		display:none;
	}
	.intro-bg .whatyougonnado{
		display:none;
		/*
		top: auto;
		font-size: 2em;
		bottom: 4vw;
		left: auto;
		text-align: right;
		right: 4vw;
		/*alternative*/
	}
	.intro-bg .desktop{
		display:block;
		overflow:hidden;
		
		background: url(/img/bg-plain.jpg) center center no-repeat;
		background-size: cover;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}
	.intro-bg .gradient{
		background:linear-gradient(to top, rgba(0,0,0,0.7), transparent 100%);
		height:50vh;
	}
}
@media (min-width:640px) and (max-width:1399px) and (min-aspect-ratio: 10.5/6),
	(min-width:1400px) and (min-aspect-ratio: 12/6){
	.introbox{
		left:auto;
		right:9vw;
	}
}
@media(min-width:640px){
	.introbox{
		max-width:17em;
		padding:1.5em;
	}
	.scenes{
		padding:1em;
	}
	.photo .video-inner,
	.photo .videowrap{
		/*
		width:360px;
		height:360px;
		*/
	}
	#boxxy{
		width:200px;
		height:200px;
	}
	#snapPhoto{
		margin-left:auto; margin-right:auto;
	}
	html:not(.app) .botpanel{
		max-width:640px;
	}
	/*
	.botpanel .btn{
		max-width:640px;
		margin-left:auto; margin-right:auto;
	}
	*/
	.botpanel{
		padding-left:2em;
		padding-right:2em;
	}
	.botpanel .text{
		text-align: center;
		max-width: 30em;
		margin: auto;
		margin-bottom: 1.1em;
	}
	.scene4 .title{
		margin-top:0;
	}
	.scene4 h2{
		font-size:1.75em;
	}
	.app-bg .set{
		height:auto;
	    width: 500px;
	    left: calc(200% + (100vw - 500px));
	}
	
	.result .section{
		padding:4em 0;
		padding-bottom:3em;
	}
	.result .mid .bit{margin-bottom:0;}
	.result .section.top{
		padding-bottom:4em;
	}
	.result .section.footer{
		padding-top:0;
		padding-bottom:2em;
	}
	.result .contents{ background:#ff4c13; }
	.result .contents .logo{
		display:block;
		float:right;
	}
	.result h2{
		font-size:2.5em;
	}
	.sharewrap .box{
		padding:2em;
	}
	.sharewrap .close{
		top: 0.8rem;
		right: 1rem;
	}
	.sharewrap h2{
		font-size:2em;
	}
	.scenes input[type=text]{
		width:auto;
	}
}
@media(min-width:1024px){
	.result .section:not(.top) .inside{
		padding-left:2em;
		padding-right:2em;
		max-width:1200px;
	}
	.result .videowrap{
		width: 40%;
		position: absolute;
		top: 0;
		margin-top: -3em;
		left: 50%;
		margin-left: -3em;
	}
	.result .your-job, .result .youlikeit{
		margin-left:4rem;
	}
	.result h1 .name{
		left:4rem;
	}
	.result .top .decoration{
		right:70%;
		bottom: -4em;
	}
	.result .mid .inside{
		display:flex;
		gap:2em;
	}
	.result .mid .left{
		padding-right:4em;
		box-sizing:border-box;
	}
	.result .mid .bit{
		width:50%;
	}
	.result .mid h2{
		margin-bottom:1rem;
	}
	.result h2{
		font-size:1.75em;
	}
	.result li{
		margin-bottom:0.75em;
	}
	.result .bot{
		display:flex;
	}
	.result .bot .inside{
		display:flex;
		text-align:left;
		width:100%;
	}
	.result .bot .bit{flex:1;}
	.result .bot .btn{ margin-top:0;}
	
	.result .topwrap{
		width:1200px;
		margin:auto;
	}
	.result .videowrap{
		width:440px;
		margin-left:3em;
	}
	
}
@media(min-width:1200px){
	.top-label{
		font-size:1.5em;
		padding-left:2em;
	}
	.top-label .num{
		font-size:1.5em;
	}
	.top-label .text{
		margin-left: 1em;
	}
	.app-bg .icon:not(.set){
		height:9em;
	}
	.app-bg .scale{
		left:75%;
	}
	.app-bg .calendar{	
		top: 28em;
		left: 64%;
	}
	.app-bg .book{
		top: 2em;
		left: 175%;
	}
	.app-bg .globe{
		top: 33em;
		left: 106%;
	}
	.app-bg .set{
	    width: 700px;
	    left: calc(200% + (100vw - 700px));
	}
}
@media(min-width:1500px){
}