/* general */

.replace {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	font: 0/0 a;
	display: block;
}
.nom {
	margin: 0 !important;
}

.centering {
	margin: 0 auto;
}

.left {
	float: left;
}

.right {
	float: right;
}

.display {
	display: block;
}

.NoDisp{
display: none;
}
/* specific */

html {
	background-color: #000;
	min-height: 100%;
	height:100%;
	font-family:"MS Serif", "Times New Roman", "serif", serif;
	letter-spacing: 0.05em;
}
html.win {
	font-family:"MS Serif", "Times New Roman", "serif", serif;
}

body,
.bgstretcher-area,
.bgstretcher-page {
	height:100%;

}

#contentWrap{
	height:100%;
}

header {
	margin: 0 auto;
	width: 100%;
	height: 16%;
	min-height: 96px;
	display:block;
	overflow: hidden;
	background: url(../images/screen02.png) repeat-x 0 bottom;
	text-align: center;
	/*position: fixed;*/
}
.spHeader{
	display: none;
}
#headerCentering {
	width: 746px;
	margin: 0 auto;
	text-align: center;
}
#headerCentering a.centering {
	display: block;
	height: 26px;
	width: 630px;
	margin-left: 58px;
}
	h1#logo {
		width: 630px;
		height: 26px;
		overflow: hidden;
		background: url(../images/logo_l.png) no-repeat 0 0;
		background-size: 100%;
	}

nav {
	width: 746px;
	margin: 0 auto;
	text-align: center;
}


	#gnav {
		margin: 4.3% auto 0;
		text-align: center;
		list-style-type: none;
		width: 576px;
		
	}

#gnav li {
	float: left;
}

#gnav li a {
	height: 17px;
	margin: 0 116px 0 0;
}

#gnav li a.gnav1 {
	width: 81px;
	background: url(../images/gnav_01.png) no-repeat 0 0;
	background-size: 100%;
}
#gnav li a:hover {
  opacity: 0.7;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
#gnav li a.gnav2 {
	width: 59px;
	background: url(../images/gnav_02.png) no-repeat 0 0;
	background-size: 100%;}

#gnav li a.gnav3 {
	width: 45px;
	background: url(../images/gnav_03.png) no-repeat 0 0;
	background-size: 100%;}

#gnav li a.gnav4 {
	width: 51px;
	background: url(../images/gnav_04.png) no-repeat 0 0;
	background-size: 100%;}

#gnav li a.gnav5 {
	width: 37px;
	background: url(../images/gnav_05.png) no-repeat 0 0;
	background-size: 100%;
}

#gnav li a.gnav6 {
	width: 56px;
	background: url(../images/gnav_06.png) no-repeat 0 0;
	background-size: 100%;
	margin-right: 0;
}
div#Base {
width: 100%;
height: 100%;
min-height: 100%;
}

#credit {
	text-align: right;
}

article {
margin: 0;
padding: 0 0 100px;
font-size: 12px;
line-height: 1.7;
}
.main {
width: 864px;
margin: 0 auto;
}
#mainWrap {
color: #fff;
display: table-cell;
vertical-align: middle;
}
#mainContent {
    margin-top: 40px;
    margin-left: 39px;
}

/* contact */



#mainContent h3#contactH.replace {
	width: 91px;
	height: 24px;
	background: url(../images/h3_06.png) no-repeat 0 0;
	background-size: 100%;
	margin-bottom: 30px;

}


.contactP {
	float: left;
	width: 800px;
	overflow: hidden;
}
	




/* profile */

#mainContent h2#profileH.replace {
	width: 83px;
	height: 24px;
	margin-bottom: 26px;
	background: url(../images/h3_04.png) no-repeat 0 0;
	background-size: 100%;

}
#profileName {
	width: 286px;
	height: 19px;
	background: url(../images/profileName.png) no-repeat 0 0;
	background-size: 100%;
	margin-top:30px;
	margin-bottom: 20px;
}
#profileText {
	float: left;
	width: 570px;
	overflow: hidden;
}
.profileP {
	margin-bottom: 22px;
}

.terms{
	font-size: 8px;
	letter-spacing: 0.03em;
}
#profileImg {
	width: 237px;
	height: 336px;
	background-color: #000;
	overflow: hidden;
	right:0;
	bottom:3px;
}
#profileImg img {
	width: 240px;
	height: 367px;
}

/* clientwork */
#mainContent h3#clientwH.replace {
	width: 130px;
	height: 24px;
	background: url(../images/h3_01.png) no-repeat 0 0;
	background-size: 100%;
	margin-bottom: 40px;
}



#mainContent section{
width: 190px;
height: 170px;
float: left;
margin-right: 20px;
margin-bottom: 36px;
}

#mainContent section h4{
margin: 0 0 10px 0;
}

#mainContent section:nth-child(4n+1){
margin-right: 0px;
}
#mainContent section div.ImageBox01{
}

#mainContent section div.ImageBox01:nth-child(4n+1){
margin-right: 0px;
}

#mainContent section div.ImageBox01 a{
text-decoration:none;
}

#mainContent section div.ImageBox01 img{
margin: 0px;
}

#mainContent section div.ImageBox01 p{
font-size: 11px;
line-height: 17px;
color: #fff;
margin: 0;
}


/* artwork */

#mainContent h3#artwH.replace {
	width: 94px;
	height: 24px;
	background: url(../images/h3_02.png) no-repeat 0 0;
	background-size: 100%;
	margin-bottom: 40px;

}

/* works */

#mainContent h3#worksH.replace {
	width: 72px;
	height: 24px;
	background: url(../images/h3_03.png) no-repeat 0 0;
	background-size: 100%;
	margin-bottom: 40px;
}

@media screen and (max-height: 767px) {
	h1#logo {
		width: 543px;
		height: 23px;
		overflow: hidden;
		background: url(../images/logo_s.png) no-repeat 0 0;
		background-size: 100%;
	}
	/*#profileName {
	background: url('../images/sprite.png') no-repeat -258px -198px;
	width: 253px;
	height: 18px;
	margin-top:30px;
	}*/
	
	#profileImg {
		width: 210px;
		height: 310px;
	}
	.profileP {
		margin-bottom: 13px;
	}
	#profileText {
		width: 564px;
	}

}

@media screen and (max-width: 768px) {

.main {
width: 100%;
}

	
	
#mainContent section{
margin-right: 20px;
}
#mainContent section:nth-child(4n+1){
margin-right: 20px;
}
	/* profile */

	#profileText {
	width: 100%;
	overflow: hidden;
	}
	.profileP {
	margin-bottom: 22px;
	}
	.profileMag {
	letter-spacing: -0.1em;
	}
	#profileImg {
	width: 100%;
	height: inherit;
	background-color: transparent;
	overflow: hidden;
	right:0;
	bottom:3px;
	}
	#profileImg img {
	width: 150px;
	height: inherit;
	margin: 15px 0;
	}

}

/* スマホ用*/
@media screen and (max-width: 480px) {

.main {
width: 100%;
}


#Base{
position: absolute;
}


	.pcHeader{
		display: none;
	}
	.spHeader{
		display: inherit;
	}
	.spHeader div{
	line-height:0;
 	}
	header {
		height: auto;
		background: none;
	}

	#headerCentering {
		width: 100%;
		margin: 0 auto;
		text-align: center;
	}
		h1#logo {
			width: 100%;
			height: 165px;
			overflow: auto;
			background: url(../images/title.png) no-repeat 0 0;
			background-size: 100%;
		}

		#gnav {
			margin-top: 0;
			padding: 0;
			text-align: center;
			list-style-type: none;
			width: 764px;
		}

	#gnav li {
		float: left;
	}

	#gnav li a {
		height: 17px;
		margin: 0 116px 0 0;
	}

	#gnav li a.gnav1 {
		width: 83px;
		background: url(../images/sprite.png) no-repeat 0 -38px;
	}
	#gnav li a.gnav1:hover {
		background-position: 0 -56px;
	}
	#gnav li a.gnav2 {
		width: 60px;
		background: url(../images/sprite.png) no-repeat -83px -38px;
	}
	#gnav li a.gnav2:hover {
		background-position: -83px -56px;
	}
	#gnav li a.gnav3 {
		width: 51px;
		background: url(../images/sprite.png) no-repeat -143px -38px;
	}
	#gnav li a.gnav3:hover {
		background-position: -143px -56px;
	}
	#gnav li a.gnav4 {
		width: 32px;
		background: url(../images/sprite.png) no-repeat -194px -38px;
	}
	#gnav li a.gnav4:hover {
		background-position: -194px -56px;
	}
	#gnav li a.gnav5 {
		width: 56px;
		background: url(../images/sprite.png) no-repeat -226px -38px;
		margin-right: 0;
	}
	#gnav li a.gnav5:hover {
		background-position: -226px -56px;
	}
	

/* clientwork */

	

#mainContent section{
    width: 130px;
	height: 100px;
    /*height: auto;*/
	float: left;
	margin-right: 25px;
}

#mainContent section:nth-child(2n+1){
margin-right: 0px;
}
#mainContent section div.ImageBox01{
}

#mainContent section div.ImageBox01:nth-child(4n+1){
margin-right: 0px;
}


#mainContent section div.ImageBox01 img{
    width: 135px;
    height: 90px;
	}


/* profile */

.profileP ,
.contactP ,
.terms{
	margin-right: 22px;
}