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

* {
	margin: 0;
	padding: 0;
}

body {  
    background-color: #000000;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 80%;
    color: #424242;
    height: 100%;
    outline: none;
}

a {
	text-decoration: none;
}

img {
	border: none;
}

ul {
	list-style: none;
}

a:link { 
    color: #424242;
}  
a:visited {  
    color: #424242;
}  
a:hover {  
    color: #424242;
}  
a:active {  
    color: #424242;
} 

.clear {
	clear: both;
}

em {
	font-style: normal;
	font-weight: normal;
	text-decoration: none;
}



/*----------------------------------------------------------
 * Top page ロゴ画像
------------------------------------------------------------*/
#mainimg {
	text-align: center;
	padding: 100px 0 100px 0;
}

#logo {
	text-align: center;
	padding: 20px 0 20px 0;
}



/*----------------------------------------------------------
 * Navigation
------------------------------------------------------------*/
#navi {
	margin-bottom: 20px;
}

#navi ul {
	list-style: none;
	text-align: center;
}

#navi li {
	margin: 0px 10px 0 10px;
	display: inline-block;
	vertical-align: middle;
}

.instagram {
	opacity: 0.3;
}



/*----------------------------------------------------------
 * Profile page プロフィール画像
------------------------------------------------------------*/
.profile_img_area {
	width: 800px;
	margin: 20px auto;
}

.profileimg {
	display: block;
	width: 100%;
}



/*----------------------------------------------------------
 * Contact page
------------------------------------------------------------*/
#contact_info {
	margin-top: 80px;
}



/*----------------------------------------------------------
 * Works page
------------------------------------------------------------*/
.ImageLink .ui-tabs-hide { 
	display: none;
}

.ImageLink ul li {
	float: left;
	margin-right: 2px;
}

.ImageLink ul li a {
	color: #AFAFAF;
}

h2 {
	color: #FFFFFF;
	font-size: 16px;
	margin-bottom: 5px;
}

.invisibledots {
	visibility: hidden;
}



@media screen and (min-width: 1025px) {
/*----------------------------------------------------------
 * Works page 1025px以上の画面サイズで適用されるスタイル
------------------------------------------------------------*/
	.wrap {
		overflow: hidden;
		width: 800px;
		margin-left: auto;
		margin-right: auto;
	}

	.wrap .left {
		float: left;
		width: 250px;
	}

	.left {
		width: 250px;
		float: left;
		font-size: 14px;
		line-height: 1.5em;
	}

	.right {
		float: right;
		width: 550px;
	}

	.wrap dt {
		color: #FFFFFF;
		font-weight: bold;
	}

	.wrap dd {
		padding-bottom: 10px;
	}

	.copyright {
		width: 800px;
		margin: 0 auto;
		padding: 80px 0 80px 0;
	}

	#content {
		width: 800px;
		margin: 0 auto;
	}

	#main {
		width: 800px;
	}

	.tips {
		width: 300px;
		color: #AFAFAF;
		float: left;
	}

	.pagetop {
		text-align: right;
		width: 800px;
		margin: 0 auto;
	}

/*----------------------------------------------------------
 * Works page 各作品ごとに調整(1025px以上の画面サイズ用)
------------------------------------------------------------*/
	.view_oneself00 {
		position:relative;
		left:300px;
		bottom:170px;
	}

	.view_people {
		position:relative;
		left:300px;
		bottom:170px;
	}

	.view_Erosion0 {
		position:relative;
		left:300px;
		bottom:210px;
	}

	.view_Erosion4 {
		position:relative;
		left:300px;
		bottom:170px;
	}

	.view_Erosion5 {
		position:relative;
		left:300px;
		bottom:170px;
	}

	.view_Erosion123 {
		position:relative;
		left:300px;
		bottom:170px;
	}

	.view_invisible {
		position:relative;
		left:300px;
		bottom:190px;
	}

	.view_Racism {
		position:relative;
		left:300px;
		bottom:210px;
	}

	.view_Bloom {
		position:relative;
		left:300px;
		bottom:170px;
	}

	.view_Espoir {
		position:relative;
		left:300px;
		bottom:170px;
	}

	.view_ReEspoir {
		position:relative;
		left:300px;
		bottom:170px;
	}

	.view_PoE {
		position:relative;
		left:300px;
		bottom:170px;
	}

	.view_award {
		position:relative;
		left:300px;
		bottom:210px;
	}

	.view_oneself03 {
		position:relative;
		left:300px;
		bottom:170px;
	}

	.view_oneself04 {
		position:relative;
		left:300px;
		bottom:170px;
	}

	.view_japan {
		position:relative;
		left:300px;
		bottom:170px;
	}

	.view_japan02 {
		position:relative;
		left:300px;
		bottom:170px;
	}

	.view_Life {
		position:relative;
		left:300px;
		bottom:170px;
	}

	.view_lip {
		position:relative;
		left:300px;
		bottom:250px;
	}

	.view_action {
		position:relative;
		left:300px;
		bottom:170px;
	}

	.view_PFJ {
		position:relative;
		left:300px;
		bottom:170px;
	}

	.view_NYC {
		position:relative;
		left:300px;
		bottom:250px;
	}

	.view_ZIDANE {
		position:relative;
		left:300px;
		bottom:130px;
	}

	.view_venus {
		position:relative;
		left:300px;
		bottom:170px;
	}
}




@media (max-width: 1024px) {
/*----------------------------------------------------------
 * Works page 1024px以下の画面サイズで適用されるスタイル
------------------------------------------------------------*/
	.profile_img_area {
		width: 100%;
		margin: 20px auto;
	}

	.wrap {
		margin: 0 20px 0 20px;
	}

	.wrap dt {
		color: #FFFFFF;
		font-weight: bold;
	}

	.wrap dd {
		padding-bottom: 10px;
	}

	.left {
		margin-bottom: 20px;
	}

	#footer {
		width: 100%;
		margin: 0 auto;
	}

	.copyright {
		padding: 40px 20px 40px 20px;
	}
	#contact_info {
		margin-top: 40px;
	}

	#content {
		margin: 0 auto;
	}

	.tips {
		color: #AFAFAF;
		margin-bottom: 60px;
	}

	.pagetop {
		text-align: right;
		padding: 0 20px 0 20px;
	}

/*----------------------------------------------------------
 * Works page 各作品ごとに調整(1024px以下の画面サイズ用)
------------------------------------------------------------*/
	.view_oneself00 img {
		margin-top: 10px;
		width: 100%;
	}

	.view_people img {
		margin-top: 10px;
		width: 100%;
	}

	.view_Erosion0 img {
		margin-top: 10px;
		width: 100%;
	}

	.view_Erosion4 img {
		margin-top: 10px;
		width: 100%;
	}

	.view_Erosion5 img {
		margin-top: 10px;
		width: 100%;
	}

	.view_Erosion123 img {
		margin-top: 10px;
		width: 100%;
	}

	.view_invisible img {
		margin-top: 10px;
		width: 100%;
	}

	.view_Racism img {
		margin-top: 10px;
		width: 100%;
	}

	.view_Bloom img {
		margin-top: 10px;
		width: 100%;
	}

	.view_Espoir img {
		margin-top: 10px;
		width: 100%;
	}

	.view_ReEspoir img {
		margin-top: 10px;
		width: 100%;
	}

	.view_PoE img {
		margin-top: 10px;
		width: 100%;
	}

	.view_award img {
		margin-top: 10px;
		width: 100%;
	}

	.view_oneself03 img {
		margin-top: 10px;
		width: 100%;
	}

	.view_oneself04 img {
		margin-top: 10px;
		width: 100%;
	}

	.view_japan img {
		margin-top: 10px;
		width: 100%;
	}

	.view_japan02 img {
		margin-top: 10px;
		width: 100%;
	}

	.view_Life img {
		margin-top: 10px;
		width: 100%;
	}

	.view_lip img {
		margin-top: 10px;
		width: 100%;
	}

	.view_action img {
		margin-top: 10px;
		width: 100%;
	}

	.view_PFJ img {
		margin-top: 10px;
		width: 100%;
	}

	.view_NYC img {
		margin-top: 10px;
		width: 100%;
	}

	.view_ZIDANE img {
		margin-top: 10px;
		width: 100%;
	}

	.view_venus img {
		margin-top: 10px;
		width: 100%;
	}
}