@charset "utf-8";
@import url("reset.css");

body {
  margin: 0px;
  padding: 0px;
  font-size: 12px;
  font-family: "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic";
  background-color: #FFFFFF;
  color: #000;
}

*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: " ";
}
.clearfix:after {
  clear: both;
}

a.link_1 {
  color: #0099FB;
  text-decoration: underline;
}
a.link_1:hover {
  color: #0099FB;
  text-decoration: none;  

}

article {
  min-width: 1000px;
  margin: 0 auto;
  overflow: hidden;
}

.inner{
  width: 1000px;
  margin:0 auto;
}

/*============
header
============*/
header{
  background: url("../images/header-bg.jpg")no-repeat top center;
}

header .inner{
  background: url("../images/header-inner-bg.jpg") no-repeat top center;
  height: 774px;
  position: relative;
}

header .inner .entry {
  position: absolute;
  top: 467px;
  left: -15px;
  z-index: 2;
}
header .inner .openID {
  position: absolute;
  top: 545px;
  left: 249px;
  z-index: 2;
}

header .inner h1{
    position: absolute;
    top: 2px;
    left: 24px;
    z-index: 2;
}

header .inner h2{
  position: absolute;
  top: 368px;
  right: -36px;
    z-index: 2;
    animation: fadein 1s ease both;
  animation-delay: 1.5s;
}

header .inner .openID,
header .inner .entry,
header .inner .cp{
    animation: fadein 1s ease both;
  animation-delay: 2.5s;
}

header .inner .cp{
  position: absolute;
  top: 241px;
  left: 24px;
  z-index: 2;
}

header .inner .chara{
  position: absolute;
  top: 0;
  left: 37px;
  animation: fadein 1s ease both;
  animation-delay: 0.5s;
}

/*fadein*/
@keyframes fadein {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/*============
about
============*/
#about{
  background: url("../images/about-bg.jpg") no-repeat top center fixed;
}

#about .header-bottom{
  background: url("../images/header-bottom.png") no-repeat top center;
  height: 130px;
}

#about .inner{
  position: relative;
  height: 1218px;
}

@keyframes chara {
    0% { transform:translateY(-10px); }
  100% { transform:translateY(  0px); }
}

#about .inner .chara li{
    position: absolute;
}

#about .inner .chara li:nth-of-type(1){
    top: 37px;
    left: -353px;
    animation: chara 0.8s ease-in-out infinite alternate;
}

#about .inner .chara li:nth-of-type(2){
    top: 404px;
    left: -380px;
    animation: chara 1.3s ease-in-out infinite alternate;
}

#about .inner .chara li:nth-of-type(3){
    top: 526px;
    left: -265px;
    animation: chara 0.9s ease-in-out infinite alternate;
}

#about .inner .chara li:nth-of-type(4){
    top: 847px;
    left: -442px;
    animation: chara 1.2s ease-in-out infinite alternate;
}

#about .inner .chara li:nth-of-type(5){
    top: 53px;
    right: -302px;
    animation: chara 1.4s ease-in-out  infinite alternate;
}

#about .inner .chara li:nth-of-type(6){
    top: 429px;
    right: -172px;
    animation: chara 1.2s ease-in-out  infinite alternate;
}

#about .inner .chara li:nth-of-type(7){
    top: 347px;
    right: -279px;
    animation: chara 0.9s ease-in-out  infinite alternate;
}

#about .inner .chara li:nth-of-type(8){
    top: 752px;
    right: -464px;
    animation: chara 1.3s ease-in-out  infinite alternate;
}

#about .inner .chara li:nth-of-type(9){
    top: 878px;
    right: -268px;
    animation: chara 1.5s ease-in-out  infinite alternate;
}


#about .inner h2{
  margin-top: 31px;
  text-align: center;
}

#about .inner .content-box{
  background: url("../images/about-content-bg.png") no-repeat top center;
  height: 940px;
  margin-top: -21px;
}

#about .inner .content-box ul{
  text-align: center;
  padding-top: 55px;
}

#about .inner .content-box li:last-child{
    padding: 25px 0 20px 0;
}

#about .inner .content-box .movie {
  width: 825px;
  height: 465px;
  margin: 0 0 0 88px;
  padding: 10px 0 0 10px;
  background: url("../images/movie-bg.jpg") no-repeat top center;
}

#about .charm-top{
  background: url("../images/charm-bg-top.png") no-repeat top center;
  height: 40px;
}
/*============
charm
============*/
#charm{
  background: url("../images/charm-bg.jpg")no-repeat top center;
}

#charm .inner{
  height: 2616px;
  position: relative;
}

#charm .inner h2{
  padding: 32px 0 20px 0;
  text-align: center;
}

#charm .inner .h3-center{
  text-align: center;
}

#charm .inner .charm-container {
  width: 862px;
  margin: 0 auto;
  text-align: center;
  padding: 8px 0 25px 0;
}

#charm .inner .img-right li{
  float: right;
  margin-right: 5px;
}

#charm .inner .img-left li{
  float: left;
  margin-right: 5px;
}

#charm .inner .charm-content-01 h3{
    position: absolute;
    top: 1085px;
    right: 0;
}

#charm .inner .charm-content-01 ul{
    position: absolute;
    top: 1162px;
    right: 0;
    z-index: 1;
}

#charm .inner .charm-content-01 .charm-chara{
    background: url("../images/charm-chara01.png") no-repeat;
    width: 664px;
    height: 662px;
    position: absolute;
    top: 950px;
    left: -95px;
    animation: chara 1.2s ease-in-out infinite alternate;
}

#charm .inner .charm-content-02 h3{
    position: absolute;
    top: 1578px;
    left: 0;
}

#charm .inner .charm-content-02 ul{
    position: absolute;
    top: 1652px;
    left: 0;
}

#charm .inner .charm-content-02 .charm-chara{
    background: url("../images/charm-chara02.png") no-repeat;
    width: 486px;
    height: 600px;
    position: absolute;
    top: 1496px;
    right: -12px;
    animation: chara 1.5s ease-in-out infinite alternate;
}

#charm .inner .charm-content-03 h3{
    position: absolute;
    top: 2067px;
    right: 0;
}

#charm .inner .charm-content-03 ul{
    position: absolute;
    top: 2144px;
    right: 0;
}

#charm .inner .charm-content-03 .charm-chara{
    background: url("../images/charm-chara03.png") no-repeat;
    width: 455px;
    height: 486px;
    position: absolute;
    top: 2113px;
    left: 11px;
    animation: chara 1s ease-in-out infinite alternate;
}


#particles-js{ 
  position:fixed;/*描画固定*/
  z-index:-1;/*描画を一番下に*/
  width: 100%;
  height: 100%;
  background-color:#020E34;/*背景色*/
}

/*============
footer
============*/

footer{
  background:url("../images/footer-bg.jpg") repeat top left;
}

footer .charm-bottom{
  background: url("../images/charm-bg-bottom.png") no-repeat top center;
  height: 40px;
}

footer .inner{
  height: 334px;
}

footer .btn{
  text-align: center;
  padding-top: 54px;
  margin-bottom:10px;
}

footer .btn li:last-child{
  padding-top: 11px;
}

footer .inner div{
  text-align: center;
}

footer .footer-bottom{
  background:#fff;
}

footer .footer-bottom .inner{
  height: 135px;
}

footer .footer-bottom .inner p,
footer .footer-bottom .inner p a{
  text-align: center;
  color: #000;
  padding-top: 41px;
  margin-bottom: 13px;
}

footer .footer-bottom .inner p a{
  text-decoration: none;
  padding-bottom: 0;
}

footer .footer-bottom .inner p a:hover{
  color: #1e4c00;
} 

footer .footer-bottom .inner small{
  text-align: center;
  display: block;
  margin-bottom: 18px;
}