@charset "UTF-8";


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

html,body {
	margin:0;
	padding:0;
}

/* CSS Document */
body{
	font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	font-weight: 400;
	font-size: 15px;
	background:#020438;
	color: #fff;
	margin: 0 auto;
  padding:0;
  perspective: 1px;
  transform-style: preserve-3d;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
	position:relative;
}

a{
	color: #0000aa;
	text-decoration: none;
}
p {
	font-size: 16px;
	line-height: 1.6;
	text-align:center
}

img {
    border-style:none;
}

img.wink {
	margin-bottom:1px;
}

.clr{
	clear: both;
}

.yellow {
	color:#FF0;
}


/* contents
------------------------------------------------*/
#contents {
	width: 1100px;
	margin: 0 auto;
	position: relative;
}

h1 {
	position: absolute;
	margin: 0 auto;
	z-index: 50;
	padding-top: 50px;
	left: -100px;
	top: 12px;
}



/* 01_top
-----------*/
#top {
	margin: 0 auto;
	width: 1100px;
	padding-bottom: 30px;
}
#mainV {
	position: absolute;
	z-index: 2;
}


/* 02_read
-----------*/
#read {
	width: 800px;
	margin: 0 auto;
	z-index: 100;
	margin-top: -80px
}

/* program
-----------*/
#prog {
	margin: 0 auto;
	width: 384px;
	margin-top: 110px;
}


/* box_001
-----------*/
#box001 {
	position: absolute;
	left: 71px;
	top: 820px;
}

/* box_002
-----------*/
#box002 {
	position: absolute;
	left: 746px;
	top: 816px;
}

/* box_003
-----------*/
#box003 {
	position: absolute;
	left: 90px;
	top: 1085px;
}

/* box_004
-----------*/
#box004 {
	position: absolute;
	left: 713px;
	top: 1073px;
}

/* youtube
-----------*/
#youtube {
	margin: 0 auto;
	width: 560px;
	padding-top: 180px;
}


/* summary
-----------*/
#summary {
	clear: both;
	width: 480px;
	margin: 0 auto;
	padding-top: 20px;
}

#summary ul li {
	list-style-type:none;
	margin: 10px 0;
}


/* footer
----------------*/
footer {
	margin: 0 auto;
	text-align:center;
	margin-top: 70px;
}
footer p {
	font-size: 13px;
	line-height: 1.8;
	text-align:center
}














/* bounceInLeft 
------------------------------------------------*/
@keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-1000px);
    -ms-transform: translateX(-1000px);
    transform: translateX(-1000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    -ms-transform: translateX(30px);
    transform: translateX(30px);
  }

  80% {
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
	-webkit-animation: bounceInLeft ease-out 1;
	-webkit-animation-delay: 0;
	animation: bounceInLeft ease-out 1;
	animation-delay: 0;
}


/* bounceInLeft1s 
------------------------------------------------*/
@keyframes bounceInLeft1s {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-1000px);
    -ms-transform: translateX(-1000px);
    transform: translateX(-1000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    -ms-transform: translateX(30px);
    transform: translateX(30px);
  }

  80% {
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.bounceInLeft1s {
  -webkit-animation-name: bounceInLeft1s;
  animation-name: bounceInLeft1s;
	-webkit-animation: bounceInLeft1s ease-out 1;
	-webkit-animation-delay: 1s;
	animation: bounceInLeft1s ease-out 1;
	animation-delay: 1s;
}










/* fadeIn
------------------------------------------------*/
.fadeIn {
  -webkit-animation: fadeIn 2s linear 1;
  animation: fadeIn 2s linear 1;
}


/* fadeInDown
------------------------------------------------*/
.fadeInDown {
	-webkit-animation-duration: 1s;
  animation-delay:1s;
}

/* fadeInUp
------------------------------------------------*/
.fadeInUp {
	-webkit-animation-duration: 1.5s;
  animation-delay: 1.5s;
}

/* bounceInUp
------------------------------------------------*/
.bounceInUp {
	-webkit-animation-duration: 0.5s;
  animation-delay: 0.5s;
}