@charset "UTF-8";
/* CSS Document */

body {
	background-color: #FFFFFF;
}



#title{
	font-family: Arial;
	font-weight: bold;
	font-size: 105px;
	line-height: 105px;
	text-align: left;
	color: #f00;
	position:absolute;
	top:0px;
	left:10px;
	margin: 0;
	z-index: 2;
	}

#works{
	font-family: Arial;
	font-weight: bold;
	font-size: 50px;
	line-height: 50px;
	text-align: left;
	color: #f00;
	position:absolute;
	top:222px;
	left:15px;
	margin: 0;
	z-index: 2;
	}

#bio{
	font-family: Arial;
	font-weight: bold;
	font-size: 50px;
	line-height: 50px;
	text-align: left;
	color: #f00;
	position:absolute;
	top:222px;
	left:190px;
	margin: 0;
	z-index: 2;
	}

/*
#contact{
	font-family: Arial;
	font-weight: bold;
	font-size: 50px;
	line-height: 50px;
	text-align: left;
	color: #f00;
	position:fixed;
	top:222px;
	left:295px;
	margin: 0;
	z-index: 2;
	}
*/

a {
	color:#F00;
	text-decoration:none;
}

ul {
	list-style-type: none;
 	background-color: none; 
}



/*＃メニューバー*/

#installation{
		font-family: Arial;
		font-weight: normal;
		font-size: 25px;
		line-height: 25px;
		text-align: left;
		color: #f00;
		position:absolute;
		top:300px;
		left:15px;
		margin: 0;
		z-index: 2;
}
	.box1{
		width: 150px;
		height: 47px;
		border-radius: 23.5px;
		background: rgba(255,255,255,0.20); 
		border: 1px solid #f00;
		position:absolute;
		top:290px;
		left:5px;
		margin: 0;
		z-index: 1;
		}

	.box1:hover{
		 background-color:rgba(187,255,175,0.80);/*ミドリ*/
		}


#graphic{
	font-family: Arial;
	font-weight: normal;
	font-size: 25px;
	line-height: 25px;
	text-align: left;
	color: #f00;
	position:absolute;
	top:300px;
	left:172px;
	margin: 0;
	z-index: 2;
}
	.box2{
		width: 113px;
		height: 47px;
		border-radius: 23.5px;
		background: rgba(255,255,255,0.20);
		border: 1px solid #f00;
		position:absolute;
		top:290px;
		left:165px;
		margin: 0;
		z-index: 1;
	}
	.box2:hover{
		background-color: rgba(47,25,255,0.50);
	}

#design{
	font-family: Arial;
	font-weight: normal;
	font-size: 25px;
	line-height: 25px;
	text-align: left;
	color: #f00;
	position:absolute;
	top:300px;
	left:293px;
	margin: 0;
	z-index: 2;
}
	.box3{
		width: 104px;
		height: 47px;
		border-radius: 23.5px;
		background: rgba(255,255,255,0.20);
		border: 1px solid #f00;
		position:absolute;
		top:290px;
		left:285px;
		margin: 0;
		z-index: 1;
	}
	.box3:hover{
		background-color:rgba(247,127,246,0.50);
	}


#creative{
	font-family: Arial;
	font-weight: normal;
	font-size: 25px;
	line-height: 25px;
	text-align: left;
	color: #f00;
	position:absolute;
	top:300px;
	left:406px;
	margin: 0;
	z-index: 2;
}
	.box4{
		width: 117px;
		height: 47px;
		border-radius: 23.5px;
		background: rgba(255,255,255,0.20);
		border: 1px solid #f00;
		position:absolute;
		top:290px;
		left:400px;
		margin: 0;
		z-index: 1;
	}
	.box4:hover{
		background-color: rgba(222,255,51,0.50);
	}




/*コンテンツ*/
#moveinstinctivery{
	position:absolute;
	top:380px;
	left:10px;
	margin: 0;
	font-family: Arial;
	font-weight: bold;
	font-style: italic;
	font-size: 34px;
	line-height: 24px;
	text-align: left;
	color: #f00;
	width: 437px;
	height: 38px;
	background: #92FF7F;
}
.MI_mov{
	position: absolute;
	top: 420px;
	left: 10px;
}
iframe{
	width: 811px;
	height: 593px;
}
.MI #text{
	font-family: Arial;
	font-weight: bold;
	font-size: 14px;
	line-height: 24px;
	text-align: left;
	color: #000000;
	position: absolute;
	top: 1025px;
	left: 50px;
}
.MI img{
	position: absolute;
	top: 1320px;
	left: 10px;
	width: 811px;
	height: 647px;
}

.photo1 img{
	position: absolute;
	top: 1980px;
	left: 10px;
	width: 811px;
	height: 541px;
}

.MI #text1{
	font-family: Arial;
	font-weight: bold;
	font-size: 14px;
	line-height: 24px;
	text-align: left;
	color: #000000;
	position: absolute;
	top: 2550px;
	left: 50px;
}

.pageTop a::after{
	position: absolute;
	content: '{ Top }';
	font-family: Arial;
	font-weight: bold;
	font-style: italic;
	font-size: 24px;
	line-height: 24px;
	text-align: left;
	color: #f00;
	background-color: #FFFFFF;
	top: 2830px;
	left: 1080px;
}
.back{
	position: absolute;
	font-family: Arial;
	font-weight: bold;
	font-style: italic;
	font-size: 24px;
	line-height: 24px;
	text-align: left;
	color: #f00;
	top: 2850px;
	left: 1150px;
	
	padding-bottom: 100px; /*下の余白*/
}

#FaceBook{
	font-family: Arial;
	font-weight: bold;
	font-size: 45px;
	line-height: 45px;
	text-align: left;
	color: #f00;
	position:fixed;
	top:780px;
	left:426px;
	margin: 0;
	}

#slash{
	font-family: Arial;
	font-weight: bold;
	font-size: 45px;
	line-height: 45px;
	text-align: left;
	color: #f00;
	position:fixed;
	top:735px;
	left:735px;
	margin: 0;
	}


#Instagram{
	font-family: Arial;
	font-weight: bold;
	font-size: 45px;
	line-height: 45px;
	text-align: left;
	color: #f00;
	position:fixed;
	top:780px;
	left:852px;
	margin: 0;
	}

#credit{
	font-family: Arial;
	font-size: 11px;
	line-height: 11px;
	position:fixed;
	top:795px;
	left:1205px;
	margin: 0;
	}




/* Media query for Mobile devices*/
@media only screen and (min-width : 285px) and (max-width : 480px) {
	
	.header,.main,.footer,img {
		width: 100%;
		}body{margin: 0;}
	

		#title{
		font-family: Arial;
		font-weight: bold;
		font-size: 75px;
		line-height: 75px;
		text-align: left;
		color: #f00;
		position:fixed;
		top:5px;
		left:5px;
		margin: 0;
		z-index: 2;
		}
	#works{
		font-family: Arial;
		font-weight: bold;
		font-size: 40px;
		line-height: 40px;
		text-align: left;
		color: #f00;
		position:fixed;
		top:150px;
		left:5px;
		margin: 0;
		z-index: 2;		
		}
	#bio{
		font-family: Arial;
		font-weight: bold;
		font-size: 40px;
		line-height: 40px;
		text-align: left;
		color: #f00;
		position:fixed;
		top:150px;
		left:136px;
		margin: 0;
		z-index: 2;
		}
	
	#contact{
		font-family: Arial;
		font-weight: bold;
		font-size: 40px;
		line-height: 40px;
		text-align: left;
		color: #f00;
		position:fixed;
		top:222px;
		left:295px;
		margin: 0;
		z-index: 2;
		}


	a {
		color:#F00;
		text-decoration:none;
		}
	ul {
		list-style-type: none;
		background-color: none; 
		}
	
	
	#FaceBook{
		font-family: Arial;
		font-weight: bold;
		font-size: 30px;
		line-height: 30px;
		text-align: left;
		color: #f00;
		position:fixed;
		top: 90%;
		left:4.26%;
		margin: 0;
		}
	#slash{
		font-family: Arial;
		font-weight: bold;
		font-size: 30px;
		line-height: 30px;
		text-align: left;
		color: #f00;
		position:fixed;
		top: 85%;
		left: 48.72%;
		margin: 0;	
		}
	
	#Instagram{
		font-family: Arial;
		font-weight: bold;
		font-size: 30px;
		line-height: 30px;
		text-align: left;
		color: #f00;
		position:fixed;
		top: 90%;
		left:57.87%;
		margin: 0;
		}
	#credit{
		font-family: Arial;
		font-size: 6px;
		line-height: 6px;
		position:fixed;
		color: #f00;
		top: 95%;
		left: 63%;
		margin: 0;
		}
	
/*コンテンツ*/
#moveinstinctivery{
	position:absolute;
	top:215px;
	left:3px;
	font-family: Arial;
	font-weight: bold;
	font-style: italic;
	font-size: 15px;
	line-height: 15px;
	text-align: left;
	color: #f00;
	width: 193px;
	height: 17px;
	background: #92FF7F;
	}
	
.MI_mov{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}
	
.MI_mov iframe{
	position: absolute;
	top: 240px;
	left: 3px;
	width: 291px;
	height: 212px;
	}

	
.MI #text{
	font-family: Arial;
	font-weight: bold;
	font-size: 14px;
	line-height: 14px;
	text-align: left;
	color: #000000;
	position: absolute;
	top: 460px;
	left: 10px;
}
.MI img{
	position: absolute;
	top: 680px;
	left: 3px;
	width: 291px;
	height: 232px;
}

.photo1 img{
	position: absolute;
	top: 922px;
	left: 3px;
	width: 291px;
	height: 194px;
}

.MI #text1{
	font-family: Arial;
	font-weight: bold;
	font-size: 14px;
	line-height: 14px;
	text-align: left;
	color: #000000;
	position: absolute;
	top: 1120px;
	left: 10px;
	padding-bottom: 100px; /*下の余白*/

}

.pageTop a::after, 

.back{
	display:none
}
	
	
		
#installation, .box1, .box1:hover{display:none}

#graphic, .box2, .box2:hover{display:none}

#design, .box3, .box3:hover{display:none}

#creative, .box4, .box4:hover{display:none}

.context{display:none}

	
}



/* Media Query for Tablets */
	@media only screen and (min-width : 481px) and (max-width : 1279px) {

		.header,.main,.footer,img {
			width: 100%;
			}
		
		body{margin: 0;}

		#title{
			font-family: Arial;
			font-weight: bold;
			font-size: 105px;
			line-height: 105px;
			text-align: left;
			color: #f00;
			position:fixed;
			top:0px;
			left:10px;
			margin: 0;
			z-index: 2;
			}

		#works{
			font-family: Arial;
			font-weight: bold;
			font-size: 50px;
			line-height: 50px;
			text-align: left;
			color: #f00;
			position:fixed;
			top:222px;
			left:15px;
			margin: 0;
			z-index: 2;
			}

		#bio{
			font-family: Arial;
			font-weight: bold;
			font-size: 50px;
			line-height: 50px;
			text-align: left;
			color: #f00;
			position:fixed;
			top:222px;
			left:190px;
			margin: 0;
			z-index: 2;
			}

		#contact{
			font-family: Arial;
			font-weight: bold;
			font-size: 50px;
			line-height: 50px;
			text-align: left;
			color: #f00;
			position:fixed;
			top:222px;
			left:295px;
			margin: 0;
			z-index: 2;
			}


		a {
			color:#F00;
			text-decoration:none;
			}

		ul {
			list-style-type: none;
			background-color: none; 
			}



		#FaceBook{
			font-family: Arial;
			font-weight: bold;
			font-size: 45px;
			line-height: 45px;
			text-align: left;
			color: #f00;
			position:fixed;
			top:90%;
			left:12.5%;
			margin: 0;
			}

		#slash{
			font-family: Arial;
			font-weight: bold;
			font-size: 45px;
			line-height: 45px;
			text-align: left;
			color: #f00;
			position:fixed;
			top:85%;
			left:50.91%;
			margin: 0;
			}


		#Instagram{
			font-family: Arial;
			font-weight: bold;
			font-size: 45px;
			line-height: 45px;
			text-align: left;
			color: #f00;
			position:fixed;
			top:90%;
			left:63.67%;
			margin: 0;
			}

		#credit{
			font-family: Arial;
			font-size: 11px;
			line-height: 11px;
			position:fixed;
			color: #f00;
			top:95%;
			left:60.02%;
			margin: 0;
			}
		
		/*コンテンツ*/
#moveinstinctivery{
	position:absolute;
	top:380px;
	left:10px;
	margin: 0;
	font-family: Arial;
	font-weight: bold;
	font-style: italic;
	font-size: 34px;
	line-height: 24px;
	text-align: left;
	color: #f00;
	width: 437px;
	height: 38px;
	background: #92FF7F;
}
.MI_mov{
	position: absolute;
	top: 420px;
	left: 10px;
}
.MI #text{
	font-family: Arial;
	font-weight: bold;
	font-size: 14px;
	line-height: 24px;
	text-align: left;
	color: #000000;
	position: absolute;
	top: 1025px;
	left: 50px;
}
.MI img{
	position: absolute;
	top: 1320px;
	left: 10px;
	width: 811px;
	height: 647px;
}

.photo1 img{
	position: absolute;
	top: 1980px;
	left: 10px;
	width: 811px;
	height: 541px;
}

.MI #text1{
	font-family: Arial;
	font-weight: bold;
	font-size: 14px;
	line-height: 24px;
	text-align: left;
	color: #000000;
	position: absolute;
	top: 2550px;
	left: 50px;
}

.pageTop a::after{
	position: absolute;
	content: '{ Top }';
	font-family: Arial;
	font-weight: bold;
	font-style: italic;
	font-size: 24px;
	line-height: 24px;
	text-align: left;
	color: #f00;
	background-color: #FFFFFF;
	top: 2830px;
	left: 1080px;
}
.back{
	position: absolute;
	font-family: Arial;
	font-weight: bold;
	font-style: italic;
	font-size: 24px;
	line-height: 24px;
	text-align: left;
	color: #f00;
	top: 2850px;
	left: 1150px;
	
	padding-bottom: 100px; /*下の余白*/
	}
}


/* Desktops and laptops  */
	@media only screen and (min-width:
1280px) {

		.header,.main,.footer,img {
			width: 100%;
			}body{margin: 0;}

		#title{
			font-family: Arial;
			font-weight: bold;
			font-size: 105px;
			line-height: 105px;
			text-align: left;
			color: #f00;
			position:fixed;
			top:0px;
			left:10px;
			margin: 0;
			z-index: 2;
			}

		#works{
			font-family: Arial;
			font-weight: bold;
			font-size: 50px;
			line-height: 50px;
			text-align: left;
			color: #f00;
			position:fixed;
			top:222px;
			left:15px;
			margin: 0;
			z-index: 2;
			}

		#bio{
			font-family: Arial;
			font-weight: bold;
			font-size: 50px;
			line-height: 50px;
			text-align: left;
			color: #f00;
			position:fixed;
			top:222px;
			left:190px;
			margin: 0;
			z-index: 2;
			}

		#contact{
			font-family: Arial;
			font-weight: bold;
			font-size: 50px;
			line-height: 50px;
			text-align: left;
			color: #f00;
			position:fixed;
			top:222px;
			left:295px;
			margin: 0;
			z-index: 2;
			}


		a {
			color:#F00;
			text-decoration:none;
		}

		ul {
			list-style-type: none;
			background-color: none; 
		}



		#FaceBook{
			font-family: Arial;
			font-weight: bold;
			font-size: 45px;
			line-height: 45px;
			text-align: left;
			color: #f00;
			position:fixed;
			top:89%;
			left:26.25%;
			margin: 0;
			}

		#slash{
			font-family: Arial;
			font-weight: bold;
			font-size: 45px;
			line-height: 45px;
			text-align: left;
			color: #f00;
			position:fixed;
			top:83.5%;
			left:49.21%;
			margin: 0;
			}


		#Instagram{
			font-family: Arial;
			font-weight: bold;
			font-size: 45px;
			line-height: 45px;
			text-align: left;
			color: #f00;
			position:fixed;
			top:89%;
			left:56.95%;
			margin: 0;
			}

		#credit{
			font-family: Arial;
			font-size: 11px;
			line-height: 11px;
			position:fixed;
			color: #f00;
			top:95%;
			left:55.85%;
			margin: 0;
			}
	
	/*コンテンツ*/
#moveinstinctivery{
	position:absolute;
	top:380px;
	left:10px;
	margin: 0;
	font-family: Arial;
	font-weight: bold;
	font-style: italic;
	font-size: 34px;
	line-height: 24px;
	text-align: left;
	color: #f00;
	width: 437px;
	height: 38px;
	background: #92FF7F;
}
.MI_mov{
	position: absolute;
	top: 420px;
	left: 10px;
}
.MI #text{
	font-family: Arial;
	font-weight: bold;
	font-size: 14px;
	line-height: 24px;
	text-align: left;
	color: #000000;
	position: absolute;
	top: 1025px;
	left: 50px;
}
.MI img{
	position: absolute;
	top: 1320px;
	left: 10px;
	width: 811px;
	height: 647px;
}

.photo1 img{
	position: absolute;
	top: 1980px;
	left: 10px;
	width: 811px;
	height: 541px;
}

.MI #text1{
	font-family: Arial;
	font-weight: bold;
	font-size: 14px;
	line-height: 24px;
	text-align: left;
	color: #000000;
	position: absolute;
	top: 2550px;
	left: 50px;
}

.pageTop a::after{
	position: absolute;
	content: '{ Top }';
	font-family: Arial;
	font-weight: bold;
	font-style: italic;
	font-size: 24px;
	line-height: 24px;
	text-align: left;
	color: #f00;
	background-color: #FFFFFF;
	top: 2830px;
	left: 1080px;
}
.back{
	position: absolute;
	font-family: Arial;
	font-weight: bold;
	font-style: italic;
	font-size: 24px;
	line-height: 24px;
	text-align: left;
	color: #f00;
	top: 2850px;
	left: 1150px;
	
	padding-bottom: 100px; /*下の余白*/
}
}