/*
takeshiwatamura.jp 20130302
*/

@charset "utf-8";

/* @Webfonts
------------------------------------------------------------------ */
/* @import url(//fonts.googleapis.com/css?family=Muli); */
/* @import url(//fonts.googleapis.com/css?family=Inconsolata); */
/* @import url(//fonts.googleapis.com/css?family=Bitter); */
@import url(//fonts.googleapis.com/css?family=PT+Sans);
/* @import url(//fonts.googleapis.com/css?family=Doppio+One); */
/* @import url(//fonts.googleapis.com/css?family=Sintony); */
/* @import url(//fonts.googleapis.com/css?family=Oxygen); */
/* @import url(//fonts.googleapis.com/css?family=Rambla); */
/* @import url(//fonts.googleapis.com/css?family=Raleway); */
/* @import url(//fonts.googleapis.com/css?family=Inconsolata); */
/* @import url(//fonts.googleapis.com/css?family=Open+Sans); */
/* @import url(//fonts.googleapis.com/css?family=Lekton:400,700); */


/* @Stracture
------------------------------------------------------------------ */
html {
	font-family: 'akzidenz-grotesk',"AkzidenzGrotesk"/* ,'Muli','Inconsolata','Bitter','PT Sans','Doppio One','Oxygen','Rambla','Raleway','Inconsolata','Open+Sans','Lekton', 'Koburina Gothic W3 JIS2004', Helvetica, Arial, Courier, Monaco */;
	font-size:62.5%;
}
body {
	font-size:10px; font-size:1.0rem;
	line-height: 2;
	letter-spacing: 0.1rem;
	z-index: 2147483647;
	color: #fff;
}
div#wrap {
	padding: 100px 50px 50px 50px;
	opacity: 0.0;
	filter: alpha(opacity=0);
	-ms-filter: alpha(opacity=0);
}

/* @Global
------------------------------------------------------------------ */
a { outline: none; text-decoration: none; }
a:link, a:visited { color: #f33; }
a:hover { text-decoration: underline; }
a { text-decoration: none; }
a:link, a:visited { text-decoration: none; color: inherit; }
::-moz-selection { background:#eee; color:inherit; }
::selection { background:#eee; color:inherit; }
a::-moz-selection { background:#f2eacf; color:#222; }
a::selection { background:#f2eacf; color:#222; }

#header {
	padding-bottom: 30px;
}
h1.look span {
	font-size: 450%; font-size:4.5rem;
	font-weight: normal;
	line-height: 1.4;
}
h2 {
	font-size: 280; font-size:2.8rem;
	font-weight: normal;
	text-transform: uppercase;
}
h2 span {
	font-size:20px; font-size:2.0rem;
	font-weight: normal;
	text-transform: lowercase;
}
ul {
	font-size:20px; font-size:2.0rem;
	padding-left: 10px;
	line-height: 1.7;
}
ul li {
	list-style: none;
	letter-spacing: 1.3px;
}
#fullscreen span, #music span {
	cursor : pointer;
}
#option {
	position: fixed; bottom: 0px; right: 20px;
	text-align: right;
	font-size:15px; font-size:1.5rem;
}
#copyright {
  font-size: 13px !important;
  line-height: 1 !important;
}
.pcbr {
  display: none;
}
.op2 {
	opacity: 0.2;
	filter: alpha(opacity=20);
	-ms-filter: alpha(opacity=20);
}

/* ローディングバー */
.pace {
	-webkit-pointer-events: none;
	pointer-events: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	-webkit-transform: translate3d(0, -50px, 0);
	-ms-transform: translate3d(0, -50px, 0);
	transform: translate3d(0, -50px, 0);
	-webkit-transition: -webkit-transform .5s ease-out;
	-ms-transition: -webkit-transform .5s ease-out;
	transition: transform .5s ease-out;
}
.pace.pace-active {
	-webkit-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.pace .pace-progress {
	display: block;
	position: fixed;
	z-index: 2000;
	top: 0;
	right: 100%;
	width: 100%;
	height: 5px;
	background: #fff;
	pointer-events: none;
}

/* @Background
------------------------------------------------------------------ */

div#particles {
	position: fixed; top: 0px; left: 0px;
	width: 100%;
	height: 100%;
	z-index: -2147483644;
	opacity: 0.3;
	filter: alpha(opacity=30);
	-ms-filter: alpha(opacity=30);
}
div#wrapsiteoverlay {
	opacity: 0.25;
	filter: alpha(opacity=25);
	-ms-filter: alpha(opacity=25);
	position: fixed; top: 0px; left: 0px;
	width: 100%;
	height: 100%;
	background: url(../img/common/100-90-3.png) 0 0 repeat fixed;
/* 	background: url(../img/common/bg-noise1.gif) 0 0 repeat fixed; */
	z-index: -2147483645;
	animation: noise_anima 1s steps(10) infinite;
	-webkit-animation: noise_anima 1s steps(10) infinite;
}
@keyframes noise_anima {
	from { background-position: 0 0; }
	to { background-position: 123px 456px; }
}
@-webkit-keyframes noise_anima {
	from { background-position: 0 0; }
	to { background-position: 123px 456px; }
}
/* グラデーション用 */
div#wrapgradientsoverlay {
	position: fixed; top: 0px; left: 0px;
	width: 100%;
	height: 100%;
	z-index: -2147483646;
	background: -moz-linear-gradient(left top, #FCC, #006 70%);
	background: -webkit-linear-gradient(left top, #FCC, #006 70%);
	background: linear-gradient(to bottom right, #FCC, #006 70%);
	opacity: 0.1;
	filter: alpha(opacity=10);
	-ms-filter: alpha(opacity=10);
}
/* WEBサイトローディング用 */
object#wrapsite {
	-webkit-filter: blur(2px); -ms-filter: blur(2px); filter: blur(2px);
	position: fixed; top: 0px; left: 0px;
	width: 100%;
	height: 100%;
	z-index: -2147483647;
	opacity: 0.6;
	filter: alpha(opacity=60);
	-ms-filter: alpha(opacity=60);
}

/* @Smartphone
------------------------------------------------------------------ */
@media screen and (max-width: 480px) {
	div#wrap {
		padding: 10px;
	}
	#header {
		padding: 30px 0px 10px;
	}
	h1.look span {
		font-size:35px; font-size:3.5rem;
		line-height: 1.0;
	}
	h2 {
		font-size:23px; font-size:2.3rem;
	}
	h2 span {
		display: none;
/* 		font-size:14px; font-size:1.4rem; */
	}
	ul {
		font-size:18px; font-size:1.8rem;
		line-height: 1.5;
	}
	#option {
		line-height: 1.3;
		font-size:12px !important;
		font-size:1.2rem !important;
  	position: relative; left: 2px;
  	text-align: left;
  }
  .pcbr {
/*     display: block; */
  }

}

@media screen and (max-width: 320px) {
	div#wrap {
		padding: 10px;
	}
}