/*================================================
	初期設定
================================================*/

/* リセット */
* { margin:0; padding:0; }
/* clearfix（回り込み解除） */
*:after { display:block; clear:both; }
/* はみ出し対策 */
body {
	background: #100c1b;
	background-size: 100%;
	background-repeat: repeat-y;
	color: #fff;
	font-family:sans-serif;
	-webkit-text-size-adjust: none;
	font-size: 15px;
	font:16px/1.6 Arial,Roboto,"Droid Sans","游ゴシック",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
	-webkit-text-size-adjust: 100%;
	margin:0;
	padding:0;
	width:100%;
}
/* HTML5に対応していないOS対策 */
article, aside, figure, footer, header,hgroup, nav, section { display:block; }

/* 画像下の変な余白削除 */
img { vertical-align: top; max-width:100%;
height: auto;}

.w100p{width: 100%;}
.w95p{width: 95%;}
.w90p{width: 90%;}
.w85p{width: 85%;}
.w80p{width: 80%;}

@media screen and (min-width: 640px) {
  body{
    margin:auto;
    background:#100c1b;
  }
  #wrapp{
    width: 640px;
    margin:auto;
    background: url(../img/all_bg.jpg) #100c1b;
    background-size: 100%;
    background-repeat: repeat-y;
  }
#prof {
    min-height: auto !important;
  }
.txt_01 {
    top: 390px;
    }
.arrow {
    top: -36px;
    }
.enter_btn {
    width: 350px;
    height: 350px;
    top: px;
}
.charge_end_txt {
    margin-top: 570px;
} 
p.moon_f_top img {
    top: 180px;
}
	
p.main_top img {
    top: 180px;
}

.charge_step img {
    top: 180px;

}

  }
@media screen and (max-width: 320px) {


p.aura_main img{
    width: 170px;
    height: auto;

}

.enter_btn {
    top: 94px;
    width: 200px;
    height: 140px;
}

.txt_01 {
    top: 330px;
    font-size: 14px;
    }
.arrow {
    top: -23px;
    }
    
.charge_end_txt{
  margin-top: 350px;
  font-size: 14px;
}
.kakunin_deta {
    font-size: .9em;
}
}


.topimage {
  position: relative;
  background: url(../img/kv/top_bg.jpg);
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.title {
    margin: 0 auto;
    position: relative;
    z-index: 4;
}

#wrapp_form{
	margin: 0 auto;
	padding-bottom: 820px;
	position: relative;
	width: 100%;
}

.first{
	position:absolute;
	/*top: -8.8vw;*/
	top: -190px;
	width:100%;
}

.enter_txt{
	letter-spacing: 3px;
	position: absolute;
	right: 0;
	text-align: center;	
	top: 0;
	/*width: 98%;*/
	width: 100%;
}

p.moon_f_top img {
    position: absolute;
    left: 0;
    right: 0;
    /*width: 85%;*/
	width: 100%;
    /*top: 80px;*/
    margin: 0 auto;
}

p.main_top img {
    position: absolute;
    left: 0;
    right: 0;
    /*width: 85%;*/
	width: 100%;
    /*top: 80px;*/
    margin: 0 auto;
}

@keyframes 'pulse' {
  0%{
        opacity:0.2;
         }
    100%{
        opacity:1;
         }
}
@-webkit-keyframes 'pulse' {
  0%{
        opacity:0.2;
         }
    100%{
        opacity:1;
         }
}
.flash2{
-webkit-animation-name: pulse;
-webkit-animation-duration: 1.5s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:ease-in-out;
-webkit-animation-direction: alternate;
-webkit-animation-delay: 0s;
}

@keyframes 'pulse2' {
  0%{
        opacity:0.2;
         }
    100%{
        opacity:1;
         }
}
@-webkit-keyframes 'pulse2' {
  0%{
        opacity:0.2;
         }
    100%{
        opacity:1;
         }
}
.flash3{
-webkit-animation-name: pulse2;
-webkit-animation-duration: 0.7s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:ease-in-out;
-webkit-animation-direction: alternate;
-webkit-animation-delay: 0s;
}


.txt_01 {
    top: 380px;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 9;
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 0px 0px 10px #cb8100, 0px 0px 10px #ed9d13, 0px 0px 10px #ffbc47, 0px 0px 5px #fff;
    font-family: serif;
}

.charge_end_txt{
  display:none;
  position:absolute;
  width:100%;
  margin-top: 390px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align:center;
  font-weight:bold;
  font-size:18px;
  letter-spacing:4px;
  z-index: 3;
  color: #ffffff;
  font-family: serif;
  text-shadow: 0px 0px 10px #cb8100, 0px 0px 10px #ed9d13, 0px 0px 10px #ffbc47, 0px 0px 5px #fff;
}

.enter_area{
  position: relative;
  width: 100%;
  height: 100%;
  padding: 100% 0 0;
  z-index: 9;
}

.enter_btn {
    /*height: 280px;*/
	/*height: 50vw;*/
    left: 0;
    margin: 0 auto;
	position: absolute;
    /*top: 80px;*/
	top: 422px;
    right: 0;
	width: 350px;
}


/*----------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------*/


html{
max-width:100%;
margin:0 auto;
}

/*================================================
	基本的なアンカー設定
================================================*/




/*---------------------------------------
  js
---------------------------------------*/

.charge_step img,.charge_end,.circle_top,.circle_middle,.rolling,.circle_bottom{
  position:absolute;
  top: -20px;
}
.charge_end{
  display:none;
}
.circle_middle,.rolling,.circle_bottom,.charge_step img{
  opacity:0;
}

.charge_step img {
	z-index: 1;
    left: 0;
    right: 0;
	top: 180px;
	/*width: 100%;*/
    margin: 0 auto;
}


.circle_light img{
  width:25%;
}
@-webkit-keyframes rotate{
  0%{-webkit-transform: rotate(90deg);}
  100%{-webkit-transform: rotate(450deg);}
}
@keyframes rotate{ 
  0%{transform:rotate(90deg);}
  100%{transform: rotate(450deg);}
}
.flash{
  display:none;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  width:100%;
  height:100%;
  margin:auto;
  background:#fff;
  -webkit-animation: flash 2s;
  animation:flash 2s;
  -webkit-animation-fill-mode: flash 2s;
  animation-fill-mode:forwards;
  z-index:10;
}
@-webkit-keyframes flash{
  0%  {-webkit-transform: scale(1,1);}
  100%{-webkit-transform: scale(10,10);}
}
@keyframes flash{
  0%  {transform: scale(1,1);}
  100%{transform: scale(10,10);}
}




/****--------- 回転 ---------****/

@keyframes spin{
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@-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); }
}

@keyframes roll {
    from {
        transform: perspective(500px) rotateY(0deg);
    }
    50%{
        transform: perspective(500px) rotateY(180deg);
    }
    to{
        transform: perspective(500px) rotateY(360deg);
    }
}
.rolling{
  animation: spin 5s linear infinite;
  -webkit-animation: spin 5s linear infinite;
  -moz-animation: spin 5s linear infinite;
    width:240px;
    position: absolute;
    left:0;
    right: 0;
    top:-10px;
    margin: 0 auto;
    z-index: 2;
}


/*---------------------------------------
     footer
---------------------------------------*/
/*top page footer*/

footer {
    height: auto;
    width: 100%;
    padding: 0 0 3vw 0;
    margin: 0px;
    bottom: 0;
    position: relative;
	background: #100c1b;
    color: #fff;
	z-index: 20;
}

footer nav{
  margin:0 auto;
}

footer #menu-bar{
  position:relative;
  font-weight: normal;
}

footer #menu-bar ul{
  height:55px;
  margin:0 auto;
  position:relative;
  list-style: none;
}

footer #menu-bar .btn-home{
	background: url(../img/common/f_t00.png) 0 0 no-repeat;
	/*background-size: cover;*/
	background-size: 100%;
	/*height: 34px;*/
	height: 12vw;
	/*left: 10px;*/
	position: absolute;	
	/*top: 10px;*/
	top: 3vw;
	/*width: 80px;*/
	width: 30vw;
}

footer #menu-bar .btn-menu{
	background:url(../img/common/f_s00.png) 0 0 no-repeat;
	/*background-size: cover;*/
	background-size: 100%;
	/*height: 34px;*/
	height: 12vw;
	position: absolute;
	/*right:10px;*/
	right: 0vw;
	/*top: 10px;*/
	top: 3vw;
	/*width: 80px;*/
	width: 30vw;
}

footer #menu-bar .copy{
width: 140px;
height: 27px;
background-size: cover;
top: 5px;
margin: 0 auto;
position: absolute;
left: 0;
right: 0;

}

footer #menu-bar .copy p{
font-size: 10px;
text-align: center;
line-height: 1.5em;

}

footer #menu-bar li>a{
display:block;
height:100%;
text-indent:-9999px;
}