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

/* specific */

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

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

#contentWrap{
}

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/sprite.png) no-repeat 0 0;
	}

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

#credit {
	position: absolute;
	width: 186px;
	height: 12px;
	background: url(../images/sprite.png) no-repeat 0 -26px;
	right: 27px;
	bottom: 15px;
	z-index: 255;
}






@media screen and (max-height: 767px) {

	h1#logo {
		width: 543px;
		height: 23px;
		overflow: hidden;
		background: url(../images/sprite.png) no-repeat 0 -165px;
	}
}

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

.main {
width: 100%;
}



	#mainWrap {
	color: #fff;
	display: table-cell;
	vertical-align: middle;
	}
	#mainContent {
	margin: 20px;
	}
/*
.centering {
	margin: 0;
}	
	#gnav {
	margin-top: 26px;
	padding: 0;
	text-align: center;
	list-style-type: none;
	width: 100%;
	}

	#gnav li {
	margin-bottom: 10px;
	width: 120px;
	}

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

#mainContent section{
float: none;
}

	/* profile */

	#mainContent h2#profileH.replace {
	background: url('../images/sprite.png') no-repeat -243px -74px;
	width: 95px;
	height: 27px;
	margin-bottom: 26px;
	}
	#profileName {
	background: url('../images/sprite.png') no-repeat -258px -101px;
	width: 278px;
	height: 20px;
	margin-top:30px;
	margin-bottom: 20px;
	}
	#profileText {
	width: 100%;
	overflow: hidden;
	}
	.profileP {
	margin-bottom: 22px;
	}
	.profileMag {
	letter-spacing: -0.1em;
	}
	#profileImg {
	width: 100%;
	height: 336px;
	background-color: transparent;
	overflow: hidden;
	right:0;
	bottom:3px;
	}
	#profileImg img {
	width: 237px;
	height: 336px;
	}
}
/* スマホ用*/
@media screen and (max-width: 480px) {

	.pcHeader{
		display: none;
	}
	.spHeader{
		display: block;
	}
	.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;
	}
}