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


/* ------ Shibuya texture1 ------ */
.ST1{
    position: relative;
    cursor: pointer;
}
/* 写真の設定 */
.ST1 img{
	position: absolute;
	top: 366px;
	left: 0px;
	width: 577.71px;
	height: 513px;
}
/* ホバーボックスの設定 */
.shibuyatexture1{
    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: 577.71px;
	height: 35px;
	background: #DEFF33;
}
/* ホバーボックス位置の設定 */
.ST1:hover .shibuyatexture1{
    display: inline-block;
    top: 879px;
    left: 0px;
}


/* ------ Hachi ------ */
.H{
    position: relative;
    cursor: pointer;
}
/* 写真の設定 */
.H img{
	position: absolute;
	top: 366px;
	left: 684px;
	width: 596px;
	height: 513px;	
}
/* ホバーボックスの設定 */
.hachi{
    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: 596px;
	height: 35px;
	background: #DEFF33;
}
/* ホバーボックス位置の設定 */
.H:hover .hachi{
    display: inline-block;
    top: 879px;
    left: 684px;
}


/* ------ Mug ------ */
.M{
    position: relative;
    cursor: pointer;
}
/* 写真の設定 */
.M img{
	position: absolute;
	top: 952px;
	left: -44px;
	width: 684px;
	height: 517px;	
}
/* ホバーボックスの設定 */
.mug{
    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: 500px;
	height: 35px;
	background: #DEFF33;
}
/* ホバーボックス位置の設定 */
.M:hover .mug{
    display: inline-block;
    top: 1434px;
    left: 48px;
}


/* ------ Stop motion anime1 ------ */
.SA1{
    position: relative;
    cursor: pointer;
}
/* 写真の設定 */
.SA1 img{
	position: absolute;
	top: 1072px;
	left: 640px;
	width: 643px;
	height: 362px;
}
/* ホバーボックスの設定 */
.stopmotion1{
    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: 643px;
	height: 35px;
	background: #DEFF33;
}
/* ホバーボックス位置の設定 */
.SA1:hover .stopmotion1{
    display: inline-block;
    top: 1434px;
    left: 640px;
}


/* ------ App ------ */
.A{
    position: relative;
    cursor: pointer;
}
/* 写真の設定 */
.A img{
	position: absolute;
	top: 1623px;
	left: 0px;
	width: 594px;
	height: 445px;
}
/* ホバーボックスの設定 */
.app{
    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: 594px;
	height: 35px;
	background: #DEFF33;
}
/* ホバーボックス位置の設定 */
.A:hover .app{
    display: inline-block;
    top: 2068px;
    left: 0px;
}


/* ------ Mammoth ------ */
.m{
    position: relative;
    cursor: pointer;
}
/* 写真の設定 */
.m img{
	position: absolute;
	top: 1623px;
	left: 735px;
	width: 494px;
	height: 699px;
}
/* ホバーボックスの設定 */
.mammoth{
    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: 494px;
	height: 35px;
	background: #DEFF33;
}
/* ホバーボックス位置の設定 */
.m:hover .mammoth{
    display: inline-block;
    top: 2326px;
    left: 735px;
}


/* ------ CG human ------ */
.ch{
    position: relative;
    cursor: pointer;
}
/* 写真の設定 */
.ch img{
	position: absolute;
	top: 2478px;
	left: 0px;
	width: 688px;
	height: 372px;
}
/* ホバーボックスの設定 */
.cghead{
    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: 688px;
	height: 35px;
	background: #DEFF33;
}
/* ホバーボックス位置の設定 */
.ch:hover .cghead{
    display: inline-block;
    top: 2850px;
    left: 0px;
}


/* ------ cardboard ------ */
.c{
    position: relative;
    cursor: pointer;
}
/* 写真の設定 */
.c img{
	position: absolute;
	top: 2478px;
	left: 722px;
	width: 558px;
	height: 372px;
}
/* ホバーボックスの設定 */
.cardboard{
    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: 558px;
	height: 35px;
	background: #DEFF33;
}
/* ホバーボックス位置の設定 */
.c:hover .cardboard{
    display: inline-block;
    top: 2850px;
    left: 722px;
}


/* ------ aipig ------ */
.pig{
    position: relative;
    cursor: pointer;
}
/* 写真の設定 */
.pig img{
	position: absolute;
	top: 3039px;
	left: 0px;
	width: 640px;
	height: 481px;
}
/* ホバーボックスの設定 */
.aipig{
    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: 640px;
	height: 35px;
	background: #DEFF33;
}
/* ホバーボックス位置の設定 */
.pig:hover .aipig{
    display: inline-block;
    top: 3520px;
    left: 0px;
}


/* ------ High School Final Work ------ */
.HS{
    position: relative;
    cursor: pointer;
    /*display:  inline-block;*/
}
/* 写真の設定 */
.HS img{
	position: absolute;
	top: 3116px;
	left: 663px;
	width: 617px;
	height: 328px;
	padding-bottom: 250px; /*下の余白*/
}
/* ホバーボックスの設定 */
.highschool{
    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: 617px;
	height: 35px;
	background: #DEFF33;
}
/* ホバーボックス位置の設定 */
.HS:hover .highschool{
    display: inline-block;
    top: 3444px;
    left: 663px;
}


#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){
}