@charset "UTF-8";
/* CSS Document */
/*style.css*/

/*全体
------------------------------------------*/
*, *:before, *:after{
  box-sizing:border-box;
}
body{
	margin: 0;
	min-width:200px;
	padding: 0;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
p{
	margin: 0 0 20px 0;
}
p, ul{
	font-family:"Proxima Nova Light", 'Helvetica Neue', Arial, Helvetica, sans-serif;
	font-size-adjust:0.488;
	font-weight:200;
	font-style:normal;
}
img{
	border:none;
	border-style:none;
}
a:link,
a:visited,
a:active,
a:hover { /* FireFox リンク選択時の点線を消す */
	overflow: hidden;
	outline: none;
}
h1, #pixels{
	font-family:Arial, Helvetica, sans-serif;
	font-size-adjust:0.40;
	font-weight:nomal;
	font-style:normal;
	text-align:center;
	margin-top:150px;
}
h2{
	font-family:"Beau Sans Pro Book", Verdana, sans-serif;
	font-size-adjust:0.531;
	font-weight:500;
	font-style:normal;
	margin-bottom:10px;
}
#header h1, #pixels{
	color: #48941A;
}
.float-left{
	float: left;	
	margin: 0 0 0 20px;
}
.float-right{
	float: right;
	margin: 0 20px 0 0;
}
.float-right p{
	line-height:1.15em;
}
.center{
	font-size: 1em;
	padding: 20px 0 0 0;
	text-align: center;
	color:#513743;
}
#header, #intro, #second{
	width: 100%;
}

/*nav
------------------------------------------*/
#nav{
	list-style: none;
	position: fixed;
	right: 25px;
	top:140px;
	z-index:600;
}
#nav li{
	margin: 0 0 15px 0;	
}

/*intro
------------------------------------------*/
#intro{
	background:url(../images/red.png) 100% 0 repeat-x fixed;
	color: white;
	height: 1300px;
	margin: 0 auto;
	padding: 0;
	z-index:100;
}
#intro h1{
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	padding-top:0px;
	font-size:1em;
	font-weight:normal;
	z-index:300;
}
#intro h2{
	margin-top:220px;
}
#intro h2#year{
	margin-top:100px;
}

/*second
------------------------------------------*/
#second{
	background: url(../images/buildings.jpg) 50% 0 repeat fixed;
	color: #a22041;
	height: 1400px;
	margin: 0 auto;
	overflow: hidden;
	padding: 0;
	z-index:200;
}
#second .bg{
	background: url(../images/colordots.png);
	background-position:top center;
	background-repeat: repeat-x;
	height: 1400px;
	margin-top: 80px;
	padding: 0;
	position: absolute;
	width:2600px;
	z-index: 500;
}
#second .bg2{
	background: url(../images/colordots2.png);
	background-position:top center;
	background-repeat: repeat-x;
	height: 1400px;
	margin-top: -30px;
	padding: 0;
	position: absolute;
	width: 2600px;
	z-index: 400;
}
#second .float-left{
	margin-top:30px;
	z-index:200;
}
#second .float-right{
	margin-top:380px;
	z-index:200;
}

/*third
------------------------------------------*/
#third{
	background: url(../images/yellow.jpg) 50% 0 no-repeat fixed;
	color: white;
	height: 1100px;
	padding: 80px 0 0 0;
}
#third p{
	font-size:0.75em;
	line-height:1.65;
}

/*fourth
------------------------------------------*/
#fourth{
	height:220px;
}

/*fifth
------------------------------------------*/
#fifth{
	background:#ede4e1;
	height: 490px;
	margin: 0 auto;
	padding: 60px 0 0 0;
}
#fifth img{
	padding:5px;
	background-color:#fff;
}
.story p.fifth{
	text-align:center;
	margin-top:45px;
	color:#513743;
}

/*sixth
------------------------------------------*/
#sixth{
	background: #fff;
	height: 300px;
	margin: 0 auto;
	padding: 40px 0 0 0;
}
#sixth footer{
	text-align:center;
	font-size:0.875em;
	font-weight:lighter;
}
#sixth footer address{
	font-style:normal;
}

/*seventh
------------------------------------------*/
#seventh{
	background: url(../images/curers.jpg) 50% 0 no-repeat fixed;
	color: white;
	height: 1150px;
	padding: 80px 0 0 0;
}

/*.story
------------------------------------------*/
.story{
	margin: 0 auto;
	min-width: 980px;
	overflow: auto;
	width: 980px;
}
.story .float-left, .story .float-right{
	padding: 100px 0 0 0;
	position: relative;
	width: 510px;	
}

/*clearfix
------------------------------------------*/
.clearfix{
	zoom:1;
}
.clearfix:after{
	content:"";
	display:block;
	clear:both;
}


div.foo{
  width: 90%;
  margin: 0 auto;
  text-align: center;
  margin-top:30px;
  padding-top:10px;
}
div.foo p{
	font-size:0.875em;
}
.letter{
  display: inline-block;
  font-weight:normal;
  font-size: 4em;
  margin: 0.5em;
  position: relative;
  color:#C36;
  transform-style: preserve-3d;
  perspective: 400;
  z-index: 1;
}
.letter:before, .letter:after{
  position:absolute;
  content: attr(data-letter);
  -webkit-transform-origin: top left;
  transform-origin: top left;
  top:0;
  left:0;
}
.letter, .letter:before, .letter:after{
  transition: all 0.3s ease-in-out;
}
.letter:before{
  color: #fff;
  text-shadow: 
    -1px 0px 1px #fff,
    1px 0px 1px #000;
  z-index: 3;
  -webkit-transform:
    rotateX(0deg)
    rotateY(-15deg)
    rotateZ(0deg);
  transform:
    rotateX(0deg)
    rotateY(-15deg)
    rotateZ(0deg);
}
.letter:after{
  color: rgba(0,0,0,.11);
  z-index:2;
  transform:
    scale(1.08,1)
    rotateX(0deg)
    rotateY(0deg)
    rotateZ(0deg)
    skew(0deg,1deg);
  -webkit-transform:
    scale(1.08,1)
    rotateX(0deg)
    rotateY(0deg)
    rotateZ(0deg)
    skew(0deg,1deg);
}
.letter:hover:before{
  color: #fafafa;
  -webkit-transform:
    rotateX(0deg)
    rotateY(-40deg)
    rotateZ(0deg);
  transform:
    rotateX(0deg)
    rotateY(-40deg)
    rotateZ(0deg);
}
.letter:hover:after{
  -webkit-transform:
    scale(1.08,1)
    rotateX(0deg)
    rotateY(40deg)
    rotateZ(0deg)
    skew(0deg,22deg);
  transform:
    scale(1.08,1)
    rotateX(0deg)
    rotateY(40deg)
    rotateZ(0deg)
    skew(0deg,22deg);
}

.myselector {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
}
.-webkit- .myselector {
    -webkit-transform: rotate(15deg) rotateX(0);
    transform: rotate(15deg) rotateX(0);
}
#seventh .story{
	clear:both;
	text-align:center;
	left:auto;
	right:auto;
	position:static;
}