@charset "utf-8";
/*
	キラキラ☆プリキュアアラモード - layout.css
	COPYRIGHT(C) ABC・東映アニメーション  All Right reserved.
*/
/* ==========================================================
	大枠
========================================================== */
body {
  background: url(../images/bg_footer.jpg) repeat;
}
#contentsArea {
  background: url(../images/bg_raceHeader.png),url(../images/bg_raceFooter.png),url(../images/bg_repeat.jpg);
  background-position: center top,center bottom,center;
  background-repeat: repeat-x,repeat-x,repeat;
  text-align: center;
}
#contentsArea .mainArea {
  width: 780px;
  margin: 0 auto;
  padding-top: 90px;
  height: 550px;
}
#contentsArea .mainArea #logo {
  width: 500px;  
  height: 500px;
  margin: -90px auto 0;  
  position: relative;
    -webkit-animation:blink 2s ease-in-out 1 alternate;
    -moz-animation:blink 2s ease-in-out 1 alternate;
    animation:blink 2s ease-in-out 1 alternate;
}
  @-webkit-keyframes blink{
      0% {opacity:0;}
      100% {opacity:1;}
  }
  @-moz-keyframes blink{
      0% {opacity:0;}
      100% {opacity:1;}
  }
  @keyframes blink{
      0% {opacity:0;}
      100% {opacity:1;}
  }  
#contentsArea .mainArea .txt01,
#contentsArea .mainArea .txt02 {
  position: relative;
  z-index: 9999;
}
#contentsArea .mainArea .txt01 {
    -webkit-animation:blink 6s ease-in-out 1 alternate;
    -moz-animation:blink 6s ease-in-out 1 alternate;
    animation:blink 6s ease-in-out 1 alternate;
}
  @-webkit-keyframes blink{
      100% {opacity:1;}
  }
  @-moz-keyframes blink{
      100% {opacity:1;}
  }
  @keyframes blink{
      100% {opacity:1;}
  }
#contentsArea .mainArea .txt02 {
  margin-top: -140px;  
    -webkit-animation:blink 6s ease-in-out 1 alternate;
    -moz-animation:blink 6s ease-in-out 1 alternate;
    animation:blink 6s ease-in-out 1 alternate;
}
  @-webkit-keyframes blink{
      0% {opacity:0;}
      100% {opacity:1;}
  }
  @-moz-keyframes blink{
      0% {opacity:0;}
      100% {opacity:1;}
  }
  @keyframes blink{
      0% {opacity:0;}
      100% {opacity:1;}
  }
#contentsArea .mainArea #logo .base,
#contentsArea .mainArea #logo .kira01,
#contentsArea .mainArea #logo .kira02,
#contentsArea .mainArea #logo .kira03,
#contentsArea .mainArea #logo .kira04,
#contentsArea .mainArea #logo .kira05,
#contentsArea .mainArea #logo h1,
#contentsArea .mainArea #logo .kira {
  position: absolute;
}
#contentsArea .mainArea #logo .base{
  width: 500px;
  height: 500px;
  background: none;
    -webkit-animation: spin 600s linear infinite;
    -moz-animation: spin 600s linear infinite;
    -ms-animation: spin 600s linear infinite;
    -o-animation: spin 600s linear infinite;
    animation: spin 600s linear infinite;
}

@-webkit-keyframes spin {
  0% {-webkit-transform: rotate(0deg);}
  100% {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin {
  0% {-moz-transform: rotate(0deg);}
  100% {-moz-transform: rotate(360deg);}
}
@-ms-keyframes spin {
  0% {-ms-transform: rotate(0deg);}
  100% {-ms-transform: rotate(360deg);}
}
@-o-keyframes spin {
  0% {-o-transform: rotate(0deg);}
  100% {-o-transform: rotate(360deg);}
}
@keyframes spin {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}
#contentsArea .mainArea #logo .kira01{
    -webkit-animation:blink 1.5s ease-in-out infinite alternate;
    -moz-animation:blink 1.5s ease-in-out infinite alternate;
    animation:blink 1.5s ease-in-out infinite alternate;
}
  @-webkit-keyframes blink{
      0% {opacity:0;}
      100% {opacity:1;}
  }
  @-moz-keyframes blink{
      0% {opacity:0;}
      100% {opacity:1;}
  }
  @keyframes blink{
      0% {opacity:0;}
      100% {opacity:1;}
  }

#contentsArea .mainArea #logo .kira02{
    -webkit-animation:blink 1.5s ease-in-out infinite alternate;
    -moz-animation:blink 1.5s ease-in-out infinite alternate;
    animation:blink 1.5s ease-in-out infinite alternate;
}
  @-webkit-keyframes blink{
      0% {opacity:0;}
      100% {opacity:1;}
  }
  @-moz-keyframes blink{
      0% {opacity:0;}
      100% {opacity:1;}
  }
  @keyframes blink{
      0% {opacity:0;}
      100% {opacity:1;}
  }
#contentsArea .mainArea #logo .kira03{
    -webkit-animation:blink 1.75s ease-in-out infinite alternate;
    -moz-animation:blink 1.75s ease-in-out infinite alternate;
    animation:blink 1.75s ease-in-out infinite alternate;
}
  @-webkit-keyframes blink{
      0% {opacity:0;}
      100% {opacity:1;}
  }
  @-moz-keyframes blink{
      0% {opacity:0;}
      100% {opacity:1;}
  }
  @keyframes blink{
      0% {opacity:0;}
      100% {opacity:1;}
  }
#contentsArea .mainArea #logo .kira04{
    -webkit-animation:blink 2s ease-in-out infinite alternate;
    -moz-animation:blink 2s ease-in-out infinite alternate;
    animation:blink 2s ease-in-out infinite alternate;
}
  @-webkit-keyframes blink{
      0% {opacity:0;}
      100% {opacity:1;}
  }
  @-moz-keyframes blink{
      0% {opacity:0;}
      100% {opacity:1;}
  }
  @keyframes blink{
      0% {opacity:0;}
      100% {opacity:1;}
  }
#contentsArea .mainArea #logo .kira05{
    -webkit-animation:blink 1.25s ease-in-out infinite alternate;
    -moz-animation:blink 1.25s ease-in-out infinite alternate;
    animation:blink 1.25s ease-in-out infinite alternate;
}
  @-webkit-keyframes blink{
      0% {opacity:0;}
      100% {opacity:1;}
  }
  @-moz-keyframes blink{
      0% {opacity:0;}
      100% {opacity:1;}
  }
  @keyframes blink{
      0% {opacity:0;}
      100% {opacity:1;}
  }
#contentsArea .mainArea #logo h1{

  }
#contentsArea .mainArea #logo .kira {
  top: 0;
  right: -150px;
}

/* FOOTER */
#footer {
  text-align: center;
}
.bnrArea {
  background: #fffcdc; 
}
.bnrArea ul {
  width: 386px;
  margin: 0 auto;
  padding: 20px 0; 
}
.bnrArea ul li {
  display: inline-block;
  padding: 0 5px;
}
#footer p {
  color: #812a2e;
  font-size: 12px;
  padding: 20px 0 40px;
}