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




/*コンテンツ*/
#instinctively0{
	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: 400px;
	height: 38px;
	background: #92FF7F;
}
.i0 iframe{
	position: absolute;
	top: 420px;
	left: 10px;
	width: 811px;
	height: 445px;
}

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

#edgar iframe{
	position: absolute;
	top: 1000px;
	left:10px;
	width:811px;
	height: 445px;
}

.i0 #text2{
	font-family: Arial;
	font-weight: bold;
	font-size: 14px;
	line-height: 24px;
	text-align: left;
	color: #000000;
	position: absolute;
	top: 1470px;
	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: 1600px;
	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: 1620px;
	left: 1150px;
	
	padding-bottom: 120px; /*下の余白*/
}

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


	
/*コンテンツ*/
#instinctively0{
	position:absolute;
	top:215px;
	left:3px;
	margin: 0;
	font-family: Arial;
	font-weight: bold;
	font-style: italic;
	font-size: 15px;
	line-height: 15px;
	text-align: left;
	color: #f00;
	width: 180px;
	height: 17px;
	background: #92FF7F;
}
.i0 iframe{
	position: absolute;
	top: 240px;
	left: 3px;
	width: 291px;
	height: 160px;
}

.i0 #text{
	font-family: Arial;
	font-weight: bold;
	font-size: 14px;
	line-height: 14px;
	text-align: left;
	color: #000000;
	position: absolute;
	top: 420px;
	left: 10px;
}

#edgar iframe{
	position: absolute;
	top: 490px;
	left:3px;
	width:291px;
	height: 160px;
}

.i0 #text2{
	font-family: Arial;
	font-weight: bold;
	font-size: 14px;
	line-height: 14px;
	text-align: left;
	color: #000000;
	position: absolute;
	top: 650px;
	left: 10px;
	padding-bottom: 80px;
}

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



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