@charset "UTF-8";

html,body{width: 100%;height: 100%;color:#92918D;
		background: #2E1008 url(../img/redhead_bg.png) 0 0/1300px auto repeat-x;
}
a:link, a:visited{text-decoration:none; color:#fff;}

h1{font-weight:100;font-size: 1.4rem;}

html{min-height: 880px;}
body{
	overflow: hidden;
}
#main{
	width: 100%; height: 100%;
	position: relative;
	max-width: 1400px;
	margin: 0 auto;
}




/*menu */
#title{
	width: 10.5rem;
	height: 2.1rem;
	background:url(../img/index_logo.svg) 0 0/100% auto no-repeat;
	text-indent: -9999px;
	filter: drop-shadow(1px 0px 5px #021);
	z-index: 22;
	position: relative;
}


#menu{
	position: relative;
	top:calc(670px + 1vh);
	margin:0 0 0 0;
	left:calc(190px - 5vw);
	z-index: 120;

}


ul{padding:0rem 0.2rem 1rem;z-index: 13;position: relative;}
#menu div{
	position: relative;z-index: 10;
}
#menu ul li{
	display: inline-block;
	padding:0 0rem 0 0rem;
	
	filter: drop-shadow(0px 0px 4px #021);

	line-height: 1rem;
	position: relative;

}
#menu ul li::before{
	content:'/';
	display: inline-block;
	padding:0.2rem 0rem 0 0.2rem;
	position: relative;
	vertical-align: middle;
	text-shadow: 0px 0px 11px rgba(11, 11, 11, 0.5);
	color:#ddd;
	filter: drop-shadow(1px 0px 3px #ccc);
	}

#menu ul li a{
	display: inline-block;
	border: 1px solid rgba(255, 0, 0, 0);
	border-radius: 10rem;
	padding:0.2rem 0.5rem 0.2rem;
	font-size: 1rem;
	line-height: 1rem;	
	position: relative;
	overflow: hidden;
	vertical-align: middle;
}

#menu ul li a::before{
	content: '';transition: all .4s;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0%;
	height: 100%;
	background:#F6A197;
	z-index: -1;
	opacity: 0.14;
}
#menu ul li a:hover{
	color:#B3C0FE;
}
#menu ul li a:hover:before{
	width: 100%;
	background:#A92207;
	opacity: 1;
}
/*graphic*/


	#ajisai{ 
		position: absolute;
		width: 830px;
		top:430px;
		right:-10vw;
	}
	
	#girl{ 
		position: absolute;
		width: 1100px;
		top:130px;
		left:130px;
	}
	
	#ojisan{ 
		position: absolute;
		width: 495px;
		left:calc(170px - 10vw);
		top:1vw;

	}
	
	#desk{ 
		position: absolute;
		width: calc(450px + 5vw);
		top:0;
		right:0vw;
	}

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

	#main{
		max-width: 100%;
	}
	#ojisan{ 
		width: 	calc(400px + 8vw);
		left:0;
			}
	#girl{ 
		width: 100%;
		top:11vh;
		left:5%;
		right: 0;	}
		
	#desk{ 
		width: 440px;
		
		}
		
	#ajisai{
		top:410px;
	}
			
	#menu{
	margin:0% 0 0 0vw;
	left:100px;
	top:calc(200px + 40vw);}
	
}
	
@media screen and (max-width: 840px) {
	
	body{
		width: 100%;}
	#main{
		overflow: hidden;
	}

	#desk{
		width: 53%;
		right: -8%;
		
		
	}
	#ojisan{ 
		width: 	calc(310px + 8vw);
		left: -5%;
		}
	#girl{ 
		width: 140%;
		left: -20%;	
	}
	
	#ajisai{
		width: 120%;
		left:20%;
	
	}

#menu{
	top:70vh;
 left: 5%;
}
	
}
	
		
@media screen and (max-width: 640px) {
	html{
		min-height: 720px;
	}
	
	
	body{
		width: 100%;
		overflow: hidden;
		
	}
	#main{
		overflow: hidden;
	
	}
	#ojisan{ 
		width: 	65%;
		left: -10%;
		top:2vh;
	}
	#girl{ 
		width: 200%;
	
		left: -45%;
		
	}

	#desk{
		
	}
	#ajisai{
		width: 130%;
		left:2%;
				top:48vh;
	}
		
}