@charset "UTF-8";
/*CSSをリセットする*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img { 
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym {
	border:0;
}

/*全体の調整*/
body {
    font:13px Georgia, Century, serif;
    *font-size:small;
    *font:x-small;
	-webkit-text-size-adjust: none;
	background:#eee;
}
a{
	ouline: 0;
}
/*セクションの設定*/
div.section {
	width: 100%;
	max-width: 1900px;
	height: 800px;
	position: relative;
	margin: 0 auto;
}
/*レイヤーの設定*/
div.layer {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}


@-webkit-keyframes rotateArea {
	0% {-webkit-transform: rotate(0deg); opacity:0;}
	100% {-webkit-transform: rotate(360deg); opacity:1; }
}



/*背景画像の設定*/
/*0*/
#section0 {

	background: url(../images/back1.jpg) no-repeat 0px 0px;
	

}
#section0 .layer1 {
	background: url(../images/item9.png) no-repeat 650px 0px;
}
#section0 .layer3 {
	background: url(../images/item7.png) repeat-y 750px 0px;
}
#section0 .layer2 {
	background: url(../images/hishikawa222.png) no-repeat 400px -80px;
		-webkit-animation-name: rotateArea;
	-webkit-animation-delay: 0.5s;
	-webkit-animation-duration: 3s;
	-webkit-animation-iteration-count: 1;
	padding-left:200px;
	padding-top:-140px;
}



/*1*/
#section1 {
	background-color:#ff0072;
}

#section1 .layer1 {
	background: url(../images/hishi5.png) no-repeat 300px 100px;
}
#section1 .layer2 {
	background: url(../images/hishi4.png) no-repeat 40px 10px;
}
#section1 .layer3 {
	background: url(../images/hishi2.png) no-repeat 20px 240px;
}


#section1 .layer4 {
	background: url(../images/hishi1.png) no-repeat 200px 150px;
}


/*2*/
#section2 {

	background: url(../images/texture_13.jpg) no-repeat 0px 0px;

}
#section2 .layer1 {
	background: url(../images/slide3.png) no-repeat 500px 30px;
}
#section2 .layer2 {
	background: url(../images/math.png) no-repeat 500px 30px;
}

/*3*/
#section3 {
	background-color:#b2d580;
}


/*各セクション内のレイアウト等*/
/*0*/
#section0 h1 {
	position: absolute;
	left: 8%;
	top: 80px;
}
ul#topNav {
	position: absolute;
	left: 8%;
	bottom: 130px;
}
ul#topNav li {
	display: inline;
	margin-right: 40px;
}

/*1*/
#section1 h2 {
	position: absolute;
	left: 50%;
	top: 80px;
}
#section1 p {
	position: absolute;
	left: 50%;
	top: 170px;
	color: #fff;
	font-size: 90%;
	width: 450px;
	line-height: 2;
}

/*2*/
#section2 h2 {
	position: absolute;
	left: 8%;
	top: 80px;
}
#section2 p {
	position: absolute;
	left: 8%;
	top: 120px;
	color: #000;
	font-size: 90%;
	width: 450px;
	line-height: 2;
}
/*3*/
#section3 h2 {
	position: absolute;
	left: 50%;
	top: 80px;
}
#section3 p {
	position: absolute;
	left: 50%;
	top: 170px;
	color: #fff;
	font-size: 90%;
	width: 450px;
	line-height: 2;
}
#section3 h3 {
	position: absolute;
	left: 50%;
	top: 170px;
}
#section3 ul {
	position: absolute;
	left: 50%;
	top: 190px;
}
#section3 li {
	font-size: 90%;
	padding:3px;
}
#section3 h4{
	position: absolute;
	left: 50%;
	top: 450px;
}

#section3 .log {
	position: absolute;
	left: 50%;
	top: 500px;
}
#section3 .manga {
	font-size: 90%;
	padding:3px;
	float:left;
}

#section3 h5{
	position: absolute;
	left: 50%;
	top: 550px;
}

#section3 .pop {
	position: absolute;
	left: 50%;
	top: 570px;
}
#section3 .illust {
	font-size: 90%;
	padding:3px;
	float:left;
}

#section3 h6{
	position: absolute;
	left: 50%;
	top: 600px;
}
#section3 .ugoki{
	position: absolute;
	left: 50%;
	top: 620px;
	color:#000;
}
#section3 .k_text{
	position: absolute;
	left: 50%;
	top: 380px;
	color:#000;
}


/*ナビゲーション*/
ul#nav {
	position: fixed;
	left: 20px;
	top: 20px;
	background: #000;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
	padding: 8px 15px 0px 15px;
}
ul#nav li {
	display: inline;
	margin: 0 10px;
}
ul#nav li a {
	opacity: 0.6;
}
ul#nav li a:hover {
	opacity: 1;
}


/* ------------------------------------------------------------------------ロールオーバー------------------------------------------------------------------------------------------------ */

	 a:hover img{
opacity:0.8;
filter:alpha(opacity=80);
-ms-filter: "alpha( opacity=80 )";
}

	 a:hover {
opacity:0.8;
filter:alpha(opacity=80);
-ms-filter: "alpha( opacity=80 )";
} 	 
		 
		  
	 
a{/*リンクされた文字*/
    color:#ff0084;
    font-style:normal;
	 text-decoration:none;
   
}
a:link {/*未訪問のリンク*/
    color:#ff0084;
    font-style:normal;
	 text-decoration:none;
   
}
a:visited {/*訪問後のリンク*/
    color:#ff0084;
	 text-decoration:none;
   
}
a:active {/*クリック中*/
    text-decoration:none;
}




/*-----出、出〜〜〜！flipするやつ------*/




@-webkit-keyframes flip {
	0% {
		-webkit-transform: perspective(400px) rotateY(0);
		-webkit-animation-timing-function: ease-out;
	}
	40% {
		-webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg);
		-webkit-animation-timing-function: ease-out;
	}
	50% {
		-webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
		-webkit-animation-timing-function: ease-in;
	}
	80% {
		-webkit-transform: perspective(400px) rotateY(360deg) scale(.95);
		-webkit-animation-timing-function: ease-in;
	}
	100% {
		-webkit-transform: perspective(400px) scale(1);
		-webkit-animation-timing-function: ease-in;
	}
}
@-moz-keyframes flip {
	0% {
		-moz-transform: perspective(400px) rotateY(0);
		-moz-animation-timing-function: ease-out;
	}
	40% {
		-moz-transform: perspective(400px) translateZ(150px) rotateY(170deg);
		-moz-animation-timing-function: ease-out;
	}
	50% {
		-moz-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
		-moz-animation-timing-function: ease-in;
	}
	80% {
		-moz-transform: perspective(400px) rotateY(360deg) scale(.95);
		-moz-animation-timing-function: ease-in;
	}
	100% {
		-moz-transform: perspective(400px) scale(1);
		-moz-animation-timing-function: ease-in;
	}
}
@-o-keyframes flip {
	0% {
		-o-transform: perspective(400px) rotateY(0);
		-o-animation-timing-function: ease-out;
	}
	40% {
		-o-transform: perspective(400px) translateZ(150px) rotateY(170deg);
		-o-animation-timing-function: ease-out;
	}
	50% {
		-o-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
		-o-animation-timing-function: ease-in;
	}
	80% {
		-o-transform: perspective(400px) rotateY(360deg) scale(.95);
		-o-animation-timing-function: ease-in;
	}
	100% {
		-o-transform: perspective(400px) scale(1);
		-o-animation-timing-function: ease-in;
	}
}
@keyframes flip {
	0% {
		transform: perspective(400px) rotateY(0);
		animation-timing-function: ease-out;
	}
	40% {
		transform: perspective(400px) translateZ(150px) rotateY(170deg);
		animation-timing-function: ease-out;
	}
	50% {
		transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
		animation-timing-function: ease-in;
	}
	80% {
		transform: perspective(400px) rotateY(360deg) scale(.95);
		animation-timing-function: ease-in;
	}
	100% {
		transform: perspective(400px) scale(1);
		animation-timing-function: ease-in;
	}
}

.flip {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-backface-visibility: visible !important;
	-webkit-animation-name: flip;
	-moz-backface-visibility: visible !important;
	-moz-animation-name: flip;
	-o-backface-visibility: visible !important;
	-o-animation-name: flip;
	backface-visibility: visible !important;
	animation-name: flip;
}