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

body {
	background: white;
}


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



/* ------ Move Instinctively ------ */
.MI{
    position: relative;
	cursor: pointer;
}
/* 写真の設定 */
.MI img{
	position: absolute;
	top: 366px;
	left: 0px;
	width: 570px;
	height: 455px;
}
/* ホバーボックスの設定 */
.moveinstinctivery {
    display: none;
    position: absolute;
	font-family: Arial;
	font-weight: bold;
	font-style: italic;
	font-size: 24px;
	line-height: 24px;
	text-align: left;
	color: #f00;	
	width: 570px;
	height: 35px;
	background:#92FF7F;
}
/* ホバーボックス位置の設定 */
.MI:hover .moveinstinctivery{
    display: inline-block;
    top: 821px;
    left: 0px;
}



/* ------ Instinctively ------ */
.I{
    position: relative;
	cursor: pointer;
}
/* 写真の設定 */
.I img{
	position: absolute;
	top: 366px;
	left: 598px;
	width: 681.92px;
	height: 455px;
}
/* ホバーボックスの設定 */
.instinctively {
    display: none;
    position: absolute;
	font-family: Arial;
	font-weight: bold;
	font-style: italic;
	font-size: 24px;
	line-height: 24px;
	text-align: left;
	color: #f00;
	width: 681.92px;
	height: 35px;
	background: #92FF7F;
}
/* ホバーボックス位置の設定 */
.I:hover .instinctively{
    display: inline-block;
    top: 821px;
    left: 598px;
}

/* ------ What are you seeing? What will you do. ------ */
.WW{
    position: relative;
    cursor: pointer;
}
/* 写真の設定 */
.WW img{
	position: absolute;
	top: 932px;
	left: 0px;
	width: 516.46px;
	height: 404px;
}
/* ホバーボックスの設定 */
.seeing_do {
    display: none;
    position: absolute;
	font-family: Arial;
	font-weight: bold;
	font-style: italic;
	font-size: 24px;
	line-height: 24px;
	text-align: left;
	color: #f00;
	width: 516.46px;
	height: 40px;
	background: #92FF7F;
}
/* ホバーボックス位置の設定 */
.WW:hover .seeing_do{
    display: inline-block;
    top: 1336px;
    left: 0px;
}

/* ------ Instinctively0 ------ */
.I0{
    position: relative;
    cursor: pointer;
}
/* 写真の設定 */
.I0 img{
	position: absolute;
	top: 932px;
	left: 544px;
	width: 736.11px;
	height: 404px;
}
/* ホバーボックスの設定 */
.instinctively0{
    display: none;
    position: absolute;
	font-family: Arial;
	font-weight: bold;
	font-style: italic;
	font-size: 24px;
	line-height: 24px;
	text-align: left;
	color: #f00;
	width: 736.11px;
	height: 35px;
	background: #92FF7F;
}
/* ホバーボックス位置の設定 */
.I0:hover .instinctively0{
    display: inline-block;
    top: 1336px;
    left: 544px;
}

/* ------ Instinctively0 mov ------ */
.Im{
    position: relative;
    cursor: pointer;
}
/* 写真の設定 */
.Im img{
	position: absolute;
	top: 1457px;
	left: 105px;
	width: 1071px;
	height: 588px;
}
/* ホバーボックスの設定 */
.instinctively0mov{
    display: none;
    position: absolute;
	font-family: Arial;
	font-weight: bold;
	font-style: italic;
	font-size: 24px;
	line-height: 24px;
	text-align: left;
	color: #f00;
	width: 1071px;
	height: 35px;
	background: #92FF7F;
}
/* ホバーボックス位置の設定 */
.Im:hover .instinctively0mov{
    display: inline-block;
    top: 2045px;
    left: 105px;
}

/* ------ instinctively1 ------ */
.i1{
    position: relative;
    cursor: pointer;
}
/* 写真の設定 */
.i1 img{
	position: absolute;
	top: 2166px;
	left: 0px;
	width: 640.82px;
	height: 352px;
}
/* ホバーボックスの設定 */
.instinctively1{
    display: none;
    position: absolute;
	font-family: Arial;
	font-weight: bold;
	font-style: italic;
	font-size: 24px;
	line-height: 24px;
	text-align: left;
	color: #f00;
	width: 640.82px;
	height: 35px;
	background: #92FF7F;
}
/* ホバーボックス位置の設定 */
.i1:hover .instinctively1{
    display: inline-block;
    top: 2515px;
    left: 0px;
}

/* ------ instincts ------ */
.i{
    position: relative;
    cursor: pointer;
}
/* 写真の設定 */
.i img{
	position: absolute;
	top: 2166px;
	left: 653px;
	width: 626.64px;
	height: 352px;
	
	padding-bottom: 160px; /*下の余白*/

}
/* ホバーボックスの設定 */
.instincts{
    display: none;
    position: absolute;
	font-family: Arial;
	font-weight: bold;
	font-style: italic;
	font-size: 24px;
	line-height: 24px;
	text-align: left;
	color: #f00;
	width: 626.64px;
	height: 35px;
	background: #92FF7F;
}
/* ホバーボックス位置の設定 */
.i:hover .instincts{
    display: inline-block;
    top: 2517px;
    left: 653px;
}


#installation{
		font-family: Arial;
		font-weight: normal;
		font-size: 25px;
		line-height: 25px;
		text-align: left;
		color: #f00;
		position:fixed;
		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:fixed;
	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:fixed;
	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:fixed;
	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:fixed;
	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:fixed;
	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:fixed;
	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:fixed;
	top:290px;
	left:400px;
	margin: 0;
	z-index: 1;
}
.box4:hover{
	background-color: rgba(222,255,51,0.50);
}




.context{  /* BIOのページ */
	font-family: Arial;
	font-weight: bold;
	font-size: 40px;
	line-height: 45px;
	text-align: left;
	/*width: 1529px;
	height: 788px;*/
	background: transparent;
	position:absolute;
	top:250px;
	left:15px;
	margin: 0;
	}


#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 (max-width: 768px){
	.style-nav ul li{
		display: inline-block;
	}
}

/* デスクトップ用 */
@media (max-width: 1024px){
}