@charset "UTF-8";

/* ! CSSの構成 お問い合わせ ================================================== 

ログイン
会員登録
  
-------------------------------------------------- */
html {
  background: #36BFFF;
}
body {
  -webkit-perspective: 500;
  -webkit-transition: all .6s ease;
  transition: all .6s ease;
} 

.html_register_free  {
  background: #80D328;
}
.html_register_prime  {
  background: #E12C60;
}

.btnarea_top_10_center button,
.btnarea_top_10_center a{
	width: 195px;
}
a.btn_.connect_fb,
a.btn_.connect_tw{
	height: 37px;
  margin: 10px 0 0;
  border-radius: 100px;
  width: 195px;
  -webkit-box-shadow: 0px 3px 0px 0px #222, 0px 6px 4px 0px rgba(0,0,0,.16);
  box-shadow: 0px 3px 0px 0px #222, 0px 6px 4px 0px rgba(0,0,0,.16);
}
a.btn_.connect_fb:hover,
a.btn_.connect_tw:hover{
	-webkit-box-shadow: 0px 0px 0px 0px #222, 0px 0px 0px 0px rgba(0,0,0,.16);
	box-shadow: 0px 0px 0px 0px #222, 0px 0px 0px 0px rgba(0,0,0,.16);
}
a.btn_id{
  padding: 10px 0em;
  font: 700 13px/1em 'Hiragino Sans', sans-serif;
  margin: 10px 0 15px;
  background: #eb5c01;
  color: white;
}

/* バックグラウンド */
.bg_1 {background: #6A6867;} /*anknight*/
.bg_2 {background: #2A4370;} /*chintaicho*/
.bg_3 {background: #f2bc00;} /*gaiheking*/
.bg_4 {background: #D71D29;} /*kaurino*/
.bg_5 {background: #EF8988;} /*kirokun*/
.bg_6 {background: #BD88BD;} /*kyouikun*/
.bg_7 {background: #60daf5;} /*manshitsu*/
.bg_8 {background: #464140;} /*renotta*/
.bg_9 {background: #17A4E2;} /*robotta*/ 
.bg_10 {background: #6BCAEF;} /*tourokun*/



.body_login main {
  background: transparent;
  min-height: 100vh;
  padding: 60px 0;
  display: -webkit-flex; display: flex;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
}
.area_login {
  max-width: 360px;
  width: 100%;
  position: relative;
  z-index: 0;
}
.area_login.wide {
  max-width: 800px;
}
.area_login.wide .box_login {
  padding: 60px 60px;
  -webkit-box-shadow: 0px 4px 10px 0px rgba(0,0,0,.2);
  box-shadow: 0px 4px 10px 0px rgba(0,0,0,.2);
}

/* 白い箱 */
.box_login {
  background: #fff;
  border-radius: 8px;
  padding: 40px 30px;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  -webkit-transform-style:preserve-3d;
  position: relative;
  z-index: 2;
  -webkit-transform: rotate3d(1,0,0,0deg) scale(1);
  transform: rotate3d(1,0,0,0deg) scale(1);
  -webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,.1);
  box-shadow: 0px 2px 2px 0px rgba(0,0,0,.1);
}
[class*="on_"] .box_login {
  animation: login_on .4s ease forwards;
}
.off .box_login {
  animation: login_off .6s ease forwards;
}
/*
@keyframes login_on {
  0% {
    -webkit-transform: rotate3d(1,0,0,0deg) scale(1);
    transform: rotate3d(1,0,0,0deg) scale(1);
  }
   30% {
    -webkit-transform: rotate3d(1,0,0,5deg) scale(1.00);
    transform: rotate3d(1,0,0,5deg) scale(1.00);
    -webkit-box-shadow: 0px 40px 60px 2px rgba(0,0,0,.1), 0px 80px 80px 6px rgba(0,0,0,.1);
    box-shadow: 0px 60px 60px 2px rgba(0,0,0,.1), 0px 100px 80px 6px rgba(0,0,0,.1);  
  }
  100% {
    -webkit-transform: rotate3d(1,0,0,0deg) scale(1.02);
    transform: rotate3d(1,0,0,0deg) scale(1.02);
    -webkit-box-shadow: 0px 40px 60px 2px rgba(0,0,0,.1), 0px 80px 80px 6px rgba(0,0,0,.1);
    box-shadow: 0px 40px 60px 2px rgba(0,0,0,.1), 0px 80px 80px 6px rgba(0,0,0,.1);  
  }
}
@keyframes login_off {
  0% {
    -webkit-transform: rotate3d(1,0,0,0deg) scale(1.02);
    transform: rotate3d(1,0,0,0deg) scale(1.02);
    -webkit-box-shadow: 0px 40px 60px 2px rgba(0,0,0,.1), 0px 80px 80px 6px rgba(0,0,0,.1);
    box-shadow: 0px 40px 60px 2px rgba(0,0,0,.1), 0px 80px 80px 6px rgba(0,0,0,.1);  

  }
   30% {
    -webkit-transform: translateY(2px) rotate3d(1,0,0,-2deg) scale(1.00);
    transform: translateY(2px) rotate3d(1,0,0,-2deg) scale(1.00);
    -webkit-box-shadow: 0px 40px 60px 2px rgba(0,0,0,.1), 0px 80px 80px 6px rgba(0,0,0,.1);
    box-shadow: 0px 0px 20px 2px rgba(0,0,0,.1), 0px 0px 20px 2px rgba(0,0,0,.1);  
  }
  100% {
    -webkit-transform: translateY(0) rotate3d(1,0,0,0deg) scale(1);
    transform: translateY(0) rotate3d(1,0,0,0deg) scale(1);
  }
}
*/


/* 会員変更 */
.change_register {
  cursor: pointer;
  color: #fff;
  font: 800 14px/1.2em 'noto sans japanese';
  text-align: center;
  padding: 8px 16px;
  border-radius: 80px;
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  position: absolute;
  top: 20px;
  right: 20px;
}

/* キャラクター */
.area_login > .img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50% , -50%);
  -ms-transform: translate(-50% , -50%);
  transform: translate(-50% , -50%);
  z-index: 1;
}
.area_login > .img .character {
  display: block;
  width: 100px;
  height: 200px;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  -webkit-transition: all .6s ease;
  transition: all .6s ease;
}
.area_login.on_1 > .img span { background: url(../img/character/img_anknight.svg);}
.area_login.on_2 > .img span { background: url(../img/character/img_chintaicho.svg);}
.area_login.on_3 > .img span { background: url(../img/character/img_gaiheking.svg);}
.area_login.on_4 > .img span { background: url(../img/character/img_kaurino.svg);}
.area_login.on_5 > .img span { background: url(../img/character/img_kirokun.svg);}
.area_login.on_6 > .img span { background: url(../img/character/img_kyouikun.svg);}
.area_login.on_7 > .img span { background: url(../img/character/img_manshitsu.svg);}
.area_login.on_8 > .img span { background: url(../img/character/img_renotta.svg);}
.area_login.on_9 > .img span { background: url(../img/character/img_robotta.svg);}
.area_login.on_10 > .img span { background: url(../img/character/img_tourokun.svg);}

.fly_1 .character { animation: fly_1 .6s ease forwards;}
.fly_2 .character { animation: fly_2 .6s ease forwards;}
.fly_3 .character { animation: fly_3 .6s ease forwards;}
.fly_4 .character { animation: fly_4 .6s ease forwards;}
.fly_5 .character { animation: fly_5 .6s ease forwards;}
.fly_6 .character { animation: fly_6 .6s ease forwards;}
.fly_7 .character { animation: fly_7 .6s ease forwards;}
.fly_8 .character { animation: fly_8 .6s ease forwards;}
.fly_9 .character { animation: fly_9 .6s ease forwards;}
.fly_10 .character { animation: fly_10 .6s ease forwards;}
@keyframes fly_1 {  100% { -webkit-transform: translate(-210px , -100px) rotate(-60deg);}}
@keyframes fly_2 {  100% { -webkit-transform: translate(-140px , -230px) rotate(-15deg);}}
@keyframes fly_3 {  100% { -webkit-transform: translate(0 , -240px) rotate(0deg);}}
@keyframes fly_4 {  100% { -webkit-transform: translate(140px , -230px) rotate(15deg);}}
@keyframes fly_5 {  100% { -webkit-transform: translate(220px , -100px) rotate(60deg);}}
@keyframes fly_6 {  100% { -webkit-transform: translate(220px , 100px) rotate(120deg);}}
@keyframes fly_7 {  100% { -webkit-transform: translate(140px , 230px) rotate(160deg);}}
@keyframes fly_8 {  100% { -webkit-transform: translate(0 , 240px) rotate(180deg);}}
@keyframes fly_9 {  100% { -webkit-transform: translate(-140px , 230px) rotate(-160deg);}}
@keyframes fly_10 {  100%  { -webkit-transform: translate(-220px , 100px) rotate(-120deg);}}




.box_login .logo {
  display: block;
  margin: 0 0 30px;
}
.box_login .logo img {
  display: block;
  width: 280px;
  margin: 0 auto;
}
.box_login p.ttl {
  font: 600 16px/1em 'noto sans japanese';
  text-align: center;
}
.area_login.wide .box_login p.ttl {
  font-size: 24px;
  margin: 40px 0 0;
}
.box_login form {
  margin: 40px 0 0;
}
.box_login .form_ttl p {
  font: 400 13px/1em 'noto sans japanese';
}
.box_login input[type="text"],
.box_login input[type="password"],
.box_login select {
  -webkit-box-shadow: none;
  box-shadow: none;
  border-radius: 0;
  border: none;
  background: transparent;
  border-bottom: 1px solid #ddd;
}




/* ! 会員登録 ================================================== */
.list_register {
  margin-top: 40px;
}



/* ! 会員登録完了 ================================================== */
.area_complete {
  margin: 40px 0 0;
}
.area_complete .copy {
  font: 400 36px/1em 'noto sans japanese';
  text-align: center;
  margin: 0 0 40px;
}
.area_complete p {
  font: 400 14px/1.6em  'noto sans japanese';
}
.area_complete p + p {
  margin: 12px 0 0;
}
small {
  color: #999;
  font: 300 12px/1.6em 'noto sans japanese';
  display: inline-block;
  margin: 12px 0 0;
}