charset="Shift_JIS"

/* navigation
--------------------------------------------------*/
nav ul{
   display: block;
   list-style-type: none;
}

nav li{
   display: block;
   width: 160px;
   float: left;
   color: #ffffff;
}

nav a{
   color: #fff;
   background: #000080;
   display: block;
   height: 70px;
   padding: 6px 0;
   border-left: 1px solid #fff;
   border-right: 1px solid #fff;
   text-align: center;
   text-decoration: none;
}

/* flame
--------------------------------------------------*/
.flame{
   width: 928px;
   border-top: 0px none;
   border-right: 1px solid;
   border-bottom: 1px solid;
   border-left: 1px solid;
}

.flame-cell01{
  color: #FFFFFF;
  background: #000080;
  border: none;
  padding: 3px 3px 3px 7px;
}
 .flame-cell02{
  background: #fff;
  padding: 14px;
}

/* text
--------------------------------------------------*/
#p1 img{
	float: left;
}
#p2 img{
	float: right;
}

/* footer
--------------------------------------------------*/
footer{
   background-color: #FFFFFF;
   border-top: 5px solid #000080;
}

#copyright{
   padding-top: 20px;
}

/* link
--------------------------------------------------*/
a:visited{
   color: inherit;
   text-decoration: none;
}

/* bounce
--------------------------------------------------*/
.bounce-img {
  animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { 
    transform: translateY(0);
  }
  40% { 
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

/* load
--------------------------------------------------*/
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeOut 1.5s 2.5s forwards;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    visibility: hidden;
  }
}

.loading__logo {
  opacity: 0;
  animation: logo_fade 2s 0.5s forwards;
}

@keyframes logo_fade {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  60% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
  }
}

/* shivering
--------------------------------------------------*/
.shivering {
  animation: shivering 2s linear infinite;
}

/* shivering */
@keyframes shivering {
  0%, 7% {
    transform: rotateZ(0);
  }
  15% {
    transform: rotateZ(-15deg);
  }
  20% {
    transform: rotateZ(10deg);
  }
  25% {
    transform: rotateZ(-10deg);
  }
  30% {
    transform: rotateZ(6deg);
  }
  35% {
    transform: rotateZ(-4deg);
  }
  40%, 100% {
    transform: rotateZ(0);
  }
}

/* slideIn
--------------------------------------------------*/
.slideInB-img {
  animation: slideInB 3s ease-in-out infinite;
}

@keyframes slideInB {
  from { 
    transform: translateY(100%);
    opacity: 0;s
  }
  to { 
    transform: translateY(0%);
    opacity: 1; 
  }
}

.slideInT-img {
  animation: slideInT 3s ease-in-out infinite;
}

@keyframes slideInT {
  from { 
    transform: translateY(-100%);
    opacity: 0;
  }
  to { 
    transform: translateY(0%);
    opacity: 1; 
  }
}