@charset "UTF-8";
/* CSS Document */

html{
	
  max-width: 1024px;
}



body {
	font-family: 'Arial',YuGothic,'Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', Meiryo,'ＭＳ ゴシック',"ＭＳ ゴシック", "MS Gothic", "monospace";

	margin: 0px;
	padding: 0px;
	width: 100%;
	animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
	
	
	
}



@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}


.box01{
	position: absolute;
	 top: -350px;
	  right: 0px;
	  bottom: 0px;
	  left: 500px;
	  margin: auto;
	width: 440px;
	height: 300px;
	
	
	/*背景画像*/
	background-image:url("kamisama.gif");
	background-size:cover;
	z-index: 2;
}



.box02{
	position: absolute;
	 top: 400px;
	  right: 0px;
	  bottom: 0px;
	  left: 500px;
	  margin: auto;
	width: 440px;
	height: 300px;
	
	
	/*背景画像*/
	background-image:url("negai.gif");
	background-size:cover;
	z-index: 2;
}




.box03 {
	background-color:#4B5790;
	width: 100%;

	height: 800px;
	
	position: absolute;
	top: 0px;
	background-image:url("");
	background-size: cover;
	
}



   

.story01{
	 position: absolute;
	  top: 80px;
	  right: 0px;
	  bottom: 0px;
	  left: 0px;
	  margin: auto;
	width: 100%;
	height: 800px;
	text-align: center;
	display: inline-block;
	z-index:2;}
	

.item {
  position: f
right: 100px;
  margin-right: 700px;
  padding: 0px;
  width: 800px;
  height: 	100px;
 
  color: #000000;
  list-style: none;
  text-align: center;
  line-height: 0px;
  opacity: 0;
}

.item:nth-child(1) {
  -webkit-animation: example 0.5s ease 0.5s 1 forwards;
  animation: example 0.5s ease 0.5s 1 forwards;
}

.item:nth-child(2) {
  -webkit-animation: example 0.5s ease 2s 1 forwards;
  animation: example 0.5s ease 2s 1 forwards;
}

.item:nth-child(3) {
  -webkit-animation: example 0.5s ease 3s 1 forwards;
  animation: example 0.5s ease 3s 1 forwards;
}

.item:nth-child(4) {
  -webkit-animation: example 0.5s ease 4s 1 forwards;
  animation: example 0.5s ease 4s 1 forwards;
}

.item:nth-child(5) {
  -webkit-animation: example 0.5s ease 5s 1 forwards;
  animation: example 0.5s ease 5s 1 forwards;
}

.item:nth-child(6) {
  -webkit-animation: example 0.5s ease 6s 1 forwards;
  animation: example 0.5s ease 6s 1 forwards;
}

.item:nth-child(7) {
  -webkit-animation: example 0.5s ease 7s 1 forwards;
  animation: example 0.5s ease 7s 1 forwards;
}

.item:nth-child(8) {
  -webkit-animation: example 0.5s ease 8s 1 forwards;
  animation: example 0.5s ease 8s 1 forwards;
}

.item:nth-child(9) {
  -webkit-animation: example 0.5s ease 9s 1 forwards;
  animation: example 0.5s ease 9s 1 forwards;
}
@-webkit-keyframes example {
  100% {
    opacity: 1;
  }
}
@keyframes example {
  100% {
    opacity: 1;
  }
}
 1×0.5×0.25× Rerun
Resources


.shake{
	position: absolute;
	 top: 0px;
	  right: 0px;
	  bottom: 0px;
	  left: 0px;
	  margin: auto;
	width: 1120px;
	height: 800px;
	
	/*背景画像*/
	background-image:url("");
	background-size: cover;
	z-index: 2;
}


.index{
	position: absolute;
	right:-200px;
	top: -46px;}

.container4 {
  
  position: relative;
  top: -75px;
  left: 0px;
 bottom: 0px;
  margin: 0 auto;
  display: block;
  text-align: center;
  color: #000000;
  font: bold;
  z-index: 8;
}





ul {
  list-style: none;
  padding: 0px;
  cursor: default;
  margin: auto;
 font: bold;
 position: center;
 
 
}

li {
  display: inline-block;
  line-height: 45px;
  perspective: 1000px;  
}

li span {
	position: relative;
	
	display: inline-block;
	width: 100px;
  background: #FFFFFF;
	transition: transform 0.3s;
	transform-origin: 50% 0;
	transform-style: preserve-3d;
	font: bold;
}

li span::before {
	position: absolute;
	font-size: 12px;
	top: 100%;
	left: 0;
	width: 100%;
	height: 100%;
	background: #FFFFFF;
	content: attr(data-hover);
	transition: background 0.2s;
	transform: rotateX(-90deg);
	transform-origin: 50% 0;
}

li:hover span,
li:focus span {transform: rotateX(90deg) translateY(-22px);}

li:hover span::before,
li:focus span::before {background: #FFFFFF;}







.index{
	position: absolute;
	right:60px;
    top: 820px;

}

header {
  text-align: center; 
  margin: 15px 0;
	background-color: #5F5A5A;
	position: static;
	right: 700px;
	width: 1px;
	top: 0px;
	z-index: 7;

}

a {color: #5F5A5A;
  text-decoration: none;
  }

h1 {
	
    background-color: #5F5A5A;
    position: relative;
	top: 0px;
	height: 0px;
	
   font-color:#000000;}

h5 {
    background-color: #FFFFFF;
    font-color:#000000;
  }